/* =============================================================
   SIEL Shop — Phase 3.2: Product page styling
   Applies to all WooCommerce front-end pages (single product,
   archive, cart, checkout). Uses site tokens: navy #0f1a2e,
   orange #ea6834, peach #fbebe0, Barlow Condensed + Barlow.
   ============================================================= */

/* ── Global shop typography / links ─────────────────────────── */
body.woocommerce, body.woocommerce-page {
    font-family: 'Barlow', sans-serif;
    color: #0f1a2e;
}
body.woocommerce a, body.woocommerce-page a {
    color: #0f1a2e;
    text-decoration: none;
    transition: color 0.2s;
}
body.woocommerce a:hover, body.woocommerce-page a:hover {
    color: #ea6834;
}
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    color: #0f1a2e;
    letter-spacing: 0.02em;
    font-weight: 900;
    line-height: 1;
}

/* Kill rounded corners everywhere on shop */
.woocommerce, .woocommerce input, .woocommerce button, .woocommerce select,
.woocommerce textarea, .woocommerce a.button, .woocommerce img,
.woocommerce .card, .woocommerce .product,
.woocommerce-page, .woocommerce-page input, .woocommerce-page button,
.woocommerce-page select, .woocommerce-page textarea, .woocommerce-page a.button,
.woocommerce-page img, .woocommerce-page .card, .woocommerce-page .product {
    border-radius: 0 !important;
}

/* ── Product/Cart/Checkout page top padding ──────────────────── */
/* GeneratePress stacks padding-top on .site-main (100px) + article
   (100px) + .inside-article (30-40px) = ~230-240px of dead space above
   the content on plain WooCommerce pages — other templates hide this
   behind a hero/featured image (intentionally bleeding under the fixed
   nav), these plain utility pages don't have one. On mobile this ate a
   huge chunk of the visible viewport before any real content appeared
   (found via real screenshots 2026-07-13 — only ever fixed for
   single-product on 2026-07-12, cart/checkout/order-received were never
   covered since they're a different body class).
   The site's <nav> is position:fixed (80px tall, z-index:1000) — zeroing
   this padding completely (rather than resetting it to just enough nav
   clearance) lets content render at y:0 and get hidden entirely behind
   the fixed nav ("le chemin a disparu", found 2026-07-12 on
   single-product) — same risk here, same fix shape. */
body.single-product .site-main,
body.single-product article.type-product,
body.single-product .inside-article,
body.woocommerce-cart .site-main,
body.woocommerce-cart article.type-page,
body.woocommerce-cart .inside-article,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout article.type-page,
body.woocommerce-checkout .inside-article {
    padding-top: 0 !important;
}
body.single-product .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
    padding-top: 6.5rem !important;
}

/* Same stacking problem, sideways: .site-main's own 24px side padding
   PLUS .inside-article's 30px side padding compound to ~54px on each
   side — on a 375px phone that's ~108px (29% of the viewport) spent on
   padding before any form field starts, cramming checkout's inputs into
   a narrow column ("la div utilise une largeur trop petite", found via
   real mobile screenshot 2026-07-13). Desktop is unaffected (54px is
   negligible against a 1200px+ max-width article), so this is scoped to
   mobile only, unlike the padding-top fix above. Drop the redundant
   .inside-article layer, keep .site-main's 24px as the single gutter. */
@media (max-width: 768px) {
    body.single-product .inside-article,
    body.woocommerce-cart .inside-article,
    body.woocommerce-checkout .inside-article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Product page only, on top of the shared reset above: .site-main's 24px
   gutter alone read as too tight against the title/breadcrumb/gallery on
   mobile ("le texte est trop serré", user request 2026-07-15). Cart/checkout
   keep the tighter 24px — that fix was specifically about not cramming
   checkout's form fields, which doesn't apply here. */
@media (max-width: 768px) {
    body.single-product .inside-article {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── Breadcrumbs ────────────────────────────────────────────── */
.woocommerce-breadcrumb {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.55);
    margin: 0 0 2.5rem;
}
.woocommerce-breadcrumb a { color: rgba(15,26,46,0.55); }
.woocommerce-breadcrumb a:hover { color: #ea6834; }

/* ── Single product layout ──────────────────────────────────── */
.woocommerce div.product {
    display: grid;
    /* minmax(0, Nfr), not bare Nfr — a bare `fr` track's automatic
       minimum is its content-based (min-content) size regardless of any
       min-width:0 on the item (that override only kicks in for tracks
       with a FIXED max sizing function, not flexible fr ones per the
       Grid spec's track-sizing algorithm) — the swatch row/description/
       button row/related-slider's unbreakable content was forcing the
       whole track, and the mobile viewport, to ~500px wide regardless of
       the real container width (real horizontal overflow confirmed via
       a 375px iframe test, found 2026-07-13 after the min-width:0-only
       fix below turned out insufficient). minmax(0, 1fr) caps the track's
       automatic minimum at 0 directly, so it truly shrinks to the
       container's real width. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 4rem;
    row-gap: 1rem;
    /* Without this, CSS Grid's default align-items:stretch forces the
       shorter column (usually .images) to stretch to match the taller
       one (.summary, once title/price/tags/variations/buttons/SKU stack
       up) — inflating it with blank space instead of hugging its real
       content. Each column now sizes to its own content, so the
       image-column accordion (.pd-accordion, grid-row:2) sits right
       under the real photo instead of floating in stretched whitespace
       (found 2026-07-12 while investigating why .images looked so tall). */
    align-items: start;
}
.woocommerce div.product .images,
.woocommerce div.product .summary {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    /* Grid items default to min-width:auto, so their track sizes to the
       item's max-content instead of the grid container's own width — the
       size-swatch row's unbreakable total (6 buttons on one line) was
       forcing the whole column, and the mobile viewport, to ~498px wide
       regardless of the real container width (horizontal scroll on
       narrow phones, found 2026-07-13). */
    min-width: 0;
}
.woocommerce div.product .images { grid-column: 1; }
.woocommerce div.product .summary { grid-column: 2; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .up-sells {
    grid-column: 1 / -1;
    clear: both;
}

@media (max-width: 900px) {
    .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .woocommerce div.product .images,
    .woocommerce div.product .summary { grid-column: 1; }
}

/* ── Gallery ────────────────────────────────────────────────── */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    background: #fff;
}
/* Zoom trigger removed entirely on user request 2026-07-12 ("je ne
   comprends pas à quoi il sert") — was WooCommerce's own "🔍" zoom-lightbox
   button; PhotoSwipe zoom-on-click stays off, users just view the gallery
   images directly via the thumbnail strip. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none !important;
}
/* Mobile default (below the 768px vertical-column override further down):
   horizontal swipeable strip instead of a static 4-col grid — a static
   grid showed all thumbnails stacked and was reported as "pas de slider
   horizontal" (user request 2026-07-13); overflow-x + scroll-snap gives
   native touch swiping without needing prev/next buttons on a touch
   device. */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 0.75rem !important;
    display: flex !important;
    overflow-x: auto;
    gap: 0.5rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    /* width (not flex-basis) so the 768px+ override's flex-direction:column
       can still size these normally on the cross axis without a shorthand
       fighting over which axis "72px" applies to. */
    width: 72px !important;
    flex-shrink: 0;
    margin: 0 !important;
    scroll-snap-align: start;
}
.woocommerce div.product div.images .flex-control-thumbs img {
    opacity: 0.55;
    transition: opacity 0.2s;
    cursor: pointer;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
    opacity: 1;
}

/* ── Product info (right column) ────────────────────────────── */
.woocommerce div.product .product_title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: #0f1a2e;
    margin: 0 0 1rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ea6834;
    margin: 0 0 1.5rem;
}
.woocommerce div.product p.price del { opacity: 0.4; font-weight: 400; margin-right: 0.5rem; }
.woocommerce div.product p.price ins { background: transparent; text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(15,26,46,0.75);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(15,26,46,0.1);
}

/* ── Variations / swatches ──────────────────────────────────── */
.woocommerce div.product form.cart .variations {
    border: none;
    margin: 0 0 1.5rem;
}
/* Color shown before Size — tbody promoted to flex so the "order" property
   on each already-block-level <tr> can reorder rows without touching each
   product's own per-product attribute position (user request 2026-07-12). */
.woocommerce div.product form.cart .variations tbody {
    display: flex;
    flex-direction: column;
}
.woocommerce div.product form.cart .variations tr:has(label[for="pa_color"]) { order: 1; }
.woocommerce div.product form.cart .variations tr:has(label[for="pa_size"]) { order: 2; }
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 1.2rem; order: 3; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
    display: block;
    padding: 0;
    line-height: 1.4;
    background: transparent;
}
.woocommerce div.product form.cart .variations label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.55);
    margin-bottom: 0.6rem;
    display: block;
}
/* woo-variation-swatches' own "Size: S" live label — redundant with the
   swatch's own selected/highlighted state, removed on user request. */
.woocommerce div.product form.cart .variations .woo-selected-variation-item-name {
    display: none;
}

/* woo-variation-swatches plugin swatches */
.wvs-style-squared .variable-items-wrapper .variable-item,
.variable-items-wrapper .variable-item {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1.5px solid rgba(15,26,46,0.2);
    background: #fff;
    min-width: 44px;
    height: 44px;
    padding: 0.4rem 0.8rem;
    margin: 0 0.5rem 0.5rem 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f1a2e;
    transition: border-color 0.15s, color 0.15s;
    cursor: pointer;
}
.variable-items-wrapper .variable-item:hover {
    border-color: #ea6834;
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item.selected-variable-item {
    border-color: #ea6834 !important;
    box-shadow: inset 0 0 0 1px #ea6834 !important;
    color: #ea6834;
}
/* Size buttons: the outer .variable-item already had border-radius:0,
   but the plugin's .wvs-style-rounded CSS also puts border-radius:100%
   on the INNER .variable-item-span-button (an ~8×16px text-hugging box,
   not the button itself) — renders as a small oval behind the letter
   ("vignettes ovales dans tailles", found 2026-07-12). */
.button-variable-items-wrapper .variable-item-span {
    border-radius: 0 !important;
}
/* The swatch plugin's own frontend.min.css wins the outer button's size
   (higher-specificity :not() selector) via min-width:44px, which clamps
   width:30px regardless of !important — min-width always wins over width
   in the CSS box model, so it has to be overridden explicitly too. The
   inner span's border-radius:100% was also being applied to a non-square
   box (36×32), rendering an oval instead of a circle (found 2026-07-12).
   Force every layer to the same square size. */
.variable-items-wrapper.color-variable-items-wrapper .variable-item,
.variable-items-wrapper.color-variable-items-wrapper .variable-item-contents,
.variable-items-wrapper.color-variable-items-wrapper .variable-item-span-color {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-width: 2px;
    border-radius: 50% !important;
}
.variable-items-wrapper .variable-item.disabled {
    opacity: 0.35;
    text-decoration: line-through;
}

/* "Clear" reset link hidden — re-clicking a selected swatch already
   deselects it (woo-variation-swatches default behaviour, confirmed
   2026-07-12), so the separate link is redundant. */
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}

/* ── Quantity + Add to cart ─────────────────────────────────── */
.woocommerce div.product form.cart {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin: 1.5rem 0 0;
    flex-wrap: wrap;
}
/* WooCommerce's default form.cart is a float-based clearfix
   (::before/::after { content:""; display:table }), meant to contain
   floated children — meaningless once the form is display:flex, but the
   generated boxes still count as their own flex items, each triggering
   the 1.5rem `gap` above/below the real content (found 2026-07-12
   chasing a 48px-too-tall gap before the Stripe buttons: 2 phantom
   items × 24px gap). */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
    content: none;
    display: none;
}
/* For variable products, WC nests quantity/buttons 3 levels deep inside
   an unnamed wrapper div (form.cart > div > .single_variation_wrap >
   .woocommerce-variation-add-to-cart), and none of those levels were
   flex — the unnamed wrapper stayed at its content width (364px) inside
   the 503px-wide column instead of filling it, and
   .woocommerce-variation-add-to-cart itself was display:block, so the
   flex rules on .quantity/.single_add_to_cart_button below had nothing
   to apply to (found 2026-07-12 chasing why Add to cart stayed short of
   Buy now's width). Stretch every level in the chain. */
.woocommerce div.product form.cart > div:has(.single_variation_wrap) {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.woocommerce div.product .single_variation_wrap,
.woocommerce div.product .woocommerce-variation-add-to-cart {
    width: 100%;
}
.woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    column-gap: 1.5rem;
    row-gap: 0;
    flex-wrap: wrap;
}
/* WC appends hidden inputs (variation_id etc.) and a
   <wc-order-attribution-inputs> custom element after the visible
   buttons, inside this same flex container — even though they render
   at zero height, they still count as their own wrapped flex row, so
   row-gap above them was adding an extra 1.5rem of invisible space
   below Buy now (found 2026-07-12 chasing an oversized gap before the
   Stripe buttons). Pulling them out of flow removes that row entirely. */
.woocommerce div.product .woocommerce-variation-add-to-cart input[type="hidden"],
.woocommerce div.product .woocommerce-variation-add-to-cart wc-order-attribution-inputs {
    display: none;
}
.woocommerce div.product form.cart .quantity {
    margin: 0 !important;
    display: flex;
    align-items: stretch;
    border: 1.5px solid rgba(15,26,46,0.2);
    background: #fff;
    flex: 0 0 auto;
    height: 48px;
    box-sizing: border-box;
}
/* Add to cart stretches to fill the row (edge-to-edge with the quantity
   box), matching the full-width Buy now/Amazon Pay/Link buttons below it
   instead of shrinking to its own text — user request 2026-07-12
   ("bouton cf pj toujours bordelique... bouton full width dans la
   colonne"). Explicit 48px height matches Stripe's own Express Checkout
   buttons (their default, set via the wc_stripe_express_checkout_params
   filter in functions.php) so the whole stack reads as one consistent
   set of buttons instead of 4 different heights (user request
   2026-07-12: "leur donner la même hauteur"). */
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    text-align: center;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce div.product form.cart .quantity input.qty {
    width: 3.5rem;
    height: 100%;
    padding: 0;
    text-align: center;
    border: none;
    background: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f1a2e;
    border-radius: 0;
    -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Override WooCommerce CSS custom properties (WC 8+) */
.woocommerce, .woocommerce-page {
    --wc-primary: #ea6834;
    --wc-primary-text: #ffffff;
    --wc-secondary: #0f1a2e;
    --wc-secondary-text: #ffffff;
    --wc-highlight: #ea6834;
    --wc-highlight-text: #ffffff;
    --wc-content-bg: #ffffff;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
    background-color: #ea6834 !important;
    background-image: none !important;
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    transition: background-color 0.2s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: #d45a28 !important;
    color: #ffffff !important;
}

/* Stock label — relocated by product-gallery.js to sit right under the
   Size row (bounced between there and next to the price on 2026-07-12
   per user feedback; this is the current placement). */
.woocommerce div.product .stock {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #23a06b;
    margin-top: 0.75rem;
}
.woocommerce div.product form.cart .stock.pd-stock-moved {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
.woocommerce div.product .out-of-stock { color: #b83b3b; }

/* Product meta (SKU, categories, tags) */
.woocommerce div.product .product_meta {
    border-top: 1px solid rgba(15,26,46,0.1);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: rgba(15,26,46,0.6);
}
.woocommerce div.product .product_meta > span {
    display: block;
    margin-bottom: 0.4rem;
}
.woocommerce div.product .product_meta a {
    color: #ea6834;
}

/* ── Tabs / description ─────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(15,26,46,0.1);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    gap: 2.5rem;
    border-bottom: 1px solid rgba(15,26,46,0.1);
    background: transparent;
    list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0.8rem 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.4);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #0f1a2e;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ea6834;
    border-bottom-color: #ea6834;
}
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(15,26,46,0.8);
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* ── Related products ──────────────────────────────────────── */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    text-transform: uppercase;
    margin: 4rem 0 2rem;
    color: #0f1a2e;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
    background: transparent;
}
.woocommerce ul.products li.product a { display: block; }
.woocommerce ul.products li.product img {
    margin: 0 0 1rem !important;
    display: block;
    width: 100%;
    height: auto;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f1a2e;
    padding: 0 !important;
    margin: 0 0 0.4rem !important;
    line-height: 1.2;
}
.woocommerce ul.products li.product .price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ea6834;
    margin: 0 0 0.8rem !important;
}
.woocommerce ul.products li.product .button {
    margin-top: 0.5rem;
    padding: 0.65rem 1.2rem;
    font-size: 0.8rem;
}
@media (max-width: 900px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 500px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: 1fr; }
}

/* ── Product card "Option B" — woocommerce/content-product.php override ──
   Approved 2026-07 after reviewing 3 side-by-side proposals with real data
   (product-card-proposals.html): quieter than a wishlist/quick-add overlay,
   just a recto/verso crossfade on hover. Own class names (.card-b-*), not
   WC's ".woocommerce-loop-product__title"/".price" — so the generic loop
   rules above don't apply here, this card is fully self-contained. The
   image reset below needs to beat ".woocommerce ul.products li.product img"
   (4-selector specificity) since position:absolute conflicts with its
   width:100%/height:auto/margin. */
.woocommerce ul.products li.product.card-b {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 26, 46, 0.12) !important;
    padding: 10px !important;
}
.card-b-media {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #fbebe0;
    margin-bottom: 0.9rem;
}
.woocommerce ul.products li.product.card-b .card-b-media img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    transition: opacity 0.45s ease;
}
.card-b-media .img-back { opacity: 0; }
.card-b:hover .card-b-media .img-back { opacity: 1; }
/* .img-back only exists in the DOM when the product actually has a second
   image (content-product.php, conditional) — but this fade-out used to
   fire on .img-front unconditionally, so a product with no second photo
   just faded to nothing on hover instead of staying put ("l'image
   principale disparaît", found 2026-07-15). Only fade the front image out
   when there's a real back image to reveal underneath it. */
.card-b:hover .card-b-media:has(.img-back) .img-front { opacity: 0; }
.card-b-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ea6834;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
}
.card-b-badge-discount {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ea6834;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.card-b-badge-discount strong {
    font-size: 1.15rem;
}
.card-b-badge-discount small {
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.card-b-body { text-align: left; }
.card-b-brand {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.45);
}
.card-b-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #0f1a2e;
    margin: 0.3rem 0 0.5rem;
}
.card-b-foot { display: flex; align-items: center; justify-content: space-between; }
.card-b-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #ea6834;
}
.card-b-swatches { display: flex; gap: 0.35rem; }
.card-b-swatches .dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(15,26,46,0.15);
}

/* =============================================================
   PHASE 3.3 — Archive / Category pages
   Shop main page, product categories, tags, search results.
   ============================================================= */

/* ── Category header (title / description / breadcrumb) ─────── */
.woocommerce-products-header {
    padding: 0 0 2rem;
    margin: 0 0 2rem;
    border-bottom: 1px solid rgba(15,26,46,0.1);
}
.woocommerce-products-header__title,
.page-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    color: #0f1a2e;
    line-height: 0.95;
    margin: 0 0 1rem !important;
    padding: 0 !important;
}
.term-description,
.woocommerce-products-header .term-description {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(15,26,46,0.65);
    line-height: 1.7;
    max-width: 72ch;
    margin: 0;
}
.term-description p:last-child { margin-bottom: 0; }

/* ── Result count + sort toolbar ────────────────────────────── */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    float: none !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.55);
    margin: 0;
    padding: 0;
    line-height: 44px;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
    float: none !important;
    margin: 0;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0f1a2e;
    background: #fff;
    border: 1.5px solid rgba(15,26,46,0.15);
    border-radius: 0 !important;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: 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' fill='none'><path d='M1 1L5 5L9 1' stroke='%230f1a2e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    transition: border-color 0.15s;
}
.woocommerce .woocommerce-ordering select:hover,
.woocommerce-page .woocommerce-ordering select:hover { border-color: #ea6834; }
.woocommerce .woocommerce-ordering select:focus,
.woocommerce-page .woocommerce-ordering select:focus { outline: none; border-color: #ea6834; }

/* Toolbar wrapper: 2-column flex, result-count left, sort right */
.woocommerce > form.woocommerce-ordering,
.woocommerce > p.woocommerce-result-count {
    /* Neutralise WC default half-widths */
    width: auto;
}
.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce-page .woocommerce-notices-wrapper + .woocommerce-result-count {
    margin-top: 0;
}

/* Group toolbar via flex on parent (if theme uses two consecutive elements) */
main.site-main {
    /* Provide a flex row for the toolbar when both elements are direct children */
}
main.site-main > .woocommerce-result-count + .woocommerce-ordering,
main.site-main .woocommerce-result-count + .woocommerce-ordering {
    /* Layouts vary — use grid on the wrapper if the theme wraps them */
}

/* ── Archive: force 3 columns per row ───────────────────────── */
.woocommerce.archive ul.products,
.woocommerce-page.archive ul.products,
body.woocommerce ul.products.columns-2,
body.woocommerce ul.products.columns-3,
body.woocommerce ul.products.columns-4,
body.woocommerce ul.products.columns-5,
body.woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
}
@media (max-width: 768px) {
    .woocommerce.archive ul.products,
    .woocommerce-page.archive ul.products,
    body.woocommerce ul.products.columns-2,
    body.woocommerce ul.products.columns-3,
    body.woocommerce ul.products.columns-4,
    body.woocommerce ul.products.columns-5,
    body.woocommerce ul.products.columns-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}
@media (max-width: 480px) {
    .woocommerce.archive ul.products,
    .woocommerce-page.archive ul.products,
    body.woocommerce ul.products.columns-2,
    body.woocommerce ul.products.columns-3,
    body.woocommerce ul.products.columns-4,
    body.woocommerce ul.products.columns-5,
    body.woocommerce ul.products.columns-6 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Product card (loop item) ───────────────────────────────── */
.woocommerce ul.products li.product {
    background: transparent;
    transition: transform 0.2s;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0.9rem;
    position: relative;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s;
    margin: 0 !important;
}
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img {
    transform: scale(1.03);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0 !important;
    margin: 0 0 0.35rem !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f1a2e;
    line-height: 1.2;
}
.woocommerce ul.products li.product .price {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ea6834 !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product .price del { opacity: 0.4; margin-right: 0.4rem; }
.woocommerce ul.products li.product .price ins { background: transparent; text-decoration: none; }

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background: #ea6834;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 0 !important;
    top: 0.75rem;
    left: 0.75rem;
    right: auto;
    min-height: 0;
    min-width: 0;
    line-height: 1;
    position: absolute;
    margin: 0;
}

/* Hide the loop "Add to cart" for a cleaner card — click card to enter product */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_grouped,
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}

/* ── Pagination ─────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination {
    margin: 3rem 0 1rem;
    text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: inline-flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
    display: block;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid rgba(15,26,46,0.15);
    color: #0f1a2e;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0 0.75rem;
    border-radius: 0 !important;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: #ea6834;
    color: #ea6834;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #0f1a2e;
    color: #fff;
    border-color: #0f1a2e;
}

/* ── Shop archive layout: filters sidebar + product grid ── */
.siel-shop-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
}
.siel-shop-filters {
    flex: 0 0 260px;
    width: 260px;
    position: sticky;
    top: 120px;
}
.siel-shop-main {
    flex: 1;
    min-width: 0;
}
/* Mobile filter drawer — off-canvas panel + dark backdrop, instead of the
   filters just sitting stacked above the grid (no way to dismiss without
   scrolling past). Queued item from shop-mobile-todo, picked up
   2026-07-09. Toggle/backdrop/close/apply markup + JS in
   siel_shop_sidebar_open()/close() (functions.php). */
.siel-filters-toggle {
    display: none;
    width: 100%;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid rgba(15, 26, 46, 0.15);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f1a2e;
    cursor: pointer;
}
.siel-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 26, 46, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.siel-filters-close { display: none; }
.siel-filters-apply-bar { display: none; }
@media (max-width: 900px) {
    .siel-shop-layout {
        flex-direction: column;
    }
    .siel-filters-toggle { display: block; }
    .siel-filter-backdrop.is-open {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    .siel-shop-filters {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 95;
        width: 85%;
        max-width: 340px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    .siel-shop-filters.is-open { transform: translateX(0); }
    body.siel-filters-locked { overflow: hidden; }
    .siel-filters-close {
        display: block;
        background: none;
        border: none;
        font-size: 1.2rem;
        line-height: 1;
        color: #0f1a2e;
        cursor: pointer;
        padding: 0.25rem;
    }
    .yith-wcan-filters { flex: 1; }
    .siel-filters-apply-bar {
        display: block;
        position: sticky;
        bottom: 0;
        padding: 1rem 1.5rem;
        background: #fff;
        border-top: 1px solid rgba(15, 26, 46, 0.08);
    }
    .siel-filters-apply {
        width: 100%;
        justify-content: center;
    }
}

/* ── YITH WooCommerce Ajax Filter sidebar (when added via shortcode) ──
   Real markup verified live (YITH's own class names, not the guessed
   ".yith-wcan-filter-item"/"-title"/"-container" this block used to target,
   which never matched anything and left the sidebar unstyled):
   .yith-wcan-filters > .filters-container > form >
     .yith-wcan-filter.filter-tax[.label-design|.color-design][data-taxonomy]
       > h4.filter-title
       > .filter-content > ul.filter-items > li.filter-item[.label|.color][.active]
           > a[role=button] > span.term-label / span.term-color > span.color-swatch
       > a.show-more
   The "label"/"color" chip look (background, border, active/hover state) is
   entirely CSS-variable-driven by the plugin itself (--yith-wcan-*, see
   assets/css/shortcodes.css) — recoloring those wins over fighting the
   plugin's own ".filter-item.label { box-shadow / border-radius }" rules on
   specificity, and survives plugin CSS updates. Only border-radius/spacing/
   typography need real overrides (site charter = square corners, no radius).
*/
.siel-shop-filters {
    background: #fff;
    border: 1px solid rgba(15,26,46,0.08);
    padding: 0;
    /* Recolor YITH's own chip/swatch theme to match the site charter (navy/orange, square corners) */
    --yith-wcan-labels_style_background: #fff;
    --yith-wcan-labels_style_text: rgba(15,26,46,0.75);
    --yith-wcan-labels_style_background_hover: #ea6834;
    --yith-wcan-labels_style_text_hover: #fff;
    --yith-wcan-labels_style_background_active: #0f1a2e;
    --yith-wcan-labels_style_text_active: #fff;
    --yith-wcan-filters_colors_accent: #0f1a2e;
    --yith-wcan-color_swatches_border_radius: 50%;
}

.siel-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(15,26,46,0.08);
}
.siel-filters-head h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0;
}

.yith-wcan-filters { padding: 0 1.5rem; }
.yith-wcan-filters .filters-container { display: flex; flex-direction: column; }

.yith-wcan-filter {
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(15,26,46,0.08);
}
.yith-wcan-filter:last-child { border-bottom: none; }
.yith-wcan-filter .filter-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0 0 0.9rem;
}
.yith-wcan-filter .filter-content { display: block; }

/* Square corners, no drop-shadow ring (site charter has no border-radius) —
   these two properties are set directly on the plugin's own ".filter-item.label"
   rule, so need matching specificity, not just the CSS vars above. */
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image) {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgba(15,26,46,0.2);
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image) {
    border-color: var(--yith-wcan-labels_style_background_active);
}
.yith-wcan-filter .filter-item a,
.yith-wcan-filter .term-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Gender + Category (taxonomy=product_cat): checkbox rows instead of boxed
   chips, matching the original mockup's ".check-row" style. Selector depth
   matches/exceeds the plugin's own ".filter-item.label" rule (which sets
   display:inline-block + box-shadow) so this actually wins instead of the
   partial override we shipped earlier, which lost the specificity fight and
   rendered as a broken-looking sliver instead of a real checkbox. */
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items {
    display: flex !important;
    flex-direction: column;
    gap: 0.15rem;
}
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items .filter-item.label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items .filter-item.label > a {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    height: auto !important;
    padding: 0.35rem 0;
    color: rgba(15,26,46,0.75) !important;
}
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items .filter-item.label > a::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(15,26,46,0.3);
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items .filter-item.label.active > a::before {
    background: #0f1a2e;
    border-color: #0f1a2e;
}
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items .filter-item.label:hover > a,
.yith-wcan-filters .yith-wcan-filter[data-taxonomy="product_cat"] .filter-items .filter-item.label.active > a {
    color: #0f1a2e !important;
}
.yith-wcan-filter[data-taxonomy="product_cat"] .term-label { font-size: 0.88rem; font-family: 'Barlow', sans-serif; }

/* Color: circular swatch + label underneath, sized/spaced to match the rest */
.yith-wcan-filter[data-taxonomy="filter_color"] .filter-items { gap: 0.9rem; }
.yith-wcan-filter[data-taxonomy="filter_color"] .color-swatch { width: 26px; height: 26px; }
.yith-wcan-filter[data-taxonomy="filter_color"] .term-label {
    font-size: 0.62rem;
    color: rgba(15,26,46,0.6);
}

/* Item count (shown when the preset has "show_count" enabled) */
.item-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem;
    color: rgba(15,26,46,0.4);
    margin-left: 0.25rem;
}

/* "Show more" pagination link on long term lists */
.yith-wcan-filter .show-more {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ea6834;
    cursor: pointer;
}
.yith-wcan-filter .show-more:hover { color: #0f1a2e; }

.yith-wcan-reset-filters,
.reset-filters {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.yith-wcan-reset-filters:hover,
.reset-filters:hover { color: #ea6834; }

/* Active filter chips (YITH) */
.yith-wcan-active-filters .yith-wcan-active-filter,
.yith-wcan-active-filters a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #0f1a2e;
    color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    margin: 0 0.4rem 0.4rem 0;
    border-radius: 0 !important;
}
.yith-wcan-active-filters a:hover { background: #ea6834; color: #fff !important; }

/* =============================================================
   PHASE 3.4 — Cart page
   ============================================================= */

/* Layout: table on the left, totals card on the right */
.woocommerce .woocommerce-cart-form + .cart-collaterals,
.woocommerce-page .woocommerce-cart-form + .cart-collaterals { }

.siel-cart-page-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    line-height: 0.95;
    margin: 0 0 1.5rem;
}
/* Grid placement (grid-column: 1 / -1, spanning both columns) lives with
   the rest of the .woocommerce grid rules further down, since it has to be
   reasoned about together with its siblings' row placement. */
.siel-cart-items-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0 0 1.5rem;
}

/* Unsaved-quantity warning modal */
.siel-qty-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15,26,46,0.6);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.siel-qty-modal-overlay.is-open {
    display: flex;
}
.siel-qty-modal {
    background: #fff;
    max-width: 420px;
    width: 100%;
    padding: 2rem;
    border-top: 4px solid #ea6834;
}
.siel-qty-modal-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0 0 0.75rem;
    line-height: 1.05;
}
.siel-qty-modal-body {
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    color: rgba(15,26,46,0.75);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
.siel-qty-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.siel-qty-modal-update {
    background: #ea6834;
    color: #fff;
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.siel-qty-modal-update:hover {
    background: #0f1a2e;
}
.siel-qty-modal-continue {
    background: none;
    border: none;
    color: rgba(15,26,46,0.6);
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.5rem;
}
.siel-qty-modal-continue:hover {
    color: #0f1a2e;
}

.woocommerce .woocommerce-cart-form,
.woocommerce-page .woocommerce-cart-form {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Cart table */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    border: none !important;
    border-collapse: collapse !important;
    border-radius: 0 !important;
    margin: 0;
    background: transparent;
    width: 100%;
}
.woocommerce table.shop_table thead th,
.woocommerce-page table.shop_table thead th {
    background: transparent;
    padding: 0.9rem 0.5rem !important;
    border-bottom: 2px solid rgba(15,26,46,0.15) !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.6);
    text-align: left;
}
/* ── Line items as cards (2026-07-12) — the default WC table read as a
   cramped spreadsheet on real content (long variant names, discounts).
   Restructured via CSS Grid into media | name+variant+remove | price+qty,
   inspired by the earlier cart.html mockup — same <td> cells, just
   reflowed with grid-template-areas instead of a template override. */
/* Scoped to .woocommerce-cart-form specifically (not the bare
   table.shop_table selector) — the checkout page's order-review table
   shares the same .shop_table class and has a completely different row
   structure (no thumbnail/remove/quantity cells), so an unscoped rule here
   silently broke checkout's "Your Order" box (found + fixed 2026-07-12). */
.woocommerce-cart-form table.shop_table {
    display: block;
}
.woocommerce-cart-form table.shop_table thead {
    display: none;
}
.woocommerce-cart-form table.shop_table tbody,
.woocommerce-cart-form table.shop_table tbody tr.woocommerce-cart-form__cart-item {
    display: block;
}
.woocommerce-cart-form table.shop_table tbody tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    grid-template-areas:
        "media name subtotal"
        "media remove qty";
    column-gap: 1.5rem;
    row-gap: 0.6rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(15,26,46,0.08);
}
.woocommerce-cart-form table.shop_table tbody td {
    /* Cells keep their UA default display:table-cell otherwise, which
       shrink-wraps to content height even as a grid item — the thumbnail
       image's own explicit height then had no room to actually apply. */
    display: block;
    padding: 0 !important;
    border: none !important;
    background: transparent;
    font-family: 'Barlow', sans-serif;
    color: #0f1a2e;
}
/* WooCommerce loads its own woocommerce-smallscreen.css below 768px
   (a SEPARATE stylesheet, media="max-width:768px", not something scoped
   inside woocommerce.css) which turns every .shop_table_responsive row
   into WC's own label+value fallback: `td::before{content:attr(data-title)
   ": "}` (renders "Product:"/"Subtotal:"/"Quantity:" prefixes), forces
   `text-align:right !important` on every td, and hides
   `.product-thumbnail{display:none}` outright. Our custom grid layout
   above only touched `display`, not these, and a plain `text-align` here
   can't beat WC's `!important` regardless of specificity — so on a real
   phone the row silently fell back to WC's default look instead of ours
   (found via real mobile screenshot 2026-07-13: no thumbnail, right-
   aligned "Product:"/"Subtotal:" labels). Neutralize all three. */
.woocommerce-cart-form table.shop_table tbody td::before {
    content: none !important;
}
.woocommerce-cart-form table.shop_table tbody td {
    text-align: left !important;
}
.woocommerce-cart-form table.shop_table .product-thumbnail {
    display: block !important;
}

/* Product thumbnail — spans both rows on the left */
.woocommerce-cart-form table.shop_table .product-thumbnail {
    grid-area: media;
    align-self: start;
}
.woocommerce-cart-form table.shop_table .product-thumbnail img {
    width: 96px;
    height: 120px;
    object-fit: cover;
    display: block;
    margin: 0;
    background: #fbebe0;
    border-radius: 0 !important;
}

/* Product name + variation */
.woocommerce-cart-form table.shop_table .product-name {
    grid-area: name;
    align-self: start;
}
.woocommerce-cart-form table.shop_table .product-name a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0f1a2e;
    text-decoration: none;
}
.woocommerce-cart-form table.shop_table .product-name a:hover { color: #ea6834; }
.woocommerce-cart-form table.shop_table dl.variation {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: rgba(15,26,46,0.6);
}
.woocommerce-cart-form table.shop_table dl.variation dt,
.woocommerce-cart-form table.shop_table dl.variation dd {
    display: inline;
    padding: 0;
    margin: 0;
    font-weight: 400;
}
.woocommerce-cart-form table.shop_table dl.variation dt { font-weight: 700; margin-right: 0.2rem; }
.woocommerce-cart-form table.shop_table dl.variation dd::after { content: ""; display: block; }

/* Unit price — de-emphasized, subtotal carries the real number now */
.woocommerce-cart-form table.shop_table .product-price {
    display: none;
}

/* Subtotal — top-right, the one price that matters per line */
.woocommerce-cart-form table.shop_table .product-subtotal {
    grid-area: subtotal;
    justify-self: end;
    align-self: start;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ea6834;
}

/* Quantity stepper — bottom-right */
.woocommerce-cart-form table.shop_table .product-quantity {
    grid-area: qty;
    justify-self: end;
    align-self: end;
}
.woocommerce-cart-form table.shop_table .product-quantity .quantity {
    display: inline-flex;
    border: 1.5px solid rgba(15,26,46,0.2);
    background: #fff;
    max-width: 110px;
}
.woocommerce-cart-form table.shop_table .product-quantity input.qty {
    width: 3rem;
    min-height: 40px;
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0f1a2e;
    border-radius: 0;
}

/* Remove — bottom-left of the content column, reads as a text action */
.woocommerce-cart-form table.shop_table .product-remove {
    grid-area: remove;
    align-self: end;
}
.woocommerce-cart-form table.shop_table .product-remove a.remove {
    width: auto;
    height: auto;
    line-height: 1;
    padding: 0;
    font-size: 0 !important;
    color: rgba(15,26,46,0.45) !important;
    background: transparent;
    border: none;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.woocommerce-cart-form table.shop_table .product-remove a.remove::before {
    content: "✕";
    font-size: 0.7rem;
}
.woocommerce-cart-form table.shop_table .product-remove a.remove::after {
    content: "Remove";
    font-size: 0.72rem;
    font-weight: 700;
}
.woocommerce-cart-form table.shop_table .product-remove a.remove:hover {
    color: #ea6834 !important;
    background: transparent;
    border-color: transparent;
}
@media (max-width: 560px) {
    .woocommerce-cart-form table.shop_table tbody tr.woocommerce-cart-form__cart-item {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "media name"
            "media subtotal"
            "media remove"
            "media qty";
    }
    .woocommerce-cart-form table.shop_table .product-subtotal,
    .woocommerce-cart-form table.shop_table .product-remove,
    .woocommerce-cart-form table.shop_table .product-quantity {
        justify-self: start;
    }
}

/* Cart actions row (coupon + update) — .coupon (flex, shrink-to-fit) and
   the sibling "Update cart" button both default to inline flow with zero
   gap between them, so they sat pixel-adjacent and read as one fused
   button (found 2026-07-12). Flex + explicit gap on the row fixes it. */
/* Its <tr> is never converted to display:block like the cart-item rows
   above (only tbody tr.woocommerce-cart-form__cart-item is) — left as the
   browser default display:table-row inside a display:block table, it
   shrinks to its own content width instead of spanning the row, so
   td.actions (and anything margin-left:auto inside it) has zero free
   space to work with. Found while right-aligning "Update cart", 2026-07-15. */
.woocommerce-cart-form table.shop_table tbody tr:has(> td.actions) {
    display: block;
    width: 100%;
}
.woocommerce table.shop_table td.actions,
.woocommerce-page table.shop_table td.actions {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.5rem 0 !important;
    border: none !important;
}
/* "Update cart" on its own row below the coupon, right-aligned — user
   request 2026-07-15 (previously sat beside the coupon on the same row). */
.woocommerce table.shop_table td.actions button[name="update_cart"],
.woocommerce-page table.shop_table td.actions button[name="update_cart"] {
    align-self: flex-end;
    margin-left: 0;
}
.woocommerce .cart .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.woocommerce .cart .coupon input[type="text"],
.woocommerce .cart .coupon #coupon_code {
    padding: 0.7rem 1rem;
    border: 1.5px solid rgba(15,26,46,0.2);
    border-radius: 0 !important;
    background: #fff;
    color: #0f1a2e;
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    flex: 1 1 160px;
    max-width: 220px;
    min-width: 0;
}
/* No white-space:nowrap here before, and the button could shrink below
   its own text width (default flex-shrink:1, no floor) whenever the
   input's 220px + this button's content width didn't both fit — on a
   real narrow phone the button ended up narrower than "APPLY COUPON",
   wrapping mid-word ("APPL Y COUP ON", found via a real mobile
   screenshot 2026-07-13). flex-wrap on .coupon above lets the button
   drop to its own line instead of being squeezed. */
.woocommerce .cart .coupon button[name="apply_coupon"] {
    white-space: nowrap;
    flex: 0 0 auto;
}
/* white-space:nowrap alone wasn't enough — a 2nd real mobile screenshot
   showed the button still clipping its own text ("APPLY COU...") instead
   of wrapping, meaning the button's box itself was still being squeezed
   narrower than its text needs. Forcing both the input and button to
   full width below 480px removes the side-by-side fit problem entirely
   instead of relying on flex-shrink/wrap arithmetic. */
@media (max-width: 480px) {
    .woocommerce .cart .coupon input[type="text"],
    .woocommerce .cart .coupon #coupon_code {
        flex: 1 1 100%;
        max-width: none;
    }
    .woocommerce .cart .coupon button[name="apply_coupon"] {
        flex: 1 1 100%;
    }
}
.woocommerce .cart .coupon input[type="text"]:focus,
.woocommerce .cart .coupon #coupon_code:focus {
    outline: none;
    border-color: #ea6834;
}
/* Cart totals sidebar */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
    display: block;
    width: 100%;
    float: none !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    background: #fff;
    padding: 2rem;
    border-top: 3px solid #ea6834;
}
.woocommerce .cart_totals h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f1a2e;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(15,26,46,0.1);
}
.woocommerce .cart_totals table {
    background: transparent;
    border: none;
    width: 100%;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    padding: 0.75rem 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(15,26,46,0.08) !important;
    background: transparent !important;
    font-family: 'Barlow', sans-serif;
    color: #0f1a2e;
    font-size: 0.95rem;
}
.woocommerce .cart_totals table th {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(15,26,46,0.6);
    text-align: left;
    width: 40%;
}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f1a2e;
    border-bottom: none !important;
}
.woocommerce .cart_totals tr.order-total td .amount { color: #ea6834; font-size: 1.4rem; font-family: 'Barlow Condensed', sans-serif; }

.woocommerce .cart_totals .wc-proceed-to-checkout { padding: 1.5rem 0 0; }
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce .cart_totals .wc-proceed-to-checkout .button {
    width: 100%;
    justify-content: center;
    padding: 1.1rem;
    font-size: 1rem;
}

/* Shipping calculator */
.woocommerce .shipping-calculator-button {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ea6834;
}
.woocommerce ul#shipping_method {
    padding: 0;
    margin: 0.5rem 0 0;
}
.woocommerce ul#shipping_method li {
    padding: 0.4rem 0;
    margin: 0;
    font-size: 0.92rem;
}

/* Empty cart state */
.woocommerce .cart-empty,
.woocommerce-page .cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #0f1a2e;
    letter-spacing: 0.03em;
}
.woocommerce .return-to-shop { text-align: center; margin-top: 1rem; }

/* Cross-sells */
.woocommerce .cross-sells > h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 3rem 0 1.5rem;
}

@media (min-width: 900px) {
    /* Two-column layout: table left, totals right — totals narrowed to a
       fixed width (was 1fr, ~42% of a wide container) since its content
       never needs more than ~340px (user feedback 2026-07-12). */
    body.woocommerce-cart main.site-main .woocommerce {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 2rem;
        align-items: flex-start;
    }
    body.woocommerce-cart main.site-main .woocommerce > form.woocommerce-cart-form,
    body.woocommerce-cart main.site-main .woocommerce > .woocommerce-notices-wrapper,
    body.woocommerce-cart main.site-main .woocommerce > .cross-sells { grid-column: 1; }
    /* Explicit grid-row:2 on the title's siblings — needed now that
       .siel-cart-page-title claims row 1 (spanning both columns): without
       it, the empty .woocommerce-notices-wrapper (still a grid item even
       with no visible content) auto-placement-bumps into row 1's column 1
       slot and pushes form.woocommerce-cart-form to row 3, stranding it far
       below .cart-collaterals (pinned to row 2) instead of alongside it.
       Found while adding the cart page title, 2026-07-15. */
    body.woocommerce-cart main.site-main .woocommerce > .siel-cart-page-title { grid-column: 1 / -1; grid-row: 1; }
    body.woocommerce-cart main.site-main .woocommerce > form.woocommerce-cart-form,
    body.woocommerce-cart main.site-main .woocommerce > .woocommerce-notices-wrapper { grid-row: 2; }
    body.woocommerce-cart main.site-main .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 2; position: sticky; top: 120px; }
}

/* =============================================================
   PHASE 3.5 — Checkout page
   ============================================================= */

.woocommerce form.checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .woocommerce form.checkout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Payment gateways (Stripe Express Checkout, etc.) inject their own
   elements before #customer_details in the DOM — without an explicit
   placement, grid auto-placement scattered #order_review onto a row far
   below #customer_details instead of alongside it (found 2026-07-12: "Your
   Order" rendered empty because its content was pushed ~1000px down).
   Any such extra element spans the full width on its own row; the 2 known
   columns span 2 rows so #order_review lands directly under its heading,
   both next to #customer_details regardless of how many extra rows come
   before them. */
.woocommerce form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
    grid-column: 1 / -1;
}

/* Left: customer fields */
.woocommerce form.checkout #customer_details {
    background: #fff;
    padding: 2rem;
}
/* grid-column:2 on #order_review below is unconditional on desktop, but
   on mobile the outer grid collapses to a single explicit column
   (@media max-width:900px above) — requesting a column that doesn't
   exist in the template makes the browser fabricate an *implicit*
   second column just for that item instead of stacking it below, so
   the order summary/payment box rendered as a squeezed sliver beside
   the main form instead of underneath it (found via a real mobile
   screenshot 2026-07-13, never caught since desktop testing never
   crosses the breakpoint). Scoping the explicit placement to desktop
   only lets mobile fall back to plain single-column DOM order. */
@media (min-width: 900px) {
    .woocommerce form.checkout #customer_details {
        grid-column: 1;
        grid-row: span 2;
    }
}
/* WooCommerce's default .col2-set floats billing (.col-1) and shipping+
   notes (.col-2) side by side inside #customer_details, on top of the
   billing/order-review split we already have — reading as a 3rd column.
   "Ship to a different address?" only applies to a minority of orders and
   Order Notes is a minor optional field, so neither needs a permanent
   column of its own (user decision 2026-07-12, matches Baymard Institute
   checkout UX research): stacked into a single fluid column instead. */
.woocommerce form.checkout #customer_details .col2-set {
    display: block;
}
.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2 {
    float: none;
    width: 100%;
}
.woocommerce form.checkout #customer_details .col-2 {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(15,26,46,0.1);
}

/* Right: order review */
.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout #order_review {
    background: #fff;
    padding: 2rem;
    border-top: 3px solid #ea6834;
}
@media (min-width: 900px) {
    .woocommerce form.checkout #order_review_heading,
    .woocommerce form.checkout #order_review {
        grid-column: 2;
    }
}
.woocommerce form.checkout #order_review_heading {
    padding-bottom: 0;
    border-bottom: none;
    margin: 0;
}
.woocommerce form.checkout #order_review { padding-top: 1rem; border-top: none; }
@media (min-width: 900px) {
    .woocommerce form.checkout #order_review { position: sticky; top: 120px; }
}

/* Section headings */
.woocommerce form.checkout h3,
.woocommerce form.checkout #order_review_heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f1a2e;
    margin: 0 0 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(15,26,46,0.1);
}

/* Form rows */
.woocommerce form .form-row {
    margin-bottom: 1rem;
    padding: 0;
}
.woocommerce form .form-row label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.6);
    margin-bottom: 0.4rem;
    display: block;
}
.woocommerce form .form-row .required { color: #ea6834; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1.5px solid rgba(15,26,46,0.15);
    border-radius: 0 !important;
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    color: #0f1a2e;
    line-height: 1.4;
    transition: border-color 0.15s;
    box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: #ea6834;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: #b83b3b;
}

/* Phone field — country flag + dial code (intl-tel-input). The plugin's
   .iti wrapper defaults to display:inline-block (shrink-to-fit), which
   fights our inputs' width:100% — force it to behave like a normal
   block-level field wrapper instead. */
#billing_phone_field .iti {
    width: 100%;
    display: block;
}
.siel-phone-error {
    display: block;
    color: #b83b3b;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

/* Select2 (WC dropdowns) */
.woocommerce .select2-container .select2-selection--single {
    height: auto;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1.5px solid rgba(15,26,46,0.15);
    border-radius: 0 !important;
    box-shadow: none;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
    color: #0f1a2e;
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 1rem;
}

/* "Have a coupon?" / "Returning customer?" toggles */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
    /* Sits as the very first thing on checkout, right under the fixed nav
       with no breathing room — user request 2026-07-15. */
    margin-top: 2rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
    background: #fff;
    border-top: 3px solid #ea6834;
    border-radius: 0 !important;
    /* Same icon/text overlap bug as the cart notices — needs room for
       WooCommerce's own absolutely-positioned ::before icon on the left. */
    padding: 1rem 1.5rem 1rem 3rem;
    margin-bottom: 1.5rem;
    color: #0f1a2e;
    font-family: 'Barlow', sans-serif;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before { color: #ea6834; }
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a {
    color: #ea6834;
    font-weight: 700;
}

/* Order review table */
.woocommerce table.woocommerce-checkout-review-order-table {
    background: transparent;
    border: none;
}
.woocommerce table.woocommerce-checkout-review-order-table thead th {
    background: transparent;
    padding: 0.75rem 0 !important;
    border-bottom: 2px solid rgba(15,26,46,0.15) !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.6);
}
.woocommerce table.woocommerce-checkout-review-order-table tbody td {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(15,26,46,0.08) !important;
    font-size: 0.92rem;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce table.woocommerce-checkout-review-order-table tfoot td {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(15,26,46,0.08) !important;
    background: transparent !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0f1a2e;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    padding-top: 1.2rem !important;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: none !important;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
    color: #ea6834;
    font-size: 1.4rem;
    font-family: 'Barlow Condensed', sans-serif;
}

/* Payment methods */
.woocommerce #payment {
    background: transparent;
    border-radius: 0;
    margin-top: 1.5rem;
}
.woocommerce #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 1rem;
    border: none;
    list-style: none;
}
.woocommerce #payment ul.payment_methods li {
    padding: 1rem 1.2rem;
    margin: 0 0 0.5rem;
    background: #fff;
    border: 1.5px solid rgba(15,26,46,0.12);
    border-radius: 0 !important;
    list-style: none;
}
.woocommerce #payment ul.payment_methods li input[type="radio"] { margin-right: 0.6rem; }
.woocommerce #payment ul.payment_methods li label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0f1a2e;
    font-size: 0.95rem;
    display: inline-block;
    margin: 0;
}
.woocommerce #payment ul.payment_methods li img {
    margin-left: 0.5rem;
    vertical-align: middle;
    max-height: 28px;
}
.woocommerce #payment div.payment_box {
    background: rgba(234,104,52,0.04);
    color: #0f1a2e;
    border-radius: 0 !important;
    margin-top: 0.75rem;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
}
.woocommerce #payment div.payment_box::before {
    border-bottom-color: rgba(234,104,52,0.04) !important;
}

/* Place order button */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
    width: 100%;
    padding: 1.15rem;
    font-size: 1.05rem;
    letter-spacing: 0.15em;
    margin-top: 1rem;
}

/* Terms & privacy checkbox */
.woocommerce-terms-and-conditions-wrapper { margin: 1rem 0; }
.woocommerce .form-row.terms {
    padding: 0;
    margin: 0.75rem 0;
    font-size: 0.85rem;
    color: rgba(15,26,46,0.7);
}
.woocommerce .form-row.terms label { display: inline; letter-spacing: 0; text-transform: none; font-family: 'Barlow', sans-serif; color: rgba(15,26,46,0.7); font-weight: 400; font-size: 0.85rem; }
.woocommerce .form-row.terms .required { color: #ea6834; }

/* Login form (when guest checkout disabled) */
.woocommerce form.login,
.woocommerce form.checkout_coupon,
.woocommerce form.register {
    background: #fff;
    padding: 1.5rem;
    border: 1px solid rgba(15,26,46,0.08);
    border-radius: 0 !important;
    margin-bottom: 1.5rem;
}

/* Thank-you / order-received page */
.woocommerce .woocommerce-order {
    background: #fff;
    padding: 2rem;
}
.woocommerce ul.woocommerce-order-overview,
.woocommerce ul.order_details {
    padding: 1rem 0;
    margin: 0 0 1.5rem;
    border-top: 1px solid rgba(15,26,46,0.1);
    border-bottom: 1px solid rgba(15,26,46,0.1);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.woocommerce ul.woocommerce-order-overview li,
.woocommerce ul.order_details li {
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.55);
    display: flex;
    flex-direction: column;
}
.woocommerce ul.woocommerce-order-overview li strong,
.woocommerce ul.order_details li strong {
    display: block;
    margin-top: 0.3rem;
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: #0f1a2e;
    font-weight: 600;
}

/* Order details line-item table — WooCommerce's default has no product
   image at all (just a text link); siel_order_item_thumbnail() in
   functions.php injects one via the woocommerce_order_item_name filter,
   scoped to is_order_received_page() only (that filter also runs for
   order emails/My Account, where a raw class-based wrapper would
   render badly). User request 2026-07-12 ("plus cohérente + images"). */
.woocommerce table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2.5rem;
}
.woocommerce table.woocommerce-table--order-details thead th {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.5);
    text-align: left;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid rgba(15,26,46,0.1);
}
.woocommerce table.woocommerce-table--order-details tbody td,
.woocommerce table.woocommerce-table--order-details tfoot td,
.woocommerce table.woocommerce-table--order-details tfoot th {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(15,26,46,0.08);
    font-size: 0.95rem;
    color: #0f1a2e;
    text-align: left;
}
/* Amount column centered (product name + row labels like "Subtotal:"
   stay left-aligned) — user request 2026-07-12. */
.woocommerce table.woocommerce-table--order-details thead th.product-total,
.woocommerce table.woocommerce-table--order-details tbody td.product-total,
.woocommerce table.woocommerce-table--order-details tfoot td {
    text-align: center;
}
/* padding-right leaves breathing room before the Total column — the
   product-quantity <strong> below is NOT nested inside
   .siel-order-item-name (WooCommerce echoes it as a separate sibling
   right after the filtered item name), so it's a 3rd flex item here
   that would otherwise sit flush against the cell's edge, touching the
   adjacent Total cell's price text with zero gap (found 2026-07-12: "×
   3" and "98,70 €" rendering as if overlapping). */
.woocommerce table.woocommerce-table--order-details .product-name {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 1.5rem;
}
.siel-order-item-thumb-wrap { flex: 0 0 auto; line-height: 0; }
.siel-order-item-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid rgba(15,26,46,0.1);
    display: block;
}
.siel-order-item-name { flex: 1 1 auto; font-weight: 600; }
.siel-order-item-name a { color: #0f1a2e; }
.siel-order-item-name a:hover { color: #ea6834; }
/* Sibling of .siel-order-item-name, not nested inside it — see note
   above the .product-name flex rule. */
.woocommerce table.woocommerce-table--order-details .product-quantity {
    color: rgba(15,26,46,0.5);
    font-weight: 400;
    flex: 0 0 auto;
}
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* Order details: billing/shipping address cards (default WC markup is
   two unstyled <address> blocks). */
.woocommerce-customer-details { margin-top: 0; }
.woocommerce-customer-details .woocommerce-columns--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
/* Auto-placement put billing in row1/col2 and shipping in row2/col1
   instead of side by side in row1 — grid-column/row on both children
   read back as "auto" (no explicit placement anywhere in the cascade),
   so whatever caused it wasn't traceable via computed styles; forcing
   explicit placement sidesteps it outright rather than chasing the
   root cause further (found 2026-07-12). Scoped to desktop only: below
   700px the parent grid collapses to a single explicit column (see
   media query below), and requesting grid-column:2 there fabricates a
   phantom implicit second column instead of stacking — same bug as the
   checkout page's #order_review, found via a real mobile screenshot
   2026-07-13. */
@media (min-width: 700px) {
    .woocommerce-customer-details .woocommerce-column--billing-address {
        grid-column: 1;
        grid-row: 1;
    }
    .woocommerce-customer-details .woocommerce-column--shipping-address {
        grid-column: 2;
        grid-row: 1;
    }
}
/* WooCommerce's own woocommerce-layout.css (a separate core stylesheet
   from shop.css) floats .col-1 left / .col-2 right at 48% width — these
   classes are still present alongside .woocommerce-column since WC
   reuses the same markup as the checkout page's billing/shipping split.
   Grid items are supposed to ignore float per spec, but the .col-1/.col-2
   float rule kept winning visually here regardless (found 2026-07-12:
   cards rendered scattered instead of in the 2-column grid) — reset
   explicitly rather than relying on that. */
.woocommerce-customer-details .woocommerce-column {
    float: none !important;
    width: auto !important;
    background: #fbebe0;
    padding: 1.5rem;
    border: 1px solid rgba(15,26,46,0.08);
}
.woocommerce-customer-details .woocommerce-column__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: #0f1a2e;
}
.woocommerce-customer-details address {
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(15,26,46,0.75);
}
@media (max-width: 700px) {
    .woocommerce-customer-details .woocommerce-columns--2 { grid-template-columns: 1fr; }
}

/* ── Notices (added to cart, error) ─────────────────────────── */
.woocommerce-notices-wrapper { margin-bottom: 2rem; }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    background: #fff !important;
    border-top: 3px solid #ea6834 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(15,26,46,0.06);
    color: #0f1a2e;
    /* Left padding needs enough room for WooCommerce's own absolutely-
       positioned icon (::before, ~left:1.5em) — the previous uniform
       1.5rem padding collapsed that reserved space, so the icon sat right
       on top of the first letter (found 2026-07-12, real cart bug). */
    padding: 1.2rem 1.5rem 1.2rem 3.25rem !important;
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    color: #ea6834;
}
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
    padding: 0.55rem 1.2rem;
    font-size: 0.78rem;
    float: right;
}

/* =============================================================
   PHASE 3.6 — Single product refinements (mockup alignment)
   Vertical gallery, sticky info, brand eyebrow, tag chips,
   reassurance line, Buy now button, accordion.
   Kept in the SIEL language: orange #ea6834, navy #0f1a2e,
   Barlow Condensed labels, squared corners.
   ============================================================= */

/* ── Vertical thumbnails to the LEFT of the main image ───────── */
@media (min-width: 768px) {
    .woocommerce div.product div.images:has(.flex-control-thumbs) {
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 1rem;
        align-items: start;
    }
    .woocommerce div.product div.images .flex-viewport {
        grid-column: 2;
        grid-row: 1 / -1;
    }
    .woocommerce div.product div.images:has(.flex-control-thumbs) .flex-control-thumbs {
        grid-column: 1;
        grid-row: 2;
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
        margin: 0 !important;
        max-height: 420px;
        overflow-y: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }
    /* Up/down scroll buttons injected by product-gallery.js, only shown
       when there are enough photos to overflow the 420px column. */
    .pd-thumb-arrow {
        grid-column: 1;
        width: 100%;
        height: 26px;
        border: 1px solid rgba(15,26,46,0.2);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        color: rgba(15,26,46,0.6);
        cursor: pointer;
        transition: border-color 0.15s, color 0.15s;
    }
    .pd-thumb-arrow:hover {
        border-color: #ea6834;
        color: #ea6834;
    }
    .pd-thumb-arrow.is-up { grid-row: 1; }
    .pd-thumb-arrow.is-down { grid-row: 3; }
    .pd-thumb-arrow[hidden] { display: none; }
}

/* ── Brand eyebrow above the title ───────────────────────────── */
.woocommerce div.product .pd-brand {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.5);
    margin: 0 0 0.5rem;
}

/* ── Tag chips ───────────────────────────────────────────────── */
.woocommerce div.product .pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}
.woocommerce .tag-chip {
    display: inline-flex;
    align-items: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    background: #fbebe0;
    color: #0f1a2e;
    border: 1px solid #efdccf;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.woocommerce .tag-chip:hover {
    background: #ea6834;
    border-color: #ea6834;
    color: #fff;
}
/* Tags now shown as chips up top — hide the duplicate in meta */
.woocommerce div.product .product_meta .tagged_as { display: none; }

/* ── Reassurance line ────────────────────────────────────────── */
.woocommerce div.product .pd-reassurance {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.woocommerce div.product .pd-reassurance li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    color: rgba(15,26,46,0.7);
    margin: 0;
}
.woocommerce div.product .pd-reassurance svg { color: #ea6834; flex-shrink: 0; }

/* ── "Buy now" button (full width, navy, under Add to cart) ──── */
.woocommerce div.product form.cart .siel-buy-now {
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    height: 48px;
    box-sizing: border-box;
    margin: 0.75rem 0 0;
    background-color: #0f1a2e !important;
    color: #fff !important;
}
.woocommerce div.product form.cart .siel-buy-now:hover {
    background-color: #16243f !important;
}

/* ── Purchase button stack ordering ───────────────────────────
   Add to cart (primary, orange) → Buy now (secondary, navy) → Stripe's
   Express Checkout element (Amazon Pay / Link / Apple Pay / Google Pay,
   whichever the browser supports), each visually distinct so the stack
   reads as "our checkout, OR another way to pay" instead of 3-4
   undifferentiated buttons (user request 2026-07-12: "Ordonner les
   boutons d'achat, d'ajout au panier, Amazon etc."). The element's own
   id is injected by the Stripe gateway plugin, not this theme. */
/* The plugin echoes this element with an inline style="margin-top:1em;
   clear:both;display:none;" directly in its PHP template — inline
   styles always beat an external stylesheet, so width/margin here need
   !important or they're silently ignored (found 2026-07-12: mismatched
   0.75rem-vs-1em gaps read as "écartement pas homogène", and the
   container not reliably reaching full width read as "OR bloque le
   full width"). Amazon Pay and Link render as two separate sibling
   .StripeElement divs inside this container — turning it into a flex
   column with the same 0.75rem gap used between Add to cart/Buy now
   makes every gap in the whole button stack equal, and gives the "OR"
   ::before its own full-width row above both. */
.woocommerce div.product .summary > #wc-stripe-express-checkout-element {
    width: 100% !important;
    margin-top: 0.75rem !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}
.woocommerce div.product .summary > #wc-stripe-express-checkout-element::before {
    content: "OR";
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(15,26,46,0.4);
}
.woocommerce div.product .summary > #wc-stripe-express-checkout-element > div {
    width: 100% !important;
}

/* ── Accordion (replaces the product tabs) ───────────────────── */
/* Sits under the image column (not full-width) so it fills the leftover
   vertical space next to the shorter summary column instead of pushing
   a whole new full-width section below both — user request 2026-07-12
   ("dans la colonne image pour gagner de l'espace"). Falls back to
   full-width below 900px where the layout is single-column anyway. */
.woocommerce div.product .pd-accordion {
    grid-column: 1 / -1;
    clear: both;
    margin-top: 4rem;
}
@media (min-width: 900px) {
    .woocommerce div.product .pd-accordion {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }
    /* Row 1's height is otherwise set by whichever of .images/.summary is
       taller — normally .summary (title/price/tags/variations/buttons/SKU
       stack up taller than a single product photo). Letting .summary span
       into row 2 as well means row 1 only needs to fit .images, so the
       accordion in row 2 starts right under the real photo instead of
       after a row sized to .summary's full height. */
    .woocommerce div.product .summary {
        grid-row: 1 / 3;
    }
}
.woocommerce div.product .pd-acc {
    border-top: 1px solid rgba(15,26,46,0.12);
}
.woocommerce div.product .pd-acc:last-child {
    border-bottom: 1px solid rgba(15,26,46,0.12);
}
.woocommerce div.product .pd-acc summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0f1a2e;
}
.woocommerce div.product .pd-acc summary::-webkit-details-marker { display: none; }
.woocommerce div.product .pd-acc summary .chev {
    transition: transform 0.2s;
    font-size: 0.9rem;
    color: #ea6834;
}
.woocommerce div.product .pd-acc[open] summary .chev { transform: rotate(180deg); }
.woocommerce div.product .pd-acc-body {
    padding: 0 0 1.5rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(15,26,46,0.8);
}
.woocommerce div.product .pd-acc-body > *:first-child { margin-top: 0; }
.woocommerce div.product .pd-acc-body ul { padding-left: 1.2rem; list-style: disc; }
.woocommerce div.product .pd-acc-body h2 { display: none; }

/* =============================================================
   HOME — Shop teaser blocks (band + best sellers + packs)
   ============================================================= */

.siel-shop-band {
    background: #0f1a2e;
    padding: 5rem 3rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.siel-shop-band-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2.5rem;
}
.siel-shop-band .eyebrow {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ea6834;
    margin-bottom: 0.5rem;
}
.siel-shop-band h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    line-height: 0.95;
    margin: 0 0 1rem;
}
.siel-shop-band p {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255,255,255,0.65);
    max-width: 420px;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}
.siel-shop-band-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.siel-shop-band-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 420px;
}
.siel-shop-band-cats a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.siel-shop-band-cats a:hover {
    color: #ea6834;
    border-color: #ea6834;
}
.siel-shop-band-footer-spacer {
    background: #ffffff;
    height: 4rem;
}
@media (max-width: 768px) {
    .siel-shop-band-footer-spacer { height: 2.5rem; }
}

/* Standardized Shop widget trio (2026-07-11): compact photo band + a chip
   row (pack discounts/Spare Parts on Shop the Gear, tipo links on Shop the
   Look) — same light-background chip look reused on both, distinct from
   .siel-shop-band-cats above which is for the dark-navy band context. */
.siel-shop-mini-slider {
    position: relative;
    min-height: 30vh;
    overflow: hidden;
}
.siel-shop-mini-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.siel-shop-mini-slide.is-active { opacity: 1; }
.siel-shop-mini-slide img { width: 100%; height: 100%; object-fit: cover; }
.siel-shop-mini-slider-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(15,26,46,.35);
}
.siel-shop-mini-slider-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
}
/* Small "visit the physical shop" link under the mini-slider band —
   user request 2026-07-14, points at the location section merged into
   the Contact page (Corralejo school + shop addresses/maps/photos). */
.siel-shop-mini-slider-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(15,26,46,0.7);
    background: #fbebe0;
    padding: 0.7rem 1rem;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.siel-shop-mini-slider-pin:hover {
    color: #fff;
    background: #ea6834;
}
.siel-shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
}
.siel-shop-chip {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f1a2e;
    border: 1px solid rgba(15,26,46,0.2);
    padding: 0.55rem 1.1rem;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.siel-shop-chip:hover {
    color: #fff;
    background: #ea6834;
    border-color: #ea6834;
}
.siel-shop-chip.is-cta {
    background: #ea6834;
    color: #fff;
    border-color: #ea6834;
}
.siel-shop-chip.is-cta:hover {
    background: #0f1a2e;
    border-color: #0f1a2e;
}

/* Navy breathing room between the shop widget and the footer, user request
   2026-07-16. Which of siel_render_shop_the_gear() / siel_render_shop_the_
   look() actually renders last varies by template (Kite pages + Home call
   both, in that order — Gear last; Wing/Surf/Camp only call the_look, so
   Look is last there) — :has(+ footer) targets whichever one is truly
   adjacent to the footer instead of hardcoding one, and overlays the
   bottom of its own existing padding rather than adding a new element, so
   it works regardless of call order. */
.siel-shop-teaser:has(+ footer) {
    position: relative;
}
.siel-shop-teaser:has(+ footer)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    background: #0f1a2e;
}
@media (max-width: 768px) {
    .siel-shop-teaser:has(+ footer)::after { height: 2.5rem; }
}

.siel-shop-teaser {
    padding: 5rem 3rem;
    background: #fbebe0;
}
.siel-shop-teaser.is-cream {
    background: #fff;
}
.siel-shop-teaser-inner {
    max-width: 1200px;
    margin: 0 auto;
}
/* Standing rule (user, 2026-07-08): only the hero is full-bleed on desktop
   shop landing pages — every other section, including flat-colour bands,
   must be contained to 1200px like the rest of the site. Move the fill from
   the full-width section onto the 1200px inner box instead of the section
   itself. Scoped per-template (not global) since the home page also reuses
   .siel-shop-teaser for its embedded shop section with a different, still
   full-bleed, design intent — only extend this list when a given shop
   landing page is deliberately brought in line with the rule. */
.page-template-templatesoverall-shop-php .siel-shop-teaser:not(.is-cream),
.page-template-templatesjacobsen-shop-php .siel-shop-teaser:not(.is-cream),
.page-template-templatessiel-apparel-shop-php .siel-shop-teaser:not(.is-cream) {
    background: transparent;
    padding: 0 3rem;
}
.page-template-templatesoverall-shop-php .siel-shop-teaser:not(.is-cream) .siel-shop-teaser-inner,
.page-template-templatesjacobsen-shop-php .siel-shop-teaser:not(.is-cream) .siel-shop-teaser-inner,
.page-template-templatessiel-apparel-shop-php .siel-shop-teaser:not(.is-cream) .siel-shop-teaser-inner {
    background: #fbebe0;
    padding: 5rem 3rem;
}
/* Same containment for the navy "Full range" band at the bottom of
   Jacobsen/Apparel Shop (.siel-shop-band), extended to Apparel Shop
   2026-07-09 ("Aligner Apparel Shop"). */
.page-template-templatesjacobsen-shop-php .siel-shop-band,
.page-template-templatessiel-apparel-shop-php .siel-shop-band {
    background: transparent;
    padding: 0 3rem;
}
.page-template-templatesjacobsen-shop-php .siel-shop-band-inner,
.page-template-templatessiel-apparel-shop-php .siel-shop-band-inner {
    background: #0f1a2e;
    padding: 4rem 3rem;
}
.siel-shop-teaser-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.siel-shop-teaser-head .eyebrow {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ea6834;
    margin-bottom: 0.3rem;
}
.siel-shop-teaser-head h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    line-height: 0.95;
    margin: 0;
}
.siel-shop-teaser-head .siel-shop-see-all,
.siel-cat-row-head .siel-shop-see-all {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f1a2e;
    text-decoration: none;
    border-bottom: 2px solid #ea6834;
    padding-bottom: 2px;
}
.siel-shop-teaser-head .siel-shop-see-all:hover,
.siel-cat-row-head .siel-shop-see-all:hover { color: #ea6834; }

/* Reuse the archive's product-card look for the [products] shortcode output here. */
.siel-shop-teaser ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}
.siel-shop-teaser ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
    .siel-shop-teaser ul.products { grid-template-columns: repeat(2, 1fr); }
    /* .columns-3 rows (Jacobsen Kite/Board/Bar, Complete Packs) were still
       forced to 3 columns on mobile here — the ".columns-3" selector above
       has higher specificity than the 2-column rule right above, so it kept
       winning even inside this media query, and the 3rd card overflowed off
       screen. Fixed by turning .columns-3 rows into a horizontal swipe
       slider on mobile instead of trying to squeeze 3 columns in — user
       feedback 2026-07-08 ("l'un dépasse, présenter sous forme de slide").
       See _previews/mobile-fixes-proposals.html for the approved mockup. */
    .siel-shop-teaser ul.products.columns-3 {
        display: flex !important;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }
    .siel-shop-teaser ul.products.columns-3::-webkit-scrollbar { display: none; }
    .siel-shop-teaser ul.products.columns-3 li.product {
        scroll-snap-align: start;
        flex: 0 0 64%;
        width: 64%;
    }
    /* The discount sticker was sized for desktop cards (64px) and swallowed
       most of the small mobile product photo — shrunk to match. */
    .card-b-badge-discount {
        width: 52px;
        height: 52px;
    }
    .card-b-badge-discount strong { font-size: 1rem; }
    .card-b-badge-discount small { font-size: 0.5rem; }
}

/* =============================================================
   Landing pages (Overall / Siel Apparel / Jacobsen Shop)
   ============================================================= */

.siel-shop-hero {
    background: #0f1a2e;
    padding: clamp(4rem, 10vw, 7rem) 3rem;
    text-align: center;
}
.siel-shop-hero .eyebrow {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ea6834;
    margin-bottom: 1rem;
}
.siel-shop-hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    line-height: 0.95;
    margin: 0 0 1.2rem;
}
.siel-shop-hero h1 em { color: #ea6834; font-style: normal; }
.siel-shop-hero p {
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}
.siel-shop-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Full-bleed photo slider variant (Overall Shop hero) — real shop-front
   photos behind the text instead of a flat navy background. Approved after
   comparing 2 mockups with real photos, see git history / memory.
   .siel-shop-hero-video (Jacobsen Shop hero, added 2026-07-08) shares this
   same full-bleed/content-positioning treatment — only the background layer
   differs (a <video> instead of a photo slide). */
.siel-shop-hero-slider,
.siel-shop-hero-video {
    position: relative;
    min-height: 44rem;
    padding: 0;
    text-align: left;
    overflow: hidden;
}
.siel-shop-hero-slides { position: absolute; inset: 0; }
.siel-shop-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}
.siel-shop-hero-slide.is-active { opacity: 1; }
.siel-shop-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.siel-shop-hero-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Reused across the hero slider, the intro band and the school-page mini
   slider (siel_render_video_layer(), 2026-07-15) — a video dropped on top
   of whatever photo/background the caller already renders, removed by JS
   if it fails to load so that photo shows through untouched. z-index:0
   keeps it below each caller's own text-legibility scrim/gradient. */
.siel-video-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.siel-shop-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,26,46,.25) 0%, rgba(15,26,46,.15) 40%, rgba(15,26,46,.88) 100%);
}
.siel-shop-hero-slider .siel-shop-hero-content,
.siel-shop-hero-video .siel-shop-hero-content {
    position: relative;
    z-index: 2;
    min-height: 44rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 24px 3.5rem;
    width: 100%;
}
.siel-shop-hero-slider h1,
.siel-shop-hero-video h1 { max-width: 16ch; margin-bottom: 0.4rem; }
.siel-shop-hero-slider p,
.siel-shop-hero-video p { margin: 0.9rem 0 0; max-width: 56ch; }
.siel-shop-hero-subtitle {
    font-family: 'Barlow', sans-serif;
    text-transform: none !important;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.siel-shop-hero-slider .siel-shop-hero-actions,
.siel-shop-hero-video .siel-shop-hero-actions { justify-content: flex-start; margin-top: 1.6rem; }
.siel-shop-hero-arrows {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 1.25rem;
    transform: translateY(-50%);
    pointer-events: none;
}
.siel-shop-hero-arrow {
    pointer-events: auto;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.siel-shop-hero-arrow:hover { background: #ea6834; border-color: #ea6834; }
.siel-shop-hero-dots {
    position: absolute;
    z-index: 3;
    bottom: 1.5rem;
    right: clamp(1.5rem, 5vw, 4rem);
    display: flex;
    gap: 0.5rem;
}
.siel-shop-hero-dot {
    width: 1.75rem;
    height: 3px;
    background: rgba(255,255,255,.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}
.siel-shop-hero-dot.is-active { background: #ea6834; }
@media (max-width: 600px) {
    .siel-shop-hero-slider,
    .siel-shop-hero-slider .siel-shop-hero-content,
    .siel-shop-hero-video,
    .siel-shop-hero-video .siel-shop-hero-content { min-height: 32rem; }
    /* At 32rem the bottom-packed text block (title/subtitle/desc/CTA) takes
       up most of the box, so the arrows' desktop top:50% lands mid-text
       instead of in empty photo space above it — found on Siel Apparel
       Shop's hero 2026-07-11 (longer copy than Overall Shop's, which is
       why this went unnoticed in the 2026-07-08 mobile pass). Pinned near
       the top instead, clear of the content regardless of its height, plus
       a scrim-friendly semi-opaque circle since there's no scrim gradient
       that high up to guarantee contrast. */
    .siel-shop-hero-arrows {
        top: 1.25rem;
        transform: none;
    }
    .siel-shop-hero-arrow {
        background: rgba(15,26,46,.45);
    }
}

/* Full-bleed intro band for a single universe (Siel Apparel / Jacobsen),
   further down the Overall Shop page — same photo + scrim treatment as the
   hero and the universe cards. Added on user feedback 2026-07-07. */
.siel-shop-intro-band {
    position: relative;
    min-height: 22rem;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #0f1a2e;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.siel-shop-intro-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(15,26,46,.9) 0%, rgba(15,26,46,.55) 55%, rgba(15,26,46,.35) 100%);
}
.siel-shop-intro-band-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    width: 100%;
}
.siel-shop-intro-band .eyebrow {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ea6834;
    margin-bottom: 0.6rem;
}
.siel-shop-intro-band h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    line-height: 0.95;
    margin: 0 0 1rem;
    max-width: 14ch;
}
.siel-shop-intro-band p {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255,255,255,0.75);
    max-width: 46ch;
    margin: 0 0 1.6rem;
    line-height: 1.6;
}
@media (max-width: 600px) {
    .siel-shop-intro-band { min-height: 18rem; }
}

.siel-universes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}
.siel-universes.cols-3 { grid-template-columns: repeat(3, 1fr); }
.siel-universe-card {
    position: relative;
    display: block;
    background-color: #0f1a2e;
    background-size: cover;
    background-position: center;
    padding: 3rem 2.5rem;
    text-decoration: none;
    border-top: 3px solid #ea6834;
    overflow: hidden;
    min-height: 320px;
}
/* Dark scrim over the photo so the white text/links stay legible — same
   treatment as the hero slider, approved 2026-07-07 to replace the flat
   navy block (see _previews/overall-shop-universe-bg-proposals.html). */
.siel-universe-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15,26,46,.55) 0%, rgba(15,26,46,.85) 100%);
    transition: background 0.2s;
}
.siel-universe-card:hover::before { background: linear-gradient(160deg, rgba(15,26,46,.4) 0%, rgba(15,26,46,.75) 100%); }
.siel-universe-card .eyebrow {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ea6834;
    margin-bottom: 0.6rem;
}
.siel-universe-card h2 {
    position: relative;
    z-index: 1;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    line-height: 0.95;
    margin: 0 0 1rem;
}
.siel-universe-card p {
    position: relative;
    z-index: 1;
    font-size: 0.92rem;
    font-weight: 300;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin: 0 0 1.2rem;
    max-width: 42ch;
}
.siel-universe-card .siel-universe-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.siel-universe-card .siel-universe-links span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}
.siel-universe-cta {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 1.4rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.7rem 1.3rem;
    border: 1px solid rgba(255,255,255,0.5);
    transition: background 0.15s, border-color 0.15s;
}
.siel-universe-card:hover .siel-universe-cta { background: #ea6834; border-color: #ea6834; }

/* Universes band: no beige gutter, edge-to-edge (user feedback 2026-07-07 —
   the flat colour frame around the cards wasn't needed now that the cards
   themselves carry real photos). */
/* Option 2 (user-picked 2026-07-07, see _previews/overall-shop-spacing-proposals.html):
   same hero as before, but a real white breathing gap before the cards, and
   the cards are no longer edge-to-edge — real gutters/margins around them
   like an actual "card" rather than a full-bleed band. */
.siel-shop-universes-section {
    padding: 4rem 24px;
}
.siel-universes {
    max-width: 1200px;
    margin: 0 auto;
    gap: 24px;
}

.siel-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.siel-pillars.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Horizontal row of plain text links (e.g. Packs/Accessories/Spare Parts
   under the Jacobsen product zoom) — distinct from the boxed .siel-pillars
   grid: auto-width buttons centered in a row, not stretched to match the
   product columns above, with real breathing room separating the two.
   User feedback 2026-07-07. */
.siel-secondary-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}
.siel-secondary-link {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f1a2e;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    border: 1px solid rgba(15,26,46,0.15);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.siel-secondary-link:hover { border-color: #ea6834; background: #ea6834; color: #fff; }
.siel-pillar {
    display: block;
    background: #fff;
    border: 1px solid rgba(15,26,46,0.1);
    padding: 1.8rem 1.2rem;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s;
}
.siel-pillar:hover { border-color: #ea6834; }
.siel-pillar-name {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f1a2e;
}

/* Image-backed pillars ("Shop by category") — a real flat-lay of the
   garment, zoomed and pushed off the right edge so only half of it shows
   inside the tile, name label on the left in front. User feedback
   2026-07-07: "zoom qui fait que l'image est coupée en deux et la moitié
   du vêtement à droite". */
.siel-pillar.has-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 1.4rem 1.2rem;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.siel-pillar.has-image:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 26, 46, 0.18);
}
.siel-pillar-img {
    position: absolute;
    top: 50%;
    right: -38%;
    width: 75%;
    height: auto;
    transform: translateY(-50%) scale(1.35);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.siel-pillar.has-image:hover .siel-pillar-img {
    transform: translateY(-50%) scale(1.5);
}
.siel-pillar.has-image .siel-pillar-name { position: relative; z-index: 1; }

/* Product zoom variant (Jacobsen Kite/Board/Bar/Grip) — real lifestyle/
   action photos, shown full-cover (not bled off the edge like the Siel
   Apparel flat-lays above) with the name + price on a bottom scrim, closer
   to a classic "product hero card". User request 2026-07-08. */
.siel-pillar.siel-pillar-product {
    aspect-ratio: 4 / 5;
    align-items: flex-end;
    padding: 0;
    background: #0f1a2e;
}
.siel-pillar.siel-pillar-product .siel-pillar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1);
    object-fit: cover;
}
.siel-pillar.siel-pillar-product:hover .siel-pillar-img {
    transform: scale(1.08);
}
.siel-pillar.siel-pillar-product::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,26,46,0) 45%, rgba(15,26,46,.85) 100%);
    pointer-events: none;
}
.siel-pillar.siel-pillar-product .siel-pillar-name {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.2rem 1.2rem 1.4rem;
    color: #fff;
}
.siel-pillar-sub {
    display: block;
    font-family: 'Barlow', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    margin-top: 0.3rem;
}
.siel-pillar-desc {
    display: block;
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(15,26,46,0.55);
    margin-top: 0.4rem;
    line-height: 1.4;
}

/* Image-backed pillars ("Shop by category") as a horizontal swipe slider —
   at every viewport width, not just mobile. Started as a mobile-only fix
   (tiles were cramped into 130px squares there), user then asked for the
   same slider treatment on desktop too (2026-07-08) since it reads better
   than a static grid once there are 6 real tiles (Caps/Dress/Sweater/
   T-Shirt/Swimwear/Accessories) needing 2 rows. Plain text-only pillars
   (Men/Woman/Kids, Jacobsen accessory categories) keep the grid layout
   below, unaffected — only rows built with a real image map
   (siel_apparel_type_images()) get the ".has-images" modifier class from
   siel_render_pillars(). */
.siel-pillars.has-images {
    position: relative;
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}
.siel-pillars.has-images::-webkit-scrollbar { display: none; }
.siel-pillars.has-images .siel-pillar {
    scroll-snap-align: start;
    flex: 0 0 23%;
    width: 23%;
}
@media (max-width: 900px) {
    .siel-universes { grid-template-columns: 1fr; }
    .siel-universes.cols-3 { grid-template-columns: 1fr; }
    .siel-pillars, .siel-pillars.cols-5 { grid-template-columns: repeat(2, 1fr); }
    .siel-pillars.has-images .siel-pillar {
        flex: 0 0 58%;
        width: 58%;
    }
}

/* Slider nav (arrows + dots) for image-backed pillar rows — added on user
   feedback 2026-07-08 ("avec une nav : des flèches sur desktop ou
   points"). Same visual language as the hero slider's own arrows/dots
   (siel-shop-hero-arrow/-dot), reused here for consistency. */
.siel-pillars-wrap {
    position: relative;
}
.siel-pillars-wrap.is-slider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.siel-pillars-wrap.is-slider .siel-pillars { flex: 1 1 auto; min-width: 0; }
.siel-pillars-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(15,26,46,0.15);
    background: #fff;
    color: #0f1a2e;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.siel-pillars-arrow:hover {
    border-color: #ea6834;
    background: #ea6834;
    color: #fff;
}
.siel-pillars-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.25rem;
}
.siel-pillars-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15,26,46,0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.siel-pillars-dot.is-active {
    background: #ea6834;
    transform: scale(1.25);
}
@media (max-width: 900px) {
    /* Touch swipe already covers navigation on mobile — the arrows fought
       for space against the tiles at 390px, so hidden there; dots stay
       (small, useful as a position indicator either way). */
    .siel-pillars-arrow { display: none; }
}

/* Siel Apparel Shop "Shop by category" — one row per category, each a
   horizontal product slider (real WC products, arrows reuse the
   .siel-pillars-arrow visual language). User request 2026-07-09: "1 ligne
   égale 1 catégory avec plusieurs produits (slider) par category". */
.siel-cat-row { margin-bottom: 2.75rem; }
.siel-cat-row:last-child { margin-bottom: 0; }
.siel-cat-row-head {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}
.siel-cat-row-head h3 { font-size: 1.2rem; margin: 0; }
.siel-cat-row-wrap.is-slider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.siel-cat-row-wrap.is-slider .siel-cat-row-track {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}
.siel-cat-row-track::-webkit-scrollbar { display: none; }
.siel-cat-row-track ul.products {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 1.25rem;
}
.siel-cat-row-track ul.products li.product {
    scroll-snap-align: start;
    flex: 0 0 240px;
    width: 240px !important;
}
@media (max-width: 900px) {
    .siel-cat-row-track ul.products li.product {
        flex: 0 0 62%;
        width: 62% !important;
    }
}

/* Dress + Swimwear mini block — last in "Shop by category", side by side on
   desktop, 2 products each (padded/duplicated if a category only has 1 real
   product in stock). User request 2026-07-11: not enough real products yet
   for a full slider row, so a compact static 2-up block instead. */
.siel-cat-row-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.siel-cat-row-duo .siel-cat-row-static {
    /* .siel-shop-teaser ul.products (higher up in this file) forces a
       4-column grid on any product list inside .siel-shop-teaser, which
       this duo block lives inside — its grid-template-columns wasn't
       !important, so it silently won here and squeezed each of the 2 real
       cards into a quarter-width column instead of a half. !important +
       explicit ~240px sizing (matching the main slider cards, rather than
       stretching to fill the half-width panel) fixes both the override and
       keeps card size consistent with the rest of the section (user
       feedback 2026-07-11: "tu n'étais pas obligé de réduire les cartes"). */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 240px)) !important;
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .siel-cat-row-duo { grid-template-columns: 1fr; }
    /* Fixed 240px cards don't fit a half-width mobile panel (2×240px+gap
       overflows well past a 390px viewport) — shrink to fill evenly. */
    .siel-cat-row-duo .siel-cat-row-static {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Jacobsen "Rider essentials" feature rows — full-width photo/copy rows,
   alternating sides, replacing the tile slider on user request 2026-07-08
   ("les mettre plus en avant... une ligne par produit"). */
.siel-feature-rows {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* Same 2-column grid as .siel-feature-duo below (identical gap = identical
   "padding column" width) so the whole "Rider essentials" block reads as
   one consistent grid, rather than the feature rows using their own
   arbitrary center gap. User request 2026-07-08: "j'aimerais que tu gardes
   ce même padding [Accessories/Spare Parts] pour les mise en avant produit
   et que tu y alignes images et textes". Image and text still hug the
   center gutter (justify-self) rather than stretching across their full
   ~570px column, so they stay visually close together like before — only
   the outer column boundaries (and gap) now match the duo's grid. */
.siel-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.siel-feature-row.is-reverse .siel-feature-row-media { order: 2; justify-self: start; }
.siel-feature-row.is-reverse .siel-feature-row-content { order: 1; justify-self: end; }
/* Text (+ CTA, since .siel-cta is inline-flex and follows text-align) always
   faces the image across the center gutter — right-aligned when the text
   column is on the left, left-aligned when it's on the right (default).
   User request 2026-07-08: "quand le texte [est en colonne de gauche],
   texte et CTA aligné à droite. Et vice versa." */
.siel-feature-row.is-reverse .siel-feature-row-content {
    text-align: right;
}
.siel-feature-row-media {
    display: block;
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fbebe0;
}
.siel-feature-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.siel-feature-row-media:hover img { transform: scale(1.05); }
.siel-feature-row-content {
    /* Explicit (not just relying on the block default) — the right-hand
       column on non-reversed rows (Kite, Bar) must read left-aligned like
       every other text block on the page, not centered. User feedback
       2026-07-08: "quand le texte est dans la colonne de droite, il
       devrait être aligné à gauche". */
    text-align: left;
    justify-self: start;
    max-width: 420px;
}
.siel-feature-row-content .eyebrow {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ea6834;
    margin-bottom: 0.4rem;
}
.siel-feature-row-content h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0 0 0.5rem;
    line-height: 1.05;
}
.siel-feature-row-content p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(15, 26, 46, 0.7);
    margin: 0 0 0.9rem;
    max-width: 44ch;
}
.siel-feature-row-price {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #ea6834;
    margin-bottom: 0.9rem;
}

/* Real ecommerce studio photos (Bar/Grip) are tall 4:5 product shots on a
   plain background — the wide 16:10 crop used for the lifestyle rows above
   was cutting off the top/bottom of the product, so these get their own
   aspect-ratio + object-fit:contain (no cropping). Narrowed to a fixed
   column on top of that, shrinking the whole row — user feedback
   2026-07-08: "images tronquées" then "réduire à nouveau... quitte à
   réduire les photos en largeur c'est ok". */
.siel-feature-row.is-studio .siel-feature-row-media {
    max-width: 300px;
    aspect-ratio: 4 / 5;
}
.siel-feature-row.is-studio .siel-feature-row-media img {
    object-fit: contain;
    padding: 1.25rem;
    box-sizing: border-box;
}
.siel-feature-row.is-studio .siel-feature-row-media:hover img { transform: scale(1.03); }

/* Accessories/Spare Parts side by side (2 columns, 1 row) instead of 2
   stacked full-width rows — user request 2026-07-08. */
.siel-feature-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.siel-feature-duo-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.siel-feature-duo-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fbebe0;
    margin-bottom: 1rem;
}
.siel-feature-duo-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.5rem;
    box-sizing: border-box;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.siel-feature-duo-item:hover .siel-feature-duo-media img { transform: scale(1.05); }
.siel-feature-duo-content { text-align: left; }
.siel-feature-duo-content h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0 0 0.35rem;
}
.siel-feature-duo-content p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(15, 26, 46, 0.7);
    margin: 0 0 0.9rem;
}
.siel-feature-duo-content .siel-cta { display: inline-block; }

@media (max-width: 780px) {
    .siel-feature-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .siel-feature-row.is-reverse .siel-feature-row-media,
    .siel-feature-row.is-reverse .siel-feature-row-content { order: 0; }
    /* Right-aligned text only makes sense next to a same-height image
       column — stacked single-column mobile always reads left. */
    .siel-feature-row.is-reverse .siel-feature-row-content { text-align: left; }
    .siel-feature-row-media,
    .siel-feature-row-content,
    .siel-feature-row.is-reverse .siel-feature-row-media,
    .siel-feature-row.is-reverse .siel-feature-row-content { max-width: 100%; justify-self: stretch; }
    .siel-feature-row-media { aspect-ratio: 4 / 3; }
    .siel-feature-row.is-studio .siel-feature-row-media { aspect-ratio: 4 / 5; max-width: 260px; margin: 0 auto; }
    .siel-feature-duo { grid-template-columns: 1fr; gap: 2rem; }
}

/* "Chantier" diagonal-stripe banner for Complete Packs — puts the real
   discount (20% max across the 3 packs) right in the header instead of
   only on the card badges. User request 2026-07-08. Switched from
   orange/white to the site's own navy/white (site palette) after a report
   of the orange version looking buggy. */
.siel-packs-banner {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
}
/* Oversized (200px overscan each side) so translateX() can never expose an
   empty edge — sliding a rigid pre-painted layer via transform instead of
   animating background-position avoids the diagonal-gradient re-tiling
   seam ("bug de raccord") the first version had. */
.siel-packs-banner-stripes {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -200px;
    right: -200px;
    background: repeating-linear-gradient(-45deg, #0f1a2e 0 24px, #fff 24px 48px);
    will-change: transform;
}
.siel-packs-banner span {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: #ea6834;
    color: #fff;
    padding: 0.5rem 1.4rem;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    font-size: clamp(0.85rem, 2.2vw, 1.15rem);
}

/* Closing "ask us" WhatsApp CTA — user request 2026-07-08. Contained to
   1200px via the shared .siel-shop-teaser-inner wrapper (not full-bleed —
   see standing rule: only the hero is full width on desktop). */
.siel-shop-ask-band {
    text-align: center;
    padding: 1.5rem 0 2.5rem;
}
.siel-shop-ask-band h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #0f1a2e;
    margin: 0 0 0.6rem;
}
.siel-shop-ask-band p {
    font-size: 1rem;
    color: rgba(15, 26, 46, 0.65);
    margin: 0 0 1.5rem;
}
/* Bounce to draw the eye without being annoying on a loop — 2 quick hops
   then a 2s pause before repeating. User request 2026-07-08. */
@keyframes siel-cta-bounce {
    0%, 20%, 40%, 100% { transform: translateY(0); }
    10% { transform: translateY(-8px); }
    30% { transform: translateY(-4px); }
}
.siel-cta-bounce {
    animation: siel-cta-bounce 2.8s ease-in-out infinite;
}
.siel-cta-bounce:hover { animation-play-state: paused; }