/*
 * product.css — Session 14, consolidated Session 27
 * Single product page styles. Enqueued on is_product() only.
 * Uses --silure- design tokens. Reference-driven layout (vertical gallery,
 * split CTA, feature badges, reviews, full-width sections).
 */

/* ─────────────────────────────────────────────────────────────────────
   PAGE WRAPPER
   ───────────────────────────────────────────────────────────────────── */

.silure-product-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   BREADCRUMB
   Session 101: this whole rule is shadowed, on every property it
   shares with silure-woocommerce.css's own .silure-product-breadcrumb
   rule — silure-woocommerce.css always loads wherever product.css
   does (is_woocommerce() covers is_product()) and is enqueued later,
   winning every same-specificity tie. That file's copy (font-family,
   size, weight, letter-spacing, color) is what actually renders; this
   copy is corrected here to match so it stops misrepresenting live
   behavior to anyone reading this file. padding differs between the
   two (this file says 20px 80px; silure-woocommerce.css's 14px 40px
   is what's real) — left as-is, out of scope for this pass, flagged
   in MASTER_CONTEXT.md for Manish's awareness.
   ───────────────────────────────────────────────────────────────────── */

.silure-product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 80px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
}

.silure-product-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.silure-product-breadcrumb a:hover {
    color: var(--silure-primary, #050505);
}

.silure-product-breadcrumb [aria-current="page"] {
    color: var(--silure-primary, #050505);
}

/* ─────────────────────────────────────────────────────────────────────
   TWO-COLUMN LAYOUT — gallery left, info right
   ───────────────────────────────────────────────────────────────────── */

.silure-product-layout {
    display: grid;
    grid-template-columns: minmax(0, calc(48% + 41.6px)) 1fr;
    align-items: start;
    gap: 0;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   GALLERY — LEFT COLUMN (vertical thumb sidebar + main image)
   ───────────────────────────────────────────────────────────────────── */

.silure-product-gallery {
    background: var(--silure-surface, #F3F0EB);
}

/* Thumbnail strip — kept in the DOM for JS active-state sync and
   screen readers, but not visually rendered (arrows + progress bar
   replace it as the visible nav). */
.silure-gallery-thumbs {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.silure-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

/* Main image wrap — full width, flush to the column's left edge */
.silure-gallery-main-wrap {
    position: relative;
    width: 100%;
}

/* Main image area — true 1:1 square */
.silure-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--silure-surface, #F3F0EB);
}

.silure-gallery-zoom-btn {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: none;
    cursor: zoom-in;
    position: relative;
}

.silure-gallery-zoom-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.55s ease;
}

.silure-gallery-zoom-btn:hover img {
    transform: scale(1.03);
}

/* Hover-reveal nav arrows */
button.silure-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 5, 5, 0);
    border: none;
    color: var(--silure-text, #444444);
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

button.silure-gallery-nav svg {
    width: 16px;
    height: 16px;
    display: block;
}

.silure-gallery-nav-prev { left: 12px; }
.silure-gallery-nav-next { right: 12px; }

@media (hover: hover) and (pointer: fine) {
    .silure-gallery-main-wrap:hover button.silure-gallery-nav { opacity: 0.85; }
    button.silure-gallery-nav:hover {
        opacity: 1;
        background: rgba(5, 5, 5, 0.06);
    }
}

/* Progress bar — hover-reveal on desktop, always-on on mobile (see
   mobile override below) */
.silure-gallery-progress {
    position: absolute;
    bottom: 16px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: rgba(232, 228, 223, 0.9);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .silure-gallery-main-wrap:hover .silure-gallery-progress { opacity: 1; }
}

.silure-gallery-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--silure-primary, #050505);
    transition: width 0.25s ease;
}

/* SOLD overlay on main image */
.silure-gallery-sold-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 5, 0.45);
    font-family: 'Mulish', sans-serif;
    font-size: clamp(20px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--silure-on-dark, #FBF9F6);
    pointer-events: none;
    z-index: 3;
}

.silure-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid transparent;
    background: var(--silure-surface, #F3F0EB);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}

.silure-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.silure-thumb.is-active {
    border-color: var(--silure-primary, #050505);
}

.silure-thumb:not(.is-active):hover {
    border-color: var(--silure-border-mid, #C8C4BF);
}

/* ─────────────────────────────────────────────────────────────────────
   PRODUCT INFO — RIGHT COLUMN
   ───────────────────────────────────────────────────────────────────── */

.silure-product-info {
    padding: 0 80px 80px 64px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tags */
.silure-product-tag {
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    line-height: 1;
}

.silure-product-tag--new {
    background: var(--silure-surface, #F3F0EB);
    color: var(--silure-primary, #050505);
    border: 1px solid var(--silure-border, #E8E4DF);
}

.silure-product-tag--sold {
    background: var(--silure-bg-dark, #050505);
    color: var(--silure-on-dark, #FBF9F6);
}

/* ─────────────────────────────────────────────────────────────────────
   TITLE ROW — name + rating (rating aligned to first title line)
   ───────────────────────────────────────────────────────────────────── */

.silure-product-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.silure-product-name {
    font-family: 'Mulish', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0;
}

.silure-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: flex-start;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1;
    color: var(--silure-muted, #7A7672);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 14px;
    transition: color 0.2s;
}

.silure-product-rating:hover {
    color: var(--silure-primary, #050505);
}

.silure-product-rating svg {
    color: var(--silure-primary, #050505);
    flex-shrink: 0;
}

/* Purity */
.silure-product-purity {
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin: 0;
}

/* Price row */
.silure-product-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.silure-product-price-was,
.silure-product-price-now {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.silure-product-price-was .woocommerce-Price-amount,
.silure-product-price-now .woocommerce-Price-amount,
.silure-product-price-was .amount,
.silure-product-price-now .amount {
    font-family: 'Mulish', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--silure-primary, #050505);
}

.silure-product-price-was del {
    position: relative;
    text-decoration: none !important;
}
.silure-product-price-was del::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

/* You May Also Like — strikethrough price */
.silure-also-like__price del {
    display: inline-block !important;
    position: relative;
    text-decoration: none !important;
}
.silure-also-like__price del .woocommerce-Price-amount {
    display: inline !important;
    margin-bottom: 0 !important;
}
.silure-also-like__price del::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

/* Recently Viewed — strikethrough price */
.silure-rv-item__price del {
    display: inline-block !important;
    position: relative;
    text-decoration: none !important;
}
.silure-rv-item__price del .woocommerce-Price-amount {
    display: inline !important;
    margin-bottom: 0 !important;
}
.silure-rv-item__price del::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid currentColor;
    transform: translateY(-50%);
}

.silure-product-gst-note {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
}

/* ─────────────────────────────────────────────────────────────────────
   FEATURE BADGES
   ───────────────────────────────────────────────────────────────────── */

.silure-product-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.silure-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.silure-badge-icon {
    flex-shrink: 0;
    color: var(--silure-muted, #7A7672);
}

.silure-badge-label {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    color: var(--silure-text, #444444);
}

/* ─────────────────────────────────────────────────────────────────────
   SIZE GUIDE
   ───────────────────────────────────────────────────────────────────── */

.silure-size-guide-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    background: none;
    border: none;
    border-bottom: 1px solid var(--silure-muted, #7A7672);
    padding: 0 0 2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.silure-size-guide-trigger:hover,
.silure-size-guide-trigger[aria-expanded="true"] {
    color: var(--silure-primary, #050505);
    border-color: var(--silure-primary, #050505);
}

.silure-size-guide-panel {
    border: 1px solid var(--silure-border, #E8E4DF);
    padding: 24px;
    background: var(--silure-surface, #F3F0EB);
    margin-top: 4px;
}

.silure-size-guide-section + .silure-size-guide-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--silure-border, #E8E4DF);
}

.silure-size-guide-heading {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0 0 12px;
}

.silure-size-guide-tip {
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.6;
    color: var(--silure-text, #444444);
    margin: 0 0 16px;
}

.silure-size-converter {
    margin-bottom: 16px;
}

.silure-size-label {
    display: block;
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin-bottom: 6px;
}

.silure-size-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.silure-size-input {
    width: 120px;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--silure-primary, #050505);
    background: var(--silure-bg, #FBF9F6);
    border: 1px solid var(--silure-border-mid, #C8C4BF);
    padding: 8px 10px;
    outline: none;
    transition: border-color 0.2s;
}

.silure-size-input:focus {
    border-color: var(--silure-primary, #050505);
}

.silure-size-result {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--silure-primary, #050505);
    min-height: 1em;
}

.silure-size-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--silure-text, #444444);
}

.silure-size-table th {
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    font-size: 9px;
}

.silure-size-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    vertical-align: middle;
}

.silure-size-table tr:last-child td {
    border-bottom: none;
}

.silure-size-table tr.is-highlighted td {
    background: rgba(5, 5, 5, 0.04);
    font-weight: 400;
    color: var(--silure-primary, #050505);
}

/* ─────────────────────────────────────────────────────────────────────
   ADD TO BAG — WooCommerce button base styling
   ───────────────────────────────────────────────────────────────────── */

.silure-add-to-cart-wrap .quantity {
    display: none; /* Jewellery always qty=1 */
}

.silure-add-to-cart-wrap .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    line-height: 1.7em !important;
    padding: 18px 32px !important;
    cursor: pointer !important;
    transition: background 0.25s ease, color 0.25s ease !important;
    text-align: center !important;
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */

.silure-add-to-cart-wrap .single_add_to_cart_button:disabled,
.silure-add-to-cart-wrap .single_add_to_cart_button.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   SPLIT CTA ROW — ATB fills width, stock notice on its own line above,
   wishlist heart flush to button's right edge
   ───────────────────────────────────────────────────────────────────── */

.silure-cta-row {
    display: flex;
    align-items: stretch;
    gap: 4px !important;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.silure-cta-row .silure-add-to-cart-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    display: block;
}

/* WooCommerce always echoes the stock notice before the add-to-cart form in
   source order (see wc_get_stock_html() call in add-to-cart/simple.php), so
   it already renders on its own line above the button without needing
   flex order here — .silure-add-to-cart-wrap is display:block, not a flex
   container, so `order` would have no effect anyway. */
.silure-cta-row .silure-add-to-cart-wrap .stock,
.silure-cta-row .silure-add-to-cart-wrap .woocommerce-stock-html {
    width: 100%;
    margin: 0 0 10px;
    display: block;
}

.silure-cta-row form.cart,
.silure-cta-row .cart {
    display: block;
    width: 100%;
    margin: 0;
}

.silure-cta-row .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    margin: 0 !important;
    flex: none !important;
}

/* .silure-cta-row is align-items: stretch (base rule above) — a flex item
   with a definite cross size (the heart's fixed 58px height) behaves as
   align-self: flex-start under stretch by default, not flex-end. The
   original, correct, pre-session behavior anchors the heart to the
   row's BOTTOM instead, matching the real add-to-cart button's actual
   position — the button sits at the bottom of .silure-add-to-cart-wrap
   whether or not stock-quantity text ("Only 2 left in stock") pushes it
   down from above, so anchoring the heart to the bottom keeps it level
   with the button in both cases. That's restored via align-self: flex-end
   below, scoped explicitly to the in-stock case (:not(:has(...))) so it
   never touches the out-of-stock stacked layout, which has its own
   dedicated rule further down and must stay untouched by this. */
button.silure-heart--cta {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */

.silure-cta-row:not(:has(.silure-add-to-cart-wrap .stock.out-of-stock)) button.silure-heart--cta {
    align-self: flex-end;
}

/* ─────────────────────────────────────────────────────────────────────
   OUT-OF-STOCK CTA ROW — stacked layout, own scoped rule.
   Deliberately NOT another shared property on the base .silure-cta-row
   rule above (that's exactly what broke the in-stock top-alignment last
   time) — :has() below only ever matches when the wrap actually contains
   WooCommerce's real "Out of stock" notice (single-product/stock.php:
   <p class="stock out-of-stock">), so the in-stock row (flex row,
   align-items: stretch) is completely untouched in every other case.
   Heart's width becomes 100% (full row width, not a small floating
   square) but height stays the confirmed-live 58px unchanged — still
   comes from flex: 0 0 58px + height: 58px above (flex-basis governs the
   main axis, which is height once flex-direction is column; width is a
   separate cross-axis property, only one of the two is overridden here).
   Gap reuses 12px — the ACTUAL live margin-bottom on .stock, confirmed
   via getComputedStyle in a real browser. That value comes from
   silure_header_footer_css()'s own !important stock-notice rule (wp_head
   priority 5, inline <style> block — not silure_kill_pink_late as the
   name might suggest), not the 10px .stock rule below in this file — a
   non-important rule can never win against an !important one regardless
   of specificity or hook order, so that 10px never actually renders.
   The width/margin below are similarly inert in practice: silure-core.php
   has its own !important twin of this exact rule (needed to beat that
   same header_footer_css block, which also forces width: 58px !important
   on .silure-heart--cta) — kept here anyway to match this file's existing
   documented pattern of that inline block being the final authority for
   this component (see the color/background/border/radius note above). */
.silure-cta-row:has(.silure-add-to-cart-wrap .stock.out-of-stock) {
    flex-direction: column;
    gap: 0 !important;
}

.silure-cta-row:has(.silure-add-to-cart-wrap .stock.out-of-stock) button.silure-heart--cta {
    width: 100%;
    margin: 12px 0;
}

.silure-heart--cta svg {
    transition: fill 0.2s;
}

.silure-heart--cta.is-wishlisted svg {
    fill: var(--silure-on-dark, #FBF9F6);
}

/* ─────────────────────────────────────────────────────────────────────
   WISHLIST (legacy single-heart variant, kept for non-CTA contexts)
   ───────────────────────────────────────────────────────────────────── */

.silure-product-info .silure-heart--single:not(.silure-heart--cta) {
    font-size: 11px;
    letter-spacing: 1.5px;
    gap: 8px;
    color: var(--silure-muted, #7A7672);
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    padding-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE STICKY CTA BAR
   ───────────────────────────────────────────────────────────────────── */

.silure-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: var(--silure-bg, #FBF9F6);
    border-top: 0.5px solid var(--silure-border, #E8E4DF);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.silure-sticky-bar.is-visible {
    transform: translateY(0);
}

.silure-sticky-bar__name {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* !important on the font properties (Session 30 sitewide 13px text-button
   standardization) -- this is a real <button>, and Hello Elementor's
   reset.css has a [type="button"]/[type="submit"]/button rule at the
   same specificity as this plain class selector, winning the tie by
   load order (reset.css loads after product.css) -- confirmed live,
   this was silently computing 16px/400 instead of the declared values
   below before !important was added. Same root cause documented
   elsewhere in this codebase for .silure-wl-remove. */
.silure-sticky-bar__btn {
    flex-shrink: 0;
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 12px 24px;
    cursor: pointer;
    height: 46px;
    white-space: nowrap;
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */

/* ─────────────────────────────────────────────────────────────────────
   ENQUIRY LINK
   ───────────────────────────────────────────────────────────────────── */

.silure-enquiry-link {
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
    text-align: left;
}

.silure-enquiry-link:hover {
    color: var(--silure-primary, #050505);
}

/* ─────────────────────────────────────────────────────────────────────
   SHARE BUTTONS (override silure-api.css with icon variant)
   ───────────────────────────────────────────────────────────────────── */

.silure-product-info .silure-share-buttons {
    display: flex;
    gap: 10px;
    padding: 0;
    margin-left: -14px;
}

.silure-product-info .silure-share-wa,
.silure-product-info .silure-share-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    padding: 7px 14px;
}

/* ─────────────────────────────────────────────────────────────────────
   ACCORDION
   ───────────────────────────────────────────────────────────────────── */

.silure-accordions {
    border-top: 1px solid var(--silure-border, #E8E4DF);
}

.silure-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 12px;
    transition: color 0.2s;
}

.silure-accordion-header:hover {
    color: var(--silure-muted, #7A7672);
}

.silure-accordion-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.silure-accordion-header[aria-expanded="true"] .silure-accordion-icon {
    transform: rotate(180deg);
}

.silure-accordion-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.2s ease;
    padding-bottom: 0;
}

.silure-accordion-body.is-open {
    max-height: 600px;
    padding-bottom: 16px;
}

/* Details table — borderless, no cell fill (overrides global WooCommerce
   td border/background bleed) */
.silure-details-table,
.silure-details-table tbody,
.silure-details-table tr,
.silure-details-table td {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.silure-details-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'DM Mono', monospace;
    line-height: 1.6;
}

.silure-details-table td {
    padding: 10px 0 !important;
    vertical-align: top !important;
}

.silure-details-table td:first-child {
    width: 40% !important;
    color: var(--silure-muted, #7A7672) !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    padding-right: 16px !important;
}

.silure-details-table td:last-child {
    color: var(--silure-text, #444444) !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}

.silure-care-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.silure-care-list li {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.65;
    color: var(--silure-text, #444444);
    padding-left: 14px;
    position: relative;
}

.silure-care-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--silure-muted, #7A7672);
}

.silure-care-list a {
    color: inherit;
    border-bottom: 1px solid var(--silure-border-mid, #C8C4BF);
    text-decoration: none;
}

.silure-care-list a:hover {
    color: var(--silure-primary, #050505);
    border-color: var(--silure-primary, #050505);
}

/* ─────────────────────────────────────────────────────────────────────
   PRODUCT STORY — full-width background, centered content
   ───────────────────────────────────────────────────────────────────── */

.silure-product-story {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 80px 40px;
    border-top: 1px solid var(--silure-border, #E8E4DF);
    background: var(--silure-surface, #F3F0EB);
    box-sizing: border-box;
}

.silure-product-story__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.silure-product-story__title {
    font-family: 'Mulish', sans-serif;
    font-size: clamp(20px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0 0 28px;
}

.silure-product-story__body {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.8;
    color: var(--silure-text, #444444);
}

.silure-product-story__body p {
    margin: 0 0 1em;
}

.silure-product-story__body p:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   REVIEWS — full-width background, centered content
   ───────────────────────────────────────────────────────────────────── */

.silure-reviews-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: var(--silure-bg, #FBF9F6);
}

.silure-reviews-inner {
    max-width: 880px;
    margin: 0 auto;
}

/* #reviews jump target: offsets the fixed header (36px announcement bar +
   72px header) plus breathing room, so the anchor doesn't land underneath it */
.silure-reviews-title {
    scroll-margin-top: 120px;
}

/* ─────────────────────────────────────────────────────────────────────
   YOU MAY ALSO LIKE
   ───────────────────────────────────────────────────────────────────── */

.silure-also-like {
    width: 100% !important;
    max-width: none !important;
    padding: 72px 80px !important;
    background: var(--silure-bg, #FBF9F6);
    border-top: 1px solid var(--silure-border, #E8E4DF);
    box-sizing: border-box;
}

.silure-also-like__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 40px;
}

.silure-also-like__title {
    font-family: 'Mulish', sans-serif;
    font-size: clamp(16px, 2.5vw, 24px) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0;
}

.silure-also-like__view-all {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    text-decoration: none;
    border-bottom: 1px solid var(--silure-primary, #050505);
    padding-bottom: 2px;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.silure-also-like__view-all:hover {
    color: var(--silure-muted, #7A7672);
    border-color: var(--silure-muted, #7A7672);
}

.silure-also-like__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow-x: auto;
}

.silure-also-like__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--silure-bg, #FBF9F6);
    padding-bottom: 16px;
}

.silure-also-like__img-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--silure-surface, #F3F0EB);
    margin-bottom: 12px;
}

.silure-also-like__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Single-image products: keep the existing zoom-in-place fallback */
.silure-also-like__img-wrap:not(.silure-also-like__img-wrap--swap) img {
    transition: transform 0.5s ease;
}

.silure-also-like__card:hover .silure-also-like__img-wrap:not(.silure-also-like__img-wrap--swap) img {
    transform: scale(1.04);
}

/* Two-image products: crossfade to the gallery image instead */
.silure-also-like__img-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.silure-also-like__card:hover .silure-also-like__img-hover {
    opacity: 1;
}

.silure-also-like__name {
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.5;
    color: var(--silure-primary, #050505);
    padding: 0 12px;
    margin: 0 0 4px;
}

.silure-also-like__price {
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--silure-muted, #7A7672);
    padding: 0 12px;
    margin: 0;
}

.silure-also-like__price .woocommerce-Price-amount,
.silure-also-like__price .amount {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
   RECENTLY VIEWED — full-width, horizontal carousel track
   ───────────────────────────────────────────────────────────────────── */

.silure-recently-viewed {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 72px 80px;
    border-top: none;
    box-sizing: border-box;
    background: var(--silure-bg, #FBF9F6);
}

.silure-recently-viewed .silure-section-title,
.silure-recently-viewed .silure-rv-title {
    font-family: 'Mulish', sans-serif;
    font-size: clamp(16px, 2.5vw, 24px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--silure-primary, #050505);
    margin: 0 0 32px;
}

.silure-recently-viewed-carousel {
    width: 100%;
}

.silure-rv-track {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    scrollbar-width: none;
}

.silure-rv-track::-webkit-scrollbar {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────
   LIGHTBOX
   ───────────────────────────────────────────────────────────────────── */

.silure-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(5, 5, 5, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
}

.silure-lightbox[hidden] {
    display: none;
}

.silure-lightbox-img-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.silure-lightbox-img {
    max-width: 90vw;
    max-height: 86vh;
    object-fit: contain;
    display: block;
    user-select: none;
}

.silure-lightbox-close {
    position: fixed;
    top: 24px;
    right: 32px;
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
    color: var(--silure-on-dark, #FBF9F6);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 9001;
    padding: 0;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.silure-lightbox-close:hover {
    opacity: 1;
}

.silure-lightbox-prev,
.silure-lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    line-height: 1;
    font-weight: 300;
    color: var(--silure-on-dark, #FBF9F6);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 9001;
    padding: 8px 16px;
    opacity: 0.65;
    transition: opacity 0.2s;
}

.silure-lightbox-prev { left: 16px; }
.silure-lightbox-next { right: 16px; }

.silure-lightbox-prev:hover,
.silure-lightbox-next:hover {
    opacity: 1;
}

.silure-lightbox-counter {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(251, 249, 246, 0.55);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   ENQUIRY MODAL
   ───────────────────────────────────────────────────────────────────── */

.silure-modal {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.silure-modal[hidden] {
    display: none;
}

.silure-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.60);
    cursor: pointer;
}

.silure-modal-box {
    position: relative;
    z-index: 1;
    background: var(--silure-bg, #FBF9F6);
    width: 100%;
    max-width: 520px;
    padding: 48px;
    max-height: 90vh;
    overflow-y: auto;
}

.silure-modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 24px;
    line-height: 1;
    font-weight: 300;
    color: var(--silure-muted, #7A7672);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.silure-modal-close:hover {
    color: var(--silure-primary, #050505);
}

.silure-modal-title {
    font-family: 'Mulish', sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--silure-primary, #050505);
    margin: 0 0 16px;
}

.silure-modal-product-name {
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silure-muted, #7A7672);
    margin: 0 0 28px;
}

.silure-enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.silure-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.silure-form-row label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7A7672;
}

.silure-form-row label span[aria-hidden] {
    color: var(--silure-text, #444444);
}

/* #silure-enquiry-form prefix: on an exact-specificity tie against Hello
   Elementor's reset.css (input[type=text] etc. — same (0,0,1,1) as the
   bare class here), reset.css was winning purely by loading later. The
   ID makes these decisively win regardless of load order.

   Sitewide form redesign (Session 30): underline replacing the box. */
#silure-enquiry-form .silure-form-row input,
#silure-enquiry-form .silure-form-row textarea {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #050505;
    background: transparent;
    border: none;
    border-bottom: 1px solid #050505;
    border-radius: 0;
    padding: 10px 0;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
    resize: vertical;
}

/* 2-column pairing (Session 30 form redesign) — existing sequence
   preserved: Name+Email paired first. Phone (3rd short field) has no
   partner left to pair with before the Message textarea — a genuinely
   awkward 2-col fit for an odd field count, so it stays full-width on
   its own row rather than being forced into a half-empty row.

   minmax(0, 400px) columns (Session 30, field-standard column-gap fix)
   -- matches the same spec as .silure-form-grid (myaccount.css) for
   consistency, even though this modal's own ~424px content width (520px
   box minus 48px padding each side) never lets either track reach the
   400px cap in practice -- the track still safely shrinks to fill
   whatever width is actually available, same as 1fr would, just capped
   if this modal is ever widened later. */
.silure-form-pair {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 400px);
    gap: 0 24px;
}

#silure-enquiry-form .silure-form-row input:focus,
#silure-enquiry-form .silure-form-row textarea:focus {
    border-color: var(--silure-primary, #050505);
}

.silure-form-error {
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    color: #B34040;
    margin: 0;
    letter-spacing: 0.3px;
}

#silure-enquiry-form .silure-enquiry-submit {
    display: block;
    width: 100%;
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.7em;
    padding: 16px 32px;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.25s ease, color 0.25s ease;
}

/* color/background/border/radius (base + hover/focus) now come from the
   single sitewide button hover standard in silure_kill_pink_late(). */

#silure-enquiry-form .silure-enquiry-submit:disabled {
    opacity: 0.5;
    cursor: wait;
}

.silure-enquiry-success {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1.7;
    color: var(--silure-text, #444444);
    text-align: center;
    padding: 16px 0;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .silure-product-breadcrumb {
        padding: 16px 40px;
    }
    .silure-product-info {
        padding: 0 40px 60px 40px !important;
    }
    .silure-product-story {
        padding: 64px 40px;
    }
    .silure-also-like {
        padding: 64px 40px !important;
    }
    .silure-recently-viewed {
        padding: 56px 40px;
    }
    .silure-product-gallery {
        top: 60px;
    }
}

@media (max-width: 768px) {
    .silure-product-breadcrumb {
        padding: 12px 24px;
    }
    .silure-product-layout {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .silure-product-gallery {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .silure-gallery-thumbs {
        display: none; /* hidden on mobile — swipe replaces */
    }
    .silure-gallery-main-wrap {
        height: auto;
    }
    .silure-gallery-main {
        height: auto;
    }
    .silure-gallery-zoom-btn {
        height: auto;
    }
    .silure-gallery-zoom-btn img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-position: center;
    }
    .silure-gallery-progress {
        display: block; /* mobile only */
        position: static;
        height: 2px;
        opacity: 1;
    }
    .silure-product-info {
        padding: 32px 24px 56px !important;
    }
    .silure-product-title-row {
        gap: 10px;
    }
    .silure-product-rating {
        margin-top: 8px;
    }
    .silure-product-story {
        padding: 56px 24px;
    }
    .silure-also-like {
        padding: 56px 24px !important;
    }
    .silure-recently-viewed {
        padding: 48px 24px;
    }
    .silure-also-like__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .silure-sticky-bar {
        display: flex; /* show on mobile */
    }
    .silure-modal-box {
        padding: 32px 24px;
    }
}

@media (min-width: 769px) {
    .silure-sticky-bar {
        display: none; /* desktop: CTA always visible inline */
    }
}

@media (max-width: 480px) {
    .silure-product-breadcrumb {
        padding: 10px 16px;
    }
    .silure-product-info {
        padding: 24px 16px 48px !important;
    }
    .silure-product-story {
        padding: 48px 16px;
    }
    .silure-also-like {
        padding: 48px 16px !important;
    }
    .silure-recently-viewed {
        padding: 40px 16px;
    }
    .silure-also-like__grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        overflow-x: auto;
    }
    .silure-lightbox-prev,
    .silure-lightbox-next {
        padding: 4px 10px;
        font-size: 32px;
    }
    .silure-modal-box {
        padding: 28px 16px;
    }
}