/* ==========================================================================
   Shopiva — electronics marketplace template
   Design: 1440 canvas, 60px gutters, 1320 content column.
   Every colour, radius and family here falls back to the design's own value but
   reads the merchant's Style options first (see shopiva-theme-css.blade.php).
   ========================================================================== */

/* -------- reset ---------------------------------------------------------- */
.sv-body *,
.sv-body *::before,
.sv-body *::after { box-sizing: border-box; }

.sv-body {
    margin: 0;
    font-family: var(--sv-font, 'Inter', system-ui, sans-serif);
    color: var(--sv-body, #787878);
    background: var(--sv-page, #f2f2f2);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* Element resets stay at zero specificity for the same reason the link reset below
   does: a bare `.sv-body h2` scores (0,1,1) and beats a shared partial's own class
   (0,1,0), so every partial the platform drops into a page (reviews, bundles,
   pre-order, loyalty) silently loses its spacing. :where() keeps the intent and lets
   any single class win. */
:where(.sv-body) h1, :where(.sv-body) h2, :where(.sv-body) h3,
:where(.sv-body) h4, :where(.sv-body) h5, :where(.sv-body) h6 {
    margin: 0;
    color: var(--sv-ink, #1c1c1c);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

:where(.sv-body) p { margin: 0; }
:where(.sv-body) img { max-width: 100%; display: block; }
:where(.sv-body) ul, :where(.sv-body) ol { margin: 0; padding: 0; list-style: none; }

/* A bare colour reset on `a` outranks every link class: `.sv-body a` scores (0,1,1)
   and beats `.sv-action` (0,1,0), so class-styled links silently inherit whatever the
   section sets — white on the orange bar, in the case that caught this. Wrapping the
   scope in :where() drops it to (0,0,1) so any single class wins. */
:where(.sv-body) a { color: inherit; text-decoration: none; }
:where(.sv-body) button { font: inherit; }
.sv-body button { cursor: pointer; }

/* -------- layout --------------------------------------------------------- */
.sv-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 60px;
}

/* The drag-and-drop header is a platform partial with its own 1320px shell and a
   16px inset, so its logo sat 16px further in than everything below it. Pin it to the
   container the template centres its sections in — which is the merchant's own
   Design → Style width when they have set one — so the two line up at every width. */
html[data-ec-storefront="shopiva"] .ec-hb-in {
    max-width: var(--ec-style-container, 1440px);
    padding-inline: var(--ec-style-gutter, 60px);
}

/* The design's rhythm, measured off the comp: 60px between two sections on desktop,
   20px on a phone. Each section carries half, so any two neighbours add up to it. */
:root {
    /* The design's rhythm as two numbers rather than four places to forget one.
       --sv-section-gap is the space between any TWO neighbouring sections (each
       carries half, so neighbours always add up to it); --sv-head-gap is a section's
       title to its content. */
    --sv-section-gap: 60px;
    --sv-head-gap: 30px;
}
.sv-section { padding-block: calc(var(--sv-section-gap, 60px) / 2); }
.sv-section--flush { padding-block: 0; }
.sv-section--tint { background: var(--sv-surface, #f2f2f2); }

/* -------- section heading ------------------------------------------------ */
.sv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--sv-head-gap, 30px);
}

.sv-head-title {
    font-family: var(--sv-display, 'Cabin', sans-serif);
    /* 40px at the comp's 1440 and 36px on a phone, with its 1.5 line-height — the
       heading box is 60px / 54px there, and the section rhythm is measured off it. */
    font-size: clamp(2.25rem, 2.8vw, 2.5rem);
    /* ⚠️ Was 1.5, which on a 40px heading is a 60px box — 20px of empty leading, half
       of it above the letters. Invisible in the markup and very visible with a ruler:
       the 60px between two sections measured ~76 and the 30px under a title measured
       ~41, because every gap carried the heading's half-leading on top. 1.2 keeps the
       type as drawn and leaves 4px, so the numbers above are what the page shows. */
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* The design highlights the middle word of each heading in the brand colour. */
.sv-head-title em { font-style: normal; color: var(--sv-accent, #fa5b05); }

.sv-head-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sv-accent, #fa5b05);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}
.sv-head-link:hover { gap: 12px; }
.sv-head-link i { transition: transform 0.25s ease; }

/* -------- buttons -------------------------------------------------------- */
.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--sv-pill, 999px);
    padding: 12px 22px;
    background: var(--ec-style-btn2-bg, var(--sv-accent, #fa5b05));
    color: var(--ec-style-btn2-text, var(--sv-accent-ink, #fff));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.sv-btn:hover {
    background: var(--ec-style-btn2-hover-bg, var(--ec-style-btn2-bg, var(--sv-accent, #fa5b05)));
    color: var(--ec-style-btn2-hover-text, var(--ec-style-btn2-text, var(--sv-accent-ink, #fff)));
    filter: var(--ec-style-btn2-hover-filter, brightness(1.07));
}
.sv-btn:active { transform: translateY(1px); }

/* The design pairs the pill with a white circular arrow. */
.sv-btn--arrow { padding-right: 6px; }
.sv-btn--arrow .sv-btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sv-surface, #fff);
    color: var(--sv-accent, #fa5b05);
    font-size: 0.95rem;
}

.sv-btn--ghost {
    background: var(--sv-surface, #fff);
    color: var(--ec-style-btn-outline-text, var(--sv-ink, #1c1c1c));
    border: 1px solid var(--ec-style-btn-outline-border, var(--sv-line, #eee));
}
.sv-btn--ghost:hover {
    background: var(--ec-style-btn-outline-hover-bg, #fff);
    border-color: var(--ec-style-btn-outline-hover-text, var(--sv-accent, #fa5b05));
    color: var(--ec-style-btn-outline-hover-text, var(--sv-accent, #fa5b05));
    filter: none;
}

.sv-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--sv-pill, 999px);
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--sv-accent-ink, #fff);
    font-size: 0.75rem;
    font-weight: 600;
}

/* -------- top bar -------------------------------------------------------- */
.sv-topbar {
    background: var(--sv-bar, #fa5b05);
    color: var(--sv-bar-ink, #fff);
    font-size: 0.8125rem;
}
.sv-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 40px;
    padding-block: 6px;
    text-align: center;
}
.sv-topbar-text { font-weight: 500; }
.sv-topbar-badge { flex: none; }
.sv-topbar-badge img { height: 24px; width: auto; }

/* The strip scrolls its own text when a merchant writes more than fits. */
.sv-topbar--marquee .sv-topbar-text {
    white-space: nowrap;
    overflow: hidden;
}
.sv-topbar--marquee .sv-topbar-text > span {
    display: inline-block;
    padding-left: 100%;
    animation: sv-marquee 18s linear infinite;
}
@keyframes sv-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .sv-topbar--marquee .sv-topbar-text > span { animation: none; padding-left: 0; }
}

/* -------- header --------------------------------------------------------- */
.sv-header { position: relative; z-index: 60; }

.sv-header-main { background: var(--sv-bar, #fa5b05); color: var(--sv-bar-ink, #fff); }
.sv-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 16px;
    min-height: 72px;
}

.sv-brand { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.sv-brand-mark { height: 40px; width: auto; display: block; }
.sv-brand-logo { height: auto; max-height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.sv-brand-name {
    font-family: var(--sv-display, 'Cabin', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--sv-bar-ink, #fff);
}

.sv-nav-left { display: flex; align-items: center; gap: 35px; min-width: 0; }
.sv-nav { display: flex; align-items: center; gap: 19px; }
.sv-nav-item { position: relative; }
.sv-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 6px;
    color: var(--sv-bar-ink, #fff);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.sv-nav-link:hover { opacity: 0.82; }
.sv-nav-caret { font-size: 1.05rem; line-height: 1; transition: transform 0.25s ease; }
.sv-nav-item:hover > .sv-nav-link .sv-nav-caret { transform: rotate(180deg); }

.sv-nav-drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin-top: 10px;
    padding: 8px;
    border-radius: var(--sv-radius-sm, 8px);
    background: var(--sv-surface, #fff);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.sv-nav-item:hover > .sv-nav-drop,
.sv-nav-item:focus-within > .sv-nav-drop { opacity: 1; visibility: visible; transform: none; }
.sv-nav-drop a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--sv-radius-sm, 8px);
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.875rem;
    font-weight: 500;
}
.sv-nav-drop a:hover { background: var(--sv-panel, #dbdbdb); color: var(--sv-accent, #fa5b05); }

/* search ------------------------------------------------------------------ */
.sv-header-right { display: flex; align-items: center; gap: 20px; flex: none; }

.sv-search {
    /* The instant-results panel is positioned against this form. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 446px;
    max-width: 100%;
    padding: 4px 4px 4px 16px;
    border-radius: var(--sv-radius-sm, 8px);
    background: var(--sv-surface, #fff);
}
.sv-search-cats {
    display: flex;
    align-items: center;
    flex: none;
    width: 120px;
    padding-right: 8px;
    border-right: 1px solid var(--sv-line, #eee);
}
.sv-search-cats select {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    cursor: pointer;
    appearance: none;
    padding-right: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c1c1c' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 14px;
}
.sv-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.875rem;
    font-weight: 500;
}
.sv-search-input, .sv-search-cats select { font-family: inherit; }
.sv-search-input::placeholder { color: var(--sv-muted, #89939d); }
.sv-search-input:focus { outline: none; }
.sv-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 32px;
    padding-inline: 12px;
    border: 0;
    border-radius: 4px;
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
    font-size: 0.875rem;
    font-weight: 500;
}
.sv-search-btn:hover { filter: brightness(1.07); }

/* account / wishlist / cart ------------------------------------------------ */
.sv-actions { display: flex; align-items: center; gap: 8px; }
.sv-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    border: 1px solid var(--sv-line, #eee);
    border-radius: var(--sv-radius-sm, 8px);
    background: var(--sv-surface, #fff);
    color: var(--sv-ink, #1c1c1c);
    font-size: 1.5rem;
}
.sv-action:hover { border-color: var(--sv-accent, #fa5b05); color: var(--sv-accent, #fa5b05); }
.sv-action-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--sv-ink, #1c1c1c);
    color: var(--sv-surface, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* -------- trust strip ---------------------------------------------------- */
.sv-trust { background: var(--sv-accent-soft, #ffdcc9); }
/* The desktop comp has no strip; a store can keep it on phones alone. */
@media (min-width: 768px) { .sv-trust--phone-only { display: none; } }
/* Scrolling, the row is a track rather than a spread — still flex, so the band keeps
   its 48px and its vertical centring, with the marquee as the one child that grows. */
.sv-trust-row--marquee { justify-content: flex-start; overflow: hidden; }
.sv-trust-row--marquee .ec-promo-marquee { flex: 1 1 auto; min-width: 0; }
.sv-trust-row--marquee .ec-promo-marquee__group { gap: 28px; padding-right: 28px; }
.sv-trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding-block: 8px;
}
.sv-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sv-accent-deep, #c74804);
    font-size: 0.8125rem;
    font-weight: 600;
}
.sv-trust-item i { font-size: 1.25rem; }
/* An uploaded icon matches the Remix glyph's box and keeps its own aspect ratio. */
.sv-trust-item img { width: auto; height: 20px; max-width: 28px; object-fit: contain; }

/* -------- footer --------------------------------------------------------- */
/* The design's nav strip is 54px tall; the builder's menu item is 51. */
html[data-ec-storefront="shopiva"] .ec-hb-item.is-menu { padding-block: 1.5px; }
html[data-ec-storefront="shopiva"] .ec-hb-search.is-mode-inline { height: var(--hb-field-h, 46px); }

html[data-ec-storefront="shopiva"] .ec-hs--shopiva { padding-block: 24px 30px; }

.sv-footer { background: var(--sv-footer-bg, #0a0b10); color: var(--sv-footer-ink, rgba(255, 255, 255, 0.72)); margin-top: 50px; }
.sv-footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(24px, 3vw, 48px);
    padding-block: clamp(36px, 4vw, 56px);
}
.sv-footer-brand { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.sv-footer-brand .sv-brand-name { color: var(--sv-footer-head, #fff); }
.sv-footer-about { font-size: 0.875rem; line-height: 1.7; max-width: 46ch; }
.sv-footer-title {
    margin-bottom: 16px;
    color: var(--sv-footer-head, #fff);
    font-size: 1rem;
    font-weight: 700;
}
.sv-footer-links { display: grid; gap: 10px; }
/* Links inherit the band's text colour by default — that is the design — but a merchant
   who sets a footer link colour in Design → Style now gets it. */
.sv-footer-links a { font-size: 0.875rem; color: var(--ec-style-footer-link, inherit); }
.sv-footer-links a:hover { color: var(--ec-style-footer-link-hover, var(--sv-accent, #fa5b05)); }
.sv-footer-contact { display: grid; gap: 10px; font-size: 0.875rem; }

.sv-social { display: flex; gap: 10px; margin-top: 20px; }
.sv-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
    font-size: 1rem;
}
.sv-social a:hover { filter: brightness(1.12); }

.sv-footer-pay {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 28px;
}
.sv-footer-pay-title { margin-bottom: 12px; color: var(--sv-footer-head, #fff); font-size: 0.875rem; font-weight: 600; }
.sv-footer-pay img { max-height: 28px; width: auto; }
.sv-footer-pay-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-footer-pay-icons img { height: 28px; width: auto; border-radius: 4px; background: var(--sv-surface, #fff); }

.sv-newsletter { min-width: 280px; }
.sv-newsletter-title { margin-bottom: 12px; color: var(--sv-footer-head, #fff); font-size: 0.875rem; font-weight: 600; text-align: right; }
.sv-newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 18px;
    border-radius: var(--sv-pill, 999px);
    background: var(--sv-surface, #fff);
}
.sv-newsletter-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.875rem;
}
.sv-newsletter-form input:focus { outline: none; }
.sv-newsletter-form button {
    flex: none;
    border: 0;
    border-radius: var(--sv-pill, 999px);
    padding: 10px 22px;
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
    font-size: 0.875rem;
    font-weight: 600;
}

.sv-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 20px;
    border-top: 1px solid var(--sv-footer-line, rgba(255, 255, 255, 0.1));
    font-size: 0.8125rem;
}
.sv-footer-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
.sv-footer-bottom-links a:hover { color: var(--ec-style-footer-link-hover, var(--sv-accent, #fa5b05)); }

/* -------- mobile nav ----------------------------------------------------- */
.sv-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    border: 0;
    border-radius: var(--sv-radius-sm, 8px);
    background: rgba(255, 255, 255, 0.16);
    color: var(--sv-bar-ink, #fff);
    font-size: 1.35rem;
}

.sv-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 901;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--sv-surface, #fff);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.sv-drawer.is-open { transform: none; }
.sv-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--sv-bar, #fa5b05);
}
.sv-drawer-close { border: 0; background: transparent; color: var(--sv-accent-ink, #fff); font-size: 1.5rem; }
.sv-drawer-nav { padding: 12px; }
.sv-drawer-nav a {
    display: block;
    padding: 12px 10px;
    border-radius: var(--sv-radius-sm, 8px);
    color: var(--sv-ink, #1c1c1c);
    font-weight: 600;
}
.sv-drawer-nav a:hover { background: var(--sv-panel, #dbdbdb); }
.sv-drawer-sub a { padding-left: 24px; font-weight: 500; font-size: 0.9rem; color: var(--sv-body, #787878); }

.sv-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.sv-backdrop.is-open { opacity: 1; visibility: visible; }

/* -------- responsive ----------------------------------------------------- */
@media (max-width: 1199px) {
    .sv-container { padding-inline: 32px; }
    html[data-ec-storefront="shopiva"] .ec-hb-in { padding-inline: 32px; }
    .sv-nav { gap: 14px; }
    .sv-nav-left { gap: 22px; }
    .sv-search { width: 320px; }
}

@media (max-width: 991px) {
    .sv-nav { display: none; }
    .sv-burger { display: inline-flex; }
    .sv-header-row { flex-wrap: wrap; row-gap: 12px; }
    /* The right-hand group is a nowrap row by default, so the 446px search ran past
       the viewport once the bar lost its desktop width. Let it wrap and give the
       search a row of its own under the actions. */
    .sv-header-right { width: 100%; flex-wrap: wrap; gap: 12px; }
    .sv-search { order: 3; flex: 1 1 100%; width: auto; min-width: 0; }
    .sv-actions { order: 2; margin-left: auto; }
    .sv-nav-left { flex: 1 1 auto; min-width: 0; }
    .sv-footer-top { grid-template-columns: 1fr 1fr; }
    .sv-newsletter-title { text-align: left; }
}

/* The hero artwork puts its product on the right and keeps the left clear for type.
   A narrow `cover` crop centres on that empty side, so the slide looked blank —
   bias the crop toward the product as the box gets narrower. */
@media (max-width: 991px) {
    .ec-hs--shopiva .ec-hs-media img { object-position: 72% center; }
    .ec-hs--shopiva .ec-hs-side-media img { object-position: center 62%; }
}

@media (max-width: 767px) {
    /* 12px, which is what both phone comps draw: a 402 frame with its content at
       x=12, width 378 — the product page and the home page agree on it. It was 10. */
    .sv-container { padding-inline: 12px; }
    html[data-ec-storefront="shopiva"] .ec-hb-in { padding-inline: 12px; }

    .sv-trust-row { overflow-x: auto; justify-content: flex-start; gap: 24px; scrollbar-width: none; }
    .sv-trust-row--marquee { overflow-x: hidden; }
    .sv-trust-row::-webkit-scrollbar { display: none; }
    .sv-trust-item { white-space: nowrap; }
    .sv-footer-top { grid-template-columns: 1fr; }
    .sv-footer-pay { flex-direction: column; align-items: flex-start; }
    .sv-newsletter { width: 100%; min-width: 0; }
    .sv-head { flex-wrap: wrap; }
}

@media (max-width: 479px) {
    .sv-brand-name { font-size: 1.4rem; }
    .sv-actions { gap: 6px; }
    .sv-action { width: 38px; height: 38px; }
}

/* -------- product card --------------------------------------------------- */
/* Design: 254.4 outer at 5-up in 1320 (230.4 square photo + 12px padding). */
.sv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--sv-radius, 12px);
    background: var(--sv-surface, #fff);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sv-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }

.sv-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    /* Figma draws the photo at 4px, not the card's own 8 — confirmed on the home grid
       (1:529) and the category grid (1:2951) independently. */
    border-radius: 4px;
    overflow: hidden;
    background: var(--sv-surface, #fff);
}
.sv-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.sv-card:hover .sv-card-media img { transform: scale(1.04); }

.sv-card-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    border-radius: var(--sv-pill, 999px);
    padding: 4px 10px;
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* The picture and what floats over it. The add was pinned to the whole card and only
   landed on the photo because the padding was 12px and the photo square; against this
   box `inset: 0` is the photo whatever shape it takes. */
.sv-card-frame { position: relative; }

/* The add control floats over the photo and reveals on hover. It sits outside the
   product link and is the real control, so a click adds rather than navigates. */
.sv-card-add {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.sv-card-add form { display: contents; }
.sv-card-add > *,
.sv-card-add form > * { pointer-events: auto; }
.sv-card:hover .sv-card-add,
.sv-card:focus-within .sv-card-add { opacity: 1; }

.sv-card-add-btn {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 44px;
    padding: 12px 16px;
    background: var(--ec-style-btn-bg, var(--sv-accent, #fa5b05));
    color: var(--ec-style-btn-text, var(--sv-accent-ink, #fff));
    font-family: var(--sv-display, 'Cabin', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.sv-card-add-btn:hover {
    background: var(--ec-style-btn-hover-bg, var(--ec-style-btn-bg, var(--sv-accent, #fa5b05)));
    color: var(--ec-style-btn-hover-text, var(--ec-style-btn-text, var(--sv-accent-ink, #fff)));
}
.sv-card-add-btn i { font-size: 1.25rem; }
.sv-card-add-btn.is-off { background: var(--ec-style-out-of-stock, var(--sv-muted, #89939d)); }

.sv-card-body { display: flex; flex-direction: column; gap: 8px; }

.sv-card-title {
    color: var(--sv-ink, #1c1c1c);
    /* 16px in the comp, on both the home grid and the category grid. At 18 the two-line
       clamp made every card body 30px taller than drawn. */
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sv-card-title:hover { color: var(--sv-accent, #fa5b05); }

.sv-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-card-price { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sv-card-price-now { color: var(--ec-style-price, var(--sv-accent, #fa5b05)); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.sv-card-price-was { color: var(--ec-style-compare-at, var(--sv-body, #787878)); font-size: 1rem; font-weight: 500; text-decoration: line-through; }
.sv-card-rating { display: flex; align-items: center; gap: 4px; color: var(--sv-body, #787878); font-size: 1rem; font-weight: 500; }

/* -------- product grids -------------------------------------------------- */
/* The design runs 5 across on the popular rail and 3 beside a deal panel; both
   fall back through 3 and 2 on the way down. A section's own column setting wins
   over these (ec-cols-* from Product settings / the block's own fields). */
/* One even 16px gap on both axes. It was 31px down and 12px across, which reads as a
   mis-set grid rather than a design — the cards sat far apart vertically and almost
   touched side to side. 24 was tried first and looked too airy. Applies to every product grid on the theme: the home sections,
   the shop, and the category archives, which all use .sv-grid. */
.sv-grid { display: grid; gap: 16px; }
.sv-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1199px) {
    .sv-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .sv-grid--5, .sv-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .sv-grid--5, .sv-grid--4, .sv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* On a phone the price is what the eye is hunting for, not the name — so the two
       swap weight: the title drops to 14 and the live price takes 16. The struck-out
       was-price and the rating stay quieter still. */
    .sv-card-title { font-size: 0.875rem; }
    .sv-card-price-now { font-size: 1rem; }
    .sv-card-price-was, .sv-card-rating { font-size: 0.8125rem; }

}

/* -------- deal rail ------------------------------------------------------ */
/* Design: a 429-wide panel beside a 3-up grid, 1320 total. */
.sv-deal-row { display: grid; grid-template-columns: 429fr 879fr; gap: 12px; align-items: start; }
.sv-deal-row--full { grid-template-columns: 1fr; }

.sv-deal-panel {
    position: relative;
    display: block;
    min-height: 320px;
    height: 100%;
    border-radius: var(--sv-radius, 12px);
    overflow: hidden;
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
}
.sv-deal-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.sv-deal-panel:hover > img { transform: scale(1.04); }

.sv-deal-panel-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(20px, 2.6vw, 32px);
}
/* The design puts the headline straight onto the panel artwork — no dark scrim. The
   sampled panel runs 218,76,0 to 246,90,4 with pure white type over it. */
.sv-deal-panel,
.sv-deal-panel .sv-deal-panel-title,
.sv-deal-panel .sv-deal-panel-kicker,
.sv-deal-panel .sv-deal-panel-link { color: var(--sv-accent-ink, #fff); }

.sv-deal-panel-kicker {
    border-radius: var(--sv-pill, 999px);
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-weight: 600;
}
.sv-deal-panel-title {
    font-family: var(--sv-display, 'Cabin', sans-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.sv-deal-panel-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.9rem; font-weight: 600; }
.sv-deal-panel:hover .sv-deal-panel-link { gap: 12px; }

/* -------- app band ------------------------------------------------------- */
.sv-appband-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    border-radius: var(--sv-radius, 12px);
    overflow: hidden;
    background: var(--sv-panel, #dbdbdb);
    padding: clamp(28px, 4vw, 56px);
}
.sv-appband-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sv-appband-kicker { color: var(--sv-ink, #1c1c1c); font-size: 1.05rem; font-weight: 600; }
.sv-appband-card .sv-head-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.sv-appband-text { color: var(--sv-body, #787878); font-size: 0.9rem; max-width: 46ch; }
.sv-appband-actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.sv-appband-badge img { height: 40px; width: auto; }
.sv-appband-qr { border-radius: 8px; background: var(--sv-surface, #fff); padding: 6px; }

/* The design sets the phone on concentric orange rings — drawn here rather than
   shipped as a bitmap so it stays sharp and follows the brand colour. */
.sv-appband-art {
    position: relative;
    justify-self: stretch;
    display: grid;
    place-items: center;
    min-height: 460px;
    padding: clamp(20px, 3vw, 44px);
}
.sv-appband-art::before,
.sv-appband-art::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.sv-appband-art::before {
    width: min(420px, 86%);
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--sv-accent, #fa5b05) 34%, var(--sv-surface, #fff));
}
.sv-appband-art::after {
    width: min(320px, 66%);
    aspect-ratio: 1;
    background: var(--sv-accent, #fa5b05);
}
.sv-appband-art img {
    position: relative;
    z-index: 1;
    max-height: 420px;
    width: auto;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.22));
}
/* The handset is an empty frame; its screen is a separate shot laid inside the bezel. */
.sv-appband-device { position: relative; z-index: 1; display: inline-block; line-height: 0; }
.sv-appband-screen {
    position: absolute;
    inset: 2.6% 3.2%;
    overflow: hidden;
    border-radius: 7% / 3.6%;
    z-index: 2;
}
.sv-appband-screen img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: top center;
    filter: none;
}

/* -------- scroll reveal --------------------------------------------------- */
[data-sv-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-sv-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-sv-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 991px) {
    .sv-deal-row { grid-template-columns: 1fr; }
    .sv-deal-panel { min-height: 220px; }
    .sv-appband-card { grid-template-columns: 1fr; }
    .sv-appband-art { justify-self: center; }
    .sv-appband-art img { max-height: 260px; }
}

/* -------- instant search results ---------------------------------------- */
.sv-search-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--sv-radius-sm, 8px);
    background: var(--sv-surface, #fff);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.sv-search-drop[hidden] { display: none; }
.sv-search-hit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    color: var(--sv-ink, #1c1c1c);
    line-height: 1.35;
}
.sv-search-hit:hover,
.sv-search-hit:focus-visible { background: var(--sv-panel, #f2f2f2); }
.sv-search-hit img,
.sv-search-thumb {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--sv-panel, #f2f2f2);
}
.sv-search-hit-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-search-hit-name {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sv-search-hit-price { color: var(--sv-accent, #fa5b05); font-size: 0.8125rem; font-weight: 600; }
.sv-search-group {
    padding: 8px 8px 4px;
    color: var(--sv-muted, #89939d);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sv-search-all {
    display: block;
    margin-top: 4px;
    padding: 10px 8px;
    border-top: 1px solid var(--sv-line, #eee);
    color: var(--sv-accent, #fa5b05);
    font-size: 0.8125rem;
    font-weight: 600;
}
.sv-search-all:hover { text-decoration: underline; }

/* -------- category page: blurb + subcategory chips ------------------------ */
.sv-page-head-blurb {
    max-width: 70ch;
    margin-top: 10px;
    color: var(--sv-body, #6f7c88);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.sv-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sv-subcat {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--sv-line, #eee);
    border-radius: var(--sv-pill, 999px);
    background: var(--sv-surface, #fff);
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sv-subcat:hover { border-color: var(--sv-accent, #fa5b05); color: var(--sv-accent, #fa5b05); }
.sv-subcat.is-on {
    border-color: var(--sv-accent, #fa5b05);
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
}

/* -------- colour / size facet (shared partial, styled per template) -------- */
.sv-facet-shared { margin-top: 16px; }
.sv-facet-shared .ec-plp-filter-section + .ec-plp-filter-section { margin-top: 16px; }
.sv-facet-shared .ec-plp-filter-title {
    margin-bottom: 8px;
    color: var(--sv-muted, #89939d);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sv-facet-shared .ec-plp-color-grid,
.sv-facet-shared .ec-plp-size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-facet-shared .ec-plp-color-swatch,
.sv-facet-shared .ec-plp-size-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--sv-line, #eee);
    border-radius: var(--sv-pill, 999px);
    background: var(--sv-surface, #fff);
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sv-facet-shared .ec-plp-color-swatch:hover,
.sv-facet-shared .ec-plp-size-chip:hover { border-color: var(--sv-accent, #fa5b05); }
.sv-facet-shared .ec-plp-color-swatch input,
.sv-facet-shared .ec-plp-size-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sv-facet-shared .ec-plp-color-swatch.is-on,
.sv-facet-shared .ec-plp-size-chip.is-on {
    border-color: var(--sv-accent, #fa5b05);
    background: var(--sv-accent-soft, #ffdcc9);
}
.sv-facet-shared .ec-plp-color-dot {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.sv-facet-shared .ec-plp-color-meta { display: inline-flex; align-items: center; gap: 4px; }
.sv-facet-shared .ec-plp-color-count,
.sv-facet-shared .ec-plp-size-count { color: var(--sv-muted, #89939d); }

/* -------- category pills ------------------------------------------------- */
.sv-head--center { justify-content: center; text-align: center; }

/* The category row: a sideways scroll on a phone or tablet, the design's grid on a
   desktop. Both in CSS and nothing else — a Swiper drove this by transforming the inner
   row, while the same element had to be pinned to `transform: none` so the desktop grid
   was not dragged sideways. Those two cannot both be right, and the carousel lost: it
   could not be moved, and once Swiper had claimed it the native scroll was gone too. */
.sv-cat-grid { display: block; }

.sv-cat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 16px;
}

/* Two classes deep, every width: these cards were competing with Swiper's
   `.swiper-slide { width: 100% }`. The depth is kept because the tone classes and the
   phone overrides below rely on the same specificity to win in order. */
.sv-cat-grid .sv-cat {
    display: flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 96px;
    padding: 8px 16px 8px 8px;
    border-radius: 90px;
    background-image: linear-gradient(to right, var(--sv-cat-from), var(--sv-cat-to));
    color: var(--sv-cat-title);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sv-cat-grid .sv-cat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14); }
.sv-cat-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sv-cat-thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 80px;
    background: rgba(255, 255, 255, 0.55);
}
.sv-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sv-cat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-cat-name {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sv-cat-count { color: var(--sv-cat-sub); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.015em; }
.sv-cat-go {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: var(--sv-cat-go-ink, var(--sv-cat-title));
    font-size: 1.25rem;
}

/* ⚠️ The category tiles are a DELIBERATE eight-colour set, not the brand colour eight
   times — the design uses the variety to tell one shelf from another at a glance, and
   tinting them all with one accent would undo the only thing they are for. Left as
   literals on purpose; they are not a Style option. */
.sv-cat--1 { --sv-cat-from: #5badd4; --sv-cat-to: #abd4e8; --sv-cat-title: #0d415b; --sv-cat-sub: #1d6c91; }
.sv-cat--2 { --sv-cat-from: #cd3f4d; --sv-cat-to: #e69da4; --sv-cat-title: #6c0a19; --sv-cat-sub: #7c3138; }
.sv-cat--3 { --sv-cat-from: #dec29d; --sv-cat-to: #eee0cd; --sv-cat-title: #764d14; --sv-cat-sub: #9e743e; }
.sv-cat--4 { --sv-cat-from: #e4b65b; --sv-cat-to: #f1daac; --sv-cat-title: #593d06; --sv-cat-sub: #9c782f; }
.sv-cat--5 { --sv-cat-from: #4b5235; --sv-cat-to: #a4a899; --sv-cat-title: #ffffff; --sv-cat-sub: #ced2dd; --sv-cat-go-ink: #4b5235; }
.sv-cat--6 { --sv-cat-from: #ebbfcc; --sv-cat-to: #f5dee5; --sv-cat-title: #8f2b48; --sv-cat-sub: #a2566c; }
.sv-cat--7 { --sv-cat-from: #19241c; --sv-cat-to: #898f8b; --sv-cat-title: #ffffff; --sv-cat-sub: #ced2dd; --sv-cat-go-ink: #19241c; }
.sv-cat--8 { --sv-cat-from: #b59ff4; --sv-cat-to: #d8cdf9; --sv-cat-title: #3f248f; --sv-cat-sub: #5b43a2; }

@media (min-width: 992px) and (max-width: 1199px) {
    .sv-cat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone and tablet: one row that scrolls by finger. `scroll-snap` so a tile settles
   where a thumb let go, and `-webkit-overflow-scrolling` for momentum on iOS. */
@media (max-width: 991px) {
    .sv-cat-grid {
        /* Bleed to the screen edges so a tile can sit flush while scrolling. */
        margin-inline: -10px;
        padding-inline: 10px;
    }
    .sv-cat-row {
        display: flex;
        grid-template-columns: none;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* Room for the last tile to clear the bleed. */
        padding-inline-end: 10px;
    }
    .sv-cat-row::-webkit-scrollbar { display: none; }

    /* The phone comp draws a 76x120 tile — a 64px thumb with a two-line label under it.
       A real category name is longer than the comp's placeholder, and the capsule's
       curve pinches exactly where the label sits, so the tile is wider than the comp's
       76px: at 76 the text stood outside the shape on both sides. */
    .sv-cat-grid .sv-cat {
        flex: 0 0 auto;
        width: 96px;
        min-height: 120px;
        padding: 6px 8px;
        gap: 0;
        border-radius: 48px;
        box-shadow: none;
        scroll-snap-align: start;
    }
    .sv-cat-grid .sv-cat:hover { transform: none; box-shadow: none; }
    .sv-cat-left { flex-direction: column; align-items: center; gap: 8px; width: 100%; }
    .sv-cat-thumb { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; }
    .sv-cat-text { align-items: center; width: 100%; gap: 0; }
    .sv-cat-name {
        width: 100%; font-size: 12px; line-height: 1.5; text-align: center;
        /* Bengali clusters do not break, so a long name has to be allowed to and then
           clipped — otherwise it renders past the capsule and reads as two tiles'
           labels running together. */
        overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sv-cat-count, .sv-cat-go { display: none; }
}

/* A tablet runs the same row with more room, so the tile is the phone's grown a little
   rather than a phone tile floating in the middle of an iPad. */
@media (min-width: 768px) and (max-width: 991px) {
    .sv-cat-grid .sv-cat { width: 120px; min-height: 144px; border-radius: 60px; padding: 10px 12px; }
    .sv-cat-thumb { width: 80px; height: 80px; flex: 0 0 80px; }
    .sv-cat-name { font-size: 13px; }
}

/* -------- banner row ----------------------------------------------------- */
.sv-banner-row { display: grid; gap: 12px; }
.sv-banner-row--1 { grid-template-columns: 1fr; }
.sv-banner-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-banner-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-banner-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sv-banner {
    position: relative;
    display: block;
    min-height: 220px;
    border-radius: var(--sv-radius, 12px);
    overflow: hidden;
    background: var(--sv-panel, #dbdbdb);
    color: var(--sv-ink, #1c1c1c);
}
.sv-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.sv-banner:hover > img { transform: scale(1.04); }

.sv-banner-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(22px, 3vw, 44px);
    max-width: 62%;
}
.sv-banner-kicker {
    border-radius: var(--sv-pill, 999px);
    padding: 5px 12px;
    background: var(--sv-accent-soft, #ffdcc9);
    color: var(--sv-accent, #fa5b05);
    font-size: 0.75rem;
    font-weight: 600;
}
/* Artwork decides the type colour: the design's dark full-bleed band carries white
   text, its light grey band carries ink. Default to white, which suits a photo. */
.sv-banner, .sv-banner .sv-banner-title { color: var(--sv-accent-ink, #fff); }
/* The wash is black unless the banner names its own colour. The ramp never moves,
   so a recoloured wash still fades away before the artwork's right-hand side. */
.sv-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(95deg,
        rgb(var(--ec-banner-scrim, 0 0 0) / 0.55) 0%,
        rgb(var(--ec-banner-scrim, 0 0 0) / 0.18) 45%,
        rgb(var(--ec-banner-scrim, 0 0 0) / 0) 72%);
}
/* Artwork that already carries its own text: the wash only muddies it. */
.sv-banner--no-scrim::after { display: none; }
.sv-banner--ink, .sv-banner--ink .sv-banner-title { color: var(--sv-ink, #1c1c1c); }
.sv-banner--ink::after { display: none; }
.sv-banner--ink .sv-banner-kicker { background: var(--sv-accent-soft, #ffdcc9); color: var(--sv-accent, #fa5b05); }

.sv-banner-title {
    font-family: var(--sv-display, 'Cabin', sans-serif);
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

/* A full-bleed banner (one across) is the design's dark offer band. */
.sv-banner-row--1 .sv-banner { min-height: var(--sv-banner-h, clamp(280px, 34vw, 480px)); }

/* A banner that is all artwork: its own height, inside the content column, with the
   container's corners back. The full-bleed band is the right frame for a campaign with
   a headline, and the wrong one for a photograph that has to be seen whole. */
.sv-banners--full .sv-banner.sv-banner--boxed {
    width: min(100%, var(--sv-container, 1320px));
    margin-inline: auto;
    border-radius: var(--sv-radius, 12px);
    overflow: hidden;
}
.sv-banners--full .sv-banner.sv-banner--boxed > img { height: 100%; top: 0; transform: none !important; }
.sv-banner--boxed::after { display: none; }

/* The line under the headline. */
.sv-banner-caption {
    display: block;
    margin-top: 10px;
    max-width: 46ch;
    font-size: clamp(.85rem, 1.1vw, .98rem);
    line-height: 1.55;
    opacity: .92;
}
.sv-banner-row--1 .sv-banner-body { max-width: 52%; }

/* A single banner runs edge to edge, so it loses the container's gutters and corners
   and sets its copy in from the same 60px the rest of the page uses. */
.sv-bleed { width: 100%; }
/* Parallax: the artwork is taller than the band and drifts as the band crosses the
   viewport. The extra height is what the drift travels through. */
.sv-banners--full:not(.sv-banners--still) .sv-banner > img { height: 128%; top: -14%; will-change: transform; }
/* Parallax off: the artwork sits still and fills the band edge to edge, keeping the
   base `object-fit: cover`. Showing it whole (`contain`) left bars beside artwork that
   is not the band's shape, which is not what a full-width banner is for. */
.sv-banners--still .sv-banner > img { height: 100%; top: 0; transform: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
    .sv-banners--full .sv-banner > img { height: 100%; top: 0; transform: none !important; will-change: auto; }
}
.sv-banners--full .sv-banner { border-radius: 0; }
.sv-banners--full .sv-banner-body { padding-inline: 60px; max-width: min(52%, 720px); }
@media (max-width: 1199px) { .sv-banners--full .sv-banner-body { padding-inline: 32px; } }
@media (max-width: 767px)  { .sv-banners--full .sv-banner-body { padding-inline: 16px; max-width: 88%; } }

.sv-hide-mobile { display: none; }
@media (min-width: 768px) { .sv-hide-mobile { display: block; } }

@media (max-width: 991px) {
    .sv-banner-row--3, .sv-banner-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-banner-body { max-width: 78%; }
    .sv-banner-row--1 .sv-banner-body { max-width: 74%; }
}
@media (max-width: 575px) {
    .sv-banner-row--2, .sv-banner-row--3, .sv-banner-row--4 { grid-template-columns: 1fr; }
    .sv-banner { min-height: 180px; }
    .sv-banner-body { max-width: 86%; }
}

/* -------- page head (archive / inner pages) ------------------------------ */
.sv-page-head { background: var(--sv-surface, #fff); padding-block: 36px 30px; }
.sv-crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--sv-muted, #89939d); margin-bottom: 10px; }
.sv-crumbs a:hover { color: var(--sv-accent, #fa5b05); }
.sv-page-head h1 {
    font-family: var(--sv-display, 'Cabin', sans-serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -0.03em;
}
.sv-page-head-sub { margin-top: 8px; color: var(--sv-body, #787878); font-size: 0.875rem; }
.sv-page-head-sub a { color: var(--sv-accent, #fa5b05); font-weight: 600; }

/* -------- archive: filter rail beside the grid --------------------------- */
/* The comp draws the archive with no heading band at all: the nav bar meets the rail
   and the grid. The page's own <h1> is still in the markup, unseen, because a category
   page with no heading is a category page search engines cannot read. */
.sv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sv-plp-section { padding-block: 32px 48px; }
.sv-plp { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 20px; align-items: start; }
.sv-plp-side {
    background: var(--sv-surface, #fff);
    border: 0;
    border-radius: 14px;
    padding: 20px;
    position: sticky;
    top: 24px;
    box-shadow: 0 2px 14px rgba(16, 24, 40, 0.06);
}
.sv-plp-side-close { display: none; }

/* The comp rules UNDER each section's own title, not between the sections — so the
   divider belongs to the summary, and the sections are separated by air. */
.sv-facet + .sv-facet,
.sv-facet-shared { margin-top: 22px; }
.sv-facet > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--sv-line, #eee);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sv-ink, #111827);
}
.sv-facet > summary::-webkit-details-marker { display: none; }
.sv-facet > summary i { font-size: 1.25rem; color: var(--sv-ink, #1c1c1c); transition: transform 0.15s ease; }
.sv-facet[open] > summary i { transform: rotate(180deg); }
.sv-facet-list { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.sv-facet-row { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--sv-muted, #89939d); }
.sv-facet-row:hover { color: var(--sv-ink, #1c1c1c); }
/* ⚠️ The empty box is drawn in the ACCENT, not in the hairline grey the rest of the rail
   uses: in the comp an unticked box still reads as something you may tick. */
.sv-facet-box {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--sv-accent, #fa5b05);
    border-radius: 5px;
}
.sv-facet-row.is-on { color: var(--sv-ink, #1c1c1c); font-weight: 600; }
.sv-facet-row.is-on .sv-facet-box { background: var(--sv-accent, #fa5b05); border-color: var(--sv-accent, #fa5b05); }
.sv-facet-row.is-on .sv-facet-box::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4px;
    height: 8px;
    border: solid var(--sv-accent-ink, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.sv-plp-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sv-caret {
    flex: none;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}
.sv-plp-count { font-size: 0.875rem; color: var(--sv-muted, #89939d); }
.sv-plp-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1.5px solid var(--sv-line, #eee);
    border-radius: var(--sv-pill, 999px);
    background: var(--sv-surface, #fff);
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.875rem;
    font-weight: 600;
}
.sv-plp-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sv-plp-sort label { font-size: 0.875rem; font-weight: 600; color: var(--sv-ink, #1c1c1c); }
.sv-plp-sort .sv-caret { display: none; }
.sv-plp-sort select {
    border: 1.5px solid var(--sv-line, #eee);
    border-radius: var(--sv-radius-sm, 8px);
    background: var(--sv-surface, #fff);
    padding: 9px 14px;
    color: var(--sv-ink, #1c1c1c);
    font-size: 0.875rem;
    cursor: pointer;
}

/* -------- archive: the price facet --------------------------------------- */
.sv-price { margin-top: 16px; }
.sv-price-row { display: flex; align-items: center; gap: 8px; }
.sv-price-lbl { flex: none; font-size: 0.8125rem; color: var(--sv-muted, #89939d); }
.sv-price-field { flex: 1 1 0; min-width: 0; }
.sv-price-field input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--sv-chip, #f3f4f6);
    color: var(--sv-ink, #1c1c1c);
    font: inherit;
    font-size: 0.8125rem;
    text-align: center;
}
.sv-price-field input:focus { outline: 2px solid color-mix(in srgb, var(--sv-accent, #fa5b05) 45%, var(--sv-surface, #fff)); outline-offset: 1px; }
.sv-price-go {
    width: 100%;
    margin-top: 10px;
    padding: 9px 14px;
    border: 0;
    border-radius: var(--sv-pill, 999px);
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
.sv-price-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.sv-price-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 4px;
    border-radius: 6px;
    background: var(--sv-chip, #f3f4f6);
    color: var(--sv-muted, #89939d);
    font-size: 0.6875rem;
    white-space: nowrap;
}
.sv-price-chip:hover { color: var(--sv-accent, #fa5b05); }
.sv-price-chip.is-on { background: var(--sv-accent, #fa5b05); color: var(--sv-accent-ink, #fff); }

.sv-plp-blurb { margin-bottom: 20px; color: var(--sv-body, #787878); font-size: 0.9rem; line-height: 1.6; }

/* -------- archive: the one button that ends the grid --------------------- */
/* The shared loader ships a neutral white pill so it suits every template; the comp
   ends this grid with the accent one. */
.sv-plp-main .ec-plp-load-more-wrap { margin-top: 34px; }
.sv-plp-main .ec-plp-load-more-btn {
    min-width: 0;
    padding: 14px 36px;
    border: 0;
    border-radius: var(--sv-pill, 999px);
    background: var(--sv-accent, #fa5b05);
    color: var(--sv-accent-ink, #fff);
    font-size: 0.95rem;
    font-weight: 700;
}
.sv-plp-main .ec-plp-load-more-btn:hover:not(:disabled) { filter: brightness(0.95); }

/* The shared paginator carries no classes, only inline styles, so it is themed through
   the custom properties it reads rather than by selectors that would never match. */
.sv-pager {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    --ec-pager-radius: var(--sv-radius-sm, 8px);
    --ec-pager-border: var(--sv-line, #eee);
    --ec-pager-ink: var(--sv-ink, #1c1c1c);
    --ec-pager-bg: var(--sv-surface, #fff);
    --ec-pager-on-border: var(--sv-accent, #fa5b05);
    --ec-pager-on-ink: var(--sv-accent-ink, #fff);
    --ec-pager-on-bg: var(--sv-accent, #fa5b05);
    --ec-pager-off-border: var(--sv-line, #eee);
    --ec-pager-off-ink: var(--sv-muted, #89939d);
    --ec-pager-off-bg: var(--sv-panel, #f2f2f2);
}

.sv-empty { padding: 3rem 1rem; text-align: center; color: var(--sv-body, #787878); }

/* The comp starts the rail and the grid on the same line with NOTHING above either — no
   heading, no count, no sort. The toolbar is the phone control, where the comp does draw
   Filter and Sort; on a wide screen the rail IS the filter and the toolbar goes, so the
   two columns line up on their own. */
@media (min-width: 1025px) {
    .sv-plp-bar { display: none; }
}

/* Below the rail's own width the filters become a sheet the shopper opens. */
@media (max-width: 1024px) {
    .sv-plp { grid-template-columns: 1fr; gap: 0; }
    .sv-plp-filter-btn { display: inline-flex; }
    .sv-plp-side {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 901;
        width: min(320px, 86vw);
        border-radius: 0 var(--sv-radius, 12px) var(--sv-radius, 12px) 0;
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform 0.22s ease;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
        /* ⚠️ The mobile app bar is fixed at z-index 100050 — nothing this sheet can set
           puts it underneath — so the sheet scrolls clear of it instead. Without this the
           last facet in the list is unreachable, which the rail's new sections made
           visible: there is a lot more below the fold than there used to be. */
        padding-bottom: 88px;
    }
    .sv-plp-side.is-open { transform: none; }
    .sv-plp-side-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 0 8px auto;
        border: 0;
        border-radius: 50%;
        background: var(--sv-surface, #f2f2f2);
        color: var(--sv-ink, #1c1c1c);
        font-size: 1.15rem;
    }
    body.sv-filters-open { overflow: hidden; }
}

/* -------- star rating ---------------------------------------------------- */
/* The stars are <img>, and the reset makes images block-level, so without this
   they stack down the page instead of sitting in a row. */
.sv-rating { display: inline-flex; align-items: center; gap: 2px; }
.sv-rating img { width: 17px; height: 20px; display: block; }
.sv-rating img.is-off { opacity: 0.28; }

/* A heading above a PDP section (related products, reviews). */
.sv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--sv-head-gap, 30px);
}
.sv-section-head h2,
.sv-section-head h3 {
    font-family: var(--sv-display, 'Cabin', sans-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    letter-spacing: -0.03em;
}

/* -------- the design's phone scale --------------------------------------- */
/* Last in the file on purpose: these have to beat the base rules above them, and
   several of those (.sv-grid, .sv-cat-grid, .sv-section-head) are declared further
   down than the responsive block, so an override written up there never applied. */
@media (max-width: 767px) {
    /* 20px between sections, 12px inside them. */
    .sv-section { padding-block: 10px; }
    .sv-head, .sv-section-head { margin-bottom: 12px; }
    /* The comp gives the category heading 20px of air before the rail, where a product
       heading gets 12. Its one-off font-size is gone — every heading shares one now. */
    .sv-cats .sv-head { margin-bottom: 20px; }
    .sv-grid { gap: 12px; }
    .sv-cat-grid { gap: 8px; }

    /* One size for every section heading. The comp draws the category heading smaller
       than a product section's, but on a phone two sizes read as a mistake rather than
       a hierarchy. 36px was too loud for a 375 screen and 20px too quiet to read as a
       heading at all — 24 sits between them and still fits the longest title on a line. */
    .sv-head-title { font-size: 24px; }

    /* Half the padding: at 12px a 170px card spent 24 of it on air. */
    .sv-card { padding: 6px; }

    /* The add control comes off the photo and sits under the price.
       `.sv-card-add` is a SIBLING of the media and the body, so making it static and
       ordering it last moves it without touching the markup — the photo is clear again
       and the button is where a thumb expects it. */
    .sv-card-add {
        position: static;
        inset: auto;
        aspect-ratio: auto;
        opacity: 1;
        order: 3;
        display: block;
        pointer-events: auto;
    }
    .sv-card-add-btn {
        width: 100%;
        justify-content: center;
        gap: 5px;
        padding: 7px 10px;
        font-size: 0.78rem;
        box-shadow: none;
    }
    .sv-card-add-btn i { font-size: 1rem; }

    /* Taller than the 120 it started at, which is what the comp draws. The photo is the
       tile, so the height goes to the thumb first — at 80 it matches the desktop circle
       and the capsule reads as a tall pill rather than a squashed one.
       8 + 80 + 8 + 36 (two 12px lines) + 8 = 140, with 150 as the floor. */
    .sv-cat-grid .sv-cat { min-height: 150px; padding: 12px 8px; }
    .sv-cat-left { gap: 8px; }
    .sv-cat-thumb { width: 80px; height: 80px; flex: 0 0 80px; }
    html[data-ec-storefront="shopiva"] .ec-hs--shopiva { padding-block: 0 10px; }
    .sv-page-head { padding-block: 20px 10px; }
    .sv-footer { margin-top: 10px; }

    /* -------- archive, phone ---------------------------------------------- */
    /* The comp's phone archive is a bare toolbar over the grid: Filter on the left,
       Sort on the right, both plain text on the page's own ground — no card, no
       borders, no result count. */
    .sv-plp-section { padding-block: 14px 24px; }
    .sv-plp-bar { gap: 10px; margin-bottom: 14px; }
    .sv-plp-filter-btn {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 700;
    }
    .sv-plp-filter-btn i { font-size: 1.15rem; }
    /* ⚠️ The comp shows the WORD "Sort" here, not the chosen option — so the label is the
       control and the select lies over the whole row at zero opacity. Hiding the select
       outright (or display:none) would take the native picker with it; this keeps one tap
       opening the platform's own list. */
    .sv-plp-sort { position: relative; gap: 7px; }
    .sv-plp-sort label { display: block; font-size: 0.95rem; font-weight: 700; }
    .sv-plp-sort .sv-caret { display: block; }
    .sv-plp-sort select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        opacity: 0;
        appearance: none;
        -webkit-appearance: none;
    }

    /* The comp closes the phone grid with a text link and an arrow, not the pill it
       draws on a wide screen. Same button, same behaviour — only the skin changes. */
    .sv-plp-main .ec-plp-load-more-wrap { margin-top: 16px; align-items: flex-start; }
    .sv-plp-main .ec-plp-load-more-btn {
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--sv-accent, #fa5b05);
        font-size: 0.95rem;
    }
    .sv-plp-main .ec-plp-load-more-btn::after {
        content: "\2192";
        margin-left: 8px;
        font-size: 1.05rem;
        line-height: 1;
    }
    .sv-plp-main .ec-plp-load-more-btn:hover:not(:disabled) { filter: none; text-decoration: underline; }
}