/**
 * A16A — Taobao-style single product page.
 *
 * Loaded only on is_product() (see functions.php). Scoped to
 * body.single-product so the Walmart-style home / archive / cart / checkout
 * layouts are untouched — the two systems coexist.
 *
 * Built entirely from the design tokens in style.css: Chinese Red & Black
 * (#C8102E / #111111) plus the existing grey ramp. No new colours, no new
 * type scale.
 *
 * Layout intent (Taobao / Tmall information architecture):
 *   - one tight two-column hero, image left, dense buy column right
 *   - a hairline-separated spec list rather than a stack of cards
 *   - a sticky, chunky action bar with two buttons side by side
 *   - detail + reviews as a segmented section, not floating accordions
 *
 * Data reality check (measured across all 298 live products, not sampled):
 *   on sale ............  10
 *   with a gallery .....  30   -> the thumbnail rail below does get used
 *   with attributes ....  30   -> the spec list renders up to ~7 rows
 *   with a SKU .........   0   -> no SKU row anywhere
 *   with a short desc .. 298
 * Every block below is therefore conditional in PHP: nothing renders empty,
 * and nothing is fabricated to fill a Tmall-shaped hole.
 *
 * @package A16A_Store
 */

/* ============================================================
   1. PAGE SHELL — tighten the container for a denser read
   ============================================================ */

body.single-product .a16a-single-product {
    padding: 0 0 var(--space-2xl);
}

/* Breadcrumb: quiet, small, close to the content (Taobao style) */
body.single-product .a16a-breadcrumb {
    padding: 14px 0 10px;
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--border-color-light);
}

body.single-product .a16a-breadcrumb a {
    color: var(--color-text-secondary);
}

body.single-product .a16a-breadcrumb a:hover {
    color: var(--color-primary);
}

/* ============================================================
   2. HERO — two columns, image left, buy column right
   ============================================================ */

/* Column ratio measured, not guessed. At 1360px the old `minmax(0,420px) 1fr`
   gave the gallery 31% (418px of image) and the buy box 66% (900px) — the
   main image read as a thumbnail while the CTA row stretched to 730px with
   dead white space around it. The buy column never needs more than ~560px:
   the widest thing in it is the spec label/value pair. So the gallery takes
   the lion's share and the buy column is capped.
   `minmax(0, 1fr)` on both tracks + a max-width on the buy box keeps the
   gallery growing on very wide screens without ever squeezing the buy column
   below its comfortable reading width. */
body.single-product .a16a-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 44px;
    align-items: start;
    padding: var(--space-lg) 0 var(--space-xl);
}

/* --- Gallery ---------------------------------------------------------------
   A single frame, left-aligned, with a hairline border and no decorative
   padding — the image itself is the only ornament.
   The header is position:sticky at z-index 900, so the rail has to clear it
   using the theme's own --header-total token (same variable every other
   sticky element in main.css uses).

   IMPORTANT — do not re-introduce a fixed `aspect-ratio` on the main image.
   The catalogue mixes wide banner-style shots (≈2.15:1) with square ones, so a
   forced 1:1 box makes `object-fit: contain` letterbox the wide images inside a
   square: a 373px box paints only ~174px of photo and leaves ~199px of blank
   space under it. On mobile that reads as "a huge empty gap" right at the top
   of the product page. Let the image keep its own proportions and cap the
   height instead; `width: 100%; height: auto` is the whole rule. */

body.single-product .a16a-product-gallery {
    position: sticky;
    top: calc(var(--header-total, 0px) + 20px);
    min-width: 0;
}

body.single-product div.product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery {
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
    background: var(--color-card);
    position: relative;
}

body.single-product .woocommerce-product-gallery__wrapper {
    margin: 0;
}

body.single-product .woocommerce-product-gallery__image {
    display: block;
}

body.single-product .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    /* Keep the photo's own proportions. No forced aspect-ratio and no
       object-fit letterboxing — see the note above the gallery block. */
    object-fit: initial;
    background: var(--color-card);
    /* Guard against an extremely tall portrait shot filling the whole screen. */
    max-height: 78vh;
    object-position: center;
}

/* --- Sale flash ------------------------------------------------------------
   IMPORTANT: there is no <span class="onsale"> here. The theme's
   woocommerce_sale_flash filter returns its own markup, which *replaces*
   WooCommerce's wrapper entirely — so the two badges land as bare siblings of
   .woocommerce-product-gallery, directly inside .a16a-product-gallery:

       <div class="a16a-product-gallery">
         <span class="badge-rollback">Rollback</span><span class="badge badge-red">-30%</span>
         <div class="woocommerce-product-gallery"> ... </div>
       </div>

   So the flash is positioned against .a16a-product-gallery (which is already
   sticky + relative) and the frame starts below it. No wrapper background is
   set — the badges bring their own. */
body.single-product .a16a-product-gallery {
    position: sticky;
}

body.single-product .a16a-product-gallery > .badge-rollback,
body.single-product .a16a-product-gallery > .badge.badge-red {
    position: absolute;
    top: 12px;
    z-index: 4;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

body.single-product .a16a-product-gallery > .badge-rollback {
    left: 12px;
}

body.single-product .a16a-product-gallery > .badge.badge-red {
    left: auto;
    right: 12px;
}

/* If a future WooCommerce/theme change reintroduces the native wrapper,
   keep it out of the way rather than letting it affect layout. */
body.single-product .woocommerce-product-gallery span.onsale {
    display: none;
}

/* Thumbs: a compact rail under the frame, only if the product has a gallery */
body.single-product div.product .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 0;
    padding: 0;
}

body.single-product div.product .flex-control-thumbs li {
    width: 62px;
    height: 62px;
    /* Never shrink. Matters on the ≤860px single-row rail below, where the
       track is `nowrap`: without this each thumb would be squeezed to a
       sliver instead of scrolling. A no-op on desktop where they wrap. */
    flex: 0 0 auto;
    float: none;
    margin: 0;
}

body.single-product div.product .flex-control-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-sm);
    background: var(--color-card);
    opacity: 1;
    transition: border-color .15s ease;
}

body.single-product div.product .flex-control-thumbs img:hover,
body.single-product div.product .flex-control-thumbs img.flex-active {
    border-color: var(--color-primary);
}

/* --- Buy column ---------------------------------------------------------- */

body.single-product .a16a-product-buybox {
    min-width: 0;
}

body.single-product .a16a-buybox-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Title: larger and tighter than the Walmart page, two-line clamp feel */
body.single-product .a16a-buybox-card .product_title,
body.single-product div.product .product_title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--color-black);
    margin: 0 0 10px;
}

/* ============================================================
   3. PRICE PANEL — the visual anchor of the page
   ============================================================ */

body.single-product .single-product-price {
    margin: 0;
    padding: 16px 20px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

body.single-product .single-product-price .w-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
}

body.single-product .single-product-price .w-price {
    color: var(--color-primary);
    font-weight: 800;
    line-height: 1;
}

body.single-product .single-product-price .w-price .w-cur,
body.single-product .single-product-price .w-price .w-cents {
    font-size: .58em;
    font-weight: 700;
}

body.single-product .single-product-price .w-price.xl {
    font-size: 34px;
}

body.single-product .single-product-price .w-was {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

body.single-product .single-product-price .w-was del {
    color: var(--color-text-muted);
    font-weight: 400;
    margin: 0;
}

body.single-product .single-product-price .w-save {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-xs);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* Rating + sold-by sit on one quiet line under the price */
body.single-product .single-product-rating {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 12px 0 0;
    font-size: var(--font-size-sm);
}

body.single-product .single-product-rating .rating-count {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

body.single-product .single-product-rating .rating-count:hover {
    color: var(--color-primary);
}

body.single-product .single-product-sold-by {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 10px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================================
   4. SPEC LIST — hairline rows, label left, value right
   ============================================================ */

body.single-product .a16a-spec-list {
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid var(--border-color-light);
}

body.single-product .a16a-spec-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color-light);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

body.single-product .a16a-spec-label {
    flex: 0 0 132px;
    color: var(--color-text-muted);
}

body.single-product .a16a-spec-value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text);
    font-weight: 500;
    word-break: break-word;
}

body.single-product .a16a-spec-value a {
    color: var(--color-primary);
    text-decoration: none;
}

body.single-product .a16a-spec-value a:hover {
    text-decoration: underline;
}

body.single-product .a16a-spec-value ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.single-product .a16a-spec-value li {
    margin: 0 0 4px;
}

body.single-product .a16a-spec-value li:last-child {
    margin-bottom: 0;
}

/* In-stock reads as a green dot, not a badge */
body.single-product .a16a-spec-value .in-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-success);
    font-weight: 600;
}

body.single-product .a16a-spec-value .out-of-stock {
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================================
   5. BUY BAR — quantity + two CTAs side by side
   ============================================================ */

/* The summary stacks its hook outputs vertically, as WooCommerce intends.
   form.cart (hook 20) already lays its own children out as a flex row, so
   the quantity stepper and the Add to Cart button share one line. The
   buy-now button (hook 22) is nudged up so it reads as the second half of
   the same bar rather than a separate block. */
body.single-product .a16a-buybox-card > * {
    min-width: 0;
}

body.single-product div.product form.cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 0;
}

body.single-product div.product form.cart .quantity {
    display: inline-flex;
    align-items: stretch;
    position: relative;
    flex: 0 0 auto;
}

/* Taobao-style segmented stepper: [ - ][ n ][ + ]
   NOTE: WooCommerce emits the quantity input inside <div class="quantity">,
   but the two stepper buttons are hooked around it — so they land as
   SIBLINGS of .quantity inside form.cart, not inside it. That actually suits
   a flex row: the three pieces are laid out side by side in source order
   (minus, .quantity, plus), so no absolute positioning is needed. */
body.single-product div.product form.cart .quantity {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin: 0;
}

body.single-product .quantity input.qty {
    width: 64px;
    height: 46px;
    padding: 0 8px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg);
    -moz-appearance: textfield;
}

body.single-product .quantity input.qty::-webkit-outer-spin-button,
body.single-product .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.single-product .quantity input.qty:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* The stepper buttons ride the same row as the input. Because the form is a
   flex row, they simply sit before and after .quantity. */
body.single-product div.product form.cart > button.qty-minus,
body.single-product div.product form.cart > button.qty-plus {
    position: static;
    flex: 0 0 36px;
    width: 36px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* Glue the three segments into one control: pull each inward by 1px so the
   shared borders collapse, and round only the outer corners. */
body.single-product div.product form.cart > button.qty-minus {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    margin-right: -1px;
}

body.single-product div.product form.cart > button.qty-plus {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-left: -1px;
}

body.single-product div.product form.cart > button.qty-minus:hover,
body.single-product div.product form.cart > button.qty-plus:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
    z-index: 1;
}

body.single-product div.product form.cart > button.qty-minus:focus-visible,
body.single-product div.product form.cart > button.qty-plus:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    z-index: 2;
}


/* Primary CTA — the red one, flexes to fill the row.
   `flex-basis: 200px` with `flex-grow: 1` meant the button's width was purely
   a function of its container: at 900px it became a 730px slab, which is what
   read as "image big, button small / out of proportion" — the button was wide
   but visually thin next to a 900px column. Now the row itself is capped and
   the button takes the space that is actually available next to the stepper. */
body.single-product div.product form.cart .button,
body.single-product div.product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-md);
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color .15s ease;
}

body.single-product div.product form.cart .button:hover,
body.single-product div.product form.cart button.single_add_to_cart_button:hover {
    background: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

/* Secondary CTA — Buy it now, black, same geometry. It is a sibling of the
   cart form, so pull it up to sit flush under the Add to Cart row. */
body.single-product .single-product-buynow {
    margin: 12px 0 0;
    display: flex;
}

body.single-product .single-product-buynow .btn,
body.single-product .single-product-buynow .a16a-buy-now-btn {
    flex: 1 1 auto;
    width: 100%;
    height: 46px;
    border-radius: var(--radius-sm);
    background: var(--color-black);
    border: 1px solid var(--color-black);
    color: var(--color-text-inverse);
    font-size: var(--font-size-md);
    font-weight: 800;
}

body.single-product .single-product-buynow .btn:hover,
body.single-product .single-product-buynow .a16a-buy-now-btn:hover {
    background: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-text-inverse);
}

/* Disabled / processing state */
body.single-product div.product form.cart .button[disabled],
body.single-product .single-product-buynow .btn[disabled] {
    opacity: .65;
    cursor: not-allowed;
}

/* ============================================================
   6. PROMISE STRIP — shipping + trust, one row of small items
   ============================================================ */

body.single-product .single-product-delivery {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

body.single-product .single-product-delivery strong {
    font-weight: 700;
}

body.single-product .single-product-stock,
body.single-product div.product .stock {
    display: none; /* folded into the spec list instead */
}

body.single-product .single-product-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 16px 0 0;
    padding: 14px 18px;
    background: var(--color-bg-alt);
    border: 0;
    border-radius: var(--radius-md);
}

body.single-product .single-product-trust .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ============================================================
   7. SHORT DESCRIPTION — "About this item"
   ============================================================ */

body.single-product .single-product-excerpt {
    margin: 18px 0 0;
    padding: 0;
}

body.single-product .single-product-excerpt h4 {
    margin: 0 0 8px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

body.single-product .single-product-excerpt p,
body.single-product .single-product-excerpt li {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

body.single-product .single-product-excerpt ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

body.single-product .single-product-excerpt li {
    margin-bottom: 5px;
}

/* Meta (SKU / category) is hidden — it now lives in the spec list */
body.single-product .single-product-meta {
    display: none;
}

/* ============================================================
   8. SELLER CARD — only renders when a merchant is mapped
   ============================================================ */

body.single-product .a16a-shopcard {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 14px 16px;
    background: var(--color-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
}

body.single-product .a16a-shopcard-logo {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-black);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

body.single-product .a16a-shopcard-body {
    flex: 1 1 auto;
    min-width: 0;
}

body.single-product .a16a-shopcard-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0 0 2px;
}

body.single-product .a16a-shopcard-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    word-break: break-word;
}

body.single-product .a16a-shopcard-name a {
    color: var(--color-black);
    text-decoration: none;
}

body.single-product .a16a-shopcard-name a:hover {
    color: var(--color-primary);
}

body.single-product .a16a-shopcard-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 3px 0 0;
}

body.single-product .a16a-shopcard-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

body.single-product .a16a-shopcard-cta:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ============================================================
   9. DETAIL + REVIEWS SECTION — segmented, not accordion
   ============================================================ */

body.single-product .a16a-product-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 32px;
    align-items: start;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color-light);
}

body.single-product .a16a-product-details-main {
    min-width: 0;
}

/* Section headings read as Taobao module titles: red tick + black text */
body.single-product .a16a-sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-black);
}

body.single-product .a16a-sec-title::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* Tabs: flat red underline, no pill */
body.single-product div.product .woocommerce-tabs {
    margin: 0;
}

body.single-product div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 28px;
    margin: 0 0 22px;
    padding: 0;
    border-bottom: 1px solid var(--border-color-light);
    flex-wrap: wrap;
}

body.single-product div.product .woocommerce-tabs ul.tabs::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 10px 0 12px;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    text-decoration: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active a,
body.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-black);
    border-bottom-color: var(--color-primary);
}

body.single-product div.product .woocommerce-tabs .panel {
    margin: 0;
    padding: 0;
}

body.single-product div.product .woocommerce-tabs .panel > h2:first-child {
    display: none; /* the tab already names the section */
}

body.single-product div.product .woocommerce-tabs .panel p,
body.single-product div.product .woocommerce-tabs .panel li {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* Attributes table, if one ever appears */
body.single-product table.shop_attributes {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

body.single-product table.shop_attributes th,
body.single-product table.shop_attributes td {
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-color-light);
    font-size: var(--font-size-sm);
    text-align: left;
    vertical-align: top;
}

body.single-product table.shop_attributes th {
    width: 180px;
    background: transparent;
    font-weight: 600;
    color: var(--color-text-muted);
}

body.single-product table.shop_attributes td {
    color: var(--color-text);
}

body.single-product table.shop_attributes tr:nth-child(even) th,
body.single-product table.shop_attributes tr:nth-child(even) td {
    background: transparent;
}

/* ============================================================
   10. REVIEWS — flat list, red stars
   ============================================================ */

body.single-product #reviews {
    margin: 0;
}

body.single-product #reviews #comments > h2,
body.single-product #reviews #review_form_wrapper h3 {
    margin: 0 0 14px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-black);
}

body.single-product #reviews .woocommerce-noreviews {
    margin: 0 0 18px;
    padding: 16px 18px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

body.single-product #reviews .commentlist {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

body.single-product #reviews .commentlist li {
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--border-color-light);
    border-radius: 0;
}

body.single-product #reviews .commentlist li .comment_container {
    display: flex;
    gap: 14px;
}

body.single-product #reviews .commentlist li img.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    position: static;
}

body.single-product #reviews .comment-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.single-product #reviews .comment-text p.meta {
    margin: 0 0 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

body.single-product #reviews .comment-text .star-rating {
    margin: 0 0 6px;
}

body.single-product #reviews #review_form_wrapper {
    padding-top: 4px;
}

body.single-product #reviews #respond {
    margin: 0;
    padding: 0;
}

body.single-product #reviews #respond .comment-form-rating label,
body.single-product #reviews #respond p label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

body.single-product #reviews #respond textarea,
body.single-product #reviews #respond input[type="text"],
body.single-product #reviews #respond input[type="email"],
body.single-product #reviews #respond select {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

body.single-product #reviews #respond textarea:focus,
body.single-product #reviews #respond input:focus,
body.single-product #reviews #respond select:focus {
    outline: none;
    border-color: var(--color-primary);
}

body.single-product #reviews #respond input#submit {
    margin-top: 12px;
    height: 42px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
}

body.single-product #reviews #respond input#submit:hover {
    background: var(--color-primary-dark);
}

/* ============================================================
   11. RELATED / UPSELLS — tighter grid under the fold
   ============================================================ */

body.single-product .related.products,
body.single-product .upsells.products {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--border-color-light);
}

/* ---------------------------------------------------------------------------
   Related / upsells collapse to a 248px single column — root cause.

   WooCommerce emits:

       <section class="related products">
           <h2>Related products</h2>
           <ul class="products columns-4"> ...4 x li.product... </ul>
       </section>

   Note the SECTION carries the class `products` as well as the UL. main.css:315
   has a bare-class selector:

       .products, .products-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       }

   That is a *product-grid* rule, intended for the `<ul>` that lists products.
   But because `products` is also on the wrapping `<section>`, the section
   became a grid too. At 1040px the section's own `minmax(200px, 1fr)` maths
   produced `grid-template-columns: 248px 248px 248px 248px`, so its children
   — the `<h2>` and the `<ul>` — were laid out as *items of that grid*. The
   `<ul>` landed in a single 248px track and then dutifully built its own
   correct 4-column grid inside 248px, giving four 47px cards in a tall thin
   stack. Verified with CSS.getMatchedStylesForNode + getComputedStyleForNode:
   the section's computed grid-template-columns was literally
   "248px 248px 248px 248px" while the ul's was "47px 47px 47px 47px".

   So the fix has two parts and BOTH are required:
     1. take the grid OFF the section — it is a heading + a list, stacked;
     2. give the ul the columns (it already had the right ones, but state them
        explicitly so the rule survives future refactors).
   `display: block` on the section is what actually unblocks the layout; the
   ul rule alone changes nothing because the ul was never short of columns —
   it was short of width.
   --------------------------------------------------------------------------- */
body.single-product .related.products,
body.single-product .upsells.products {
    display: block;
}

body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products,
body.single-product ul.products.columns-4,
body.single-product ul.products.columns-3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.single-product .related.products ul.products li.product,
body.single-product .upsells.products ul.products li.product {
    width: auto;
    max-width: none;
    margin: 0;
    float: none;
    clear: none;
}

body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-black);
}

body.single-product .related.products > h2::before,
body.single-product .upsells.products > h2::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* ============================================================
   12. SIDEBAR — quieter than the Walmart version
   ============================================================ */

body.single-product .a16a-product-sidebar .widget {
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--border-color-light);
}

body.single-product .a16a-product-sidebar .widget:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

body.single-product .a16a-product-sidebar .widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: var(--font-size-base);
    font-weight: 800;
    color: var(--color-black);
}

body.single-product .a16a-product-sidebar .widget-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* ============================================================
   13. STICKY ATC BAR — restyle the JS-injected bar
   ============================================================ */

body.single-product .sticky-atc {
    background: var(--color-card);
    border-top: 1px solid var(--border-color-light);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
}

body.single-product .sticky-atc-inner {
    gap: 12px;
    padding: 10px 14px;
}

body.single-product .sticky-atc-name {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-black);
}

body.single-product .sticky-atc-btn {
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 800;
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    body.single-product .a16a-product-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
        gap: 28px;
    }

    body.single-product .a16a-product-details-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 24px;
    }

    body.single-product .a16a-product-gallery {
        position: static;
    }

    /* Drop related/upsells to 3 across so the cards keep a usable width. */
    body.single-product .related.products ul.products,
    body.single-product .upsells.products ul.products,
    body.single-product ul.products.columns-4,
    body.single-product ul.products.columns-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body.single-product .a16a-product-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    body.single-product .a16a-product-details-layout {
        grid-template-columns: 1fr;
    }

    /* The PDP sidebar is desktop-only furniture: a search box, 12 department
       links, two 4-up product lists (Best sellers / You may also like),
       price brackets and a shipping blurb — ~2000px of it. Stacked under
       Related Products on a phone it reads as one long blank page, and the
       content it duplicates (departments, related products, price filters)
       is already reachable from the header drawer and the shop archive.

       It also inherits `.shop-sidebar`'s ≤860px drawer rule (fixed, 320px
       wide, translateX(-100%)). Leaving it in the flow while transformed
       320px left was what produced the void: the aside still reserved its
       full height but painted nothing inside the viewport.

       Hidden outright, per the agreed mobile treatment. `display: none`
       also removes it from the grid so the main column gets full width. */
    body.single-product .a16a-product-sidebar {
        display: none;
    }

    body.single-product .a16a-buybox-card .product_title,
    body.single-product div.product .product_title {
        font-size: 22px;
    }

    /* ---- Thumbnail rail: ONE row, swipe left to see the rest -------------
       At 390px the desktop `flex-wrap: wrap` rail resolved to 5 thumbs on the
       first line and the remaining 3 on a second line: 62*5 + 8*4 = 342px of
       content inside a 388px track, so thumb #6 wrapped. That second row cost
       ~70px of vertical space and looked like a layout accident.

       Turning wrap off and letting the track scroll gives one clean row.
       `overflow-x: auto` + `-webkit-overflow-scrolling: touch` keeps the
       native iOS momentum flick; `scrollbar-width: none` hides the bar on
       Firefox and the ::-webkit- rule does the same on Safari/Chrome, so the
       affordance is the half-visible next thumb at the right edge, not a bar.

       IMPORTANT: do NOT add `scroll-snap-type: x mandatory` here. WooCommerce's
       flexslider calls scrollIntoView() on the active thumb to keep it in
       view; with mandatory snapping the browser resolves that programmatic
       scroll against the nearest snap point, landing on a different thumb and
       desynchronising the rail from the main image.

       No `overscroll-behavior-x: contain` either — it would break horizontal
       swipes inside the zoomed/lightbox gallery above. */
    body.single-product div.product .flex-control-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;   /* breathing room so the active border isn't clipped */
    }

    body.single-product div.product .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }

    body.single-product .single-product-price .w-price.xl {
        font-size: 30px;
    }

    body.single-product .related.products ul.products,
    body.single-product .upsells.products ul.products,
    body.single-product ul.products.columns-4,
    body.single-product ul.products.columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.single-product .a16a-spec-row {
        gap: var(--space-sm);
    }

    body.single-product .a16a-spec-label {
        flex: 0 0 92px;
        font-size: var(--font-size-xs);
    }

    body.single-product div.product form.cart .button,
    body.single-product div.product form.cart button.single_add_to_cart_button,
    body.single-product .single-product-buynow {
        flex: 1 1 100%;
    }

    body.single-product .single-product-price {
        padding: 14px 16px;
    }

    body.single-product .a16a-shopcard {
        flex-wrap: wrap;
    }
}