*, ::after, ::before {padding: 0; margin: 0; box-sizing: border-box;}


html {font-size: 20px; scroll-behavior: smooth;}
body {color: black;}
body, input, button, select, textarea {font-family: 'Jost'; font-size: 1rem; background: transparent; border: 0;}

body {
    padding: 1rem; 
    min-height: 100vh; 
    background: #f4f4f4;
    display: flex; 
    flex-direction: column;
}
body > .container {padding: 1rem 1rem 3rem; margin: 0 auto; max-width: 50rem; background: white; box-shadow: 0px 0px 0px 2rem white; position: relative; width: 100%;}
body .campagne {
    width: calc(100% + 2rem); 
    background: rgb(189, 169, 6);; 
    color: white;
    text-align: center; 
    font-size: 0.85rem;
    padding: 0.45rem 1rem 0.55rem; 
    z-index: 2; 
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
}
body .campagne a {color: white!important;}
body .campagne p {display: inline;}
body .campagne .button {display: inline-block; font-size: 0.71rem; border: 1px solid white; background: transparent; padding: 0.1rem 0.5rem; font-weight: 400; margin: 0 2rem;}
body.home, body.home a {color: white;}
body.home {background: #222;}
body.home > svg {display: none;}
body.home > .container {background: none; box-shadow: none; margin: auto;}
body.home .footer,
body.home .header h1,
body.home a.shoppingcart {display: none;}
body.home a.header img {display: none;}
body.home a.header img + img {display: block;}
body.home a.shoppingcart img {filter: invert(1)}
body.home .content {text-align: center; font-size: 0.85rem; margin-top: 2rem;}
body.home .content a {text-decoration: none;}
body.home .content a:not([href^="mailto:"]) {color: #222;}
body.home .content p {margin-bottom: 0.25rem;}

.content .small p {margin-bottom: 1.5em;}
.content .small {margin: 0 auto; max-width: 25rem; text-align: center;}

a {color: black;}
a.header img {width: 80%; aspect-ratio: 2.5; min-height: 10rem; object-fit: contain; margin: 0 auto 0.5rem;}
a.header img + img {display: none;}
a.header {display: block; margin-top: -0.5rem;}
body.page__index a.back {display: none;}
a.back, a.shoppingcart {position: absolute; top: 0; z-index: 2; cursor: pointer;}
a.back {left: 0;}
a.shoppingcart {right: 0; text-decoration: none;}
a.back img, a.shoppingcart img {width: 1.6rem;}
a.shoppingcart .itemcount {
    color: white; 
    background: red; 
    font-weight: 600; 
    font-size: 0.65rem; 
    border-radius: 0.5rem;  
    height: 0.95rem; 
    line-height: 0.95rem;
    position: absolute; 
    top: 0; 
    left: calc(100% - 0.75rem); 
    text-align: center; 
    margin-right: -0.25rem;
    padding: 0 0.15rem;
    min-width: 0.95rem;
    display: none;
}

h1,h2,h3 {font-weight: 500; text-align: center; line-height: 1.05; padding: 3rem 0.5rem 1rem 0; font-size: 1.5rem;}
img {display: block; max-width: 100%;}

.button, button, input[type="submit"] {
    color: white;
    background: black;
    padding: 0.35rem 1rem;
    cursor: pointer;
    border: 1px solid black;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.productcategories {columns: 19rem; gap: 3rem;}
.productcategories > div {break-inside: avoid-column;}
.productcategories h2 {text-align: left;}

#productlist li {list-style: none;}
#productlist li a {
    display: flex; 
    text-align: left; 
    border-bottom: 2px dotted black;
    text-decoration: none;
    line-height: 0.75;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}
#productlist li a h3 {font-weight: normal; font-size: 0.9rem; flex-grow: 1; text-align: left; line-height: 0.75; padding: 0;}
#productlist li a h3 span {padding: 0 0.3rem 0 0; position: relative; z-index: 2; top: 2px;}
#productlist li a h3 span::before {content: ""; left: 0; position: absolute; top: 0; width: 100%; height: calc(100% + 4px); margin: -2px 0; background: white; z-index: -1;}
#productlist li a span {display: inline-block; background: white; padding: 0 0 0 0.3rem;}
#productlist li a > span {white-space: nowrap; font-size: 0.8rem; position: relative; top: 0.15rem;}
#productlist li a img {aspect-ratio: 1.7; width: 100%; object-fit: cover; display: none;}

.productpage {display: flex; justify-content: center;}
.productpage .images {display: none; align-items: center;}
.productpage .images a.header img {width: 100%; display: none;}
.productpage .text {width: 20rem; text-align: center; font-size: 0.9rem;}
.productpage form {display: flex; flex-direction: column; gap: 0.5rem; margin: 1.5rem 0 0;}
.productpage form > div {display: block;}
.productpage form label {margin-bottom: 0.25rem; display: block;}
.productpage h2 {font-size: 1.15rem; font-weight: normal; margin: 0.25rem 0 0.75rem;}

#variants {display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;}
select#variants {margin-left: auto; margin-right: auto; max-width: 20rem;}
#variants li {list-style: none;}
#variants li button {border: 1px solid rgba(0,0,0,0.5); color: black; background: transparent; opacity: 0.35; font-size: 0.85rem; padding: 0.1rem 0.5rem; font-weight: 400;}
#variants li button.selected {border: 1px solid black; opacity: 1;}

#checkout_progress {display: flex; justify-content: center; gap: 0.5rem;}
#checkout_progress li {list-style: none;}

#shoppingcart, #checkout {margin-top: 3rem;}
#shoppingcart table {width: 100%; border-collapse: collapse;}
#shoppingcart > table tr > * {text-align: center; line-height: 1.2; padding: 0.5rem 0;}
#shoppingcart > table tr > *:first-child,
#shoppingcart > table tr > *:nth-child(2) {text-align: left; width: 70%; padding-right: 0.5rem;}
#shoppingcart > table tr > *:nth-child(3) {display: none;}
#shoppingcart > table tr > *:nth-child(4) {display: flex; align-items: center; text-align: center; justify-content: center;}
#shoppingcart > table tr > *:nth-child(4) a {width: 1.4rem; height: 1.4rem; display: inline-block; cursor: pointer; user-select: none;}
#shoppingcart > table tr > *:nth-child(4) a.plus {background: #eee url(/img/plus.svg) center center / 1rem auto no-repeat; margin-left: 0.3rem;}
#shoppingcart > table tr > *:nth-child(4) a.minus {background: #eee url(/img/minus.svg) center center / 1rem auto no-repeat; margin-right: 0.3rem;}
#shoppingcart > table tr > *:last-child {text-align: right; padding-left: 0.5rem; min-width: 15%;}
#shoppingcart > table tr > *:first-child:not([colspan="6"]) {padding-right: 1.25rem; width: 4rem; display: none;}
#shoppingcart > table thead tr {border-bottom: 2px solid black;}
#shoppingcart > table tr > th {padding: 0 0 0.25rem; font-weight: 500; font-size: 90%;}
#shoppingcart > table tr > td {height: 4rem;}
#shoppingcart > table tr {border-bottom: 2px dotted black;}
#shoppingcart > table tr > th:nth-child(2) {width: 50%;}
#shoppingcart > table tr > td:nth-child(2), #shoppingcart > table tr > td:last-child {font-size: 0.9rem;}
#shoppingcart > table tr > td:nth-child(2) span {display: block; padding: 0.05rem 0;}
#shoppingcart > table tr > td:nth-child(2) span:last-child {display: none;}
#shoppingcart > div {text-align: right; margin: 1rem 0 0; font-size: 140%;}
#shoppingcart > table tr > td a {text-decoration: none;}
#shoppingcart > form {margin: 3rem 0 0; text-align: right;}
form .submitbutton {display: flex; justify-content: flex-end; flex-direction: row;}
form .submitbutton a {background: transparent; color: black; border-color: transparent; font-weight: 400;}
#shoppingcart .quantity {width: 2.5rem; padding: 0.25rem 0.5rem; text-align: center; border: 1px solid black; font-size: 0.85rem;} 

.page_checkout h1,
.page_cart h1 {display: none;}

#checkout {display: flex; gap: 2.5rem;}
#checkout > form {width: calc(100% - 14rem);}
#checkout > div {width: 14rem; font-size: 0.9rem;}
#checkout > div p {font-size: 0.85rem;}
#checkout > div label {font-size: 1.4rem; line-height: 1.1; padding: 0 0 0.8rem;}
#checkout label {padding: 0 0 0.25rem; font-weight: 500; font-size: 0.9rem; display: block;}
#checkout .submitbutton {margin-top: 1rem;}
#checkoutcalculation {font-size: 1rem;}
#checkoutcalculation span {font-size: 0.85rem;}


#minicart {border-bottom: 2px dotted black; padding: 0 0 0.85rem 0; margin-bottom: 0.6rem; line-height: 1; width: 100%;}
#minicart td {padding: 0.15rem 0; vertical-align: top; font-size: 0.85rem;}

form {display: flex; gap: 1rem 1rem; flex-wrap: wrap;}
form > div.half {width: calc(50% - 0.5rem);}
form > div {display: flex; flex-direction: column; width: 100%;}

input, textarea, select {border: 1px solid black; padding: 0.1rem 0.25rem; font-size: 0.9rem;}
textarea {height: 5rem;}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}

.footer {text-align: center; padding: 3rem 0 0; font-size: 0.71rem; position: relative; top: 3rem;}

.notactive {position: absolute; opacity: 0; pointer-events: none;}

@media screen and (max-width: 1000px) {
    body .campagne p {display: block;}
}

@media screen and (max-width: 730px) {
    body.home a.header img {height: 13rem;}
    body {background: white;}
    body > svg {display: none;}
}

@media screen and (max-width: 600px) {
    body > .container {padding-left: 0rem; padding-right: 0rem;}
    #checkout {flex-direction: column-reverse;}
    #checkout > * {width: 100%!important;}
    .content .small {text-align: left;}
}

@media screen and (max-width: 420px) {
    html {font-size: 4.8vw;}
    body .campagne:after {content: none;}
}