/* ═══════════════════════════════════════════════════════════════════════════
   Atelier — WooCommerce surfaces: cart, checkout, order confirmation, account,
   and the prints shop grid.

   This restyles someone else's markup, so it works by mapping WooCommerce's
   variables onto this theme's tokens wherever WooCommerce exposes one, and
   only falls back to overriding selectors where it does not. That keeps the
   file short and survives WooCommerce changing its class names, which it does.

   Everything is token-driven, so dark mode needs almost nothing of its own.
   The exceptions live at the bottom of assets/css/dark.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hand WooCommerce our palette ──────────────────────────────────────── */
.woocommerce,
.wc-block-components-form,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    --wc-green: var(--at-gilt, #b08d57);
    --wc-primary: var(--at-accent, #1c1a18);
    --wc-secondary: var(--at-band, #f2ebe1);
    --wc-highlight: var(--at-gilt, #b08d57);
    --wc-content-bg: var(--at-panel, #ffffff);
    --wc-form-color-text: var(--at-ink, #2a2724);
    --wc-form-color-background: var(--at-panel, #ffffff);
    --wc-form-border-color: var(--at-rule, #e4dbcf);
    font-family: var(--at-sans, sans-serif);
}

/* ── Undo woocommerce-blocktheme.css ───────────────────────────────────── */
/* WooCommerce ships a stylesheet specifically for block themes that assumes it
   is laying the page out for you. Three of its rules fight this design and are
   invisible until you measure the boxes:

     .woocommerce-cart main .woocommerce      max-width: 1000px
     .woocommerce-page table.shop_table       width: 70%
     .woocommerce-cart-form .product-thumbnail  width: 120px

   The first is what capped the cart at 1000px inside a 1240px measure, leaving a
   240px gutter on one side only. The second is why the items table stopped short
   of its own column. Both are overridden here rather than at each use site, so
   there is one place to look when a WooCommerce update changes them. */
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout main .woocommerce,
body.woocommerce-account main .woocommerce { max-width: none; }

body.woocommerce-page table.shop_table { width: 100%; }

body.woocommerce-page .woocommerce-cart-form .product-thumbnail { width: 96px; }
body.woocommerce-page .woocommerce-cart-form .product-thumbnail a img { width: 96px; }

/* ── Page furniture ────────────────────────────────────────────────────── */
.woocommerce-page .wp-block-post-title,
.wc-block-components-title {
    font-family: var(--at-serif, Georgia, serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.woocommerce-page .wp-block-post-title {
    text-align: center;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Every WooCommerce call to action, block-based or legacy, in one selector
   list. They are visually identical to .at-btn without inheriting from it,
   because WooCommerce ships its own resets that would fight a shared class. */
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page button[type="submit"]#place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.wc-block-components-button,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 2rem;
    background: var(--at-accent, #1c1a18);
    color: var(--at-on-accent, #faf7f2);
    border: 1px solid var(--at-accent, #1c1a18);
    border-radius: 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    transition: background-color 0.3s var(--at-ease, ease),
                border-color 0.3s var(--at-ease, ease),
                color 0.3s var(--at-ease, ease);
}

body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page #place_order:hover,
.wc-block-components-button:hover,
.wp-element-button:hover {
    background: var(--at-gilt, #b08d57);
    border-color: var(--at-gilt, #b08d57);
    color: #ffffff;
}

/* The checkout's own primary button is taller by default and looks unrelated
   to everything else on the page at that size. */
.wc-block-components-checkout-place-order-button { width: 100%; }

/* ── Form fields ───────────────────────────────────────────────────────── */
/* Scoped on the BODY class, not a .woocommerce wrapper. Under a block theme
   the classic checkout form has no .woocommerce ancestor, so every rule written
   that way misses and the fields render as plugin defaults on a hand-built
   page. body.woocommerce-page is present on all of them. */
body.woocommerce-page .form-row input.input-text,
body.woocommerce-page .form-row textarea,
body.woocommerce-page .form-row select,
body.woocommerce-page .select2-selection,
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="tel"],
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
    padding: 0.9rem 1.1rem;
    background: var(--at-panel, #ffffff);
    border: 1px solid var(--at-rule, #e4dbcf);
    border-radius: 0;
    color: var(--at-ink, #2a2724);
    font-family: var(--at-sans, sans-serif);
    font-size: 0.9375rem;
    font-weight: 300;
}

body.woocommerce-page .form-row input.input-text:focus,
body.woocommerce-page input[type="email"]:focus,
body.woocommerce-page .form-row textarea:focus,
.wc-block-components-text-input input:focus {
    outline: none;
    border-color: var(--at-gilt, #b08d57);
    box-shadow: none;
}

.wc-block-components-text-input label,
body.woocommerce-page .form-row label {
    font-size: 0.8125rem;
    color: var(--at-muted, #6b625a);
}

/* ── Cart and checkout tables ──────────────────────────────────────────── */
body.woocommerce-page table.shop_table,
.wc-block-cart-items {
    border: 0;
    border-radius: 0;
}

body.woocommerce-page table.shop_table th,
.wc-block-cart-items__header {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    font-family: var(--at-sans, sans-serif);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
}

body.woocommerce-page table.shop_table td,
.wc-block-cart-items__row {
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
}

/* A line item is a painting. Give its thumbnail the same square-cropped frame
   the gallery uses, so the cart looks like the same shop. */
.wc-block-cart-item__image img,
.woocommerce table.shop_table .product-thumbnail img {
    border-radius: 0;
    aspect-ratio: 1;
    object-fit: cover;
}

.wc-block-components-product-name,
.woocommerce table.shop_table .product-name a {
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.125rem;
    color: var(--at-ink, #2a2724);
    text-decoration: none;
}

.wc-block-components-product-price,
.woocommerce .woocommerce-Price-amount {
    font-family: var(--at-sans, sans-serif);
    color: var(--at-ink, #2a2724);
}

/* Totals panel */
.wc-block-components-totals-wrapper,
.woocommerce .cart_totals {
    border-top: 1px solid var(--at-rule, #e4dbcf);
}
.wc-block-components-totals-item__label {
    font-size: 0.8125rem;
    color: var(--at-muted, #6b625a);
}

/* Quantity stepper is meaningless on a one-of-a-kind piece, and WooCommerce
   already hides it for sold_individually products. This just removes the gap
   it leaves behind. */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector:empty { display: none; }

/* ── Notices ───────────────────────────────────────────────────────────── */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
    border-radius: 0;
    border: 0;
    border-left: 2px solid var(--at-gilt, #b08d57);
    background: var(--at-band, #f2ebe1);
    color: var(--at-ink, #2a2724);
    font-size: 0.875rem;
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error { border-left-color: #b4503c; }

/* ── The prints shop grid ──────────────────────────────────────────────── */
/* Originals are catalog-hidden, so everything here is a print. Match the
   gallery's card rhythm rather than WooCommerce's default. */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
    width: auto;
    margin: 0;
    float: none;
    text-align: left;
}
.woocommerce ul.products li.product img { margin-bottom: 1rem; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.25rem;
    line-height: 1.25;
    padding: 0;
    margin-bottom: 0.25rem;
}
.woocommerce ul.products li.product .price {
    font-family: var(--at-sans, sans-serif);
    font-size: 0.875rem;
    color: var(--at-muted, #6b625a);
}
.woocommerce span.onsale {
    background: var(--at-gilt, #b08d57);
    border-radius: 0;
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ── Account ───────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: inline-block;
    padding-bottom: 0.9rem;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
    text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--at-ink, #2a2724);
    box-shadow: inset 0 -1px 0 var(--at-gilt, #b08d57);
}

@media (max-width: 900px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ── Classic cart details ──────────────────────────────────────────────── */
/* WooCommerce's remove link is a red cross that is the loudest thing on an
   otherwise very quiet page. Make it a quiet mark that only warms on hover. */
.woocommerce a.remove {
    width: 22px;
    height: 22px;
    line-height: 20px;
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--at-faint, #9a8f85) !important;
    border-radius: 0;
    background: transparent !important;
}
.woocommerce a.remove:hover {
    color: #b4503c !important;
    background: transparent !important;
}

/* Inside a bordered summary card the proceed button is the one thing on it that
   should be unmissable, so it spans the card. (It used to be inline-width,
   which was right when the totals sat loose on the page.) */
.woocommerce .wc-proceed-to-checkout { margin-bottom: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    width: 100%;
    font-size: 0.6875rem;
    padding: 1.15rem 1.5rem;
}
/* The same arrow the theme's own primary buttons carry. WooCommerce escapes
   this button's label, so no inline SVG can go inside it; a masked
   pseudo-element inherits currentColor and works on either palette. */
.woocommerce .wc-proceed-to-checkout a.checkout-button::after,
body.woocommerce-checkout #payment #place_order::after {
    content: '';
    width: 17px;
    height: 17px;
    margin-left: 0.7rem;
    background-color: currentColor;
    -webkit-mask: var(--at-arrow) center / contain no-repeat;
    mask: var(--at-arrow) center / contain no-repeat;
}

/* Section titles on cart and checkout. Serif and sentence case, because each
   one now heads a bordered card rather than floating over the page — a tiny
   letterspaced label on a card reads as a form legend, not a heading. The
   letterspaced caps stay on the table column headers, which is where they earn
   their keep. */
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
body.woocommerce-checkout #order_review_heading {
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--at-ink, #2a2724);
    margin-bottom: 1.25rem;
}

/* Coupon row: two controls that should read as one unit. */
.woocommerce .cart .coupon .input-text {
    min-width: 200px;
    margin-right: 0;
}

/* An artwork with no image yet gets WooCommerce's placeholder, which is a
   bright blue icon on a cream page. */
.woocommerce img.woocommerce-placeholder {
    opacity: 0.25;
    filter: grayscale(1);
}

/* Checkout: two columns at desktop, since the order summary beside the form is
   what makes a long form feel finite. */
/* WooCommerce's checkout columns are floats with a ::before/::after clearfix.
   Turning the container into a grid promotes those pseudo-elements to grid
   ITEMS, and they silently take the first cell — which pushed the billing form
   into the right-hand column with an empty gap beside it. Any float layout
   converted to grid needs this. */
body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after { content: none; }

/* Billing and "ship to a different address" now stack in the left column,
   because the right-hand one is the order summary. Two half-width forms side by
   side made the page look like it wanted twice as much information as it does. */
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
body.woocommerce-checkout .col2-set .col-2:not(:empty) { margin-top: 1.5rem; }

/* ── Payment box ───────────────────────────────────────────────────────── */
/* WooCommerce styles these with ID-level selectors (#payment, #place_order),
   which outrank anything class-based this file can write. Matching that
   specificity is the only way to reach them without !important. */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
    background: var(--at-band, #f2ebe1);
    border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
}
body.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
body.woocommerce-checkout #payment label {
    font-size: 0.9375rem;
    color: var(--at-ink, #2a2724);
}

/* The gateway's own description box, which WooCommerce tints lilac. */
body.woocommerce-checkout #payment div.payment_box {
    background: var(--at-panel, #ffffff);
    color: var(--at-muted, #6b625a);
    font-size: 0.8125rem;
    border-radius: 0;
}
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--at-panel, #ffffff); }

body.woocommerce-checkout #payment div.form-row.place-order { padding: 1.25rem 1.5rem; }

body.woocommerce-checkout #payment #place_order,
body.woocommerce-page .button.alt {
    background: var(--at-accent, #1c1a18);
    border-color: var(--at-accent, #1c1a18);
    color: var(--at-on-accent, #faf7f2);
    float: none;
}
body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-page .button.alt:hover {
    background: var(--at-gilt, #b08d57);
    border-color: var(--at-gilt, #b08d57);
    color: #ffffff;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-size: 0.8125rem;
    color: var(--at-faint, #9a8f85);
}

/* ── The variation form, inline on a piece page ────────────────────────── */
/* WooCommerce's variable add-to-cart form, rendered on the artwork page so a
   print can be sized and bought without leaving the gallery. Its markup is a
   table by default, which has to be undone before it can be laid out. */
.at-variations { margin-bottom: 1.75rem; }

.at-variations table.variations {
    width: 100%;
    margin: 0 0 1.25rem;
    border: 0;
    border-collapse: collapse;
}
.at-variations table.variations tbody,
.at-variations table.variations tr,
.at-variations table.variations th,
.at-variations table.variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
}
.at-variations table.variations tr + tr { margin-top: 1rem; }

.at-variations table.variations th.label label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
}

.at-variations select {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: var(--at-panel, #ffffff);
    border: 1px solid var(--at-rule, #e4dbcf);
    border-radius: 0;
    color: var(--at-ink, #2a2724);
    font-family: var(--at-sans, sans-serif);
    font-size: 0.9375rem;
}
.at-variations select:focus { outline: none; border-color: var(--at-gilt, #b08d57); }

/* The panel WooCommerce reveals once a size is chosen. Price and stock sit side
   by side, split by a hairline, so "how much" and "when" are one glance.
   
   Laid out with inline-block rather than flex on the parent, deliberately.
   WooCommerce reveals this with jQuery slideDown, which writes `display: block`
   as an INLINE style on the element — that beats any display a stylesheet
   declares, so a flex parent here would silently revert to stacked the moment
   the panel appeared. The children carry the layout instead, which survives
   whatever display the script sets. */
.at-variations .woocommerce-variation { margin: 1.5rem 0; }
.at-variations .woocommerce-variation-price,
.at-variations .woocommerce-variation-availability {
    display: inline-block;
    vertical-align: middle;
}

/* WooCommerce leaves this empty unless the variation carries its own copy, and
   an empty flex child still takes the gap. */
.at-variations .woocommerce-variation-description:empty { display: none; }

.at-variations .woocommerce-variation-price .price {
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
    line-height: 1;
    color: var(--at-ink, #2a2724);
}
/* WooCommerce wraps the amount in <ins>/<del> when a variation is on sale. */
.at-variations .woocommerce-variation-price ins { text-decoration: none; }
.at-variations .woocommerce-variation-price del {
    font-size: 0.5em;
    color: var(--at-faint, #9a8f85);
    margin-left: 0.4rem;
}

.at-variations .woocommerce-variation-availability {
    padding-left: clamp(1rem, 3vw, 1.75rem);
    border-left: 1px solid var(--at-rule, #e4dbcf);
}
.at-variations .woocommerce-variation-availability p {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--at-ink, #2a2724);
}
/* The dispatch line, appended in inc/commerce.php. Serif and sentence case, so
   it reads as a sentence beside the shouted stock status rather than competing
   with it. */
.at-variations .at-dispatch {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--at-muted, #6b625a);
}

.at-variations .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* A print can be bought in twos, unlike an original, so the quantity box stays
   and needs to match the fields around it. */
.at-variations .quantity input.qty {
    width: 74px;
    height: 100%;
    padding: 0.9rem 0.5rem;
    background: var(--at-panel, #ffffff);
    border: 1px solid var(--at-rule, #e4dbcf);
    border-radius: 0;
    color: var(--at-ink, #2a2724);
    font-family: var(--at-sans, sans-serif);
    text-align: center;
}

.at-variations button.single_add_to_cart_button { flex: 1 1 auto; }

/* Until a size is chosen WooCommerce disables the button. Say so visually,
   rather than leaving a button that looks live and does nothing. */
.at-variations button.single_add_to_cart_button.disabled,
.at-variations button.single_add_to_cart_button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Add-to-cart gets the same arrow the theme's own primary buttons carry.
   WooCommerce escapes the button label, so no SVG can be put inside it; a
   masked pseudo-element inherits currentColor and works on either palette. */
.at-variations button.single_add_to_cart_button::after {
    content: '';
    width: 17px;
    height: 17px;
    margin-left: 0.7rem;
    background-color: currentColor;
    -webkit-mask: var(--at-arrow) center / contain no-repeat;
    mask: var(--at-arrow) center / contain no-repeat;
}

.at-variations button.single_add_to_cart_button {
    align-items: center;
    justify-content: center;
}

@media (max-width: 520px) {
    .at-variations .woocommerce-variation-price,
    .at-variations .woocommerce-variation-availability { display: block; }
    .at-variations .woocommerce-variation-availability {
        margin-top: 0.75rem;
        padding-left: 0;
        border-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The shop page header band
   ───────────────────────────────────────────────────────────────────────────
   Rendered by patterns/shop-header.php in place of a bare centred post title.
   A cart that opens with black text on the same cream as the page above it
   reads as an unfinished page rather than a step in a purchase.

   The wash behind it is the featured artwork, blurred hard and dropped low, so
   what comes through is the colour of her palette rather than a photograph
   competing with the word "Cart".
   ═══════════════════════════════════════════════════════════════════════════ */

.at-shop-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem);
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    background: var(--at-band, #f2ebe1);
    text-align: center;
}

/* Full bleed. The band is a direct child of a constrained group, so alignfull
   is what widens it; this belt-and-braces rule covers the case where the
   template's layout changes and core stops emitting that rule. */
.at-shop-head.alignfull { max-width: none; }

.at-shop-head::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: -1;
    background-image: var(--at-shop-wash, none);
    background-size: cover;
    background-position: center 35%;
    /* Blurred past recognition on purpose. An identifiable painting behind a
       page title is a second focal point on a page whose whole job is to keep
       one. */
    filter: blur(26px) saturate(1.1);
    opacity: 0.55;
    transform: scale(1.08);
}
.at-shop-head:not(.has-wash)::before { display: none; }

/* The scrim. Without it the title sits on whatever value the painting happens
   to be at that point, and contrast becomes a lottery per artwork. */
.at-shop-head::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--at-band, #f2ebe1) 72%, transparent) 0%,
        color-mix(in srgb, var(--at-band, #f2ebe1) 88%, transparent) 100%
    );
}
/* color-mix is recent. Older engines get a flat band, which is the design
   without the photograph rather than a broken one. */
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
    .at-shop-head::before { opacity: 0.18; }
    .at-shop-head::after { background: none; }
}

.at-shop-head-title {
    margin: 0;
    font-family: var(--at-serif, Georgia, serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    line-height: 1.05;
    color: var(--at-ink, #2a2724);
}

.at-shop-head-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
}
.at-shop-head-note i { font-style: normal; color: var(--at-gilt, #b08d57); }

/* The band already carries the page title, so WooCommerce's own duplicate goes.
   Cart and checkout are the only templates that use the band. */
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   Cart: items on the left, a summary card on the right
   ───────────────────────────────────────────────────────────────────────────
   The shortcode wraps everything in one .woocommerce div whose children are the
   notices, the item form and .cart-collaterals. That is exactly the two-column
   split the design wants, so the grid goes on the wrapper and nothing has to
   move in the markup.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
    /* Scoped through .wp-block-post-content deliberately. There are TWO
       .woocommerce divs on this page: the shortcode's, which is inside the post
       content, and the store-notices block's, which is a sibling of it in
       templates/page-cart.html. A bare `.woocommerce` selector turns the notice
       banner into a two-column grid as well. */
    body.woocommerce-cart .wp-block-post-content > .woocommerce {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 23rem;
        column-gap: clamp(2rem, 4vw, 4rem);
        align-items: start;
    }
    /* Notices are about the whole page, not about the items column. */
    body.woocommerce-cart .wp-block-post-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

    body.woocommerce-cart .cart-collaterals {
        width: auto;
        position: sticky;
        /* Clears the fixed header, which is what --at-header-h is measured for
           in main.js. */
        top: calc(var(--at-header-h, 76px) + 1.5rem);
    }
    body.woocommerce-cart .cart-collaterals::before,
    body.woocommerce-cart .cart-collaterals::after { content: none; }
    body.woocommerce-cart .cart-collaterals .cart_totals { width: auto; float: none; }
}

/* ── The summary card, shared by cart and checkout ─────────────────────── */
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review {
    padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
    background: var(--at-panel, #ffffff);
    border: 1px solid var(--at-rule, #e4dbcf);
    border-top: 1px solid var(--at-rule, #e4dbcf);
}

body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0;
    border: 0;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    padding: 0.7rem 0;
    border: 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--at-muted, #6b625a);
    vertical-align: top;
}
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    color: var(--at-ink, #2a2724);
}

/* The total is the number someone is deciding on. It gets the serif and the
   size, and a rule above it to separate the decision from the arithmetic. */
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    padding-top: 1.1rem;
    border-top: 1px solid var(--at-rule, #e4dbcf);
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
    color: var(--at-ink, #2a2724);
}
body.woocommerce-cart .cart_totals .order-total .includes_tax,
body.woocommerce-checkout .order-total .includes_tax {
    display: block;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.75rem;
    color: var(--at-faint, #9a8f85);
}

/* Shipping choices inside the card: a list, not a bulleted one. */
body.woocommerce-cart .cart_totals #shipping_method,
body.woocommerce-checkout #shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
body.woocommerce-cart .cart_totals #shipping_method li,
body.woocommerce-checkout #shipping_method li { margin-bottom: 0.35rem; }
body.woocommerce-cart .woocommerce-shipping-destination,
body.woocommerce-cart .shipping-calculator-button {
    font-size: 0.8125rem;
    color: var(--at-faint, #9a8f85);
}

/* ── The items table ───────────────────────────────────────────────────── */
body.woocommerce-cart table.cart {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
body.woocommerce-cart table.cart th.product-name { text-align: left; }
body.woocommerce-cart table.cart td {
    padding: 1.5rem 0.75rem;
    vertical-align: middle;
    background: transparent;
}
body.woocommerce-cart table.cart td:first-child { padding-left: 0; }
body.woocommerce-cart table.cart td:last-child { padding-right: 0; }
body.woocommerce-cart table.cart td.product-thumbnail { width: 96px; padding-left: 0; }
body.woocommerce-cart table.cart td.product-thumbnail img {
    width: 96px;
    /* Taller than square: these are paintings, and the gallery crops them 4:5.
       A square crop in the cart shows a different picture from the one that was
       clicked. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--at-rule, #e4dbcf);
}
body.woocommerce-cart table.cart td.product-name a { font-size: 1.25rem; }
body.woocommerce-cart table.cart td.product-name .variation {
    margin: 0.35rem 0 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
}
body.woocommerce-cart table.cart td.product-name .variation dt,
body.woocommerce-cart table.cart td.product-name .variation dd {
    display: inline;
    margin: 0;
    padding: 0;
    float: none;
}
body.woocommerce-cart table.cart td.product-name .variation dt { display: none; }
body.woocommerce-cart table.cart td.product-name .variation dd + dt::before { content: ' · '; }
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal { text-align: center; }
body.woocommerce-cart table.cart td.product-subtotal { text-align: right; }
body.woocommerce-cart table.cart td.product-remove { width: 34px; }

/* ── The quantity stepper ──────────────────────────────────────────────── */
/* The minus and plus buttons are added by assets/js/modules/shop.js. Without
   the script the number input is still there and still typeable, which is the
   WooCommerce default and loses nothing. */
body.woocommerce-page .quantity {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--at-rule, #e4dbcf);
    background: var(--at-panel, #ffffff);
}
body.woocommerce-page .quantity input.qty {
    width: 3.25rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.9375rem;
    color: var(--at-ink, #2a2724);
    -moz-appearance: textfield;
    appearance: textfield;
}
body.woocommerce-page .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-page .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.at-qty-step {
    width: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--at-muted, #6b625a);
    font-family: var(--at-sans, sans-serif);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s var(--at-ease, ease);
}
.at-qty-step:hover { color: var(--at-ink, #2a2724); }
.at-qty-step:disabled { opacity: 0.3; cursor: not-allowed; }

/* An original is sold_individually, so WooCommerce renders its quantity as a
   plain `.quantity` wrapper holding a screen-reader label and a hidden input —
   no `hidden` class on the wrapper itself. The border this file gives .quantity
   therefore drew an empty box in the quantity column of every original in the
   cart. Hide the wrapper when the only control inside it is hidden.

   :has() is doing real work here and there is no non-scripted equivalent. On an
   engine old enough to lack it the empty box comes back, which is cosmetic and
   affects nothing a buyer can click. */
body.woocommerce-page .quantity.hidden,
body.woocommerce-page .quantity:has(> input[type="hidden"]) { display: none; }

/* The variation form on a piece page draws its own box around the input, so it
   must not get a second one. */
.at-variations .quantity { border: 0; background: transparent; }

/* ── Coupon and cart actions ───────────────────────────────────────────── */
body.woocommerce-cart td.actions {
    padding: 1.5rem 0 0;
    border-bottom: 0;
}

/* The disclosure button shop.js puts in front of the coupon fields. It reads as
   a row someone can open rather than a form they have to dismiss, which is what
   a bare "Coupon code" box next to a checkout button does. */
.at-coupon-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.15rem 1.25rem;
    background: transparent;
    border: 1px solid var(--at-rule, #e4dbcf);
    color: var(--at-ink, #2a2724);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s var(--at-ease, ease);
}
.at-coupon-toggle:hover { border-color: var(--at-gilt, #b08d57); }
.at-coupon-toggle .at-coupon-mark {
    font-family: var(--at-sans, sans-serif);
    font-size: 1.1rem;
    color: var(--at-muted, #6b625a);
    line-height: 1;
}
.at-coupon-toggle[aria-expanded="true"] { border-bottom-color: transparent; }

body.woocommerce-cart td.actions .coupon {
    display: flex;
    gap: 0.75rem;
    float: none;
    padding: 1.25rem;
    border: 1px solid var(--at-rule, #e4dbcf);
    border-top: 0;
}
body.woocommerce-cart td.actions .coupon .input-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
body.woocommerce-cart td.actions .coupon .button { flex: none; }
/* shop.js folds the panel away with the `hidden` attribute. The UA rule that
   implements it is a bare [hidden] selector, which the class-based display above
   outranks — so the panel has to opt back out explicitly, or it renders open
   under its own "Have a coupon?" toggle. */
body.woocommerce-cart td.actions .coupon[hidden] { display: none; }

/* Update cart is a repair, not an action anyone sets out to take, so it reads
   as a quiet text link rather than a second black button beside Checkout. */
body.woocommerce-cart td.actions button[name="update_cart"] {
    float: none;
    margin-top: 1.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--at-muted, #6b625a);
    letter-spacing: 0.16em;
    text-decoration: underline;
    text-underline-offset: 4px;
}
body.woocommerce-cart td.actions button[name="update_cart"]:hover {
    background: transparent;
    border: 0;
    color: var(--at-gilt, #b08d57);
}
body.woocommerce-cart td.actions button[name="update_cart"]:disabled { display: none; }

/* ── The way back out ──────────────────────────────────────────────────── */
.at-cart-back { margin: 2rem 0 0; }
.at-cart-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.875rem;
    color: var(--at-ink, #2a2724);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--at-rule, #e4dbcf);
    transition: color 0.25s var(--at-ease, ease), text-decoration-color 0.25s var(--at-ease, ease);
}
.at-cart-back a:hover {
    color: var(--at-gilt, #b08d57);
    text-decoration-color: currentColor;
}

/* The empty cart. One line and one way onward, centred, because there is
   nothing else on the page to balance it against. */
body.woocommerce-cart .cart-empty {
    text-align: center;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.25rem;
    color: var(--at-muted, #6b625a);
}
body.woocommerce-cart .return-to-shop { text-align: center; margin-top: 2rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   Checkout: the form on the left, the order beside it
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
    body.woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24rem;
        column-gap: clamp(2rem, 4vw, 4rem);
        align-items: start;
    }
    /* Named rows rather than auto-placement: the form's children arrive in the
       order customer-details, heading, review, and auto-placement would put the
       heading under the billing fields. */
    body.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
    body.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
    body.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }

    /* WooPayments' express buttons (WooPay, Apple/Google Pay, Amazon Pay) and
       their "— OR —" arrive first in the form. Left to auto-placement they
       dropped under the order summary, where the OR divided nothing. They
       belong at the top of the form column, the separator then reading as
       "pay in one tap, or fill this in". The spans keep the summary card
       starting straight under its heading rather than waiting for the
       buttons' height. */
    body.woocommerce-checkout form.checkout:has(> .wcpay-express-checkout-wrapper) .wcpay-express-checkout-wrapper { grid-column: 1; grid-row: 1 / span 2; }
    body.woocommerce-checkout form.checkout:has(> .wcpay-express-checkout-wrapper) #customer_details { grid-row: 3 / span 2; }
    body.woocommerce-checkout form.checkout:has(> .wcpay-express-checkout-wrapper) #order_review { grid-row: 2 / span 3; }
    /* Anything a gateway or a plugin adds after the review lands under it in
       the same column rather than breaking the grid. */
    body.woocommerce-checkout form.checkout > * { min-width: 0; }
}

body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 { margin-top: 0; }
body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 2rem; }

body.woocommerce-checkout .form-row { margin-bottom: 1.1rem; padding: 0; }
body.woocommerce-checkout .form-row label { display: block; margin-bottom: 0.4rem; }
body.woocommerce-checkout .form-row .required {
    color: var(--at-gilt, #b08d57);
    text-decoration: none;
}
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last { width: 100%; float: none; }

@media (min-width: 620px) {
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }
    /* Two-up only for the pairs WooCommerce already marks as halves. Everything
       else — email, street, city — runs the full width. */
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
    body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1; }
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
    body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
    body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }
}

/* "Ship to a different address?" is a decision, so it gets a rule above it and
   reads as a heading rather than as another form label. */
body.woocommerce-checkout #ship-to-different-address {
    margin: 0 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--at-rule, #e4dbcf);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.0625rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
body.woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 0.6rem; }

/* ── The order summary column ──────────────────────────────────────────── */
/* The line items get their thumbnail from the woocommerce_cart_item_name filter
   in inc/commerce-pages.php. Floated rather than flexed, because the quantity
   and the variation list are siblings of the name, not children of it. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    overflow: hidden;
    padding: 1rem 0;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.0625rem;
    color: var(--at-ink, #2a2724);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
    padding: 1rem 0;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}
.at-review-thumb {
    float: left;
    width: 56px;
    height: 70px;
    margin: 0.15rem 0.9rem 0.5rem 0;
    object-fit: cover;
    border: 1px solid var(--at-rule, #e4dbcf);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
    font-family: var(--at-sans, sans-serif);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--at-faint, #9a8f85);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation {
    margin: 0.3rem 0 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt { display: none; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd { display: inline; margin: 0; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd p { display: inline; margin: 0; }

/* The payment box is inside the summary card, so it drops the tinted panel it
   wears when it stands alone. */
body.woocommerce-checkout #order_review #payment,
body.woocommerce-checkout #order_review .woocommerce-checkout-payment {
    margin-top: 1.25rem;
    background: transparent;
}
body.woocommerce-checkout #order_review #payment ul.payment_methods {
    padding: 0 0 1.25rem;
    margin: 0;
}
body.woocommerce-checkout #order_review #payment div.form-row.place-order { padding: 0; }
body.woocommerce-checkout #order_review #payment #place_order {
    display: flex;
    width: 100%;
    padding: 1.15rem 1.5rem;
}

/* The express-checkout separator, as a hairline with "or" in the middle in
   the site's eyebrow type. WooPayments prints "— OR —" with an inline margin,
   hence the !important on the margin alone; the dashes are hidden by zeroing
   the text and the word comes back as generated content. */
body.woocommerce-checkout #wcpay-express-checkout-button-separator {
    margin: 1.75rem 0 2.25rem !important;
    font-size: 0;
    line-height: 1;
    text-align: center;
    background:
        linear-gradient(var(--at-rule, #e4dbcf), var(--at-rule, #e4dbcf)) left center / calc(50% - 2rem) 1px no-repeat,
        linear-gradient(var(--at-rule, #e4dbcf), var(--at-rule, #e4dbcf)) right center / calc(50% - 2rem) 1px no-repeat;
}
body.woocommerce-checkout #wcpay-express-checkout-button-separator::after {
    content: "or";
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
}

/* The card fields come in a bordered fieldset with an inline 7px padding,
   which drew a box inside the summary card's box. The card element brings
   its own field borders. */
body.woocommerce-checkout #payment fieldset.wc-payment-form {
    padding: 0 !important;
    margin: 0;
    border: 0;
}

.at-checkout-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 1.1rem 0 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.8125rem;
    color: var(--at-faint, #9a8f85);
}
.at-checkout-trust .at-icon { color: var(--at-faint, #9a8f85); }


/* ═══════════════════════════════════════════════════════════════════════════
   Narrow screens
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
    /* The summary follows the items rather than sitting above them: on a phone
       a total you have not seen the items for is a total you do not trust. */
    body.woocommerce-cart .cart-collaterals { width: auto; margin-top: 2.5rem; }
    body.woocommerce-checkout #order_review_heading { margin-top: 2.5rem; }
    body.woocommerce-checkout #order_review { margin-bottom: 2rem; }
}

@media (max-width: 767px) {
    /* WooCommerce's own responsive cart turns each row into a stack of labelled
       lines, with the column header repeated in front of each value. Keep that
       structure — it is the right pattern for a table on a phone — and restyle
       the repeated label to the same letterspaced caps the desktop column
       headers use, instead of the bold sans it ships as. */
    body.woocommerce-cart table.cart td { padding: 0.6rem 0; text-align: right; }
    body.woocommerce-cart table.cart td::before {
        font-family: var(--at-sans, sans-serif);
        font-size: 0.625rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--at-faint, #9a8f85);
    }
    /* The zebra stripe belongs to a data table, not to a list of two paintings. */
    body.woocommerce-cart table.cart tr:nth-child(2n) td { background: transparent; }

    body.woocommerce-cart table.cart td.product-thumbnail { display: block; padding-top: 1.25rem; }
    body.woocommerce-cart table.cart td.product-thumbnail::before { content: none; }
    body.woocommerce-cart table.cart td.product-thumbnail img { width: 84px; }
    body.woocommerce-cart table.cart td.product-name { text-align: right; }
    /* The remove cross sits on its own line above the image with a rule under
       it, which reads as a divider between two items that are not there. */
    body.woocommerce-cart table.cart td.product-remove { border-bottom: 0; padding-bottom: 0; }

    body.woocommerce-cart td.actions .coupon { flex-direction: column; }
    body.woocommerce-cart td.actions button[name="update_cart"] { display: block; margin-inline: auto; }

    .at-shop-head { margin-bottom: 2rem; }

    /* The summary's own labels are already the whole row, so they do not want
       the repeated data-title in front of the number as well. */
    body.woocommerce-cart .cart_totals table.shop_table td::before,
    body.woocommerce-checkout .woocommerce-checkout-review-order-table td::before { content: none; }
}