/* ─────────────────────────────────────────────────────────────────────────
   Online store — /store, /store/{collection}, store product pages and the
   store_products / buy_box blocks.

   Store pages are product-line pages: they sit on the .pl-page design system
   (product-lines.css — load it BEFORE this file) with a third skin, .pl-store,
   next to .pl-omni (amber) and .pl-video (blue/cyan). The store accent is LED
   red-orange — the colour of a shot-clock digit.

   The st-* components also render outside a .pl-page (a store block dropped on
   a legacy mk-* page), so every pl token they use carries a fallback.
   ───────────────────────────────────────────────────────────────────────── */

/* ── SKIN: STORE ──────────────────────────────────────────────────────────
   Two-class selector so it beats .pl-page's own token block regardless of
   stylesheet order. */
.pl-page.pl-store {
    --pl-accent:       #ff6a3d;
    --pl-accent-2:     #6f96ff;
    --pl-accent-dk:    #d9471c;
    --pl-accent-rgb:   255, 106, 61;
    --pl-accent-2-rgb: 111, 150, 255;
    --pl-aurora:
        radial-gradient(1050px 600px at 82% -6%,  rgba(255, 106, 61, 0.15), transparent 60%),
        radial-gradient(950px 560px at 6% 8%,     rgba(79, 123, 255, 0.15), transparent 62%),
        radial-gradient(1200px 900px at 45% 120%, rgba(255, 70, 40, 0.08), transparent 60%);
    --pl-grad:      linear-gradient(115deg, #ffb08a 0%, #ff6a3d 45%, #6f96ff 130%);
    --pl-grad-text: linear-gradient(100deg, #ffd3bd 0%, #ff7d52 55%, #93b1ff 120%);
    --pl-btn-grad:  linear-gradient(120deg, #ff8a5c 0%, #ee4b1f 100%);
    --pl-btn-ink:   #ffffff;
    --pl-accent-ink: #a3300c;
    --pl-paper:   #f5f2ee;
    --pl-paper-2: #ebe3da;
    --st-led:      #ff3b2a;
    --st-led-glow: rgba(255, 59, 42, 0.55);
}

/* The "classic" marketing theme sets every h1–h5 in Plus Jakarta Sans (marketing.css),
   which already wins over .pl-display on the Omniboards/Videoboards pages. Follow the
   theme for non-heading display text too (tiles, cards, block titles) so nothing mixes. */
body[data-mk-theme="classic"] .pl-page.pl-store { --pl-font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; }

/* Store blocks (store_products, buy_box) can sit on a legacy mk-* page with no
   .pl-page ancestor — give their pl-btn / card tokens the store values there. */
body:not(:has(.pl-page)) :is(.blk-store-products, .blk-buy-box) {
    --pl-accent: #ff6a3d; --pl-accent-rgb: 255, 106, 61;
    --pl-accent-2: #6f96ff; --pl-accent-2-rgb: 111, 150, 255;
    --pl-btn-grad: linear-gradient(120deg, #ff8a5c 0%, #ee4b1f 100%); --pl-btn-ink: #fff;
    --pl-ink: #f3f7ff; --pl-text: #c4d2ee; --pl-muted: #8397be; --pl-faint: #5f7099;
    --pl-font-mono: 'Chakra Petch', 'Segoe UI', sans-serif;
    --pl-font-display: 'DM Serif Display', Georgia, serif;
}

/* ── Shared bits ──────────────────────────────────────────────────────── */
.st-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    font: 700 .72rem/1.2 var(--pl-font-mono, 'Chakra Petch', sans-serif);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--pl-muted, #8397be); margin-bottom: 1.1rem;
}
.st-breadcrumb a { color: inherit; text-decoration: none; }
.st-breadcrumb a:hover { color: var(--pl-accent, #ff6a3d); }
.st-breadcrumb .st-sep { opacity: .45; }
.st-breadcrumb [aria-current] { color: var(--pl-ink, #f3f7ff); }

.st-empty {
    text-align: center; color: var(--pl-muted, #8397be); padding: 2.5rem 1rem;
    border: 1px dashed var(--pl-glass-border, rgba(120,150,220,.25)); border-radius: var(--pl-radius, 18px);
}
.st-empty a { color: var(--pl-accent, #ff6a3d); font-weight: 700; }

.st-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
    font: 700 .68rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .08em; text-transform: uppercase;
    color: var(--pl-accent-2, #6f96ff); background: rgba(var(--pl-accent-2-rgb, 111,150,255), .12);
    border: 1px solid rgba(var(--pl-accent-2-rgb, 111,150,255), .3);
}
.st-chip--accent {
    color: var(--pl-accent, #ff6a3d); background: rgba(var(--pl-accent-rgb, 255,106,61), .1);
    border-color: rgba(var(--pl-accent-rgb, 255,106,61), .32);
}

/* Price — scoreboard numerals. */
.st-price {
    font-family: var(--pl-font-mono, 'Chakra Petch', sans-serif); font-weight: 700;
    font-size: 1.45rem; line-height: 1; letter-spacing: .01em;
    color: var(--pl-ink, #f3f7ff); font-variant-numeric: tabular-nums;
}
.st-price small { font-size: .55em; color: var(--pl-muted, #8397be); margin-left: .25rem; letter-spacing: .08em; }
.st-price-note { font-size: .74rem; color: var(--pl-muted, #8397be); line-height: 1.4; }
a.st-price-note { text-decoration: none; }
a.st-price-note:hover { color: var(--pl-accent, #ff6a3d); }

/* Quantity + add. The qty input is a plain number field so it works without JS. */
.st-actions { display: flex; gap: .55rem; align-items: stretch; }
.st-actions .pl-btn, .st-actions .mk-btn { flex: 1; justify-content: center; }
.st-qty {
    width: 64px; flex: 0 0 64px; border-radius: 12px; text-align: center;
    font: 700 1rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif);
    border: 1px solid var(--pl-glass-border, rgba(120,150,220,.25));
    background: var(--pl-bg-2, #0a1024); color: var(--pl-ink, #f3f7ff);
}
.st-qty:focus { outline: 2px solid rgba(var(--pl-accent-rgb, 255,106,61), .55); outline-offset: 1px; }
.st-freight-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font: 700 .7rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .1em; text-transform: uppercase;
    color: var(--pl-accent, #ff6a3d);
}

/* ── Product card ─────────────────────────────────────────────────────── */
.st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: clamp(1rem, 2.4vw, 1.5rem);
}
.st-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%;
    border-radius: var(--pl-radius-lg, 22px);
    border: 1px solid var(--pl-glass-border, rgba(120,150,220,.2));
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--pl-surface, #0e1730);
    box-shadow: var(--pl-shadow-card, 0 20px 50px rgba(0,0,0,.45));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.st-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--pl-accent-rgb, 255,106,61), .45);
    box-shadow: var(--pl-shadow-hi, 0 30px 80px rgba(0,0,0,.6));
}
.st-card__media {
    position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
    padding: 1.25rem; background: #fff; text-decoration: none;
}
.st-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .45s ease; }
.st-card:hover .st-card__media img { transform: scale(1.04); }
.st-card__empty { color: #9aa6c0; font-size: 2.6rem; }
.st-card__badge {
    position: absolute; top: .8rem; left: .8rem; z-index: 2; padding: .35rem .75rem; border-radius: 999px;
    font: 800 .64rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .08em; text-transform: uppercase;
    color: var(--pl-btn-ink, #fff); background: var(--pl-btn-grad, linear-gradient(120deg,#ff8a5c,#ee4b1f));
}
.st-card__freight {
    position: absolute; right: .8rem; top: .8rem; z-index: 2; padding: .35rem .65rem; border-radius: 999px;
    font: 700 .62rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .08em; text-transform: uppercase;
    color: #1d2640; background: #eef1f7; border: 1px solid #d5dbe8;
}
.st-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: clamp(1.15rem, 2.4vw, 1.5rem); }
.st-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.st-card__model {
    font: 700 .68rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .1em; text-transform: uppercase;
    color: var(--pl-faint, #5f7099);
}
.st-card__name {
    font-family: var(--pl-font-display, 'DM Serif Display', Georgia, serif); font-weight: 400;
    font-size: 1.32rem; line-height: 1.12; color: var(--pl-ink, #f3f7ff); margin: 0;
}
.st-card__name a { color: inherit; text-decoration: none; }
.st-card__name a:hover { color: var(--pl-accent, #ff6a3d); }
.st-card__desc { color: var(--pl-muted, #8397be); font-size: .9rem; line-height: 1.5; margin: 0; }
.st-card__foot {
    margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: .7rem;
    border-top: 1px solid var(--pl-hairline, rgba(255,255,255,.08));
}
.st-card__pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.st-card__details {
    font: 700 .7rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .1em; text-transform: uppercase;
    color: var(--pl-accent-2, #6f96ff); text-decoration: none;
}
.st-card__details:hover { color: var(--pl-accent, #ff6a3d); }

/* ── Collection tiles ─────────────────────────────────────────────────── */
.st-collections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(.85rem, 2vw, 1.25rem);
}
.st-coll {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
    min-height: 230px; padding: clamp(1.2rem, 2.4vw, 1.6rem); text-decoration: none;
    border-radius: var(--pl-radius-lg, 22px); border: 1px solid var(--pl-glass-border, rgba(120,150,220,.2));
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--pl-accent-rgb, 255,106,61), .16), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%), var(--pl-surface, #0e1730);
    box-shadow: var(--pl-shadow-card, 0 20px 50px rgba(0,0,0,.45));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.st-coll:hover { transform: translateY(-5px); border-color: rgba(var(--pl-accent-rgb, 255,106,61), .5); box-shadow: var(--pl-glow-accent, 0 8px 30px rgba(255,106,61,.35)); }
.st-coll__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .5s ease; }
.st-coll:hover .st-coll__bg { transform: scale(1.06); }
.st-coll__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(3,6,14,.94) 12%, rgba(3,6,14,.45) 60%, rgba(3,6,14,.15) 100%); }
.st-coll__icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem;
    color: var(--pl-btn-ink, #fff); background: var(--pl-btn-grad, linear-gradient(120deg,#ff8a5c,#ee4b1f));
    box-shadow: 0 8px 22px rgba(var(--pl-accent-rgb, 255,106,61), .35);
}
.st-coll__text { margin-top: auto; padding-top: 1.5rem; }
.st-coll__count {
    font: 700 .66rem/1 var(--pl-font-mono, 'Chakra Petch', sans-serif); letter-spacing: .12em; text-transform: uppercase;
    color: var(--pl-accent, #ff6a3d); margin-bottom: .5rem;
}
.st-coll__name { font-family: var(--pl-font-display, 'DM Serif Display', Georgia, serif); font-size: 1.45rem; line-height: 1.1; color: var(--pl-ink, #f3f7ff); }
.st-coll__desc { margin-top: .45rem; color: var(--pl-muted, #8397be); font-size: .86rem; line-height: 1.5; }
.st-coll.has-img .st-coll__desc { color: #c9d3ea; }
.st-coll__arrow {
    position: absolute; right: 1.25rem; bottom: 1.25rem; color: var(--pl-accent, #ff6a3d);
    opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s;
}
.st-coll:hover .st-coll__arrow { opacity: 1; transform: translateX(0); }

/* Compact pill row ("Keep shopping") */
.st-collpills { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.st-collpill {
    display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: .9rem; color: var(--pl-ink, #f3f7ff);
    background: var(--pl-glass, rgba(18,30,60,.55)); border: 1px solid var(--pl-glass-border, rgba(120,150,220,.2));
    transition: border-color .25s, transform .25s;
}
.st-collpill i { color: var(--pl-accent, #ff6a3d); }
.st-collpill:hover { border-color: rgba(var(--pl-accent-rgb, 255,106,61), .5); transform: translateY(-2px); color: var(--pl-ink, #f3f7ff); }

/* ── Store hero (split: copy + LED readout) ───────────────────────────── */
.pl-store .st-hero { min-height: min(86vh, 820px); }
.st-hero__split {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4.5vw, 3.5rem);
    align-items: center; width: 100%;
}
.st-hero__split .pl-hero__inner > *, .st-hero__copy > * { max-width: 36rem; }
.st-hero__title {
    font-family: var(--pl-font-display); font-weight: 400; font-size: clamp(2.5rem, 6.4vw, 4.8rem);
    line-height: 1.0; letter-spacing: -0.015em; color: var(--pl-ink); margin: .4rem 0 1.15rem;
    text-shadow: 0 4px 60px rgba(0,0,0,.5);
}
.st-hero__title span { display: block; }
.st-hero__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.st-hero__pill {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
    font: 700 .7rem/1 var(--pl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pl-text);
    background: rgba(8,13,28,.55); border: 1px solid var(--pl-glass-border);
}
.st-hero__pill i { color: var(--pl-accent); }
@media (max-width: 900px) {
    .st-hero__split { grid-template-columns: 1fr; }
    .st-hero__led { order: 2; max-width: 460px; margin-inline: auto; width: 100%; }
}

/* LED readout — a CSS scoreboard housing. JS counts the shot clock down; the
   markup already shows a sensible static value, so no-JS / reduced-motion is fine. */
.st-led {
    position: relative; padding: clamp(1.1rem, 2.6vw, 1.6rem); border-radius: var(--pl-radius-lg);
    background: linear-gradient(180deg, #151a26, #07090f 70%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--pl-shadow-hi), 0 0 90px rgba(var(--pl-accent-rgb), .18), inset 0 1px 0 rgba(255,255,255,.06);
}
.st-led::before {   /* mounting bolts */
    content: ""; position: absolute; inset: 10px; pointer-events: none; border-radius: calc(var(--pl-radius-lg) - 8px);
    background:
        radial-gradient(circle at 0 0, #2b3142 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle at 100% 0, #2b3142 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle at 0 100%, #2b3142 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle at 100% 100%, #2b3142 3px, transparent 4px) 0 0 / 100% 100% no-repeat;
}
.st-led__main {
    position: relative; display: grid; place-items: center; border-radius: 14px; padding: clamp(.75rem, 2vw, 1.2rem) 0;
    background:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.5px) 0 0 / 7px 7px,
        #030407;
    border: 1px solid rgba(255,255,255,.05);
}
.st-led__label {
    font: 700 .64rem/1 var(--pl-font-mono); letter-spacing: .26em; text-transform: uppercase; color: #6b7390;
    margin-bottom: .35rem;
}
.st-led__digits {
    font-family: var(--pl-font-mono); font-weight: 700; line-height: .9; letter-spacing: .04em;
    font-size: clamp(5.5rem, 15vw, 9.5rem); color: var(--st-led, #ff3b2a); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px var(--st-led-glow, rgba(255,59,42,.55)), 0 0 42px rgba(255,59,42,.28);
}
.st-led__digits.is-low { color: #ffb020; text-shadow: 0 0 18px rgba(255,176,32,.55), 0 0 42px rgba(255,176,32,.25); }
.st-led__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .75rem; }
.st-led__cell {
    display: grid; place-items: center; gap: .25rem; padding: .7rem .4rem; border-radius: 12px;
    background: #030407; border: 1px solid rgba(255,255,255,.05);
}
.st-led__cell b {
    font: 700 clamp(1.35rem, 3.2vw, 1.9rem)/1 var(--pl-font-mono); color: var(--st-led, #ff3b2a); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px var(--st-led-glow, rgba(255,59,42,.5));
}
.st-led__cell b.is-amber { color: #ffb020; text-shadow: 0 0 12px rgba(255,176,32,.5); }
.st-led__cell span { font: 700 .56rem/1 var(--pl-font-mono); letter-spacing: .18em; text-transform: uppercase; color: #6b7390; }
.st-led__cap {
    display: flex; justify-content: space-between; gap: .75rem; margin-top: .9rem;
    font: 700 .64rem/1.3 var(--pl-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #6b7390;
}
.st-led__cap i { color: var(--pl-accent); margin-right: .35rem; }

/* ── Trust / value strip ──────────────────────────────────────────────── */
.st-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); }
.st-trust-item {
    display: flex; gap: .9rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--pl-radius, 18px);
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--pl-surface, #0e1730);
    border: 1px solid var(--pl-glass-border, rgba(120,150,220,.2));
}
.st-trust-item > i {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem;
    color: var(--pl-btn-ink, #fff); background: var(--pl-btn-grad, linear-gradient(120deg,#ff8a5c,#ee4b1f));
}
.st-trust-title { font-weight: 800; color: var(--pl-ink, #f3f7ff); font-size: .95rem; }
.st-trust-body { color: var(--pl-muted, #8397be); font-size: .84rem; line-height: 1.5; margin-top: .2rem; }
.pl-section--paper .st-trust-item, .pl-section--light .st-trust-item {
    background: #fff; border-color: rgba(13,23,48,.08); box-shadow: 0 10px 30px rgba(13,23,48,.06);
}

/* ── Collection intro (rich text on paper) ───────────────────────────── */
.st-prose { font-size: 1.05rem; line-height: 1.72; color: var(--pl-text); max-width: 68ch; }
.st-prose p { margin: 0 0 1em; }
.st-prose h2, .st-prose h3 { font-family: var(--pl-font-display); font-weight: 400; color: var(--pl-ink); line-height: 1.15; margin: 1.4em 0 .5em; }
.st-prose ul { padding-left: 1.2rem; }
.st-prose li { margin-bottom: .4em; }
.st-prose a { color: var(--pl-accent-ink, #a3300c); font-weight: 700; }
.st-prose strong { color: var(--pl-ink); }

/* ── Store product page ───────────────────────────────────────────────── */
.st-pd { padding-top: clamp(6.5rem, 10vw, 8.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.st-pd__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 960px) { .st-pd__grid { grid-template-columns: 1fr; } }

.st-gallery { position: sticky; top: 6rem; }
@media (max-width: 960px) { .st-gallery { position: static; } }
.st-gallery__main {
    position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(1rem, 3vw, 2rem);
    border-radius: var(--pl-radius-lg); background: #fff; overflow: hidden;
    border: 1px solid var(--pl-glass-border); box-shadow: var(--pl-shadow-hi), 0 0 80px rgba(var(--pl-accent-rgb), .14);
}
.st-gallery__main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-gallery__empty { color: #9aa6c0; font-size: 4rem; }
.st-gallery__thumbs { display: flex; gap: .6rem; margin-top: .8rem; overflow-x: auto; padding-bottom: .25rem; }
.st-gallery__thumb {
    flex: 0 0 82px; height: 66px; padding: .3rem; border-radius: 12px; cursor: pointer; background: #fff;
    border: 2px solid transparent; opacity: .72; transition: opacity .2s, border-color .2s;
}
.st-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.st-gallery__thumb:hover { opacity: 1; }
.st-gallery__thumb.is-active { opacity: 1; border-color: var(--pl-accent); }

.st-buy__title {
    font-family: var(--pl-font-display); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    line-height: 1.04; letter-spacing: -0.01em; color: var(--pl-ink); margin: .35rem 0 .8rem;
}
.st-buy__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.st-buy__lede { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.62; color: var(--pl-text); margin: 0 0 1.4rem; }
.st-buy__box {
    padding: clamp(1.2rem, 2.6vw, 1.6rem); border-radius: var(--pl-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 50%), var(--pl-surface);
    border: 1px solid rgba(var(--pl-accent-rgb), .28); box-shadow: var(--pl-shadow-card), 0 0 60px rgba(var(--pl-accent-rgb), .08) inset;
}
.st-buy__pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.st-buy__box .st-price { font-size: clamp(2rem, 4vw, 2.6rem); }
.st-buy__stock { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--pl-text); }
.st-buy__stock i { color: #34d399; }
.st-buy__box .st-actions .pl-btn { --_pad-y: 1rem; }
.st-buy__fine { margin-top: .85rem; font-size: .78rem; color: var(--pl-muted); line-height: 1.5; }
.st-buy__fine a { color: var(--pl-ink); font-weight: 700; text-decoration: none; }
.st-buy__fine a:hover { color: var(--pl-accent); }
.st-buy__checks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.st-buy__checks li { display: flex; gap: .65rem; align-items: flex-start; color: var(--pl-text); font-size: .95rem; line-height: 1.45; }
.st-buy__checks li i { color: var(--pl-accent); margin-top: .22rem; font-size: .8rem; flex-shrink: 0; }
.st-buy__assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.4rem; }
.st-buy__assure div {
    display: grid; gap: .35rem; justify-items: center; text-align: center; padding: .8rem .5rem; border-radius: 14px;
    background: var(--pl-glass); border: 1px solid var(--pl-hairline);
    font: 700 .62rem/1.3 var(--pl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted);
}
.st-buy__assure i { color: var(--pl-accent-2); font-size: 1rem; }
@media (max-width: 480px) { .st-buy__assure { grid-template-columns: 1fr; } .st-buy__assure div { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; } }

/* Description + specs */
.st-descgrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .st-descgrid { grid-template-columns: 1fr; } }
.st-specs { width: 100%; border-collapse: collapse; }
.st-specs th, .st-specs td { text-align: left; vertical-align: top; padding: .8rem 0; border-bottom: 1px solid rgba(13,23,48,.1); font-size: .93rem; }
.st-specs th {
    width: 42%; padding-right: 1rem; font: 700 .7rem/1.5 var(--pl-font-mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--pl-muted);
}
.st-specs td { color: var(--pl-ink); font-weight: 600; }
.st-specs tr:last-child th, .st-specs tr:last-child td { border-bottom: 0; }
.st-specs-card {
    padding: clamp(1.2rem, 2.6vw, 1.75rem); border-radius: var(--pl-radius-lg);
    background: #fff; border: 1px solid rgba(13,23,48,.08); box-shadow: 0 16px 40px rgba(13,23,48,.08);
}
.st-specs-card h3 {
    margin: 0 0 .6rem; font: 700 .72rem/1 var(--pl-font-mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--pl-accent-ink, #a3300c);
}
.st-docs { display: grid; gap: .5rem; margin-top: 1.2rem; }
.st-docs a {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; text-decoration: none;
    font-weight: 700; font-size: .88rem; color: var(--pl-ink); background: var(--pl-paper-2, #ebe3da);
}
.st-docs a i { color: var(--pl-accent-ink, #a3300c); }
.st-docs a:hover { filter: brightness(.97); }

/* Feature cards grid on the product page (icon | title | body) */
.st-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(.9rem, 2vw, 1.25rem); }
.st-feat {
    padding: clamp(1.3rem, 2.4vw, 1.7rem); border-radius: var(--pl-radius);
    background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%), var(--pl-surface);
    border: 1px solid var(--pl-glass-border); box-shadow: var(--pl-shadow-card);
    transition: transform .3s ease, border-color .3s ease;
}
.st-feat:hover { transform: translateY(-4px); border-color: rgba(var(--pl-accent-rgb), .4); }
.st-feat__icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1rem;
    color: var(--pl-btn-ink); background: var(--pl-btn-grad); box-shadow: 0 6px 18px rgba(var(--pl-accent-rgb), .3);
}
.st-feat h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; color: var(--pl-ink); }
.st-feat p { margin: 0; color: var(--pl-muted); font-size: .92rem; line-height: 1.55; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.st-toast {
    position: fixed; right: 16px; bottom: 16px; z-index: 2000; max-width: calc(100vw - 32px);
    background: #0e1730; color: #f3f7ff; border: 1px solid #ff6a3d;
    border-radius: 14px; padding: .8rem 1.05rem; box-shadow: 0 16px 40px rgba(0,0,0,.4);
    font-size: .9rem; display: none; font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-toast.show { display: flex; gap: .85rem; align-items: center; }
.st-toast a { color: #ff8a5c; font-weight: 800; white-space: nowrap; text-decoration: none; }

/* ── Page-builder blocks inside store pages ───────────────────────────────
   Blocks keep their own markup; inside a store .pl-page they take on the
   product-line type, surfaces and accent. Adjacent blocks alternate tone. */
.pl-store .mk-extras .blk { padding-block: clamp(3.5rem, 8vw, 6rem); font-family: var(--pl-font-body); color: var(--pl-text); }
.pl-store .mk-extras .blk:nth-child(even) { background: linear-gradient(180deg, var(--pl-bg-2), var(--pl-bg)); }
.pl-store .mk-extras .blk .mk-container { max-width: var(--pl-maxw); padding-inline: var(--pl-gutter); }
.pl-store .mk-extras .blk-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
    font: 700 .72rem/1 var(--pl-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pl-accent);
    background: none; border: 0; padding: 0;
}
.pl-store .mk-extras .blk-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--pl-accent); }
.pl-store .mk-extras .blk-title {
    font-family: var(--pl-font-display); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.06; letter-spacing: -0.01em; color: var(--pl-ink); margin: 0 0 .8rem;
}
.pl-store .mk-extras .blk-sub { color: var(--pl-muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.62; max-width: 62ch; }
.pl-store .mk-extras .blk-body { color: var(--pl-text); font-size: 1.02rem; line-height: 1.7; }
.pl-store .mk-extras .blk-body strong { color: var(--pl-ink); }
.pl-store .mk-extras .blk-body ul { padding-left: 1.15rem; }
.pl-store .mk-extras .blk-body li { margin-bottom: .45em; }
.pl-store .mk-extras .blk-body a { color: var(--pl-accent); }
.pl-store .mk-extras .blk-btn-primary {
    background: var(--pl-btn-grad); color: var(--pl-btn-ink); border: 0; border-radius: 999px;
    font: 700 .82rem/1 var(--pl-font-mono); letter-spacing: .1em; text-transform: uppercase; padding: .9rem 1.6rem;
    box-shadow: 0 10px 28px rgba(var(--pl-accent-rgb), .35);
}
.pl-store .mk-extras .blk-btn-primary:hover { filter: brightness(1.06); color: var(--pl-btn-ink); }

/* feature_cards */
.pl-store .mk-extras .blk-feature-grid { gap: clamp(.9rem, 2vw, 1.25rem); margin-top: 2rem; }
.pl-store .mk-extras .blk-feature-card {
    padding: clamp(1.3rem, 2.4vw, 1.7rem); border-radius: var(--pl-radius);
    background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%), var(--pl-surface);
    border: 1px solid var(--pl-glass-border); box-shadow: var(--pl-shadow-card);
}
.pl-store .mk-extras .blk-feature-card:hover { border-color: rgba(var(--pl-accent-rgb), .4); }
.pl-store .mk-extras .blk-feature-card-icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1rem;
    color: var(--pl-btn-ink); background: var(--pl-btn-grad); box-shadow: 0 6px 18px rgba(var(--pl-accent-rgb), .3);
}
.pl-store .mk-extras .blk-feature-card-title { color: var(--pl-ink); font-weight: 800; font-size: 1.05rem; }
.pl-store .mk-extras .blk-feature-card-body { color: var(--pl-muted); font-size: .92rem; line-height: 1.55; }

/* stats */
.pl-store .mk-extras .blk-stats { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.pl-store .mk-extras .blk-stats-row { gap: clamp(.6rem, 2vw, 1.25rem); }
.pl-store .mk-extras .blk-stat {
    text-align: center; padding: clamp(1rem, 2.5vw, 1.6rem) .75rem; border-radius: var(--pl-radius);
    border: 1px solid var(--pl-glass-border); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--pl-surface);
}
.pl-store .mk-extras .blk-stat-num {
    font-family: var(--pl-font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1;
    background: var(--pl-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pl-store .mk-extras .blk-stat-label { margin-top: .5rem; font: 700 .72rem/1.25 var(--pl-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); }

/* how_it_works */
.pl-store .mk-extras .blk-steps { gap: clamp(1rem, 2.4vw, 1.5rem); margin-top: 2rem; }
.pl-store .mk-extras .blk-step {
    padding: clamp(1.4rem, 2.6vw, 1.9rem); border-radius: var(--pl-radius); text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--pl-surface);
    border: 1px solid var(--pl-glass-border);
}
.pl-store .mk-extras .blk-step-num {
    font: 700 .78rem/1 var(--pl-font-mono); letter-spacing: .1em; color: var(--pl-btn-ink);
    background: var(--pl-btn-grad); border: 0; box-shadow: 0 6px 18px rgba(var(--pl-accent-rgb), .3);
}
.pl-store .mk-extras .blk-step-title { color: var(--pl-ink); font-weight: 800; }
.pl-store .mk-extras .blk-step-text { color: var(--pl-muted); line-height: 1.55; }

/* image_text */
.pl-store .mk-extras .blk-image-text-grid { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pl-store .mk-extras .blk-image-text-grid img {
    border-radius: var(--pl-radius-lg); border: 1px solid var(--pl-glass-border); box-shadow: var(--pl-shadow-hi);
}
.st-productpage .mk-extras .blk-image-text-media img { background: #fff; padding: clamp(1rem, 3vw, 2rem); object-fit: contain; aspect-ratio: 4 / 3; }

/* faq (public styles live here — blocks.css has none for it) */
.pl-store .mk-extras .blk-faq-list { max-width: 820px; margin: 2rem auto 0; display: grid; gap: .7rem; }
.pl-store .mk-extras .blk-faq .mk-container > .blk-eyebrow,
.pl-store .mk-extras .blk-faq .mk-container > .blk-title,
.pl-store .mk-extras .blk-faq .mk-container > .blk-sub { text-align: center; margin-inline: auto; }
.pl-store .mk-extras .blk-faq .mk-container > .blk-eyebrow { display: flex; justify-content: center; }
.pl-store .mk-extras .blk-faq-item {
    border-radius: var(--pl-radius); background: var(--pl-surface); border: 1px solid var(--pl-glass-border);
    padding: 0 1.25rem; transition: border-color .25s;
}
.pl-store .mk-extras .blk-faq-item[open] { border-color: rgba(var(--pl-accent-rgb), .4); padding-bottom: 1.15rem; }
.pl-store .mk-extras .blk-faq-q {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 0; font-weight: 700; font-size: 1rem; color: var(--pl-ink);
}
.pl-store .mk-extras .blk-faq-q::-webkit-details-marker { display: none; }
.pl-store .mk-extras .blk-faq-caret { color: var(--pl-accent); transition: transform .2s ease; flex-shrink: 0; }
.pl-store .mk-extras .blk-faq-item[open] .blk-faq-caret { transform: rotate(180deg); }
.pl-store .mk-extras .blk-faq-a { color: var(--pl-text); line-height: 1.65; font-size: .95rem; }
.pl-store .mk-extras .blk-faq-a p { margin: 0 0 .7em; }
.pl-store .mk-extras .blk-faq-a p:last-child { margin-bottom: 0; }
.pl-store .mk-extras .blk-faq-a a { color: var(--pl-accent); font-weight: 700; }

/* cta_banner */
.pl-store .mk-extras .blk-cta-banner { background: none !important; }
.pl-store .mk-extras .blk-cta-banner-inner {
    position: relative; overflow: hidden; text-align: center; display: grid; justify-items: center; gap: 1.25rem;
    padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.4rem, 5vw, 3.5rem); border-radius: var(--pl-radius-lg);
    background:
        radial-gradient(120% 160% at 50% -20%, rgba(var(--pl-accent-rgb), .28), transparent 62%),
        linear-gradient(135deg, var(--mfs-primary-dk, #0d1d47), var(--pl-bg-2));
    border: 1px solid rgba(var(--pl-accent-rgb), .3); box-shadow: var(--pl-shadow-hi);
}
.pl-store .mk-extras .blk-cta-banner-title { font-family: var(--pl-font-display); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; color: var(--pl-ink); margin: 0; }
.pl-store .mk-extras .blk-cta-banner-sub { color: var(--pl-text); font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 600px; margin: .6rem auto 0; }
.pl-store .mk-extras .blk-cta-banner-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .st-collections { grid-template-columns: 1fr; }
    .st-coll { min-height: 190px; }
    .st-led__row { gap: .4rem; }
}

/* ── Link colours ─────────────────────────────────────────────────────────
   marketing.css colours every `.mk a:not(.mk-btn)` with the theme accent (0,2,1);
   store links carry their own colours, so restate them one step stronger. */
.mk .pl-page .st-breadcrumb a,
.mk .pl-page .st-card__name a        { color: inherit; }
.mk .pl-page .st-breadcrumb a:hover,
.mk .pl-page .st-card__name a:hover  { color: var(--pl-accent); }
.mk .pl-page a.st-card__details      { color: var(--pl-accent-2); }
.mk .pl-page a.st-card__details:hover { color: var(--pl-accent); }
.mk .pl-page a.st-coll,
.mk .pl-page a.st-collpill           { color: var(--pl-ink); }
.mk .pl-page .st-buy__fine a         { color: var(--pl-ink); }
.mk .pl-page .st-buy__fine a:hover   { color: var(--pl-accent); }
.mk .pl-page .pl-btn--primary        { color: var(--pl-btn-ink); }
.mk .pl-page .pl-btn--ghost          { color: var(--pl-ink); }