/*
Theme Name:         ISEKOI MetalHeart
Theme URI:          https://shop.isekoi.com
Description:        Child theme of Storefront for the ISEKOI merch shop. Applies the MetalHeart visual identity (HUD step-frame, cold blue palette, Neuropol X / TR-909 typography) shared with the isekoi.com hub via tokens.css.
Author:             agenceDEVI
Author URI:         https://isekoi.com
Template:           storefront
Version:            0.4.1
Requires at least:  6.0
Requires PHP:       7.4
License:            Proprietary
Text Domain:        isekoi-metalheart
Tags:               e-commerce, dark, custom-colors, custom-logo, custom-menu, full-width-template
*/

/* =====================================================================
   TABLE OF CONTENTS
   ---------------------------------------------------------------------
   [01] Storefront layout overrides (sticky footer, lists, sidebar)
   [02] Accessibility - skip link
   [03] Color cascade + base WC elements
   [04] Footer - z-index fix
   [05] Step 4.1 - Catalog grid (/merch)
   [06] Step 4.2 - Single product page (/product)
   [07] Step 4.3 - Cart page (WC Cart Block, /cart)
   [08] Topbar - brand logo, account & cart links
   [09] Step 4.4 - Checkout page (WC Checkout Block, /checkout)
   [10] Step 4.4b - Order received / Thank you page
   [11] Step 4.5 - My Account pages (+ login, lost password)
   [12] Step 4.6 - 404 page
   [13] Step 5 - Mobile responsive (1080 / 830 / 780 / 480 / 400)
   ---------------------------------------------------------------------
   Conventions:
   - Selector specificity and !important uses are deliberate cascade
     counters against Storefront / WC Blocks; read 07-css-gotchas-*.md
     before "simplifying" any of them.
   - Block-rendered surfaces (.wc-block-*) follow the DOM-first rule
     (D-025): never edit selectors without a fresh DOM snapshot.
   ===================================================================== */

/* =====================================================================
   Storefront layout overrides
   ---------------------------------------------------------------------
   These rules force Storefront's structural defaults (sidebar, body
   colors, content widths, list margins) to align with the ISEKOI
   MetalHeart identity defined in tokens.css and globals.css.

   Selectors are deliberately specific to win Storefront's cascade.
   ===================================================================== */


/* =====================================================================
   Sticky footer pattern
   ---------------------------------------------------------------------
   Body becomes a vertical flex container so .page-content can flex-grow
   and push the footer to the viewport bottom on short pages (e.g. an
   archive with only one product). On long pages this is a no-op since
   the footer sits naturally below the content.

   Important: body also has ::before (CAD grid) and ::after (grain)
   overlays in position: fixed - flex on body does not affect them.
   ===================================================================== */

.page-content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}


/* =====================================================================
   Accessibility - skip link
   ---------------------------------------------------------------------
   header.php prints <a class="skip-link screen-reader-text" href="#content">
   as the first focusable element. Storefront's .screen-reader-text rule
   hides it off-screen; this :focus override reveals it on keyboard
   navigation, restyled to the MetalHeart chrome.
   ===================================================================== */
.skip-link.screen-reader-text:focus {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 1000;
    width: auto;
    height: auto;
    padding: var(--space-xs) var(--space-md);
    clip: auto !important;
    clip-path: none;
    background: var(--bg-deep);
    border: 1px solid var(--accent-bright);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: var(--glow-cold);
}


/* =====================================================================
   Reset Storefront's inherited bullet-list margins
   ---------------------------------------------------------------------
   Storefront (and base WP CSS before it) ships `ul, ol { margin: 0 0
   1.41575em 3em }` which adds a 3em left indent to every list - the
   document-style indent from late-90s typography defaults. It breaks
   any modern flex/grid layout (.topnav, .footer-links, WC mini cart,
   product attributes lists, etc).
   ===================================================================== */
body ul,
body ol {
    margin: 0;
    padding: 0;
}

body ul,
body ol,
.woocommerce ul, .woocommerce ol,
.woocommerce-page ul, .woocommerce-page ol {
    list-style: none;
}

/* Restore standard bullet behavior only inside actual long-form content
   areas (post body, product description) where indented bullets do make
   sense for reading. */
.entry-content ul,
.entry-content ol,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description ol,
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
    margin: 0 0 var(--space-md) var(--space-lg);
    list-style: revert;
}


/* =====================================================================
   Sidebar removed (see functions.php remove_action)
   Force the primary content column to span the full width.
   ===================================================================== */
.right-sidebar:not(.page-template-template-fullwidth-php) #primary,
.left-sidebar:not(.page-template-template-fullwidth-php) #primary,
#primary {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-left: 0;
}

#secondary {
    display: none;
}


/* =====================================================================
   Color cascade - override Storefront's grey-on-grey defaults
   with the ISEKOI palette from tokens.css.
   ===================================================================== */

/* html background matches site so overflow never reveals a white strip */
html {
    background-color: var(--bg-deep);
}

html body,
html body.woocommerce,
html body.woocommerce-page {
    color: var(--text-primary);
    background-color: transparent;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--text-bright);
}

a {
    color: var(--accent);
}

a:hover,
a:focus {
    color: var(--accent-bright);
}

/* WC product price - primary readable color. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* WC catalog ordering dropdown and result count. */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    color: var(--text-secondary);
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--line-medium);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
}

/* WC breadcrumbs (Accueil > Boutique). */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
    color: var(--text-secondary);
}

/* Storefront wraps the page in #page and .site-content. Reset their
   visual defaults so they don't add unwanted backgrounds or padding. */
#page,
.site-content {
    background: transparent;
}

.col-full {
    background: transparent;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

/* =====================================================================
   Footer - z-index fix
   ---------------------------------------------------------------------
   globals.css defines body::before (CAD grid, z-index: 1) and
   body::after (grain, z-index: 2) as fixed overlays, and .page-content
   sits at z-index: 3 to render above them. But .footer was never given
   an explicit z-index, so it stays at auto/0 and the CAD grid renders
   ABOVE it.

   On the hub this is masked by the frosted-glass effect (translucent
   background + backdrop-filter blur), but on the shop where pages are
   short and the blur has nothing to feed on, the grid bleeds through
   visibly.

   Lift the footer onto the same layer as .page-content so it sits
   above the body overlays, matching the intent of the design system.
   ===================================================================== */
.footer {
    z-index: 3;
}


/* --- Legal nav (footer row 2) -------------------------------------- */

/* Full-width flex item so legal links always wrap below the first row
   (copyright + social). Middle-dot separators via li + li::before. */
.footer-legal {
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    padding: var(--space-sm) 0 0 0;
    border-top: 1px dashed var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-legal li {
    display: flex;
    align-items: center;
}

.footer-legal li + li::before {
    content: '·';
    padding: 0 var(--space-sm);
    color: var(--line-medium);
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--accent);
}


/* =====================================================================
   Phase 3 - Step 4.1: WooCommerce catalog grid
   ---------------------------------------------------------------------
   Custom card design for the merch archive. Visual language ported
   from the hub's .module: 20px chamfered corners, cyan border via
   ::before pseudo, accent tab line top-left via ::after, hover-extend.

   Selectors are scoped to .shop-archive / .product-card so they don't
   collide with .module on the hub or .shop-item on the homepage teaser.

   Per Step 4.1 design arbitration (Q1=B, Q2=A, Q3=A): full module
   treatment, dynamic WC category tab, strict minimalist density.
   ===================================================================== */

/* --- Archive shell -------------------------------------------------- */

.shop-archive {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.shop-archive-head {
    position: relative;
    padding: var(--space-lg) 0 var(--space-md);
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md) var(--space-xl);
}

.shop-archive-tab {
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

.shop-archive-title {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-bright);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}

.shop-archive-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.shop-archive-empty {
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    padding: var(--space-lg);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* --- Brand / Type section titles ------------------------------------ */

/* Brand (root category): accent line + mono uppercase title, mirrors
   .shop-archive-title at 1.5rem. Dashed border-top separates adjacent
   brands; padding-top makes room for the ::before accent line. */
.shop-brand + .shop-brand {
    border-top: 1px dashed var(--line-soft);
    padding-top: var(--space-2xl);
}

.shop-brand-title {
    position: relative;
    padding-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-bright);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 var(--space-xl);
}

.shop-brand-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

/* Type (child category): exact mirror of .related.products > h2. */
.shop-type + .shop-type {
    margin-top: var(--space-2xl);
}

.shop-type-title {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--text-bright);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* Kill WC's legacy clearfix on ul.products.
   WooCommerce still ships a float-era clearfix
   (`ul.products::before, ul.products::after { content: ""; display: table }`)
   on the product list. In a grid container these pseudos count as grid
   items and occupy the first cell, leaving a hole in the layout. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
    content: none;
    display: none;
}


/* --- Grid ----------------------------------------------------------- */

/* 3-column CSS grid. */
.woocommerce ul.products.shop-grid,
ul.products.shop-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    /* Sub-pixel nudge: without it the 1px ::before card border can be
       clipped at the grid cell edge (visible on the last card's bottom
       edge). Do not remove. */
    padding-left: 0.03rem;
}

.woocommerce ul.products.shop-grid > li.product,
ul.products.shop-grid > li.product {
    width: auto;
    margin: 0;
    float: none;
    clear: none;
}


/* --- Card ----------------------------------------------------------- */

.woocommerce ul.products li.product.product-card,
ul.products li.product.product-card,
.product-card {
    position: relative;
    background: var(--bg-panel);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding: var(--space-lg);
    margin: 0;
    width: auto;
    float: none;
    list-style: none;
    transition: all var(--transition-normal);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-soft);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    pointer-events: none;
    transition: border-color var(--transition-normal);
}

.product-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 32px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
    transition: width var(--transition-normal);
}

.product-card:hover {
    background: var(--bg-elevated);
}

.product-card:hover::before {
    border-color: var(--accent);
}

.product-card:hover::after {
    width: 80px;
}


/* --- Card content --------------------------------------------------- */

.product-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.product-card-link:hover,
.product-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.product-card-tab {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.product-card-image {
    width: 100%;
    background: transparent;       /* let the card's --bg-panel show through PNG transparency */
    display: block;
    overflow: hidden;
    position: relative;
}

.product-card-image-img,
.product-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-card-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    color: var(--text-bright);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
}

.product-card-price {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-bright);
}

.product-card-price .woocommerce-Price-amount,
.product-card-price ins,
.product-card-price del {
    font-family: var(--font-mono);
    font-weight: inherit;
    color: inherit;
    text-decoration: inherit;
}

.product-card-price del {
    color: var(--text-muted);
    margin-right: var(--space-xs);
}

/* "DETAILS →" pseudo-button. <span> styled like .btn so the whole card
   can stay a single <a> (no nested anchors). */
.product-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: transparent;
    border: 1px solid var(--line-medium);
    color: var(--accent-bright);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    width: fit-content;
    transition: all var(--transition-normal);
}

.product-card:hover .product-card-cta {
    border-color: var(--accent-bright);
    background: rgba(125, 224, 255, 0.08);
}


/* =====================================================================
   Phase 3 - Step 4.2: WC single product page restyle
   ---------------------------------------------------------------------
   No template override. Storefront's content-single-product.php is
   left untouched; this block restyles its native output to match the
   MetalHeart identity.

   Strategy:
     - .woocommerce div.product becomes a CSS Grid 2-col container:
       gallery left, summary right, tabs and related products full
       width below.
     - The summary block gets the full .module treatment (chamfered,
       cyan border, accent tab, --bg-panel).
     - The Add to Cart button takes the .shop-cta warm orange
       treatment - one of the two D-006-authorized uses.
     - The Additional Information attributes table is re-laid out as
       .spec-row pairs (mono uppercase key, mono cyan-bright value).
     - Related products hook into the .shop-grid 3-col layout from
       Step 4.1 and inherit the .product-card visual via the shared
       content-product.php template.

   D-025 vigilance: WC ships clearfix and decorative ::before/::after
   on .woocommerce div.product, .button.alt, and
   .woocommerce-tabs ul.tabs li. They are nuked preemptively below to
   avoid the Step 4.1-grade timesink.
   ===================================================================== */


/* --- D-025 preemptive clearfix / pseudo nuke ----------------------- */

.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce-page div.product::before,
.woocommerce-page div.product::after {
    content: none;
    display: none;
}

.woocommerce-tabs::before,
.woocommerce-tabs::after,
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    content: none;
    display: none;
    border: none;
    box-shadow: none;
    background: none;
}


/* --- Layout: 2-col grid -------------------------------------------- */

.woocommerce div.product,
.woocommerce-page div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-2xl) var(--space-xl);
    align-items: stretch;
    margin: 0;
}

.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .images {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: auto;
    float: none;
    margin: 0;
}

.woocommerce div.product > .summary,
.woocommerce div.product > .entry-summary {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: auto;
    float: none;
    margin: 0;
}

.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related {
    grid-column: 1 / -1;
}


/* --- Hide Storefront / WC noise we don't want ----------------------- */

/* Sale flash badge: not used at MVP (no sales planned). */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    display: none;
}

/* Rating stars + "Be the first to review" link in summary - reviews are
   deferred per roadmap, the empty-rating link goes nowhere useful. */
.woocommerce div.product .woocommerce-product-rating {
    display: none;
}

/* Storefront share buttons - don't fit the DA, not asked for. */
.woocommerce div.product .product_share,
.woocommerce div.product .storefront-share,
.storefront-product-pagination {
    display: none;
}


/* --- Gallery frame -------------------------------------------------- */

/* Frame on .woocommerce-product-gallery (the outer wrapper).
   Putting clip-path on .flex-viewport interfered with FlexSlider's
   absolute-positioned slides - the viewport remained visible but the
   image vanished. The wrapper holds viewport + thumbnails inside a
   single chamfered frame, with internal padding for breathing room. */

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images.woocommerce-product-gallery {
    position: relative;
    background: var(--bg-panel);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding: var(--space-lg);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

.woocommerce div.product .woocommerce-product-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-soft);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    pointer-events: none;
    z-index: 2;
}

/* Inner viewport / wrapper get NO decoration so FlexSlider's measurements
   stay intact. Reset any background/border WC or Storefront might add.
   overflow: hidden is critical: jquery.zoom (the WC magnifier) clones
   the source image at its natural width into a .zoomImg overlay
   positioned absolutely. Without overflow clipping, that clone bleeds
   out of the gallery frame and covers half the screen. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__wrapper {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder {
    position: relative;
    overflow: hidden;
    display: block;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* The .zoomImg overlay must never receive pointer events (it would
   block the magnifier's own mousemove handler) and must stay clipped
   to its container. */
.woocommerce div.product .woocommerce-product-gallery img.zoomImg {
    pointer-events: none;
    max-width: none;
}

/* Magnifier trigger - square chamfered icon-only button.
 *
 * Specificity note: `div.images` in the selector matches WC's
 * default rule specificity (0,4,2). Source order makes our
 * stylesheet win the cascade since it loads after Storefront.
 *
 * The native "🔍" text is suppressed via font-size: 0; the icon is
 * painted by ::before with a 22x22 SVG magnifier glyph centered
 * inside a 44x44 square. No label, no ::after - the icon alone
 * carries the affordance.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-page div.product div.images .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 99;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    margin: 0;

    background: var(--bg-deep);
    border: 1px solid var(--accent-bright);
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 0;                /* hides the native "🔍" text node */
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    overflow: visible;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    clip-path: polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        0 100%,
        0 8px
    );

    transition: background var(--transition-normal),
                color var(--transition-normal),
                box-shadow var(--transition-normal);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%237FE0FF' stroke-width='1.6' stroke-linecap='round'><circle cx='9.5' cy='9.5' r='6.5'/><line x1='14.5' y1='14.5' x2='19.5' y2='19.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    color: var(--bg-deep);
    box-shadow: var(--glow-cold);
    outline: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::before,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23031126' stroke-width='1.6' stroke-linecap='round'><circle cx='9.5' cy='9.5' r='6.5'/><line x1='14.5' y1='14.5' x2='19.5' y2='19.5'/></svg>");
}

/* Thumbnails strip - WC's defaults sit on
   `.woocommerce div.product div.images .flex-control-thumbs li`
   at specificity (0,4,3) with width: 25% + float: left. We must
   include `div.images` in our selectors to match that specificity
   and let source-order win. */

.woocommerce div.product div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin: var(--space-md) 0 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs::before,
.woocommerce div.product div.images .flex-control-thumbs::after {
    content: none;
    display: none;
}

/* FlexSlider applies inline `style="width: NNpx"` on each <li> at
   page load. Inline styles outrank any pure-CSS specificity, so
   !important is the only mechanism that beats them. This is the
   exact case the spec authors intended !important for. */
.woocommerce div.product div.images .flex-control-thumbs li {
    width: auto !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    float: none;
    cursor: pointer;
    list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    opacity: 0.6;
    border: 1px solid transparent;
    transition: all var(--transition-normal);
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--line-bright);
}


/* --- Summary panel (.module treatment) ----------------------------- */

.woocommerce div.product .summary,
.woocommerce div.product .entry-summary {
    position: relative;
    background: var(--bg-panel);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

.woocommerce div.product .summary::before,
.woocommerce div.product .entry-summary::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-soft);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    pointer-events: none;
}

.woocommerce div.product .summary::after,
.woocommerce div.product .entry-summary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}


/* --- Title + price + excerpt --------------------------------------- */

.woocommerce div.product .product_title,
.woocommerce div.product h1.entry-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--text-bright);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .summary > .price {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--accent-bright);
    margin: 0;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--text-muted);
    margin-right: var(--space-xs);
    font-weight: 400;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none;
    color: var(--accent-bright);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--text-primary);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--line-soft);
}

.woocommerce div.product .woocommerce-product-details__short-description p {
    margin: 0 0 var(--space-sm);
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}


/* --- Variations form ------------------------------------------------ */

.woocommerce div.product form.cart {
    margin: 0;
    padding-top: var(--space-md);
    border-top: 1px dashed var(--line-soft);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
    content: none;
    display: none;
}

/* The table itself must drop out of `display: table` for our
   `display: grid` on <tr> to be honored - otherwise the browser
   keeps the table-row layout context and the grid is ignored. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart table.variations {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-md);
    border: none;
    border-collapse: collapse;
}

.woocommerce div.product form.cart .variations tbody {
    display: block;
    width: 100%;
}

.woocommerce div.product form.cart .variations tr {
    display: grid;
    grid-template-columns: minmax(60px, 90px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px dashed var(--line-soft);
}

.woocommerce div.product form.cart .variations tr:last-child {
    border-bottom: none;
}

/* `align-self: center` is required: when grid children are set to
   `display: block`, they lose the implicit baseline that
   `align-items: center` on the parent normally aligns. Explicit
   align-self forces vertical centering. min-width: 0 lets the value
   cell shrink below its content's min-content if needed (otherwise
   the select overflows the grid track).

   `margin: 0` overrides Storefront's
   `.single-product div.product table.variations .value { margin-bottom: 1em }`
   which would otherwise push .value down inside its grid track and
   break the vertical alignment with the SIZE label. */
.woocommerce div.product form.cart .variations th.label {
    display: block;
    align-self: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* td.value hosts the <select> and a sibling <a class="reset_variations">
   that becomes visible after a value is picked. Flex row keeps both
   on the same line: the select takes the available space, the reset
   docks at the right. When reset is display: none (no value picked
   yet) the select naturally fills the whole cell. */
.woocommerce div.product form.cart .variations td.value {
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--space-sm);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    vertical-align: middle;
    position: relative;
}

.woocommerce div.product form.cart .variations th.label label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    color: var(--text-bright);
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
}

/* Chevron painted as background-image directly on the <select>, so
   it always sits inside the select's right edge regardless of the
   select's width or its siblings inside td.value. Two SVG variants
   swapped at :focus - rest = chevron-down, focus = chevron-up.
   Pure CSS can't animate background-image transitions, so the swap
   is instant; the JS blur-after-change in functions.php restores the
   rest state once a value is picked. */

.woocommerce div.product form.cart .variations select {
    box-sizing: border-box;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
    float: none;
    margin: 0;
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--line-medium);
    padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    box-shadow: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237FE0FF' stroke-width='1.2' fill='none' stroke-linecap='square'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    transition: border-color var(--transition-fast);
}

.woocommerce div.product form.cart .variations select:focus {
    outline: none;
    border-color: var(--accent-bright);
    box-shadow: var(--glow-cold);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 5l4 -4 4 4' stroke='%237FE0FF' stroke-width='1.2' fill='none' stroke-linecap='square'/></svg>");
}

/* "Clear" link removed - with M auto-selected and the user switching
   sizes by simply picking from the dropdown, this link is functionally
   redundant and visually clutters the value cell. */
.woocommerce div.product form.cart .reset_variations {
    display: none;
}


/* Printful's "Size Guide" anchor ships with an inline color: #1164A9
   which clashes with the cold-blue palette. Targeted via attribute
   selector since it carries no class. !important is required to
   beat the inline style declaration. The hover is a color shift
   only - no underline, no border. Affordance comes from the cyan
   color and the cursor: pointer the <a> already provides. */
.woocommerce div.product a[onclick*="Printful_Product_Size_Guide"] {
    display: inline-block;
    align-self: flex-start;
    margin-top: var(--space-sm);
    padding: 0;
    color: var(--accent) !important;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    transition: color var(--transition-fast);
}

.woocommerce div.product a[onclick*="Printful_Product_Size_Guide"]:hover {
    color: var(--accent-bright) !important;
}

.woocommerce div.product form.cart .single_variation_wrap {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
}

/* Hide the variation price inside form.cart - the static
   <p class="price"> slot in .summary is JS-synced with the selected
   variation (see isekoi_metalheart_sync_static_price_with_variation
   in functions.php), so duplicating the value here would create the
   doubled-display we just eliminated. The variation_wrap still
   shows availability and description, just not the price. */
.woocommerce div.product form.cart .single_variation .woocommerce-variation-price,
.woocommerce div.product form.cart .single_variation .woocommerce-variation-availability,
.woocommerce div.product form.cart .single_variation .woocommerce-variation-description {
    display: none;
}

.woocommerce div.product form.cart .stock {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.woocommerce div.product form.cart .stock.out-of-stock {
    color: var(--accent-warm);
}


/* --- Quantity + Add to Cart ---------------------------------------- */

.woocommerce div.product form.cart .variations_button,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-md);
    margin-top: var(--space-3xl);
    padding: 0 !important;
}

.woocommerce div.product form.cart .variations_button::before,
.woocommerce div.product form.cart .variations_button::after,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::before,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart::after {
    content: none !important;
    display: none !important;
}

/* Simple-product form (e.g. the poster): WC renders <form class="cart">
   with div.quantity and the Add to Cart button as DIRECT children - no
   .variations_button wrapper exists. Mirror the variation-form row so
   quantity + Add to Cart line up identically on every product type.
   The form.cart ::before/::after clearfix is already nuked above. */
.woocommerce div.product form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-md);
}

.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.woocommerce div.product form.cart .quantity .qty {
    width: 70px;
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--line-medium);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-align: center;
    border-radius: 0;
    box-shadow: none;
    appearance: auto;
    -moz-appearance: number-input;
    transition: border-color var(--transition-fast);
}

/* Restore the native +/- spinners on the quantity input. Storefront
   suppresses them globally; we re-enable them on this input only. */
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: auto;
    appearance: auto;
    opacity: 1;
    height: auto;
}

.woocommerce div.product form.cart .quantity .qty:focus {
    outline: none;
    border-color: var(--accent-bright);
    box-shadow: var(--glow-cold);
}

/* Add to Cart - warm orange treatment, mirrors .shop-cta from globals.
   This is one of the two D-006-authorized uses of --accent-warm
   (alongside the Place Order button on /checkout). */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.alt,
.woocommerce-page div.product form.cart .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background-color: transparent;
    border: 1px solid var(--accent-warm);
    color: var(--accent-warm);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    height: auto;
    line-height: 1.4;
    min-height: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button::before,
.woocommerce div.product form.cart .single_add_to_cart_button::after {
    content: none;
    display: none;
    border: none;
    box-shadow: none;
    background: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus,
.woocommerce-page div.product form.cart .single_add_to_cart_button:hover {
    background-color: rgba(255, 107, 53, 0.18) !important;
    color: var(--accent-warm) !important;
    border-color: var(--accent-warm) !important;
    text-shadow: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}


/* --- Product meta strip (categories, tags, SKU) -------------------- */

.woocommerce div.product .product_meta {
    margin-top: auto;     /* push meta to the bottom of the flex summary
                              so it docks at the gallery's lower edge when
                              the summary is stretched to match height. */
    padding-top: var(--space-md);
    border-top: 1px dashed var(--line-soft);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-transform: uppercase;
    line-height: 1.9;
}

/* SKU is operator-internal - the label "CF03" carries no value
   for a buyer and adds noise to the meta strip. The category
   stays (it gives the product context). Tags would also be hidden
   here if any are configured later, but they are not used at MVP. */
.woocommerce div.product .product_meta .sku_wrapper {
    display: none;
}

.woocommerce div.product .product_meta > span {
    display: block;
}

/* Color attribute value - matches the visual weight of the Category
   link (--text-secondary). The "Color:" label inherits --text-muted
   from the parent .product_meta. */
.woocommerce div.product .product_meta .color_wrapper .color {
    color: var(--text-bright);
}

.woocommerce div.product .product_meta a {
    color: var(--text-bright);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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


/* --- Tabs ----------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
    margin-top: var(--space-2xl);
    width: 100%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    border-bottom: 1px dashed var(--line-soft);
    background: transparent;
}

/* Storefront ships chamfered tab pseudo-elements + a border-color
   on .active that paints inside the tab text area. Reset them all
   across every interactive state so nothing residual remains. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:link,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:visited,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:focus {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    outline: none;
    transition: color var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--text-secondary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--accent-bright);
}

/* Active tab is signalled by the text color shift only
   (--text-bright vs --text-secondary). The dashed ul.tabs
   border-bottom carries the visual baseline; adding an extra
   solid-cyan ::after under the active anchor doubled up the
   underline visually. Plain text-color contrast is the cleanest
   read at this scale. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--text-bright);
}

.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0;
    padding: var(--space-md) 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.7;
}

/* The auto-emitted h2 inside each panel ("Description", "Additional
   information") duplicates the tab label - hide. */
.woocommerce div.product .woocommerce-tabs .panel > h2 {
    display: none;
}

.woocommerce div.product .woocommerce-tabs .panel p {
    margin: 0 0 var(--space-md);
}


/* --- Shop attributes table (.spec-row pattern) --------------------- */

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes,
.woocommerce div.product .woocommerce-tabs .panel table.woocommerce-product-attributes,
table.shop_attributes,
table.woocommerce-product-attributes {
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
    background: transparent;
}

table.shop_attributes tr,
table.woocommerce-product-attributes tr {
    border-bottom: 1px dashed var(--line-soft);
}

table.shop_attributes tr:last-child,
table.woocommerce-product-attributes tr:last-child {
    border-bottom: none;
}

table.shop_attributes th,
table.shop_attributes td,
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    vertical-align: top;
    font-style: normal;
    line-height: 1.5;
}

table.shop_attributes th,
table.woocommerce-product-attributes th {
    width: 30%;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

table.shop_attributes td,
table.woocommerce-product-attributes td {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--accent-bright);
    letter-spacing: 0.04em;
}

table.shop_attributes td p,
table.woocommerce-product-attributes td p {
    margin: 0;
}


/* --- Related products ---------------------------------------------- */

.woocommerce div.product .related,
.woocommerce-page div.product .related,
.related.products {
    margin-top: var(--space-3xl);
    padding-top: var(--space-md);
    width: 100%;
    position: relative;
}

.woocommerce div.product .related::before,
.related.products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

.woocommerce div.product .related > h2,
.woocommerce-page div.product .related > h2,
.related.products > h2 {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--text-bright);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Reuse the .shop-grid layout for related products. The cards
   themselves use .product-card markup via content-product.php so they
   inherit the catalog card styling automatically - chamfered frame,
   accent tab, hover state, all of it. */
.woocommerce .related ul.products,
.woocommerce-page .related ul.products,
.related ul.products {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.woocommerce .related ul.products::before,
.woocommerce .related ul.products::after,
.related ul.products::before,
.related ul.products::after {
    content: none;
    display: none;
}

.woocommerce .related ul.products > li.product,
.woocommerce-page .related ul.products > li.product,
.related ul.products > li.product {
    width: auto;
    margin: 0;
    float: none;
    clear: none;
}


/* --- Focus reset ---------------------------------------------------- */

/* Browser default focus rings (Chrome / Edge render them in a
   purple-blue glow) clash with the cold-blue MetalHeart palette.
   Two-step replacement:
     1. Kill the default outline + any text-decoration appearing on
        :focus or :active across all WC interactive elements.
     2. Restore a discreet cyan outline on :focus-visible only -
        keyboard navigation keeps a visible focus indicator,
        mouse clicks don't trigger it.
   Inputs / selects already get their focus state via border-color
   and --glow-cold (defined above), so they don't need an outline. */

.woocommerce a:focus,
.woocommerce a:active,
.woocommerce button:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page a:focus,
.woocommerce-page a:active,
.woocommerce-page button:focus,
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:active {
    outline: none;
    text-decoration: none;
}

/* Keyboard focus indicator only on inputs and the Add to Cart button -
   anywhere else the color shift on hover/active already conveys state.
   Tabs in particular: the active state is shown by --text-bright color
   and the cyan underline ::after, so an extra focus ring on the link
   double-marks it and visually conflicts with the underline. */
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
.woocommerce div.product form.cart .quantity .qty:focus-visible,
.woocommerce div.product form.cart .variations select:focus-visible {
    outline: 1px solid var(--accent-bright);
    outline-offset: 2px;
}


/* =====================================================================
   Phase 3 - Step 4.3 (v3): Cart page (WC Cart Block)
   ---------------------------------------------------------------------
   /cart restyle for the WooCommerce Cart block. Iteration v3 fixes
   five issues from the v2 visual review:

     1. Empty navy bars above and below items: caused by styling the
        .wc-block-components-notices wrapper (always emitted, often
        empty). Wrapper styling dropped; only the inner -notice-banner
        gets the visual treatment. Plus :empty { display: none } as a
        safety net on container-class slots.

     2. Sidebar stretched to match the (taller, with cross-sells)
        items column: align-items: start on the .wc-block-cart grid
        + align-self: start + height: fit-content on the sidebar
        breaks the equal-height behavior while preserving the sticky
        scroll effect (C2=A).

     3. Redundant "Basket Totals" heading above "Estimated Total":
        h2 hidden - the ESTIMATED TOTAL footer line in display font
        +  --accent-bright is the cartouche's own anchor and label.

     4. Cross-sells were globally hidden in v2; user wants them
        visible AND in the DA. display:none lifted, skinning applied:
        no list-style, image chamfered, title in display uppercase,
        price in mono --accent-bright, "Select options" CTA in cold
        blue minimal (mirrors the .btn pattern from /merch catalog).
        No full .module treatment - would compete with the items
        table; cross-sells stay calmer than the catalog itself.

     5. Typography too small / illegible across the board: full
        hierarchy bump. --text-muted (was used for variation meta and
        sidebar labels) lifted to --text-secondary for legibility.
        Cart item image bumped 80x80 → 140x140 and switched from
        object-fit: cover to contain (no crop on t-shirts), chamfer
        radius proportionally bumped 12px → 16px, column width
        96px → 160px.

   Organization preserved as-shipped by the block:
     - Two-column layout: items table left, sticky totals sidebar right
     - Each item row: thumbnail | (name + unit price + variation +
       quantity selector + trash icon) | line total
     - Sidebar: subtotals stack + Estimated total + (hidden) coupon
       + Proceed to Checkout CTA

   D-006 amendment to be recorded in 04-decisions-log.md at end of
   Step 4.3: --accent-warm now has THREE authorized uses on the shop
   (Add-to-Cart on /product, Proceed-to-Checkout on /cart, Place-Order
   on /checkout) instead of two.
   ===================================================================== */


/* --- D-025 preemptive pseudo nuke + empty wrapper safety ---------- */

.wp-block-woocommerce-cart::before,
.wp-block-woocommerce-cart::after,
.wp-block-woocommerce-filled-cart-block::before,
.wp-block-woocommerce-filled-cart-block::after,
.wp-block-woocommerce-cart-items-block::before,
.wp-block-woocommerce-cart-items-block::after,
.wp-block-woocommerce-cart-totals-block::before,
.wp-block-woocommerce-cart-totals-block::after {
    content: none;
    display: none;
}

/* The Cart block emits structural wrapper divs (notices container,
   order summary slots) that are often empty but still take layout
   space. Hide when truly empty so they don't show as styled
   placeholders. */
.wp-block-woocommerce-cart .wc-block-components-notices:empty,
.wp-block-woocommerce-cart .wc-block-components-notice-banner:empty,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block:empty,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block:empty {
    display: none !important;
}

/* =====================================================================
   Phase 3 — Step 4.3 (continued): Cart page header
   ---------------------------------------------------------------------
   Storefront's page.php template renders the page title in
   <header class="entry-header"><h1 class="entry-title">Cart</h1></header>
   above the page content. By default this is a large light-weight
   title with no decorative treatment.

   Re-skin to match the .module-head pattern from the hub: cyan
   accent line above (32px wide with --glow-cold), then Neuropol
   display uppercase white text. Same visual weight as the
   "RELATED PRODUCTS" heading on /product and the "YOU MAY BE
   INTERESTED IN" heading inside the cart cross-sells.

   Scoped to body.woocommerce-cart so other Storefront-templated
   pages keep their own .entry-title styles untouched (My Account,
   Order Received, Lost Password, etc.) — those will get their own
   pass when their respective steps are reached.
   ===================================================================== */

body.woocommerce-cart .entry-header {
    margin: 0 0 var(--space-2xl) 0;
    padding: 0;
    border: none;
    background: transparent;
}

body.woocommerce-cart .entry-header .entry-title {
    position: relative;
    margin: 0;
    padding: var(--space-lg) 0 var(--space-md) 0;
    border: none;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-bright);
    line-height: 1.2;
}

body.woocommerce-cart .entry-header .entry-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

/* --- Top-level cart container ------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.is-large,
.wp-block-woocommerce-cart.is-medium,
.wp-block-woocommerce-cart.is-small {
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
}


/* --- Two-column layout (items left, sidebar right) ---------------- */

/* align-items: start defeats the block's default stretch behavior so
   the sidebar matches its content height instead of growing to
   match the items column (which gets tall when cross-sells render). */
.wp-block-woocommerce-cart .wc-block-cart {
    background: transparent;
    margin: 0;
    padding: 0;
    align-items: start;
}

.wp-block-woocommerce-cart .wc-block-cart__main {
    background: transparent;
    padding-right: var(--space-xl);
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar {
    background: transparent;
    align-self: start;
    position: sticky;
    top: var(--space-lg);
}


/* --- Items table -------------------------------------------------- */

.wp-block-woocommerce-cart table.wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-cart-items {
    background: transparent;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

/* Header row PRODUCT / TOTAL - mono uppercase, dashed underline.
   Bumped to 0.75rem from 0.6875rem for legibility (per typo review). */
.wp-block-woocommerce-cart .wc-block-cart-items thead,
.wp-block-woocommerce-cart .wc-block-cart-items__header {
    background: transparent;
}

.wp-block-woocommerce-cart .wc-block-cart-items thead th,
.wp-block-woocommerce-cart .wc-block-cart-items__header th,
.wp-block-woocommerce-cart .wc-block-cart-items__header-image,
.wp-block-woocommerce-cart .wc-block-cart-items__header-product,
.wp-block-woocommerce-cart .wc-block-cart-items__header-total {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 400;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-bottom: 1px dashed var(--line-soft);
    background: transparent;
    text-align: left;
}

.wp-block-woocommerce-cart .wc-block-cart-items thead th:last-child,
.wp-block-woocommerce-cart .wc-block-cart-items__header th:last-child {
    text-align: right;
}


/* --- Cart item row ------------------------------------------------ */

.wp-block-woocommerce-cart tr.wc-block-cart-items__row,
.wp-block-woocommerce-cart .wc-block-cart-items__row {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--line-soft);
}

.wp-block-woocommerce-cart .wc-block-cart-items__row td,
.wp-block-woocommerce-cart tr.wc-block-cart-items__row td {
    padding: var(--space-md);
    border: none;
    background: transparent;
    vertical-align: top;
    color: var(--text-primary);
}


/* --- Item thumbnail (140x140 chamfered, contain) ------------------ */

/* Bumped from 80x80 (v2) to 140x140. Mobile sizes via grid override in ≤830px/≤480px. */
.wp-block-woocommerce-cart td.wc-block-cart-item__image,
.wp-block-woocommerce-cart .wc-block-cart-item__image {
    width: 140px;
    padding-right: var(--space-md);
}

.wp-block-woocommerce-cart .wc-block-cart-item__image a {
    display: block;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: transparent;
    border: none;
    border-radius: 0;
    clip-path: none;
    transition: opacity var(--transition-fast);
}

.wp-block-woocommerce-cart .wc-block-cart-item__image a:hover img {
    opacity: 0.85;
}


/* --- Item product info column ------------------------------------- */

.wp-block-woocommerce-cart td.wc-block-cart-item__product,
.wp-block-woocommerce-cart .wc-block-cart-item__product {
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
}

/* Product name - display font uppercase. Bumped 0.9375rem → 1.0625rem
   to match the new line-total weight on the right. */
.wp-block-woocommerce-cart .wc-block-components-product-name {
    color: var(--text-bright);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.wp-block-woocommerce-cart .wc-block-components-product-name:hover,
.wp-block-woocommerce-cart .wc-block-components-product-name:focus {
    color: var(--accent-bright);
    text-decoration: none;
}

/* Per-unit price under the product name. Bumped to 0.875rem and color
   lifted from --text-muted to --text-secondary for legibility. */
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-components-product-price {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.wp-block-woocommerce-cart .wc-block-components-product-price__value {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Variation meta ("Size: M") - mono small caps. Bumped 0.6875rem →
   0.8125rem and color lifted --text-muted → --text-secondary for
   legibility (the variation is real data, not a decorative stamp). */
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-components-product-details {
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.6;
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata__description,
.wp-block-woocommerce-cart .wc-block-components-product-details li {
    color: var(--text-secondary);
    margin: 0;
}

.wp-block-woocommerce-cart .wc-block-components-product-details li strong,
.wp-block-woocommerce-cart .wc-block-components-product-metadata strong {
    color: var(--text-muted);
    font-weight: 400;
}


/* --- Quantity selector (− / input / +) ---------------------------- */

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: stretch;
    margin: var(--space-sm) 0 0 0;
    border: 1px solid var(--line-medium);
    border-radius: 0;
    background-color: var(--bg-panel);
    width: auto;
    max-width: 140px;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector::after {
    content: none;
    display: none;
    border: none;
}

.wp-block-woocommerce-cart button.wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
    width: 32px;
    height: auto;
    min-width: 32px;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.wp-block-woocommerce-cart button.wc-block-components-quantity-selector__button:hover,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    color: var(--accent-bright);
    background-color: rgba(125, 224, 255, 0.06);
}

.wp-block-woocommerce-cart button.wc-block-components-quantity-selector__button:focus,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:focus {
    outline: none;
    color: var(--accent-bright);
}

.wp-block-woocommerce-cart button.wc-block-components-quantity-selector__button[disabled],
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.wp-block-woocommerce-cart input.wc-block-components-quantity-selector__input,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
    width: 48px;
    background-color: transparent;
    color: var(--text-primary);
    border: none;
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    padding: var(--space-xs) 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-align: center;
    border-radius: 0;
    box-shadow: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.wp-block-woocommerce-cart input.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wp-block-woocommerce-cart input.wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.wp-block-woocommerce-cart input.wc-block-components-quantity-selector__input:focus {
    outline: none;
    color: var(--accent-bright);
    background-color: transparent;
}


/* --- Trash icon (remove item) ------------------------------------- */

/* Trash + quantity alignment.
   Confirmed parent from DOM inspection (WC 9.x cart block):
     <div class="wc-block-cart-item__quantity">
       <div class="wc-block-components-quantity-selector">...</div>
       <button class="wc-block-cart-item__remove-link">...</button>
     </div>
   The block already sets this parent to display: flex but leaves
   align-items at its default (stretch/start), so the two children sit
   at different vertical positions because their natural heights
   differ. Centering the cross axis fixes it cleanly. Gap controls the
   horizontal spacing between qty and trash. */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: nowrap;
}

/* Normalize both children to the same explicit height so the centered
   alignment lands on a clean grid (avoids subpixel offsets from the
   input's default browser height vs. the trash button's intrinsic
   height). 32px matches the trash icon hit target and reads as a
   coherent control row. */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    margin: 0;
    height: 32px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

/* Trash button: force 32x32 to match the quantity stepper height,
   then size + center the SVG inside. The visible trash glyph in WC's
   default SVG spans y=2.7 to y=20.1 within a 0..24 viewBox — i.e. its
   visual center is at y=11.4, not y=12. That ~0.6 unit asymmetry,
   scaled up to the button's pixel size, plus the button being natively
   24x24 (smaller than the 32px stepper), is what produces the empty
   space under the trash icon the user sees. Two fixes combined:
     1. Force the button itself to 32x32 (with !important to defeat
        any WC-default rule that wins the cascade — confirmed needed
        from the dev-tools showing the button rendered as 24x24).
     2. Sit the 18x18 SVG inside, with a transform: translateY()
        compensating for the asymmetric internal whitespace so the
        visible glyph lands on the button's geometric center. */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity > .wc-block-cart-item__remove-link,
.wp-block-woocommerce-cart .wc-block-cart-item__quantity > button.wc-block-cart-item__remove-link {
    box-sizing: border-box;
    width: 32px !important;
    height: 32px !important;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wp-block-woocommerce-cart .wc-block-cart-item__quantity > .wc-block-cart-item__remove-link > svg,
.wp-block-woocommerce-cart .wc-block-cart-item__quantity > button.wc-block-cart-item__remove-link > svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transform: translateY(0.6px);
}

.wp-block-woocommerce-cart button.wc-block-cart-item__remove-link,
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.wp-block-woocommerce-cart button.wc-block-cart-item__remove-link:hover,
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: var(--accent-warm);
    border-color: var(--accent-warm);
    background: transparent;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.wp-block-woocommerce-cart a.wc-block-cart-item__remove-link {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.wp-block-woocommerce-cart a.wc-block-cart-item__remove-link:hover {
    color: var(--accent-warm);
}


/* --- Line total (right column) ------------------------------------ */

/* Bumped from 0.9375rem → 1.0625rem to match product name weight on
   the left and read as the per-line answer the customer scans down. */
.wp-block-woocommerce-cart td.wc-block-cart-item__total,
.wp-block-woocommerce-cart .wc-block-cart-item__total {
    text-align: right;
    vertical-align: top;
    padding-top: var(--space-md);
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge .wc-block-components-formatted-money-amount {
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--accent-bright);
}


/* --- Sidebar (totals cartouche) ----------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-components-sidebar {
    background-color: var(--bg-panel);
    border: 1px solid var(--line-medium);
    padding: var(--space-lg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-radius: 0;
    height: fit-content;
}

/* "Basket totals" / "Cart totals" h2: hidden. The ESTIMATED TOTAL
   footer item is the cartouche's own anchor and label - a separate
   heading above is redundant and creates a double-line stack. */
.wp-block-woocommerce-cart .wc-block-components-sidebar h2,
.wp-block-woocommerce-cart .wc-block-cart__sidebar h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
    display: none;
}


/* --- Sidebar totals stack (Subtotal / Fee / Tax / etc.) ----------- */

.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 var(--space-sm) 0;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item {
    background: transparent;
    border: none;
    padding: var(--space-xs) 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__label {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    text-align: right;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__description {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}


/* --- Estimated total (footer item) - page anchor ------------------ */

/* Per arbitration C1=A: keep "Estimated total" wording. Visual weight
   does the anchoring (display 1.75rem, --accent-bright, --glow-cold);
   the label semantics stay honest about un-calculated shipping. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-footer-item {
    border-top: 1px dashed var(--line-soft);
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    align-items: baseline;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--text-bright);
    text-transform: uppercase;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--accent-bright);
    text-shadow: var(--glow-cold);
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item-tax {
    width: 100%;
    margin-top: var(--space-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}


/* --- Coupon panel (hidden per C3=A) ------------------------------- */

.wp-block-woocommerce-cart .wc-block-components-totals-coupon,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    display: none;
}

/* --- Cross-sells --------------------------------------------------- */

/* The Cart block's native Product Collection output is replaced in
   functions.php with the canonical content-product.php card template.
   This CSS only keeps the section spacing and heading chrome.

   Generous top margin, NO border-top: the dashed border-top was
   creating a redundant rule with the one already drawn by the
   last cart row's border-bottom (every
   tr.wc-block-cart-items__row has the same dashed border-bottom).
   Two parallel dashed lines ~80px apart read as a layout error.
   The cross-sells block announces its own break visually via the
   cyan accent line + Neuropol heading — no extra separator needed
   above. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] {
    margin-top: var(--space-3xl);
    padding-top: 0;
    border-top: none;
    background: transparent;
}

/* Bottom-margin on the items table — symmetric breathing space if a
   future Gutenberg edit inserts content between items and cross-
   sells. The block itself collapses adjacent margins, so this also
   contributes to the visible gap above the cross-sells separator. */
.wp-block-woocommerce-cart table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
    margin-bottom: var(--space-lg);
}

/* "You may be interested in..." heading.
   Confirmed from cart-dom.html: <h2 class="wp-block-heading
   has-text-align-left" style="margin-bottom: 1rem">. The <h2> is a
   direct child of the .wp-block-woocommerce-product-collection
   wrapper for the cross-sells.

   Cascade challenge: the Cart block injects its own CSS in <head>:
       .wp-block-woocommerce-product-collection h2.wp-block-heading {
           font-size: var(--wp--preset--font-size--small, 14px);
           line-height: 1.4;
       }
   Our rule has equivalent specificity (0,1,2) but loads in our child
   stylesheet which is enqueued via wp_enqueue_style — meaning it
   loads AFTER the block's <head>-injected CSS. So source order
   should win. If for any reason the cascade still loses (some WC
   builds inject the block CSS late), the [data-collection] selector
   is a specificity bump (0,2,2) that beats the block's own selector
   without needing !important on every property.

   Inline style="margin-bottom: 1rem" on the <h2> still requires
   !important on margin-bottom — that's one of the only ways to
   beat an inline style from a stylesheet. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] > h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] > h2.wp-block-heading {
    position: relative;
    display: block;
    margin: 0 0 var(--space-xl) 0 !important;
    padding: var(--space-md) 0 0 0;
    border: none;
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-bright);
    text-align: left !important;
    line-height: 1.3;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] > h2::before,
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"] > h2.wp-block-heading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}


/* --- Cross-sell product suggestions ------------------------------- */

/* functions.php replaces the Product Collection cross-sell output with
   content-product.php. Keep only the wrapper reset here; the card
   layout and visuals come from the canonical .product-card rules. */
.wp-block-woocommerce-cart .isekoi-cart-cross-sell-product-cards {
    margin: 0;
    padding: 0;
    background: transparent;
}

.wp-block-woocommerce-cart .isekoi-cart-cross-sell-product-cards > ul.products.shop-grid {
    width: 100%;
}

/* --- Proceed to Checkout CTA -------------------------------------- */

/* Warm orange treatment, mirrors .single_add_to_cart_button on /product.
   Third D-006-authorized use of --accent-warm on the shop, alongside
   Add-to-Cart on /product and Place-Order on /checkout (Step 4.4).
   D-006 amendment to be recorded in 04-decisions-log.md at end of
   Step 4.3. */
.wp-block-woocommerce-cart .wc-block-cart__submit,
.wp-block-woocommerce-cart .wc-block-cart__submit-container {
    margin-top: var(--space-md);
    padding: 0;
    background: transparent;
    border: none;
}

/* --sticky is a JS class WC adds on scroll — neutralise it so the button
   looks identical regardless of scroll position */
.wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky::before {
    display: none !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    background-color: transparent;
    border: 1px solid var(--accent-warm);
    color: var(--accent-warm);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    height: auto;
    line-height: 1.4;
    min-height: 0;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button::before,
.wp-block-woocommerce-cart .wc-block-cart__submit-button::after,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link::before,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link::after {
    content: none;
    display: none;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link:hover {
    background-color: var(--accent-warm);
    color: var(--bg-deep);
    border-color: var(--accent-warm);
    box-shadow: var(--glow-warm);
    text-shadow: none;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button[disabled],
.wp-block-woocommerce-cart .wc-block-cart__submit-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* --- PayPal Pay Later messaging block (when present) -------------- */

/* PayPal Payments injects a "Pay Later messaging" block in the sidebar.
   Disabled per D-017 but may surface as a placeholder in the editor.
   Style minimally to avoid breaking the cartouche if it appears in
   production after Phase 4. */
.wp-block-woocommerce-cart .wc-block-components-payment-method-icons,
.wp-block-woocommerce-cart .ppcp-messages,
.wp-block-woocommerce-cart .wc-block-components-paypal-message {
    margin: var(--space-sm) 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}


/* --- Empty cart state --------------------------------------------- */

/* Confirmed from empty-cart-dom.html: the empty cart native block renders as

     .wp-block-woocommerce-empty-cart-block
       ├── h2.with-empty-cart-icon.wc-block-cart__empty-cart__title
       │     "Your basket is currently empty!" (with a generic
       │      smiley icon injected by the block's own CSS)
       ├── p.has-text-align-center > a "Browse store"
       ├── hr.is-style-dots
       ├── h2.wp-block-heading.has-text-align-center  "New in store"
       └── div.wp-block-product-new.has-4-columns
             └── ul.wc-block-grid__products
                   └── li.wc-block-grid__product (× N)

   The native Product New block markup is replaced in functions.php
   on the empty cart only, using the canonical content-product.php
   template. The suggestions therefore render as real .product-card
   items, matching /merch and /product Related Products.

   Prior iteration's max-width: 520px frame on the whole empty-cart
   block was squeezing the 4-column grid into ~80px columns with
   vertical-text labels — fixed by letting the block flow at content
   width, with only the message + CTA at the top capped narrow. */


/* --- Section wrapper: full width, transparent, no frame --------- */

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block,
.wp-block-woocommerce-cart .wc-block-cart__empty-cart {
    margin: var(--space-2xl) 0;
    padding: 0;
    max-width: none;
    background: transparent;
    border: none;
    text-align: left;
}


/* --- Empty cart title "Your basket is currently empty!" -------- */

/* Hide the WC default smiley icon injected via .with-empty-cart-icon
   ::before. The icon doesn't fit the industrial/blueprint DA — the
   message itself, in display font centered, carries the alert
   semantics cleanly without needing a decorative graphic. */
.wp-block-woocommerce-cart .with-empty-cart-icon::before,
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title::before,
.wp-block-woocommerce-cart h2.with-empty-cart-icon::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Also hide it if injected as a <span> or pseudo on the heading
   inner content. Some WC builds use a different injection point. */
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title .wc-block-cart-empty-cart-icon,
.wp-block-woocommerce-cart .wc-block-cart__empty-cart-icon {
    display: none !important;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:first-child,
.wp-block-woocommerce-cart h2.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-cart h2.with-empty-cart-icon {
    margin: var(--space-2xl) auto var(--space-md) auto !important;
    padding: var(--space-md) 0 0 0;
    max-width: 600px;
    border: none;
    background: transparent;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    position: relative;
}


/* --- "Browse store" CTA ------------------------------------------ */

/* Currently rendered as <p class="has-text-align-center"><a>Browse
   store</a></p>. Style the <a> as the cold-blue .btn pattern
   (matches DETAILS → and the catalog filter buttons). */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p.has-text-align-center,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p {
    text-align: center !important;
    margin: 0 auto var(--space-2xl) auto;
    padding: 0;
    max-width: 600px;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p > a,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p a[href] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background-color: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    box-shadow: none;
    transition: all var(--transition-normal);
    line-height: 1.4;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p > a::after,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p a[href]::after {
    content: " →";
    display: inline;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p > a:hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > p a[href]:hover {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    background-color: rgba(125, 224, 255, 0.06);
    box-shadow: var(--glow-cold);
}


/* --- Separator (.wp-block-separator.is-style-dots) --------------- */

/* Replace the block's dotted separator with our dashed --line-soft
   convention used everywhere else on the cart page. */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > hr,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > hr.wp-block-separator,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > hr.is-style-dots {
    margin: var(--space-2xl) 0;
    padding: 0;
    border: none;
    border-top: 1px dashed var(--line-soft);
    height: 0;
    background: transparent;
    opacity: 1;
}

/* The block's default dotted style uses ::before/::after with
   middle-dots characters. Neutralise. */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > hr.is-style-dots::before,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > hr.is-style-dots::after {
    content: none !important;
    display: none !important;
}


/* --- "New in store" heading (.module-head pattern) --------------- */

/* Mirrors the "YOU MAY BE INTERESTED IN..." heading in the filled
   cart cross-sells: cyan accent line above, Neuropol display
   uppercase white, left-aligned. Same visual contract across all
   shop section headings (cart cross-sells, /product Related, here). */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(:first-child),
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.with-empty-cart-icon):not(.wc-block-cart__empty-cart__title) {
    position: relative;
    display: block;
    margin: 0 0 var(--space-xl) 0 !important;
    padding: var(--space-md) 0 0 0;
    border: none;
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-bright);
    text-align: left !important;
    line-height: 1.3;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(:first-child)::before,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.with-empty-cart-icon):not(.wc-block-cart__empty-cart__title)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}


/* --- Empty-cart product suggestions ------------------------------ */

/* functions.php replaces the Product New block output with
   content-product.php. Keep only the block wrapper reset here; the
   card layout and visuals come from the canonical .product-card rules. */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .isekoi-empty-cart-product-cards {
    margin: 0;
    padding: 0;
    background: transparent;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .isekoi-empty-cart-product-cards > ul.products.shop-grid {
    width: 100%;
}


/* --- Block notices (added/removed item, errors) ------------------- */

/* Only the rendered notice banner gets the chrome - the wrapper
   .wc-block-components-notices is left transparent so its empty
   instances don't appear as styled placeholder bars (v2 bug fix). */
.wp-block-woocommerce-cart .wc-block-components-notice-banner {
    background-color: var(--bg-panel);
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: var(--space-lg);
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-error {
    border-left-color: var(--accent-warm);
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner a {
    color: var(--accent);
    text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner a:hover {
    color: var(--accent-bright);
}


/* =====================================================================
   Topbar — brand logo
   ===================================================================== */

.brand-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(125, 224, 255, 0.35));
    transition: filter var(--transition-fast);
}

.brand:hover .brand-logo,
.brand:focus .brand-logo {
    filter: drop-shadow(0 0 10px rgba(61, 168, 255, 0.7)) sepia(1) saturate(4) hue-rotate(175deg) brightness(1.1);
}

.brand > span {
    font-family: 'TR-909', var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}


/* =====================================================================
   Topbar — cart link
   ---------------------------------------------------------------------
   Shopping bag icon + count badge in the topbar-right section.
   The badge is hidden when the cart is empty (data-count="0") and
   lights up in accent cyan when at least one item is present.
   WC's cart-fragments.js keeps the count in sync via AJAX
   (woocommerce_add_to_cart_fragments filter in functions.php).
   ===================================================================== */

/* .account-link and .cart-link share the exact same anatomy; the
   declarations are merged so the two controls can never drift apart. */
.account-link,
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    text-decoration: none;
    margin-right: var(--space-md);
    transition: color var(--transition-fast);
}

.account-link:hover,
.account-link:focus,
.cart-link:hover,
.cart-link:focus {
    color: var(--accent-bright);
    outline: none;
}

.account-link__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.cart-link__icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.cart-link__icon {
    width: 24px;
    height: 24px;
}

.account-link__label,
.cart-link__label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

.cart-link__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-deep);
    border: 1px solid var(--accent);
    box-shadow: var(--glow-cold);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    border-radius: 2px;
}

.cart-link__count[data-count="0"] {
    display: none;
}


/* =====================================================================
   Step 4.4 — Checkout page (WC Checkout Block)
   CSS-only, no template override (D-034 pattern extended).
   Scoped under .wp-block-woocommerce-checkout / .wc-block-checkout
   ===================================================================== */

/* ------------------------------------------------------------------
   Layout — WC's native flex + :has(row-reverse) already places form
   left and sidebar right. We only need align-items: flex-start so the
   sidebar doesn't stretch to the form height.
   ------------------------------------------------------------------ */

.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.is-large {
    align-items: flex-start;
}

/* Suppress empty notices/snackbar wrappers */
.wp-block-woocommerce-checkout .wc-block-components-notices:empty,
.wp-block-woocommerce-checkout .wc-block-components-notices__snackbar:empty {
    display: none;
}

/* ------------------------------------------------------------------
   Sidebar — Order summary (right column)
   ------------------------------------------------------------------ */

.wp-block-woocommerce-checkout .wc-block-components-sidebar {
    background: var(--bg-panel);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--line-medium);
    padding: var(--space-lg);
    height: fit-content;
}

/* WC emits its own border/padding on the inner order-summary block;
   reset it to avoid a double-border with our sidebar panel. */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
    padding: 0 0 var(--space-md) 0 !important;
}

/* "Order summary" accordion header */
.wc-block-components-checkout-order-summary__title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-bottom: var(--space-md);
    border-bottom: 1px dashed var(--line-soft);
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.wc-block-components-checkout-order-summary__title-text {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-bright);
    margin: 0;
    flex: 1;
}

.wc-block-components-checkout-order-summary__title-price {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--accent-bright);
}

.wc-block-components-checkout-order-summary__title-icon svg {
    color: var(--text-secondary);
    width: 20px;
    height: 20px;
}

/* Order summary line items — don't override WC's layout, only style */
.wc-block-components-order-summary-item {
    padding: var(--space-sm) 0;
    border-bottom: 1px dashed var(--line-soft);
    border-top: none;
    background: transparent;
}

.wc-block-components-order-summary-item:last-child {
    border-bottom: none;
}

.wc-block-components-order-summary-item__image img {
    object-fit: contain;
    background: transparent;
}

.wc-block-components-order-summary-item__quantity {
    background: var(--bg-deep);
    border: 1px solid var(--accent);
    box-shadow: var(--glow-cold);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 2px;
}

.wc-block-components-product-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-bright);
    margin: 0 0 var(--space-xs);
}

/* Per-item unit price */
.wc-block-components-order-summary-item__individual-price,
.wc-block-components-order-summary-item__individual-prices .wc-block-formatted-money-amount {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Variation meta (Color, Size) */
.wc-block-components-product-details__name,
.wc-block-components-product-details__value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Line item total */
.wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--accent-bright);
}

/* Totals rows */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
    margin: 0;
    padding: 0;
    border: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:empty {
    display: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-sm) 0;
    border: none;
    background: transparent;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value * {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* "Total" footer row */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--line-medium);
    padding-top: var(--space-md);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item-tax-value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value * {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--accent-bright);
    text-shadow: var(--glow-cold);
}

/* ------------------------------------------------------------------
   Form — section layout
   Each .wc-block-components-checkout-step gets a dashed separator
   above it. The first section (Contact information) gets none.
   ------------------------------------------------------------------ */

.wc-block-checkout__form fieldset.wc-block-components-checkout-step,
.wc-block-checkout__form div.wc-block-components-checkout-step {
    border: none;
    border-top: 1px dashed var(--line-soft);
    margin: 0;
    padding: var(--space-xl) 0 0;
    min-inline-size: 0;
}

.wc-block-checkout__form .wp-block-woocommerce-checkout-contact-information-block {
    border-top: none !important;
    padding-top: 0 !important;
}

.wc-block-checkout__payment-method.wc-block-components-checkout-step {
    padding-bottom: var(--space-lg) !important;
}

/* ------------------------------------------------------------------
   Form — step headings (Tier 2: 1.125rem / 0.16em / blue accent line)
   ------------------------------------------------------------------ */

/* Reset any WC step-counter pseudo */
.wc-block-checkout .wc-block-components-checkout-step {
    counter-increment: none;
}

.wc-block-checkout .wc-block-components-checkout-step__heading-container::before {
    display: none !important;
}

.wc-block-checkout .wc-block-components-checkout-step__heading-container {
    margin-bottom: var(--space-lg);
}

.wc-block-checkout .wc-block-components-checkout-step__title {
    position: relative;
    font-family: var(--font-mono) !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--text-bright) !important;
    padding: var(--space-md) 0 0 !important;
    margin: 0 !important;
}

.wc-block-checkout .wc-block-components-checkout-step__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-lg);
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

/* Empty step indicator span */
.wc-block-components-checkout-step__heading-content {
    display: none;
}

/* ------------------------------------------------------------------
   Form — text inputs (floating-label pattern)
   WC controls the float animation via .is-active on the parent div.
   We restyle colors and borders, preserving the animation.
   ------------------------------------------------------------------ */

.wp-block-woocommerce-checkout .wc-block-components-text-input {
    margin-bottom: var(--space-sm);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="password"] {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="password"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input[aria-invalid="true"] {
    border-color: var(--accent-warm) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label {
    font-family: var(--font-mono) !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label {
    color: var(--accent) !important;
}

/* ------------------------------------------------------------------
   Form — textarea (order notes)
   ------------------------------------------------------------------ */

.wp-block-woocommerce-checkout .wc-block-components-textarea {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
    outline: none;
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

/* ------------------------------------------------------------------
   Form — country/region select
   ------------------------------------------------------------------ */

.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select__select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
    outline: none;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select__expand {
    color: var(--text-secondary);
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Form — "Add apartment, suite, etc." toggle
   ------------------------------------------------------------------ */

.wc-block-components-address-form__address_2-toggle {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.wc-block-components-address-form__address_2-toggle:hover {
    color: var(--accent-bright);
}

/* ------------------------------------------------------------------
   Form — address card (collapsed / "Edit" state)
   ------------------------------------------------------------------ */

.wc-block-components-address-card {
    background: var(--bg-elevated);
    border: 1px solid var(--line-soft);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.wc-block-components-address-card address {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: normal;
}

.wc-block-components-address-card__edit {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.wc-block-components-address-card__edit:hover {
    color: var(--accent-bright);
}

/* ------------------------------------------------------------------
   Form — payment options (radio accordion)
   ------------------------------------------------------------------ */

.wc-block-components-radio-control {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wc-block-components-radio-control-accordion-option {
    border: 1px solid var(--line-soft);
    background: var(--bg-elevated);
    transition: border-color var(--transition-fast);
}

.wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
    border-top: none;
    margin-top: 0;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--accent);
}

.wc-block-components-radio-control__option {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.wc-block-components-radio-control__input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid var(--line-medium);
    border-radius: 50%;
    background: var(--bg-elevated);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wc-block-components-radio-control__input[type="radio"]:checked {
    border-color: var(--accent) !important;
    background: var(--bg-elevated) !important;
    box-shadow: 0 0 0 1px var(--accent), var(--glow-cold) !important;
}

/* WC's ::before = the center dot (black by default) — recolor to accent, resize to 8px */
.wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:checked::before {
    background: var(--accent) !important;
    width: 8px !important;
    height: 8px !important;
    display: block !important;
}

.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-bright);
}

.wc-block-components-radio-control-accordion-content {
    padding: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px dashed var(--line-soft);
}

/* ------------------------------------------------------------------
   Form — order notes (checkbox toggle)
   ------------------------------------------------------------------ */

.wc-block-checkout__order-notes {
    border-top: 1px dashed var(--line-soft);
    padding-top: var(--space-lg);
    /* .wc-block-components-checkout-step padding-top already applied above;
       explicit override to match the sections without step heading */
    padding-top: var(--space-lg) !important;
}

.wc-block-components-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-elevated);
    border: 1px solid var(--line-medium);
    border-radius: 2px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    cursor: pointer;
    position: static;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' stroke='%23000b1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 70% no-repeat !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), var(--glow-cold) !important;
}

/* Hide WC's SVG mark — the check is now a CSS background-image, always centered */
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
    display: none !important;
}

.wc-block-components-checkbox__label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.wc-block-components-checkbox.wc-block-checkout__create-account {
    padding: var(--space-sm);
}

.wc-block-components-address-form-wrapper {
    padding-bottom: var(--space-sm);
}

/* ------------------------------------------------------------------
   Form — terms
   ------------------------------------------------------------------ */

.wc-block-checkout__terms {
    padding: var(--space-md) 0;
    border-top: 1px dashed var(--line-soft);
    margin-top: var(--space-md);
}

.wc-block-checkout__terms > span,
.wc-block-checkout__terms .wc-block-components-checkbox__label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Form — actions row (Return to Cart + Place Order)
   ------------------------------------------------------------------ */

.wc-block-checkout__actions_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--line-soft);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.wc-block-components-checkout-return-to-cart-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--accent);
}

.wc-block-components-checkout-return-to-cart-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Place Order — warm orange (third D-006-authorized use, per D-032) */
.wc-block-components-checkout-place-order-button {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    color: var(--accent-warm) !important;
    background: transparent !important;
    border: 1px solid var(--accent-warm) !important;
    border-radius: 0 !important;
    padding: var(--space-sm) var(--space-xl) !important;
    min-width: 160px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
    background: var(--accent-warm) !important;
    color: var(--bg-deep) !important;
    box-shadow: var(--glow-warm) !important;
    outline: none !important;
}

/* WC nests the button label inside two wrapper divs */
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}


/* =====================================================================
   Step 4.4b — Order received / Thank you page
   Scoped to body.woocommerce-order-received
   Classic WC template (thankyou.php) — not a Block.
   ===================================================================== */

/* ------------------------------------------------------------------
   Page title — force Tier 1 spec + blue accent line
   ------------------------------------------------------------------ */

.woocommerce-order-received .entry-title {
    font-family: var(--font-mono) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--text-bright) !important;
    line-height: 1.2;
    position: relative;
    margin: 0;
    padding: var(--space-lg) 0 var(--space-md) 0 !important;
    border: none !important;
}

.woocommerce-order-received .entry-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

/* ------------------------------------------------------------------
   Success notice
   ------------------------------------------------------------------ */

.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: var(--text-bright);
    border-left: 2px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    margin: 0 0 var(--space-xl);
}

/* ------------------------------------------------------------------
   Order overview strip — kill Storefront/WC zigzag decoration
   ------------------------------------------------------------------ */

.woocommerce-order-received .woocommerce-order-overview,
.woocommerce-order-received ul.order_details {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 var(--space-xl) !important;
    padding: 0 !important;
    border: 1px solid var(--line-soft);
    background: var(--bg-panel) !important;
    background-image: none !important;
    backdrop-filter: blur(8px);
}

.woocommerce-order-received .woocommerce-order-overview::before,
.woocommerce-order-received .woocommerce-order-overview::after,
.woocommerce-order-received ul.order_details::before,
.woocommerce-order-received ul.order_details::after {
    display: none !important;
    content: none !important;
}

.woocommerce-order-received .woocommerce-order-overview li {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: var(--space-md) var(--space-lg) !important;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-bright);
    background: transparent !important;
}

/* Right column: no right border */
.woocommerce-order-received .woocommerce-order-overview li:nth-child(even) {
    border-right: none;
}

/* Last row: no bottom border (the ul already draws its own) */
.woocommerce-order-received .woocommerce-order-overview li:nth-last-child(-n+2) {
    border-bottom: none;
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-bright);
}

.woocommerce-order-received .woocommerce-order-overview__total strong {
    color: var(--accent-bright);
    font-size: 1rem;
}

/* ------------------------------------------------------------------
   Section headings — Tier 2 + blue accent line
   ------------------------------------------------------------------ */

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
    position: relative;
    font-family: var(--font-mono) !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--text-bright) !important;
    margin: 0 0 var(--space-md) !important;
    padding: var(--space-md) 0 0 !important;
    border: none !important;
}

.woocommerce-order-received .woocommerce-order-details__title::before,
.woocommerce-order-received .woocommerce-column__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

/* ------------------------------------------------------------------
   Order details table
   ------------------------------------------------------------------ */

.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-view-order .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    margin-bottom: var(--space-xl);
    background: transparent !important;
}

/* Kill Storefront alternating row background */
.woocommerce-order-received .woocommerce-table--order-details tbody tr td,
.woocommerce-order-received .woocommerce-table--order-details tbody tr:nth-child(2n) td {
    background: transparent !important;
}

.woocommerce-order-received .woocommerce-table--order-details thead th,
.woocommerce-view-order .woocommerce-table--order-details thead th {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-bright);
    font-weight: 400;
    padding: 0 0 var(--space-sm);
    border-bottom: 1px dashed var(--line-soft);
    background: transparent !important;
}

.woocommerce-order-received .woocommerce-table--order-details thead .product-total,
.woocommerce-view-order .woocommerce-table--order-details thead .product-total {
    text-align: right;
}

.woocommerce-order-received .woocommerce-table--order-details tbody tr,
.woocommerce-view-order .woocommerce-table--order-details tbody tr {
    border-bottom: 1px dashed var(--line-soft);
}

.woocommerce-order-received .woocommerce-table--order-details tbody td,
.woocommerce-view-order .woocommerce-table--order-details tbody td {
    padding: var(--space-sm) 0;
    color: var(--text-bright);
    background: transparent !important;
}

.woocommerce-order-received .woocommerce-table--order-details .product-name a,
.woocommerce-view-order .woocommerce-table--order-details .product-name a {
    color: var(--text-bright);
    text-decoration: none;
}

.woocommerce-order-received .woocommerce-table--order-details .product-name a:hover,
.woocommerce-view-order .woocommerce-table--order-details .product-name a:hover {
    color: var(--accent-bright);
}

.woocommerce-order-received .woocommerce-table--order-details .product-quantity,
.woocommerce-view-order .woocommerce-table--order-details .product-quantity {
    color: var(--text-bright);
    font-weight: 400;
}

.woocommerce-order-received .woocommerce-table--order-details .product-total,
.woocommerce-view-order .woocommerce-table--order-details .product-total {
    text-align: right;
    color: var(--accent-bright);
}

/* Tfoot */
.woocommerce-order-received .woocommerce-table--order-details tfoot,
.woocommerce-view-order .woocommerce-table--order-details tfoot {
    border-top: 1px solid var(--line-medium);
}

.woocommerce-order-received .woocommerce-table--order-details tfoot tr + tr,
.woocommerce-view-order .woocommerce-table--order-details tfoot tr + tr {
    border-top: 1px dashed var(--line-soft);
}

.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-view-order .woocommerce-table--order-details tfoot th {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
    font-weight: 400;
    padding: var(--space-xs) 0;
    background: transparent !important;
    text-align: left;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot td,
.woocommerce-view-order .woocommerce-table--order-details tfoot td {
    color: var(--text-bright);
    text-align: right;
    padding: var(--space-xs) 0;
    background: transparent !important;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot .woocommerce-Price-amount,
.woocommerce-view-order .woocommerce-table--order-details tfoot .woocommerce-Price-amount {
    color: var(--accent-bright);
}

/* ------------------------------------------------------------------
   Billing address
   ------------------------------------------------------------------ */

.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-view-order .woocommerce-customer-details {
    margin-top: var(--space-xl);
}

.woocommerce-order-received .woocommerce-customer-details address,
.woocommerce-view-order .woocommerce-customer-details address {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-style: normal;
    color: var(--text-bright);
    line-height: 1.8;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--line-soft);
    background: var(--bg-panel) !important;
}

.woocommerce-order-received .woocommerce-customer-details--email,
.woocommerce-view-order .woocommerce-customer-details--email {
    margin: var(--space-xs) 0 0;
    color: var(--text-bright);
}

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-view-order .woocommerce-order-details {
    margin-top: var(--space-xl);
}

/* mark.order-number/date/status - browsers default these to background: yellow, color: black */
body.woocommerce-account mark.order-number,
body.woocommerce-account mark.order-date,
body.woocommerce-account mark.order-status {
    background: transparent;
    color: var(--text-bright);
    font-family: var(--font-mono);
}


/* =====================================================================
   Step 4.5 — My Account pages
   Scoped to body.woocommerce-account
   Classic WC templates (myaccount/) — not Blocks.
   ===================================================================== */

/* ------------------------------------------------------------------
   Page title — Tier 1 spec per D-035
   ------------------------------------------------------------------ */

body.woocommerce-account .entry-title {
    font-family: var(--font-mono) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--text-bright) !important;
    line-height: 1.2;
    position: relative;
    margin: 0;
    padding: var(--space-lg) 0 var(--space-md) 0 !important;
    border: none !important;
}

body.woocommerce-account .entry-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

/* ------------------------------------------------------------------
   Nav sidebar
   box-sizing: border-box prevents the border from pushing the nav
   beyond its Storefront-set 30% float width and overlapping content.
   ------------------------------------------------------------------ */

body.woocommerce-account .woocommerce-MyAccount-navigation {
    box-sizing: border-box;
    background: var(--bg-panel);
    border: 1px solid var(--line-soft);
    padding: var(--space-md);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
    text-decoration: none;
    padding: var(--space-md);
    border-left: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a::before {
    color: var(--text-bright);
    opacity: 1;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover {
    color: var(--accent);
    border-left-color: var(--accent);
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover::before {
    color: var(--accent);
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--accent-bright);
    border-left-color: var(--accent);
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a::before {
    color: var(--accent-bright);
}

/* ------------------------------------------------------------------
   Content area
   ------------------------------------------------------------------ */

body.woocommerce-account .woocommerce-MyAccount-content {
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* ------------------------------------------------------------------
   Info / notice banners
   ------------------------------------------------------------------ */

body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-sm) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--line-soft) !important;
    border-left: 1px solid var(--line-soft) !important;
    border-radius: 0 !important;
    background: var(--bg-panel) !important;
    color: var(--text-bright) !important;
    padding: var(--space-sm) var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
}

body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before {
    display: none !important;
    content: none !important;
}

/* "Browse products ->" and action links inside notices */
body.woocommerce-account .woocommerce-info a.button,
body.woocommerce-account .woocommerce-message a.button {
    font-family: var(--font-mono) !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: var(--space-xs) var(--space-md) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

body.woocommerce-account .woocommerce-error {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin: 0 0 var(--space-md) 0 !important;
    border-top: none !important;
    border: 1px solid var(--accent-warm) !important;
    border-left: 3px solid var(--accent-warm) !important;
    background: var(--bg-panel) !important;
    color: var(--accent-warm) !important;
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl) !important;
}

body.woocommerce-account .woocommerce-error::before {
    display: none !important;
    content: none !important;
}

body.woocommerce-account .woocommerce-error li {
    margin: 0 !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------
   Orders table — force dark backgrounds over Storefront's inline styles
   ------------------------------------------------------------------ */

body.woocommerce-account table.woocommerce-orders-table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--line-soft);
    background: transparent !important;
}

body.woocommerce-account table.woocommerce-orders-table thead th {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    text-align: left;
    color: var(--text-bright) !important;
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

body.woocommerce-account table.woocommerce-orders-table tbody tr,
body.woocommerce-account table.woocommerce-orders-table tbody tr:nth-child(odd),
body.woocommerce-account table.woocommerce-orders-table tbody tr:nth-child(even) {
    background: transparent !important;
}

body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.woocommerce-orders-table tbody th {
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: var(--accent);
    text-decoration: none;
}

body.woocommerce-account table.woocommerce-orders-table .woocommerce-Price-amount {
    color: var(--accent-bright);
}

/* "View" button — cold-blue ghost */
body.woocommerce-account .woocommerce-button.button.view,
body.woocommerce-account a.woocommerce-button.view {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: var(--space-xs) var(--space-md) !important;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

body.woocommerce-account .woocommerce-button.button.view:hover,
body.woocommerce-account a.woocommerce-button.view:hover {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    box-shadow: var(--glow-cold);
}

/* ------------------------------------------------------------------
   Downloads table
   ------------------------------------------------------------------ */

body.woocommerce-account table.woocommerce-MyAccount-downloads {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--line-soft);
    background: transparent !important;
}

body.woocommerce-account table.woocommerce-MyAccount-downloads thead th {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    text-align: left;
    color: var(--text-bright) !important;
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr,
body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr:nth-child(odd),
body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr:nth-child(even) {
    background: transparent !important;
}

body.woocommerce-account table.woocommerce-MyAccount-downloads td {
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

body.woocommerce-account table.woocommerce-MyAccount-downloads .woocommerce-MyAccount-downloads-file {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent) !important;
    text-decoration: none;
    border: 1px solid var(--accent);
    padding: var(--space-xs) var(--space-md);
    transition: background var(--transition-fast), color var(--transition-fast);
    display: inline-block;
}

body.woocommerce-account table.woocommerce-MyAccount-downloads .woocommerce-MyAccount-downloads-file:hover {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    box-shadow: var(--glow-cold);
}

/* ------------------------------------------------------------------
   Addresses
   ------------------------------------------------------------------ */

body.woocommerce-account .woocommerce-Address-title h2 {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-bright);
    position: relative;
    padding: var(--space-md) 0 var(--space-sm) 0;
    margin: 0 0 var(--space-sm) 0;
    border: none;
}

body.woocommerce-account .woocommerce-Address-title h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

body.woocommerce-account .woocommerce-Address-title .edit {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

body.woocommerce-account .woocommerce-Address address {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-style: normal;
    color: var(--text-bright);
    line-height: 1.8;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--line-soft);
    background: var(--bg-panel) !important;
}

/* ------------------------------------------------------------------
   Forms — account details + address edit (shared spec)
   ------------------------------------------------------------------ */

body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account .woocommerce-address-fields label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
    display: block;
    margin-bottom: var(--space-xs);
}

body.woocommerce-account .woocommerce-EditAccountForm .required {
    color: var(--accent-warm);
}

body.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
body.woocommerce-account .woocommerce-address-fields input[type="text"],
body.woocommerce-account .woocommerce-address-fields input[type="email"],
body.woocommerce-account .woocommerce-address-fields input[type="tel"],
body.woocommerce-account .woocommerce-address-fields select {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
    outline: none;
    padding: var(--space-sm) var(--space-md) !important;
    width: 100%;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body.woocommerce-account .woocommerce-EditAccountForm input:focus,
body.woocommerce-account .woocommerce-address-fields input:focus,
body.woocommerce-account .woocommerce-address-fields select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Password fieldset */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
    box-sizing: border-box;
    border: 1px solid var(--line-soft);
    background: var(--bg-panel);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
}

body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--bg-panel);
    padding: 0 var(--space-sm);
    border-left: 2px solid var(--accent);
    padding-left: var(--space-sm);
}

body.woocommerce-account .password-input {
    position: relative;
    display: block;
}

body.woocommerce-account .woocommerce-EditAccountForm .show-password-input {
    position: absolute;
    top: 50%;
    right: var(--space-sm);
    transform: translateY(-50%);
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

body.woocommerce-account .woocommerce-EditAccountForm .show-password-input:hover {
    color: var(--accent);
}

/* Save / submit buttons — cold-blue ghost */
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="submit"],
body.woocommerce-account .woocommerce-address-fields button[type="submit"],
body.woocommerce-account .woocommerce-address-fields input[type="submit"] {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: var(--space-sm) var(--space-xl) !important;
    cursor: pointer;
    margin-top: var(--space-lg);
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
body.woocommerce-account .woocommerce-EditAccountForm input[type="submit"]:hover,
body.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover,
body.woocommerce-account .woocommerce-address-fields input[type="submit"]:hover {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    box-shadow: var(--glow-cold) !important;
}

/* Select2 country dropdown — replaces the native <select> */
body.woocommerce-account .woocommerce-address-fields .select2-container {
    width: 100% !important;
}

body.woocommerce-account .woocommerce-address-fields .select2-selection--single {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: var(--space-sm) var(--space-md) !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body.woocommerce-account .woocommerce-address-fields .select2-selection--single:focus,
body.woocommerce-account .woocommerce-address-fields .select2-container--open .select2-selection--single {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
    outline: none !important;
}

body.woocommerce-account .woocommerce-address-fields .select2-selection__rendered {
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em;
    line-height: 1.5 !important;
    padding: 0 !important;
}

body.woocommerce-account .woocommerce-address-fields .select2-selection__arrow {
    color: var(--text-muted);
    top: 50% !important;
    transform: translateY(-50%);
}

/* Select2 dropdown list */
body.woocommerce-account .select2-dropdown {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
}

body.woocommerce-account .select2-results__option {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    color: var(--text-primary) !important;
    padding: var(--space-xs) var(--space-md) !important;
}

body.woocommerce-account .select2-results__option[aria-selected="true"],
body.woocommerce-account .select2-results__option[data-selected="true"] {
    background: var(--bg-panel) !important;
    color: var(--accent-bright) !important;
}

body.woocommerce-account .select2-results__option--highlighted {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
}

body.woocommerce-account .select2-search--dropdown .select2-search__field {
    background: var(--bg-panel) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    outline: none;
}


/* =====================================================================
   Step 4.5b — My Account login page
   ===================================================================== */

.woocommerce-form-login {
    max-width: 480px;
}

.woocommerce-form-login .woocommerce-form-row label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
    display: block;
    margin-bottom: var(--space-xs);
}

.woocommerce-form-login .required {
    color: var(--accent-warm);
}

.woocommerce-form-login .woocommerce-Input {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
    outline: none;
    padding: var(--space-sm) var(--space-md) !important;
    width: 100%;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce-form-login .woocommerce-Input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Password wrapper — same pattern as EditAccountForm */
.woocommerce-form-login .password-input {
    position: relative;
    display: block;
}

.woocommerce-form-login .show-password-input {
    position: absolute;
    top: 50%;
    right: var(--space-sm);
    transform: translateY(-50%);
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.woocommerce-form-login .show-password-input:hover {
    color: var(--accent);
}

/* Remember me + submit — flex only on this row (no .woocommerce-form-row class) */
.woocommerce-form-login .form-row:not(.woocommerce-form-row) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-bright);
    cursor: pointer;
}

/* Checkbox - same spec as .wc-block-components-checkbox */
.woocommerce-form-login .woocommerce-form__input-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-elevated);
    border: 1px solid var(--line-medium);
    border-radius: 2px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.woocommerce-form-login .woocommerce-form__input-checkbox:checked {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' stroke='%23000b1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 70% no-repeat !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), var(--glow-cold) !important;
}

/* Submit button — cold-blue ghost */
.woocommerce-form-login__submit {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: var(--space-sm) var(--space-xl) !important;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.woocommerce-form-login__submit:hover {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    box-shadow: var(--glow-cold) !important;
}

/* Lost password */
.woocommerce-LostPassword {
    margin-top: var(--space-sm);
}

.woocommerce-LostPassword a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-bright);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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


/* =====================================================================
   Step 4.5c — Lost password page
   Scoped to .woocommerce-ResetPassword
   ===================================================================== */

.woocommerce-ResetPassword {
    max-width: 480px;
}

.woocommerce-ResetPassword > p:first-of-type {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-bright);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.woocommerce-ResetPassword .woocommerce-form-row label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
    display: block;
    margin-bottom: var(--space-xs);
}

.woocommerce-ResetPassword .required {
    color: var(--accent-warm);
}

.woocommerce-ResetPassword .woocommerce-form-row--first,
.woocommerce-ResetPassword .form-row-first {
    width: 100% !important;
    float: none !important;
    clear: both;
}

.woocommerce-ResetPassword .woocommerce-Input {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--line-medium) !important;
    border-radius: 0 !important;
    color: var(--text-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
    outline: none;
    padding: var(--space-sm) var(--space-md) !important;
    width: 100%;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce-ResetPassword .woocommerce-Input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

.woocommerce-ResetPassword .woocommerce-Button {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: var(--space-sm) var(--space-xl) !important;
    cursor: pointer;
    margin-top: var(--space-sm);
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.woocommerce-ResetPassword .woocommerce-Button:hover {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    box-shadow: var(--glow-cold) !important;
}


/* =====================================================================
   Step 4.6 – 404 page
   ===================================================================== */

body.error404 .error-404.not-found {
    padding: 0 0 var(--space-xl) 0;
}

/* Tier 1 heading — D-035 */
body.error404 .page-header .page-title {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-bright);
    line-height: 1.2;
    position: relative;
    margin: 0;
    padding: var(--space-lg) 0 var(--space-md) 0;
    border: none;
}

body.error404 .page-header .page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}

body.error404 .error-404 p {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xl);
}

/* Sections full-width */
body.error404 .fourohfour-new-in,
body.error404 .fourohfour-popular {
    width: 100%;
    margin-bottom: var(--space-xl);
}

/* Products grid - same layout as shop-grid */
body.error404 ul.products {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

body.error404 ul.products.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

body.error404 ul.products > li.product {
    width: auto;
    margin: 0;
    float: none;
    clear: none;
}

/* Tier 2 headings — D-035 */
body.error404 .fourohfour-new-in > h2,
body.error404 .fourohfour-popular > h2 {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-bright);
    margin: 0 0 var(--space-lg) 0;
    padding: var(--space-md) 0 0 0;
    position: relative;
    border: none;
}

body.error404 .fourohfour-new-in > h2::before,
body.error404 .fourohfour-popular > h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 80px;
    height: 1px;
    background: var(--accent);
    box-shadow: var(--glow-cold);
}


/* =====================================================================
   Step 5 — Mobile responsive
   globals.css already handles the topbar clip-path + stacked layout.
   This block covers all shop-specific overrides.
   ===================================================================== */

/* --- Cart - breakpoint aligned on the WC container query ----------- */

/* The WC Cart Block uses @container (max-width: 699px) to switch to a
   1-column layout. Storefront adds ~7.7% padding on each side (~60px
   per side at a 780px viewport -> content width ~662px), so the
   container query actually fires at ~826px viewport. Below 830px,
   drop the sticky sidebar and __main's padding-right so they don't
   stay active after WC has already stacked the columns. */

@media (max-width: 830px) {

    .wp-block-woocommerce-cart .wc-block-cart__sidebar {
        position: static;
    }

    .wp-block-woocommerce-cart .wc-block-cart__main {
        padding-right: 0;
    }

    /* WC Cart Block mobile grid: .wc-block-cart-items__row switches to
       display:grid with grid-template-columns:80px 132px at ≤699px
       container (≈830px viewport). Override the grid to give 100px to
       the image column (bigger thumbnail on mobile) and let the product
       column fill the rest fluidly. Reset td width to auto and img to
       100%/auto so they adapt to the grid track. */
    .wp-block-woocommerce-cart .wc-block-cart-items__row {
        grid-template-columns: 100px 1fr !important;
    }

    .wp-block-woocommerce-cart td.wc-block-cart-item__image,
    .wp-block-woocommerce-cart .wc-block-cart-item__image {
        width: auto;
        padding-right: 0;
    }

    .wp-block-woocommerce-cart .wc-block-cart-item__image img {
        width: 100%;
        height: auto;
    }

}


/* --- Topbar - 3 zones compressed between 1080px and 641px ---------- */

@media (max-width: 1080px) {
    /* Lets the 1fr columns shrink below their min-content */
    .topbar-content {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    /* Reduce side paddings (globals.css only does it at 900px) */
    .topbar-left,
    .topbar-right {
        padding: 0 var(--space-sm);
        min-width: 0;
    }

    /* Labels hidden - icons only */
    .account-link__label,
    .cart-link__label {
        display: none;
    }

    .brand-logo {
        width: 36px;
        height: 36px;
    }

    .brand > span {
        font-size: 1.375rem;
    }

    /* Condensed nav - gap and padding only; font size is handled by
       globals.css at <=900px */
    .topnav {
        gap: var(--space-xs) !important;
    }

    .topnav a {
        padding: var(--space-2xs) var(--space-2xs) !important;
    }
}


@media (max-width: 780px) {

    /* --- Topbar 2 lignes -------------------------------------------- */

    .topbar-content {
        grid-template-columns: 1fr auto !important;
        align-items: center;
        padding: var(--space-xs) var(--space-md);
        gap: 0;
        height: auto;
    }

    .topbar-left  { grid-column: 1; grid-row: 1; padding: 0; }
    .topbar-right { grid-column: 2; grid-row: 1; padding: 0; justify-content: flex-end !important; flex-wrap: nowrap; gap: var(--space-sm); }

    /* max-height measured in JS (--topnav-h): the animation starts from
       the real height (no dead zone at the start) and the reflow
       propagates to the parent grid. */
    .topbar-center {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        overflow: hidden;
        max-height: var(--topnav-h, 80px);
        padding: var(--space-xs) 0;
        transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    padding    0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity    0.2s  ease;
    }

    body.nav-hidden .topbar-center {
        max-height: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
    }

    .topbar-bg     { clip-path: none !important; }
    .topbar-outline { display: none !important; }
    :root          { --topbar-height: auto; }
    .topbar        { height: auto !important; }

    .brand-logo    { width: 30px; height: 30px; }
    .brand > span  { font-size: 1.125rem; }


    /* --- Catalog grid — 2 columns ----------------------------------- */

    .woocommerce ul.products.shop-grid,
    ul.products.shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* --- Product page — stack columns vertically -------------------- */

    /* Both .woocommerce and .woocommerce-page body classes appear on the
       single product page; target both so the collapse is guaranteed.
       minmax(0, 1fr) mirrors the desktop rule: explicit min=0 lets the
       track shrink below its content's min-width, preventing overflow.
       Plain `1fr` resolves as minmax(auto, 1fr) and items can't shrink. */
    .woocommerce div.product,
    .woocommerce-page div.product {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    /* Desktop rules assign grid-column: 1/2 + grid-row: 1/2 to both
       gallery and summary. In a 1-col grid the column resets fine but
       grid-row: 1/2 pins both children to row 1 → overlap.
       min-width: 0 allows each item to shrink below its content size
       (grid items default to min-width: auto which causes cropping). */
    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > .images,
    .woocommerce div.product > .summary,
    .woocommerce div.product > .entry-summary,
    .woocommerce div.product > .woocommerce-tabs,
    .woocommerce div.product > .related {
        grid-column: 1;
        grid-row: auto;
        min-width: 0;
    }

    /* Related products — 2 columns (mirrors shop-grid: 3→2 at 780px, →1 at 480px) */
    .woocommerce .related.products ul.products,
    .woocommerce ul.products.related-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Cart responsive rules moved to @media (max-width: 830px) — see below. */


    /* --- Checkout — WC Blocks drops is-large automatically;
         just ensure our sidebar panel looks good at full width -------- */

    .wp-block-woocommerce-checkout .wc-block-components-sidebar {
        margin-top: var(--space-lg);
    }


    /* --- 404 page — 2 columns then 1 column ------------------------- */

    body.error404 ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    body.error404 ul.products.columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }


    /* --- Shop archive head ------------------------------------------ */

    .shop-archive-title { font-size: 1.5rem; }
    .shop-archive-meta  { gap: var(--space-sm); flex-wrap: wrap; }


    /* --- My Account <=780px ------------------------------------------ */

    /* Storefront uses float: left (17.6%) + float: right (76.5%) with
       no stacking media query - stacking is forced here. */
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-content {
        margin-top: var(--space-lg) !important;
    }

    /* Tighten nav links on mobile */
    .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
        padding: var(--space-sm) var(--space-md);
    }

    /* --- Orders + Downloads tables — stacked card layout --------------- */

    /* Remove outer border (each card has its own) + kill WC stripe */
    body.woocommerce-account table.woocommerce-orders-table,
    body.woocommerce-account table.woocommerce-MyAccount-downloads {
        border: none !important;
    }

    body.woocommerce-account table.woocommerce-orders-table tbody tr:nth-child(2n) td,
    body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr:nth-child(2n) td {
        background-color: transparent !important;
    }

    /* Each <tr> = one card */
    body.woocommerce-account table.woocommerce-orders-table tbody tr,
    body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr {
        display: block !important;
        border: 1px solid var(--line-soft) !important;
        background: var(--bg-panel) !important;
        margin-bottom: var(--space-md) !important;
    }

    /* Each cell = one label/value row inside the card */
    body.woocommerce-account table.woocommerce-orders-table tbody tr td,
    body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: right !important;
        background: transparent !important;
        border-bottom: 1px solid var(--line-soft) !important;
        padding: var(--space-sm) var(--space-md) !important;
        color: var(--text-bright) !important;
        font-family: var(--font-mono) !important;
        font-size: 0.8125rem !important;
    }

    body.woocommerce-account table.woocommerce-orders-table tbody tr td:last-child,
    body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr td:last-child {
        border-bottom: none !important;
    }

    /* Label (data-title) — small mono uppercase, secondary color */
    body.woocommerce-account table.woocommerce-orders-table tbody tr td::before,
    body.woocommerce-account table.woocommerce-MyAccount-downloads tbody tr td::before {
        float: none !important;
        font-size: 0.625rem !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
        color: var(--text-secondary) !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        padding-right: var(--space-sm) !important;
    }

}


/* @media (max-width: 600px) - cart gutter rule consolidated into the <=830px block above. */


@media (max-width: 480px) {

    /* --- Catalog grid — 1 column ----------------------------------- */

    .woocommerce ul.products.shop-grid,
    ul.products.shop-grid {
        grid-template-columns: 1fr;
    }


    /* --- Product page <=480px --------------------------------------- */

    /* Title smaller on narrow screens */
    .woocommerce div.product .product_title,
    .woocommerce div.product h1.entry-title {
        font-size: 1.375rem;
    }

    /* Reduce summary panel padding */
    .woocommerce div.product .summary,
    .woocommerce div.product .entry-summary {
        padding: var(--space-md);
    }

    /* Tighten the gap between quantity and Add to Cart */
    .woocommerce div.product form.cart .variations_button,
    .woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
        margin-top: var(--space-xl);
        gap: var(--space-sm);
    }

    /* Give the variations select more room */
    .woocommerce div.product form.cart .variations select {
        max-width: 80%;
    }

    /* Tighten tabs spacing */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        gap: var(--space-lg);
    }

    /* Related products — 1 column */
    .woocommerce .related.products ul.products,
    .woocommerce ul.products.related-grid {
        grid-template-columns: 1fr;
    }


    /* --- Order received <=480px - overview grid 2x2 -> 1 column ----- */

    /* The desktop 2x2 grid (flex: 0 0 50%) leaves ~150px of content per
       cell on phones - too tight for "Payment method: Bank transfer".
       Stack to one full-width cell per row; the desktop rule that drops
       the bottom border on the last TWO items must be re-scoped to the
       last item only (in 1-col there is exactly one last row). */
    .woocommerce-order-received .woocommerce-order-overview li {
        flex: 0 0 100%;
        border-right: none;
    }

    .woocommerce-order-received .woocommerce-order-overview li:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--line-soft);
    }

    .woocommerce-order-received .woocommerce-order-overview li:last-child {
        border-bottom: none;
    }


    /* --- Cart <=480px ----------------------------------------------- */

    /* Item grid: reduce image column from 100px (≤830px) to 80px on phones */
    .wp-block-woocommerce-cart .wc-block-cart-items__row {
        grid-template-columns: 80px 1fr !important;
    }

    .wp-block-woocommerce-cart td.wc-block-cart-item__image,
    .wp-block-woocommerce-cart .wc-block-cart-item__image {
        width: auto;
        padding-right: 0;
    }

    .wp-block-woocommerce-cart .wc-block-cart-item__image img {
        width: 72px;
        height: 72px;
    }

    /* Estimated total value: 1.75rem too wide for 3-digit amounts + currency */
    .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: 1.375rem;
    }

    /* Sidebar cartouche: tighter padding when full width below items */
    .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
    .wp-block-woocommerce-cart .wc-block-components-sidebar {
        padding: var(--space-md);
    }

}

@media (max-width: 400px) {

    /* --- Topnav staggered 3+2 - 6-column grid ----------------------- */
    /* justify-self: center (780px) shrinks topbar-center; stretch it. */
    .topbar-center { justify-self: stretch; }

    /* 6 cols, no column-gap. Each item spans 2 cols.
       Row 1: cols 1/3, 3/5, 5/7 -> centers at 1/6, 3/6, 5/6.
       Row 2: cols 2/4, 4/6 -> centers at 2/6, 4/6 (between the items above). */
    .topnav {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        justify-items: center;
        row-gap: var(--space-xs);
        column-gap: 0;
    }

    .topnav li:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    .topnav li:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
    .topnav li:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }
    .topnav li:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
    .topnav li:nth-child(5) { grid-column: 4 / 6; grid-row: 2; }


    /* --- 404 page --------------------------------------------------- */

    body.error404 ul.products,
    body.error404 ul.products.columns-2 {
        grid-template-columns: 1fr;
    }


    /* --- Shop archive head ------------------------------------------ */

    .shop-archive-title { font-size: 1.125rem; }

    /* Brand / type section titles follow the same reduction so the
       D-035 heading tiers keep their relative hierarchy on phones. */
    .shop-brand-title { font-size: 1.25rem; }
    .shop-type-title  { font-size: 1rem; }

    .shop-archive-meta {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }


    /* --- Cart <=400px ----------------------------------------------- */

    /* Checkout button: full width so it doesn't force a minimum */
    .wp-block-woocommerce-cart .wc-block-components-checkout-button {
        width: 100%;
        min-width: 0;
    }

    /* Cross-sells: 2 cols → 1 col */
    .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection ul.products,
    .wp-block-woocommerce-cart [data-collection] ul.products {
        grid-template-columns: 1fr !important;
    }

}