/* ============================================
   LIGHTBOARD STUDIO — WooCommerce Styles
   All WC-specific overrides. Depends on style.css tokens.
   ============================================ */

/* ============================================
   WC WRAPPER
   ============================================ */
.wc-wrap {
    background: var(--cream);
    min-height: 60vh;
}

.wc-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 120px 24px 80px;
}

/* ============================================
   FORM INPUTS — Global WooCommerce
   ============================================ */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="url"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select {
    width: 100%;
}
/* Quantity stays the 72px box (Delta §7.3); the width:100% above outranks style.css's .quantity .qty */
.woocommerce .quantity .qty {
    width: 72px;
}

/* On light (cream) backgrounds */


/* Focus state */

/* Labels */
.woocommerce label,
.woocommerce .form-row label {
    margin-bottom: 6px;
    display: block;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

/* ============================================
   NOTICES WRAPPER POSITIONING
   When WC notices fire at the top of the document flow on full-bleed
   pages (PDP, cart, checkout), the .woocommerce-notices-wrapper lands
   in the viewport's 0-76px band — directly behind the fixed nav. Push
   it below the nav and lay it on the same dark navy as the hero so it
   blends into the page rhythm rather than floating awkwardly.
   ============================================ */
body.single-product > .woocommerce-notices-wrapper,
body.woocommerce-cart > #main > .woocommerce-notices-wrapper:first-child,
body.woocommerce-checkout > #main > .woocommerce-notices-wrapper:first-child {
    margin: 0;
    background: var(--w);
    padding: 110px var(--gutter) 0;
}

body.single-product > .woocommerce-notices-wrapper:empty,
body.woocommerce-cart > #main > .woocommerce-notices-wrapper:first-child:empty,
body.woocommerce-checkout > #main > .woocommerce-notices-wrapper:first-child:empty {
    padding: 0;
}

/* Constrain the inner notice to our max-width and center it */
body.single-product > .woocommerce-notices-wrapper > *,
body.woocommerce-cart > #main > .woocommerce-notices-wrapper:first-child > *,
body.woocommerce-checkout > #main > .woocommerce-notices-wrapper:first-child > * {
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   NOTICES
   DSM: success = teal 15% bg + teal border
        error   = orange 15% bg + orange border
        info    = navy-3 bg + navy-border
   ============================================ */

/* Success — "Product added", "Coupon applied", etc. */
.woocommerce-message {
    border-radius: var(--rs);
    padding: 14px 20px;
    font-family: var(--fb);
    font-size: var(--fs-caption);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    background: var(--teal-wash);
    border: 1px solid transparent;
    color: var(--teal-lo);
}

/* "View cart" CTA button inside success notice */
.woocommerce-message a.button,
.woocommerce-message .button {
    flex-shrink: 0;
    order: -1;
    background: transparent;
    border-color: var(--ln-2);
    color: var(--tx);
    height: 40px;
    padding: 0 16px;
    font-size: .875rem;
}

.woocommerce-message a.button:hover,
.woocommerce-message .button:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

/* Error — validation failures, out-of-stock, GTA notice */
.woocommerce-error {
    border-radius: var(--rs);
    padding: 14px 20px;
    font-family: var(--fb);
    font-size: var(--fs-caption);
    margin-bottom: 20px;
    list-style: none;
    background: var(--err-wash);
    border: 1px solid transparent;
    color: var(--err);
}

.woocommerce-error li {
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Inline bullet for each error line */
.woocommerce-error li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23B42318'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
/* GTA quote (lightboard_no_shipping_message) is an amber notice, not an error */
.woocommerce-error:has(.gta-quote) {
    background: var(--orange-wash);
    color: var(--orange-lo);
    padding: 14px 16px;
}
.woocommerce-error:has(.gta-quote) li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%238F4912'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12'/%3E%3C/svg%3E");
}

/* Info — shipping estimate prompts, login hints */
.woocommerce-info {
    border-radius: var(--rs);
    padding: 14px 20px;
    font-family: var(--fb);
    font-size: var(--fs-caption);
    margin-bottom: 20px;
    background: var(--mist);
    border: 1px solid transparent;
    color: var(--ink-2);
}

.woocommerce-info a {
    color: var(--acc-tx);
    font-weight: 500;
    transition: color var(--dur-1) var(--ease);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

.woocommerce-info a:hover {color:var(--tx)}

/* GTA shipping quote notice — rendered by lightboard_no_shipping_message()
   inside .woocommerce-error. The <li> is a flex ROW (icon ▸ content), so the
   notice body is a single .gta-quote span that stacks its title + text. */
.woocommerce-error li .gta-quote {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 3px 0 2px;
}

.gta-quote-title {
    font-family: var(--ff);
    font-size: var(--fs-h4);
    font-weight: var(--fw-display);
    letter-spacing: -.01em;
    line-height: var(--lh-h3);
    color: var(--orange-lo);
}

.gta-quote-text {
    font-family: var(--fb);
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--orange-lo);
}

.gta-quote-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color .25s;
    color: var(--orange-lo);
}

.gta-quote-text a:hover {color:var(--ink)}

/* ============================================
   SHOP PAGE (archive-product)
   ============================================ */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Product card */
.woocommerce ul.products li.product {
    overflow: hidden;
    transition: all .4s var(--ease);
    display: flex;
    flex-direction: column;
    background: var(--w);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--sh-2);
    border-color: var(--line-2);
}

.woocommerce ul.products li.product a img {
    width: 100%;
    display: block;
    transition: transform .6s var(--ease);
}



.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color:var(--tx);
    padding: 20px 24px 4px;
    line-height:var(--lh-h3);
}

.woocommerce ul.products li.product .price {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color:var(--tx);
    padding: 0 24px 16px;
}

.woocommerce ul.products li.product .price del {
    color:var(--tx-3);
    font-size:var(--fs-caption);
    font-weight: 400;
}

.woocommerce ul.products li.product .button {
    margin: auto 24px 24px;
    text-align: center;
    justify-content: center;
    background: transparent;
    color: var(--tx);
    height: 40px;
    padding: 0 16px;
    font-size: .875rem;
    border-color: var(--ln-2);
}
.woocommerce ul.products li.product .button:hover{background:var(--sur-2);border-color:var(--tx-3);color:var(--tx)}

/* ============================================
   SALE BADGE
   ============================================ */
.woocommerce span.onsale,
.onsale {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    min-height: auto;
    min-width: auto;
    background: var(--orange);
    color: var(--w);
}

/* "Save $X" sale badge — premium, calm teal (the savings accent). Output by
   lightboard_sale_badge() on product pages when a product is on sale. */
.lb-sale-save {
    background: var(--teal-wash);
    color: var(--teal-lo);
}
.lb-sale-save svg { flex-shrink: 0; }
/* Generic PDP: vertically centre the pill within the "From … · note" row. */
.pdp-price-row .lb-sale-save { align-self: center; }
/* Bespoke PDP: drop the badge onto its own line under the big price. */
.spl-price-big .lb-sale-save { flex-basis: 100%; margin-top: 10px; }

/* ============================================
   OUT OF STOCK BADGE
   ============================================ */
.outofstock .prod-img::after,
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link::after {
    content: 'Out of Stock';
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--mist-2);
    color: var(--ink-2);
}

/* ============================================
   STORE NOTICE  (Settings → General → Store notice)
   Output by woocommerce_demo_store() on wp_footer. Block styles are dequeued,
   so we style the bar ourselves: fixed bottom bar with an orange top edge.
   ============================================ */
.woocommerce-store-notice,
p.woocommerce-store-notice.demo_store {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0;
    padding: 14px 24px;
    font-family: var(--fb);
    font-size: var(--fs-caption);
    line-height: 1.5;
    text-align: center;
    background: var(--w);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    box-shadow: var(--sh-2);
}
.woocommerce-store-notice a {
    color: var(--acc-tx);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}
.woocommerce-store-notice a:hover {color:var(--tx)}
.woocommerce-store-notice__dismiss-link {
    margin-left: 16px;
    color:var(--tx-2);
    font-family:var(--fb);
    font-weight: 600;
    font-size:var(--fs-spec);
    border-bottom:1px solid var(--ln-2);
}
.woocommerce-store-notice__dismiss-link:hover { color:var(--tx); }

/* ============================================
   SINGLE PRODUCT
   ============================================ */
.single-product .wc-wrap {
    background: var(--w);
}

/* Availability pill on the single-product summary (simple products).
   Styles WooCommerce's <p class="stock ..."> so out-of-stock / backorder /
   in-stock products on the GENERIC PDP read cleanly, not as bare text.
   (Bespoke single-product-{slug}.php templates render their own stock state.) */
.woocommerce div.product p.stock,
.pdp-summary p.stock {
    margin: 0 0 18px;
}
.woocommerce div.product p.stock.in-stock,
.pdp-summary p.stock.in-stock {
    background: var(--teal-wash);
    color: var(--teal-lo);
}
.woocommerce div.product p.stock.out-of-stock,
.pdp-summary p.stock.out-of-stock {
    background: var(--mist-2);
    color: var(--ink-2);
}
.woocommerce div.product p.stock.available-on-backorder,
.pdp-summary p.stock.available-on-backorder {
    background: var(--orange-wash);
    color: var(--orange-lo);
}

/* Back-in-stock "Notify me" capture on the generic PDP (out-of-stock simple
   products). Rendered by lightboard_pdp_notify_form() in inc/woocommerce.php. */
.pdp-notify {
    margin: 6px 0 18px;
    scroll-margin-top: 96px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 18px 20px;
}
.pdp-notify-label {
    margin-bottom: 10px;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}
.pdp-notify-form { display: flex; gap: 8px; }
.pdp-notify-input {
    flex: 1;
    min-width: 0;
}
.pdp-notify-btn {
    background: var(--orange);
    color: var(--w);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid transparent;
    border-radius: var(--rs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease);
}
.pdp-notify-btn:hover {background:var(--orange-lo)}
.pdp-notify-success {
    padding: 18px 22px;
    border-radius: var(--rs);
    background:var(--teal-wash);
    border:1px solid var(--ln-2);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color: var(--tx);
}
.pdp-notify-success svg { color: var(--teal); flex-shrink: 0; }
.pdp-notify-error {margin:8px 0 0;font-family:var(--fb);font-size:var(--fs-spec);color:var(--err)}
.pdp-notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) {
    .pdp-notify-form { flex-direction: column; }
    .pdp-notify-btn { justify-content: center; }
}

.woocommerce div.product .woocommerce-product-gallery {
    border-radius: var(--r);
    overflow: hidden;
    border:1px solid var(--ln);
    
}

.woocommerce div.product .product_title {
    font-family: var(--ff);
    font-size:var(--fs-h2);
    font-weight:var(--fw-display);
    color:var(--tx);
    line-height:var(--lh-h2);
    margin-bottom: 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--ff);
    font-size:var(--fs-stat);
    font-weight:var(--fw-display);
    color:var(--tx);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--fs-body-lg);
    color:var(--tx-2); /* harmonized with .pdp-summary override (the approved body grey) */
    line-height: var(--lh-body-lg);
    margin-bottom: 32px;
}

/* Add to cart */
.woocommerce div.product form.cart .single_add_to_cart_button {
    display: inline-flex;
    background: var(--orange);
    color: var(--w);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--orange-lo);
}

/* Disabled / variation-needed state — variable products mark the button
   disabled until a variation is selected. Default WC sets opacity: .5,
   which on orange-over-dark renders nearly invisible. Keep the orange
   readable; signal non-interactivity via cursor + reduced glow. */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed:hover {
    background: var(--orange);
    transform: none;
}

/* Quantity input */
.woocommerce div.product form.cart .qty {
    text-align: center;
    width: 72px;
}


/* Product meta */
.woocommerce div.product .product_meta {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
    margin-top: 24px;
    padding-top: 24px;
    border-top:1px solid var(--ln);
}

.woocommerce div.product .product_meta a {
    color:var(--tx-3);
    transition: color .3s;
}

.woocommerce div.product .product_meta a:hover {
    color:var(--tx);
}

/* ============================================
   CART
   ============================================ */
.woocommerce table.cart {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fb);
}

.woocommerce table.cart th {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight:500;
    letter-spacing:0;
    color: var(--ink-3);
    padding: 12px 16px;
    border-bottom:2px solid var(--ln);
    text-align: left;
}

.woocommerce table.cart td {
    padding: 20px 16px;
    border-bottom:1px solid var(--ln);
    vertical-align: middle;
    color:var(--tx);
}

.woocommerce table.cart .product-name a {
    font-family: var(--ff);
    font-weight: 600;
    color:var(--tx);
    transition: color .3s;
}

.woocommerce table.cart .product-name a:hover {
    color:var(--tx-2);
}

.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    color:var(--tx);
}

/* Cart buttons */
.woocommerce .cart .button[name="update_cart"] {
    background: transparent;
    border-color: var(--ln-2);
    color: var(--tx);
}

.woocommerce .cart .button[name="update_cart"]:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

/* Cart totals */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--w);
    border-radius: var(--r);
    padding: 32px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color:var(--tx);
    margin-bottom: 20px;
    }

.woocommerce .cart-collaterals .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
    padding: 12px 0;
    border-bottom:1px solid var(--ln);
    font-family: var(--fb);
    color:var(--tx);
}

.woocommerce .cart-collaterals .cart_totals table .order-total td {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color:var(--tx);
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button {
    text-align: center;
    margin-top: 20px;
    background: var(--orange);
    color: var(--w);
    display: inline-flex;
    width: 100%;
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button:hover {
    background: var(--orange-lo);
}

/* ============================================
   CHECKOUT
   ============================================ */
.woocommerce form.checkout h3,
.woocommerce form.checkout h2 {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color:var(--tx);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom:1px solid var(--ln);
    }

.woocommerce #payment {
    background: var(--w);
    border-radius: var(--r);
    padding: 24px;
}

.woocommerce #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.woocommerce #payment ul.payment_methods li {
    padding: 12px 0;
    border-bottom:1px solid var(--ln);
    font-family: var(--fb);
    color:var(--tx);
}

#place_order {
    margin-top: 8px;
    background: var(--orange);
    color: var(--w);
    width: 100%;
}

#place_order:hover {
    background: var(--orange-lo);
}

/* My Account base styles moved to "MY ACCOUNT PAGE — REWRITTEN" block below.
   (Previously a small dual definition of sidebar grid sat here; deleted to
   avoid overrides fighting the new dark-section design.) */

/* ============================================
   BREADCRUMBS
   ============================================ */
.woocommerce .woocommerce-breadcrumb {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--ink-3);
    margin-bottom: 32px;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--ink-2);
    transition: color .3s;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--orange);
}

/* ============================================
   RESULT COUNT & ORDERING
   ============================================ */
.woocommerce .woocommerce-result-count {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight: 500;
    color: var(--ink-3);
}

.woocommerce .woocommerce-ordering select {
    height: 40px;
    padding: 0 40px 0 14px;
    font-size: var(--fs-caption);
}

/* ============================================
   PAGINATION
   ============================================ */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    justify-content: center;
    margin-top: 48px;
}




/* ============================================
   TABS (single product)
   ============================================ */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    border-bottom:1px solid var(--ln);
    margin-bottom: 32px;
    list-style: none;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    font-family:var(--fb);
    font-size:var(--fs-caption);
    font-weight: 600;
    color: var(--ink-3);
    padding: 12px 24px;
    border-bottom: 2px solid transparent;
    transition: all .3s var(--ease);
    text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color:var(--tx);
    opacity: 1;
    border-bottom-color: var(--orange);
}

/* ============================================
   RELATED PRODUCTS
   ============================================ */
.related.products {
    background:var(--mist);
    padding: 80px 24px;
    margin-top: 0;
}

.related.products > h2 {
    font-family: var(--ff);
    font-size: var(--fs-h2);
    font-weight:var(--fw-display);
    color:var(--tx);
    margin-bottom: 40px;
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   SHOP ARCHIVE — HERO
   (reference: category-page.html .hero section)
   ============================================ */
.shop-hero {
    padding: calc(var(--nav-h) + 56px) var(--gutter) 72px;
    background: var(--w);
    color: var(--ink-2);
}

/* Ambient glow orbs — same keyframe as homepage hero (defined in style.css) */




.shop-hero-in {
    max-width: var(--max);
    margin: 0 auto;
}

/* Breadcrumb — light text on dark hero */
.shop-breadcrumb {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight: 500;
    letter-spacing:0;
    color:var(--tx-3);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    list-style: none;
    padding: 0;
}

.shop-breadcrumb a {
    color:var(--tx-3);
    text-decoration: none;
    transition: color .25s;
}

.shop-breadcrumb a:hover {
    color:var(--tx);
}

.shop-breadcrumb .sep {
    color:var(--tx-3);
}

/* 2-column hero grid: copy + stats */
.shop-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: end;
}

/* Eyebrow — reuses global .hero-eyebrow from style.css */
.shop-hero-left .hero-eyebrow {
    margin-bottom: 20px;
}

.shop-hero-left h1 {
    font-family: var(--ff);
    font-weight:var(--fw-hero);
    font-size:var(--fs-hero);
    margin-bottom: 24px;
    color:var(--tx);
}

.shop-hero-left .lead {
    font-family: var(--fb);
    font-size:var(--fs-body-lg);
    line-height:var(--lh-body);
    color:var(--tx-2);
    max-width: 480px;
    margin: 0;
}

/* Stats column — mirrors .hero-meta from category-page.html */
.shop-hero-stats {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.shop-hero-stat {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom:1px solid var(--ln);
}

.shop-hero-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.shop-hero-stat-num {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-stat);
    color:var(--tx);
    min-width: 72px;
    flex-shrink: 0;
}

.shop-hero-stat-lab {
    font-family: var(--fb);
    font-size:var(--fs-body);
    line-height: 1.5;
    color:var(--tx-2);
}

/* ============================================
   SHOP ARCHIVE — CHAPTER NAV (sticky filter strip)
   (reference: category-page.html .chapter-nav)
   ============================================ */
.shop-chapter {
    position: sticky;
    top: 76px;
    z-index: 50;
    background: rgba(7, 7, 26, .85);
    
    
    border-top:1px solid var(--ln);
    border-bottom:1px solid var(--ln);
}

.shop-chapter-in {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 24px;
}

.shop-chapter-pills {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-shrink: 0;
}

.shop-chapter-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family:var(--fb);
    font-size:var(--fs-caption);
    font-weight: 500;
    color:var(--tx-3);
    text-decoration: none;
    transition: color .25s;
    white-space: nowrap;
}

.shop-chapter-pill .num {
    transition: all .3s var(--ease);
    width: 24px;
    height: 24px;
    padding: 0;
    justify-content: center;
    background: var(--mist-2);
    color: var(--ink-2);
}

.shop-chapter-pill:hover,
.shop-chapter-pill.active {
    color:var(--tx);
}

.shop-chapter-pill.active .num {
    background: var(--ink);
    color: var(--w);
}

/* Filter bar: result count + orderby — right side of chapter nav */
.shop-filter-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.shop-filter-bar .woocommerce-result-count {
    font-family:var(--fb);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing:0;
    color:var(--tx-3);
    margin: 0;
}

.shop-filter-bar .woocommerce-ordering {
    margin: 0;
}

.shop-filter-bar .woocommerce-ordering select {
    height: 40px;
    padding: 0 40px 0 14px;
    font-size: var(--fs-caption);
    cursor: pointer;
}



/* ============================================
   SHOP ARCHIVE — PRODUCT CARD STRUCTURE
   Adds image container and body wrapper to the
   existing .woocommerce ul.products li.product rules
   ============================================ */

/* Image container — provides aspect ratio + sale badge anchor */
.shop-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--mist);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 1px solid var(--line);
}

.shop-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Override the generic img rule inside our image container */
.shop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .6s var(--ease);
}



/* Body — flex column so add-to-cart anchors to bottom */
.shop-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Title link */
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
    transition: color .25s;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
    color:var(--tx-2);
}

/* ============================================
   SHOP ARCHIVE — RESPONSIVE
   ============================================ */
@media (max-width: 980px) {
    .shop-hero {
        padding: 120px 24px 80px;
    }

    .shop-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .shop-hero-left .lead {
        max-width: none;
    }

    /* Stats row at tablet */
    .shop-hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }

    .shop-hero-stat {
        flex: 1 1 30%;
        min-width: 100px;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        border-bottom: none;
        border-right:1px solid var(--ln);
        padding: 0 24px 0 0;
        margin-right: 24px;
        padding-bottom: 0;
    }

    .shop-hero-stat:last-child {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .shop-hero-stat-num {
        font-size:var(--fs-stat);
        min-width: auto;
    }

    .shop-chapter-in {
        padding: 0 24px;
    }

    .shop-chapter-pills {
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .shop-chapter-in {
        height: auto;
        min-height: 56px;
        padding: 10px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .shop-chapter-pills {
        order: 2;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        gap: 14px;
    }

    .shop-chapter-pills::-webkit-scrollbar {
        display: none;
    }

    .shop-chapter-pill .num {
        display: none;
    }

    .shop-filter-bar {
        order: 1;
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   CATEGORY EDITORIAL LAYOUT
   (reference: category-page.html — alternating product sections + compare)
   Loaded by: template-parts/category/editorial-{slug}.php
   Routed from: woocommerce/archive-product.php when an editorial
   partial exists for the current category slug.
   Class prefix: .cat-
   ============================================ */

/* --- Section shell — full-bleed background, contained content --- */
.cat-product {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--sec-y) 0;
}

.cat-product-dark {background:var(--mist);color:var(--ink-2)}
.cat-product-light {background:var(--w);color:var(--ink-2)}

/* Subtle orange glow orb behind the numeral on dark sections */


.cat-product-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Background numeral --- */
.cat-product-num {display:none}

.cat-product-light .cat-product-num {display:none}

/* --- 2-col layout --- */
.cat-product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--col-gap);
}

/* Flip modifier — visually reverse columns */
.cat-product-flip .cat-product-media { order: 2; }
.cat-product-flip .cat-product-detail { order: 1; }

/* --- Media column --- */
.cat-product-media {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cat-product-status {
    align-self: flex-start;
    background: var(--teal-wash);
    color: var(--teal-lo);
}

.cat-product-dark .cat-product-status {
    background: var(--teal-wash);
    color: var(--teal-lo);
}

.cat-product-light .cat-product-status {
    background: var(--teal-wash);
    color: var(--teal-lo);
}

.cat-product-status .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--teal);
}

.cat-product-frame {
    position: relative;
    aspect-ratio: 4 / 5;
}

/* Frame rendered as a link to the product (editorial category layouts) */
a.cat-product-frame {
    display: block;
    cursor: pointer;
}
a.cat-product-frame:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}

.cat-product-dark .cat-product-frame {
}

.cat-product-light .cat-product-frame {
}

.cat-product-frame img {
    object-position: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* --- Detail column --- */
.cat-product-detail {
    max-width: 540px;
}

.cat-product-tag {
    margin-bottom: 24px;
    background: var(--mist-2);
    color: var(--ink-2);
}

.cat-product-dark .cat-product-tag {
    background: var(--mist-2);
    color: var(--ink-2);
}

.cat-product-light .cat-product-tag {
    background: var(--mist-2);
    color: var(--ink-2);
}

.cat-product-detail h2 {
    font-family: var(--ff);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    margin: 0 0 24px;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.cat-product-dark .cat-product-detail h2 { color:var(--tx); }
.cat-product-light .cat-product-detail h2 { color:var(--tx); }

.cat-product-desc {
    font-family: var(--fb);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
    margin: 0 0 32px;
}

.cat-product-dark .cat-product-desc { color:var(--tx-2); }
.cat-product-light .cat-product-desc {color:var(--tx-2)}

/* --- Spec grid (2x2) --- */
.cat-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}

.cat-spec {
    border-radius: var(--rs);
    padding: 16px 18px;
}

.cat-product-dark .cat-spec {
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--rs);
}

.cat-product-light .cat-spec {
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--rs);
}

.cat-spec-val {
    font-family: var(--ff);
    font-size: var(--fs-val);
    font-weight: var(--fw-display);
    line-height: 1.2;
    margin-bottom: 4px;
    color: var(--tx);
}

.cat-spec-lab {
    font-family:var(--fb);
    font-size: var(--fs-spec);
    font-weight:500;
    letter-spacing: var(--ls-spec);
    }

.cat-product-dark .cat-spec-lab { color:var(--tx-3); }
.cat-product-light .cat-spec-lab {color:var(--tx-3)}

/* --- Included bar --- */
.cat-included-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--rs);
    font-family: var(--fb);
    font-size:var(--fs-caption);
    margin-bottom: 32px;
}

.cat-product-dark .cat-included-bar {
    background: var(--teal-wash);
    border: 0;
    color: var(--teal-lo);
}

.cat-product-light .cat-included-bar {
    background: var(--teal-wash);
    border: 0;
    color: var(--teal-lo);
}

.cat-included-bar svg { flex-shrink: 0; }

/* --- Product actions --- */
.cat-product-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Ghost button on light section needs navy text + navy border */




/* ============================================
   CATEGORY EDITORIAL — COMPARE TABLE
   ============================================ */
.cat-compare {
    width: 100%;
    padding: var(--sec-y) 0;
    background: var(--mist);
}



.cat-compare-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.cat-compare-head {
    margin-bottom: 56px;
    text-align: left;
    max-width: 680px;
}

.cat-compare-head .tag {
    margin-bottom: 16px;
}

.cat-compare-head h2 {
    font-family: var(--ff);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    color: var(--tx);
    margin: 0;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.cat-compare-table {
    overflow: hidden;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
}

.cat-compare-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: stretch;
}

.cat-compare-row + .cat-compare-row {
    border-top: 1px solid var(--ln);
}

.cat-compare-col {
    font-family: var(--fb);
    font-size: var(--fs-body);
    padding: 16px 20px;
    color: var(--tx-2);
    display: flex;
    align-items: center;
}

.cat-compare-col-label {
    font-family: var(--fb);
    font-weight: 500;
    color: var(--tx);
    border-right: 1px solid var(--ln);
}

.cat-compare-col-product {
    text-align: center;
    border-right: 1px solid var(--ln);
    justify-content: center;
}

.cat-compare-col-product:last-child {
    border-right: none;
}

/* Head row */
.cat-compare-row-head .cat-compare-col {
    padding: 14px 20px;
    background: var(--sur-2);
    font: 500 var(--fs-spec)/1.4 var(--fb);
    color: var(--tx-3);
    border-bottom: 1px solid var(--ln-2);
}

.cat-compare-row-head .cat-compare-col-product {
    color: var(--tx);
}

.cat-compare-sub {
    margin-left: 8px;
    background: var(--mist-2);
    color: var(--ink-2);
}

/* Check / dash indicators */
.cat-check {
    color: var(--teal);
    font-weight: 600;
}

.cat-dash {
    color:var(--tx-3);
}

/* ============================================
   CATEGORY EDITORIAL — CTA BAND
   ============================================ */
.cat-cta-band {
    width: 100%;
    background: var(--navy);
    padding: var(--sec-y) 0;
}

.cat-cta-band-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    align-items: center;
    padding: 0 var(--gutter);
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: var(--col-gap);
}

.cat-cta-band-copy .tag {
    margin-bottom: 16px;
}

.cat-cta-band-copy h2 {
    font-family: var(--ff);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    color: var(--tx);
    margin: 0 0 16px;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    max-width: 20ch;
}

.cat-cta-band-copy p {
    font-family: var(--fb);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
    color: var(--tx-2);
    margin: 0;
    max-width: 52ch;
}

.cat-cta-band-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
}





/* ============================================
   CATEGORY EDITORIAL — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    
    
    .cat-product-layout { gap: 56px; }
    
}

@media (max-width: 900px) {
    

    .cat-product-num {display:none}

    .cat-product-layout,
    .cat-product-flip .cat-product-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* On mobile, media always renders first regardless of flip */
    .cat-product-media,
    .cat-product-flip .cat-product-media { order: 1; }

    .cat-product-detail,
    .cat-product-flip .cat-product-detail { order: 2; max-width: none; }

    .cat-product-detail h2 { font-size:var(--fs-h2-sm); }

    
    .cat-compare-head { margin-bottom: 36px; }

    .cat-compare-row {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .cat-compare-col {
        padding: 16px 14px;
        font-size:var(--fs-caption);
    }

    .cat-compare-row-head .cat-compare-col {
        padding: 14px 14px;
        font-size:var(--fs-spec);
    }

    .cat-compare-sub { display: none; }

    

    .cat-cta-band-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cat-cta-band-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

/* ============================================
   SINGLE PRODUCT — STICKY PRODUCT BAR
   (reference: product-page.html .sticky-bar)
   ============================================ */
/* On PDPs the sticky spec/price bar sits directly beneath the nav, so a
   transparent-at-top nav exposes a flat band of body background that seams
   badly against the hero's gradient orb (worst on mobile). Start the nav in
   its .scrolled visual state here — nav + bar read as one intentional chrome
   stack. Other pages keep the fade-in-on-scroll behaviour. */
.single-product .nav {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--line);
}

.pdp-sticky-bar {
    position: sticky;
    z-index: 50;
    top: var(--nav-h);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--line);
}

.pdp-sticky-bar-inner {
    max-width: var(--max);
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 var(--gutter);
}

/* Breadcrumb inside sticky bar */
.pdp-crumb .woocommerce-breadcrumb,
.pdp-crumb nav {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    color:var(--tx-3);
    margin: 0;
    opacity: 1;
}

.pdp-crumb .woocommerce-breadcrumb a,
.pdp-crumb nav a {
    text-decoration: none;
    color: var(--ink-3);
    transition: color var(--dur-1) var(--ease);
}

.pdp-crumb .woocommerce-breadcrumb a:hover,
.pdp-crumb nav a:hover {
    color: var(--ink);
}

.pdp-crumb .sep {
    color: var(--ink-4);
}

/* Sticky right actions */
.pdp-sticky-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.pdp-sticky-price {
    font-family: var(--ff);
    font-size:var(--fs-caption);
    color:var(--tx-2);
}

.pdp-sticky-price .woocommerce-Price-amount {
    color:var(--tx);
    font-weight: 600;
}

.pdp-sticky-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight: 500;
    color:var(--tx-2);
    text-decoration: none;
    padding: 8px 4px;
    transition: color .25s;
}

.pdp-sticky-link:hover {
    color:var(--tx);
}

/* ============================================
   SINGLE PRODUCT — PDP HERO
   (reference: product-page.html .pdp-hero)
   ============================================ */
.pdp-hero {
    padding: 96px var(--gutter) var(--sec-y);
    background: var(--w);
    color: var(--ink-2);
}

/* Orange glow orb top-right */


/* Teal glow orb bottom-left */


.pdp-hero-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--col-gap);
}

/* ============================================
   SINGLE PRODUCT — GALLERY (left column)
   (reference: product-page.html .gallery / .gal-stage)
   ============================================ */
.pdp-gallery {
    position: sticky;
    top: calc(var(--nav-h) + 84px);
}

/* Main gallery container — glow-border treatment + aspect-ratio + overflow
   clip. The clip is required because FlexSlider sets an inline width of
   (numSlides × slideWidth) on the wrapper figure to lay slides out
   horizontally. Without overflow:hidden on this container, the wrapper
   blows out to thousands of px wide and breaks the page.

   Trade-off: this also clips the .flex-control-thumbs strip FlexSlider
   injects as a sibling of the figure. Thumbnails are repositioned outside
   the clip via JS in woocommerce.js (see "move thumbs out" block). */
.pdp-gallery .woocommerce-product-gallery {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    background: var(--mist);
    border: 0;
}

.pdp-gallery .woocommerce-product-gallery__wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.pdp-gallery .woocommerce-product-gallery__image {
    width: 100%;
    height: 100%;
}

.pdp-gallery .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.pdp-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Zoom / lightbox trigger — WooCommerce outputs a bare 🔍 emoji link; the
   theme dequeues WC styles, so we render it as a clean frosted round button
   pinned to the top-right of the image instead of floating unstyled. */
.pdp-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    background: var(--w);
    border: 0;
    box-shadow: var(--sh-1);
    transition: background-color var(--dur-1) var(--ease);
}
.pdp-gallery .woocommerce-product-gallery__trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .8;
    background: center / 20px 20px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316161D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    transition: opacity .25s var(--ease);
}
.pdp-gallery .woocommerce-product-gallery__trigger:hover {
    background: var(--mist);
}
.pdp-gallery .woocommerce-product-gallery__trigger:hover::after { opacity: 1; }

/* Thumbnail strip below main image
   Targets both FlexSlider (.flex-control-thumbs) and modern WC thumbnail markup */
.pdp-gallery .flex-control-thumbs,
.pdp-gallery .woocommerce-product-gallery__thumbnails {
    margin-top: 14px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.pdp-gallery .flex-control-thumbs li,
.pdp-gallery .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__thumbnail {
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--ln);
    aspect-ratio: 1 / 1;
    border-radius: var(--rs);
    background: var(--mist);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.pdp-gallery .flex-control-thumbs li img,
.pdp-gallery .woocommerce-product-gallery__thumbnails img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    transition: opacity .3s var(--ease);
    display: block;
}

.pdp-gallery .flex-control-thumbs li:hover img,
.pdp-gallery .flex-control-thumbs li img.flex-active,
.pdp-gallery .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__thumbnail:hover img,
.pdp-gallery .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__thumbnail.wc-action-active img {
    opacity: 1;
}

.pdp-gallery .flex-control-thumbs li:hover,
.pdp-gallery .flex-control-thumbs li.wc-action-active,
.pdp-gallery .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__thumbnail:hover {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}
.pdp-gallery .flex-control-thumbs li:has(> img.flex-active) {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}

/* ============================================
   SINGLE PRODUCT — SUMMARY (right column)
   (reference: product-page.html .summary)
   ============================================ */
.pdp-summary {
    padding-top: 8px;
}

/* Eyebrow: "Category · Product Type"
   Matches reference .pdp-eyebrow with the leading line */
.pdp-eyebrow {
    font-family: var(--fb);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    margin-bottom: 18px;
    display: block;
    color: var(--tx-3);
}



/* Product title */
.pdp-title {
    font-family: var(--ff);
    font-size: var(--fs-hero);
    line-height: var(--lh-display);
    color: var(--tx);
    font-weight: var(--fw-hero);
    letter-spacing: var(--ls-display);
    margin-bottom: 16px;
}

/* Attribute tagline below title */
.pdp-sub {
    font-family:var(--fb);
    font-size:var(--fs-body);
    font-weight: 500;
    color:var(--tx-2);
    margin-bottom: 24px;
}

/* Rating row */
.pdp-rating-row {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom:1px solid var(--ln);
}

.pdp-rating-row .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdp-rating-row .star-rating {
    color:var(--tx);
    font-size:var(--fs-body);
    line-height: 1;
}

.pdp-rating-row .star-rating::before,
.pdp-rating-row .star-rating span::before {
    color:var(--tx);
}

/* Short description — the client formats this as a bulleted key-feature list.
   The list is styled as the reference's .key-list with check-like bullets. */
.pdp-summary .woocommerce-product-details__short-description {
    margin-bottom: 32px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--tx-2);
}

.pdp-summary .woocommerce-product-details__short-description p {
    color: var(--tx-2);
    margin-bottom: 12px;
}

/* Key-feature bullet list — matches reference .key-list */
.pdp-summary .woocommerce-product-details__short-description ul {
    list-style: none;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 18px 20px;
}

.pdp-summary .woocommerce-product-details__short-description ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--fb);
    font-size:var(--fs-body);
    color:var(--tx);
    line-height: 1.6;
}

/* Teal check icon via inline SVG data-URI */
.pdp-summary .woocommerce-product-details__short-description ul li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%232E7D73'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Price row: "From  $X,XXX  · note" */
.pdp-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.pdp-price-prefix {
    font-size: var(--fs-spec);
    letter-spacing: 0;
    color: var(--tx-3);
    font-family: var(--fb);
    font-weight: 500;
}

/* Override the global single-product price colour from orange to white on PDP */
.pdp-price-row .price,
.pdp-price-row p.price,
.pdp-price-row span.price {
    font-family: var(--ff);
    color: var(--tx);
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -.015em;
}

.pdp-price-row .woocommerce-Price-amount {
    color:var(--tx);
}

.pdp-price-row del .woocommerce-Price-amount {
    font-size: var(--fs-body-lg);
    color: var(--ink-4);
}

.pdp-price-note {
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color:var(--tx-3);
}

/* Add to cart form layout */
.pdp-atc-wrap {
    margin-bottom: 28px;
}

/* Simple products: form.cart contains [quantity][button] directly — flex row. */
.pdp-atc-wrap form.cart:not(.variations_form) {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Variable products: form.cart contains [variations table][single_variation_wrap].
   Group the option selector + selected price + qty/button into one contained
   card so the configure-and-buy area reads as a single, tidy block. */
.pdp-atc-wrap form.variations_form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 20px;
    gap: 16px;
}

/* The variations table inside a variable-product form fills width on its own. */
.pdp-atc-wrap form.variations_form .variations {
    margin: 0;
}

.pdp-atc-wrap form.variations_form .single_variation_wrap {
    margin: 0;
}

/* The qty + button row inside variable products. */
.pdp-atc-wrap .woocommerce-variation-add-to-cart {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.pdp-atc-wrap form.cart .quantity {
    flex-shrink: 0;
}

/* PDP Add to Cart button — full visual styling.
   Our PDP template doesn't wrap content in .woocommerce div.product,
   so the base rule at line ~377 (which scopes under .woocommerce div.product
   form.cart) never matches inside the PDP. Apply the full glow-pill treatment
   here against the .pdp-atc-wrap ancestor we control. */
.pdp-atc-wrap .single_add_to_cart_button {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    background: var(--orange);
    color: var(--w);
}

.pdp-atc-wrap .single_add_to_cart_button:hover {
    background: var(--orange-lo);
}

.pdp-atc-wrap .single_add_to_cart_button:disabled,
.pdp-atc-wrap .single_add_to_cart_button.disabled,
.pdp-atc-wrap .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.pdp-atc-wrap .single_add_to_cart_button:disabled:hover,
.pdp-atc-wrap .single_add_to_cart_button.disabled:hover,
.pdp-atc-wrap .single_add_to_cart_button.wc-variation-selection-needed:hover {
    background: var(--orange);
    transform: none;
}

/* Shipping strip — teal background capsule */
.pdp-ship-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--rs);
    font-family: var(--fb);
    font-size: var(--fs-caption);
    font-weight: 500;
    margin-bottom: 32px;
    background: var(--teal-wash);
    border: 0;
    color: var(--teal-lo);
}

.pdp-ship-strip svg {
    flex-shrink: 0;
}

.pdp-ship-strip b {
    font-weight: 600;
    color: var(--teal-lo);
}

/* Product meta (SKU, categories, tags) — dim on dark bg */
.pdp-summary .product_meta {
    font-size:var(--fs-spec);
    color:var(--tx-3);
    padding-top: 20px;
    border-top:1px solid var(--ln);
}

.pdp-summary .product_meta a {
    color:var(--tx-3);
    transition: color .3s;
}

.pdp-summary .product_meta a:hover {
    color:var(--tx);
}

/* ============================================
   SINGLE PRODUCT — SPECS TABLE
   (reference: product-page.html .specs section)
   Cream background, 2-col: head + table
   ============================================ */
.pdp-specs {
    padding: var(--sec-y) var(--gutter);
    background: var(--mist);
    color: var(--ink-2);
}

.pdp-specs-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
    gap: var(--col-gap);
}

.pdp-specs-head .tag {
    color: var(--tx-3);
    margin-bottom: 16px;
    display: block;
}



.pdp-specs-head h2 {
    font-family: var(--ff);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    color: var(--tx);
    margin-bottom: 18px;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.pdp-specs-head p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--tx-2);
    max-width: 42ch;
}

/* Spec table — white card with hairline rows */
.pdp-specs-table {
    background: var(--w);
    border:1px solid var(--ln);
    border-radius: var(--r);
    overflow: hidden;
}

.pdp-spec-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    border-bottom: 1px solid var(--ln);
    align-items: baseline;
    gap: 24px;
    padding: 16px 20px;
}

.pdp-spec-row:last-child {
    border-bottom: none;
}

.pdp-spec-lab {
    font-family: var(--fb);
    font-weight: 500;
    font-size: var(--fs-spec);
    letter-spacing: 0;
    color: var(--tx-3);
}

.pdp-spec-val {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color:var(--tx);
    font-weight: 500;
    line-height: 1.5;
}

/* ============================================
   SINGLE PRODUCT — TABS
   (dark navy-2 background override of the default
    light-context tab styles in the base TABS block)
   ============================================ */
.pdp-tabs-section {
    background: var(--w);
    padding: var(--sec-y) 0;
    border-top: 1px solid var(--line);
}

.pdp-tabs-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Tab list — dark version */
.pdp-tabs-section .woocommerce-tabs ul.tabs {
    border-bottom-color:var(--ln);
    background: transparent;
}

.pdp-tabs-section .woocommerce-tabs ul.tabs li a {
    color:var(--tx-3);
    opacity: 1;
    border-bottom-color: transparent;
}

.pdp-tabs-section .woocommerce-tabs ul.tabs li.active a,
.pdp-tabs-section .woocommerce-tabs ul.tabs li a:hover {
    color: var(--tx);
    opacity: 1;
    border-bottom-color: var(--ink);
}

/* Tab panel content — dark context typography */
.pdp-tabs-section .woocommerce-tabs .woocommerce-Tabs-panel {
    padding-top: 40px;
}

.pdp-tabs-section .woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    letter-spacing: -.02em;
    color:var(--tx);
    margin-bottom: 20px;
}

.pdp-tabs-section .woocommerce-tabs .woocommerce-Tabs-panel p,
.pdp-tabs-section .woocommerce-tabs .woocommerce-Tabs-panel li {
    font-family: var(--fb);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    color:var(--tx-2);
}

/* Details section — product long description (id="pdp-tabs" anchor target) */
.pdp-tabs-section {
    scroll-margin-top: calc(var(--nav-h) + 84px);
}
.pdp-tabs-head {
    max-width: 760px;
    margin-bottom: 28px;
}
.pdp-tabs-head .tag {
    color:var(--tx-3);
}
.pdp-tabs-head h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    letter-spacing: -.025em;
    font-size:var(--fs-h2-sm);
    color:var(--tx);
    margin: 8px 0 0;
}
.pdp-tabs-content {
    max-width: 760px;
    font-family: var(--fb);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    color:var(--tx-2);
}
.pdp-tabs-content > :first-child { margin-top: 0; }
.pdp-tabs-content > :last-child { margin-bottom: 0; }
.pdp-tabs-content p { margin: 0 0 16px; }
.pdp-tabs-content h2,
.pdp-tabs-content h3,
.pdp-tabs-content h4 {
    font-family: var(--ff);
    color:var(--tx);
    letter-spacing: -.015em;
    margin: 26px 0 10px;
}
.pdp-tabs-content a {color:var(--acc-tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.pdp-tabs-content a:hover {color:var(--tx)}
.pdp-tabs-content strong { color:var(--tx); }
.pdp-tabs-content ul,
.pdp-tabs-content ol { padding-left: 20px; margin: 0 0 16px; }
.pdp-tabs-content li { margin-bottom: 6px; }
.pdp-tabs-content img { max-width: 100%; height: auto; border-radius: var(--r); }

.pdp-tabs-section .woocommerce-tabs .woocommerce-Tabs-panel ul,
.pdp-tabs-section .woocommerce-tabs .woocommerce-Tabs-panel ol {
    padding-left: 20px;
    margin-bottom: 16px;
}

/* Additional Information tab: attribute table on dark background */
.pdp-tabs-section .woocommerce-tabs .woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.pdp-tabs-section .woocommerce-product-attributes th {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight:500;
    letter-spacing:0;
    color:var(--tx-3);
    padding: 14px 0;
    border-bottom:1px solid var(--ln);
    text-align: left;
    width: 36%;
}

.pdp-tabs-section .woocommerce-product-attributes td {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color:var(--tx-2);
    padding: 14px 0;
    border-bottom:1px solid var(--ln);
}

/* Reviews tab */
.pdp-tabs-section #reviews #comments ol.commentlist {
    list-style: none;
    padding: 0;
}

.pdp-tabs-section #reviews #comments .comment_container {
    display: flex;
    gap: 16px;
    padding: 24px 0;
    border-bottom:1px solid var(--ln);
}

.pdp-tabs-section #reviews #comments .comment-text {
    flex: 1;
}

.pdp-tabs-section #reviews #comments .star-rating {
    color:var(--tx);
}

.pdp-tabs-section #reviews #comments .woocommerce-review__author,
.pdp-tabs-section #reviews #comments .woocommerce-review__published-date {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
}

.pdp-tabs-section #reviews #comments .description p {
    color:var(--tx-2);
    line-height:var(--lh-body);
}

/* Review form on dark bg */
.pdp-tabs-section #review_form_wrapper label {
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

/* ============================================
   SINGLE PRODUCT — RESPONSIVE
   ============================================ */
@media (max-width: 980px) {
    .pdp-hero {
    padding: 80px var(--gutter) var(--sec-y);
}

    .pdp-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pdp-gallery {
        position: static;
    }

    .pdp-gallery .woocommerce-product-gallery {
        /* Was 4/3 — a landscape frame that cropped the portrait product
           photos hard on mobile ("cuts off the image"). 4/5 matches the
           desktop framing exactly. */
        aspect-ratio: 4 / 5;
    }

    

    .pdp-specs-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    

    .pdp-sticky-price {
        display: none;
    }

    .pdp-tabs-section {
    padding: var(--sec-y) 0;
}

    
}

@media (max-width: 768px) {
    .pdp-atc-wrap form.cart,
    .pdp-atc-wrap .woocommerce-variation-add-to-cart {
        flex-direction: column;
        align-items: stretch;
    }

    .pdp-atc-wrap .quantity {
        align-self: flex-start;
    }

    .pdp-atc-wrap .single_add_to_cart_button {
        width: 100%;
        flex: none;   /* in the stacked column, flex:1 (basis 0) collapsed the 48px height */
    }

    .pdp-sticky-bar-inner {
        gap: 12px;
    }

    .pdp-sticky-actions {
        gap: 10px;
    }

    .pdp-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============================================
   SINGLE PRODUCT — PER-PRODUCT SECTIONS
   These sections are injected via template-parts/pdp/pre-specs-{slug}.php
   and template-parts/pdp/post-specs-{slug}.php.
   CSS mirrors the reference product-page.html with pdp- prefix to avoid
   collision with any same-named classes on other page templates.
   ============================================ */

/* ----- Shared: section header (cream sections) ----- */
.pdp-section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    margin-bottom: 60px;
    gap: 20px var(--col-gap);
}
.pdp-section-head .tag {
    color:var(--tx-3);
    margin-bottom: 16px;
}
.pdp-section-head h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h2);
    color:var(--tx);
}
.pdp-section-head--dark h2 {
    color:var(--tx);
}
.sublead {
    font-family: var(--fb);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    max-width: 480px;
    color: var(--tx-2);
}
.pdp-sublead--dim {
    color:var(--tx-2);
    opacity: 1;
}

/* ----- Included section ----- */
.pdp-included {
    background: var(--mist);
    color: var(--ink-2);
    padding: var(--sec-y) var(--gutter);
}
.pdp-included-inner {
    max-width: var(--max);
    margin: 0 auto;
}
.pdp-inc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.pdp-inc-card {
    overflow: hidden;
    background: var(--w);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.pdp-inc-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--mist);
    border-bottom: 1px solid var(--line);
}
.pdp-inc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pdp-inc-body {
    padding: 22px 22px 26px;
}
.pdp-inc-num {
    font-family: var(--fb);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    color: var(--tx-3);
    margin-bottom: 8px;
    font-weight: 500;
}
.pdp-inc-card h3 {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    letter-spacing: -.02em;
    color:var(--tx);
    margin: 0 0 6px;
}
.pdp-inc-card p {
    font-family: var(--fb);
    font-size: var(--fs-caption);
    line-height: 1.55;
    margin: 0;
    color: var(--tx-2);
}

/* ----- Glass section ----- */
.pdp-glass {
    background: var(--w);
    padding: var(--sec-y) var(--gutter);
}

.pdp-glass-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: var(--col-gap);
}
.pdp-glass-img {
    aspect-ratio: 4 / 5;
    max-height: 600px;
}
.pdp-glass-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pdp-glass-eyebrow {
    margin-bottom: 18px;
    color: var(--tx-3);
}
.pdp-glass-text h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h2);
    margin-bottom: 22px;
    color:var(--tx);
}
.pdp-glass-text p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color:var(--tx-2);
    margin-bottom: 32px;
}
.pdp-glass-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    background: var(--ln);
    border: 1px solid var(--ln);
    border-radius: var(--r);
}
.pdp-glass-stat {
    padding: 22px;
    background: var(--sur);
}
.pdp-glass-stat-val {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-val);
    letter-spacing: -.025em;
    color:var(--tx);
    margin-bottom: 4px;
}
.pdp-glass-stat-lab {
    font-family:var(--fb);
    font-size: var(--fs-spec);
    font-weight:500;
    letter-spacing: var(--ls-spec);
    color:var(--tx-3);
}

/* ----- In Use section ----- */
.pdp-in-use {
    background: var(--w);
    padding: var(--sec-y) var(--gutter);
}
.pdp-in-use-inner {
    max-width: var(--max);
    margin: 0 auto;
}
.pdp-use-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
}
.pdp-use-frame {
    aspect-ratio: 16 / 11;
    position: relative;
}
.pdp-use-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdp-use-frame--sm {
    aspect-ratio: 4 / 3;
}
.pdp-use-cap {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--w);
    color: var(--ink);
    box-shadow: var(--sh-1);
}
.pdp-use-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pdp-in-use-eyebrow {
    color: var(--tx-3);
}

/* ----- FAQ section (dark variant — product page) ----- */
.pdp-faq {
    background: var(--w);
    padding: var(--sec-y) var(--gutter);
}
.pdp-faq-inner {
    max-width: 880px;
    margin: 0 auto;
}
.pdp-faq-head {
    margin-bottom: 56px;
    text-align: left;
}
.pdp-faq-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
}
.pdp-faq-head h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h2);
    color: var(--tx);
    margin: 0;
}
.pdp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pdp-faq-item {
    overflow: hidden;
    transition: border-color .3s var(--ease), background .3s var(--ease);
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
}
.pdp-faq-item.is-open {
    border-color: var(--ln-2);
}
.pdp-faq-q {
    width: 100%;
    padding: 22px 26px;
    background: none;
    border: none;
    color:var(--tx);
    font-family:var(--fb);
    font-size:var(--fs-body);
    font-weight: 600;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    cursor: pointer;
}
.pdp-faq-pl {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ln-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .35s var(--ease);
    color: var(--tx-2);
    font-style: normal;
    line-height: 1;
}
.pdp-faq-item.is-open .pdp-faq-pl {
    transform: rotate(45deg);
    background: var(--ink);
    border-color: var(--ink);
    color: var(--w);
}
.pdp-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease), visibility 0s linear .5s;
    visibility: hidden;
}
.pdp-faq-item.is-open .pdp-faq-a {
    max-height: 400px;
    visibility: visible;
    transition: max-height .5s var(--ease), visibility 0s linear 0s;
}
.pdp-faq-a-inner {
    padding: 0 26px 24px;
    font-family: var(--fb);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    color: var(--tx-2);
}

/* ----- CTA Band (product page two-column variant) ----- */
.pdp-cta-band {
    background: var(--navy);
    color: var(--w);
    padding: var(--sec-y) var(--gutter);
}

.pdp-cta-band-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: var(--col-gap);
}
.pdp-cta-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--tx-3);
}
.pdp-cta-band h2 {
    font-family: var(--ff);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    margin: 0 0 18px;
    color: var(--tx);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    max-width: 20ch;
}
.pdp-cta-band p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--tx-2);
    margin: 0;
    max-width: 52ch;
}
.pdp-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.btn-on-orange {
    justify-content: center;
    background: var(--w);
    color: var(--ink);
}
.btn-on-orange > svg:last-child { display: none; }   /* surface buttons drop the trailing arrow (phase 5) */

.btn-on-orange:hover {
    background: var(--mist);
}
.btn-on-orange-ghost {
    justify-content: center;
    background: transparent;
    color: var(--tx);
    border: 1px solid var(--ln-2);
}
.btn-on-orange-ghost:hover {
    border-color: var(--tx-3);
    background: var(--sur-2);
}

/* ----- Responsive — per-product sections ----- */
@media (max-width: 980px) {
    .pdp-section-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pdp-inc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pdp-glass-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pdp-use-grid {
        grid-template-columns: 1fr;
    }
    .pdp-cta-band-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    
}

@media (max-width: 600px) {
    .pdp-inc-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SINGLE PRODUCT — VARIABLE PRODUCTS
   Variation select table lives inside .pdp-summary (dark navy context).
   Global .woocommerce select handles bg/border/focus; we add the
   white chevron arrow and tidy the table layout.
   ============================================ */

/* Strip default table chrome */
.variations_form .variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.variations_form .variations td,
.variations_form .variations th {
    border: none;
    padding: 0;
    vertical-align: top;
}

.variations_form .variations .label {
    padding-right: 20px;
    padding-top: 13px; /* vertically align with select */
    white-space: nowrap;
    width: 1%;
}

.variations_form .variations label {
    margin-bottom: 0;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

.variations_form .variations td.value {
    width: 100%;
    padding-bottom: 0;
}

/* White chevron arrow on dark select */

/* "Clear" reset link — unnecessary for a single service selector and only adds
   visual noise, so we hide it. (Re-selecting an option simply replaces it.) */
.reset_variations { display: none !important; }

/* Variation summary: price + availability for the chosen option. */
.single_variation_wrap { margin-top: 0; }

/* Chosen-variation price — clean line just above the qty/button, inside the
   card. Struck regular price muted, sale price bold. */
.woocommerce-variation-price { margin: 0 0 16px; }
.woocommerce-variation-price .price {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--ff);
    line-height: 1;
    color: var(--tx);
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -.015em;
}
.woocommerce-variation-price .price del,
.woocommerce-variation-price del {
    font-weight: 500;
    font-size: .62em;
    text-decoration: line-through;
    color: var(--ink-4);
}
.woocommerce-variation-price .price ins,
.woocommerce-variation-price ins {text-decoration:none;color:var(--tx)}
.woocommerce-variation-price .amount { color: inherit; }
.woocommerce-variation-price del .amount {color:var(--ink-4)}

.single_variation_wrap .stock {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight:500;
}

.single_variation_wrap .in-stock  {color:var(--teal-lo)}
.single_variation_wrap .out-of-stock {color:var(--tx-3)}

/* ============================================
   SINGLE PRODUCT — GROUPED PRODUCTS
   Table inside .pdp-summary (dark navy context).
   Quantity + label + price columns with hairline row separators.
   ============================================ */

.woocommerce-grouped-product-list {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 28px;
}

.woocommerce-grouped-product-list td {
    border: none;
    vertical-align: middle;
    padding: 16px 0;
    border-bottom:1px solid var(--ln);
}

.woocommerce-grouped-product-list tr:last-child td { border-bottom: none; }

/* Quantity column: shrink-wrap the input */
.woocommerce-grouped-product-list-item__quantity {
    padding-right: 16px;
    width: 80px;
}

/* Product name link */
.woocommerce-grouped-product-list-item__label a {
    text-decoration: none;
    transition: color .25s;
    font: 500 var(--fs-body)/1.4 var(--fb);
    color: var(--tx);
}

.woocommerce-grouped-product-list-item__label a:hover {color:var(--acc-tx)}

/* Price — orange, right-aligned to create visual separation */
.woocommerce-grouped-product-list-item__price {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-body);
    color:var(--tx);
    white-space: nowrap;
    padding-left: 20px;
    text-align: right;
}

/* ============================================
   CART PAGE — REWRITTEN
   (reference: cart-page.html / CartPage.jsx component tree)
   Single dark navy section, contained max-width content,
   2-col grid: items + ExpertCard left, sticky OrderSummary right,
   then a 3-col TrustBand below.
   Selectors are scoped to .cart-section so they don't bleed
   into other pages or conflict with WC's default .woocommerce
   class names.
   ============================================ */

/* --- Section shell --- */
.cart-section {
    width: 100%;
    background: var(--w);
    color: var(--ink-2);
    padding: calc(var(--nav-h) + 56px) 0 var(--sec-y);
}







.cart-section-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Hero strip --- */
.cart-section .cart-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 64px;
    background: transparent;
    padding: 0;
    overflow: visible;
}

.cart-section .cart-hero::before { content: none; }

.cart-section .cart-hero-copy { max-width: 640px; }

.cart-section .cart-hero-copy .tag { margin-bottom: 14px; }

.cart-section .cart-hero-copy h1 {
    font-family: var(--ff);
    font-weight: var(--fw-hero);
    font-size: var(--fs-hero);
    color: var(--tx);
    margin: 0 0 16px;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

.cart-section .cart-hero-copy p {
    font-family: var(--fb);
    margin: 0;
    color: var(--tx-2);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
    max-width: 52ch;
}

/* --- Stepper (Cart → Details → Payment) --- */
.cart-stepper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight: 600;
    letter-spacing:0;
    }

.cart-stepper-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color:var(--tx-3);
}

.cart-stepper-step.is-active { color:var(--tx); }

.cart-stepper-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size:var(--fs-spec);
    background: transparent;
    border:1px solid var(--ln-2);
    color:var(--tx-3);
}

.cart-stepper-step.is-active .cart-stepper-num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--w);
}

.cart-stepper-rule {
    width: 32px;
    height: 1px;
    background: var(--line-2);
}

/* --- Empty state card --- */
.cart-empty-card {
    text-align: center;
    padding: 80px 24px;
    border-radius: var(--r);
    background: var(--sur);
    border: 1px solid var(--ln);
}

.cart-empty-card .cart-empty-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-xs);
    background: var(--mist-2);
    color: var(--ink-2);
}

.cart-empty-card h2 {
    font-family: var(--ff);
    font-size:var(--fs-h2-sm);
    font-weight:var(--fw-display);
    color: var(--tx);
    margin: 0 0 12px;
}

.cart-empty-card p {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color: var(--tx-3);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 32px;
}

.cart-empty-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- Two-column grid --- */
.cart-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: var(--col-gap);
}

.cart-items-col {
    min-width: 0; /* prevent overflow on long product names */
}

/* --- Cart line items --- */
.cart-form { margin: 0; }

.cart-line {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 32px 0;
    border-bottom:1px solid var(--ln);
    align-items: flex-start;
}

.cart-line:first-child {
    border-top:1px solid var(--ln);
}

.cart-line-img {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--mist);
    border: 1px solid var(--line);
}

.cart-line-img a,
.cart-line-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-line-img:has(> a:focus-visible),
.woocommerce-product-gallery:has(.woocommerce-product-gallery__image > a:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.cart-line-body { min-width: 0; }

.cart-line-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
}

.cart-line-titleblock { flex: 1; min-width: 0; }

.cart-line-eyebrow {
    font-family:var(--fb);
    font-size:var(--fs-eyebrow);
    font-weight:500;
    letter-spacing:0;
    color:var(--tx-3);
    margin-bottom: 8px;
}

.cart-line-title {
    font-family: var(--ff);
    font-size: var(--fs-h3);
    font-weight: var(--fw-display);
    line-height: var(--lh-h3);
    color: var(--tx);
    margin: 0 0 10px;
    letter-spacing: -.01em;
}

.cart-line-title a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--ease);
}

.cart-line-title a:hover { color:var(--tx-2); }

.cart-line-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color:var(--tx-3);
}

.cart-line-meta svg {
    color: var(--teal);
    flex-shrink: 0;
}

.cart-line-priceblock {
    text-align: right;
    white-space: nowrap;
}

.cart-line-total {
    font-family: var(--ff);
    font-size: var(--fs-val);
    font-weight: var(--fw-display);
    color: var(--tx);
    letter-spacing: -.015em;
}

.cart-line-total .amount { color: inherit; }

.cart-line-each {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
    margin-top: 4px;
}

.cart-line-variation {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
    margin: 4px 0 14px;
}

.cart-line-variation dl,
.cart-line-variation dd,
.cart-line-variation p {
    margin: 0;
    color: inherit;
}

.cart-line-includes {
    list-style: none;
    padding: 0;
    margin: 18px 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.cart-line-includes li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    line-height: 1.4;
    color:var(--tx-2);
}

.cart-line-includes svg {
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.cart-line-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cart-line-qty-label {
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx-3);
}

.cart-line-qty .quantity {
    display: inline-flex;
    align-items: center;
}

.cart-line-qty .qty {
    text-align: center;
    width: 72px;
    font-weight: 500;
}


.cart-line-qty-fixed {
    font-family:var(--fb);
    font-weight: 600;
    color:var(--tx);
    padding: 0 8px;
}

.cart-line-remove {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight: 500;
    color:var(--tx-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    text-decoration: none;
    transition: color .25s var(--ease);
}

.cart-line-remove:hover { color:var(--tx); }

/* --- Coupon + Update row --- */
.cart-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 28px;
}

.cart-coupon {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cart-coupon-input {
    width: 200px;
}



.cart-coupon-btn {
    background: transparent;
    border-color: var(--ln-2);
    color: var(--tx);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid var(--ln-2);
    border-radius: var(--rs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}

.cart-coupon-btn:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

.cart-update-btn {
    background: transparent;
    border-color: var(--ln-2);
    color: var(--tx);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid var(--ln-2);
    border-radius: var(--rs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}

.cart-update-btn:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

/* --- Expert card (below items) --- */
.cart-expert-card {
    margin-top: 32px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    background: var(--mist);
    border: 0;
    border-radius: var(--r-lg);
}

.cart-expert-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-xs);
    background: var(--mist-2);
    color: var(--ink-2);
}

.cart-expert-eyebrow {
    font-family:var(--fb);
    font-size:var(--fs-eyebrow);
    font-weight:500;
    letter-spacing:0;
    color:var(--tx-3);
    margin-bottom: 6px;
}

.cart-expert-title {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color:var(--tx);
    letter-spacing: -.015em;
    margin-bottom: 4px;
}

.cart-expert-copy p {
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color:var(--tx-2);
    line-height: 1.55;
    margin: 0;
}

.cart-expert-cta {
    background: transparent;
    border-color: var(--ln-2);
    color: var(--tx);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid var(--ln-2);
    border-radius: var(--rs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}

.cart-expert-cta:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

/* --- Order Summary (sticky right column) --- */
.cart-summary {
    position: sticky;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    top: calc(var(--nav-h) + 32px);
    padding: 32px 32px 28px;
}

.cart-summary-eyebrow {
    font-family: var(--fb);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 12px;
    color: var(--tx-3);
}

.cart-summary-title {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    letter-spacing: -.025em;
    color: var(--tx);
    margin: 0 0 6px;
}

.cart-summary-meta {
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color: var(--tx-3);
    margin-bottom: 20px;
}

.cart-summary-rows {
    border-top: 1px solid var(--ln);
    margin-top: 8px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    gap: 16px;
}

.cart-summary-label {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color: var(--tx-2);
}

.cart-summary-label small {
    display: block;
    font-size:var(--fs-spec);
    color: var(--tx-3);
    margin-top: 3px;
}

.cart-summary-value {
    font-family: var(--ff);
    font-weight: 600;
    font-size:var(--fs-body);
    color: var(--tx);
    white-space: nowrap;
    text-align: right;
}

.cart-summary-value .amount,
.cart-summary-value .woocommerce-Price-amount { color: inherit; font: inherit; }

.cart-summary-value-included { color: var(--teal); }

.cart-summary-value-muted { color: var(--tx-2); }

.cart-summary-total {
    margin-top: 20px;
    padding-top: 22px;
    border-top: 1px solid var(--ln-2);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.cart-summary-total-eyebrow {
    font-size: var(--fs-spec);
    letter-spacing: 0;
    color: var(--tx-3);
    font-family: var(--fb);
    font-weight: 500;
}

.cart-summary-total-sub {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    margin-top: 4px;
}

.cart-summary-total-amount {
    font-family: var(--ff);
    font-size:var(--fs-stat);
    font-weight:var(--fw-display);
    letter-spacing: -.025em;
    color: var(--tx);
    white-space: nowrap;
}

.cart-summary-total-amount .amount,
.cart-summary-total-amount .woocommerce-Price-amount { color: inherit; font: inherit; }

.cart-summary-cta {
    margin-top: 24px;
    width: 100%;
    background: var(--orange);
    color: var(--w);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid transparent;
    border-radius: var(--rs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease);
}

.cart-summary-cta:hover {
    background: var(--orange-lo);
}



.cart-summary-cta svg {display:none}

.cart-summary-secure {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
}

.cart-summary .woocommerce-error,
.cart-summary .woocommerce-message,
.cart-summary .woocommerce-info {
    margin-top: 16px;
    font-size:var(--fs-caption);
    padding: 12px 14px;
}

/* --- Trust band --- */
.cart-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
    padding: 32px;
    background: var(--mist);
    border-radius: var(--r-lg);
}

.cart-trust-item {
    display: block;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
}

.cart-trust-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: var(--r-xs);
    background: var(--teal-wash);
    color: var(--teal);
}

.cart-trust-item h4 {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    letter-spacing: -.015em;
    color:var(--tx);
    margin: 0 0 8px;
}

.cart-trust-item p {
    font-family: var(--fb);
    font-size: var(--fs-caption);
    line-height: 1.6;
    margin: 0;
    color: var(--tx-2);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    
    .cart-grid { gap: 40px; }
    .cart-line-title { font-size:var(--fs-h3); }
    .cart-line-total { font-size:var(--fs-h3); }
}

@media (max-width: 900px) {
    

    .cart-section .cart-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 40px;
    }

    .cart-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cart-summary {
    position: static;
    padding: 24px;
}

    .cart-line {
        grid-template-columns: 140px 1fr;
        gap: 20px;
        padding: 24px 0;
    }

    .cart-line-head {
        flex-direction: column;
        gap: 12px;
    }

    .cart-line-priceblock {
        text-align: left;
    }

    .cart-line-includes {
        grid-template-columns: 1fr;
    }

    .cart-expert-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .cart-expert-cta {
        justify-self: flex-start;
    }

    .cart-trust {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
    padding: 24px;
}

    .cart-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-coupon { width: 100%; }
    .cart-coupon-input { flex: 1; width: auto; }
    .cart-update-btn { align-self: flex-end; }
}

@media (max-width: 560px) {
    .cart-line {
        grid-template-columns: 1fr;
    }

    .cart-line-img {
        max-width: 240px;
    }

    .cart-stepper {
        font-size:var(--fs-spec);
        gap: 8px;
    }

    .cart-stepper-rule {
        width: 16px;
    }
}

/* ============================================
   CHECKOUT PAGE — REWRITTEN
   (reference: checkout-page.html / CheckoutPage.jsx)
   Single dark navy section, numbered Section cards on the left,
   sticky translucent Order Summary on the right, trust band below.
   Class prefix: .checkout-section / .ck-
   Reuses .cart-stepper and .cart-trust from the cart block above.
   ============================================ */

/* --- Section shell --- */
.checkout-section {
    width: 100%;
    background: var(--w);
    color: var(--ink-2);
    padding: calc(var(--nav-h) + 56px) 0 var(--sec-y);
}







.checkout-section-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Hero strip --- */
.ck-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 56px;
}

.ck-hero-copy { max-width: 640px; }

.ck-hero-copy .tag { margin-bottom: 14px; }

.ck-hero-copy h1 {
    font-family: var(--ff);
    font-weight: var(--fw-hero);
    font-size: var(--fs-hero);
    color: var(--tx);
    margin: 0 0 16px;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

.ck-hero-copy p {
    font-family: var(--fb);
    margin: 0;
    color: var(--tx-2);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
    max-width: 52ch;
}

/* Stepper completed-step variant (Cart finished, Details active, Payment todo) */
.cart-stepper-step.is-complete { color:var(--tx-2); }

.cart-stepper-step.is-complete .cart-stepper-num {
    background: var(--teal-wash);
    border-color: transparent;
    color: var(--teal-lo);
}

/* --- 2-col grid --- */
.ck-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: var(--col-gap);
}

.ck-main { min-width: 0; }

/* --- Numbered section cards --- */
.ck-card {
    margin-bottom: 20px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 32px 36px;
}

.ck-card-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.ck-card-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fb);
    font-weight: 600;
    font-size: var(--fs-body);
    background: var(--mist-2);
    color: var(--ink-2);
    border: 0;
}

.ck-card-head h2 {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    letter-spacing: -.02em;
    color: var(--tx);
    margin: 0 0 6px;
}
.woocommerce form.checkout .ck-card-head h2{margin-bottom:6px;padding-bottom:0;border-bottom:0}

.ck-card-head p {
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color: var(--tx-3);
    line-height: 1.55;
    margin: 0;
}

.ck-card-body {
    /* WC field markup lives here */
}

/* --- WC form fields (dark context) --- */
.ck-form input[type="text"],
.ck-form input[type="email"],
.ck-form input[type="tel"],
.ck-form input[type="password"],
.ck-form input[type="number"],
.ck-form input[type="url"],
.ck-form input[type="search"],
.ck-form textarea,
.ck-form select {
    width: 100%;
}



.ck-form textarea {min-height:90px;resize:vertical}


.ck-form select option {
    background: var(--w);
    color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────
   Select2 — country / state / variation dropdowns
   ─────────────────────────────────────────────────────────────
   WC replaces native <select> with a Select2 JS widget. The native
   element is hidden, so our .ck-form select / .acc-content select
   rules above don't paint anything visible. Style the Select2 DOM
   to match (input area inside the form + dropdown panel in body). */

/* The "input" replacement that sits in place of the native <select> */
.checkout-section .select2-container--default .select2-selection--single,
.account-section .select2-container--default .select2-selection--single {
    height: auto;
    border-radius: var(--rs);
    padding: 11px 14px;
    font-family: var(--fb);
    font-size: var(--fs-caption);
    transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
    background: var(--sur);
    border: 1px solid var(--ln-2);
    color: var(--tx);
}

.checkout-section .select2-container--default .select2-selection--single .select2-selection__rendered,
.account-section .select2-container--default .select2-selection--single .select2-selection__rendered {
    color:var(--tx);
    padding: 0 26px 0 0;
    line-height: 1.4;
}

.checkout-section .select2-container--default .select2-selection--single .select2-selection__placeholder,
.account-section .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color:var(--tx-3);
}

/* Replace Select2's default arrow <b> with our white chevron */
.checkout-section .select2-container--default .select2-selection--single .select2-selection__arrow,
.account-section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 12px;
    top: 0;
    width: 16px;
}

.checkout-section .select2-container--default .select2-selection--single .select2-selection__arrow b,
.account-section .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236B6B78'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Open / focused state */
.checkout-section .select2-container--default.select2-container--open .select2-selection--single,
.checkout-section .select2-container--default.select2-container--focus .select2-selection--single,
.account-section .select2-container--default.select2-container--open .select2-selection--single,
.account-section .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--tx);
    box-shadow: var(--sh-focus);
    outline: none;
}

/* "Clear" (×) button — for nullable dropdowns */
.checkout-section .select2-container--default .select2-selection__clear,
.account-section .select2-container--default .select2-selection__clear {
    color:var(--tx-3);
    font-weight:600;
    margin-right: 12px;
}

.checkout-section .select2-container--default .select2-selection__clear:hover,
.account-section .select2-container--default .select2-selection__clear:hover {
    color:var(--tx);
}

/* ─────────────────────────────────────────────────────────────
   Select2 dropdown panel
   ─────────────────────────────────────────────────────────────
   Select2 appends the dropdown to <body>, so it's outside our section
   wrappers. Style it globally (consistent dark dropdown across the
   site, which is fine because all our WC pages are dark). */
.select2-container--default .select2-dropdown {
    border-radius: var(--rs);
    overflow: hidden;
    z-index: 250;
    box-shadow: var(--sh-2);
    background: var(--w);
    border: 1px solid var(--line);
}

.select2-container--default .select2-dropdown--above {
    border-top-left-radius: var(--rs);
    border-top-right-radius: var(--rs);
}

.select2-container--default .select2-search--dropdown {
    padding: 10px;
    background: var(--mist);
    border-bottom: 1px solid var(--line);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: var(--rs);
    font-family: var(--fb);
    font-size: var(--fs-caption);
    padding: 10px 12px;
    background: var(--sur);
    border: 1px solid var(--ln-2);
    color: var(--tx);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    box-shadow: var(--sh-focus);
    border-color: var(--tx);
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color:var(--tx-3);
}

.select2-container--default .select2-results__options {
    color:var(--tx-2);
    max-height: 280px;
    padding: 6px 0;
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}

/* Highlighted (keyboard nav / hover) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--mist);
    color: var(--ink);
}

/* Currently selected */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    font-weight: 600;
    background: var(--sur-2);
    color: var(--tx);
}

/* "No results found" / "Searching…" loading messages */
.select2-container--default .select2-results__option.loading-results,
.select2-container--default .select2-results__option.select2-results__message {
    color:var(--tx-3);
    font-style: italic;
}

/* Disabled option */
.select2-container--default .select2-results__option--disabled {
    color:var(--tx-3);
    cursor: not-allowed;
}

/* Labels */
.ck-form .form-row label {
    display: block;
    margin-bottom: 8px;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

.ck-form .required {
    text-decoration: none;
    color: var(--tx-3);
}

/* Inline validation */
.ck-form .woocommerce-error,
.ck-form .form-row .woocommerce-error {
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--err);
}

/* Form rows + 50/50 layout */
.ck-form .form-row {
    margin: 0 0 16px;
}

.ck-form .woocommerce-billing-fields__field-wrapper,
.ck-form .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.ck-form .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ck-form .woocommerce-shipping-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

.ck-form .form-row-first,
.ck-form .form-row-last {
    float: none;
    width: auto;
    margin-right: 0;
}

/* Ship-to-different toggle (h3 label) */
.ck-form .woocommerce-shipping-fields h3 {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    color:var(--tx);
    margin: 0 0 16px;
}

.ck-form .woocommerce-shipping-fields h3 label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx-2);
}

.ck-form input[type="checkbox"] {
    accent-color: var(--orange);
}

/* --- Login + coupon prompts (woocommerce_before_checkout_form) --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
    margin-bottom: 16px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
    border-radius: var(--rs);
    padding: 12px 16px;
    font-family: var(--fb);
    font-size: var(--fs-caption);
    margin: 0;
    background: var(--mist);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.woocommerce-checkout .showlogin,
.woocommerce-checkout .showcoupon {
    color: var(--acc-tx);
    font-weight: 500;
    transition: color var(--dur-1) var(--ease);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

.woocommerce-checkout .showcoupon:hover,
.woocommerce-checkout .showlogin:hover {
    color: var(--tx);
}

.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .login {
    margin-bottom: 28px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 24px;
}

.woocommerce-checkout .checkout_coupon { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.woocommerce-checkout .checkout_coupon .form-row { flex: 1; min-width: 200px; margin: 0; }

.woocommerce-checkout .checkout_coupon .button,
.woocommerce-checkout .login .button {
    background: var(--orange);
    color: var(--w);
}

.woocommerce-checkout .checkout_coupon .button:hover,
.woocommerce-checkout .login .button:hover {
    background: var(--orange-lo);
}

/* --- Order Summary aside --- */
.ck-summary {
    position: sticky;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    top: calc(var(--nav-h) + 32px);
    padding: 28px 28px 26px;
}

.ck-summary-eyebrow {
    font-family: var(--fb);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 10px;
    color: var(--tx-3);
}

.ck-summary-title {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    letter-spacing: -.02em;
    color: var(--tx);
    margin: 0 0 20px;
}

.ck-summary-review { font-family: var(--fb); }

/* Order review table — restyled for dark translucent panel */
.ck-summary .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 4px;
}

.ck-summary .woocommerce-checkout-review-order-table thead { display: none; }

.ck-summary .woocommerce-checkout-review-order-table tbody td {
    padding: 12px 0;
    border-bottom: 1px solid var(--ln);
    font-size:var(--fs-caption);
    color: var(--tx-2);
    vertical-align: middle;
}

.ck-summary .woocommerce-checkout-review-order-table .product-name {
    font-family: var(--ff);
    font-weight: 600;
    color: var(--tx);
}

.ck-summary .woocommerce-checkout-review-order-table .product-name .variation {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    font-weight: 400;
    margin-top: 3px;
}

.ck-summary .woocommerce-checkout-review-order-table .product-quantity {
    color: var(--tx-3);
    font-size:var(--fs-spec);
    font-weight: 500;
}

.ck-summary .woocommerce-checkout-review-order-table .product-total {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    color: var(--tx);
    text-align: right;
    white-space: nowrap;
}

.ck-summary .woocommerce-checkout-review-order-table .product-total .amount,
.ck-summary .woocommerce-checkout-review-order-table .product-total .woocommerce-Price-amount { color: inherit; }

/* Totals foot rows (subtotal / shipping / fees / tax / total) */
.ck-summary .woocommerce-checkout-review-order-table tfoot tr th,
.ck-summary .woocommerce-checkout-review-order-table tfoot tr td {
    padding: 12px 0;
    border-bottom: 1px solid var(--ln);
    font-size:var(--fs-caption);
}

.ck-summary .woocommerce-checkout-review-order-table tfoot tr th {
    font-family: var(--fb);
    font-weight: 500;
    color: var(--tx-2);
    text-align: left;
}

.ck-summary .woocommerce-checkout-review-order-table tfoot tr td {
    font-family:var(--fb);
    font-weight: 600;
    color: var(--tx);
    text-align: right;
    white-space: nowrap;
}

.ck-summary .woocommerce-checkout-review-order-table tfoot tr td .amount,
.ck-summary .woocommerce-checkout-review-order-table tfoot tr td .woocommerce-Price-amount { color: inherit; font: inherit; }

.ck-summary .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.ck-summary .woocommerce-checkout-review-order-table tfoot tr:last-child td {
    border-bottom: none;
    padding-top: 18px;
}

.ck-summary .woocommerce-checkout-review-order-table tfoot .order-total th {
    font-size: var(--fs-spec);
    letter-spacing: 0;
    color: var(--tx-3);
    font-family: var(--fb);
    font-weight: 500;
}

.ck-summary .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-family: var(--ff);
    font-size:var(--fs-val);
    font-weight:var(--fw-display);
    letter-spacing: -.02em;
    color: var(--tx);
}

/* --- Payment section --- */
.ck-summary #payment {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 20px;
    box-shadow: none;
}

.ck-summary #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.ck-summary #payment ul.payment_methods li {
    padding: 14px 0;
    border-bottom: 1px solid var(--ln);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.ck-summary #payment ul.payment_methods li:last-child { border-bottom: none; }

.ck-summary #payment ul.payment_methods li label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx-2);
}

.ck-summary #payment ul.payment_methods input[type="radio"] { accent-color: var(--orange); }

.ck-summary #payment .payment_box {
    width: 100%;
    border-radius: var(--rs);
    padding: 14px 16px;
    margin-top: 10px;
    background: var(--sur-2);
    border: 1px solid var(--ln);
}

.ck-summary #payment .payment_box::before {
    border-bottom-color: var(--ln) !important;
}

.ck-summary #payment .form-row.place-order { padding: 0; margin: 16px 0 0; }

.ck-summary #payment .form-row.place-order .woocommerce-error,
.ck-summary #payment .form-row.place-order .woocommerce-message,
.ck-summary #payment .form-row.place-order .woocommerce-info {
    margin-bottom: 16px;
    font-size: var(--fs-caption);
    padding: 12px 14px;
    border-radius: var(--rs);
    background: var(--mist);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.ck-summary #payment .form-row.place-order .woocommerce-error {color:var(--err)}
.ck-summary #payment .form-row.place-order .woocommerce-error:has(.gta-quote){background:var(--orange-wash);border-color:transparent;color:var(--orange-lo);padding:14px 16px}

.ck-summary #payment .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 16px;
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-2);
}

.ck-summary #payment .woocommerce-terms-and-conditions-wrapper a {
    color: var(--acc-tx);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

/* Place Order button — orange glow CTA */
#place_order,
.ck-summary #place_order {
    margin: 0;
    width: 100%;
    background: var(--orange);
    color: var(--w);
    border: none;
    font-family: var(--fb);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all .35s var(--ease);
    height: 48px;
    padding: 0 22px;
    font-size: var(--fs-btn);
    border-radius: var(--rs);
}

#place_order:hover,
.ck-summary #place_order:hover {
    color: var(--w);
    background: var(--orange-lo);
}

/* Secure badge under aside */
.ck-summary-secure {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    
    .ck-grid { gap: 32px; }
    .ck-card { padding: 28px; }
}

@media (max-width: 900px) {
    

    .ck-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 40px;
    }

    .ck-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ck-summary {
        position: static;
        order: 2;
    }

    .ck-main { order: 1; }

    .ck-card { padding: 24px; }
    .ck-card-head { gap: 14px; margin-bottom: 18px; }
    .ck-card-head h2 { font-size:var(--fs-h3); }
}

@media (max-width: 768px) {
    .ck-form .woocommerce-billing-fields__field-wrapper,
    .ck-form .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .ck-form .woocommerce-billing-fields__field-wrapper .form-row-wide,
    .ck-form .woocommerce-shipping-fields__field-wrapper .form-row-wide {
        grid-column: 1;
    }

    .woocommerce-checkout .checkout_coupon {
        flex-direction: column;
        align-items: stretch;
    }

    .woocommerce-checkout .checkout_coupon .button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PASSWORD STRENGTH METER
   Appears below new-password inputs on checkout, My Account
   edit-account, and registration forms (all on cream background).
   States: short / bad → orange warning; good / strong → teal confirm.
   ============================================ */

.woocommerce-password-strength {
    display: inline-block;
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight:600;
    letter-spacing:0;
    padding: 6px 12px;
    border-radius: var(--rs);
    margin-top: 8px;
}

/* Short / Bad → orange */
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
    background: var(--err-wash);
    color: var(--err);
    border: 1px solid transparent;
}

/* Good / Strong → teal */
.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
    background: var(--teal-wash);
    color: var(--teal-lo);
    border: 1px solid transparent;
}

.woocommerce-password-hint {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
    margin-top: 6px;
    display: block;
    line-height: 1.6;
}

/* ============================================
   MINI-CART PANEL + NAV BUTTON WRAPPER
   ============================================ */

/* Wrapper that positions the panel relative to the nav */
.nav-cart-wrap {
    position: relative;
}

/* Cart toggle button (was an <a>, now a <button>) */
button.nav-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--ink-2);
    border-radius: 0;
    transition: color var(--dur-1) var(--ease);
}

button.nav-cart:hover {
    color: var(--ink);
}

button.nav-cart svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Semi-transparent page overlay (dims content, enables outside-click close) */
.mini-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}

body.mini-cart-open .mini-cart-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   MINI-CART SLIDE-IN PANEL
   Frosted glass: navy-3 bg at ~92% + blur(16px)
   ============================================ */
.mini-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    z-index: 200;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--w);
    border-left: 1px solid var(--line);
    box-shadow: var(--sh-2);
    transition: transform .45s var(--ease), visibility 0s linear .45s;
    visibility: hidden;
}

.mini-cart.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform .45s var(--ease), visibility 0s linear 0s;
}

/* Inner layout: flex column filling panel height */
.mini-cart-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 76px; /* clear the fixed nav bar */
}

/* ---- Head: title + count badge + close button ---- */
.mini-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}

.mini-cart-title {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color: var(--tx);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Item count badge (orange glow pill) */
.mini-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--orange);
    color: var(--w);
    font-family: var(--fb);
    font-size: var(--fs-spec);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--r-pill);
}

/* Close button */
.mini-cart-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease);
    background: var(--mist-2);
    border: 0;
    color: var(--ink-2);
}

.mini-cart-close:hover {
    background: var(--mist-2);
    color: var(--ink);
}

/* ---- Scrollable items area ---- */
.mini-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.mini-cart-items::-webkit-scrollbar {
    width: 4px;
}

.mini-cart-items::-webkit-scrollbar-track {
    background: transparent;
}

.mini-cart-items::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: var(--line-2);
}

/* Individual cart row */
.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.mini-cart-item:last-child {
    border-bottom: none;
}

/* Thumbnail */
.mini-cart-item-img {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--rs);
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--line);
}

.mini-cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Name + qty/price */
.mini-cart-item-body {
    flex: 1;
    min-width: 0; /* allows text-overflow: ellipsis */
}

.mini-cart-item-name {
    font-family: var(--ff);
    font-size:var(--fs-caption);
    font-weight: 600;
    color: var(--tx);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s;
    line-height:var(--lh-h3);
    margin-bottom: 4px;
}

.mini-cart-item-name:hover {
    color: var(--acc-tx);
}

.mini-cart-item-qty {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
}

.mini-cart-item-meta {
    font-size:var(--fs-spec);
    color: var(--ln-2);
    margin-top: 2px;
}

/* Remove × button */
.mini-cart-item-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: background .25s var(--ease), color .25s var(--ease);
    background: var(--mist-2);
    color: var(--ink-2);
}

.mini-cart-item-remove:hover {
    background: var(--err-wash);
    color: var(--err);
}

/* ---- Empty state inside panel ---- */
.mini-cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 16px;
}

.mini-cart-empty svg {
    width: 48px;
    height: 48px;
    color: var(--ln-2);
    flex-shrink: 0;
}

.mini-cart-empty p {
    font-family:var(--fb);
    font-size:var(--fs-caption);
    color: var(--tx-3);
    margin: 0;
}

.mini-cart-empty .mini-cart-shop-link {
    font-size:var(--fs-spec);
    padding: 9px 20px;
}

/* ---- Footer: subtotal row + CTA buttons ---- */
.mini-cart-footer {
    padding: 20px 24px 28px;
    flex-shrink: 0;
    border-top: 1px solid var(--line);
}

.mini-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.mini-cart-subtotal span:first-child {
    font-family: var(--ff);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    color: var(--tx-3);
}

.mini-cart-subtotal-val {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h3);
    letter-spacing: -.02em;
    color: var(--tx);
}

/* Price amounts inside subtotal (WC wraps in bdi + span) */
.mini-cart-subtotal-val .woocommerce-Price-amount {
    color: inherit;
}

/* Stacked action buttons */
.mini-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-cart-actions .btn {
    justify-content: center;
    width: 100%;
}

/* Ghost button on dark background */




/* ============================================
   MINI-CART RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .mini-cart {
        width: 100vw;
        border-left: none;
    }
}

/* ============================================
   PRODUCT GRID — COLUMN BREAKPOINTS (confirmed)
   .woocommerce ul.products already has these rules (lines 212-231).
   Duplicated here for clarity; later rules win on specificity ties.
   ============================================ */
/* 1-col mobile → 2-col 768px → 3-col 900px  (base rules already set above) */

/* ============================================
   RELATED PRODUCTS — Full grid + card rules
   WC's related.php renders <section class="related products"><ul.products>
   WITHOUT a .woocommerce ancestor, so the .woocommerce ul.products rules
   don't reach it. These selectors mirror the shop grid rules exactly.
   ============================================ */
.related.products {
    padding: 80px 32px;
}

/* Constrain the h2 and grid to --max width */
.related.products > h2 {
    padding: 0;
}

.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--max);
}

@media (min-width: 768px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .related.products ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Related product card — mirrors .woocommerce ul.products li.product */
.related.products ul.products li.product {
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    display: flex;
    flex-direction: column;
    background: var(--w);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.related.products ul.products li.product:hover {
    box-shadow: var(--sh-2);
    border-color: var(--line-2);
}

/* Image scale on hover */


/* Title */
.related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color:var(--tx);
    padding: 20px 24px 4px;
    line-height:var(--lh-h3);
}

.related.products ul.products li.product .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
    transition: color .25s;
}

.related.products ul.products li.product .woocommerce-loop-product__title a:hover {
    color:var(--tx-2);
}

/* Price */
.related.products ul.products li.product .price {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color:var(--tx);
    padding: 0 24px 16px;
}

.related.products ul.products li.product .price del {
    color:var(--tx-3);
    font-size:var(--fs-caption);
    font-weight: 400;
}

/* Add to cart button */
.related.products ul.products li.product .button {
    margin: auto 24px 24px;
    text-align: center;
    justify-content: center;
}

/* ============================================
   SINGLE PRODUCT — UPSELLS
   Rendered after the tabs section (cream background).
   Heading + grid container; card rules fall through to
   .related.products ul.products li.product (same markup, same classes).
   ============================================ */

.upsells.products {
    padding: 80px 32px;
    background:var(--mist);
}

.upsells.products > h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h2-sm);
    color:var(--tx);
    margin: 0 auto 32px;
    max-width: var(--max);
}

.upsells.products ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: var(--max);
}

@media (min-width: 768px) {
    .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .upsells.products ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   CART — CROSS-SELLS
   Rendered below the cart table inside .wc-inner (cream background).
   Reuses the same ul.products card styles as the shop grid.
   ============================================ */

.cross-sells {
    padding: 60px 0 0;
}

.cross-sells > h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h2-sm);
    color: var(--navy);
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(7, 7, 26, .08);
}

/* Responsive grid — cards inherit ul.products li.product rules */
.cross-sells .products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .cross-sells .products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .cross-sells .products { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   PRODUCT REVIEWS — STANDALONE (cream context)
   .woocommerce-Reviews renders on a cream background when shown
   outside the dark .pdp-tabs-section (e.g. the Reviews tab on a
   light-bg page, or via comments.php). The dark-context tab rules
   at .pdp-tabs-section #reviews take precedence when inside tabs.
   ============================================ */

.woocommerce-Reviews {
    max-width: var(--max);
    margin: 0 auto;
    padding: 60px 24px 80px;
}

.woocommerce-Reviews-title {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h3);
    color:var(--tx);
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom:2px solid var(--ln);
}

.woocommerce-noreviews {
    font-family: var(--fb);
    font-size: var(--fs-body);
    color:var(--tx-3);
    padding: 16px 0 32px;
}

/* Comment / review list */
.woocommerce-Reviews .commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 48px;
}

.woocommerce-Reviews .commentlist .comment_container {
    display: flex;
    gap: 20px;
    padding: 28px 0;
    border-bottom:1px solid var(--ln);
}

.woocommerce-Reviews .commentlist .comment_container:last-child {
    border-bottom: none;
}

.woocommerce-Reviews .commentlist img.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border:2px solid var(--ln);
}

.woocommerce-Reviews .commentlist .comment-text { flex: 1; }

/* Star rating — orange filled, faint empty stars */
.woocommerce-Reviews .star-rating::before {
    color:var(--tx-3);
}

.woocommerce-Reviews .star-rating span::before {
    color:var(--tx);
}

/* Reviewer name + date */
.woocommerce-Reviews .woocommerce-review__author {
    font-family:var(--fb);
    font-weight:600;
    font-size:var(--fs-caption);
    color:var(--tx);
}

.woocommerce-Reviews .woocommerce-review__published-date {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
    margin-left: 8px;
}

/* Review body text */
.woocommerce-Reviews .description p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body-lg);
    color:var(--tx-2);
    margin-top: 10px;
}

/* Review form on cream */
.woocommerce-Reviews #review_form_wrapper {
    padding-top: 40px;
    border-top:2px solid var(--ln);
    margin-top: 8px;
}

.woocommerce-Reviews #review_form_wrapper h3 {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color:var(--tx);
    margin-bottom: 24px;
}

/* Labels inherit global .woocommerce label rule (navy, var(--ff), .85rem);
   no override needed. */

/* Star selector in review form */
.woocommerce-Reviews .stars a {
    color:var(--tx-3);
    text-decoration: none;
    transition: color .2s;
}

.woocommerce-Reviews .stars a:hover,
.woocommerce-Reviews .stars a.active {
    color:var(--tx);
}

/* ============================================
   PRODUCT GRID — NO PRODUCTS FOUND
   Fired by do_action('woocommerce_no_products_found')
   WC outputs a <p class="woocommerce-info"> inside a div.
   Already styled via .woocommerce-info; add centered layout.
   ============================================ */
.woocommerce .woocommerce-no-products-notice,
.woocommerce .no-products-notice {
    text-align: center;
    padding: 60px 0;
}

/* ============================================
   PAGINATION — PREV/NEXT ARROW PILLS
   The SVG arrows in our pagination.php override render inside
   <a> and <span> elements that already have the 44×44 circle base.
   Ensure SVG aligns correctly.
   ============================================ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    /* Already set in base rules; svg inherits currentColor */
    line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul li a svg,
.woocommerce nav.woocommerce-pagination ul li span svg {
    display: block;
    flex-shrink: 0;
}

/* Prev/Next pill size matches numbered pages */
.woocommerce nav.woocommerce-pagination ul li .prev,
.woocommerce nav.woocommerce-pagination ul li .next {
    width: 40px;
    height: 40px;
}

/* ============================================
   ORDERING SELECT — generic context
   The .shop-filter-bar context is already styled (dark bg, white arrow).
   This rule covers any ordering select that appears outside the chapter nav
   (e.g. direct woocommerce_catalog_ordering() call on other pages).
   ============================================ */


/* ============================================
   MY ACCOUNT PAGE — REWRITTEN
   (reference: account-page.html / AccountPage.jsx)
   Single dark navy section, sticky sidebar with avatar + WC nav,
   right-column content area (dashboard, orders, addresses, etc.),
   trust band below. Class prefix: .account-section / .acc-
   ============================================ */

/* --- Section shell --- */
.account-section {
    width: 100%;
    background: var(--w);
    color: var(--ink-2);
    padding: calc(var(--nav-h) + 56px) 0 var(--sec-y);
}







.account-section-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Hero --- */
.account-hero {
    margin-bottom: 36px;
}

.account-hero .tag {
    margin-bottom: 14px;
}

.account-hero h1 {
    font-family: var(--ff);
    font-weight: var(--fw-hero);
    font-size: var(--fs-hero);
    color: var(--tx);
    margin: 0;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

/* --- 2-col grid --- */
.account-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Sidebar --- */
.acc-sidebar {
    position: sticky;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    top: calc(var(--nav-h) + 32px);
    padding: 24px 20px;
}

.acc-sidebar-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 22px;
    border-bottom: 1px solid var(--ln);
    margin-bottom: 14px;
}

.acc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fb);
    font-weight: 600;
    font-size: var(--fs-body);
    flex-shrink: 0;
    background: var(--ink);
    color: var(--w);
}

.acc-identity-meta { min-width: 0; }

.acc-identity-name {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-h4);
    color: var(--tx);
    line-height:var(--lh-h3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-identity-since {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    margin-top: 2px;
}

/* WC navigation list styled as button rows */
.acc-sidebar .woocommerce-MyAccount-navigation { padding: 0; }

.acc-sidebar .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acc-sidebar .woocommerce-MyAccount-navigation li { margin: 0; }

.acc-sidebar .woocommerce-MyAccount-navigation li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 44px; /* extra left padding for icon */
    border-radius: var(--rs);
    background: transparent;
    border: 1px solid transparent;
    color: var(--tx-2);
    font-family:var(--fb);
    font-weight: 600;
    font-size:var(--fs-caption);
    text-decoration: none;
    transition: all .25s var(--ease);
}

/* Icon via background-image — one rule per endpoint slug.
   Position absolutely so the same SVG slot is used by hover/active states. */
.acc-sidebar .woocommerce-MyAccount-navigation li a::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .55;
    transition: opacity .25s var(--ease), filter .25s var(--ease);
}

/* Hover */
.acc-sidebar .woocommerce-MyAccount-navigation li a:hover {
    color: var(--tx);
    background: var(--sur-2);
    border-color: transparent;
}

.acc-sidebar .woocommerce-MyAccount-navigation li a:hover::before { opacity: .85; }

/* Active state — orange left bar + bg + orange icon + white text */
.acc-sidebar .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--tx);
    background: var(--mist);
    border-color: transparent;
    padding-left: 44px;
    font-weight: 600;
}



.acc-sidebar .woocommerce-MyAccount-navigation li.is-active a::before {
    opacity: 1;
    filter: brightness(0);
}

/* Icon per endpoint slug — SVG data URIs (white stroke) */
.acc-sidebar .woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.acc-sidebar .woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.acc-sidebar .woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.acc-sidebar .woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.acc-sidebar .woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}
.acc-sidebar .woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.acc-sidebar .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.acc-sidebar .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ln);
}

/* --- Content area --- */
.acc-content { min-width: 0; }

.acc-content p {
    font-family: var(--fb);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    color: var(--tx-2);
    margin: 0 0 14px;
}

:where(.acc-content) a {
    color: var(--acc-tx);
    font-weight: 500;
    text-decoration: none;
    transition: color .25s var(--ease);
}

:where(.acc-content) a:where(:hover) {color:var(--tx)}

.acc-content h2 {
    font-family: var(--ff);
    font-size:var(--fs-h3);
    font-weight:var(--fw-display);
    color: var(--tx);
    letter-spacing: -.02em;
    margin: 0 0 20px;
}

.acc-content h3 {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color: var(--tx);
    letter-spacing: -.015em;
    margin: 0 0 14px;
}

/* --- Card primitive --- */
.acc-card {
    margin-bottom: 20px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 28px;
}

.acc-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.acc-card-eyebrow {
    font-family: var(--fb);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 8px;
    color: var(--tx-3);
}

.acc-card-title {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color: var(--tx);
    letter-spacing: -.015em;
    margin: 0;
}

.acc-card-action {
    background: transparent;
    border-color: var(--ln-2);
    color: var(--tx);
    height: 40px;
    padding: 0 16px;
    font: 600 .875rem/1 var(--fb);
    border: 1px solid var(--ln-2);
    border-radius: var(--rs);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}

.acc-card-action:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

/* --- Dashboard: greeting card --- */
.acc-greeting-card { padding: 32px; }

.acc-greeting-h2 {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    line-height:var(--lh-h2);
    font-size:var(--fs-h2);
    color: var(--tx);
    margin: 0 0 14px;
}

.acc-greeting-p {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color: var(--tx-2);
    line-height:var(--lh-body);
    max-width: 560px;
    margin: 0 0 14px;
}

.acc-greeting-sign-out {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    margin: 0;
}

.acc-greeting-sign-out a {
    color: var(--tx-2);
    border-bottom: 1px solid var(--ln-2);
    transition: all .25s var(--ease);
}

.acc-greeting-sign-out a:hover {
    color: var(--tx);
    border-bottom-color: var(--tx-3);
}

/* --- Dashboard: quick links 2x2 grid --- */
.acc-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.acc-quick {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--rs);
    padding: 16px 18px;
    transition: border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}

.acc-quick:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}

.acc-quick-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--r-xs);
    background: var(--mist-2);
    color: var(--ink-2);
}

.acc-quick-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.acc-quick-body strong {
    font-family:var(--fb);
    font-weight: 600;
    font-size:var(--fs-caption);
    color: var(--tx);
}

.acc-quick-body span {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    margin-top: 2px;
}

.acc-quick-arrow {
    color: var(--tx-3);
    flex-shrink: 0;
    transition: color .25s var(--ease), transform .25s var(--ease);
}

.acc-quick:hover .acc-quick-arrow {
    color: var(--tx);
    transform: translateX(2px);
}

/* --- Recent orders mini-list (dashboard card) --- */
.acc-recent-orders { padding: 24px 28px; }

.acc-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acc-recent-item {
    display: grid;
    grid-template-columns: 1.4fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--ln);
}

.acc-recent-item:last-child { border-bottom: none; padding-bottom: 0; }

.acc-recent-meta { min-width: 0; }

.acc-recent-id {
    font-family:var(--fb);
    font-weight:600;
    font-size:var(--fs-caption);
    color: var(--tx) !important;
    text-decoration: none;
}

.acc-recent-id:hover {color:var(--tx) !important}

.acc-recent-date {
    display: block;
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color: var(--tx-3);
    margin-top: 3px;
}

.acc-recent-total {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    font-size:var(--fs-caption);
    color: var(--tx);
}

.acc-recent-total .amount,
.acc-recent-total .woocommerce-Price-amount { color: inherit; }

.acc-recent-link {
    color: var(--tx-3);
    transition: color .25s var(--ease);
}

.acc-recent-link:hover {color:var(--tx)}

/* --- Status badges --- */
.acc-status {
    background: var(--mist-2);
    color: var(--ink-2);
}

.acc-status--processing,
.acc-status--on-hold {
    background: var(--mist-2);
    color: var(--ink-2);
}

.acc-status--completed {
    background: var(--teal-wash);
    color: var(--teal-lo);
}

.acc-status--pending {
    background: var(--mist-2);
    color: var(--ink-2);
}

.acc-status--cancelled,
.acc-status--failed,
.acc-status--refunded {
    background: var(--mist-2);
    color: var(--ink-2);
}
.acc-status--failed{background:var(--err-wash);color:var(--err)}

/* --- Orders table (full /orders/ endpoint) --- */
.woocommerce-MyAccount-orders {
    width: 100%;
    overflow: hidden;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
}

.woocommerce-MyAccount-orders thead th {
    padding: 14px 18px;
    text-align: left;
    white-space: nowrap;
    font: 500 var(--fs-spec)/1.4 var(--fb);
    color: var(--tx-3);
    background: var(--sur-2);
    border-bottom: 1px solid var(--ln-2);
}

.woocommerce-MyAccount-orders tbody td {
    font-size:var(--fs-caption);
    color: var(--tx-2);
    padding: 16px 18px;
    border-bottom: 1px solid var(--ln);
    vertical-align: middle;
}

.woocommerce-MyAccount-orders tbody tr:last-child td { border-bottom: none; }

.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-number a {
    font-family:var(--fb);
    font-weight:600;
    color: var(--tx);
    text-decoration: none;
    transition: color .25s var(--ease);
}

.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-number a:hover {
    color: var(--tx-2);
}

.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-total {
    font-family: var(--ff);
    font-weight:var(--fw-display);
    color: var(--tx);
}

/* WC's <mark class="order-status status-{slug}"> badges */
.woocommerce-MyAccount-orders mark.order-status,
.order-detail-meta mark.order-status {
    background: var(--mist-2);
    color: var(--ink-2);
}

.woocommerce-MyAccount-orders mark.status-processing,
.woocommerce-MyAccount-orders mark.status-on-hold,
.order-detail-meta mark.status-processing,
.order-detail-meta mark.status-on-hold {
    background: var(--mist-2);
    color: var(--ink-2);
}

.woocommerce-MyAccount-orders mark.status-completed,
.order-detail-meta mark.status-completed {
    background: var(--teal-wash);
    color: var(--teal-lo);
}

.woocommerce-MyAccount-orders mark.status-cancelled,
.woocommerce-MyAccount-orders mark.status-refunded,
.order-detail-meta mark.status-cancelled,
.order-detail-meta mark.status-refunded {
    background: var(--mist-2);
    color: var(--ink-2);
}

.woocommerce-MyAccount-orders mark.status-failed,
.order-detail-meta mark.status-failed {
    background: var(--err-wash);
    color: var(--err);
}

/* Row hover */


/* Actions: View, Pay buttons */
.woocommerce-MyAccount-orders .woocommerce-button,
.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-actions a,
.woocommerce-table--order-details .order-actions-button {
    display: inline-flex;
    align-items: center;
    font-family: var(--fb);
    font-size: var(--fs-spec);
    font-weight: 600;
    padding: 7px 14px;
    text-decoration: none;
    border: 1px solid var(--ln-2);
    background: transparent;
    margin-right: 6px;
    border-radius: var(--rs);
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    color: var(--tx);
}

.woocommerce-MyAccount-orders .woocommerce-button:hover,
.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-actions a:hover,
.woocommerce-table--order-details .order-actions-button:hover {
    background: var(--sur-2);
    color: var(--tx);
    border-color: var(--tx-3);
}

/* No-orders empty message */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 14px 18px;
    border-radius: var(--rs);
    font-family: var(--fb);
    font-size: var(--fs-caption);
    margin-bottom: 20px;
    background: var(--mist);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.acc-content .woocommerce-message a,
.acc-content .woocommerce-info a {
    color: var(--acc-tx);
}

/* Pagination on orders endpoint */
.woocommerce-pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    gap: 6px;
}



/* --- Addresses: 2-col cards --- */
.woocommerce-Addresses,
.u-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0;
}

.woocommerce-Address {
    list-style: none;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 28px 28px 32px;
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ln);
}

.woocommerce-Address-title h3,
.woocommerce-Address-title h2 {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color: var(--tx);
    margin: 0;
    letter-spacing: -.01em;
}

.woocommerce-Address-title .edit {
    font-size: var(--fs-spec);
    text-decoration: none;
    transition: color .25s var(--ease);
    flex-shrink: 0;
    font-family: var(--fb);
    font-weight: 500;
    color: var(--tx);
}

.woocommerce-Address-title .edit:hover {color:var(--tx-2)}

.woocommerce-Address address {
    font-family: var(--fb);
    font-size:var(--fs-caption);
    line-height:var(--lh-body);
    color: var(--tx-2);
    font-style: normal;
}

.woocommerce-Address address p {
    color: var(--tx-3);
    font-style: italic;
    margin: 0;
}

/* --- Edit account / edit address forms on dark
   (reuse the .ck-form input pattern, but scoped here) --- */
.acc-content .woocommerce-EditAccountForm,
.acc-content form.edit-account,
.acc-content form.woocommerce-address-fields {
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 32px;
}

.acc-content .form-row { margin: 0 0 16px; }

.acc-content .form-row label {
    display: block;
    margin-bottom: 8px;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

.acc-content .form-row .required {text-decoration:none;color:var(--tx-3)}

.acc-content input[type="text"],
.acc-content input[type="email"],
.acc-content input[type="tel"],
.acc-content input[type="password"],
.acc-content input[type="number"],
.acc-content input[type="url"],
.acc-content textarea,
.acc-content select {
    width: 100%;
}




.acc-content select option {
    background: var(--w);
    color: var(--ink);
}

/* WC's 50/50 form-row layout */
.acc-content .form-row-first,
.acc-content .form-row-last {
    float: none;
    width: auto;
    margin-right: 0;
}

.acc-content .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.acc-content .woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* Submit buttons */
.acc-content .woocommerce-Button,
.acc-content .button[type="submit"],
.acc-content button[type="submit"] {
    margin-top: 8px;
    background: var(--orange);
    color: var(--w);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid transparent;
    border-radius: var(--rs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color var(--dur-1) var(--ease);
}

.acc-content .woocommerce-Button:hover,
.acc-content .button[type="submit"]:hover,
.acc-content button[type="submit"]:hover {
    background: var(--orange-lo);
}
.woocommerce-Button > svg:last-child { display: none; }   /* Delta §7.1: trailing arrows leave the solid variants */

/* Section dividers in edit-account form (Password change h3) */
.acc-content .woocommerce-EditAccountForm fieldset {
    margin: 24px 0 0;
    padding: 24px 0 0;
    border: none;
    border-top: 1px solid var(--ln);
}

.acc-content .woocommerce-EditAccountForm fieldset legend {
    font-family:var(--fb);
    font-size:var(--fs-body);
    font-weight:600;
    color: var(--tx);
    margin-bottom: 14px;
    padding: 0;
}

/* --- View Order page --- */
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-bottom: 20px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 28px;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-family: var(--ff);
    font-size:var(--fs-h4);
    font-weight:var(--fw-display);
    color:var(--tx);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom:1px solid var(--ln);
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fb);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 12px 0;
    border-bottom:1px solid var(--ln);
    text-align: left;
    color:var(--tx-2);
    font-size:var(--fs-caption);
}

.woocommerce-table--order-details thead th {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight:500;
    letter-spacing:0;
    color:var(--tx-3);
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    font-family:var(--fb);
    color:var(--tx);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    font-size:var(--fs-body-lg);
}

.woocommerce-table--order-details .order-actions-button { margin: 3px 6px 3px 0; }   /* keeps a gap when Pay / Cancel stack on phones */

/* Unpaid orders add an Actions row (Pay / Cancel) in a <tfoot> of its own, so the
   Total row's :last-child emphasis above caught it too */
.woocommerce-table--order-details tfoot tr:last-child th.order-actions--heading,
.woocommerce-table--order-details tfoot tr:last-child th.order-actions--heading + td {
    font-size:var(--fs-caption);
}

/* Customer address on the thank-you and view-order pages: upright, caption size;
   the phone and email lines are <p>s, which .ty-details p / .acc-content p made 17px */
.woocommerce-customer-details address {
    font-style: normal;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color:var(--tx-2);
    line-height:var(--lh-body);
}
.woocommerce-customer-details address p {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    margin: 0;
}

/* --- Login / register page (logged-out state) ---
   form-login.php wraps content in .account-section directly. The login +
   register forms sit inside .acc-card containers in a 2-col grid. */
.account-hero-sub {
    font-family: var(--fb);
    max-width: 560px;
    margin: 16px 0 0;
    color: var(--tx-2);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
}

.acc-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.acc-auth-grid--single { grid-template-columns: minmax(0, 480px); justify-content: center; }

.acc-auth-card { padding: 32px; }

.acc-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color:var(--tx-2);
    cursor: pointer;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    accent-color: var(--orange);
}

/* Login/register forms — inputs picked up by .acc-content rules above.
   These remaining rules style the form containers themselves. */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
    background: transparent;
    border: none;
    padding: 0;
}

.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account form.woocommerce-form-register .woocommerce-form-register__submit {
    background: var(--orange);
    color: var(--w);
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid transparent;
    border-radius: var(--rs);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease);
}

.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-account form.woocommerce-form-register .woocommerce-form-register__submit:hover {
    background: var(--orange-lo);
}

.woocommerce-account .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family:var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-2);
    cursor: pointer;
}

.woocommerce-account .woocommerce-LostPassword {
    margin-top: 14px;
}

.woocommerce-account .woocommerce-LostPassword a {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
}

.woocommerce-account .woocommerce-LostPassword a:hover { color:var(--tx); }

/* WooCommerce password fields. woocommerce.js wraps each one in .password-input and
   appends an empty .show-password-input button; WooCommerce's own stylesheet (not loaded
   by this theme) draws its eye icon. Without it the button was an invisible 0x0 tab stop
   on sign-in, account details and checkout. Heroicons eye / eye-slash, --ink-3. */
.woocommerce form .password-input { position: relative; display: block; }
.woocommerce form .password-input input.input-text { padding-right: 48px; }
.woocommerce form .show-password-input {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--rs);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236B6B78'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease);
}
.woocommerce form .show-password-input:hover { background-color: var(--mist); }
.woocommerce form .show-password-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.woocommerce form .show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236B6B78'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88'/%3E%3C/svg%3E"); }

/* Lost / reset password, signed out: WooCommerce prints form-lost-password.php (and its
   confirmation) straight into <main>, without the .account-section shell and .acc-content
   wrapper the sign-in page has, so the heading sat under the fixed nav and the form ran
   edge to edge. Same shell, 480px card, type and Primary button, on the classes that are there. */
.woocommerce-lost-password main > .woocommerce {
    background: var(--w);
    padding: calc(var(--nav-h) + 56px) var(--gutter) var(--sec-y);
}

.woocommerce-lost-password main > .woocommerce > * {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.woocommerce-lost-password main > .woocommerce > .woocommerce {
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 32px;
}

.woocommerce-lost-password main h2 {
    font-family: var(--ff);
    font-size: var(--fs-h3);
    font-weight: var(--fw-display);
    color: var(--tx);
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

.woocommerce-lost-password :where(main > .woocommerce) p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--tx-2);
    margin: 0 0 20px;
}

.woocommerce-lost-password .lost_reset_password .form-row { margin: 0 0 16px; }
.woocommerce-lost-password .lost_reset_password .form-row:last-child { margin-bottom: 0; }

.woocommerce-lost-password .lost_reset_password label {
    display: block;
    margin-bottom: 8px;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

.woocommerce-lost-password .lost_reset_password .required { text-decoration: none; color: var(--tx-3); }

.woocommerce-lost-password .lost_reset_password .input-text { width: 100%; }

.woocommerce-lost-password .lost_reset_password .woocommerce-Button {
    margin-top: 8px;
    background: var(--orange);
    color: var(--w);
}

.woocommerce-lost-password .lost_reset_password .woocommerce-Button:hover { background: var(--orange-lo); }

.woocommerce-lost-password .account-lost-password-back {
    margin: 14px 0 0;
    font-size: var(--fs-spec);
    color: var(--tx-3);
}

.woocommerce-lost-password .account-lost-password-back a {
    color: var(--acc-tx);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}

.woocommerce-lost-password .account-lost-password-back a:hover { color: var(--tx); }

.woocommerce-privacy-policy-text {
    font-family: var(--fb);
    font-size:var(--fs-spec);
    color:var(--tx-3);
    margin-top: 12px;
    line-height: 1.5;
}

.woocommerce-privacy-policy-text a { color:var(--acc-tx); }

/* --- Responsive --- */
@media (max-width: 1024px) {
    
    .account-grid { gap: 24px; grid-template-columns: 240px 1fr; }
}

@media (max-width: 900px) {
    
    .account-hero { margin-bottom: 24px; }

    .account-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .acc-sidebar {
        position: static;
        order: 2;
    }

    .acc-content { order: 1; }

    .acc-sidebar .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .acc-sidebar .woocommerce-MyAccount-navigation li { flex: 1 1 auto; }

    .acc-quick-grid { grid-template-columns: 1fr; }

    .acc-auth-grid,
    .acc-auth-grid--single {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .woocommerce-Addresses,
    .u-columns { grid-template-columns: 1fr; }

    .acc-recent-item {
        grid-template-columns: 1fr auto;
        gap: 8px 16px;
    }

    .acc-recent-status,
    .acc-recent-total { grid-column: 1; }
    .acc-recent-link { grid-row: 1 / 3; grid-column: 2; }
}

@media (max-width: 768px) {
    .acc-card { padding: 22px; }
    .woocommerce-lost-password main > .woocommerce > .woocommerce { padding: 22px; }
    .acc-greeting-card { padding: 24px; }
    .acc-greeting-h2 { font-size:var(--fs-h2-sm); }

    .acc-content .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    /* Orders table → stacked blocks */
    .woocommerce-MyAccount-orders thead { display: none; }

    .woocommerce-MyAccount-orders,
    .woocommerce-MyAccount-orders tbody,
    .woocommerce-MyAccount-orders tr,
    .woocommerce-MyAccount-orders td {
        display: block;
    }

    .woocommerce-MyAccount-orders {
        border-radius: var(--r);
        overflow: visible;
    }

    .woocommerce-MyAccount-orders tr {
        border-bottom: 1px solid var(--ln);
        padding: 16px;
    }

    .woocommerce-MyAccount-orders td {
        border-bottom: none;
        padding: 4px 0;
    }

    .woocommerce-MyAccount-orders td::before {
        content: attr(data-title) ': ';
        font-family:var(--fb);
        font-weight:500;
        font-size:var(--fs-spec);
        letter-spacing:0;
        color: var(--tx-3);
        display: inline-block;
        margin-right: 6px;
    }

    .woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions::before {
        display: none;
    }
}

/* The old cream-context My Account CSS blocks (CONTENT AREA, ORDERS TABLE,
   ADDRESS CARDS, EDIT ACCOUNT FORMS, LOGIN HEADER, LOGIN+REGISTER GRID,
   LOGIN/REGISTER FORM INPUTS, MY ACCOUNT RESPONSIVE) lived here. Deleted
   in WC-6 — superseded by the "MY ACCOUNT PAGE — REWRITTEN" block above
   which handles all endpoint templates in a single dark-section design. */


/* ============================================
   STUDIO EQUIPMENT CATEGORY PAGE
   Full-page editorial: template-parts/category/full-studio-equipment.php
   Class prefix: .se-*
   ============================================ */

/* ---------- SE Hero ---------- */
.se-hero{padding:calc(var(--nav-h) + 56px) var(--gutter) 64px;background:var(--w)}
.se-hero-orb{display:none}
.se-hero-orb--orange{display:none}
.se-hero-orb--teal{display:none}
.se-hero-in{max-width:var(--max);margin:0 auto}
.se-breadcrumb{display:flex;align-items:center;font-family:var(--fb);margin-bottom:32px;font-size:var(--fs-caption);gap:8px;color:var(--ink-3)}
.se-breadcrumb a{text-decoration:none;color:var(--ink-3);transition:color var(--dur-1) var(--ease)}
.se-breadcrumb a:hover{color:var(--ink)}
.se-bc-sep{color:var(--ink-4)}
.se-breadcrumb .breadcrumb_last{color:var(--ink-3)}
.se-hero-grid{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:var(--col-gap);align-items:end}
.se-hero-left h1{font-family:var(--ff);font-weight:var(--fw-hero);font-size:var(--fs-hero);color:var(--tx);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:14ch;margin-bottom:24px}
.se-hero-desc{font-family:var(--fb);font-size:var(--fs-body-lg);color:var(--tx-2);line-height:var(--lh-body-lg);max-width:52ch;margin:0}

/* Trust badges */
.se-hero-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;align-items:start}
.se-badge{display:flex;align-items:flex-start;gap:8px;height:auto;padding:0;background:none;border-radius:0;font:400 var(--fs-caption)/1.45 var(--fb);letter-spacing:0;color:var(--ink-2);white-space:normal}
.se-badge svg{flex-shrink:0;color:var(--teal);width:18px;height:18px;margin-top:1px}

/* ---------- SE Filter Pills ---------- */
.se-filters{padding:18px var(--gutter) 28px;background:var(--w)}
.se-filters-in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px}
.se-filter-pill{background:transparent;border-color:var(--ln-2);color:var(--tx);height:40px;padding:0 16px;font:600 .875rem/1 var(--fb);border:1px solid var(--ln-2);border-radius:var(--rs);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.se-filter-pill:hover{background:var(--sur-2);border-color:var(--tx-3)}
.se-filter-pill.is-active{background:var(--ink);border-color:var(--ink);color:var(--w)}
.se-filter-count{background:var(--mist-2);color:var(--ink-2)}
.se-filter-pill.is-active .se-filter-count{background:var(--w20);color:var(--w)}
.se-filter-pill svg{flex-shrink:0}

/* ---------- SE Toolbar ---------- */
.se-toolbar{background:var(--w);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px var(--gutter)}
.se-toolbar-in{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.se-toolbar-count{font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx-2)}
.se-toolbar-count strong{color:var(--tx);font-weight:500}
.se-toolbar-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.se-sort-wrap{display:flex;align-items:center;gap:10px}
.se-sort-label{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;color:var(--tx-3)}
.se-sort-select-wrap{position:relative}
.se-sort-select{height:40px;padding:0 40px 0 14px;font-size:var(--fs-caption);cursor:pointer}
.se-sort-select option{background:var(--w)}
.se-sort-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-3);display:none}

/* ---------- SE Products Section ---------- */
.se-products{padding:var(--sec-y-sm) var(--gutter) var(--sec-y);background:var(--mist)}
.term-studio-equipment .se-products{background:var(--w)}
.se-products-in{max-width:var(--max);margin:0 auto}

/* Grid view */
.se-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.se-grid:not(.is-active){display:none}

/* List view */
.se-list{display:flex;flex-direction:column;gap:16px}

/* ---------- SE Grid Card ---------- */
.se-card{overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.se-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.se-card--oos{opacity:1}
.se-card-img{position:relative;overflow:hidden;background:var(--mist);border-bottom:1px solid var(--line)}
.se-card-img img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}

.se-card--oos .se-card-img img{filter:none}
.se-card-badges{position:absolute;display:flex;flex-direction:column;top:12px;left:12px;gap:6px}
.se-card-oos-tag{background:var(--mist-2);color:var(--ink-2)}
.se-card-subcat{position:absolute;bottom:14px;left:14px;background:var(--w);color:var(--ink);box-shadow:var(--sh-1)}
.se-card-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.se-card-body h3{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h4);color:var(--tx);letter-spacing:-.01em;line-height:var(--lh-h3);margin-bottom:8px}
.se-card-body p{font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx-2);line-height:1.55;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.se-card-foot{display:flex;justify-content:space-between;margin-top:auto;align-items:center;gap:14px}
.se-card-price{font-family:var(--ff);font-weight:var(--fw-display);color:var(--tx);font-size:1.125rem;letter-spacing:-.01em;line-height:1.2}
.se-card-cad{font-family:var(--fb);font-size:var(--fs-spec);font-weight:500;color:var(--tx-3);margin-left:6px}
.se-card-cta{background:transparent;border-color:var(--ln-2);color:var(--tx);height:40px;padding:0 16px;font:600 .875rem/1 var(--fb);border:1px solid var(--ln-2);border-radius:var(--rs);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.se-card:hover .se-card-cta{background:var(--sur-2);border-color:var(--tx-3)}
/* Out of stock: a muted Ghost, not the disabled recipe — the card is still a live link, so its label must meet AA (was .45 opacity, 2.9:1) */
.se-card-cta--oos{background:transparent;border-color:var(--ln-2);color:var(--tx-2);height:40px;padding:0 16px;font:600 .875rem/1 var(--fb);border:1px solid var(--ln-2);border-radius:var(--rs);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------- SE List Card ---------- */
.se-list-card{overflow:hidden;display:grid;grid-template-columns:280px 1fr auto;color:inherit;text-decoration:none;background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.se-list-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.se-list-card--oos{opacity:1}
.se-list-img{position:relative;overflow:hidden;background:var(--mist)}
.se-list-img img{width:100%;height:100%;display:block;object-fit:cover;min-height:200px}
.se-list-card--oos .se-list-img img{filter:none}
.se-list-img .se-card-tag{position:absolute;top:14px;left:14px}
.se-list-oos-tag{position:absolute;top:14px;right:14px;background:var(--mist-2);color:var(--ink-2)}
.se-list-body{padding:26px 30px;display:flex;flex-direction:column;justify-content:center}
.se-list-subcat{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;margin-bottom:8px;display:block;color:var(--tx-3)}
.se-list-body h3{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--tx);margin-bottom:10px}
.se-list-body p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin-bottom:0;max-width:600px}
.se-list-action{padding:26px 30px;min-width:220px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:14px;border-left:1px solid var(--line)}
.se-list-price{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-val);letter-spacing:-.025em;color:var(--tx);line-height:1}
.se-list-cta{background:transparent;border-color:var(--ln-2);color:var(--tx);height:40px;padding:0 16px;font:600 .875rem/1 var(--fb);border:1px solid var(--ln-2);border-radius:var(--rs);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.se-list-card:hover .se-list-cta{background:var(--sur-2);border-color:var(--tx-3)}
.se-list-cta--oos{background:transparent;border-color:var(--ln-2);color:var(--tx-2);height:40px;padding:0 16px;font:600 .875rem/1 var(--fb);border:1px solid var(--ln-2);border-radius:var(--rs);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------- SE Empty State ---------- */
.se-empty{padding:80px 24px 120px;text-align:center}
.se-empty h3{font-family:var(--ff);font-weight:var(--fw-display);letter-spacing:-.02em;font-size:var(--fs-h3);color:var(--tx);margin-bottom:12px}
.se-empty p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin-bottom:24px;max-width:520px;margin-left:auto;margin-right:auto}

/* ---------- SE Bundle CTA ---------- */
.se-bundle{padding:var(--sec-y) var(--gutter);background:var(--mist)}
.se-bundle-orb{display:none}
.se-bundle-in{margin:0 auto;max-width:var(--max)}
.se-bundle-card{display:grid;grid-template-columns:1.2fr 1fr;gap:0;align-items:stretch;overflow:hidden;background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg)}
.se-bundle-text{display:flex;flex-direction:column;justify-content:center;padding:48px}
.se-bundle-text h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:20px;line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.se-bundle-text p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin-bottom:28px}
.se-bundle-actions{display:flex;gap:12px;flex-wrap:wrap}
.se-bundle-img{position:relative;min-height:380px}
.se-bundle-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- SE Responsive ---------- */
@media(max-width:768px){
    
    .se-hero-grid{grid-template-columns:1fr;gap:32px}
    .se-hero-badges{grid-template-columns:1fr 1fr}
    .se-filters{padding:14px var(--gutter) 22px}
    .se-toolbar{padding:16px var(--gutter)}
    .se-toolbar-in{flex-direction:column;align-items:flex-start;gap:14px}
    
    .se-grid{grid-template-columns:repeat(2,1fr);gap:16px}
    .se-list-card{grid-template-columns:1fr;gap:0}
    .se-list-action{border-left:none;border-top:1px solid var(--ln);flex-direction:row;justify-content:space-between;align-items:center;padding:20px 30px;min-width:auto}
    
    .se-bundle-card{grid-template-columns:1fr}
    .se-bundle-text{padding:40px 32px}
    .se-bundle-img{min-height:260px}
}
@media(max-width:480px){
    
    .se-filters{padding:12px var(--gutter) 18px}
    .se-filter-pill{padding:0 12px}
    .se-toolbar{padding:14px var(--gutter)}
    
    .se-grid{grid-template-columns:1fr}
    .se-list-img{max-height:200px}
    .se-list-body{padding:20px}
    .se-list-action{padding:16px 20px}
    
    .se-bundle-text{padding:32px 20px}
    .se-bundle-actions{flex-direction:column}
    .se-bundle-actions .btn{width:100%;justify-content:center}
}

/* =========================================================================
   PDP — closing sections for Lightboards & Studio Packages
   (template-parts/pdp/setup-simple.php, rendered before the CTA band)

   The .setup-* / .flip-* component styles come from style.css (homepage
   modules, loaded globally). Below: the "write backwards?" callout under
   the setup grid, and the flip-demo modal it opens.
   ========================================================================= */

/* --- Common-question callout bar --- */
.pdp-flipq {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    padding: 28px;
}
.pdp-flipq-copy h3 {
	font-family: var(--ff);
	font-weight:var(--fw-display);
	font-size:var(--fs-h3);
	letter-spacing: -.02em;
	color:var(--tx);
	margin: 0 0 8px;
}
.pdp-flipq-copy p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0;
    max-width: 560px;
    color: var(--tx-2);
}
.pdp-flipq .btn { flex-shrink: 0; }
.pdp-flipq-copy { flex: 1; min-width: 0; }
@media (min-width: 768px) {
	.pdp-flipq {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 28px 36px;
	}
}

/* --- Flip-demo modal --- */
body.pdp-modal-lock { overflow: hidden; }

.pdp-modal {
	position: fixed;
	inset: 0;
	z-index: 10010; /* above the fixed nav (10000) */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pdp-modal.is-open { display: flex; }

.pdp-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(4, 10, 22, .72);
	
	
}

.pdp-modal-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    animation: pdpModalIn .35s var(--ease);
    background: var(--w);
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-3);
    padding: 40px 36px 36px;
}
@keyframes pdpModalIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.pdp-modal-panel h3 {
	font-family: var(--ff);
	font-weight:var(--fw-display);
	font-size:var(--fs-h2-sm);
	letter-spacing: -.025em;
	color:var(--tx);
	margin: 0 0 12px;
}
.pdp-modal-p {
    font-family: var(--fb);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0 0 24px;
    color: var(--tx-2);
}
.pdp-modal-panel .flip-steps { margin-bottom: 24px; }
.pdp-modal-panel .flip-btn { margin-top: 16px; }

.pdp-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all .25s var(--ease);
    background: var(--mist-2);
    border: 0;
    color: var(--ink-2);
}
.pdp-modal-close svg { width: 16px; height: 16px; }
.pdp-modal-close:hover {
    background: var(--mist-2);
    color: var(--ink);
}

@media (max-width: 540px) {
	.pdp-modal { padding: 12px; }
	.pdp-modal-panel { padding: 32px 20px 24px; max-height: calc(100vh - 24px); }
}

/* =========================================================================
   ORDER RECEIVED (checkout/thankyou.php) — .ty-* classes
   Shares .checkout-section / .ck-hero / .cart-stepper styles; below are the
   thank-you-specific pieces: overview cards, gateway/order details region,
   failed-payment actions, and closing buttons.
   ========================================================================= */

.ty-hero { margin-bottom: 40px; }

.ty-hero .woocommerce-thankyou-order-received {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color:var(--tx-2);
    line-height:var(--lh-body);
    max-width: 640px;
}

/* --- Overview strip: order number / date / email / total / method --- */
.ty-overview {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.ty-overview-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--rs);
    padding: 18px 20px;
}

.ty-overview-label {
    font-family:var(--fb);
    font-size:var(--fs-spec);
    font-weight:500;
    letter-spacing:0;
    color: var(--tx-3);
}

.ty-overview-item strong {
    font-family:var(--fb);
    font-size:var(--fs-body);
    font-weight:600;
    color: var(--tx);
    overflow-wrap: anywhere;
}

/* --- Gateway instructions + order/customer details tables --- */
.ty-details { margin-bottom: 40px; }

.ty-details p {
    font-family: var(--fb);
    font-size:var(--fs-body);
    color:var(--tx-2);
    line-height:var(--lh-body);
}

/* WC renders .woocommerce-order-details / .woocommerce-customer-details here —
   both already styled for dark sections (see "View Order page" rules above). */

.ty-details .woocommerce-customer-details address {
    font-style: normal;
    font-family: var(--fb);
    font-size:var(--fs-caption);
    color:var(--tx-2);
    line-height:var(--lh-body);
    border: none;
    padding: 0;
}

/* --- Failed payment actions + closing actions --- */
.ty-failed-actions,
.ty-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}





@media (max-width: 640px) {
    .ty-overview { grid-template-columns: 1fr 1fr; }
    .ty-actions .btn, .ty-failed-actions .btn { width: 100%; justify-content: center; }
}


/* ============================================
   QA / OPTIMIZATION PASS — 2026-07-16
   (see OPTIMIZATIONS.md: O-1b, O-2, O-3, B2)
   ============================================ */
/* O-1b: cream media well — white product photos read as intentional on dark cards */
.sh-card-media{background:var(--cream)}
.se-card-img{background:var(--mist)}
.se-list-img{background:var(--mist)}
/* O-2 (reverted): auto-fit made 2-product rows oversized. The right fix is
   marking one product per category as Featured in WC (see OPTIMIZATIONS.md §2). */
/* O-3: spec pills stay compact even with labelled values */
.sh-spec{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* B2: style stray notices without affecting layout — the wrapper itself gets
   no box (an "empty" wrapper still contains whitespace, so :not(:empty)
   margins created phantom gaps under the fixed nav). */
.woocommerce-notices-wrapper{margin:0;padding:0}
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error{max-width:var(--max);border-radius:var(--rs);padding:14px 18px;font-family:var(--fb);margin:96px auto 16px;font-size:var(--fs-caption)}


/* B1 (resolved — root cause was corrupt DEV media derivatives, not the theme;
   run `wp media regenerate --yes` locally). Stock WC gallery restored with
   zoom + slider + lightbox. Two safety nets remain:
   1. opacity override — WC's inline anti-flicker guard can never strand the
      gallery invisible if its JS init races.
   2. pre-init rule — only the first image shows until flexslider wraps the
      list in .flex-viewport (direct-child chain breaks, rule self-disarms),
      so there is no stacked-images flash and no blank box. */
.woocommerce-product-gallery{opacity:1 !important}
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child){display:none}

/* Subpixel bleed fix: flexslider gives slides fractional widths
   (e.g. 605.625px) but rounds translate3d() to whole pixels, so the
   previous slide's right edge shows as a ~0.6px line on the left of
   the viewport. Clip 1px off each side of the slider viewport —
   clip-path has no layout impact and the crop is invisible inside
   the 1px-bordered, 16px-radius gallery frame. */
.pdp-gallery .flex-viewport{clip-path:inset(0 1px)}


/* Related-card add buttons are now POST mini-forms (prefetch-safe) */
.spl-card-add-form{display:inline-flex;margin:0}

/* "Do you need to write backwards?" callout — featured treatment (Chris,
   2026-07-17): icon badge + orange glow edge so it reads as the section's
   interactive moment rather than a footnote. */
.pdp-flipq--featured{position:relative;background:var(--navy);border:0;border-radius:var(--r-xl)}
.pdp-flipq-icon{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs);background:var(--navy-3);color:var(--acc-tx);border:1px solid var(--ln)}
.pdp-flipq-icon svg{width:26px;height:26px}
@media(max-width:640px){.pdp-flipq-icon{display:none}}

/* ============================================================
   PDP module refinements (2026-07-17)
   ============================================================ */

/* Section rhythm: every dark PDP body module opens with a hairline so
   back-to-back dark sections read as distinct chapters. (On the cream
   sections the navy hairline is effectively invisible — harmless.) */
.pdp-diff + .pdp-cases,
.spl-page:has(> .spl-upsell) + .pdp-setup + .pdp-install{border-top:1px solid var(--line)}
/* Nova rhythm on the Lightboard / Package PDPs: hero W · included M · glass W · (Neewer lavender) · use cases W · training M · glows W ·
   (upsell M) · setup W — or M straight after the glows table — · install W · specs M · CTA navy. White meets white only across a hairline. */
.pdp-diff{background:var(--w)}
.spl-page:has(> .spl-compare-sec) + .pdp-setup{background:var(--mist)}
.spl-page:has(> .spl-compare-sec) + .pdp-setup .setup-item{background:var(--w)}

/* "Installation, handled." — white-glove setup band (navy-2 to break from
   the navy setup section above and the cream specs below). */
.pdp-install{background:var(--w);padding:var(--sec-y) var(--gutter)}
.pdp-install-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:900px){.pdp-install-in{grid-template-columns:.62fr 1fr;gap:64px}}
.pdp-install-media{aspect-ratio:16 / 10}
.pdp-install-media img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-install-copy h2{margin:14px 0 16px}
.pdp-install-copy p{color:var(--tx-2);max-width:52ch;margin-bottom:28px}

/* Neewer module image: crop the top harder and shorten the frame (Chris). */
/* The image used to be 5/4 inside style.css's 4/5 frame with height:auto, so a quarter of
   the navy frame sat empty below it (Chris, 2026-09-21). The photo is square and its two
   Neewer lights are the point of this panel, so the frame goes square here and the image
   fills it — nothing cropped, nothing empty. The homepage module keeps its 4/5 frame. */
.pdp-partner .partner-img{aspect-ratio:1/1}
.pdp-partner .partner-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 80%}

/* Training module: breathing room between the last bullet and the button. */
.pdp-training .spl-upsell-actions{margin-top:32px}

/* Install module checklist */
.pdp-install-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.pdp-install-list li{display:flex;align-items:center;gap:12px;color:var(--tx-2);font-family:var(--fb);font-size:var(--fs-body)}
.pdp-install-ck{flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs);background:none;color:var(--teal);border:0;width:20px;height:20px}

/* Component tiles: the lights render fills its tile like the photos do,
   with the visible window biased toward the top (bottom cropped more). */
.pdp-inc-img--contain img{object-fit:cover;object-position:center 30%}

/* The buy box stays clean: variation descriptions are old DB remnants
   (delivery lines etc.) — the intro paragraph and ship strip already say
   everything. (Chris, 2026-07-17: no description inside the price box.) */
.woocommerce-variation-description{display:none}

/* ============================================================
   CUSTOMER PORTAL — "My Studio" (Phase 1, 2026-07-17)
   Components ride the existing .acc-card account system.
   ============================================================ */

/* ---- Journey stepper ---- */
.lbp-journey{list-style:none;margin:28px 0 4px;padding:0;display:flex;gap:0}
.lbp-step{flex:1;position:relative;text-align:center;padding:0 6px}
.lbp-step::before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:1px;background:var(--line-2)}
.lbp-step:first-child::before{display:none}
.lbp-step--done::before,.lbp-step--current::before{background:var(--ink)}
.lbp-step-node{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--sur-2);border:2px solid var(--ln);color:var(--tx)}
.lbp-step--done .lbp-step-node{background:var(--ink);border-color:var(--ink)}
.lbp-step--current .lbp-step-node{border-color:var(--ink);box-shadow:none}
.lbp-step--current .lbp-step-node::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--ink)}
.lbp-step-label{display:block;margin-top:10px;font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;color:var(--tx-3)}
.lbp-step--done .lbp-step-label{color:var(--tx-2)}
.lbp-step--current .lbp-step-label{color:var(--tx)}
.lbp-step-date{display:block;margin-top:4px;font-family:var(--fb);font-size:var(--fs-spec);color:var(--tx-3)}
@media(max-width:760px){
	.lbp-journey{flex-direction:column;gap:0;margin-top:20px}
	.lbp-step{display:grid;grid-template-columns:28px 1fr;column-gap:14px;text-align:left;padding:0 0 22px}
	.lbp-step::before{left:13px;top:-8px;height:calc(100% - 12px);width:1px}
	.lbp-step:first-child::before{display:none}
	.lbp-step-label{grid-column:2;margin-top:4px}
	.lbp-step-date{grid-column:2}
	.lbp-step:last-child{padding-bottom:0}
}

/* ---- Consultant card ---- */
.lbp-consultant-row{display:flex;align-items:center;gap:16px;margin-top:10px}
.lbp-consultant-avatar{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--r);background:var(--mist-2);color:var(--ink-2);border:0}
.lbp-consultant-body strong{display:block;color:var(--tx);font-family:var(--fb);margin-bottom:2px}
.lbp-consultant-meta{color:var(--tx-2);font-size:var(--fs-caption);display:flex;gap:8px;flex-wrap:wrap}
.lbp-consultant-meta a{color:var(--acc-tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* ---- Dashboard teasers ---- */
.lbp-teaser-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.lbp-teaser-list li{color:var(--tx-2);font-size:var(--fs-body);display:flex;align-items:center;gap:10px}
.lbp-teaser-kind{flex-shrink:0;background:var(--mist-2);color:var(--ink-2)}

/* ---- Empty states ---- */
.lbp-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:34px 20px;border-radius:var(--rs);margin-top:14px;border:1px solid var(--ln)}
.lbp-empty p{color:var(--tx-2);max-width:46ch;margin:0}
.lbp-empty-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-3)}
.lbp-empty-icon--play{background:var(--mist-2);color:var(--ink-2);border-color:transparent}
.lbp-empty-link{font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx);font-weight:500}
.lbp-empty--page{padding:56px 24px}
.lbp-empty--page h3{margin:0}

/* ---- Training videos ---- */
.lbp-section{margin-bottom:24px}
.lbp-videos{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(min-width:720px){.lbp-videos{grid-template-columns:1fr 1fr}}
.lbp-video{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:var(--rs);overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);background:var(--sur)}
.lbp-video:hover{border-color:var(--tx-3)}
.lbp-video-thumb{position:relative;aspect-ratio:16/9;background:center/cover no-repeat var(--navy-2)}
.lbp-video-thumb--placeholder{background:var(--mist-2)}
.lbp-video-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--w);color:var(--ink);border:0;box-shadow:var(--sh-1)}
.lbp-video-body{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.lbp-video-body strong{color:var(--tx);font-family:var(--fb)}
.lbp-video-date{color:var(--tx-3);font-size:var(--fs-spec)}
.lbp-video-cta{margin-top:4px}
/* .acc-content prefix: .acc-content p (0,1,1) was overriding the note's caption size, colour and margin */
.acc-content .lbp-video-note{color:var(--tx-3);font-size:var(--fs-caption);margin:14px 0 0}
.acc-content .lbp-video-note strong{color:var(--tx-2);overflow-wrap:anywhere}

/* ---- File lists ---- */
.lbp-files{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.lbp-file{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line)}
.lbp-file:last-child{border-bottom:none}
.lbp-file-icon{color:var(--tx-3);flex-shrink:0;display:flex}
.lbp-file-label{color:var(--tx-2);font-size:var(--fs-body);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbp-file-dl{font-family:var(--fb);font-size:var(--fs-caption);flex-shrink:0;color:var(--tx);font-weight:500}
.lbp-file-chip{flex-shrink:0;background:var(--mist-2);color:var(--ink-2)}
.lbp-file-chip--invoice{background:var(--mist-2);color:var(--ink-2)}
.lbp-file-chip--warranty{background:var(--teal-wash);color:var(--teal-lo)}

/* ---- Support ---- */
.lbp-support-p{color:var(--tx-2);margin:6px 0 20px}
.lbp-support-direct{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:680px){.lbp-support-direct{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lbp-direct{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--ln);border-radius:var(--rs);background:var(--sur-2);color:var(--tx-2);font-size:var(--fs-caption);transition:border-color .25s var(--ease)}
.lbp-direct:hover{border-color:var(--tx-3)}
.lbp-direct strong{color:var(--tx);font-family:var(--fb);overflow-wrap:anywhere}
.lbp-direct > span{min-width:0}   /* a long email wraps inside the card at 320px instead of running past its padding */
.lbp-direct-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-2)}
.lbp-support-form{margin-top:16px}
.lbp-support-form select{width:100%}

/* Support form labels: the generic .acc-content form label rule paints navy
   (built for light account cards) — on the dark support card that's invisible
   next to the orange asterisk (Chris, 2026-07-17). */
.lbp-support-form .ct-form-field label{color:var(--tx-2)}
.lbp-support-form .ct-form-field .required{color:var(--tx-3)}


/* =========================================================================
   Category resource band (.cat-resources)
   -------------------------------------------------------------------------
   Links to the Setup Guide + Equipment Guide, rendered on every product-category
   archive via template-parts/category/resource-links.php. It used to be a dark band
   sitting between the editorial CTA band and the footer — three navy blocks in a row
   (Chris, 2026-09-21). The editorial categories now render it before their CTA band, and
   it is a light section: compare table (mist) → resources (white) → CTA (navy) → footer.
   Section padding and inner width match .cat-compare above it. Added 2026-07-22.
   ========================================================================= */
.cat-resources {
    background: var(--w);
    border-top: 1px solid var(--ln);
    padding: var(--sec-y) 0;
}
.cat-resources-in {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
.cat-resources-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-family:var(--fb);
	font-size: var(--fs-eyebrow);
	font-weight:500;
	letter-spacing: var(--ls-eyebrow);
	color: var(--tx-3);
}
.cat-resources-line {
    display: none;
}
.cat-resources-title {
	margin: 0 0 14px;
	font-family: var(--ff);
	font-weight: 600;
	font-size:var(--fs-h2-sm);
	line-height:var(--lh-h2);
	color:var(--tx);
}
.cat-resources-sub {
	max-width: 46ch;
	margin: 0;
	color: var(--tx-2);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}
.cat-resources-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.cat-resource-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 20px;
    text-decoration: none;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cat-resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--r-xs);
    background: var(--mist-2);
    border:1px solid var(--ln);
    color:var(--ink-2);
}
.cat-resource-body {
	flex: 1 1 auto;
}
.cat-resource-title {
	margin: 0 0 6px;
	font-family: var(--ff);
	font-weight: 600;
	font-size:var(--fs-h4);
	letter-spacing: -.01em;
	color:var(--tx);
}
.cat-resource-desc {
	margin: 0;
	color: var(--tx-2);
	font-size:var(--fs-caption);
	line-height: 1.55;
}
.cat-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-family: var(--fb);
    font-weight: 500;
    font-size: .9375rem;
    color: var(--tx);
}
.cat-resource-arrow {
	transition: transform .3s var(--ease);
}
/* Hover — links only, per the theme's interactive-affordance rule. Same pair as the
   other light outlined cards (.acc-quick): wash fill, hairline darkens. */
.cat-resource-card:hover {
    background: var(--sur-2);
    border-color: var(--tx-3);
}
.cat-resource-card:hover .cat-resource-arrow {
    transform: translateX(2px);
}
.cat-resource-card:focus-visible {
    outline-offset: 3px;
    outline: 2px solid var(--focus);
}

@media (min-width: 768px) {
	.cat-resources-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
	.cat-resources-in {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 56px;
		align-items: center;
	}
	.cat-resources-copy { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.cat-resource-card,
	.cat-resource-arrow { transition: none; }
	.cat-resource-card:hover { transform: none; }
	.cat-resource-card:hover .cat-resource-arrow,
	.acc-quick:hover .acc-quick-arrow { transform: none; }
}

/* ============================================
   CHECKOUT SUMMARY — LAYOUT + DARK-PANEL COLOUR FIXES
   Found on production 2026-09-13 by driving the live checkout in a browser.
   ============================================ */

/* 1. GRID MIN-CONTENT TRAP (layout-breaking).
   When no shipping method matches an address, WooCommerce prints a ~200-character
   notice into a single <td>. .shop_table was table-layout:auto, so that cell
   demanded ~969px; .ck-summary has min-width:auto (the default for a grid item),
   so the fr column could not shrink below it. Result: .ck-grid computed to
   "0.078px 1103.91px" — the billing column collapsed to zero and the summary
   panel rendered on top of the form. min-width:0 lets the column shrink;
   table-layout:fixed stops one cell dictating the table's width. */
.ck-grid > * { min-width: 0; }
.ck-summary .shop_table { table-layout: fixed; width: 100%; }
.ck-summary .shop_table th,
.ck-summary .shop_table td { overflow-wrap: anywhere; }

/* table-layout:fixed splits columns evenly unless told otherwise, which left the
   product name narrower than it needs to be. Nova: 58/42 fits a five-digit order
   total ("$13,760.98" at --fs-val) in the 292px summary column of a 390px phone;
   70/30 let it run past the card padding at every width. */
.ck-summary .shop_table .product-name  { width: 58%; }
.ck-summary .shop_table .product-total { width: 42%; }

/* 2. NAVY TEXT ON THE DARK PANEL (invisible content).
   ".woocommerce label { color: var(--navy) }" (see Labels, ~line 75) is written for
   the light-background forms and leaks into the dark summary. Shipping method
   labels had no .ck-summary override at all, so "Standard: $99.00" rendered as
   near-black on near-black. Same for the payment <li>: the .ck-summary rule
   redefines layout but never resets the colour inherited from
   ".woocommerce #payment ul.payment_methods li". */
.ck-summary #shipping_method label,
.ck-summary .woocommerce-shipping-totals label {
    color: var(--tx);
}
.ck-summary #shipping_method li { color: var(--tx-2); }
/* The shipping method list kept the browser's bullet and indent: WooCommerce's own
   "#shipping_method { list-style:none }" lives in the stylesheet the theme dequeues. */
.ck-summary #shipping_method { list-style: none; margin: 0; padding: 0; }
.ck-summary #payment ul.payment_methods li { color: var(--tx-2); }

/* 3. "Save payment information" checkbox label — inherited the bold, uppercase,
   block-level treatment meant for field labels, so it rendered as a shouting
   two-line heading overlapping the card box. */
.ck-summary #payment .woocommerce-SavedPaymentMethods-saveNew label,
.ck-summary #payment .payment_box label {
    display: inline;
    margin: 0;
    color: var(--tx-2);
    font-weight: 400;
}

/* Required-field error state. WooCommerce adds .woocommerce-invalid but the theme
   never styled it, so flagged fields looked identical to valid ones. */
.ck-form .woocommerce-invalid input.input-text,
.ck-form .woocommerce-invalid select,
.ck-form .woocommerce-invalid textarea,
.ck-form .woocommerce-invalid .select2-selection {
    box-shadow: 0 0 0 3px var(--err-wash);
    border-color: var(--err) !important;
}

.ck-form .woocommerce-invalid > label {color:var(--err)}

.ck-form .woocommerce-invalid::after {
    content: "This field is required.";
    display: block;
    margin-top: 6px;
    font-family: var(--fb);
    font-size: var(--fs-spec);
    font-weight: 500;
    color: var(--err);
}

/* Shipping row: let a long message wrap instead of spilling out of the panel.
   ".ck-summary .woocommerce-checkout-review-order-table tfoot tr td" (~line 5010) sets
   white-space:nowrap so money stays on one line. When no shipping zone matches an
   address WooCommerce puts a ~200-character sentence in that same cell, which then
   refused to wrap and overflowed the summary by ~800px.
   The override must out-specify that rule (0-2-3), hence the full selector path;
   a shorter ".ck-summary .woocommerce-shipping-totals td" loses and silently does nothing.
   Cells become blocks so the message uses the label's column width rather than the
   narrow price column. */
.ck-summary .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
.ck-summary .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
    display: block;
    width: auto;
    white-space: normal;
    text-align: left;
}

.ck-summary .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
    padding-bottom: 4px;
}

/* ============================================
   CHECKOUT PAYMENT BOX — FIELDSET + LABEL FIXES
   ============================================ */

/* The Stripe gateway wraps its card element in a <fieldset>, and adds a second
   unclassed one around the "save payment information" checkbox. Neither was ever
   styled, so both rendered the browser default `2px groove #efefef` — the pale box
   that looked like it belonged to Stripe. It does not: it is the UA stylesheet, and
   it is reachable from CSS. (The card FIELDS are in a cross-origin iframe and are
   styled via Stripe's Appearance API — see lightboard_stripe_dark_appearance().)
   min-width:0 also clears the fieldset default of min-inline-size:min-content, which
   would otherwise stop the box shrinking with its column. */
.ck-form fieldset,
.ck-summary fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.ck-form fieldset > legend,
.ck-summary fieldset > legend { display: none; }

/* "Save payment information to my account for future purchases." is a checkbox label,
   but it inherited the payment-method heading treatment (Space Grotesk 600 with 1.44px
   tracking) and read as a title.
   The selector must beat ".ck-summary #payment ul.payment_methods li label" (1-2-3) —
   a shorter ".ck-summary #payment .payment_box label" is 1-2-1 and loses silently. */
.ck-summary #payment ul.payment_methods li .payment_box label,
.ck-summary #payment ul.payment_methods li .woocommerce-SavedPaymentMethods-saveNew label {
    display: inline;
    margin: 0;
    line-height: 1.5;
    font: 400 var(--fs-caption)/1.5 var(--fb);
    color: var(--tx-2);
}