/* =============================================================================
   store-refine.css — product-page refinement layer.
   Loads AFTER product.css (see show.blade.php @push('styles')), BEFORE
   enhancements.css. store-r6-v2.css is NOT loaded on this page, so every
   design token it would have supplied is (re)declared here at :root. All
   overrides re-declare product.css selectors at equal-or-higher specificity;
   net-new components are rf-/ts- prefixed.
   ============================================================================= */

/* ─── TOKENS ───────────────────────────────────────────────────────────────
   Locked values, self-contained. Referenced with literal fallbacks on the
   highest-risk rules (CTA, pills) so they cannot collapse even if this block
   were ever stripped. */
:root {
    --acc-300: #FBB131;
    --acc-400: #F5841C;
    --acc-500: #EA9C22;
    --acc-600: #F05D11;
    --acc-a08: rgba(234, 156, 34, .08);
    --acc-a15: rgba(234, 156, 34, .15);
    --acc-a20: rgba(234, 156, 34, .20);
    --acc-a35: rgba(234, 156, 34, .35);

    --ink-100: #f5efe4;
    --ink-500: #8a8377;
    --ink-950: #0b0a0a;

    --ok-500: #3dd68c;

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

    --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

    --mx-fast: 120ms;
    --mx-med: 180ms;
    --mx-ease: cubic-bezier(.4, 0, .2, 1);

    --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ff-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

    --hair-08: rgba(255, 255, 255, .08);
    --hair-10: rgba(255, 255, 255, .10);

    --stp-hero-gap: clamp(32px, 4vw, 60px);
    --stp-section-y: clamp(64px, 8vw, 112px);

    --rf-section-y: 100px;                                  /* unified band rhythm */
    --rf-divider: linear-gradient(90deg, transparent 0%,
        rgba(234, 156, 34, .18) 50%, transparent 100%);
}
@media (max-width: 768px) { :root { --rf-section-y: 70px; } }

/* ─── HERO: layout, title, description, gallery ────────────────────────────*/

/* Hero grid — symmetric top-aligned columns; add absent bottom rhythm,
   keep product.css padding-top:120px (clears the fixed breadcrumb). */
.product-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--stp-hero-gap);
    align-items: start;
    margin-top: var(--sp-7);
}
.product-gallery-section,
.product-details-section { min-width: 0; }                  /* no track blow-out */
.product-hero { padding-bottom: var(--stp-section-y); }
@media (max-width: 1024px) {
    .product-hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* Category micro-label — restrained single amber (drops the hot gradient). */
.product-category {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--acc-500);
    color: var(--acc-500);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.2;
    margin-bottom: 12px;
}
/* Title — fluid balanced display, keeps product.css white gradient/clip. */
.product-title {
    font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
}
/* Description — measure cap, looser leading, muted ink lifted off artwork. */
.product-description {
    max-width: 60ch;
    line-height: 1.7;
    color: var(--ink-500);
    text-wrap: pretty;
    text-shadow: 0 1px 2px rgba(11, 10, 10, .42);
}

/* Gallery main image — kill fixed height so tall art never clips. */
.product-main-image {
    height: auto;
    min-height: 360px;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--hair-08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .02) 0%, rgba(0, 0, 0, 0) 40%),
        rgba(0, 0, 0, .30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        0 18px 40px -18px rgba(0, 0, 0, .55);
    transition: box-shadow var(--mx-med) var(--mx-ease), border-color var(--mx-med) var(--mx-ease);
}
.product-main-image:hover {
    border-color: rgba(234, 156, 34, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 20px 46px -18px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(234, 156, 34, .10);
}
.product-main-image img {
    width: auto; height: auto; max-width: 100%;
    object-fit: contain; border-radius: 16px; display: block;
}

/* Thumbnail strip — resting frame, hover, mobile snap-scroll. Focus ring is
   centralised in the A11Y block. */
.product-thumbnails { display: flex; flex-wrap: nowrap; gap: 15px; margin-bottom: 30px; }
.thumbnail {
    flex: 1 1 0; min-width: 0; position: relative; cursor: pointer;
    border-radius: 12px; overflow: hidden; min-height: 80px;
    border: 2px solid var(--hair-08);
    background: rgba(255, 255, 255, .05);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.thumbnail img { display: block; width: 100%; height: 80px; object-fit: cover; transition: transform .3s ease; }
.thumbnail:hover { border-color: rgba(234, 156, 34, .45); }
.thumbnail:hover img { transform: scale(1.08); }
.thumbnail.active {
    border-color: var(--acc-500); transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(234, 156, 34, .18);
}
@media (max-width: 768px) {
    .product-main-image { min-height: 240px; padding: 14px; }
    .product-thumbnails {
        overflow-x: auto; overflow-y: hidden; margin-bottom: 24px; padding-bottom: 6px;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: rgba(234, 156, 34, .5) transparent;
    }
    .thumbnail { flex: 0 0 auto; width: 88px; scroll-snap-align: start; }
    .thumbnail.active { transform: none; box-shadow: none; }  /* scroll box clips a lift */
    .product-thumbnails::-webkit-scrollbar { height: 6px; }
    .product-thumbnails::-webkit-scrollbar-thumb { background: rgba(234, 156, 34, .5); border-radius: 6px; }
}

/* ─── PRICING CARD + PRICE DISPLAY ─────────────────────────────────────────*/
.pricing-card {
    background: rgba(18, 18, 18, .82);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pricing-header { position: relative; margin-bottom: 24px; padding-bottom: 20px; border-bottom: none; }
.pricing-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(234, 156, 34, .45) 0%, rgba(255, 255, 255, .10) 42%, transparent 100%);
}
.pricing-header h3 { margin: 0 0 12px 0; letter-spacing: .01em; }

.price-display { display: flex; align-items: baseline; gap: var(--sp-2); }
.total-price,
.current-price {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -.02em;
    line-height: 1;
    display: inline-block;
    min-height: 1em;                                        /* reserves line box → no CLS on x-text swap */
}
.billing-cycle {
    color: rgba(255, 255, 255, .55); font-size: 15px;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -.005em; line-height: 1;
    display: inline-block; min-height: 1em; white-space: nowrap;
}
@media (max-width: 768px) { .pricing-card { padding: 24px; } .total-price { font-size: 36px; } }

/* ─── SUBSCRIPTION TIERS — vertical stack, name+per-day left, price right ──
   Single owner (blade reorders .option-content into .rf-opt-info + .plan-price). */
.subscription-options { display: flex; flex-direction: column; gap: 10px; }
.subscription-option {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 64px;
    padding: 16px 20px;
    text-align: left;
    transition: border-color var(--mx-med) var(--mx-ease),
                background var(--mx-med) var(--mx-ease),
                box-shadow var(--mx-med) var(--mx-ease);
}
.option-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.rf-opt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-content .duration { font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff; }
.option-content .per-day { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, .55); }
.plan-price { font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap; }

/* Hover — restrained warm-up, only when not selected. */
.subscription-option:not(.active):hover {
    background: rgba(255, 255, 255, .07);
    border-color: var(--acc-a35);
    box-shadow: inset 2px 0 0 0 var(--acc-a35);
}
/* Selected — left accent bar (inset), subtle amber fill, NO transform
   (owns the active state; the global hover block must not re-add a lift). */
.subscription-option.active {
    transform: none;
    border-color: var(--acc-a35);
    background: linear-gradient(90deg, var(--acc-a15) 0%, var(--acc-a08) 55%, transparent 100%);
    box-shadow: inset 3px 0 0 0 var(--acc-500), 0 6px 22px -14px var(--acc-a35);
}
.subscription-option.active:hover {
    background: linear-gradient(90deg, var(--acc-a20) 0%, var(--acc-a08) 60%, transparent 100%);
}
.subscription-option.active .plan-price {
    background: linear-gradient(90deg, var(--acc-300) 0%, var(--acc-600) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--acc-300);
}

/* Best-value badge — single component (lowest €/day among dated plans). */
.subscription-option.rf-best { position: relative; overflow: visible; }
.rf-best-badge {
    position: absolute; top: -9px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 3px 10px; border-radius: var(--r-pill, 999px);
    background: linear-gradient(90deg, var(--acc-300, #FBB131) 0%, var(--acc-600, #F05D11) 100%);
    color: var(--ink-950, #0b0a0a);
    font: 600 10px/1 var(--ff-body, system-ui);
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 2px 8px -2px var(--acc-a35, rgba(234, 156, 34, .35));
    pointer-events: none;
}
.rf-best-badge > i { font-size: 11px; line-height: 1; }

/* ─── PRIMARY CTA + TRUST ROW ──────────────────────────────────────────────*/
.btn-primary.btn-purchase {
    position: relative;
    width: 100%;
    min-height: 60px;
    padding: var(--sp-4, 16px) var(--sp-5, 20px);
    gap: var(--sp-4, 16px);
    border: none;
    border-radius: var(--r-md, 12px);
    font-weight: 700; font-size: 17px; letter-spacing: .2px;
    color: var(--ink-950, #0b0a0a);
    background: linear-gradient(135deg, var(--acc-600, #F05D11) 0%, var(--acc-400, #F5841C) 55%, var(--acc-300, #FBB131) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 14px var(--acc-a20, rgba(234, 156, 34, .20));
    cursor: pointer;
    transition: transform var(--mx-med) var(--mx-ease),
                box-shadow var(--mx-med) var(--mx-ease),
                filter var(--mx-fast) var(--mx-ease);
}
.btn-primary.btn-purchase > i { font-size: 18px; line-height: 1; }
.btn-primary.btn-purchase:hover:not(:disabled) {
    transform: translateY(-2px); filter: brightness(1.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 24px var(--acc-a35, rgba(234, 156, 34, .35));
}
.btn-primary.btn-purchase:active:not(:disabled) { transform: translateY(0); filter: brightness(.94); }
.btn-primary.btn-purchase .btn-price {
    padding: var(--sp-2, 8px) var(--sp-4, 16px);
    border-radius: var(--r-pill, 999px);
    background: rgba(11, 10, 10, .28);
    box-shadow: inset 0 0 0 1px var(--hair-10, rgba(255, 255, 255, .10));
    color: var(--ink-100, #f5efe4);
    font-family: var(--ff-mono); font-size: 15px; font-weight: 600;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* Disabled (coming-soon / busy) — dimmed and desaturated, still legible. */
.btn-primary.btn-purchase:disabled {
    opacity: .6; filter: grayscale(.4) brightness(.85);
    box-shadow: none; transform: none; cursor: not-allowed;
}
@media (max-width: 480px) {
    .btn-primary.btn-purchase { justify-content: center; gap: var(--sp-2); }
    .btn-primary.btn-purchase .btn-price { width: 100%; text-align: center; }
}

/* Security assurance — hairline-lidded cap tying purchase block to the pills. */
.security-assurance {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-2); flex-wrap: wrap;
    min-height: 44px; padding: var(--sp-3) var(--sp-4) 0;
    margin-top: var(--sp-4); border-top: 1px solid var(--hair-08);
    font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
    color: rgba(255, 255, 255, .72); text-align: center;
}
.security-assurance i { color: var(--ok-500); font-size: 15px; filter: drop-shadow(0 0 6px rgba(61, 214, 140, .45)); }

/* Trust pills (glass) — net-new rf- component, sits after .security-assurance. */
.rf-trust-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.rf-pill {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 30px; padding: 6px var(--sp-3);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid var(--hair-08); border-radius: var(--r-pill);
    backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .22);
    font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap;
    color: rgba(255, 255, 255, .82); letter-spacing: .01em;
}
.rf-pill i { font-size: 13px; color: var(--acc-500); line-height: 1; }
.rf-pill b { font-weight: 600; color: var(--ink-100); }
.rf-pill--live { border-color: rgba(61, 214, 140, .24); }
.rf-pill--live b { color: var(--ok-500); }
.rf-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ok-500); animation: rf-pill-pulse 2s var(--mx-ease) infinite; }
@keyframes rf-pill-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, .55), 0 0 8px rgba(61, 214, 140, .7); }
    50%      { box-shadow: 0 0 0 5px rgba(61, 214, 140, 0),   0 0 12px rgba(61, 214, 140, .9); }
}
@media (max-width: 640px) { .rf-trust-pills { gap: var(--sp-1); } .rf-pill { font-size: 11px; padding: 6px 10px; } }

/* ─── FEATURES: shared header, tab bar, panels, iconography ────────────────*/

/* Shared section header — one amber accent bar for every section. */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 56px; padding: 0 16px; }
.section-header::before {
    content: ""; display: block; width: 44px; height: 3px; margin: 0 auto 20px;
    border-radius: 2px; background: linear-gradient(90deg, var(--acc-600) 0%, var(--acc-300) 100%);
}
.section-tag {
    display: inline-block;
    background: linear-gradient(90deg, var(--acc-600) 0%, var(--acc-300) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 14px;
}
.section-header h2 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
    font-weight: 700; line-height: 1.18; color: #fff; margin: 0 auto 16px; text-wrap: balance;
}
.section-header p {
    font-size: clamp(.9375rem, .85rem + .4vw, 1rem);
    line-height: 1.65; color: rgba(255, 255, 255, .68); max-width: 620px; margin: 0 auto; text-wrap: pretty;
}

/* Feature tab bar — even segmented control, wraps gracefully. */
.pn-tab-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 18px; margin-bottom: 22px; }
.pn-tab-btn {
    flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 9px 18px; line-height: 1; border-radius: 13px;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
.pn-tab-btn i { font-size: 16px; line-height: 1; vertical-align: middle; }
.pn-tab-btn:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.pn-tab-btn.active {
    background: rgba(234, 156, 34, .14); border-color: var(--acc-a35); color: var(--acc-300);
    box-shadow: 0 1px 8px rgba(234, 156, 34, .10);
}
@media (max-width: 640px) { .pn-tab-btn { flex: 1 1 40%; min-height: 44px; padding: 10px 14px; font-size: 13px; } }

/* Feature panels + rows — top-align the check to the first line, wrap cleanly. */
.pn-tab-panel.active { gap: 10px; }
.pn-feature-row {
    align-items: flex-start; gap: 10px; padding: 13px 16px; min-height: 46px;
    line-height: 1.55; overflow-wrap: anywhere;
}

/* Iconography consistency — one amber check, one chip size. */
.feature-list-compact li i {
    color: var(--acc-500); font-size: 15px; line-height: 1; margin-top: 0; flex-shrink: 0; transition: transform .2s ease;
}
.pn-feature-row i.ri-checkbox-circle-fill {
    color: var(--acc-500); font-size: 15px; line-height: 1.34; margin-top: 0; flex-shrink: 0; transition: transform .2s ease;
}
.feature-list-compact li:hover i,
.pn-feature-row:hover i.ri-checkbox-circle-fill { transform: scale(1.06); }
.category-icon-compact i { font-size: 24px; line-height: 1; color: var(--acc-500); }
@media (max-width: 480px) { .category-icon-compact i { font-size: 22px; } }

/* ─── SPECS + HARDWARE ─────────────────────────────────────────────────────*/

/* Enhanced-specs header — stronger, section-scoped (padding owned by rhythm). */
.enhanced-specs { scroll-margin-top: 96px; }
.enhanced-specs .section-header { margin-bottom: 70px; }
.enhanced-specs .section-tag { letter-spacing: 3.5px; }
.enhanced-specs .section-header h2 { font-size: 42px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin: 0 0 20px 0; }
@media (max-width: 768px) {
    .enhanced-specs .section-header { margin-bottom: 50px; }
    .enhanced-specs .section-header h2 { font-size: 32px; }
}

/* Quick-stats — true 3-up grid, tabular values, consistent chips. */
.quick-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--hair-10); border-radius: 16px;
    backdrop-filter: blur(10px); overflow: hidden; margin-top: 20px;
}
.stat-item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; gap: 12px; padding: 26px 18px; min-height: 156px; height: auto;
    position: relative; background: transparent; border: none; box-shadow: none;
}
.stat-icon {
    width: 52px; height: 52px; flex-shrink: 0; margin: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(234, 156, 34, .18), rgba(234, 156, 34, .08));
    border: 1px solid rgba(234, 156, 34, .30);
}
.stat-icon i { font-size: 22px; line-height: 1; color: var(--acc-500); }
.stat-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 4px; }
.stat-value { display: block; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.stat-label { display: block; margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .4px; line-height: 1.35; color: rgba(255, 255, 255, .68); white-space: normal; }
@media (max-width: 768px) {
    .stat-item { gap: 10px; padding: 18px 10px; min-height: 120px; }
    .stat-icon { width: 44px; height: 44px; }
    .stat-icon i { font-size: 19px; }
    .stat-value { font-size: 20px; }
    .stat-label { font-size: 11px; letter-spacing: .2px; }
}

/* Spec cards — equal-height matched pair. MOBILE COLLAPSE explicitly restated. */
.specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 40px; margin-bottom: 72px; }
@media (max-width: 768px) { .specs-grid { grid-template-columns: 1fr; } }

/* Hardware — raised showcase panel. */
.hardware-section { position: relative; padding: 48px; margin-top: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.hardware-section::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(234, 156, 34, .45), rgba(240, 93, 17, .22), transparent);
}
.hardware-section .hardware-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
@media (max-width: 900px) { .hardware-section .hardware-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .hardware-section { padding: 28px 20px; } .hardware-section .hardware-items { grid-template-columns: 1fr; gap: 18px; } }

/* Hardware item cards — flex column, badge pinned to a shared baseline. */
.hardware-item { display: flex; flex-direction: column; align-items: center; min-height: 100%; }
.hardware-item h4, .hardware-item p { width: 100%; }
.hardware-item-icon {
    border: 1px solid rgba(234, 156, 34, .22);
    background: linear-gradient(135deg, rgba(234, 156, 34, .15), rgba(240, 93, 17, .10));
    box-shadow: inset 0 0 0 1px rgba(251, 177, 49, .05);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.hardware-item:hover .hardware-item-icon { background: rgba(234, 156, 34, .16); border-color: rgba(234, 156, 34, .35); transform: translateY(-2px); }
.hardware-tag { margin-top: auto; }

/* Amber icon-chip family — unified background/border (per-brand icons untouched). */
.category-icon-compact, .spec-header-icon, .universal-icon, .hardware-icon-large, .hardware-item-icon {
    background: linear-gradient(135deg, rgba(234, 156, 34, .15), rgba(240, 93, 17, .10));
    border: 1px solid rgba(234, 156, 34, .22);
}
.universal-tag, .hardware-tag, .os-badge, .btn-price { border-radius: var(--r-pill); }

/* OS + anti-cheat rows — align to the hardware-card family; neutralise off-palette badge. */
.os-item, .anticheat-item { border-radius: 18px; padding: 20px; }
.os-item { align-items: stretch; min-height: 92px; }
.os-icon, .anticheat-icon { width: 52px; height: 52px; border-radius: 14px; }
.os-icon { align-self: center; }
.os-details { display: flex; flex-direction: column; gap: 4px; }
.os-details h4, .os-details p { margin: 0; }
.os-badge {
    margin-top: auto; align-self: flex-start;
    background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); border: 1px solid var(--hair-08);
}
.anticheat-item { min-height: 150px; }

/* ─── FAQ ──────────────────────────────────────────────────────────────────*/
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; align-items: start; }
@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; gap: 14px; } }
.faq-item { background: rgba(20, 20, 20, .45); border: 1px solid var(--hair-08); border-radius: 18px; overflow: hidden; transition: border-color .3s ease, background .3s ease; }
.faq-item.active { border-color: rgba(234, 156, 34, .28); background: rgba(30, 30, 30, .6); }
.faq-question {
    min-height: 64px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    cursor: pointer; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: #fff; transition: color .3s ease;
}
.faq-question:hover { color: rgba(255, 255, 255, .92); }
.faq-item.active .faq-question { color: var(--acc-500); }
.faq-question i { flex: none; font-size: 20px; color: rgba(255, 255, 255, .45); transition: transform .3s var(--mx-ease), color .3s ease; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--acc-500); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.active .faq-answer { max-height: 1500px; }             /* generous — long answers never clip */
.faq-answer p { padding: 0 24px 22px; margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .72); }

/* ─── RELATED PRODUCTS ─────────────────────────────────────────────────────*/
.related-product-card { display: flex; flex-direction: column; height: 100%; }
.product-info { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.product-footer { margin-top: auto; gap: 16px; row-gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.price { line-height: 1.1; white-space: nowrap; }
.product-footer .btn-secondary { flex: 0 0 auto; }
@media (min-width: 1025px) {
    .related-products .products-grid:has(> .related-product-card:last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, calc((100% - 60px) / 3))); justify-content: center;
    }
    .related-products .products-grid:has(> .related-product-card:only-child) {
        grid-template-columns: minmax(0, calc((100% - 60px) / 3)); justify-content: center;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .related-products .products-grid:has(> .related-product-card:only-child) {
        grid-template-columns: minmax(0, calc((100% - 25px) / 2)); justify-content: center;
    }
}

/* ─── DISCORD CTA ──────────────────────────────────────────────────────────
   Vertical rhythm is owned by the rhythm block; this styles the block only. */
.discord { text-align: center; }
.discord-title { margin: 0 0 var(--sp-3) 0; font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.375rem); line-height: 1.12; letter-spacing: -.015em; color: var(--ink-100); }
.discord-subtitle { margin: 0 auto var(--sp-8); max-width: 46ch; font-weight: 400; font-size: clamp(.95rem, .9rem + .2vw, 1.0625rem); line-height: 1.55; color: var(--ink-500); }
.btn-discord {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
    min-height: 54px; padding: 14px 32px; margin-inline: auto; border: 0; border-radius: var(--r-pill);
    background: #fff; color: var(--ink-950); font: 600 16px/1.4 var(--ff-body); letter-spacing: .005em; cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 30px -16px rgba(0, 0, 0, .6);
    transition: transform var(--mx-med) var(--mx-ease), box-shadow var(--mx-med) var(--mx-ease);
}
.btn-discord:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 38px -16px rgba(0, 0, 0, .62), 0 0 0 1px var(--acc-a20);
}
@media (max-width: 768px) {
    .discord-title { font-size: clamp(1.6rem, 1.2rem + 3vw, 2rem); }
    .discord-subtitle { padding-inline: 20px; margin-bottom: var(--sp-7); }
    .btn-discord { width: min(100%, 320px); padding: 15px 28px; }
}

/* ─── SECTION DIVIDERS + VERTICAL RHYTHM (single owner) ────────────────────*/
.elite-performance, .enhanced-specs, .video-showcase, .product-faq, .related-products, .discord {
    padding-top: var(--rf-section-y);
    padding-bottom: var(--rf-section-y);
    position: relative;
}
/* One restrained-amber hairline atop each post-hero section (not discord — it
   carries its own glow). */
.elite-performance::before, .enhanced-specs::before, .video-showcase::before, .product-faq::before, .related-products::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rf-divider); pointer-events: none;
}

/* ─── HOVER / INTERACTION CONSISTENCY (single owner for card/button lifts) ──
   Excludes .subscription-option.active and .thumbnail.active by design — those
   states are owned above and must not be re-lifted. */
.feature-category-compact, .spec-card, .os-item, .anticheat-item, .hardware-item,
.video-card, .related-product-card, .universal-item, .pn-feature-row,
.btn-purchase, .product-footer .btn-secondary {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .feature-category-compact:hover, .spec-card:hover, .hardware-item:hover,
    .video-card:hover, .related-product-card:hover, .os-item:hover, .anticheat-item:hover {
        transform: translateY(-4px); z-index: 2;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .30), 0 6px 22px rgba(234, 156, 34, .15);
    }
    /* Amber border only where product.css already tinted it — preserves the
       coloured OS / anti-cheat accent bars. */
    .feature-category-compact:hover, .spec-card:hover, .hardware-item:hover,
    .video-card:hover, .related-product-card:hover { border-color: rgba(234, 156, 34, .30); }
    .universal-item:hover, .pn-feature-row:hover { transform: translateX(4px); border-color: rgba(234, 156, 34, .28); }
    .btn-purchase:hover, .product-footer .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(234, 156, 34, .22); }
}

/* ─── RESPONSIVE HARDENING ─────────────────────────────────────────────────
   Overflow/legibility/touch. Column counts owned by their sections above. */
.product-hero-grid > *, .product-details-section,
.universal-item, .universal-content, .stat-item, .pn-feature-row,
.feature-list-compact li { min-width: 0; }
.product-title, .product-description, .universal-content h4, .universal-content p,
.pn-feature-row, .feature-list-compact li { overflow-wrap: break-word; }
@media (max-width: 1024px) { .compact-features-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .compact-features-wrapper { grid-template-columns: 1fr; }
    .stat-label { white-space: normal; }
    .product-footer .btn-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .footer-column a { display: inline-block; padding: 8px 0; }
    .footer-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .pricing-card { padding: 22px; }
    .product-title { font-size: 28px; }
}

/* ─── A11Y, MOTION & DETAIL POLISH ─────────────────────────────────────────
   Per-control focus rings — specificity ≥ (0,2,0) so they beat the global
   enhancements.css :focus-visible (0,1,0) that loads AFTER this file, and each
   restores its control's own radius (the global forces border-radius:4px). */
.thumbnail:focus-visible { outline: 2px solid var(--acc-500); outline-offset: -2px; border-radius: 12px; }  /* inset — mobile scroll rail clips an outset ring */
.subscription-option:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; border-radius: 12px; }
.subscription-option:focus:not(:focus-visible) { outline: none; }
.btn-purchase:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; border-radius: 12px; }
.pn-tab-btn:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; border-radius: 13px; }
.btn-discord:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 3px; border-radius: 999px; }
.product-footer .btn-secondary:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; border-radius: 10px; }
.faq-question:focus-visible { outline: 2px solid var(--acc-500); outline-offset: -2px; }  /* inset — .faq-item is overflow:hidden */
.crt-added a:focus-visible { outline: 2px solid var(--acc-500); outline-offset: 2px; }

/* Contrast lift: empty-video placeholder label (was ~4.1:1 on #0F0E0E). */
.video-placeholder span { color: rgba(255, 255, 255, .55); }

/* Selection + themed scrollbar (page-scoped). */
::selection { background: rgba(234, 156, 34, .28); color: #fff; }
::-moz-selection { background: rgba(234, 156, 34, .28); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: rgba(234, 156, 34, .4) rgba(255, 255, 255, .04); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb { background: rgba(234, 156, 34, .32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(234, 156, 34, .5); background-clip: padding-box; }

/* Reduced motion — enhancements.css zeroes durations globally; also drop the
   lifts so hover/selection are static, not merely instant. */
@media (prefers-reduced-motion: reduce) {
    .feature-category-compact, .spec-card, .os-item, .anticheat-item, .hardware-item,
    .video-card, .related-product-card, .universal-item, .pn-feature-row,
    .subscription-option, .subscription-option.active, .thumbnail.active,
    .btn-purchase, .product-footer .btn-secondary, .btn-discord, .product-main-image {
        transform: none !important;
    }
    .rf-dot { animation: none; }
}

/* ═══ HERO COLUMN BALANCE ═══════════════════════════════════════════════════
   The two-column hero was lopsided (pricing ~949px vs gallery ~666px). This
   block resolves it as ONE symmetric structure with a belt-and-suspenders
   approach: (a) a moderate premium TRIM of the pricing column + a content-rich
   GROW of the gallery bring both to ~810px on their own, then (b) grid
   align-items:stretch + a flex-grow image frame GLUE the two bottoms together
   for a guaranteed ~0px delta that self-corrects if copy/plan-count ever change.
   The image frame is dressed as a lit display "stage" so any letterbox band on
   a landscape screenshot reads as intentional negative space, never a gap.
   Everything is gated at >=1025px — the exact width the grid is 2-up (it
   collapses at <=1024px) — so NO desktop height, flex value, or stretch leaks
   into the single-column layout. Appended last → equal-specificity source order
   wins over product.css / theme.css / the store-refine rules above; the big
   48px .total-price and every Alpine binding are left completely untouched. */
@media (min-width: 1025px) {

    /* ── Bottoms glue together: both columns share the taller one's height ── */
    .product-hero-grid { align-items: stretch; }

    /* Gallery becomes a flex column; the frame absorbs the surplus via
       flex:1 1 0 (basis 0 → the frame's height is set by the LAYOUT, not by the
       image's natural size, so a tall portrait can never drive the gallery past
       the pricing column). Thumbnails + stats keep their size and ride the
       bottom edge. Child margins fold into one clean 20px rhythm. */
    .product-gallery-section { display: flex; flex-direction: column; gap: 20px; }
    /* Frame is a FIXED height tuned to the default 3:2 box art (small, even
       letterbox) and STABLE across thumbnails so switching image never resizes
       the column. The ~2.43:1 in-game screenshots letterbox moderately and the
       lit-stage dressing carries it. The surplus needed to match the pricing
       column is absorbed by .quick-stats below (content, not empty frame), so
       the wide screenshots never float in a large void. */
    .product-gallery-section > .product-main-image { flex: 0 0 auto; height: 430px; min-height: 430px; }
    .product-gallery-section > .product-thumbnails { flex: 0 0 auto; margin: 0; }
    .product-gallery-section > .quick-stats { flex: 1 1 auto; margin: 0; }

    /* Stage dressing — override ONLY background/position so the base + :hover
       box-shadow and the mobile padding/min-height variants keep working. Warm
       radial spotlight + dark edge-vignette make the frame a lit showcase. */
    .product-gallery-section .product-main-image {
        position: relative;
        background:
            radial-gradient(120% 64% at 50% 42%,
                rgba(234, 156, 34, .12) 0%, rgba(234, 156, 34, .045) 32%, rgba(255, 255, 255, 0) 60%),
            radial-gradient(135% 130% at 50% 50%,
                rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, .42) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 20%),
            rgba(0, 0, 0, .34);
    }
    /* Screenshot: fully contained on the stage (portrait OR landscape never
       clips or upscales), centred, grounded with a soft drop-shadow. max-height
       is what keeps a tall shot inside the layout-driven frame. */
    .product-gallery-section .product-main-image img {
        max-width: 100%; max-height: 100%; width: auto; height: auto;
        object-fit: contain;
        filter: drop-shadow(0 22px 38px rgba(0, 0, 0, .5));
    }

    /* ── LEFT: fill the growth with real content, not empty frame ── */
    .product-gallery-section .thumbnail { min-height: 96px; }
    .product-gallery-section .thumbnail img { height: 96px; }

    .product-gallery-section .stat-item {
        min-height: 204px; justify-content: center; padding: 30px 18px; gap: 16px;
    }
    /* Hairline dividers between the 3 tiles → premium panel (box-shadow, so it
       is unaffected by product.css disabling .stat-item::after). */
    .product-gallery-section .stat-item + .stat-item { box-shadow: inset 1px 0 0 var(--hair-08); }
    .product-gallery-section .stat-icon { width: 58px; height: 58px; }
    .product-gallery-section .stat-icon i { font-size: 24px; }
    /* Amber micro-rule above each value — makes the taller tile read deliberate. */
    .product-gallery-section .stat-content { position: relative; padding-top: 18px; gap: 6px; }
    .product-gallery-section .stat-content::before {
        content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 28px; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, var(--acc-600) 0%, var(--acc-300) 100%);
    }
    .product-gallery-section .stat-value { font-size: 28px; }

    /* ── RIGHT: moderate premium trim toward ~810px (price stays 48px) ── */
    .product-details-section { gap: 18px; }              /* 25 → 18 */
    .product-description { line-height: 1.6; }           /* 1.7 → 1.6, still airy */

    .pricing-card { padding: 26px; }                     /* 32 → 26 */

    /* Header on ONE baseline row: heading left, big price right — reclaims a
       whole line. The ::after hairline and all x-text bindings are untouched. */
    .pricing-header {
        display: flex; align-items: baseline; justify-content: space-between;
        flex-wrap: wrap; gap: 6px 16px;
        margin-bottom: 16px; padding-bottom: 14px;        /* 24 / 20 */
    }
    .pricing-header h3 { margin: 0; }

    /* Tiers stay TWO-LINE (duration + per-day); just a touch denser. */
    .subscription-options { gap: 8px; }                  /* 10 → 8 */
    .subscription-option { min-height: 56px; padding: 13px 20px; }   /* ~72 → ~62 */

    .btn-primary.btn-purchase { min-height: 56px; }      /* 60 → 56 */

    .security-assurance { min-height: 36px; margin-top: 12px; padding: 10px var(--sp-4) 0; }
    .rf-trust-pills { margin-top: 10px; }
}

/* ═══ FEATURE CARDS — icon-tile + title + desc ═══════════════════════════════
   Drop-in replacement for the flat single-line checkbox rows. Each
   .pn-feature-row becomes a card: rounded amber-tinted icon tile + bold title
   + muted description, with a left-edge amber accent and a soft hover lift.
   Append to the END of store-refine.css (loads after product.css). Every
   selector is scoped under .pn-tab-panel.active (base 0,3,0 / hover 0,4,0) so
   it cleanly beats product.css AND the upstream store-refine .pn-feature-row
   :hover translateX slide regardless of paste position. Only the .active panel
   is styled — inactive panels stay display:none (owned upstream), so tab
   behaviour is untouched. Self-contained: every token has a literal fallback.
   The old i.ri-checkbox-circle-fill rules simply stop matching the new markup. */

/* Grid — 2-up on desktop, equal-height rows via grid stretch.
   NB: do NOT put height:100% on the card — a % height against an auto grid
   track collapses to auto and disables align-items:stretch, breaking the
   equal-height row. Grid stretch alone equalises the pair correctly. */
.pn-tab-panel.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: var(--sp-3, 12px);
}

/* The card */
.pn-tab-panel.active .pn-feature-row {
    position: relative;
    display: flex;
    align-items: flex-start;                 /* icon pins to the first text line */
    gap: 14px;
    min-width: 0;                            /* never push past the column */
    padding: 15px 18px 15px 20px;            /* extra left leaves room for accent */
    border: 1px solid var(--hair-08, rgba(255, 255, 255, .08));
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0)),
        #100e0c;
    overflow: hidden;                        /* clips the accent bar to the radius */
    overflow-wrap: anywhere;                 /* long tokens can't blow out the card */
    color: var(--ink-100, #f5efe4);
    transition:
        transform        var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1)),
        box-shadow       var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1)),
        border-color     var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1)),
        background-color  var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1));
}

/* Left-edge amber accent — subtle at rest, intensifies on hover. */
.pn-tab-panel.active .pn-feature-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--acc-300, #FBB131), var(--acc-600, #F05D11));
    opacity: .38;
    transition: opacity var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1));
}

/* Icon tile — rounded amber-tinted square, fixed size, top-aligned. */
.pn-tab-panel.active .pfc-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 1px;                         /* optical align with title cap-height */
    border-radius: 11px;
    border: 1px solid var(--acc-a15, rgba(234, 156, 34, .15));
    background: linear-gradient(145deg,
        var(--acc-a20, rgba(234, 156, 34, .20)),
        var(--acc-a08, rgba(234, 156, 34, .08)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition:
        transform    var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1)),
        border-color var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4, 0, .2, 1));
}
.pn-tab-panel.active .pfc-icon i {
    font-size: 19px;
    line-height: 1;
    color: var(--acc-300, #FBB131);
}

/* Text column */
.pn-tab-panel.active .pfc-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;                            /* lets the text wrap, never overflow */
    padding-top: 1px;
}
.pn-tab-panel.active .pfc-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.1px;
    color: var(--ink-100, #f5efe4);
}
.pn-tab-panel.active .pfc-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-500, #8a8377);
    overflow-wrap: anywhere;
}

/* Hover — soft lift, refined amber border, brighter accent + icon tile.
   Guarded to fine-pointer devices so touch doesn't get a stuck hover.
   Scoped (0,4,x) so it beats the upstream .pn-feature-row:hover translateX. */
@media (hover: hover) and (pointer: fine) {
    .pn-tab-panel.active .pn-feature-row:hover {
        transform: translateY(-3px);
        border-color: var(--acc-a35, rgba(234, 156, 34, .35));
        background:
            linear-gradient(180deg, rgba(234, 156, 34, .05), rgba(255, 255, 255, 0)),
            #131009;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, .34),
            0 4px 16px rgba(234, 156, 34, .12);
    }
    .pn-tab-panel.active .pn-feature-row:hover::before { opacity: 1; }
    .pn-tab-panel.active .pn-feature-row:hover .pfc-icon {
        transform: scale(1.06);
        border-color: var(--acc-a35, rgba(234, 156, 34, .35));
    }
    .pn-tab-panel.active .pn-feature-row:hover .pfc-title { color: #fff; }
}

/* Collapse to a single column on tablet / phone. */
@media (max-width: 768px) {
    .pn-tab-panel.active { grid-template-columns: 1fr; }
}

/* Reduced motion — drop the lift/scale (store-refine already forces
   transform:none !important upstream; this keeps the card correct standalone). */
@media (prefers-reduced-motion: reduce) {
    .pn-tab-panel.active .pn-feature-row,
    .pn-tab-panel.active .pn-feature-row:hover,
    .pn-tab-panel.active .pfc-icon,
    .pn-tab-panel.active .pn-feature-row:hover .pfc-icon {
        transform: none;
    }
}
/* ═══ IMAGE LIGHTBOX + ZOOM AFFORDANCE ══════════════════════════════════════
   The gallery frame opens the current image full-screen. [x-cloak] keeps the
   overlay hidden until Alpine initialises so it never flashes on load. */
[x-cloak] { display: none !important; }

.product-main-image { cursor: zoom-in; }
.pmi-zoom {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(11, 10, 10, .55); color: var(--ink-100, #f5efe4);
    border: 1px solid var(--hair-10, rgba(255, 255, 255, .12));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4,0,.2,1)),
                transform var(--mx-med, 180ms) var(--mx-ease, cubic-bezier(.4,0,.2,1));
}
.pmi-zoom i { font-size: 18px; line-height: 1; }
.product-main-image:hover .pmi-zoom,
.product-main-image:focus-visible .pmi-zoom { opacity: 1; transform: translateY(0); }
.product-main-image:focus-visible { outline: 2px solid var(--acc-500, #EA9C22); outline-offset: 3px; }
@media (hover: none) { .pmi-zoom { opacity: 1; transform: none; } }  /* touch: always show the hint */

.pmi-lightbox {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    background: rgba(6, 5, 5, .86);
    backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
    cursor: zoom-out;
}
.pmi-lightbox img {
    max-width: min(1100px, 96vw); max-height: 88vh;
    width: auto; height: auto; object-fit: contain;
    border-radius: 14px; cursor: default;
    border: 1px solid var(--hair-10, rgba(255, 255, 255, .12));
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8);
}
.pmi-lightbox-close {
    position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08); color: #fff;
    border: 1px solid var(--hair-10, rgba(255, 255, 255, .14));
    transition: background var(--mx-fast, 120ms) var(--mx-ease, cubic-bezier(.4,0,.2,1)),
                transform var(--mx-fast, 120ms) var(--mx-ease, cubic-bezier(.4,0,.2,1));
}
.pmi-lightbox-close i { font-size: 24px; line-height: 1; }
.pmi-lightbox-close:hover { background: rgba(255, 255, 255, .16); transform: scale(1.05); }
.pmi-lightbox-close:focus-visible { outline: 2px solid var(--acc-500, #EA9C22); outline-offset: 3px; }

/* ═══ PURCHASE ASSURANCE — 2×2 premium grid (replaces the old pill row) ══════ */
.rf-assurance {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--sp-4, 16px);
}
.rf-assurance-item {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid var(--hair-08, rgba(255, 255, 255, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.rf-assurance-item > i { flex: 0 0 auto; width: 18px; text-align: center; font-size: 18px; line-height: 1; color: var(--acc-500, #EA9C22); }
.rf-assurance-item--live .rf-dot { flex: 0 0 auto; width: 8px; height: 8px; margin: 0 5px; }
.rf-assurance-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rf-assurance-value { font-size: 13px; font-weight: 600; color: var(--ink-100, #f5efe4); white-space: nowrap; }
.rf-assurance-cap { font-size: 11px; color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-assurance-item--live { border-color: rgba(61, 214, 140, .24); }
.rf-assurance-item--live .rf-assurance-value { color: var(--ok-500, #3dd68c); }
@media (max-width: 420px) { .rf-assurance { grid-template-columns: 1fr; } }