/* WEBSHOP

   Cart, checkout and payment. The structure is hugocodex's — the ids and class
   names are what webshop.js writes into — but the surface is this site's: the
   colours come from the theme tokens, with the light palette as the fallback for
   as long as anything renders outside a themed body. */


/* CART LINK IN THE HEADER */

/* Selected through the nav because header.css centres every direct child link of
   it — that is the logo's rule, and this has to undo the half of it that would
   drag the cart into the middle of the header. The colour is left alone: the
   same rules give it the header's, dark or white as the page needs. */
header nav > a.cart-link {
    position: absolute;
    left: auto;
    right: 1.5rem;
    top: 1.9rem;
    transform: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    font-weight: 400;
    z-index: 3;
    line-height: 1.4;
}
.cart-link svg {width: 1.15em; height: 1.15em; fill: currentColor; position: relative; bottom: 0.1rem;}
/* The count is empty until webshop.js has something to put in it, and the script
   hides it again at zero with an inline style of its own. The link itself always
   stays: it is the only way back to a cart you left. */
.cart-link .itemcount:empty {display: none;}

/* Below the split the menu button takes the corner, so the cart moves in. */
@media (max-width: 60rem) {
    header nav > a.cart-link {right: 5.5rem; top: 1.8rem;}
}


/* CART */

#shoppingcart {margin-bottom: 3rem;}
#shoppingcart table {width: 100%; border-collapse: collapse;}
#shoppingcart th {
    text-align: left;
    font-weight: 400;
    color: var(--text-strong, #251C1D);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rulelight, rgba(0, 0, 0, 0.2));
}
#shoppingcart td {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--rulelight, rgba(0, 0, 0, 0.2));
    vertical-align: middle;
}
#shoppingcart th:first-child, #shoppingcart td:first-child {width: 5rem; padding-right: 1.5rem;}
#shoppingcart th:last-child, #shoppingcart td:last-child {text-align: right; white-space: nowrap;}
/* Third of four: the quantity, with the bin alongside it. */
#shoppingcart th:nth-child(3), #shoppingcart td:nth-child(3) {text-align: center; white-space: nowrap;}
#shoppingcart tbody td[colspan] {text-align: center; color: var(--text, inherit);}
/* The cart is written by javascript, which cannot know this site's type scale —
   the product title it writes out is the one thing that wants to stand out. */
#shoppingcart td:nth-child(2) {color: var(--text); line-height: 1.45;}
/* Remove is a bin rather than the word, and it sits just behind the quantity field
   instead of holding a column of its own: both are things you do to this one line,
   so they belong together, and the cart is a column narrower for it.
   img/delete.svg carries the shape, but it is painted through a mask rather than
   dropped in as an image, so the colour is the theme's text colour and not the
   #1f1f1f the file was exported with — the cart has to work on a dark page too.
   It is dimmed until pointed at, so it never competes with the price.
   Drawn at 24px, the size the icon was designed on, which keeps its edges sharp. */
#shoppingcart .cart-remove {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.85rem;
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor;
    -webkit-mask: url(/img/delete.svg) center / contain no-repeat;
    mask: url(/img/delete.svg) center / contain no-repeat;
    color: var(--text, #251C1D);
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
#shoppingcart .cart-remove:hover,
#shoppingcart .cart-remove:focus-visible {opacity: 1;}
#shoppingcart .productavatar {
    display: block;
    width: 5rem;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: 50% 50%;
}
/* A quantity always has an answer in it, so it is drawn as a filled field — the
   same block the checkout's answered fields get. */
#shoppingcart .quantity {
    width: 4rem;
    vertical-align: middle;
    padding: 0.6rem 0.5rem;
    text-align: center;
    border: 0;
    background: rgba(37, 28, 29, 0.05);
    color: var(--text-strong, #251C1D);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
/* Chrome, Safari, Edge */
#shoppingcart .quantity::-webkit-inner-spin-button,
#shoppingcart .quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
#shoppingcart .quantity {
    -moz-appearance: textfield;
    appearance: textfield;
}
.cart-total {
    text-align: right;
    margin-top: 1.5rem;
    font-family: 'Noto Serif', serif;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--text-strong, #251C1D);
}

@media (max-width: 40rem) {
    /* All four columns stay, so each gives up what it can spare: a smaller thumbnail,
       a narrower field, less air around the bin. Without this the row is wider than
       the screen and the page scrolls sideways. */
    #shoppingcart th:first-child, #shoppingcart td:first-child {width: 3.5rem; padding-right: 0.85rem;}
    #shoppingcart .productavatar {width: 3.5rem;}
    #shoppingcart th:nth-child(3), #shoppingcart td:nth-child(3) {width: 1%;}
    #shoppingcart .quantity {width: 2.75rem; padding-inline: 0.25rem;}
    #shoppingcart .cart-remove {margin-left: 0.5rem;}
}


/* CHECKOUT */
.main-content section .container:has(#checkout, #shoppingcart) {max-width: 65rem;}
#checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 3.5rem;
    align-items: flex-start;
}
#checkout > form {flex: 1 1 24rem; display: flex; flex-wrap: wrap; gap: 0 var(--gap);}
#checkout > form > div {width: 100%; margin-bottom: 1.25rem;}
#checkout > form > div.half {width: calc(50% - (var(--gap) / 2));}
/* The fields are the booking form's, so a buyer meets the same form twice on the
   site rather than two designs of one thing. sidebar.css is where that style is
   written down first; keep the two in step. */
#checkout label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--text);
}
#checkout > form input:not([type="submit"]),
#checkout > form select,
#checkout > form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-bottom: 1px solid transparent;
    background: rgba(37, 28, 29, 0.05);
    color: var(--text-strong, #251C1D);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
/* Empty, a field is only the rule under it; answering one trades the rule for a
   tinted block, so the form shows how far along it is without marking anything. */
#checkout > form input:placeholder-shown,
#checkout > form select:has(option:first-child:checked),
#checkout > form textarea:placeholder-shown {
    background: transparent;
    border-color: rgba(37, 28, 29, 0.25);
}
#checkout > form textarea {
    field-sizing: content;
    min-height: 3lh;
    max-height: 12lh;
    resize: vertical;
}
#checkout > form select option {color: #251C1D;}

/* Chrome, Safari, Edge */
#checkout > form input[type="number"]::-webkit-inner-spin-button,
#checkout > form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
#checkout > form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The running total, alongside the form on a wide page and under it on a narrow one. */
#checkout > div:last-child {flex: 0 1 20rem; font-size: 1rem;}
#checkoutcalculation {
    border: 0px solid var(--rule, rgba(0, 0, 0, 0.2));
    padding: 1rem;
    text-align: right;
    line-height: 1.9;
    margin-block: 0.5rem 1rem;
    font-size: 1rem;
    background: rgba(37, 28, 29, 0.05);
}
#checkoutcalculation span {float: left; clear: left;}
#checkoutcalculation .sum {
    border-top: 1px solid var(--rulelight, rgba(0, 0, 0, 0.2));
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    color: var(--text-strong, #251C1D);
    font-weight: 400;
}


/* BUTTONS */

.submitbutton {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    margin-top: 2rem;
}
/* Same button as the one that closes the booking form: same weight, same corner,
   sized by its own padding rather than by the row it sits in. */
.submitbutton input[type="submit"] {
    cursor: pointer;
    border: 0;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 400;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--button-bg, #181212);
    color: var(--button-text, white);
}
.submitbutton .gray {
    text-decoration: underline;
    font-size: 1rem;
    text-underline-offset: 0.2rem;
    text-decoration-color: rgba(37, 28, 29,0.3);
}


/* PROGRESS */

/* Three steps, the line before each one filled in once it is behind you. */
#checkout_progress {
    display: flex;
    justify-content: center;
    margin: 5rem 0 0;
    padding: 0;
}
#checkout_progress li {
    list-style: none;
    flex: 0 0 9rem;
    max-width: 9rem;
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.2));
    padding-top: 1.25rem;
    position: relative;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
#checkout_progress li:last-child {flex-basis: 5rem; border: 0;}
#checkout_progress li.past {border-top-color: var(--text-strong, #251C1D);}
#checkout_progress li::before {
    content: "";
    position: absolute;
    top: -0.3rem;
    left: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--bg, #F9FAF5);
    box-shadow: 0 0 0 1px var(--rule, rgba(0, 0, 0, 0.2));
}
#checkout_progress li.past::before,
#checkout_progress li.current::before {
    background: var(--text-strong, #251C1D);
    box-shadow: 0 0 0 1px var(--text-strong, #251C1D);
}
#checkout_progress li.past a,
#checkout_progress li.current {color: var(--text-strong, #251C1D); font-weight: 400;}
#checkout_progress li > span > * {position: relative; left: -50%;}
#checkout_progress li a {text-decoration: none;}

@media (max-width: 40rem) {
    #checkout_progress li {flex-basis: 6.5rem; max-width: 6.5rem; font-size: 0.75rem;}
    #checkout_progress li:last-child {flex-basis: 4rem;}
}


/* PAYMENT */

.payment-unconfigured {
    border: 1px solid var(--rule, rgba(0, 0, 0, 0.2));
    border-radius: 0.4rem;
    padding: 1.25rem;
}
.payment-unconfigured strong {color: var(--text-strong, #251C1D); font-weight: 400;}