/* =====================================================================
   Spornation revamp — home + header/footer components.
   Brand colors come ONLY from the admin theme variables:
     --primary-color   = red accent   (Admin → Web Settings → Primary Colour)
     --secondary-color = dark ink/CTA  (Admin → Web Settings → Secondary Colour)
     --font-color      = text on accent (Font Colour)
   Neutral UI chrome (borders / wells / muted text) is centralized below so
   it can be retuned in one place. No hardcoded brand hex.
   ===================================================================== */
:root {
    --sn-ink:        var(--secondary-color, #1a1a1a);
    --sn-accent:     var(--primary-color, #e31b23);
    --sn-on-accent:  var(--font-color, #ffffff);
    --sn-border:     #eaeaea;
    --sn-well:       #f5f5f6;
    --sn-muted:      #6b7280;
    --sn-muted-2:    #9aa0a6;
    --sn-pill-bg:    #f6f6f6;
    --sn-pill-bg-h:  #ececec;
}

/* Bootstrap 4 reboot adds `a:hover { text-decoration: underline }` globally.
   Re-assert none on hover/focus for all Spornation interactive elements. */
.sn-link:hover, .sn-link:focus,
.sn-btn-dark:hover, .sn-btn-dark:focus,
.sn-btn-outline:hover, .sn-btn-outline:focus,
.sn-brand:hover, .sn-brand:focus,
.sn-store-badge:hover, .sn-store-badge:focus,
.sn-deliver:hover, .sn-deliver:focus,
.sn-icon-btn:hover, .sn-icon-btn:focus,
.sn-userpill:hover, .sn-userpill:focus,
.sn-tab:hover, .sn-tab:focus,
.sn-social a:hover, .sn-social a:focus,
.sn-foot-col ul a:hover, .sn-foot-col ul a:focus,
.sn-lr-secondary:hover, .sn-lr-secondary:focus,
.sn-mobile-links a:hover, .sn-mobile-links a:focus,
.sn-subnav__link:hover, .sn-subnav__link:focus,
.sn-rating-inline:hover, .sn-rating-inline:focus,
.sn-buy-btn:hover, .sn-buy-btn:focus,
.sn-wish-btn:hover, .sn-wish-btn:focus,
.sn-clear:hover, .sn-filter-toggle:hover,
.sn-ads-empty-cta:hover, .sn-ads-empty-cta:focus,
.sn-card .sn-name a:hover, .sn-card .sn-name a:focus,
.sn-ads-gear-name a:hover, .sn-ads-gear-name a:focus,
.sn-ads-seller-name a:hover, .sn-ads-seller-name a:focus
{ text-decoration: none; }

/* ---------- Section heading row ---------- */
.sn-section { margin-top: 3rem; }
.sn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.sn-head .sn-title { font-weight: 900; letter-spacing: -.015em; color: var(--sn-ink); margin: 0; line-height: 1.1; }
.sn-head .sn-sub { color: var(--sn-muted); font-size: 1rem; font-weight: 500; margin: .35rem 0 0; }
.sn-eyebrow .sn-title { text-transform: uppercase; letter-spacing: .14em; font-size: 1.5rem; }
.sn-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 900; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-accent) !important; text-decoration: none; white-space: nowrap; }
.sn-link:hover { opacity: .82; }

/* ---------- Product card ---------- */
.sn-card { background: var(--bs-body-bg, #fff); border: 1px solid var(--sn-border); border-radius: 16px; padding: 20px; height: 100%; display: flex; flex-direction: column; gap: 16px; transition: box-shadow .2s ease, transform .2s ease; }
.sn-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.sn-thumb { position: relative; background: var(--sn-well); border-radius: 12px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; }
.sn-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.sn-thumb > a:not(.sn-fav) { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Rounded inner image for the legacy seller-listing grids (/sellers) */
.fig_seller_image, .product-list-image, .seller-image-container img { border-radius: 10px; }
.sn-fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: var(--sn-ink); border: 0; z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.sn-fav .fa-heart, .sn-fav.active { color: var(--sn-accent); }
.sn-badge { position: absolute; left: 12px; bottom: 12px; z-index: 3; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; color: var(--sn-on-accent); }
.sn-badge--seller { background: var(--sn-ink); }
.sn-badge--sale { background: var(--sn-accent); }
.sn-card .sn-name { font-weight: 900; font-size: .9rem; color: var(--sn-ink); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sn-card .sn-name a { color: inherit; text-decoration: none; }
.sn-card .sn-name a:hover { color: var(--sn-accent); }
.sn-rate { display: flex; align-items: center; gap: .45rem; font-size: .7rem; color: var(--sn-muted); }
.sn-rate .sn-stars { display: inline-flex; gap: 1px; }
.sn-rate .sn-stars i { color: #ffba00; font-size: .72rem; }
.sn-price { display: flex; align-items: baseline; gap: .5rem; }
.sn-price .sn-now { font-weight: 900; font-size: 1.1rem; color: var(--sn-ink); }
.sn-price .sn-was { font-size: .76rem; color: var(--sn-muted-2); text-decoration: line-through; }
.sn-swatches { display: flex; gap: 6px; min-height: 16px; }
.sn-swatches span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--sn-border); }
.sn-card-cta { margin-top: auto; }
.sn-meta { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sn-btn-dark { display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; background: var(--sn-ink); color: var(--sn-on-accent); border: 0; border-radius: 12px; padding: 13px 14px; font-weight: 900; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: opacity .15s ease; }
.sn-btn-dark:hover { color: var(--sn-on-accent); opacity: .9; }

/* ---------- Brand tiles ---------- */
.sn-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--sn-border); border-radius: 16px; padding: 26px 16px; height: 100%; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.sn-brand:hover { border-color: var(--sn-pill-bg-h); box-shadow: 0 6px 20px rgba(0, 0, 0, .05); }
.sn-brand img { height: 120px; width: auto; max-width: 85%; object-fit: contain; border-radius: 12px; }
.sn-brand span { font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--sn-muted); text-align: center; }

/* ---------- Service card (style_services) ---------- */
.sn-svc { position: relative; background: var(--bs-body-bg, #fff); border: 1px solid var(--sn-border); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.sn-svc:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.sn-svc-img { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--sn-well); }
.sn-svc-img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.sn-top-rated { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--sn-accent); color: var(--sn-on-accent); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.sn-svc-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.sn-svc-name { font-weight: 900; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sn-ink); margin: 0; line-height: 1.4; }
.sn-svc-desc { font-size: .78rem; color: var(--sn-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-btn-outline { margin-top: auto; display: flex; align-items: center; justify-content: center; border: 2px solid var(--sn-ink); border-radius: 8px; padding: 10px; font-weight: 900; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink); text-decoration: none; transition: background .15s ease, color .15s ease; }
.sn-btn-outline:hover { background: var(--sn-ink); color: var(--sn-on-accent); }

/* ---------- Promo band ---------- */
.sn-promo { position: relative; background: var(--sn-well); border-radius: 15px; overflow: hidden; display: flex; align-items: center; min-height: 150px; }
.sn-promo-text { padding: 1.75rem 2.5rem; max-width: 60%; }
.sn-promo-text h3 { font-weight: 900; font-style: italic; margin: 0 0 .35rem; line-height: 1.05; color: var(--sn-ink); }
.sn-promo-text h3 .accent { color: var(--sn-accent); }
.sn-promo-text p { margin: 0; font-size: .9rem; color: var(--sn-muted); }
.sn-promo-img { margin-left: auto; align-self: stretch; min-height: 150px; background-size: cover; background-position: center; border-radius: 0 15px 15px 0; flex: 0 0 38%; }
@media (max-width: 767px) { .sn-promo-text { max-width: 100%; } .sn-promo-img { display: none; } }

/* ---------- App download band ---------- */
.sn-app { position: relative; border-radius: 32px; overflow: hidden; background: #161616; }
.sn-app-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.sn-app-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 75%); }
.sn-app-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 4rem 5rem; min-height: 460px; }
.sn-app-copy { flex: 1 1 460px; }
.sn-app-copy h2 { font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -2px; margin: 0 0 1.25rem; font-size: clamp(2.25rem, 5vw, 3.75rem); }
.sn-app-copy p { color: rgba(255, 255, 255, .8); font-size: 1.25rem; line-height: 1.6; font-weight: 500; margin: 0 0 2rem; max-width: 34rem; }
/* Home download band. The old .sn-store-btn (an accent pill with a Unicons glyph
   and translated text) was a recreation of the store badges, which both Google's
   and Apple's brand guidelines forbid — it is gone, replaced by the official
   artwork shared with the footer. .sn-store-badge--lg is just a bigger height;
   all the "never distort it" rules live on .sn-store-badge further down. */
.sn-store-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* ⚠️ Doubled class on purpose. The base `.sn-store-badge img` rule lives further
   down in the footer section, so at equal specificity it would WIN on source order
   and force this back to 44px. (0,2,1) beats it. */
.sn-store-badge.sn-store-badge--lg img { height: 56px; }
.sn-app-img { flex: 1 1 360px; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.sn-app-img img { max-width: 100%; max-height: 520px; margin-bottom: -4rem; }
@media (max-width: 991px) {
    .sn-app-inner { padding: 2.5rem; min-height: 0; }
    .sn-app-copy h2 { font-size: clamp(2rem, 8vw, 2.75rem); }
    .sn-app-img { display: none; }
}

/* =====================================================================
   Header — unified single-row floating bar (Session 92)

   One header for the marketing pages and the whole marketplace. The bar is a
   white card floating on the page background, per the approved mockup:

     [logo] · Discover · Marketplace ▾ · KitLab · Partners
             [search] · AR|EN · [country] │ account · favorites · cart · ⇄ │ [CTA]

   Colours come from the admin theme variables (--sn-accent = Primary Colour,
   --sn-ink = Secondary Colour), NOT hardcoded hex — see template.php.
   ===================================================================== */
.sn-header { background: transparent; border-bottom: 0; }

/* Bootstrap's .container caps at ~1320px, which is narrower than this bar needs
   and was squeezing the search field to zero width. Use the viewport, capped so
   the bar doesn't stretch absurdly on ultra-wide screens. */
.sn-header-container { max-width: 1760px; margin-inline: auto; padding-inline: 1.25rem; }

/* The floating bar itself */
.sn-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .85rem;
    padding: .75rem 1.25rem;
    margin: 1rem 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--sn-border, #eee);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

/* ⚠️ Flex sizing here is load-bearing, not cosmetic.
   Everything except the search is white-space:nowrap, so the search was the ONLY
   item that could absorb overflow — it shrank to a sliver, then to zero (an
   invisible search box), and once it hit zero the rest overflowed the card and
   the CTA escaped past the page edge. Fix is two-sided:
     * flex: 0 0 auto  on the fixed items so they can never be crushed
     * a real min-width on the search so it can never vanish
   If the bar ever overflows again, the answer is to HIDE something at that
   breakpoint (see the media queries below) — never to let the search shrink. */
.sn-logo { flex: 0 0 auto; }
/* ⚠️ max-width is load-bearing, not cosmetic. The logo is admin-uploadable
   ($web_logo, header.php) and had NO width cap at all above 400px, so an
   over-wide upload silently ate the bar's entire width budget and was half the
   cause of the English nav being crushed (see .sn-nav below). Working backwards
   from the reported clipping, the live logo was ~188px+; the theme default is
   3.45:1 (497x144 -> 131px) and every logo in assets/logo/ is 4.04:1 (-> 153px).
   200px at 38px tall permits up to a 5.3:1 lockup completely untouched.

   ⚠️ MAX-ONLY — do NOT add object-fit and do NOT set an explicit width+height
   pair. With width/height:auto and only maxima applied, CSS2.1 §10.4 resolves a
   double constraint violation by picking the ONE scale factor that satisfies
   both, so the intrinsic aspect ratio is preserved and distortion is impossible.
   (Session 98's badge distortion came from setting explicit width AND height,
   which overrides the intrinsic ratio — a different case. This is also why the
   `object-fit: contain` in the <=400px block is a harmless no-op, and why the
   .logo-fit class in header.php does nothing: it lives in custom.css, which is
   not served on the modern front-end.)

   Accepted trade-off: a logo wider than 5.3:1 scales DOWN below 38px tall rather
   than breaking the header. Admin upload guidance should say ~4:1 (e.g. 460x114). */
.sn-logo img { max-height: 38px; max-width: 200px; width: auto; height: auto; }

/* Primary nav — plain text with a red underline on the active item (mockup),
   not the old uppercase pills. */
/* ⚠️ flex: 0 0 auto — the nav must NEVER shrink, and a `min-width: 0` on it is a
   bug, not an optimisation. That declaration used to live ~200 lines below in the
   "Right cluster" block (which is probably how it survived review) and it was
   sufficient on its own to break the header in English: without it, .sn-nav's
   automatic minimum size resolves to its min-content width, which — because every
   .sn-tab is white-space:nowrap and .sn-nav is itself flex-wrap:nowrap — EQUALS
   its max-content width, so flexbox refuses to shrink it at all.

   With min-width:0 the nav was crushable, but the .sn-tab children still could
   not shrink (their own min-width:auto floors them at their nowrap min-content),
   so they overflowed the nav box and the opaque .sn-search select2 pill — later
   in DOM, same stacking context — painted straight over them. In English that
   rendered "For Partners" as "For Partne". Arabic never triggered it because its
   nav is ~110px narrower.

   ⚠️ The same bug returns one level down if anyone ever puts min-width:0 on
   .sn-tab itself. Don't. */
.sn-nav { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.sn-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* The caret pseudo-element is the ONLY other flex item in a tab, so this gap
       is effectively "distance from label to caret" — it is the single knob for
       that spacing now that the theme's own margin is zeroed. */
    gap: .25rem;
    padding: .35rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--sn-ink);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.sn-tab:hover { background: none; color: var(--sn-accent); }
.sn-tab.active { background: none; color: var(--sn-ink); }

/* ⚠️ The active underline is on ::BEFORE, and must stay there.
   An element has exactly one ::after, and the theme already owns it: style.css /
   eshop-bundle-main.css replace Bootstrap's border-triangle caret with a Unicons
   GLYPH — `.dropdown-toggle::after { font-family: Unicons; content: "\e92d";
   border: 0 }`. That selector is only (0,1,1), so an underline written as
   `.sn-tab.active::after { content: "" }` at (0,2,1) BEAT it and wiped the glyph:
   the caret vanished on every page where the Marketplace tab is active (/,
   /products, /sellers, /ads, /packages) — i.e. "the arrow disappears after you
   navigate". Putting the underline on ::before removes the collision entirely
   and restores the underline on the active dropdown tab, which the old
   `.sn-tab.active.dropdown-toggle::after { background: none }` band-aid had
   suppressed. Never move it back onto ::after. */
.sn-tab.active::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -.55rem;
    height: 3px;
    border-radius: 3px;
    background: var(--sn-accent);
}
/* Dropdown cue is an inline <svg> in header.php, NOT a pseudo-element.

   The theme replaces Bootstrap's caret with a Unicons glyph
   (`.dropdown-toggle::after { font-family: Unicons; content: "\e92d" }`), which
   proved untunable at this size: it inherits whatever font-size the tab has, the
   theme's `font-weight: 700 !important` cannot thicken it (an icon font has one
   glyph per codepoint), and its `vertical-align` is inert because .sn-tab is
   inline-flex. The tab therefore carries `no-caret` to hide that glyph, and the
   SVG below is the real cue — stroke weight, size and centring all explicit, and
   an SVG box is symmetric so it centres properly against Arabic letterforms
   where the font glyph read low.

   ⚠️ If a new dropdown tab is added, it needs BOTH `no-caret` and the <svg>, or
   it silently falls back to the untunable theme glyph. */
.sn-tab-chev {
    flex: 0 0 auto;
    width: .85em; height: .85em;
    color: var(--sn-accent);
    transition: transform .18s ease;
}
/* Bootstrap flips aria-expanded (and adds .show) on the toggle when the menu
   opens; both are matched so this survives either behaviour. */
.sn-tab[aria-expanded="true"] .sn-tab-chev,
.sn-tab.show .sn-tab-chev { transform: rotate(180deg); }
.sn-nav .dropdown-menu { border-radius: 14px; padding: .4rem; border: 1px solid var(--sn-border); box-shadow: 0 12px 34px rgba(0,0,0,.08); }
.sn-nav .dropdown-item { border-radius: 10px; font-weight: 600; padding: .5rem .75rem; }

/* Inline search — rounded pill to match the mockup.
   min-width is the whole fix: with `min-width: 0` this was the only shrinkable
   item in a row of nowrap siblings, so it absorbed all overflow and collapsed —
   first to a sliver rendering "S e a r c h" one character per line, then to zero
   (an invisible search box on every marketplace page). It must never shrink
   below a usable width; hide something else at that breakpoint instead.

   ⚠️ This is now the ONLY shrinkable item on the line (the nav was made rigid —
   see .sn-nav above), so it absorbs 100% of any overflow instead of the ~35% it
   used to take when it split the shortfall with the nav. It therefore reaches
   this 170px floor after ~30px of overflow rather than ~86px. The floor itself
   still holds absolutely: min-width is a hard clamp in flexbox, so once every
   item is at its minimum the LINE overflows rather than any item shrinking
   further — the Session 70/92 "search collapses to a sliver, then to zero" mode
   is structurally impossible. But it does mean the logo cap and the nav labels
   are load-bearing, not cosmetic: they are what keep the line from overflowing.

   max-width: 420px is also the switch between "the search grows" and "the auto
   margin on .sn-actions grows". Above ~1314px the search is already capped, which
   is why the 1200-1399.98 tier below stops where it does. */
.sn-search { flex: 1 1 200px; min-width: 170px; max-width: 420px; }
/* ⚠️ Theme-agnostic on purpose. The search is initialised with
   `theme: "bootstrap-5"` (eshop-bundle-js.js), but NO select2 bootstrap-5
   stylesheet is loaded anywhere in this project — `select2-container--bootstrap-5`
   appears in zero CSS files. So select2 renders with only its structural CSS and
   the field showed as a giant unstyled placeholder with a detached dropdown.
   Rules keyed on `--default` (select2's other theme) silently never matched.
   Do NOT re-scope these to a theme class unless that theme's CSS is actually
   loaded. */
.sn-search .select2-container { width: 100% !important; }

/* Magnifier as a background image rather than a pseudo-element: the OPEN state's
   input is appended to <body>, outside .sn-search, so a ::before on the wrapper
   could never decorate it. One shared variable keeps both states identical. */
:root {
    --sn-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
}

/* --- Closed state: the rounded pill from the mockup --------------------------
   Specificity note: select2's own base rules are
   `.select2-container .select2-selection--single .select2-selection__rendered`
   at (0,3,0), which outranks a plain `.sn-search .select2-selection__rendered`
   (0,2,0). That is why the placeholder previously escaped the pill and wrapped
   onto two lines. Every rule below is matched at (0,3,0) or higher on purpose —
   do not "simplify" these selectors. */
.sn-search .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
    background: var(--bs-body-bg, #fff) var(--sn-search-icon) no-repeat;
    background-size: 17px 17px;
    background-position: left .95rem center;
    border: 1px solid var(--sn-border, #e5e5e5);
    border-radius: 999px;
    padding: 0 1rem 0 2.5rem;
    outline: none;
    cursor: text;
}
[dir="rtl"] .sn-search .select2-container .select2-selection--single {
    background-position: right .95rem center;
    padding: 0 2.5rem 0 1rem;
}
.sn-search .select2-container .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-size: .9rem;
    color: var(--sn-ink);
    text-align: start;

    /* ⚠️ Two rules in eshop-bundle-main.css fight this element; both need
       beating, and specificity alone is not enough for the first:

       1. `.select2-selection__rendered { white-space: normal !important }`
          — a BARE class (0,1,0) but !important, so it outranks any plain
          selector no matter how specific. This is what made the placeholder
          wrap onto two lines and escape the pill. Ours must also be !important.
          (Its sibling `text-overflow: hidden !important` is an invalid value —
          only clip/ellipsis/<string> are legal — so it is ignored, but we set
          ellipsis !important anyway rather than depend on that.)

       2. `.select2-container--default … .select2-selection__rendered
          { line-height: 42px; min-height: 42px }`
          — min-height made this span 42px tall with its text sitting at the
          TOP, so the flex parent centred the BOX while the text rode high.
          That is the vertical-misalignment bug. min-height must be 0 and the
          line-height must come from the text, not a fixed px value. */
    min-height: 0;
    line-height: normal;
    white-space: nowrap !important;
    word-wrap: normal !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
}
.sn-search .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--sn-muted, #9a9a9a); }
/* No caret — this reads as a search field, not a picker. */
.sn-search .select2-container .select2-selection--single .select2-selection__arrow { display: none; }
.sn-search .select2-container--open .select2-selection--single { border-color: var(--sn-accent); }

/* --- Open state -------------------------------------------------------------
   select2 appends the dropdown to <body>, so it cannot be scoped by ancestor.
   `dropdownCssClass: "sn-search-dd"` (set on both search inits) tags it, which
   keeps every rule here off the other select2s on the site.

   The dropdown is lifted by exactly the pill height so its input lands ON the
   pill. That is what makes you type IN the header instead of into a second box
   floating underneath it. If the pill height changes, change --sn-search-h. */
:root { --sn-search-h: 44px; }

.select2-dropdown.sn-search-dd {
    margin-top: calc(-1 * var(--sn-search-h));
    border: 0;
    background: transparent;
    box-shadow: none;
}
.select2-dropdown.sn-search-dd .select2-search--dropdown { padding: 0; }
.select2-dropdown.sn-search-dd .select2-search--dropdown .select2-search__field {
    /* ⚠️ eshop-bundle-main.css has `.select2-search__field{width:408px!important}`
       — a bare class with !important, so it wins on any plain selector and would
       pin this input to a fixed 408px instead of matching the pill it overlays.
       Must be !important to beat it. */
    width: 100% !important;
    height: var(--sn-search-h);
    box-sizing: border-box;
    background: var(--bs-body-bg, #fff) var(--sn-search-icon) no-repeat;
    background-size: 17px 17px;
    background-position: left .95rem center;
    border: 1px solid var(--sn-accent);
    border-radius: 999px;
    padding: 0 1rem 0 2.5rem;
    font-size: .9rem;
    outline: none;
    box-shadow: 0 0 0 3px var(--sn-primary-pale, rgba(0, 0, 0, .04));
}
[dir="rtl"] .select2-dropdown.sn-search-dd .select2-search--dropdown .select2-search__field {
    background-position: right .95rem center;
    padding: 0 2.5rem 0 1rem;
}
/* Results sit just under the field as their own card. */
.select2-dropdown.sn-search-dd .select2-results {
    margin-top: .5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--sn-border, #e5e5e5);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
    overflow: hidden;
}
.select2-dropdown.sn-search-dd .select2-results__option { padding: .6rem .9rem; font-size: .88rem; }
.select2-dropdown.sn-search-dd .select2-results__option--highlighted { background: var(--sn-pill-bg) !important; color: var(--sn-ink) !important; }
/* "Please enter 1 or more characters" — a hint, not a result. */
.select2-dropdown.sn-search-dd .select2-results__message { color: var(--sn-muted, #9a9a9a); font-size: .82rem; }

/* Right cluster. flex:0 0 auto so it is never crushed — if space runs out the
   answer is to hide an item at a breakpoint, not to squeeze the row. */
.sn-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; margin-inline-start: auto; }
.sn-sep { width: 1px; height: 34px; background: var(--sn-border, #eee); margin-inline: .35rem; flex: 0 0 auto; }
/* NOTE: a `.sn-nav { min-width: 0 }` used to sit here. It was deleted — it was
   the cause of the English nav being clipped by the search pill, and it was
   sufficient to cause that on its own. See the long note on .sn-nav above before
   re-adding it as "harmless". */
.sn-lang, .sn-country, .sn-cta, .sn-icon-btn, .sn-act { flex: 0 0 auto; }

/* AR | EN toggle */
.sn-lang { display: inline-flex; align-items: center; gap: .4rem; padding-inline: .35rem; }
.sn-lang-opt {
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    color: var(--sn-muted); text-decoration: none; padding: .15rem .1rem;
}
.sn-lang-opt + .sn-lang-opt { border-inline-start: 1px solid var(--sn-border, #e5e5e5); padding-inline-start: .5rem; }
.sn-lang-opt:hover { color: var(--sn-ink); }
.sn-lang-opt.active { color: var(--sn-accent); }
/* Landing routes are Arabic-only, so the other language reads as unavailable
   rather than silently doing nothing. */
.sn-lang-opt.disabled { opacity: .45; cursor: not-allowed; }

/* Compact country/currency pill (sets SAR / BHD / OMR) */
.sn-country {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; cursor: pointer;
    padding: .3rem .5rem; border-radius: 10px;
    color: var(--sn-ink); font-size: .8rem; font-weight: 700;
}
.sn-country:hover { background: var(--sn-pill-bg); }
.sn-country > i { font-size: 1rem; color: var(--sn-accent); }

/* Stacked icon + label actions (account / favorites / cart) */
.sn-act {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; min-width: 58px; padding: .3rem .35rem;
    border-radius: 12px; text-decoration: none; color: var(--sn-ink); background: none; border: 0;
}
.sn-act:hover { background: var(--sn-pill-bg); color: var(--sn-ink); }
.sn-act > i { font-size: 1.25rem; line-height: 1; }
.sn-act .sn-act-label { font-size: .68rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.sn-act .badge {
    position: absolute; top: -2px; inset-inline-end: 6px;
    background: var(--sn-accent) !important; color: var(--sn-on-accent);
    font-size: .6rem; min-width: 16px; height: 16px; line-height: 16px;
    padding: 0 4px; border-radius: 999px;
}
/* Logged-in indicator. Rendered ONLY in header.php's logged-in branch, so its
   mere presence is the signal -- there is no "logged out" variant to style.

   Deliberately NOT .sn-act .badge: that rule is sized for a number
   (min-width:16px + padding:0 4px) and would render as a pill. This is a plain
   10px disc with a 2px ring in the bar's own background colour, so it reads as
   a deliberate status badge rather than a stray pixel.

   position:absolute is load-bearing -- it keeps the dot out of flow so the bar's
   rendered height never changes. landing.css:2742 pins --header-height: 94px off
   that height, and the 1200-1399.98px tier below is documented as
   horizontal-properties-only.

   inset-inline-end (not right) so it mirrors correctly in Arabic, matching
   .sn-act .badge directly above. */
.sn-act-dot {
    position: absolute;
    top: -2px;
    inset-inline-end: 6px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    /* Green = signed in. Reuses the site status green that the chat presence dot
       already uses (--sn-chat-online resolves to it), so online is one colour across
       the storefront. A semantic status colour, not a brand colour -- which is why it
       does not follow --sn-accent. The fallback matches the token value. */
    background: var(--sn-verified, #00a63e);
    border: 2px solid var(--bs-body-bg, #fff);
    pointer-events: none;
}

/* Signed-in name at the top of the account dropdown. max-width + ellipsis
   because users.username is free text and a long one would otherwise widen the
   whole menu. */
.sn-acct-name {
    color: var(--sn-ink);
    font-weight: 700;
    font-size: .82rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sn-act-wrap { display: inline-flex; }

/* Small icon-only buttons (compare, mobile burger) */
.sn-icon-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--sn-ink); background: none; border: 0; text-decoration: none; font-size: 1.2rem; }
.sn-icon-btn:hover { background: var(--sn-pill-bg); color: var(--sn-ink); }
.sn-icon-btn .badge { position: absolute; top: 4px; inset-inline-end: 4px; background: var(--sn-accent) !important; color: var(--sn-on-accent); font-size: .6rem; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px; }

/* Primary CTA */
.sn-cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .7rem 1.5rem; border-radius: 12px;
    background: var(--sn-accent); color: var(--sn-on-accent);
    font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap;
    border: 0; transition: opacity .15s ease;
}
.sn-cta:hover { background: var(--sn-accent); color: var(--sn-on-accent); opacity: .9; }

/* Suppress Bootstrap dropdown caret where we use our own / none */
.no-caret.dropdown-toggle::after { display: none; }

/* Mobile offcanvas nav links */
.sn-mobile-links { margin: 0; }
.sn-mobile-links a { display: block; padding: .7rem 0; font-weight: 800; font-size: .9rem; color: var(--sn-ink); text-decoration: none; border-bottom: 1px solid var(--sn-border); transition: color .15s ease, border-color .15s ease; }
#sn-mobile-nav .sn-mobile-links a:hover,
#sn-mobile-nav .sn-mobile-links a:focus { color: var(--sn-ink) !important; border-bottom-color: var(--sn-accent); }
/* Marks the current deliver-to country in the burger copy of .js-country-opt. */
#sn-mobile-nav .sn-mobile-links a.active { color: var(--sn-accent) !important; }

/* Section headings in the grouped burger (Session 98). Small, muted and
   uppercase so they read as labels, not as tappable rows. */
.sn-mobile-head {
    margin: 1.5rem 0 .25rem;
    font-size: .68rem; font-weight: 900; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sn-muted-2);
}
.sn-mobile-head:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Progressive collapse.

   The bar must never overflow — in RTL an overflowing header reads as the whole
   PAGE being shifted sideways (the recurring "page shift" bug). Rather than let
   any item shrink, drop items as width runs out.

   ⚠️ Session 98 rewrote this ladder. It used to hide the nav below 1600, which
   meant every common laptop (1280 / 1366 / 1440 / 1536) got the burger — the
   burger WAS the desktop experience. The bar was simply carrying too much
   (~1436px of content at the search's 170px minimum). Three items came out:
   KitLab folded into the Marketplace dropdown, Compare's button deleted, and
   deliver-to moved into the account dropdown. That freed ~230px, which is what
   lets the nav reach 1200.

   ⚠️ That Session 98 budget then went stale and the bar quietly went over it in
   ENGLISH ONLY, which is what produced the clipped "For Partne" tab. Two things
   were wrong with it: the Arabic gap was understated (the nav was ~372px in
   English vs ~261px in Arabic — ~111px on the tabs alone, but the English CTA and
   account label are also longer), and the logo had no max-width at all, so an
   admin upload wider than the ~153px samples in assets/logo/ came straight out of
   the budget with nothing to stop it. Fixed by making .sn-nav rigid, capping the
   logo at 200px, and shortening the two long English tab labels.

   Budget now, measured in English at its widest allowed logo (200px). Arabic is
   the slack case at every tier:

     >=1400  logo + 3 nav tabs + search + AR|EN + 3 labelled actions + CTA
                                       ~1121px  (fits 1400; search caps at 420)
     1200-1399 same, actions become 44px squares (labels off), tighter padding,
               plus the tightening tier below
                                       ~1007px  (fits 1200, ~127px spare)
     <1200   nav -> burger             ~760px   (fits comfortably)

   Break-even logo width before the bar overflows at 1200px is ~286px, i.e. the
   200px cap leaves real headroom for font-fallback variance and browser zoom.
   A third .sn-lang option would cost ~29px of it.

   ⚠️ Do NOT buy width by shrinking .sn-search below its 170px min-width. That is
   exactly what collapsed it to a sliver and then to zero in Session 70/92. If a
   future addition overflows the bar, drop an ITEM at a breakpoint instead.
   ⚠️ Do NOT re-add `min-width: 0` to .sn-nav to "let it flex" — that is the exact
   line that caused the clipping. See the note on .sn-nav above.
   --------------------------------------------------------------------------- */

/* 1200-1399: the nav STAYS, actions drop their labels to 44px squares.

   ⚠️ Show/hide of the nav vs the burger is now done entirely by d-xl-* in
   header.php (Bootstrap's xl = min-width 1200px), so the `display: none
   !important` overrides that used to live here are gone. d-xl-* is also the
   safer family: Bootstrap 4 has NO xxl tier (bootstrap.min.css is v4.0.0) and
   rtl/eshop-bundle-main.css ships neither, so the old d-xxl-* classes only ever
   resolved in Arabic because style.css happens to be loaded unprefixed. */
@media (max-width: 1399.98px) {
    .sn-act { min-width: 44px; width: 44px; height: 44px; gap: 0; }
    .sn-act .sn-act-label { display: none; }
    .sn-act .badge { top: 2px; inset-inline-end: 2px; }
    .sn-act-dot     { top: 4px; inset-inline-end: 4px; }

    .sn-header-container { padding-inline: 1rem; }
    .sn-bar { padding: .75rem 1rem; }
}

/* 1200-1399: the band where the nav is at its tightest — this hands the recovered
   width straight to the search, which is still below its 420px cap here.

   ⚠️ Upper bound is 1399.98, NOT 1599. Solving for when .sn-search reaches
   max-width: 420px gives ~1314px, so above that every pixel saved goes to
   .sn-actions' `margin-inline-start: auto` (dead space) instead of to the search.
   A 1400-1599 tier would shrink the tabs and CTA on 1440/1536 laptops and buy
   nothing measurable.

   ⚠️ Horizontal properties ONLY. landing.css pins `--header-height: 94px` off this
   bar's rendered height, so nothing in here may touch block padding, line-height
   or icon size. .sn-cta keeps its .7rem block padding for exactly that reason, and
   .sn-act stays at 44px to stay above the tap-target guideline.

   Deliberately light (~41px): after the rigid nav, the logo cap and the shortened
   English labels there is already ~86px of slack at 1200px, so this is margin, not
   necessity. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sn-bar { gap: .7rem; }                                /* 13.6 -> 11.2px x3 = -7.2px  */
    .sn-nav { gap: .7rem; }                                /* 14.4 -> 11.2px x2 = -6.4px  */
    .sn-tab { font-size: .9rem; }                          /* 15.2 -> 14.4px    = -12.0px */
    .sn-cta { padding: .7rem 1.15rem; font-size: .85rem; } /* 24 -> 18.4px      = -15.0px */
}

@media (max-width: 991.98px) {
    .sn-header-container { padding-inline: .75rem; }
    .sn-bar { gap: .5rem; padding: .6rem .8rem; margin: .6rem 0; border-radius: 14px; }
    .sn-act { min-width: 40px; width: 40px; height: 40px; }
    .sn-cta { padding: .6rem 1rem; font-size: .82rem; }
    .sn-logo img { max-height: 32px; }
}

/* Very narrow phones. The CTA is already gone below 768 (d-md-*); drop the
   language toggle and dividers too so logo + burger + actions always fit.
   Nothing becomes unreachable — the burger menu carries the nav and the CTA,
   and language is reachable from the marketplace pages. */
@media (max-width: 575.98px) {
    .sn-bar { gap: .35rem; padding: .5rem .6rem; }
    .sn-lang, .sn-sep { display: none !important; }
    .sn-logo img { max-height: 28px; }
    .sn-act { min-width: 38px; width: 38px; height: 38px; }
    .sn-act > i { font-size: 1.1rem; }
}

/* Smallest phones still in use (320px / iPhone SE 1st gen). Without this the bar
   overflows by ~20px, which in RTL shifts the whole page. */
@media (max-width: 400px) {
    .sn-logo img { max-height: 24px; max-width: 92px; object-fit: contain; }
    .sn-act { min-width: 34px; width: 34px; height: 34px; }
    .sn-act > i { font-size: 1rem; }
}

/* =====================================================================
   "Please sign in" interstitial (pages/login-required.php)
   ===================================================================== */
.sn-lr-icon {
    width: 72px; height: 72px; margin: 0 auto 1.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--sn-well); color: var(--sn-accent);
    font-size: 2rem;
}
.sn-lr-title { font-size: 1.6rem; font-weight: 900; color: var(--sn-ink); margin: 0 0 .75rem; }
.sn-lr-body { color: var(--sn-muted); font-size: .95rem; line-height: 1.7; margin: 0 0 2rem; }
.sn-lr-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
.sn-lr-secondary { color: var(--sn-muted); font-size: .9rem; font-weight: 700; text-decoration: none; padding: .7rem 1rem; }
.sn-lr-secondary:hover { color: var(--sn-ink); }

/* =====================================================================
   Footer
   ===================================================================== */
/* Session 98 redesign: brand block + 5 link columns + a 3-slot bottom bar.

   ⚠️ Layout is hand-rolled flex, NOT the Bootstrap grid. Five equal columns do
   not divide into a 12-column grid, `row-cols-*` exists in none of the loaded
   stylesheets, and rtl/eshop-bundle-main.css ships none of the col-* families
   the LTR build has (the Session 90 RTL-utility trap). Flex avoids all of it.

   Neutral chrome is local to the dark footer; every accent is --sn-accent, so
   Admin -> Web Settings -> Primary Colour drives it. No hardcoded brand hex. */
.sn-footer { background: #1a1a1a; color: #b0b0b0; }
.sn-footer .sn-foot-inner { padding: 4.5rem 0 2.5rem; }

/* Brand + columns. Brand is first in the DOM so RTL places it on the right.

   ⚠️ The sizing here is arithmetic, not taste. `.container` is Bootstrap 4, which
   caps at 1140px and has NO xxl tier — so the footer is 1140px wide even on a
   1920 screen (the header is 1760px via .sn-header-container; that asymmetry is
   pre-existing). The budget at that cap:

       1140  .container max-width
       - 30  its own left+right padding (border-box)
       - 40  .sn-foot-grid column gap (2.5rem)
       ----
       1070  shared between brand and the 5 columns

   The first cut gave the brand `flex: 1 1 320px` and the columns `flex: 2 1 620px`,
   so the brand GREW to ~360px and left the columns ~710px — while five columns at
   `min-width: 130px` plus four 24px gaps need 746px. Short by ~36px, so the last
   column (Support) wrapped onto its own row at EVERY desktop width >= 1200, not
   just narrow ones. Two independent fixes, because either alone is fragile:

     1. The brand no longer grows (`flex: 0 1 300px`), so the column group gets a
        predictable 770px (~135px per column) instead of a leftover ~710px.
     2. The columns share that space equally and CANNOT wrap (`flex-wrap: nowrap`
        + `flex: 1 1 0`), so a longer label in some future language can never push
        one onto a second row — it wraps inside its own column instead.

   If a sixth column is ever added, re-run this budget; do not just add it. */
.sn-foot-grid { display: flex; flex-wrap: wrap; gap: 3rem 2.5rem; align-items: flex-start; }
.sn-foot-brand { flex: 0 1 300px; max-width: 30rem; }
.sn-foot-cols { flex: 1 1 620px; display: flex; flex-wrap: nowrap; gap: 2rem 1.5rem; }

.sn-footer .sn-foot-logo img { max-height: 38px; width: auto; margin-bottom: 1.25rem; }

/* Admin-authored rich text (TinyMCE). These are DEFAULTS, not a lockdown: they
   make a plain "heading then paragraph" match the design out of the box, while
   anything the admin styles in the toolbar (inline color/size) still wins because
   inline styles beat a stylesheet. Keep the selectors at one class so that stays
   true — do not add !important here. */
.sn-foot-rich > :first-child { margin-top: 0; }
.sn-foot-rich > :last-child { margin-bottom: 0; }
.sn-foot-rich a { color: #fff; text-decoration: underline; }
.sn-foot-rich a:hover { color: var(--sn-accent); }
.sn-foot-rich img { max-width: 100%; height: auto; }

/* Brand block: headings render as the big white headline, body as grey copy. */
.sn-foot-brand-rich h1,
.sn-foot-brand-rich h2,
.sn-foot-brand-rich h3,
.sn-foot-brand-rich h4 { color: #fff; font-size: 1.4rem; font-weight: 900; line-height: 1.35; margin: 0 0 .85rem; }
.sn-foot-brand-rich p,
.sn-foot-brand-rich li { color: #b0b0b0; font-size: .9rem; line-height: 1.75; margin: 0 0 .6rem; }
.sn-foot-brand-rich ul,
.sn-foot-brand-rich ol { padding-inline-start: 1.1rem; margin: 0 0 .6rem; }

/* Entity block: small, muted, tight — it sits in the bottom bar. */
.sn-foot-entity-rich p,
.sn-foot-entity-rich li { color: #8b8b8b; font-size: .74rem; line-height: 1.7; margin: 0; }
.sn-foot-entity-rich h1,
.sn-foot-entity-rich h2,
.sn-foot-entity-rich h3,
.sn-foot-entity-rich h4 { color: #fff; font-size: .8rem; font-weight: 800; margin: 0 0 .25rem; }
.sn-foot-entity-rich ul,
.sn-foot-entity-rich ol { padding-inline-start: 1rem; margin: 0; }

/* Small label with the short accent rule beside it (mockup). Shared by the app
   block and the entity-details block. */
.sn-foot-eyebrow {
    display: flex; align-items: center; gap: .6rem;
    color: #fff; font-size: .8rem; font-weight: 800;
    margin-bottom: .9rem;
}
.sn-foot-eyebrow::after {
    content: ""; flex: 0 0 34px; height: 2px; border-radius: 2px;
    background: var(--sn-accent);
}

.sn-foot-appblock { margin-top: 2rem; }

/* Official Google Play / App Store badge artwork.

   ⚠️ EQUAL HEIGHT, never equal width. The two files have different aspect ratios
   — Google 238.96×70.87 (3.372), Apple 119.66×40 (2.992) — and neither has clear
   space baked in (both rounded rects fill their whole viewBox, checked). Matching
   widths therefore makes the Google badge visibly shorter; matching heights makes
   them read as a pair. Widths land at ~148px and ~132px for a 44px height, so the
   pair plus the gap fits the ~300px brand column with room to spare.

   ⚠️ Set HEIGHT explicitly and leave width auto. Do NOT go back to
   `width:auto; height:auto; max-height:…`, which looks equivalent but renders the
   Google badge at 0×0 — that is what made it invisible while Apple's showed fine.
   The reason is in the files: Apple's SVG root carries width="119.66" height="40",
   but Google's (an Adobe Illustrator export) has ONLY a viewBox and no width or
   height, so it has an intrinsic aspect ratio but NO intrinsic size. `max-height`
   can only constrain a size that already exists, and inside a flex item with
   `min-width: 0` an auto-sized replaced element with no intrinsic size collapses
   to zero. A fixed height + auto width gives the browser the one number it needs
   and derives the other from the viewBox.

   ⚠️ Still never set width AND height together, and never add background, border,
   border-radius or filter — both vendors forbid distorting or re-skinning the
   badge, and the artwork already carries its own shape and border. `max-width` is
   deliberately absent too: combined with a fixed height it would clamp width only
   and squash the badge. Overflow is prevented by the width budget instead. */
/* ⚠️ `gap` here is CLEAR SPACE, not styling. Both vendors mandate a minimum clear
   area around their badge, expressed as a fraction of badge height — Google's is
   the stricter of the two at roughly a quarter of the height, Apple's about a
   tenth. At our 44px height that means ~11px, and the previous .6rem (9.6px) was
   under it. 1rem (16px) clears the stricter rule at every height we use (44 / 40 /
   56px). Do not reduce it to tighten the layout — shrink the badge height instead,
   which lowers the required clear space with it. */
.sn-foot-stores { display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; }
.sn-store-badge { flex: 0 0 auto; display: block; line-height: 0; transition: opacity .15s ease; }
.sn-store-badge:hover { opacity: .85; }
.sn-store-badge img { display: block; height: 44px; width: auto; }

/* Up to 7 networks (was 4), so this must wrap rather than overflow. Circular per
   the mockup; the loop in footer.php hides unconfigured networks entirely. */
.sn-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.sn-social a > svg { display: block; }
.sn-social a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; font-size: 1.05rem; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.sn-social a:hover { background: rgba(255, 255, 255, .14); border-color: var(--sn-accent); color: var(--sn-accent); }

/* flex-basis 0 + min-width 0 = five equal columns that divide whatever space
   there is. A long label wraps INSIDE its column (as "المتاجر ومقدمو الخدمات"
   already does) rather than forcing the column onto a new row. */
.sn-foot-col { flex: 1 1 0; min-width: 0; }
.sn-foot-col h4 { position: relative; color: #fff; font-size: .95rem; font-weight: 900; letter-spacing: .03em; margin: 0 0 1.6rem; padding-bottom: .7rem; white-space: nowrap; }
.sn-foot-col h4::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: var(--sn-accent); }
.sn-foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.sn-foot-col ul a { color: #b0b0b0; font-size: .875rem; font-weight: 600; text-decoration: none; transition: color .15s ease; }
.sn-foot-col ul a:hover { color: #fff; }

/* Bottom bar: entity details | payment methods | copyright */
.sn-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 2rem; margin-top: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.sn-foot-bottom .sn-copy { color: #666; font-size: .72rem; font-weight: 800; letter-spacing: .04em; margin: 0; text-align: end; }

.sn-foot-legal { display: flex; align-items: flex-start; gap: 1rem; flex: 1 1 340px; }
.sn-foot-legal-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
    color: var(--sn-accent); font-size: 1.4rem;
}
.sn-foot-legal .sn-foot-eyebrow { margin-bottom: .5rem; font-size: .72rem; }

.sn-pay { display: flex; align-items: center; gap: 1.4rem; opacity: .45; flex: 0 0 auto; }
.sn-pay i { font-size: 2rem; color: #fff; }

/* The footer had NO media queries before Session 98 — it relied entirely on the
   Bootstrap grid it no longer uses. Reflow explicitly: 5 -> 3 -> 2 -> 1.

   ⚠️ Each tier below MUST re-enable `flex-wrap: wrap` on .sn-foot-cols. The
   desktop rule sets `nowrap` to guarantee five-across, and nowrap would otherwise
   inherit down and crush the columns instead of reflowing them.

   `.container` narrows with the viewport too, so the real content width per tier
   (max-width minus its 30px padding) is: >=1200 -> 1110, 992-1199 -> 930,
   768-991 -> 690, 576-767 -> 510. */
@media (max-width: 1199.98px) {
    /* content 930 - 40 gap - 300 brand = 590 for the columns; 3-up gives ~180px
       each, where 5-up would give only ~99px and shred the Arabic labels. */
    .sn-foot-cols { flex-wrap: wrap; }
    .sn-foot-col { flex: 1 1 28%; }
}
@media (max-width: 991.98px) {
    .sn-footer .sn-foot-inner { padding: 3.5rem 0 2rem; }
    .sn-foot-grid { gap: 2.5rem; }
    .sn-foot-brand { flex: 1 1 100%; max-width: 36rem; }
    .sn-foot-cols { flex: 1 1 100%; flex-wrap: wrap; }
    .sn-foot-col { flex: 1 1 45%; }
}
@media (max-width: 575.98px) {
    .sn-foot-brand-rich h1,
    .sn-foot-brand-rich h2,
    .sn-foot-brand-rich h3,
    .sn-foot-brand-rich h4 { font-size: 1.2rem; }
    .sn-foot-cols { flex-wrap: wrap; }
    .sn-foot-col { flex: 1 1 100%; }
    .sn-foot-col h4 { margin-bottom: 1rem; }
    /* One row at every width. At a 320px viewport the column is ~290px and the
       pair needs 148 + 132 + 10 = 290 at a 44px height, so drop to 38px there:
       128 + 114 + 10 = 252px, comfortably inside. max-width:100% is the backstop
       if a future locale's badge is wider still. */
    /* 40px, not 38 — Apple documents a minimum badge size for digital use and 40px
       height is the value to stay at or above; 38 was needlessly under it for 2px.
       At 40px the pair is 135 + 120 + 16 gap = 271px, inside the ~290px column at a
       320px viewport, so nothing is gained by going smaller. */
    .sn-store-badge img { height: 40px; }
    /* Must repeat the doubled class, or the (0,2,1) --lg rule above outranks this
       media query's (0,1,1) and the home band stays at 56px on phones. */
    .sn-store-badge.sn-store-badge--lg img { height: 44px; }
    .sn-foot-bottom { flex-direction: column; align-items: flex-start; }
    .sn-foot-bottom .sn-copy { text-align: start; }
}

/* =====================================================================
   Sponsorships listing
   ===================================================================== */
.sn-listing-head { padding: 2.5rem 0 1.5rem; }
.sn-listing-head h1 { font-weight: 900; letter-spacing: -.02em; color: var(--sn-ink); margin: 0 0 .35rem; }
.sn-listing-head p { color: var(--sn-muted); margin: 0; }
.sn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sn-empty { text-align: center; padding: 4rem 1rem; color: var(--sn-muted); }

/* =====================================================================
   Product listing page (flat grid + Spornation filter sidebar)
   ===================================================================== */
:root {
    --sn-muted-strong: #999;
    --sn-field:        #f9f9f9;
    --sn-field-border: #f2f2f2;
    --sn-star:         #ffba00;
}

/* ---- Listing results header + sort ---- */
.sn-results { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
/* letter-spacing in em, not px: the heading is <h1 class="display-6">, which is
   calc(1.265rem + .18vw) -- so -1px was -.048em at the mobile size, more than
   double the -.02em used elsewhere, and tightened further as it shrank. */
.sn-results .sn-results-title { font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: var(--sn-ink); margin: 0; line-height: 1.1; }
.sn-results .sn-results-sub { color: #666; font-size: .875rem; font-weight: 500; margin: .35rem 0 0; }
.sn-results .sn-results-sub b { color: var(--sn-ink); }
.sn-sort { display: flex; align-items: center; gap: 1rem; }
.sn-sort > label { font-weight: 900; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-muted-strong); margin: 0; white-space: nowrap; }
.sn-sort .form-select, .sn-sort select { min-width: 160px; height: 42px; line-height: 1.2; padding: .5rem 2.25rem .5rem .9rem; background-color: #f7f7f8; border: 1px solid var(--sn-border); border-radius: 12px; font-weight: 700; font-size: .875rem; color: var(--sn-ink); }
.sn-filter-toggle { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--sn-ink); text-decoration: none; }

/* ---- New-arrival badge (dark) — sale badge already exists ---- */
.sn-badge--new { background: var(--sn-ink); }

/* ---- Card eyebrow + italic listing name ---- */
.sn-prod-eyebrow { font-weight: 900; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-muted-strong); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sn-card .sn-name--listing { font-style: italic; text-transform: uppercase; }

/* ---- Filter card ---- */
.sn-filter { background: var(--bs-body-bg, #fff); border: 1px solid var(--sn-border); border-radius: 15px; padding: 32px; display: flex; flex-direction: column; gap: 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); }
.sn-filter-head { display: flex; align-items: center; justify-content: space-between; }
.sn-filter-head h2 { font-weight: 700; font-size: 1.125rem; color: var(--sn-ink); margin: 0; }
.sn-clear { background: none; border: 0; padding: 0; font-weight: 900; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-accent); text-decoration: none; cursor: pointer; }
.sn-clear:hover { opacity: .8; color: var(--sn-accent); }
.sn-fsec { display: flex; flex-direction: column; gap: 1rem; }
.sn-fsec > h3 { font-weight: 900; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-muted-strong); margin: 0; }

/* ---- Attribute Set group (collapsible umbrella over 2+ .sn-fsec sections) ----
   Rendered only when a set contributes 2+ attributes to the CURRENT result set.
   A single-child set, and an attribute with no set at all, both stay a bare
   .sn-fsec -- so this never adds a heading that carries no information.
   Toggling uses Bootstrap's own collapse data-api (data-bs-toggle), which is
   already live in eshop-bundle-js.js: this feature ships NO JavaScript.
   NB the bundle registers BOTH the BS4 ([data-toggle]) and BS5 ([data-bs-toggle])
   collapse handlers -- never put both attributes on one element or it double-toggles. */
.sn-fset { display: flex; flex-direction: column; gap: 1rem; }
.sn-fset-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; margin: 0; padding: 0 0 .75rem; background: none; border: 0; border-bottom: 1px solid var(--sn-border); font-weight: 900; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-ink); text-align: start; cursor: pointer; }
.sn-fset-toggle:hover { color: var(--sn-accent); }
.sn-fset-chev { flex: 0 0 auto; font-size: 1rem; line-height: 1; transition: transform .2s ease; }
.sn-fset-toggle[aria-expanded="false"] .sn-fset-chev { transform: rotate(-90deg); }
/* Arabic marketplace pages carry NO dir attribute, so [dir="rtl"] is inert here
   (Session 101) -- the mirrored chevron must key off the body flag instead. */
body[data-is-rtl="1"] .sn-fset-toggle[aria-expanded="false"] .sn-fset-chev { transform: rotate(90deg); }
.sn-fset-body { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---- Checkbox rows (brand / generic attribute) ---- */
.sn-check-list { display: flex; flex-direction: column; gap: .75rem; max-height: 260px; overflow: auto; }
.sn-check { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.sn-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sn-check .sn-box { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid #767676; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, border-color .12s ease; }
.sn-check .sn-box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--sn-on-accent); border-bottom: 2px solid var(--sn-on-accent); transform: rotate(-45deg) translateY(-1px); opacity: 0; }
.sn-check input:checked + .sn-box { background: var(--sn-accent); border-color: var(--sn-accent); }
.sn-check input:checked + .sn-box::after { opacity: 1; }
.sn-check .sn-check-txt { font-size: .875rem; color: #666; }
.sn-check input:checked ~ .sn-check-txt { color: var(--sn-ink); font-weight: 500; }

/* ---- Price range ---- */
.sn-range { display: flex; flex-direction: column; gap: 1.5rem; }
.sn-range .sn-track-wrap { position: relative; height: 24px; }
.sn-range .sn-track { position: absolute; top: 9px; left: 0; right: 0; height: 6px; background: #f2f2f2; border-radius: 999px; }
.sn-range input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sn-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--sn-accent); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); cursor: pointer; }
.sn-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--sn-accent); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); cursor: pointer; }
.sn-range input[type=range]::-moz-range-track { background: none; }
.sn-minmax { display: flex; align-items: center; gap: 10px; }
.sn-minmax .sn-mm { flex: 1; background: var(--sn-field); border: 1px solid var(--sn-field-border); border-radius: 12px; padding: 8px 10px; text-align: center; }
.sn-minmax .sn-mm small { display: block; font-weight: 900; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sn-muted-strong); }
.sn-minmax .sn-mm input { width: 100%; border: 0; background: none; text-align: center; font-weight: 900; font-size: .875rem; color: var(--sn-ink); outline: none; }
.sn-minmax .sn-mm input::-webkit-outer-spin-button, .sn-minmax .sn-mm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sn-range-hint { margin: 0; font-size: .68rem; color: var(--sn-muted); }

/* ---- Size buttons ---- */
.sn-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sn-size-grid input { position: absolute; opacity: 0; width: 0; height: 0; }
.sn-size-grid .sn-size-btn { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--sn-border); border-radius: 8px; font-weight: 700; font-size: .75rem; color: #000; cursor: pointer; margin: 0; transition: all .12s ease; }
.sn-size-grid input:checked + .sn-size-btn { background: color-mix(in srgb, var(--sn-accent) 12%, #fff); border: 2px solid var(--sn-accent); color: var(--sn-accent); font-weight: 900; }

/* ---- Color swatches ---- */
.sn-swatch-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sn-swatch-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.sn-swatch-row .sn-swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--sw, #ccc); border: 1px solid var(--sn-border); cursor: pointer; margin: 0; display: inline-block; transition: box-shadow .12s ease; }
.sn-swatch-row input:checked + .sn-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sn-accent); }
/* Image swatch (attribute_values.swatche_type = 2). Scoped under .sn-swatch-row because
   .sn-swatch is shared with the product detail buy box (.btn-group .sn-swatch). */
.sn-swatch-row .sn-swatch--img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.sn-swatch-chip { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--sn-border); border-radius: 999px; font-size: .75rem; color: #666; cursor: pointer; margin: 0; }
.sn-swatch-row input:checked + .sn-swatch-chip { border-color: var(--sn-accent); color: var(--sn-accent); font-weight: 700; }

/* ---- Rating radios ---- */
.sn-rate-list { display: flex; flex-direction: column; gap: .75rem; }
.sn-rate-opt { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.sn-rate-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sn-rate-opt .sn-radio { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--sn-accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.sn-rate-opt .sn-radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sn-accent); opacity: 0; }
.sn-rate-opt input:checked + .sn-radio::after { opacity: 1; }
.sn-rate-opt .sn-rate-stars i { color: var(--sn-star); font-size: .8rem; }
.sn-rate-opt .sn-rate-txt { font-weight: 700; font-size: .75rem; color: var(--sn-ink); margin-inline-start: 4px; }

/* ---- Apply button (reuses .sn-btn-dark) full width ---- */
.sn-filter .sn-btn-dark { letter-spacing: .12em; }

/* =====================================================================
   Ads — video feed page (/ads). Centered stage + featured panel below.
   Brand colour via --sn-accent / --sn-ink; neutral stage chrome is literal
   (black is neutral, not a brand colour).
   ===================================================================== */

/* ---- "Ads" nav pill (highlighted, accent + NEW badge) ---- */
.sn-tab--ads { background: var(--sn-accent); color: var(--sn-on-accent); }
.sn-tab--ads:hover { background: var(--sn-accent); color: var(--sn-on-accent); opacity: .9; }
.sn-tab--ads.active { background: var(--sn-accent); color: var(--sn-on-accent); }
.sn-tab--ads.active:hover { color: var(--sn-on-accent); }
.sn-tab--ads .uil { font-size: .95rem; }
.sn-tab-new { background: var(--sn-ink); color: var(--sn-on-accent); font-size: .55rem; font-weight: 900; letter-spacing: .1em; padding: 1px 5px; border-radius: 999px; line-height: 1.4; }

/* ---- Stage ---- */
.sn-ads-stage { position: relative; box-sizing: border-box; background: #0b0b0b; padding: 24px 1rem; min-height: calc(100vh - 200px); min-height: calc(100dvh - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; }
.sn-ads-live { position: absolute; top: 1.1rem; right: 1.25rem; display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.08); color: var(--sn-accent); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.sn-ads-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sn-accent); box-shadow: 0 0 0 0 var(--sn-accent); animation: sn-ads-pulse 1.6s infinite; }
@keyframes sn-ads-pulse { 0% { box-shadow: 0 0 0 0 rgba(227,27,35,.5); } 70% { box-shadow: 0 0 0 7px rgba(227,27,35,0); } 100% { box-shadow: 0 0 0 0 rgba(227,27,35,0); } }

/* ---- Player viewport (frame + overlay nav) ---- */
.sn-ads-viewport { position: relative; width: fit-content; max-width: 94vw; }
.sn-ads-frame { position: relative; aspect-ratio: 9 / 16; width: auto; max-width: 94vw; height: min(800px, calc(100vh - 210px), calc(94vw * 16 / 9)); height: min(800px, calc(100dvh - 210px), calc(94vw * 16 / 9)); background: #000; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.sn-ads-media, .sn-ads-media video, .sn-ads-media img, .sn-ads-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sn-ads-media video, .sn-ads-media img { object-fit: cover; background: #000; }
.sn-ads-media video { cursor: pointer; }

.sn-ads-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.1rem 1.4rem; z-index: 2; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%); pointer-events: none; }
.sn-ads-creator { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.sn-ads-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sn-accent); }
.sn-ads-name { color: #fff; font-weight: 800; font-size: .85rem; }
.sn-ads-title { color: #fff; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .01em; line-height: 1.12; font-size: 1.25rem; margin: 0 0 .4rem; }
.sn-ads-desc { color: rgba(255,255,255,.82); font-size: .82rem; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.sn-ads-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); z-index: 3; }
.sn-ads-bar { display: block; height: 100%; width: 0; background: var(--sn-accent); transition: width .15s linear; }
.sn-ads-progress.indeterminate .sn-ads-bar { width: 35%; animation: sn-ads-indet 1.4s infinite ease-in-out; transition: none; }
@keyframes sn-ads-indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

.sn-ads-mute { position: absolute; top: 12px; left: 12px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sn-ads-mute:hover { background: rgba(0,0,0,.7); }

.sn-ads-nav { position: absolute; right: 12px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.sn-ads-nav:hover { background: rgba(0,0,0,.65); }
.sn-ads-prev { top: 50%; transform: translateY(-118%); }
.sn-ads-next { top: 50%; transform: translateY(18%); }

/* ---- In-frame error overlays ---- */
.sn-ads-err { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; gap: .8rem; }
.sn-ads-err-playback { background: #fff; }
.sn-ads-err-unavailable { background: #111; }
.sn-ads-err-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: rgba(227,27,35,.12); color: var(--sn-accent); }
.sn-ads-err-icon.dark { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.sn-ads-err-title { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: var(--sn-ink); margin: 0; font-size: 1.05rem; }
.sn-ads-err-title.light { color: #fff; }
.sn-ads-err-desc { color: var(--sn-muted); font-size: .82rem; margin: 0; max-width: 22rem; }
.sn-ads-err-desc.light { color: rgba(255,255,255,.7); }
.sn-ads-err-actions { display: flex; gap: .6rem; margin-top: .3rem; flex-wrap: wrap; justify-content: center; }
.sn-ads-err-btn { border: 0; border-radius: 10px; padding: 11px 20px; font-weight: 900; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sn-ads-err-btn.dark { background: var(--sn-ink); color: var(--sn-on-accent); }
.sn-ads-err-btn.accent { background: var(--sn-accent); color: var(--sn-on-accent); }

/* =====================================================================
   Product details revamp — sticky sub-nav, specifications, reviews.
   ===================================================================== */
:root {
    --sn-verified:     #00a63e;                 /* semantic "verified" green (not a brand color) */
    --sn-star:         #ffba00;
    --sn-primary-pale: color-mix(in srgb, var(--sn-accent) 9%, #fff);
}

/* ---------- Sticky section sub-nav ---------- */
.sn-subnav-wrap { position: sticky; top: 0; z-index: 30; background: var(--bs-body-bg, #fff); border-bottom: 1px solid var(--sn-border); }
.sn-subnav { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.sn-subnav .nav-item { list-style: none; }
.sn-subnav__link { display: inline-block; padding: 14px 18px; font-weight: 900; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sn-muted); text-decoration: none; border-bottom: 3px solid transparent; cursor: pointer; }
.sn-subnav__link:hover { color: var(--sn-ink); }
.sn-subnav__link.active { color: var(--sn-ink); border-bottom-color: var(--sn-accent); }

/* ---------- Specifications ---------- */
.sn-spec-section { margin-bottom: 2.5rem; }
.sn-spec-heading { font-style: italic; font-weight: 900; font-size: 1.25rem; line-height: 1.4; letter-spacing: -.02em; text-transform: uppercase; color: var(--sn-ink); margin: 0 0 1rem; }
.sn-spec-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sn-spec-card { background: var(--sn-well); border: 1px solid var(--sn-border); border-radius: 16px; padding: 24px; }
.sn-spec-card__title { font-weight: 900; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink); margin: 0 0 .5rem; }
.sn-spec-card__body { font-size: .875rem; line-height: 1.65; color: var(--sn-muted); margin: 0; }
.sn-spec-highlight { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--sn-border); border-radius: 16px; overflow: hidden; }
.sn-spec-highlight__cell { padding: 32px 16px; text-align: center; border-right: 1px solid var(--sn-border); }
.sn-spec-highlight__cell:last-child { border-right: 0; }
.sn-spec-highlight__eyebrow { font-weight: 900; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-muted-2); margin-bottom: .35rem; }
.sn-spec-highlight__value { font-weight: 900; font-size: 1.125rem; color: var(--sn-ink); }
.sn-spec-table { width: 100%; border: 1px solid var(--sn-border); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.sn-spec-table tr:nth-child(odd) { background: var(--sn-well); }
.sn-spec-table th, .sn-spec-table td { padding: 16px 32px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--sn-border); }
.sn-spec-table tr:last-child th, .sn-spec-table tr:last-child td { border-bottom: 0; }
.sn-spec-table th { width: 34%; font-weight: 900; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sn-ink); }
.sn-spec-table td { font-weight: 500; font-size: .875rem; color: var(--sn-muted); }
.sn-spec-bullets { list-style: none; margin: 0; padding: 24px 28px; background: var(--sn-primary-pale); border: 1px solid color-mix(in srgb, var(--sn-accent) 18%, #fff); border-radius: 16px; }
.sn-spec-bullets li { position: relative; padding-inline-start: 20px; margin-bottom: .65rem; font-size: .875rem; color: var(--sn-muted); }
.sn-spec-bullets li:last-child { margin-bottom: 0; }
.sn-spec-bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5rem; width: 6px; height: 6px; border-radius: 50%; background: var(--sn-accent); }
@media (max-width: 767px) {
    .sn-spec-cards, .sn-spec-highlight { grid-template-columns: 1fr; }
    .sn-spec-highlight__cell { border-right: 0; border-bottom: 1px solid var(--sn-border); }
}

/* ---------- Reviews: summary + distribution ---------- */
.sn-review-summary { display: flex; gap: 2.5rem; flex-wrap: wrap; background: var(--sn-well); border-radius: 24px; padding: 40px; margin-bottom: 1.5rem; }
.sn-review-summary__score { flex: 0 0 auto; min-width: 200px; text-align: center; padding-inline-end: 2.5rem; border-inline-end: 1px solid var(--sn-border); }
.sn-review-summary__avg { font-style: italic; font-weight: 900; font-size: 4.5rem; line-height: 1; color: var(--sn-ink); }
.sn-review-summary__stars i { color: var(--sn-star); font-size: 1.1rem; }
.sn-review-summary__based { font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink); margin-top: .75rem; }
.sn-review-summary__recommend { font-weight: 700; font-size: .75rem; color: var(--sn-muted); margin-top: .25rem; }
.sn-rating-bars { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.sn-rating-bar { display: flex; align-items: center; gap: 16px; }
.sn-rating-bar__label { flex: 0 0 56px; font-weight: 900; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sn-ink); }
.sn-rating-bar__track { flex: 1; height: 12px; background: #fff; border-radius: 999px; overflow: hidden; }
.sn-rating-bar__fill { display: block; height: 100%; background: var(--sn-accent); border-radius: 999px; }
.sn-rating-bar__pct { flex: 0 0 40px; text-align: end; font-weight: 700; font-size: .72rem; color: var(--sn-muted-2); }

/* ---------- Reviews: filter / sort ---------- */
.sn-review-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0 24px; border-bottom: 1px solid var(--sn-border); margin-bottom: 1.5rem; }
.sn-review-filter__btn { background: var(--sn-well); color: var(--sn-ink); border: 0; border-radius: 8px; padding: 8px 22px; font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sn-review-filter__btn.is-active { background: var(--sn-ink); color: var(--sn-on-accent); }
.sn-review-filter__rating { width: auto; border: 1px solid var(--sn-border); border-radius: 8px; padding: 8px 16px; font-weight: 700; font-size: .82rem; margin-inline-start: auto; }

/* ---------- Reviews: card extras ---------- */
.sn-review-card__title { font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--sn-ink); margin: .25rem 0 .5rem; }
.sn-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: .625rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sn-verified); margin: 2px 0; }
.sn-review-actions { display: flex; gap: 1.5rem; align-items: center; margin-top: 1rem; }
.sn-helpful-btn, .sn-report-btn { background: none; border: 0; padding: 0; font-weight: 900; font-size: .72rem; letter-spacing: .02em; color: var(--sn-muted-2); cursor: pointer; }
.sn-helpful-btn:hover, .sn-report-btn:hover { color: var(--sn-ink); }
.sn-helpful-btn.is-voted { color: var(--sn-accent); }

/* ---------- Buy box: stock badge + out-of-stock size (markup-ready) ---------- */
.sn-stock-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--sn-border); border-radius: 12px; }
.sn-stock-badge--limited { color: var(--sn-ink); }
.sn-stock-badge--limited::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #00c950; }
.sn-stock-badge--out { color: var(--sn-muted-2); }
/* Scoped to the buy box (product-page.php:381). Bare, this outranked the
   LISTING-card eyebrow (~L810) on source order at equal specificity and made
   every card's BRAND line render .875rem/.18em accent-red instead of
   .625rem/.1em grey. Leave L810 bare on purpose: it also supplies the
   line-height/clamp/overflow this rule never declared. */
.sn-buybox-head .sn-prod-eyebrow { font-style: italic; font-weight: 900; font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sn-accent); }
.sn-size-btn--oos { opacity: .45; pointer-events: none; position: relative; text-decoration: line-through; }
.sn-swatch--oos { opacity: .45; pointer-events: none; text-decoration: line-through; }

/* =====================================================================
   Product details — ROUND 2: top sub-nav slide panes + buy-box redesign
   ===================================================================== */
/* ---- Slide panes (one section visible at a time) ---- */
.sn-pane { display: none; }
.sn-pane.is-active { display: block; animation: sn-fade .22s ease; }
@keyframes sn-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Sub-nav, now a top sticky bar (overrides Round 1) ---- */
.sn-subnav-wrap { position: sticky; top: 0; z-index: 40; background: var(--bs-body-bg, #fff); border-bottom: 1px solid var(--sn-border); }
.sn-subnav { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.sn-subnav::-webkit-scrollbar { height: 0; }
.sn-subnav .nav-item { list-style: none; }
.sn-subnav__link { display: inline-block; padding: 16px 18px; font-weight: 900; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sn-muted); text-decoration: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.sn-subnav__link:hover { color: var(--sn-ink); }
.sn-subnav__link.active { color: var(--sn-ink); border-bottom-color: var(--sn-accent); }

/* ---- Buy box header ---- */
.sn-buybox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.sn-rating-inline { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--sn-ink); text-decoration: none; white-space: nowrap; }
.sn-rating-inline i { color: var(--sn-star); }
.sn-rating-inline:hover { color: var(--sn-ink); opacity: .85; }
.sn-prod-title { font-weight: 800; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase; color: var(--sn-ink); margin: 0 0 .4rem; }
.sn-prod-price { display: flex; align-items: baseline; gap: .6rem; margin: .85rem 0; }
.sn-prod-cur { font-weight: 900; font-size: 1.9rem; color: var(--sn-ink); }
.sn-prod-old { font-weight: 700; font-size: 1.05rem; color: var(--sn-muted-2); text-decoration: line-through; }
.sn-attr-head { font-weight: 900; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink); margin: 1.25rem 0 .55rem; }

/* ---- Color swatches (square + selection ring) ---- */
/* Buy-box swatch, scoped to .btn-group (product-page.php:528/590). Bare, this
   outranked the FILTER swatch (~L857) and turned the sidebar's 32px colour dots
   into 46px rounded squares. */
.btn-group .sn-swatch { display: inline-block; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--sn-border); cursor: pointer; margin: 0; padding: 0; }
.sn-swatch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sn-swatch.active, .sn-swatch:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sn-accent); border-color: transparent; }
.sn-swatch.sn-swatch--oos { opacity: .4; pointer-events: none; }

/* ---- Size cells ---- */
/* Buy-box size cell, scoped to .btn-group. Bare, its min-width:64px pushed the
   mobile filter drawer's 3-up .sn-size-grid past a 90vw drawer at <=355px. */
.btn-group .sn-size-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sn-border); background: #fff; font-weight: 700; font-size: .9rem; color: var(--sn-ink); cursor: pointer; margin: 0; transition: border-color .15s, background .15s, color .15s; }
.sn-size-btn input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sn-size-btn:hover { border-color: var(--sn-ink); }
.sn-size-btn.active, .sn-size-btn:has(input:checked) { border: 2px solid var(--sn-accent); background: var(--sn-primary-pale); color: var(--sn-accent); }
.sn-size-btn.sn-size-btn--oos { opacity: .5; pointer-events: none; color: var(--sn-muted-2); text-decoration: none; }
.sn-size-btn.sn-size-btn--oos::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: var(--sn-muted-2); transform: rotate(-16deg); }

/* ---- CTAs ---- */
.sn-buybox-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 1.5rem; max-width: 480px; }
.sn-buy-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 56px; border: 0; border-radius: 12px; background: var(--sn-accent); color: var(--sn-on-accent); font-weight: 900; font-size: 1rem; text-transform: none; text-decoration: none; cursor: pointer; transition: opacity .15s; }
.sn-buy-btn:hover { color: var(--sn-on-accent); opacity: .92; }
.sn-buy-btn[disabled], .sn-buy-btn:disabled { opacity: .5; cursor: not-allowed; }
.sn-wish-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; height: 56px; border: 2px solid var(--sn-ink); border-radius: 12px; background: #fff; color: var(--sn-ink); font-size: 1rem; cursor: pointer; text-decoration: none; }
.sn-wish-btn:hover { color: var(--sn-ink); }
.sn-wish-label { font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important; font-weight: 900; }
.sn-cta-mini { display: flex; gap: 10px; }
.sn-cta-mini .btn { flex: 1; }
.sn-load-more-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--sn-border); border-radius: 10px; padding: 11px 24px; background: #fff; font-weight: 700; font-size: .9rem; color: var(--sn-ink); cursor: pointer; }
.sn-load-more-btn:hover { border-color: var(--sn-ink); }

/* ---- Stock badge: overlay on the gallery column (col-* is position:relative) ---- */
.sn-stock-badge { position: absolute; left: 24px; bottom: 24px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--sn-border); border-radius: 12px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
.sn-stock-badge--limited { color: var(--sn-ink); }
.sn-stock-badge--limited::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #00c950; }
.sn-stock-badge--out { color: var(--sn-muted-2); }

@media (max-width: 991px) {
    .sn-buybox-cta { max-width: none; }
    .sn-prod-title { font-size: 1.6rem; }
}

/* =====================================================================
   Product details — ROUND 3: custom Gallery View lightbox
   ===================================================================== */
body.sn-gallery-lock { overflow: hidden; }
.sn-gallery { position: fixed; inset: 0; z-index: 1080; display: none; flex-direction: column; gap: 16px; background: rgba(10, 10, 10, .97); padding: 24px 48px; }
.sn-gallery.is-open { display: flex; }
.sn-gallery__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex: 0 0 auto; }
.sn-gallery__eyebrow { font-style: italic; font-weight: 900; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sn-accent); }
.sn-gallery__title { font-weight: 900; font-size: 1.1rem; letter-spacing: -.01em; text-transform: uppercase; color: #fff; margin-top: .15rem; }
.sn-gallery__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.sn-gallery__close:hover { background: rgba(255, 255, 255, .18); }
.sn-gallery__body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 0; }
.sn-gallery__nav { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.4rem; cursor: pointer; }
.sn-gallery__nav:hover { background: rgba(255, 255, 255, .18); }
.sn-gallery__stage { flex: 0 1 640px; align-self: stretch; max-height: 100%; background: #f1f1f2; border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden; box-shadow: 0 0 60px rgba(227, 27, 35, .12); }
.sn-gallery__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sn-gallery__thumbs { flex: 0 0 auto; display: flex; gap: 14px; justify-content: center; padding-top: 4px; overflow-x: auto; }
.sn-gallery__thumb { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 12px; border: 2px solid transparent; background: rgba(255, 255, 255, .06); padding: 6px; cursor: pointer; }
.sn-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sn-gallery__thumb.is-active { border-color: var(--sn-accent); }
@media (max-width: 767px) {
    .sn-gallery { padding: 16px; }
    .sn-gallery__body { gap: .5rem; }
    .sn-gallery__nav { width: 40px; height: 40px; flex-basis: 40px; }
    .sn-gallery__thumb { width: 60px; height: 60px; flex-basis: 60px; }
}
.sn-ads-err-btn.ghost { background: rgba(255,255,255,.12); color: #fff; }

/* ---- Loading skeleton ---- */
.sn-ads-skeleton { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.sn-ads-skel-frame { aspect-ratio: 9 / 16; width: auto; max-width: 94vw; height: min(800px, calc(100vh - 210px), calc(94vw * 16 / 9)); height: min(800px, calc(100dvh - 210px), calc(94vw * 16 / 9)); border-radius: 22px; background: linear-gradient(100deg, #1a1a1a 30%, #262626 50%, #1a1a1a 70%); background-size: 200% 100%; animation: sn-ads-shimmer 1.3s infinite; }
.sn-ads-skel-line { width: min(80vw, 340px); height: 14px; border-radius: 6px; background: linear-gradient(100deg, #1a1a1a 30%, #262626 50%, #1a1a1a 70%); background-size: 200% 100%; animation: sn-ads-shimmer 1.3s infinite; }
.sn-ads-skel-line.short { width: min(55vw, 220px); }
@keyframes sn-ads-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Empty state ---- */
.sn-ads-empty { width: min(92vw, 560px); background: #fff; border: 1px solid var(--sn-border); border-radius: 18px; padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.sn-ads-empty-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--sn-well); color: var(--sn-muted-2); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.sn-ads-empty-title { font-weight: 900; text-transform: uppercase; color: var(--sn-ink); margin: 0; }
.sn-ads-empty-desc { color: var(--sn-muted); font-size: .9rem; margin: 0; max-width: 26rem; }
.sn-ads-empty-cta { margin-top: .6rem; background: var(--sn-accent); color: var(--sn-on-accent); border-radius: 10px; padding: 12px 26px; font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.sn-ads-empty-cta:hover { color: var(--sn-on-accent); opacity: .92; }

/* ---- Featured gear & services (current clip's linked product) ---- */
.sn-ads-gear-section { margin-top: 2.5rem; margin-bottom: 1rem; }
.sn-ads-gear-card { display: flex; align-items: center; gap: 1rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--sn-border); border-radius: 16px; padding: 16px; }
.sn-ads-gear-thumb { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 12px; background: var(--sn-well); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sn-ads-gear-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sn-ads-gear-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.sn-ads-gear-eyebrow { font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-muted); }
.sn-ads-gear-eyebrow.is-service { color: var(--sn-accent); }
.sn-ads-gear-name { font-weight: 900; font-size: .95rem; color: var(--sn-ink); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sn-ads-gear-name a { color: inherit; text-decoration: none; }
.sn-ads-gear-name a:hover { color: var(--sn-accent); }
.sn-ads-gear-price { display: flex; align-items: baseline; gap: .5rem; }
.sn-ads-gear-price .sn-now { font-weight: 900; font-size: 1.05rem; color: var(--sn-ink); }
.sn-ads-gear-price .sn-was { font-size: .76rem; color: var(--sn-muted-2); text-decoration: line-through; }
.sn-ads-gear-cta { flex: 0 0 auto; }
.sn-ads-gear-cta .sn-btn-dark { width: auto; padding: 12px 22px; }
@media (max-width: 575px) {
    .sn-ads-gear-card { flex-wrap: wrap; }
    .sn-ads-gear-cta { width: 100%; }
    .sn-ads-gear-cta .sn-btn-dark { width: 100%; }
}

/* ---- Ads: seller "Visit Store" card (mirrors the gear card) ---- */
.sn-ads-seller-section { margin-top: 1.5rem; }
.sn-ads-seller-card { display: flex; align-items: center; gap: 1rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--sn-border); border-radius: 16px; padding: 16px; }
.sn-ads-seller-thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: var(--sn-well); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sn-ads-seller-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sn-ads-seller-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.sn-ads-seller-eyebrow { font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-muted); }
.sn-ads-seller-name { font-weight: 900; font-size: 1rem; color: var(--sn-ink); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sn-ads-seller-name a { color: inherit; text-decoration: none; }
.sn-ads-seller-name a:hover { color: var(--sn-accent); }
.sn-ads-seller-cta { flex: 0 0 auto; }
.sn-ads-seller-cta .sn-btn-dark { width: auto; padding: 12px 22px; }
@media (max-width: 575px) {
    .sn-ads-seller-card { flex-wrap: wrap; }
    .sn-ads-seller-cta { width: 100%; }
    .sn-ads-seller-cta .sn-btn-dark { width: 100%; }
}

/* ============================================================
   Hero slider — show the WHOLE image (like the offers band),
   never crop, and stop the neighbouring slide bleeding in.
   Overrides the fixed 500px cover-box rules that live in the
   minified, SERVED eshop-bundle-main.css (custom.css is NOT
   loaded on the front-end, so editing it does nothing).
   ============================================================ */
.slider .swiper-slide-container .slide-img,
.slider .swiper-slide-container .slide-img > a,
.slider .swiper-slide-container .slide-img picture {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
}
.slider .swiper-slide-container .slide-img img {
    display: block;
    width: 100% !important;
    height: auto !important;          /* keep aspect ratio -> whole image, like offers */
    object-fit: fill !important;      /* neutralise .image-fit cover (moot at height:auto, safety) */
}
/* Kill the horizontal wrapper padding that shifts slides and reveals the
   previous slide (0 10px …!important LTR / 0 … 10px!important RTL).
   Keep bottom room for the pagination bullets. Slider-scoped only. */
.slider .swiper-slide-container .swiper-wrapper {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 35px !important;
}

/* ============================================================
   Storefront horizontal-overflow guard.
   The theme's guard (body{overflow-x:hidden;width:100%}) lives in custom.css,
   which is NOT served on the modern front-end, so the storefront body had no
   guard and off-screen elements (notably the fixed mobile filter offcanvas)
   let the RTL page scroll/shift sideways. `clip` (not `hidden`) keeps overflow-y
   `visible` -> no scroll container -> does NOT break the sticky product-detail
   sub-nav (.sn-subnav).
   ============================================================ */
body { overflow-x: clip; }

/* The mobile filter drawer is a position:fixed, off-screen offcanvas that stays
   in the DOM on desktop (its display:none rule also lived only in custom.css),
   producing RTL horizontal overflow / the rightward page shift. Hide it at >=lg,
   where the desktop aside sidebar is shown and its trigger is d-lg-none. It stays
   available below 992px, where it is the actual filter drawer. */
@media (min-width: 992px) { #offcanvas-category { display: none; } }

/* ============================================================
   Bootstrap overflow utilities - RTL restore.

   `.overflow-auto` / `.overflow-hidden` / `.overflow-scroll` / `.overflow-visible`
   are defined ONLY in css/eshop-bundle-main.css. In Arabic, include-css.php loads
   css/rtl/eshop-bundle-main.css INSTEAD of it, and that build ships none of them -
   so all ~21 uses of these classes across the modern views silently do nothing in
   RTL, while working fine in English.

   On the product detail page that removed containment from the long description
   (`.description.overflow-auto`, which holds seller-pasted size-chart tables) and
   from the related-products swiper (`.container.overflow-hidden` plus
   `.mySwiper4.overflow-hidden`, whose wrapper is force-set to dir="rtl"), letting
   them overhang and shift the whole page sideways in Arabic only.

   spornation.css is loaded in BOTH directions and AFTER both bundles, so defining
   them here restores RTL without touching the vendor bundles. In LTR these are
   byte-identical to the bundle's own rules, so nothing changes there.

   NOTE: the bundle's `.overflow-height{height:530px}` is deliberately NOT mirrored -
   it is a theme layout class, not an overflow utility, and forcing a height in RTL
   where it currently has none would be a visual change rather than a fix.
   ============================================================ */
.overflow-auto    { overflow: auto    !important; }
.overflow-hidden  { overflow: hidden  !important; }
.overflow-scroll  { overflow: scroll  !important; }
.overflow-visible { overflow: visible !important; }

/* ============================================================
   Image loading: skeleton shimmer + fade-in.
   Driven by vanilla-lazyload (already running in eshop-bundle-js.js):
     pending -> the <img> still carries [data-src]  (lazyload removes it on load)
     loaded  -> lazyload adds .loaded
     failed  -> lazyload adds .error and leaves [data-src] in place
   Painted on the <img>'s own background box, so it works in any container
   (a / figure / div / swiper-slide) and can never cover a sibling label.
   Uses background + opacity only -- never `filter`, which product-listing.php
   sets inline on `.sn-thumb.is-oos img`. The transparent-pixel swap that makes
   this visible (product-placeholder.jpg is opaque) lives in the LazyLoad init.
   ============================================================ */
img.lazy[data-src]:not(.error) {
    background-color: var(--sn-pill-bg-h);
    background-image: linear-gradient(100deg, var(--sn-pill-bg-h) 30%, var(--sn-well) 50%, var(--sn-pill-bg-h) 70%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: sn-img-shimmer 1.3s linear infinite;
}
img.lazy.loaded { animation: sn-img-in .45s ease-out both; }

@keyframes sn-img-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes sn-img-in      { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    img.lazy[data-src]:not(.error),
    img.lazy.loaded { animation: none; }
}

/* =====================================================================
   MOBILE FILTER DRAWER
   #offcanvas-category is width:320px; max-width:90vw in BOTH
   product-listing.php and seller-details.php (same id, one rule covers
   both). .sn-filter's 32px padding ate 64px of that, leaving 224px --
   and 192px on a 320px phone, where the 3-up .sn-size-grid track fell
   below the buy-box .sn-size-btn min-width and overflowed the drawer.
   No media query needed: the desktop <aside> never carries this id, and
   the drawer is already display:none at >=992px.
   ===================================================================== */
#offcanvas-category .sn-filter         { padding: 18px; border: 0; border-radius: 0; box-shadow: none; gap: 1.5rem; }
#offcanvas-category .sn-filter-head h2 { font-size: 1rem; }
#offcanvas-category .sn-fset-body    { gap: 1rem; }

/* =====================================================================
   SMALL-SCREEN TYPE SCALE

   Before this block, every @media in this file was scoped to the header
   bar, the footer, the promo band, product-detail, the gallery or /ads.
   Nothing touched the product card, the spec tables, the review summary,
   the filter rail or the home headings -- so those rendered at full
   desktop size inside a ~330px viewport.

   Card budget: cards go col-6 below 768px (product-listing.php:354,
   home.php:143, packages.php:105, seller-details.php:416). The text
   width that must hold eyebrow + name + rating + price + CTA is roughly
   0.5*vw - 64px:  375px -> ~122px,  320px -> ~95px. The desktop scale
   needs ~172px for the price row alone, which is why "SAR 169.00" was
   breaking between "SAR" and "169.00".

   NOTE .g-4 is 1rem (16px) in this theme, not the Bootstrap default 24px.

   No 767.98px tier on purpose: at 576px the container snaps to 540px, so
   a col-6 card is WIDER (~205px of text) than at 575px -- a tablet tier
   would shrink type exactly where there is the most room.

   Card rules are scoped to .sn-card deliberately: .sn-btn-dark is shared
   with the filter Apply button and the /ads cards, which are not 122px.
   ===================================================================== */
@media (max-width: 575.98px) {

    /* ---------- Product card ---------- */
    /* Padding first -- the cheapest width per pixel. */
    .sn-card                      { padding: 14px; border-radius: 14px; gap: 12px; }
    .sn-card .sn-thumb            { padding: 12px; border-radius: 10px; }
    /* `right`, NOT inset-inline-end: the base .sn-fav rule is physical
       `right`, so a logical override would apply on the OTHER side in RTL
       and both would win. Match the base property exactly. */
    .sn-card .sn-fav              { top: 8px; right: 8px; width: 30px; height: 30px; font-size: .82rem; }
    .sn-card .sn-badge            { left: 8px; bottom: 8px; font-size: 8px; padding: 2px 6px; letter-spacing: .06em; }
    .sn-card .sn-meta             { gap: 8px; }

    .sn-card .sn-prod-eyebrow     { font-size: .575rem; letter-spacing: .06em; }

    /* 2 lines, not 1 -- a 1-line clamp at 12.8px in ~122px truncates most
       real product names to ~11 characters ("RIDGE TEE T-..."). The extra
       line is free: .sn-meta{flex:1} + .sn-card-cta{margin-top:auto} keep
       every Add-To-Cart in a row baseline-aligned regardless. */
    .sn-card .sn-name             { font-size: .8rem; line-height: 1.35; -webkit-line-clamp: 2; }

    .sn-card .sn-rate             { gap: .3rem; font-size: .65rem; }
    .sn-card .sn-rate .sn-stars i { font-size: .65rem; }

    /* THE reported bug. .sn-price sets no white-space, so "SAR 169.00" was
       one text run and the browser broke it at the space. nowrap makes a
       price token unbreakable; flex-wrap lets the struck-through OLD price
       drop to its own line instead. One line wherever it fits (575px, and
       every card with no .sn-was at all), a clean stack where it does not,
       never a split value. Both declarations are required. */
    .sn-card .sn-price            { flex-wrap: wrap; column-gap: .4rem; row-gap: 0; }
    .sn-card .sn-price .sn-now    { font-size: .95rem; white-space: nowrap; }
    .sn-card .sn-price .sn-was    { font-size: .7rem;  white-space: nowrap; }

    /* "ADD TO CART" at 11px/.04em is ~81px, + a 15px icon + .35rem gap +
       8px side padding = ~123px, inside the 148px worst case. Wrapping is
       left enabled as the safety valve for longer locale strings. */
    .sn-card .sn-btn-dark         { padding: 11px 8px; gap: .35rem; font-size: .6875rem; letter-spacing: .04em; line-height: 1.25; }
    .sn-card .sn-btn-dark i       { font-size: .95rem; }

    /* Out-of-stock overlay. Declared inline in product-listing.php and
       seller-details.php at .85rem/.04em; "OUT OF STOCK" is ~105px against
       ~115px of thumb width at col-6, so it clipped. */
    .sn-thumb .oos-overlay        { font-size: .62rem; letter-spacing: .02em; }

    /* ---------- Home ---------- */
    .sn-section           { margin-top: 2.25rem; }
    .sn-head              { margin-bottom: 1.25rem; gap: .5rem; }
    .sn-head .sn-sub      { font-size: .8rem; }
    /* 1.5rem at .14em tracking is ~560px for a 28-char heading -- 3 lines
       on a phone. Also reached by ads.php:79. */
    .sn-eyebrow .sn-title { font-size: 1.05rem; letter-spacing: .08em; }
    .sn-link              { font-size: .68rem; letter-spacing: .08em; }

    /* Brand tiles are row-cols-2 here, so the tile is ~159px wide while the
       logo box stayed 120px tall. */
    .sn-brand             { padding: 16px 10px; }
    .sn-brand img         { height: 72px; }
    .sn-brand span        { font-size: .55rem; letter-spacing: .08em; }

    /* Service cards (home.php:1026) are col-6 here too, never tuned. */
    .sn-svc-body          { padding: 14px; gap: 10px; }
    .sn-svc-name          { font-size: .8rem; letter-spacing: .03em; }
    .sn-svc-desc          { font-size: .7rem; }
    .sn-svc .sn-btn-outline { padding: 9px 6px; font-size: .6rem; letter-spacing: .05em; }
    .sn-top-rated         { font-size: 7px; padding: 2px 6px; }

    /* The 991 block shrinks .sn-app-copy h2 but never its paragraph, and
       the h2 floor of 2rem carries -2px tracking that collides at 32px. */
    .sn-app-inner         { padding: 1.5rem; }
    .sn-app-copy h2       { letter-spacing: -.02em; }
    .sn-app-copy p        { font-size: .9rem; }

    /* ---------- Listing results header + sort ---------- */
    /* min-width:0 releases the 160px floor so the select fills its dropped
       row instead of leaving ~170px of dead space beside it. */
    .sn-results                            { gap: .75rem; }
    .sn-sort                               { width: 100%; gap: .5rem; }
    .sn-sort > label                       { font-size: .68rem; letter-spacing: .06em; }
    .sn-sort .form-select, .sn-sort select { flex: 1 1 auto; min-width: 0; height: 40px; font-size: .8rem; }
    .sn-listing-head                       { padding: 1.5rem 0 1rem; }
    .sn-empty                              { padding: 2.5rem 1rem; }

    /* packages.php renders the filter rail INLINE (col-12 on mobile), not in
       the offcanvas, so the #offcanvas-category rule above cannot reach it. */
    .sn-filter            { padding: 18px; gap: 1.5rem; }
    .sn-filter-head h2    { font-size: 1rem; }
    .sn-fset-body         { gap: 1rem; }

    /* ---------- Product detail: buy box ---------- */
    /* Only .sn-prod-title was handled (2rem -> 1.6rem at <=991). The PRICE
       was not: .sn-prod-cur at 1.9rem (~30px) + .sn-prod-old at 1.05rem +
       a .6rem gap needs ~270px, and the buy-box column is only ~290px at
       320px. Same nowrap+wrap treatment as the card price. */
    .sn-prod-title        { font-size: 1.35rem; }
    .sn-prod-price        { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; margin: .6rem 0; }
    .sn-prod-cur          { font-size: 1.4rem; white-space: nowrap; }
    .sn-prod-old          { font-size: .9rem;  white-space: nowrap; }
    /* .sn-rating-inline is white-space:nowrap and the eyebrow is uppercase
       at .18em, so without wrap the two overflow the row together. */
    .sn-buybox-head       { flex-wrap: wrap; gap: .35rem .75rem; }
    .sn-buybox-head .sn-prod-eyebrow { font-size: .7rem; letter-spacing: .1em; }
    .sn-rating-inline     { font-size: .75rem; }
    .sn-buy-btn,
    .sn-wish-btn          { height: 48px; font-size: .875rem; }
    .sn-subnav__link      { padding: 12px 12px; font-size: .7rem; letter-spacing: .04em; }
    .sn-stock-badge       { left: 12px; bottom: 12px; font-size: .62rem; padding: 5px 10px; letter-spacing: .05em; }
    .sn-attr-head         { font-size: .7rem; margin: 1rem 0 .45rem; }

    /* ---------- Product detail: specifications ---------- */
    /* .sn-spec-table cells were 16px/32px, so with th{width:34%} a label
       column of 112px had only ~48px left for text -- every label wrapped
       to 3-5 lines. This is the worst padding offender on the page. */
    .sn-spec-heading            { font-size: 1rem; }
    .sn-spec-card               { padding: 16px; }
    .sn-spec-card__title        { font-size: .75rem; letter-spacing: .06em; }
    .sn-spec-highlight__cell    { padding: 18px 12px; }
    .sn-spec-highlight__value   { font-size: 1rem; }
    .sn-spec-table th,
    .sn-spec-table td           { padding: 10px 12px; font-size: .8rem; }
    .sn-spec-table th           { font-size: .7rem; letter-spacing: .03em; }
    .sn-spec-bullets            { padding: 16px 18px; }

    /* ---------- Product detail: reviews ---------- */
    /* 4.5rem (72px) was the largest type on the site with no override at
       any width. min-width:200px + a 2.5rem inline-end padding needs 240px
       inside a ~250px card, which pushed .sn-rating-bars (flex-basis 320px)
       onto its own row and left the score's border-inline-end floating. */
    .sn-review-summary          { padding: 20px; gap: 1.25rem; border-radius: 16px; }
    .sn-review-summary__score   { min-width: 0; padding-inline-end: 0; border-inline-end: 0; }
    .sn-review-summary__avg     { font-size: 2.5rem; }
    .sn-review-summary__stars i { font-size: .9rem; }
    .sn-rating-bars             { flex: 1 1 100%; }
    .sn-rating-bar              { gap: 10px; }
    .sn-review-filter           { padding: 12px 0 16px; gap: 8px; }
    .sn-review-filter__btn      { padding: 7px 14px; font-size: .65rem; letter-spacing: .05em; }
    .sn-review-card__title      { font-size: .95rem; }
    /* The tap target was text-height only (~12px); pad it toward 44px. */
    .sn-review-actions          { gap: 1rem; }
    .sn-helpful-btn,
    .sn-report-btn              { padding: 8px 0; }

    /* ---------- Product detail: gallery lightbox ---------- */
    /* The 767 block reduced nav and thumbs but never the stage padding. */
    .sn-gallery__stage    { padding: 14px; border-radius: 16px; }
    .sn-gallery__head     { flex-wrap: wrap; gap: .35rem; }
    .sn-gallery__eyebrow  { letter-spacing: .12em; }
    .sn-gallery__title    { font-size: .9rem; }

    /* ---------- Header burger ---------- */
    /* .sn-act drops to 38px at this width while the burger stayed 42px. */
    .sn-icon-btn          { width: 38px; height: 38px; font-size: 1.05rem; }

    /* ---------- Sign-in interstitial ---------- */
    .sn-lr-icon           { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: 1rem; }
    .sn-lr-title          { font-size: 1.2rem; }
    .sn-lr-body           { font-size: .875rem; margin-bottom: 1.25rem; }

    /* ---------- Footer ---------- */
    /* nowrap survived the 575.98 block, so a long Arabic column label
       ("المتاجر ومقدمو الخدمات") could not break and overflowed. */
    .sn-foot-col h4       { white-space: normal; font-size: .875rem; }
    .sn-social a          { width: 36px; height: 36px; font-size: .95rem; }
    .sn-pay i             { font-size: 1.5rem; }
    .sn-foot-legal        { flex: 1 1 100%; }
    .sn-foot-legal-icon   { width: 38px; height: 38px; font-size: 1.1rem; }
    .sn-foot-bottom       { margin-top: 2rem; padding-top: 1.5rem; gap: 1rem; }

    /* ---------- /ads ---------- */
    .sn-ads-stage         { padding: 16px .75rem; }
    .sn-ads-title         { font-size: .95rem; }
    .sn-ads-nav           { width: 36px; height: 36px; font-size: 1.1rem; }
    .sn-ads-err           { padding: 1rem; }
    .sn-ads-err-icon      { width: 48px; height: 48px; font-size: 1.2rem; }
    .sn-ads-err-title     { font-size: .9rem; }
    .sn-ads-empty         { padding: 2rem 1.25rem; }
    .sn-ads-empty-icon    { width: 60px; height: 60px; font-size: 1.5rem; }
    .sn-ads-empty-title   { font-size: 1.15rem; }
    .sn-ads-gear-thumb    { width: 64px; height: 64px; }
    .sn-ads-gear-price .sn-now { font-size: .95rem; }
    .sn-ads-seller-thumb  { width: 48px; height: 48px; }
    .sn-ads-seller-name   { font-size: .875rem; }
}

/* 320-400px (iPhone SE and similar).
   MUST stay below the 575.98 block -- equal specificity, source order wins. */
@media (max-width: 400px) {
    .sn-card                      { padding: 10px; gap: 10px; }
    .sn-card .sn-thumb            { padding: 8px; }
    .sn-card .sn-meta             { gap: 6px; }
    .sn-card .sn-prod-eyebrow     { font-size: .55rem; letter-spacing: .03em; }
    .sn-card .sn-name             { font-size: .75rem; }
    .sn-card .sn-rate             { gap: .25rem; font-size: .6rem; }
    .sn-card .sn-rate .sn-stars i { font-size: .6rem; }
    .sn-card .sn-price .sn-now    { font-size: .875rem; }
    .sn-card .sn-price .sn-was    { font-size: .65rem; }
    .sn-card .sn-btn-dark         { padding: 10px 6px; gap: .3rem; font-size: .625rem; letter-spacing: .02em; }
    .sn-card .sn-btn-dark i       { font-size: .85rem; }
    .sn-thumb .oos-overlay        { font-size: .56rem; }

    .sn-svc-body                  { padding: 10px; }
    .sn-svc-name                  { font-size: .75rem; }
    .sn-brand img                 { height: 60px; }

    .sn-prod-title                { font-size: 1.2rem; }
    .sn-prod-cur                  { font-size: 1.25rem; }
    .sn-review-summary__avg       { font-size: 2.1rem; }
    .sn-spec-table th,
    .sn-spec-table td             { padding: 9px 10px; font-size: .75rem; }
    .sn-icon-btn                  { width: 34px; height: 34px; font-size: 1rem; }
}


/* ==========================================================================
   Breadcrumb — RTL mirroring
   --------------------------------------------------------------------------
   style.css is loaded WITHOUT the rtl/ prefix (include-css.php:14), so its
   physical padding and its right-pointing chevron (uil-angle-right) leak into
   Arabic. rtl/eshop-bundle-main.css ships no breadcrumb rules at all.

   NOTE: <html> carries dir="rtl" ONLY on landing routes (template.php:147), so
   a [dir="rtl"] selector never matches a marketplace page. The reliable hook is
   <body data-is-rtl="1"> (template.php:558).
   ========================================================================== */
body[data-is-rtl="1"] .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: .5rem;
}

body[data-is-rtl="1"] .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    padding-left: .5rem;
    content: "\e92f";   /* uil-angle-left */
}

/* ---------- Service poster cards ----------
   A service listing shows a generated 1080x1080 brand poster instead of a product
   photo. These containers were built for arbitrary seller photos, and most of them
   normalise with object-fit / background-size: cover - which CROPS. Cropping a photo
   is harmless (you still see the shoe); cropping the poster cuts off the footer bar,
   which is the whole point of the card.

   Container SIZES are deliberately untouched, so nothing on any page reflows: the
   poster simply letterboxes inside whatever box it is given instead of being sliced.
   Applied per element via product_card_is_poster() - see
   application/helpers/service_card_helper.php. */
.sn-poster-img { object-fit: contain !important; }

/* .sn-thumb is already 1:1, so the poster fills it exactly once the well background
   and the 22px inset meant for a floating product shot are removed. */
.sn-thumb--poster { padding: 0 !important; background: none !important; }
.sn-thumb--poster img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }

/* home.php style_services paints a 16:9 CSS background with a dark scrim over it.
   That scrim exists to keep white text readable on a photo; over the poster it just
   greys the artwork out. This is also the ONE surface with no <img> to hang an
   onerror fallback on, so it must be right here. */
.sn-svc-img--poster { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
.sn-svc-img--poster::after { display: none !important; }

/* Password show/hide toggle -------------------------------------------------
   .password-field is the positioning anchor for the absolutely-positioned
   .password-toggle (style.css:33504). The sign-in and sign-up fields borrow that
   from Bootstrap's .form-floating, but My Account -> change password sits in a
   plain .form-group, which is NOT positioned - so declare it here and the
   component becomes self-sufficient wherever it is used.

   RTL: style.css owns .password-toggle{right:.75rem} and include-css.php:14 loads
   that file WITHOUT the rtl/ prefix, so the mirrored rule in rtl/style.css never
   loads and the eye stays pinned right in Arabic. Override it here instead -
   spornation.css is loaded unprefixed in BOTH directions.
   Use body[data-is-rtl="1"] - [dir="rtl"] is inert on marketplace pages, which
   only ever get a dir attribute on landing routes (template.php:558).

   CORRECTION (Session 130): earlier notes claimed swapping line 14 to rtl/style.css
   would break the header nav, because d-xxl-* supposedly only resolves via the
   unprefixed file. That is FALSE. rtl/style.css is a genuine full mirror - 907,122
   vs 907,580 bytes, 10,405 vs 10,409 rules - and carries d-xxl-* and d-xl-* at
   identical counts. The real stub is rtl/eshop-bundle-main.css (452 rules against
   12,685; its content is actually the bootstrap-star-rating plugin sheet). Line 14
   is still left alone, but because a 907KB cascade swap needs a full Arabic
   regression pass - NOT because of d-xxl-*. */
.password-field { position: relative; }
body[data-is-rtl="1"] .password-toggle { right: auto; left: 0.75rem; }

/* RTL: the Bootstrap-5 logical utilities are compiled PHYSICAL in the style.css that
   Arabic actually loads - see the correction above. Three matter for the auth modals:

     .text-start        -> text-align: left  !important   (style.css:13467)
     .text-end          -> text-align: right !important
     .modal .btn-close  -> position:absolute; right:.7rem  (style.css:40341)

   So in Arabic the sign-in / sign-up headings (footer.php:422-423 and 529-530 carry
   .text-start) were force-aligned LEFT, and every Bootstrap-5 modal close button sat
   in the physical top-right. body{direction:rtl} cannot flip either one: the first is
   an !important physical utility, the second is absolutely positioned.

   .text-* needs !important here to beat the utility's own. .modal .btn-close does not,
   because spornation.css loads after style.css at equal specificity.

   ⚠️ NOT touched: the 4 class="close" (Bootstrap 4) buttons. rtl/bootstrap.min.css IS
   loaded and already mirrors .close{float:left} correctly, so overriding those would
   flip them BACK. Only the 21 .btn-close (Bootstrap 5) instances are broken.

   Knock-on, and intended: .text-end is also used on cart/checkout price columns, so in
   Arabic those totals now align left - correct RTL, but a visible change. */
body[data-is-rtl="1"] .modal .btn-close { right: auto; left: 0.7rem; }
body[data-is-rtl="1"] .text-start { text-align: right !important; }
body[data-is-rtl="1"] .text-end { text-align: left !important; }

/* =========================================================================
   intl-tel-input (storefront auth modals)

   Plugin is v8.4.7, jQuery-style, with the OLD class names
   (.intl-tel-input / .iti-flag / .country-list / .selected-flag) - there is
   no .iti__* or bare .iti anywhere. Its CSS is baked into eshop-bundle.css,
   which is exactly why the Session 97 fix never reached the storefront: that
   fix lives in assets/admin/custom/custom.css, a panel-only file.

   Two instances exist, both in footer.php's auth modal:
     #phone-number            (sign-up)
     #forgot_password_number  (forgot password)

   Deliberately NOT scoped to .auth-modal: on a mobile UA the plugin sets
   dropdownContainer = "body" and DETACHES the list out of the modal. Bare
   selectors cover both cases, and the stock .iti-mobile rules are (0,3,0) so
   they still beat these (0,2,0) ones and keep the full-screen mobile UX.
   ========================================================================= */

/* FLAGS REMOVED - deliberately, because the sprite is not reliably present on
   the deployed host.

   In the repo ../img/flags.png is a valid 5652x15 PNG (IHDR + IDAT + IEND, all
   CRCs good) and is tracked by git with correct casing - but it 404s in
   production, so it is simply not being uploaded. On top of that the stock
   hi-DPI rule in eshop-bundle.css points at ../images/flags@2x.png, which
   exists nowhere at all (the modern theme uses img/, not images/). Both paths
   therefore fall through to the stock background-color:#dbdbdb and render a
   grey box in place of every flag.

   Rather than keep shipping that, drop the flag column entirely. The picker
   still reads country name + dial code, which is everything the control needs,
   and it can no longer break on a missing asset.

   TO RESTORE FLAGS: upload the sprite to assets/front_end/modern/img/, delete
   the two display:none rules below, and re-add the hi-DPI override. It needs
   BOTH declarations - the stock rule sets background-size:5630px (the 2x
   sprite's width) against our real 5652px one, which drifts each flag
   progressively along the strip (Germany ~5px, Saudi Arabia ~17px, Zimbabwe
   ~22px - past a whole 20px flag, i.e. it renders the wrong country):

       @media only screen and (-webkit-min-device-pixel-ratio: 2),
              only screen and (min-resolution: 192dpi),
              only screen and (min-resolution: 2dppx) {
           .iti-flag {
               background-image: url("../img/flags.png");
               background-size: 5652px 15px;
           }
       }

   No !important needed: nothing in the stock CSS sets display on either
   element, and .intl-tel-input .country-list .flag-box is (0,3,0) so it beats
   the stock .country-list .flag-box{display:inline-block} at (0,2,0). */
.intl-tel-input .selected-flag .iti-flag { display: none; }
.intl-tel-input .country-list .flag-box  { display: none; }

/* WIDGET LAYOUT. The plugin wraps the <input> in .intl-tel-input, which then
   becomes the flex item of the Bootstrap .input-group in footer.php. The
   input is now a GRANDCHILD, so Bootstrap's
   `.input-group > .form-control{flex:1 1 auto;width:1%}` no longer matches
   it. Move that job onto the wrapper. */
.input-group > .intl-tel-input { flex: 1 1 auto; width: 1%; min-width: 0; }
.intl-tel-input > .form-control { width: 100%; }

/* DROPDOWN. Stock v8.4.7 gives .country-list white-space:nowrap with no width,
   so it sizes to the longest country name (~750px); and it is position:absolute
   with BOTH left and right auto, so in Arabic the inline-start edge pins to the
   RIGHT and the list grows leftward - straight out of the modal and across the
   viewport. Pinning left:0 fixes that in both directions, because
   .allow-dropdown puts .flag-container at left:0 PHYSICALLY regardless of
   direction. */
.intl-tel-input .country-list {
    left: 0;
    right: auto;
    width: 100%;
    min-width: 240px;
    max-width: calc(100vw - 48px);
    max-height: 240px;
    margin: 4px 0 0;
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    /* Rows are flag -> Latin country name -> +dial code. Keeping the list LTR
       preserves that order on Arabic pages and makes text-align:left correct,
       instead of RTL-flipping four physical properties. */
    direction: ltr;
    text-align: left;
    background-color: #fff;
    border: 1px solid var(--sn-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    z-index: 5;
}
.intl-tel-input .country-list .country {
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.35;
}
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover { background-color: var(--sn-pill-bg-h); }
.intl-tel-input .country-list .country .country-name { color: var(--sn-ink); }
.intl-tel-input .country-list .country .dial-code { color: var(--sn-muted); }
.intl-tel-input .country-list .divider {
    border-bottom-color: var(--sn-border);
    margin: 6px 0;
    padding: 0;
}

/* SELECTED DIAL CODE + ARROW.

   Two stock rules fight here once the flag is gone:
     .selected-dial-code{padding-left:28px} - a gutter that existed only to
       clear the absolutely-positioned flag, now dead space; and
     .iti-arrow{right:6px} - absolutely positioned, with nothing reserving room
       for it, so the dial code text runs underneath it.
   The second is the reported "the dropdown arrow is blocked by the number".
   Reserve space on the right instead, and reclaim the dead flag gutter.

   Physical sides on purpose: .allow-dropdown pins .flag-container to left:0
   and .iti-arrow to right:6px in BOTH directions, so these physical values are
   already correct. Flipping either for RTL would break the widget.

   The width override repeats the .iti-sdc-N classes because the stock fixed
   widths (70/86/93/94px, sized for flag + code) are (0,4,0) selectors - a
   (0,3,0) one would silently lose. */
.intl-tel-input.allow-dropdown.separate-dial-code .selected-flag {
    width: auto;
    background-color: var(--sn-well);
    border-right: 1px solid var(--sn-border);
    border-radius: 6px 0 0 6px;
}
.intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-2 .selected-flag,
.intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-3 .selected-flag,
.intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-4 .selected-flag,
.intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-5 .selected-flag { width: auto; }
.intl-tel-input.allow-dropdown.separate-dial-code .selected-dial-code {
    padding-left: 4px;
    padding-right: 22px;
}
.intl-tel-input.allow-dropdown.separate-dial-code .flag-container:hover .selected-flag {
    background-color: var(--sn-pill-bg-h);
}
.intl-tel-input .selected-flag .iti-arrow { border-top-color: var(--sn-muted); }
.intl-tel-input .selected-flag .iti-arrow.up { border-bottom-color: var(--sn-muted); }

/* =====================================================================
   Chat — My Account -> Chat (.sn-chat--page) and the floating panel
   (.sn-chat--floating, rendered inside #chat-iframe). Markup lives in
   pages/_chat_sidebar_list.php + pages/_chat_thread.php.

   The chat JS and stisla's $.chatCtrl still drive the old eShop markup
   (#mychatbox2 / .chat-item / .chat-text ...), and eshop-bundle-main.css
   styles that markup with !important rules keyed on .chat-box,
   .chat-theme-light, .chat-card-header, .chat-scroll and .theme-inputs.
   Those are why several rules below use an id plus !important — do not
   "tidy" them away or the old 9px header line-height, 412px fixed thread
   height and always-on scrollbars come back.

   Two runtime facts the selectors depend on:
   - The presence poll REMOVES the `fa` class from offline dots, so the dot
     is drawn in CSS (font-size:0) and targeted structurally
     (.sn-chat-avatar > i), never by its FontAwesome classes.
   - jQuery .show()/.hide() drives .go-to-bottom-btn and .chat_loader, so
     neither rule here sets `display`.
   ===================================================================== */
.sn-chat {
    --sn-chat-online: var(--sn-verified, #00a63e);
    --sn-chat-surface: #fff;
    --sn-chat-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
    color: var(--sn-ink);
}

/* ---------- Page shell (centred two-pane card) ---------- */
.sn-chat--page { max-width: 1100px; margin-inline: auto; }
.sn-chat--page .sn-chat-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    height: min(720px, calc(100vh - 140px));
    min-height: 480px;
    background: var(--sn-chat-surface);
    border: 1px solid var(--sn-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(17, 17, 17, .06);
}
.sn-chat--page .sn-chat-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--sn-chat-surface);
    border-inline-end: 1px solid var(--sn-border);
}
.sn-chat--page .sn-chat-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--sn-well);
}

/* ---------- Sidebar ---------- */
.sn-chat-sidebar__head {
    flex: 0 0 auto;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--sn-border);
}
.sn-chat-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--sn-ink);
}
.sn-chat-sidebar__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 14px;
}

/* Search pill (select2 multiple, default theme). */
.sn-chat-search .select2-container { width: 100% !important; }
.sn-chat-search .select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 4px 14px 4px 38px;
    border: 1px solid var(--sn-border);
    border-radius: 999px;
    background: var(--sn-well) var(--sn-chat-search-icon) no-repeat 14px 50% / 16px 16px;
    cursor: text;
}
body[data-is-rtl="1"] .sn-chat-search .select2-container--default .select2-selection--multiple {
    padding: 4px 38px 4px 14px;
    background-position: calc(100% - 14px) 50%;
}
.sn-chat-search .select2-container--default.select2-container--focus .select2-selection--multiple,
.sn-chat-search .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--sn-accent);
    background-color: #fff;
}
.sn-chat-search .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}
.sn-chat-search .select2-container .select2-search--inline { flex: 1 1 auto; }
.sn-chat-search .select2-container .select2-search--inline .select2-search__field {
    width: 100% !important;
    height: 32px;
    margin: 0;
    background: transparent;
    font-size: .875rem;
    color: var(--sn-ink);
}
.sn-chat-search .select2-container .select2-search--inline .select2-search__field::placeholder { color: var(--sn-muted-2); }

/* Sections */
.sn-chat-section { padding: 10px 4px 2px; }
.sn-chat-section + .sn-chat-section { margin-top: 8px; border-top: 1px solid var(--sn-border); }
.sn-chat-section__title {
    margin: 4px 8px 2px;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sn-muted);
}
.sn-chat-section__hint {
    margin: 0 8px 6px;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--sn-muted-2);
}
.sn-chat-empty {
    margin: 4px 8px 8px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--sn-muted);
}
.sn-chat-list { list-style: none; margin: 4px 0 0; padding: 0; }
.sn-chat-list > li { margin: 0; }

/* Contact rows */
.sn-chat .chat-person {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--sn-ink);
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease;
}
.sn-chat .chat-person:hover { background: var(--sn-well); }
.sn-chat .chat-person.active { background: var(--sn-primary-pale, var(--sn-well)); }
.sn-chat .chat-person.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--sn-accent);
}
.sn-chat-person__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.sn-chat-person__name,
.sn-chat-person__sub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sn-chat-person__name { font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--sn-ink); }
.sn-chat-person__sub { font-size: .78rem; line-height: 1.35; color: var(--sn-muted); }
.sn-chat .chat-person.new-msg-rcv .sn-chat-person__name { font-weight: 900; }
.sn-chat .chat-person.new-msg-rcv .sn-chat-person__sub { font-weight: 600; color: var(--sn-ink); }
.sn-chat .chat-person .badge-chat {
    float: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin: 0;
    margin-inline-start: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--sn-accent);
    color: var(--sn-on-accent);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
}

/* Avatars + presence dot */
.sn-chat-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sn-well);
    color: var(--sn-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.sn-chat-avatar > img {
    width: 100%;
    height: 100%;
    border: 1px solid var(--sn-border);
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}
.sn-chat-avatar__initial { text-transform: uppercase; }
.sn-chat-avatar--support { background: var(--sn-primary-pale, var(--sn-well)); color: var(--sn-accent); }
.sn-chat-avatar > i {
    position: absolute;
    bottom: 1px;
    inset-inline-end: 1px;
    display: block;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #c5c9d0;
    font-size: 0 !important;
    line-height: 0;
    color: transparent !important;
}
.sn-chat-avatar > i::before { content: none !important; }
.sn-chat-avatar > i.text-success { background: var(--sn-chat-online); }
.sn-chat-avatar > i.typing-loader { background: var(--sn-accent); animation: sn-chat-typing 1s ease-in-out infinite; }
@keyframes sn-chat-typing {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: .55; }
}

/* ---------- "Select a conversation" placeholder (page only) ---------- */
.sn-chat-placeholder {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--sn-muted);
}
.sn-chat-placeholder__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--sn-primary-pale, #fff);
    color: var(--sn-accent);
    font-size: 2rem;
}
.sn-chat-placeholder__title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--sn-ink); }
.sn-chat-placeholder__text { max-width: 320px; margin: 0; font-size: .875rem; line-height: 1.55; }

/* ---------- Conversation pane ---------- */
.sn-chat-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
#mychatbox2.chat-box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: var(--sn-chat-surface) !important;
    box-shadow: none;
}
#mychatbox2 .sn-chat-thread-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px !important;
    padding: 12px 18px !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid var(--sn-border) !important;
    border-radius: 0;
    background: var(--sn-chat-surface);
}
#mychatbox2 .sn-chat-thread-head .sn-chat-avatar { width: 42px; height: 42px; font-size: .95rem; }
.sn-chat-thread-head__meta { display: flex; flex-direction: column; min-width: 0; }
#chat_title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--sn-ink);
}
#chat_online_status { margin-top: 2px; font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--sn-muted); }
#chat_online_status.text-success { color: var(--sn-chat-online) !important; }
#chat_online_status i { margin-inline-end: 4px; font-size: 8px; vertical-align: 2px; }
#chat_typing { margin-inline-start: 6px; color: var(--sn-accent) !important; }

.sn-chat-back,
.sn-chat-back:hover {
    text-decoration: none;
    color: var(--sn-ink);
}
.sn-chat-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-inline-start: -6px;
    border-radius: 50%;
    font-size: 1.35rem;
    cursor: pointer;
}
.sn-chat-back:hover { background: var(--sn-well); }
body[data-is-rtl="1"] .sn-chat-back i { display: inline-block; transform: scaleX(-1); }
.sn-chat--page .sn-chat-back { display: none; }

/* Message list */
#chat-box-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    padding: 18px 18px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--sn-well) !important;
    background-image: none !important;
}
#chat-box-content::-webkit-scrollbar,
.sn-chat-sidebar__body::-webkit-scrollbar { width: 6px; }
#chat-box-content::-webkit-scrollbar-track,
.sn-chat-sidebar__body::-webkit-scrollbar-track { background: transparent; }
#chat-box-content::-webkit-scrollbar-thumb,
.sn-chat-sidebar__body::-webkit-scrollbar-thumb { border: 0; border-radius: 6px; background: rgba(17, 17, 17, .18); }

#chat-box-content .chat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 10px;
}
#chat-box-content .chat-item.chat-right { align-items: flex-end; }
#chat-box-content .chat-item > .chat-avtar { display: none !important; }
#chat-box-content .chat-item .chat-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(78%, 520px);
    margin: 0 !important;
    text-align: start !important;
}
#chat-box-content .chat-item.chat-right .chat-details { align-items: flex-end; }
#chat-box-content .chat-item .chat-details .chat-text {
    display: inline-block;
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 16px;
    border-end-start-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .06);
    color: var(--sn-ink);
    font-size: .9rem;
    line-height: 1.5;
    text-align: start !important;
    white-space: normal;
    overflow-wrap: anywhere;
}
#chat-box-content .chat-item.chat-right .chat-details .chat-text {
    padding-right: 28px; /* room for the delete toggle, which is physically right:8px */
    border-end-start-radius: 16px;
    border-end-end-radius: 4px;
    background: var(--sn-accent);
    color: var(--sn-on-accent);
}
#chat-box-content .chat-item.chat-right .chat-text a { color: inherit; text-decoration: underline; }
#chat-box-content .chat-item .chat-text img { max-width: 100%; border-radius: 8px; }
#chat-box-content .chat-image-view { display: inline-block; border-radius: 10px; background: rgba(0, 0, 0, .06); }
#chat-box-content .chat-item.chat-right .delete-msg {
    top: 6px;
    right: 8px;
    line-height: 1;
    color: var(--sn-on-accent);
    opacity: .75;
    text-decoration: none;
}
#chat-box-content .chat-item .chat-details .chat-time {
    margin-top: 4px;
    padding: 0 4px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--sn-muted);
    opacity: 1;
}
#chat-box-content .chat_divider {
    margin: 8px 0 14px;
    padding: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sn-muted);
}
#chat-box-content .chat_divider::before { margin: 0; margin-inline-end: .75em; border-bottom-color: var(--sn-border); }
#chat-box-content .chat_divider::after { margin: 0; margin-inline-start: .75em; border-bottom-color: var(--sn-border); }
#chat-box-content .chat_loader { margin: 0 0 12px; padding: 6px 0; font-size: .75rem; text-align: center; color: var(--sn-muted); }
#chat-box-content .chat_loader::before,
#chat-box-content .chat_loader::after { display: none; }
#chat-box-content .chat_empty_state { margin: 24px auto; padding: 32px 16px !important; font-size: .9rem; color: var(--sn-muted) !important; }

/* File tray + markdown preview */
#chat-dropbox { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; background: var(--sn-well); }
#chat-dropbox .dropzone { min-height: 160px; border: 2px dashed var(--sn-border); border-radius: 14px; background: #fff; }
#chat-input-textarea-result {
    left: 16px;
    right: 16px;
    bottom: 76px;
    z-index: 3;
    width: auto;
    max-height: 40%;
    padding: 10px 12px;
    overflow-y: auto;
    border: 1px dashed var(--sn-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: .85rem;
}

/* Composer */
#mychatbox2 .sn-chat-composer {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 14px !important;
    border-top: 1px solid var(--sn-border);
    border-radius: 0;
    background: var(--sn-chat-surface);
}
.sn-chat-composer__row { display: flex; align-items: flex-end; gap: 8px; }
#chat-input-textarea {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    min-height: 44px;
    max-height: 140px;
    padding: 11px 16px !important;
    overflow-y: auto;
    border: 1px solid var(--sn-border) !important;
    border-radius: 22px !important;
    background: var(--sn-well) !important;
    box-shadow: none !important;
    color: var(--sn-ink);
    font-size: .9rem;
    line-height: 1.45;
    white-space: pre-wrap !important;
    resize: none;
}
#chat-input-textarea:focus { border-color: var(--sn-accent) !important; background: #fff !important; }
#mychatbox2 .sn-chat-composer .sn-chat-icon-btn {
    position: static !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transform: none !important;
    transition: background-color .15s ease, filter .15s ease;
}
#mychatbox2 .sn-chat-composer .btn-file { background: var(--sn-well); color: var(--sn-ink); }
#mychatbox2 .sn-chat-composer .btn-file:hover { background: var(--sn-pill-bg-h); }
#mychatbox2 .sn-chat-composer .btn-send-msg { z-index: auto; background: var(--sn-accent); color: var(--sn-on-accent); }
#mychatbox2 .sn-chat-composer .btn-send-msg:hover { filter: brightness(.95); }
body[data-is-rtl="1"] #mychatbox2 .sn-chat-composer .btn-send-msg i { display: inline-block; transform: scaleX(-1); }
/* Physical right/left on purpose: the bundle sets right:0 on this button, and a logical
   inset would leave that physical right in force in RTL. */
#mychatbox2 .sn-chat-composer .go-to-bottom-btn {
    position: absolute;
    top: -52px;
    right: 18px;
    left: auto;
    z-index: 4;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--sn-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px rgba(17, 17, 17, .12);
    color: var(--sn-ink) !important;
    font-size: 1.1rem;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    transform: none;
}
body[data-is-rtl="1"] #mychatbox2 .sn-chat-composer .go-to-bottom-btn { right: auto; left: 18px; }

/* ---------- Phones (page): one pane at a time ---------- */
@media (max-width: 767.98px) {
    .sn-chat--page .sn-chat-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: minmax(0, 1fr); /* no :has() support -> both panes share the height */
        height: calc(100vh - 120px);
        min-height: 460px;
        border-radius: 16px;
    }
    .sn-chat--page .sn-chat-sidebar { border-inline-end: 0; }
    .sn-chat--page .sn-chat-shell:has(#chat_area:not(.d-none)) .sn-chat-sidebar { display: none; }
    .sn-chat--page .sn-chat-shell:not(:has(#chat_area:not(.d-none))) .sn-chat-main { display: none; }
    .sn-chat--page .sn-chat-back { display: inline-flex; }
    #chat-box-content .chat-item .chat-details { max-width: 88%; }
}

/* ---------- Floating panel (inside #chat-iframe) ---------- */
body.sn-chat-frame { height: 100vh; margin: 0; overflow: hidden; background: #fff; }
.sn-chat--floating {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--sn-chat-surface);
}
.sn-chat--floating .floating-chat-users {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
.sn-chat--floating .sn-chat-title { padding-inline-end: 44px; }
.sn-chat--floating #mychatbox2 .sn-chat-thread-head { padding-inline-end: 60px !important; }
.sn-chat-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 14px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sn-well);
    color: var(--sn-ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.sn-chat-close:hover { background: var(--sn-pill-bg-h); }

/* ---------- Launcher + iframe on the storefront ---------- */
/* .progress-wrap (back-to-top) is always in flow UNDER #chat-button inside .fixed-icon, so the
   button's top edge sits ~110px above the viewport bottom; the iframe must clear it. */
.fixed-icon #chat-button {
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    padding: 0;
    border-radius: 50%;
    background: var(--sn-accent);
    box-shadow: 0 10px 24px rgba(17, 17, 17, .18);
    color: var(--sn-on-accent);
    font-size: 26px;
}
.fixed-icon #chat-button:hover { transform: translateY(-2px); }
#chat-iframe.chat-iframe {
    right: 20px;
    bottom: 122px;
    width: 400px;
    height: min(640px, calc(100vh - 142px));
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(17, 17, 17, .22);
}
@media (max-width: 575.98px) {
    #chat-iframe.chat-iframe {
        right: 12px !important;
        left: auto;
        width: calc(100vw - 24px) !important;
        height: calc(100vh - 136px);
        border-radius: 16px;
    }
}

/* ---------- "Chat available after your first order" hint (product + store pages) ---------- */
.sn-chat-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--sn-border);
    border-radius: 10px;
    background: var(--sn-well);
    color: var(--sn-muted);
    font-size: .8rem;
    line-height: 1.45;
}
.sn-chat-hint i { flex: 0 0 auto; font-size: 1rem; line-height: 1.2; color: var(--sn-muted-2); }