/**
 * WooCommerce single product page styles.
 * Loaded conditionally on is_product() only.
 *
 * Ports tab strip and attributes table styling from old theme's
 * theme-styles.min.css. Uses WC default tabs.php markup —
 * no PHP template override needed.
 */

/* ============================================================
 * Tabs strip (ul.tabs.wc-tabs)
 * ============================================================ */

.woocommerce-tabs {
    margin-bottom: 3rem;
}

/* .woocommerce-tabs is a direct child of .container.content-container.product
   (not inside .row/.col-*, see woocommerce/content-single-product.php) — so
   it inherits the container's own 15px edge padding (grid.css .container,
   which wins the cascade tie against .content-container's token padding on
   this one wrapper, see the .content-container.product rule below) directly,
   unlike the gallery/summary columns above it which sit inside .row and got
   flushed via col padding-left/right: 0 in the previous pass. Cancel that
   padding here the same way (scoped negative margin, not grid.css) so the
   tab strip and panel content align with the gallery's left edge and reach
   the container's true right edge, matching production.

   Desktop only (M3, decisions.md #41): below the lg breakpoint the gallery/
   summary columns stack full-width and this same cancel bled the tabs strip
   — a solid-background bar — flush to the literal viewport edge with no
   gutter at all, while the stacked columns above it kept theirs (mobile
   audit F-3 follow-up). Scoping it to ≥992px, where it was verified against
   production, leaves desktop untouched and lets mobile fall through to the
   token-driven padding restored below instead of a literal bleed. */
@media (min-width: 992px) {
    body.single-product .woocommerce-tabs {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0 0 0 0;
    list-style: none;
    border-bottom: 1px solid #c6c6c6;
}

.woocommerce-tabs ul.tabs > li {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.woocommerce-tabs ul.tabs > li > a {
    display: block;
    padding: 0.75rem 1rem; /* >=44px effective tap target (CLAUDE.md), M2 pass */
    color: var(--wt-tab-secondary-text);
    background-color: var(--wt-tab-secondary-bg);
    font-size: 14px;
    /* 700 not 800 — no 800 font file is hosted, see base.css @font-face note */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-tabs ul.tabs > li > a:hover {
    color: #000;
}

.woocommerce-tabs ul.tabs > li.active > a {
    color: var(--wt-tab-secondary-active-text);
    background-color: var(--wt-tab-secondary-active-bg);
}

/* Kill WC default tab pseudo-elements (rounded corners, etc.) */
.woocommerce-tabs ul.tabs > li::before,
.woocommerce-tabs ul.tabs > li::after {
    display: none;
    content: none;
}

/* ============================================================
 * Tab panels
 * ============================================================ */

.woocommerce-tabs .woocommerce-Tabs-panel {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ============================================================
 * Attributes table (Additional information panel)
 * ============================================================ */

.woocommerce-tabs .woocommerce-Tabs-panel table,
.woocommerce-tabs .woocommerce-Tabs-panel table.shop_attributes {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border: 0;
    caption-side: bottom;
    vertical-align: top;
}

/* base.css's site-wide `body { overflow-wrap: anywhere }` (M1b) counts
   toward this table's min-content column sizing under its default
   `table-layout: auto` — it lets the browser shrink the 30%-width th column
   (and squeeze the value column with it) far below its intended width to
   fit ordinary attribute text, since "anywhere" makes almost any word break
   at all. Revert to normal word-boundary wrapping here, scoped to this
   table only — it only matters for a genuinely unbreakable token (a long
   URL/code), same as M1b's original case, not ordinary attribute values. */
.woocommerce-tabs .woocommerce-Tabs-panel table th,
.woocommerce-tabs .woocommerce-Tabs-panel table td {
    overflow-wrap: break-word;
}

.woocommerce-tabs .woocommerce-Tabs-panel table tbody {
    vertical-align: inherit;
}

.woocommerce-tabs .woocommerce-Tabs-panel table tbody tr {
    border: 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel table tbody tr > th,
.woocommerce-tabs .woocommerce-Tabs-panel table tbody tr > td {
    padding: 0.5rem 0.5rem;
    color: #000;
    background-color: transparent;
    border-bottom: 1px solid #dee2e6;
    box-shadow: none;
    text-align: left;
    line-height: 1.4;
    font-style: normal;
}

.woocommerce-tabs .woocommerce-Tabs-panel table tbody tr > th {
    font-weight: 700;
    width: 30%;
}

.woocommerce-tabs .woocommerce-Tabs-panel table tbody tr p {
    margin-bottom: 1rem;
}

.woocommerce-tabs .woocommerce-Tabs-panel table tbody tr p:last-child {
    margin-bottom: 0;
}

/* ========================================================================
 * Single product — summary column
 *
 * Stock WooCommerce markup (no template override). Covers:
 * - Variation form table (labels, selects, reset "Clear" link)
 * - Single variation wrap (stock, price update, add-to-cart button container)
 * - Product meta (SKU, Category)
 * - Stock / availability status
 * ======================================================================== */

/* Summary column wrapper — reset some WC defaults */
.summary.entry-summary {
    position: relative;
}

.summary.entry-summary .product_title {
    margin: 0 0 var(--wt-sp-sm);
    line-height: 1.4; /* prod 56px at 40px; base heading lh (1.2) is too tight here */
}

/* Price (incl. "Starting from:" label) */
.summary.entry-summary .price {
    display: block;
    margin: 0 0 1.5rem 0;
    font-size: 1.125rem;
}

.summary.entry-summary .price .starting-from {
    display: inline-block;
    margin-right: 0.25rem;
    font-weight: 400;
    color: #5d5d5d;
}

/* Variation form table — stack label above select, full-width rows */
.summary.entry-summary .variations_form .variations {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem 0;
}

.summary.entry-summary .variations_form .variations,
.summary.entry-summary .variations_form .variations tbody,
.summary.entry-summary .variations_form .variations tr {
    display: block;
    width: 100%;
}

.summary.entry-summary .variations_form .variations tr {
    margin: 0 0 1rem 0;
}

.summary.entry-summary .variations_form .variations th.label,
.summary.entry-summary .variations_form .variations td.value {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
}

.summary.entry-summary .variations_form .variations th.label {
    margin: 0 0 0.375rem 0;
    font-weight: 700;
    line-height: 1.2;
}

.summary.entry-summary .variations_form .variations th.label label {
    margin: 0;
    font-size: 0.9375rem;
}

/* Select element */
.summary.entry-summary .variations_form .variations td.value {
    position: relative;
}

.summary.entry-summary .variations_form select {
    width: 100%;
    height: auto;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    background-color: #e9f1f1;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    color: #000;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Chevron via inline SVG data URL */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 10px 7px;
}

.summary.entry-summary .variations_form select:focus {
    outline: 0;
    border-color: var(--wt-red);
    box-shadow: 0 0 0 2px rgba(236, 28, 36, 0.15);
}

/* Reset "Clear" link next to select */
.summary.entry-summary .variations_form .reset_variations {
    display: inline-block;
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    line-height: 1;
    color: #5d5d5d;
    text-decoration: underline;
}

.summary.entry-summary .variations_form .reset_variations:hover {
    color: var(--wt-red);
}

/* Visibility — hide reset until a variation is selected (WC toggles this) */
.summary.entry-summary .variations_form .reset_variations[style*="visibility: hidden"] {
    display: none;
}

/* Single variation wrap — dynamic area that appears after selecting a variation */
.summary.entry-summary .single_variation_wrap {
    margin: 1rem 0 0 0;
}

.summary.entry-summary .single_variation .price {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Stock / availability status */
.summary.entry-summary .stock {
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.summary.entry-summary .stock.available-on-backorder {
    color: #5d5d5d;
    font-style: italic;
}

.summary.entry-summary .stock.in-stock {
    color: #46b450;
}

.summary.entry-summary .stock.out-of-stock {
    color: #dc3232;
}

/* Add-to-cart button container */
.summary.entry-summary .woocommerce-variation-add-to-cart {
    margin: 1rem 0;
}

/* Order Now button — matches wt-link button style from old theme */
.summary.entry-summary .single_add_to_cart_button,
.summary.entry-summary button.single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: 0.875rem 2rem;
    background-color: var(--wt-white);
    border: 1px solid var(--wt-red);
    border-radius: 0;
    color: var(--wt-red);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.summary.entry-summary .single_add_to_cart_button:hover,
.summary.entry-summary .single_add_to_cart_button:focus {
    background-color: var(--wt-red);
    color: var(--wt-white);
    outline: 0;
}

.summary.entry-summary .single_add_to_cart_button:disabled,
.summary.entry-summary .single_add_to_cart_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Product meta (SKU, Category) */
.summary.entry-summary .product_meta {
    margin: 1.5rem 0 0 0;
    padding: 1rem 0 0 0;
    border-top: 1px solid #e6e6e6;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.summary.entry-summary .product_meta > span {
    display: block;
    margin: 0 0 0.5rem 0;
}

.summary.entry-summary .product_meta > span:last-child {
    margin-bottom: 0;
}

.summary.entry-summary .product_meta .posted_in {
    color: #5d5d5d;
}

.summary.entry-summary .product_meta .posted_in a {
    color: var(--wt-red);
    text-decoration: none;
}

.summary.entry-summary .product_meta .posted_in a:hover {
    color: #c31a20;
    text-decoration: underline;
}

/* Variation description (small text area that shows per-variation info) */
.summary.entry-summary .woocommerce-variation-description {
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #5d5d5d;
}

/* ========================================================================
 * Single product — gallery slider, zoom trigger, thumbnails, max-height
 *
 * WC's own frontend CSS (woocommerce.css / woocommerce-layout.css) is
 * deregistered site-wide via woocommerce_enqueue_styles => __return_empty_array
 * (inc/woocommerce.php) — that stylesheet is what normally lays out the
 * gallery slider track, ol.flex-control-thumbs, and the zoom trigger.
 * The core layout rules below (.flex-control-thumbs, the nth-child(n+2)
 * shrink-and-clip technique the JS slider relies on, .woocommerce-product-
 * gallery__wrapper transition) are ported verbatim from WC 11.0.1's own
 * woocommerce.css rather than reinvented — the JS (wc-single-product.js /
 * flexslider) positions slides via a CSS transform on the wrapper and
 * depends on this exact contract (confirmed live on staging: a hand-rolled
 * display:none-based approach broke the slider because it fought the JS's
 * assumptions). Kept in our own file instead of re-enabling WC's bundled
 * CSS, per decisions.md #12 (custom CSS over WC default styling). See
 * decisions.md for the full B2-1 diagnosis.
 *
 * Two distinct DOM shapes depending on image count (WC only calls
 * .flexslider() — which adds the transform-driven wrapper + ol.flex-control-
 * thumbs — when there are 2+ images; a single image never gets a
 * .flex-viewport wrapper, confirmed against WC 11.0.1 core source):
 *   Multi-image:  .woocommerce-product-gallery > .flex-viewport > .wrapper > .image (x N)
 *   Single-image: .woocommerce-product-gallery > .wrapper > .image (x1, no .flex-viewport)
 *
 * Scope: single product pages only (body.single-product).
 * ======================================================================== */

/* Gallery/summary row — the .content-container.product wrapper carries the
   theme's standard .container class (grid.css: 15px edge padding), inset
   from the row's true edge. WC's stripped-out layout.css floats used to let
   .images/.summary bleed to the container edge (~48%/48%, confirmed against
   production) — restore that full-width fill for just this row's outer
   edges (not grid.css site-wide, and not the inter-column gutter, which
   still separates the gallery from the summary).

   Desktop only (M3): below the lg breakpoint the columns stack full-width,
   and zeroing only the outer side of each (gallery's left, summary's right)
   left the other, un-zeroed side it its default Bootstrap col padding — a
   15px gutter on gallery's right and summary's left, but 0 on their other
   side. Scoped to ≥992px (side-by-side, verified against production); below
   it both columns keep their default, un-zeroed padding so the row's -15px
   margin self-cancels against it on every side, landing both columns flush
   with .content-container.product's own (token-driven, see below) padding —
   same gutter on every edge, matching the tabs strip below them. */
@media (min-width: 992px) {
    body.single-product .content-container.product > .row > .col-lg-7:first-child {
        padding-left: 0;
    }

    body.single-product .content-container.product > .row > .col-lg-5:last-child {
        padding-right: 0;
    }
}

/* .content-container.product combines .container (grid.css: literal 15px
   padding) with .content-container (base.css: token padding) — equal
   specificity, and grid.css loads after base.css, so .container's literal
   wins the cascade on every width, including mobile (M1's "no literals, no
   bleeds unless token-derived" rule never reached this WC-only wrapper).
   Desktop keeps that pre-existing 15px — it's what the ≥992px bleed above
   was tuned against — but below it there's no bleed left to tune for, so
   restore the real token at the one breakpoint range this fix targets
   (.content-container.product's 2-class specificity beats .container's
   1-class rule without !important). */
@media (max-width: 991px) {
    body.single-product .content-container.product {
        padding-left: var(--wt-container-padding);
        padding-right: var(--wt-container-padding);
    }
}

/* Gallery frame ALWAYS spans the full gallery column width — regardless of
   image count or orientation. A tall/portrait image just sits centered
   inside it (object-fit: contain below), so the WC zoom — which binds to
   this frame — covers the full frame, not a strip the width of the image.
   (Follow-up fix: an earlier :not(:has(.flex-viewport)) rule shrank the
   frame to the image's own width for single-image products — wrong
   direction, removed.) */
body.single-product .woocommerce-product-gallery {
    position: relative;
    width: 100%;
}

/* Wrapper is the slide track the JS transform-pans; ported from WC core */
body.single-product .woocommerce-product-gallery__wrapper {
    transition: all cubic-bezier(0.795, -0.035, 0, 1) 0.5s;
    margin: 0;
    padding: 0;
}

body.single-product .woocommerce-product-gallery__image {
    max-height: 670px;
}

/* Non-first slides shrink to 25% and go inline — this pushes them outside
   the .flex-viewport's clipped width so only the first/active slide shows.
   Ported from WC core (see file header) — required for the JS-driven
   transform panning to work; a display:none approach fights the JS. */
body.single-product .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 25%;
    display: inline-block;
}

body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery__image a img {
    display: block;
    max-height: 670px;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

/* Zoom link — WC binds its zoom (hover magnifier) to this anchor, so it
   must span the full frame width, not just hug the (possibly narrower,
   portrait) image — otherwise zooming only works in a strip the width of
   the image. The <img> inside centers itself via margin: 0 auto above. */
body.single-product .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    max-height: 670px;
}

/* Flex viewport — clips the slide track, caps height */
body.single-product .flex-viewport {
    position: relative;
    max-height: 670px;
    overflow: hidden;
}

/* Zoom trigger (magnifier icon) — WC renders it as the gallery's first
   child; anchor it to the top-right corner of the image frame instead of
   letting it sit inline above the gallery in normal document flow. */
body.single-product .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.single-product .woocommerce-product-gallery__trigger img {
    width: 1.25rem;
    height: 1.25rem;
}

/* Thumbnails — ol.flex-control-thumbs, only present for multi-image
   galleries. WC core's own li{width:25%;float:left} (ported in an earlier
   pass) leaves huge gaps with only 2-3 thumbs, since each li reserves a
   full quarter of the row width regardless of how many exist. flexslider
   JS never sets inline styles on the <li>/<img> here (confirmed live on
   staging — only the main slide divs get JS-driven inline styles), so a
   flex row with a fixed thumb size is safe. */
body.single-product .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0 0;
    padding: 0;
}

body.single-product .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 110px;
    margin: 0;
    list-style: none;
}

body.single-product .flex-control-thumbs li img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

body.single-product .flex-control-thumbs li img.flex-active,
body.single-product .flex-control-thumbs li img:hover {
    opacity: 1;
}