This is css code for the product layout in this site template (1 and 4)
shop-product {
font-size: 1.2rem;
max-width: 22rem;
font-family: "Diatype Variable";
font-style: normal;
font-weight: 400;
font-variation-settings: 'slnt' 0, 'MONO' 0;
letter-spacing: 0em;
margin-bottom: 2em;
}
shop-product::part(price) {
text-align: left;
font-size: 1.7rem;
max-width: 22rem;
font-family: "Diatype Variable";
font-style: normal;
font-weight: 400;
color: rgba(0, 0, 0, 0.75);
border: 0px solid rgba(0, 0, 0, 0.2);
line-height: 1.1;
margin-bottom: 0.1em;
padding: 0.0em 0em 0.2em 0.2em;
}
shop-product::part(dropdown) {
width: 100%;
color: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.0);
background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
background-repeat: no-repeat;
background-position: top 0em right .1em;
line-height: 1.2;
padding: 0.58em 2em 0.55em 0.9em;
border-radius: .5em;
margin-bottom: 0.5em;
}
shop-product::part(button) {
background: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.75);
text-align: center;
line-height: normal;
width: 90%;
padding: 0.5em 1em;
cursor: pointer;
border-radius: 0em;
}
shop-product::part(button):active {
opacity: .7;
}
This is css code for the product layout from TEST.CO site template
shop-product {
min-width: 100%;
font-size: 1.0em;
color: rgba(0, 0, 0, 0.85);
font-family: "Diatype Variable";
font-style: normal;
font-variation-settings: 'slnt' 0, 'MONO' 0;
}
shop-product::part(price) {
position: absolute;
right: 0;
bottom: 0;
line-height: normal;
padding: 0.6em 0.6em 0.6em 0.6em;
align-content: center;
text-align: left;
color: rgba(255, 255, 255, 0.85);
padding-right: 0.6em;
pointer-events: none;
user-select: none;
box-sizing: border-box;
}
shop-product::part(dropdown) {
width: 100%;
padding: 0.6em 0.6em 0.6em 0.6em;
margin-bottom: 0.6em;
border-radius: 0em;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.85);
outline: 0.075em solid rgba(0, 0, 0, 0.85);
outline-offset: -0.075em;
background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
background-repeat: no-repeat;
background-position: top 0em right .1em;
}
shop-product::part(button),
shop-product::part(error) {
width: 100%;
padding: 0.6em 0.6em 0.6em 0.6em ;
align-content: center;
border-radius: 0em;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.85);
outline: 0.075em solid rgba(0, 0, 0, 0.85);
outline-offset: -0.075em;
cursor: pointer;
}
shop-product::part(button):active {
opacity: .7;
}
Horizontal width and layout :
shop-product {
font-size: 1.2rem;
max-width: 50rem;
font-family: "Diatype Variable";
font-style: normal;
font-weight: 400;
font-variation-settings: 'slnt' 0, 'MONO' 0;
letter-spacing: 0em;
margin-bottom: 2em;
text-align: left;
align-content: center;
}
shop-product::part(price) {
text-align: left;
font-size: 1.8rem;
max-width: 22rem;
font-family: "Diatype Variable";
font-style: normal;
font-weight: 400;
color: rgba(0, 0, 0, 0.75);
border: 0px solid rgba(0, 0, 0, 0.2);
line-height: 1.1;
margin-bottom: 0.1em;
padding: 0.0em 1em 0.2em 0.2em;
}
shop-product::part(dropdown) {
width: 50%;
text-align: center;
color: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.0);
background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
background-repeat: no-repeat;
background-position: top 0em right .1em;
line-height: 1.2;
padding: 0.58em 2em 0.55em 0.9em;
border-radius: .1em;
margin-bottom: 0.5em;
}
shop-product::part(button),
shop-product::part(error) {
width: 50%;
padding: 0.6em 0.6em 0.6em 0.6em ;
align-content: center;
border-radius: 0em;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.85);
outline: 0.075em solid rgba(255, 255, 255);
outline-offset: -0.075em;
cursor: pointer;
text-align: center;
border: 6px solid rgba(255, 255, 255);
}
shop-product::part(button):active {
opacity: .7;
}