/*!
 * DealsSpy design system (V4 "Swipe Stories") - ds.css
 *
 * Loaded on every public page, after bootstrap.css. Contents, in order:
 *   1. Sora font faces (self-hosted, variable 400-800) + metric-matched fallback
 *   2. Tokens (:root, dark theme, tints)
 *   3. Base: body.ds-body (all pages) and body.ds-r (redesigned pages only: reset + typography)
 *   4. Primitives from the mockups: .sr, .ic, odometer, view transitions, burst
 *   5. Mockup components, class names unchanged: .c-* (swipe.css) and .ss-* (ss.css)
 *   6. Feed grid (.c-masonry is a CSS grid here, not CSS columns) + tile layout
 *   7. Site shell: skip link, header, category chips, footer, dock, saved drawer, toasts
 *   8. Legacy helpers that used to live inline in Header.php
 *   9. Responsive: insets inside .ss-wrap, tablet (576-991), desktop (>=992), wide (>=1200)
 *  10. Reduced motion, print
 *
 * The broad element reset only applies under body.ds-r, so Phase-2 pages keep Bootstrap
 * typography. Shell components (header, chips, footer, dock, drawer, toasts) set their own
 * fonts, margins and link styles and look the same with or without ds-r.
 */

/* ===================================================================== 1. Fonts */
@font-face{font-family:"Sora";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/sora/sora-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/sora/sora-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial scaled to Sora's average advance and vertical metrics, so the swap does not reflow text */
@font-face{font-family:"Sora Fallback";src:local("Arial"),local("ArialMT");size-adjust:111.8%;ascent-override:86.8%;descent-override:25.9%;line-gap-override:0%}

/* ===================================================================== 2. Tokens */
:root{
  --bg:#F3F4FA;--surface:#FFFFFF;--surface-2:#ECEEF6;--text:#11152E;--muted:#5A6080;--line:rgba(17,21,46,.08);--line-strong:rgba(17,21,46,.16);
  --navy:#2B3467;--on-navy:#FFFFFF;--cta:#D0344F;--coral:#EB455F;--good:#1F7A45;
  --peach:#FFE3D3;--sky:#DCEBFF;--mint:#DDF5E7;--lilac:#E9E3FF;--butter:#FFF1C2;--rose:#FFDCE3;
  --on-tint:#11152E;--glass:rgba(255,255,255,.72);--glass-line:rgba(255,255,255,.7);--shadow:0 18px 40px rgba(17,21,46,.14);
  --font:"Sora","Sora Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;--spring:cubic-bezier(.3,1.45,.5,1);
  --ease:cubic-bezier(.2,.85,.25,1);
  --focus:#3B5BDB;--cta-text:#D0344F;--tg:#1873A8;--wa:#0E7F42;
  --gutter:18px;--dock-space:0px;
  color-scheme:light;
}
:root[data-theme="dark"]{--bg:#0A0D1C;--surface:#141933;--surface-2:#1C2242;--text:#EEF0FA;--muted:#A7ADCB;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.18);--navy:#BAD7E9;--on-navy:#11152E;--good:#4ADE80;--glass:rgba(20,25,51,.72);--glass-line:rgba(255,255,255,.08);--shadow:0 18px 40px rgba(0,0,0,.5);--focus:#8FA8FF;--cta-text:#FF8FA1;--tg:#6CC0F0;--wa:#4ADE80;color-scheme:dark}
.t-peach{--tint:#FFE3D3}.t-sky{--tint:#DCEBFF}.t-mint{--tint:#DDF5E7}.t-lilac{--tint:#E9E3FF}.t-butter{--tint:#FFF1C2}.t-rose{--tint:#FFDCE3}
/* Bottom space reserved below 992px for the dock (or the deal page's buy bar): 66px bar + 12px offset + air */
@media (max-width:991.98px){:root{--dock-space:calc(96px + env(safe-area-inset-bottom,0px))}}
/* The dock also floats on desktop (centred pill), so desktop keeps room for it too. */
@media (min-width:992px){:root{--dock-space:104px}}
@media (min-width:992px){:root{--gutter:32px}}

/* ===================================================================== 3. Base */
/* Every public page (ds-body is always on <body>) */
/* No overflow on html/body/#ds-main: the deal page relies on position:sticky and scroll(root) timelines.
   The only exception is the scroll lock while the Saved drawer is open (html.ds-lock). */
body.ds-body{transition:none;border-top:0;padding-bottom:var(--dock-space)}
html.ds-lock body{overflow:hidden}
#ds-main{display:block}
#ds-main:focus{outline:0}

/* Redesigned pages only (body.ds-r). :where() keeps the reset at element weight so any class wins. */
body.ds-r{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
:where(body.ds-r) *,:where(body.ds-r) *::before,:where(body.ds-r) *::after{box-sizing:border-box}
:where(body.ds-r) :is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote){margin:0}
:where(body.ds-r) :is(h1,h2,h3,h4,h5,h6){font-family:inherit;color:inherit}
:where(body.ds-r) :is(ul,ol){list-style:none;padding:0}
:where(body.ds-r) a,:where(body.ds-r) a:hover{color:inherit;text-decoration:none}
:where(body.ds-r) img{display:block;max-width:100%}
:where(body.ds-r) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:inherit}
:where(body.ds-r) :is(input,select,textarea){font:inherit}

/* Long-form content on redesigned pages (static pages, descriptions): restores reading rhythm */
.ds-prose{font:400 15px/1.7 var(--font);color:var(--text)}
.ds-prose :is(h1,h2,h3,h4,h5,h6){margin:1.6em 0 .6em;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.ds-prose h1{font-size:30px}.ds-prose h2{font-size:24px}.ds-prose h3{font-size:20px}.ds-prose :is(h4,h5,h6){font-size:17px}
.ds-prose :is(p,ul,ol,dl,blockquote,figure,table){margin:0 0 1em}
.ds-prose :is(ul,ol){padding-left:1.4em}
.ds-prose ul{list-style:disc}.ds-prose ol{list-style:decimal}
.ds-prose li+li{margin-top:.35em}
.ds-prose a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ds-prose img{height:auto;border-radius:16px}
.ds-prose>:first-child{margin-top:0}

/* Focus: one visible ring for keyboard users, none for mouse clicks */
body.ds-r :focus-visible,.ds-head :focus-visible,.ds-cats :focus-visible,.ss-foot :focus-visible,.c-dock :focus-visible,.ds-drawer :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
body.ds-r :focus:not(:focus-visible),:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer) :focus:not(:focus-visible){outline:0}

/* ===================================================================== 4. Primitives (v2-base.css) */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-s{width:16px;height:16px}
.ic-xs{width:13px;height:13px}
.ic-l{width:24px;height:24px}
.ic-fill{fill:currentColor}

/* Rolling odometer: each digit column holds 0-9 twice and lands on the second copy, so every digit spins */
.odo{display:inline-flex;align-items:flex-start;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.odo-d{display:inline-block;height:1em;overflow:hidden}
.odo-col{display:flex;flex-direction:column;animation-duration:1.2s;animation-timing-function:cubic-bezier(.16,.9,.25,1);animation-fill-mode:both}
.odo-col span{display:block;height:1em;line-height:1em}
.odo-d:nth-child(2) .odo-col{animation-delay:70ms}
.odo-d:nth-child(3) .odo-col{animation-delay:140ms}
.odo-d:nth-child(4) .odo-col{animation-delay:210ms}
.odo-d:nth-child(5) .odo-col{animation-delay:280ms}
.odo-d:nth-child(6) .odo-col{animation-delay:350ms}
.odo-d:nth-child(7) .odo-col{animation-delay:420ms}
.odo-to-0 .odo-col{animation-name:odo0}.odo-to-1 .odo-col{animation-name:odo1}.odo-to-2 .odo-col{animation-name:odo2}
.odo-to-3 .odo-col{animation-name:odo3}.odo-to-4 .odo-col{animation-name:odo4}.odo-to-5 .odo-col{animation-name:odo5}
.odo-to-6 .odo-col{animation-name:odo6}.odo-to-7 .odo-col{animation-name:odo7}.odo-to-8 .odo-col{animation-name:odo8}
.odo-to-9 .odo-col{animation-name:odo9}
@keyframes odo0{from{transform:translateY(0)}to{transform:translateY(-10em)}}
@keyframes odo1{from{transform:translateY(0)}to{transform:translateY(-11em)}}
@keyframes odo2{from{transform:translateY(0)}to{transform:translateY(-12em)}}
@keyframes odo3{from{transform:translateY(0)}to{transform:translateY(-13em)}}
@keyframes odo4{from{transform:translateY(0)}to{transform:translateY(-14em)}}
@keyframes odo5{from{transform:translateY(0)}to{transform:translateY(-15em)}}
@keyframes odo6{from{transform:translateY(0)}to{transform:translateY(-16em)}}
@keyframes odo7{from{transform:translateY(0)}to{transform:translateY(-17em)}}
@keyframes odo8{from{transform:translateY(0)}to{transform:translateY(-18em)}}
@keyframes odo9{from{transform:translateY(0)}to{transform:translateY(-19em)}}

/* View transitions: circular theme reveal + card morph between grid and list */
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){z-index:2}
html.vt-cards .vt-c:nth-child(1){view-transition-name:c1}
html.vt-cards .vt-c:nth-child(2){view-transition-name:c2}
html.vt-cards .vt-c:nth-child(3){view-transition-name:c3}
html.vt-cards .vt-c:nth-child(4){view-transition-name:c4}
html.vt-cards .vt-c:nth-child(5){view-transition-name:c5}
html.vt-cards .vt-c:nth-child(6){view-transition-name:c6}
html.vt-cards .vt-c:nth-child(7){view-transition-name:c7}
html.vt-cards .vt-c:nth-child(8){view-transition-name:c8}

/* Burst particles (coupon copy, Get Deal) */
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;animation:burst .7s cubic-bezier(.15,.8,.3,1) forwards}
.burst i:nth-child(1){--x:-46px;--y:-34px;background:#FFD447}
.burst i:nth-child(2){--x:44px;--y:-38px;background:#EB455F;border-radius:50%}
.burst i:nth-child(3){--x:-58px;--y:6px;background:#BAD7E9}
.burst i:nth-child(4){--x:60px;--y:4px;background:#FFD447;border-radius:50%}
.burst i:nth-child(5){--x:-28px;--y:-52px;background:#C8F0D8}
.burst i:nth-child(6){--x:30px;--y:-56px;background:#BAD7E9;border-radius:50%}
.burst i:nth-child(7){--x:-40px;--y:34px;background:#EB455F}
.burst i:nth-child(8){--x:42px;--y:36px;background:#DCD3FF}
@keyframes burst{0%{transform:translate(0,0) scale(.4) rotate(0)}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(200deg);opacity:0}}

/* ===================================================================== 5a. Components (swipe.css) */
/* Header + search */
.c-head{display:flex;align-items:center;gap:10px;padding:18px 18px 4px}
.c-logo{margin-right:auto;font:800 24px/1 var(--font);letter-spacing:-.05em;color:var(--text);white-space:nowrap}
.c-logo i{font-style:normal;color:var(--coral)}
.c-round{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--text);box-shadow:0 2px 12px rgba(17,21,46,.08);transition:transform .2s var(--spring),box-shadow .2s}
.c-round:active{transform:scale(.88)}
.c-round .i-sun{display:none}
:root[data-theme="dark"] .c-round .i-sun{display:block}
:root[data-theme="dark"] .c-round .i-moon{display:none}
/* The mockup re-rendered on every flip; here the spin only plays once the visitor has toggled */
html.ds-themed [data-ds-theme-toggle] svg{animation:c-spin .5s var(--spring)}
@keyframes c-spin{from{transform:rotate(-140deg) scale(.3)}}
.c-count{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--cta);color:#FFFFFF;font:700 12px/20px var(--font);text-align:center;animation:c-pop .45s var(--spring)}
.c-greet{padding:14px 18px 0;font:700 31px/1.08 var(--font);letter-spacing:-.045em}
.c-greet span{color:var(--muted)}
.c-search{display:flex;align-items:center;gap:10px;height:56px;margin:18px 18px 0;padding:0 6px 0 18px;border-radius:999px;background:var(--surface);box-shadow:0 8px 24px rgba(17,21,46,.08);transition:transform .3s var(--spring),box-shadow .25s}
.c-search:focus-within{transform:scale(1.02);box-shadow:0 0 0 3px var(--focus),0 12px 30px rgba(17,21,46,.12)}
.c-search input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--text);font:500 16px var(--font);outline:none}
.c-search input:focus-visible{outline:none}
.c-search input::placeholder{color:var(--muted);opacity:1}
.c-search .go{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--navy);color:var(--on-navy);cursor:pointer}

/* Stories */
.c-stories{display:flex;gap:14px;overflow-x:auto;padding:22px 18px 4px;scrollbar-width:none}
.c-stories::-webkit-scrollbar{display:none}
.c-story{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;width:70px;font:600 12px/1.2 var(--font);color:var(--text);text-align:center}
.c-ring{display:block;width:70px;height:70px;padding:3px;border-radius:50%;background:conic-gradient(from 210deg,var(--coral),#FFB36B,#EB455F,var(--coral));transition:transform .3s var(--spring)}
.c-story.seen .c-ring{background:var(--line-strong)}
.c-story:hover .c-ring{transform:scale(1.06) rotate(-6deg)}
.c-story:active .c-ring{transform:scale(.9)}
.c-ring span{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--bg);background:var(--tint);overflow:hidden}
.c-ring img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}

/* Deck */
.c-sechead{display:flex;align-items:baseline;justify-content:space-between;padding:26px 18px 14px}
.c-sechead h2{font:700 22px/1 var(--font);letter-spacing:-.035em}
.c-sechead span{font:600 13px/1 var(--font);color:var(--muted)}
.c-deck{position:relative;height:440px;margin:0 18px}
.c-card{position:absolute;inset:0;border-radius:32px;background:var(--tint);color:var(--on-tint);box-shadow:var(--shadow);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;transform-origin:50% 92%}
.c-card.top{cursor:grab}
.c-card.top:active{cursor:grabbing}
.c-card img{position:absolute;left:24px;right:24px;top:24px;width:calc(100% - 48px);height:calc(100% - 180px);object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.c-card-drop{position:absolute;top:18px;left:18px;padding:9px 13px;border-radius:999px;background:#11152E;color:#FFFFFF;font:800 15px/1 var(--font)}
.c-card-store{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;height:32px;padding:0 8px;border-radius:12px;background:#FFFFFF}
.c-card-store img{position:static;width:54px;height:18px;object-fit:contain;mix-blend-mode:normal}
.c-card-info{position:absolute;left:10px;right:10px;bottom:10px;padding:16px 16px 14px;border-radius:24px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.c-card-info h3{font:700 16px/1.28 var(--font);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-card-row{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.c-card-row b{font:800 26px/1 var(--font);letter-spacing:-.04em}
.c-card-row s{font:500 14px/1 var(--font);color:#5A6080}
.c-card-row span{margin-left:auto;font:600 12px/1 var(--font);color:#5A6080}
.c-stamp{position:absolute;top:70px;padding:8px 14px;border:3px solid;border-radius:14px;background:rgba(255,255,255,.7);font:800 22px/1 var(--font);letter-spacing:.08em;pointer-events:none}
.c-stamp.save{left:22px;color:#1F7A45;border-color:#1F7A45;transform:rotate(-14deg)}
.c-stamp.skip{right:22px;color:#D0344F;border-color:#D0344F;transform:rotate(14deg)}
.c-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.c-act{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--surface);color:var(--text);box-shadow:0 8px 22px rgba(17,21,46,.12);transition:transform .25s var(--spring)}
.c-act:hover{transform:scale(1.08)}
.c-act:active{transform:scale(.86)}
.c-act.skip{color:#D0344F}
.c-act.save{color:var(--good)}
.c-act.get{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 26px;border-radius:999px;background:var(--cta);color:#FFFFFF;font:700 16px/1 var(--font)}
.c-hint{margin-top:12px;text-align:center;font:500 12px/1 var(--font);color:var(--muted)}

/* Feed tile (the grid itself is in section 6) */
.c-tile{display:block;break-inside:avoid;margin-bottom:16px}
.c-tile-img{position:relative;border-radius:24px;background:var(--tint);overflow:hidden;isolation:isolate;transition:transform .35s var(--spring)}
.c-tile:hover .c-tile-img{transform:scale(.97)}
.c-tile-img>img{width:100%;height:auto;padding:16px 16px 48px;mix-blend-mode:multiply}
.c-heart{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.82);color:#11152E;transition:transform .2s var(--spring)}
.c-heart:active{transform:scale(.85)}
.c-heart.on{color:#D0344F}
.c-heart.on svg{fill:#D0344F}
/* Pop plays on the visitor's tap only (ds.js adds .pop), not for hearts restored on page load */
.c-heart.on.pop svg{animation:c-pop .5s var(--spring)}
@keyframes c-pop{0%{transform:scale(.3)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.c-pricepill{position:absolute;left:8px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.88);color:#11152E;font:800 14px/1 var(--font);white-space:nowrap;overflow:hidden}
.c-pricepill em{font-style:normal;font-size:12px;font-weight:700;color:#D0344F}
.c-tile h3{margin-top:9px;padding:0 4px;font:600 13px/1.32 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-tile .meta{padding:5px 4px 0;font:500 12px/1 var(--font);color:var(--muted)}
@supports (animation-timeline:view()){
  .c-tile{animation:c-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes c-rise{from{transform:translateY(50px) scale(.92)}}
}

/* Glass dock (production: fixed to the viewport, mobile + tablet only) */
.c-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:520px;height:66px;margin:0 auto;padding:6px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:0 14px 40px rgba(17,21,46,.18);font-family:var(--font)}
.c-liquid{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 5);border-radius:999px;background:var(--navy);transition:transform .55s var(--spring),opacity .25s}
.c-dock.at-1 .c-liquid{transform:translateX(100%)}
.c-dock.at-2 .c-liquid{transform:translateX(200%)}
.c-dock.at-3 .c-liquid{transform:translateX(300%)}
.c-dock.at-4 .c-liquid{transform:translateX(400%)}
.c-dock.no-at .c-liquid{opacity:0}
.c-dock button,.c-dock a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;margin:0;padding:0;border:0;border-radius:999px;background:none;font:600 12px/1 var(--font);color:var(--muted);text-decoration:none;cursor:pointer;transition:color .25s}
.c-dock a:hover{color:var(--text);text-decoration:none}
.c-dock button[aria-current="page"],.c-dock a[aria-current="page"],.c-dock a[aria-current="page"]:hover{color:var(--on-navy)}
.c-dock button[aria-current="page"] .ic,.c-dock a[aria-current="page"] .ic{animation:c-pop .5s var(--spring)}
.c-dock a:focus-visible{outline-offset:-2px}
.c-dot{position:absolute;top:9px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--cta)}
.c-badge{position:absolute;top:3px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--cta);color:#FFFFFF;font:700 11px/18px var(--font);text-align:center;box-shadow:0 0 0 2px var(--surface)}

/* Toast (production: fixed, sits above the dock on mobile) */
.c-toast{position:fixed;left:50%;bottom:var(--dock-space);z-index:130;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:13px 18px;border-radius:999px;background:#11152E;color:#FFFFFF;font:600 14px/1.2 var(--font);white-space:nowrap;box-shadow:0 14px 34px rgba(17,21,46,.3);transform:translateX(-50%);animation:c-toast .5s var(--spring) both;pointer-events:auto}
.c-toast span{min-width:0;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="dark"] .c-toast{background:#EEF0FA;color:#11152E}
.c-toast.is-out{animation:c-toast-out .22s ease forwards}
@keyframes c-toast{from{transform:translate(-50%,30px) scale(.8);opacity:0}}
@keyframes c-toast-out{to{transform:translate(-50%,16px) scale(.96);opacity:0}}

/* Story viewer (production: fixed full-screen on mobile; boxed inside .ss-svwrap on desktop) */
.c-sv{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:#0A0D1C;color:#FFFFFF;font-family:var(--font);animation:c-sv-in .45s cubic-bezier(.2,.85,.25,1) both}
@keyframes c-sv-in{from{transform:scale(.25);border-radius:80px;opacity:0}}
.c-sv-bars{display:flex;gap:4px;padding:14px 12px 0}
.c-sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.c-sv-bar i{display:block;width:0;height:100%;border-radius:2px;background:#FFFFFF}
.c-sv-bar.done i{width:100%}
.c-sv-bar.run-a i{animation:c-fill-a 4.5s linear forwards}
.c-sv-bar.run-b i{animation:c-fill-b 4.5s linear forwards}
@keyframes c-fill-a{to{width:100%}}
@keyframes c-fill-b{to{width:100%}}
.c-sv-top{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
.c-sv-who{display:flex;align-items:center;gap:10px;font:700 15px/1 var(--font)}
.c-sv-who small{display:block;margin-top:4px;font:500 12px/1 var(--font);color:rgba(255,255,255,.7)}
.c-sv-av{width:36px;height:36px;border-radius:50%;padding:2px;background:var(--coral)}
.c-sv-av span{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #0A0D1C;background:var(--tint);overflow:hidden}
.c-sv-av img{width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply}
.c-sv-x{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border-radius:50%;background:rgba(255,255,255,.12);color:#FFFFFF}
.c-sv-stage{position:relative;flex:1;margin:8px 12px 0}
.c-sv-card{position:absolute;inset:0;border-radius:30px;background:var(--tint);color:#11152E;overflow:hidden}
.c-sv-card.sv-a{animation:c-sv-a .5s var(--spring) both}
.c-sv-card.sv-b{animation:c-sv-b .5s var(--spring) both}
@keyframes c-sv-a{from{transform:translateX(40px) scale(.94);opacity:.3}}
@keyframes c-sv-b{from{transform:translateX(40px) scale(.94);opacity:.3}}
.c-sv-card>img{position:absolute;left:30px;right:30px;top:30px;width:calc(100% - 60px);height:calc(100% - 250px);object-fit:contain;mix-blend-mode:multiply}
.c-sv-drop{position:absolute;top:20px;left:20px;padding:10px 14px;border-radius:999px;background:#11152E;color:#FFFFFF;font:800 18px/1 var(--font)}
.c-sv-info{position:absolute;left:12px;right:12px;bottom:12px;padding:18px;border-radius:24px;background:rgba(255,255,255,.88)}
.c-sv-info h3{font:700 18px/1.25 var(--font);letter-spacing:-.02em}
.c-sv-info .row{display:flex;align-items:baseline;gap:8px;margin:10px 0 0}
.c-sv-info .row b{font:800 30px/1 var(--font);letter-spacing:-.04em}
.c-sv-info .row s{font:500 15px/1 var(--font);color:#5A6080}
.c-sv-info .c-act.get{width:100%;height:54px;margin-top:14px;justify-content:center;box-shadow:none}
.c-sv-tap{position:absolute;top:0;bottom:200px;z-index:2;width:38%}
.c-sv-tap.prev{left:0}
.c-sv-tap.next{right:0}

/* Deal page (production: the top controls and buy bar are fixed to the viewport) */
.c-dtop{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:14px;right:14px;z-index:70;display:flex;align-items:center;gap:10px;pointer-events:none}
.c-dtop>*{pointer-events:auto}
.c-glass{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.74);color:#11152E;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .2s var(--spring)}
.c-glass:active{transform:scale(.88)}
.c-glass.on{color:#D0344F}
.c-glass.on svg{fill:#D0344F;animation:c-pop .5s var(--spring)}
.c-dhero{position:sticky;top:0;height:430px;display:grid;place-items:center;background:var(--tint);overflow:hidden}
.c-dhero>img{width:78%;height:auto;mix-blend-mode:multiply;animation:c-hero-in .9s var(--spring) both}
@keyframes c-hero-in{from{transform:translateY(40px) scale(.85) rotate(-6deg)}}
@supports (animation-timeline:scroll()){
  .c-dhero>img{animation:c-par linear both;animation-timeline:scroll(nearest);animation-range:0 380px}
  @keyframes c-par{to{transform:translateY(-60px) scale(.72);opacity:.3;filter:blur(3px)}}
}
.c-sheet{position:relative;z-index:2;margin-top:-40px;padding:10px 18px 140px;border-radius:32px 32px 0 0;background:var(--surface);box-shadow:0 -12px 30px rgba(17,21,46,.10)}
.c-handle{width:44px;height:5px;margin:4px auto 16px;border-radius:3px;background:var(--line-strong)}
.c-dmeta{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font);color:var(--muted)}
.c-dmeta .pill{display:inline-flex;align-items:center;height:26px;padding:0 7px;border-radius:9px;background:#FFFFFF;border:1px solid var(--line)}
.c-dmeta .pill img{width:52px;height:17px;object-fit:contain}
.c-dmeta .fresh{display:inline-flex;align-items:center;gap:6px;color:var(--good)}
.c-dmeta .fresh i{width:7px;height:7px;border-radius:50%;background:var(--good)}
.c-dtitle{margin-top:12px;font:700 22px/1.22 var(--font);letter-spacing:-.03em}
.c-dprice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:16px 16px 16px 18px;border-radius:26px;background:var(--surface-2)}
.c-dprice .odo{font:800 42px/1 var(--font);letter-spacing:-.05em}
.c-dprice s{display:block;margin-top:8px;font:500 14px/1 var(--font);color:var(--muted)}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.c-pring{--p:60;position:relative;display:grid;place-items:center;flex:none;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--cta) calc(var(--p) * 1%),var(--line-strong) 0);animation:c-ring 1.5s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes c-ring{from{--p:0}}
.c-pring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface-2)}
.c-pring span{position:relative;text-align:center;font:800 20px/1 var(--font);letter-spacing:-.03em}
.c-pring small{display:block;margin-top:2px;font:700 12px/1 var(--font);letter-spacing:.08em;color:var(--muted)}
.c-saveband{display:flex;align-items:center;gap:10px;margin-top:12px;padding:13px 16px;border-radius:20px;background:var(--mint);color:#11152E;font:600 14px/1.3 var(--font)}
.c-saveband b{font-weight:800}
.c-hl{display:flex;gap:8px;overflow-x:auto;margin:20px -18px 0;padding:0 18px;scrollbar-width:none}
.c-hl::-webkit-scrollbar{display:none}
.c-hl span{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface-2);font:600 13px/1 var(--font)}
.c-hl .ic{color:var(--cta)}
.c-h2{margin-top:28px;font:700 18px/1 var(--font);letter-spacing:-.025em}
.c-about{margin-top:10px;font:400 15px/1.65 var(--font);color:var(--text)}
.c-about.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c-more{margin-top:6px;min-height:44px;font:700 14px/1 var(--font);color:var(--cta)}
:root[data-theme="dark"] .c-more{color:#FF8FA1}
.c-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.c-spec{padding:14px 16px;border-radius:20px;background:var(--surface-2)}
.c-spec dt{font:600 12px/1 var(--font);color:var(--muted)}
.c-spec dd{margin:6px 0 0;font:700 15px/1.2 var(--font)}
.c-rail{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:12px;overflow-x:auto;margin:12px -18px 0;padding:0 18px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.c-rail::-webkit-scrollbar{display:none}
.c-rail .c-tile{scroll-snap-align:start;margin:0}
.c-buy{position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto;padding:8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:0 14px 40px rgba(17,21,46,.2);animation:c-buy-in .7s var(--spring) .4s both}
@keyframes c-buy-in{from{transform:translateY(140%)}}
.c-buy .c-round{flex:none;box-shadow:none;background:var(--surface-2)}
.c-buy .c-round.on{color:#D0344F}
.c-buy .c-round.on svg{fill:#D0344F}
.c-getbtn{position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:56px;border-radius:999px;background:var(--cta);color:#FFFFFF;font:700 16px/1 var(--font);overflow:hidden;transition:transform .2s var(--spring)}
.c-getbtn:active{transform:scale(.97)}
.c-getbtn .fill{position:absolute;inset:0;background:rgba(255,255,255,.24);transform:scaleX(0);transform-origin:left}
.c-getbtn.opening .fill{animation:c-open 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes c-open{to{transform:scaleX(1)}}
.c-getbtn .lbl{position:relative;display:inline-flex;align-items:center;gap:8px}
.c-getbtn .lbl.l-a{animation:c-lbl-a .4s var(--spring)}
.c-getbtn .lbl.l-b{animation:c-lbl-b .4s var(--spring)}
@keyframes c-lbl-a{from{transform:translateY(20px);opacity:0}}
@keyframes c-lbl-b{from{transform:translateY(20px);opacity:0}}
.c-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#FFFFFF;border-radius:50%;animation:c-rot .7s linear infinite}
@keyframes c-rot{to{transform:rotate(360deg)}}

/* ===================================================================== 5b. Components (ss.css) */
.ss-wrap{max-width:1232px;margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}

/* Section heads */
.ss-h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:32px 18px 14px}
.ss-h2 h2{font:700 22px/1.1 var(--font);letter-spacing:-.035em}
.ss-h2>a,.ss-h2>span{display:inline-flex;align-items:center;gap:4px;font:600 13px/1 var(--font);color:var(--muted);white-space:nowrap}
.ss-h2>a{min-height:44px;color:var(--text)}
.ss-h2>a .ic{transition:transform .25s var(--spring)}
.ss-h2>a:hover .ic{transform:translateX(3px)}
.ss-live{color:var(--good)!important}
.ss-live i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:ss-ping 1.6s ease-out infinite}
@keyframes ss-ping{0%{box-shadow:0 0 0 0 rgba(31,122,69,.45)}100%{box-shadow:0 0 0 9px rgba(31,122,69,0)}}

/* Sale banner carousel with story-style progress bars */
.ss-banner{position:relative;margin:20px 18px 0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.ss-track{display:flex;height:100%;transition:transform .7s cubic-bezier(.2,.85,.25,1)}
.ss-slide{position:relative;flex:0 0 100%;height:206px;padding:34px 20px 20px;display:flex;flex-direction:column;justify-content:space-between;background:var(--tint);color:var(--on-tint);overflow:hidden}
.ss-slide small{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.82);font:700 12px/1 var(--font)}
.ss-slide small img{width:52px;height:16px;object-fit:contain}
.ss-slide h3{position:relative;max-width:58%;font:800 27px/1.02 var(--font);letter-spacing:-.05em}
.ss-slide .go{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:#11152E;color:#FFFFFF;font:700 14px/1 var(--font);transition:transform .3s var(--spring)}
.ss-slide .go:hover{transform:translateX(5px)}
.ss-bubbles{position:absolute;right:0;top:0;bottom:0;width:46%}
.ss-bubbles img{position:absolute;width:92px;height:92px;object-fit:contain;padding:10px;border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 12px 26px rgba(17,21,46,.16)}
.ss-bubbles img:nth-child(1){right:84px;top:44px;rotate:-8deg;animation:ss-bob 4.2s ease-in-out infinite}
.ss-bubbles img:nth-child(2){right:10px;top:22px;rotate:7deg;animation:ss-bob 4.2s ease-in-out .9s infinite}
.ss-bubbles img:nth-child(3){right:30px;bottom:14px;rotate:-3deg;animation:ss-bob 4.2s ease-in-out 1.8s infinite}
@keyframes ss-bob{50%{translate:0 -8px}}
.ss-bars{position:absolute;left:16px;right:16px;top:8px;z-index:2;display:flex;gap:6px}
.ss-barhit{flex:1;display:flex;align-items:center;height:24px}
.ss-bar{display:block;width:100%;height:3px;border-radius:2px;background:rgba(17,21,46,.16);overflow:hidden}
.ss-bar i{display:block;width:0;height:100%;border-radius:2px;background:#11152E}
.ss-bar.done i{width:100%}
.ss-bar.run-a i{animation:ss-fill-a 5s linear forwards}
.ss-bar.run-b i{animation:ss-fill-b 5s linear forwards}
@keyframes ss-fill-a{to{width:100%}}
@keyframes ss-fill-b{to{width:100%}}

/* Segmented tabs with liquid pill */
.ss-seg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 18px 16px;padding:5px;border-radius:999px;background:var(--surface);box-shadow:0 6px 18px rgba(17,21,46,.08)}
.ss-seg-pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / 4);border-radius:999px;background:var(--navy);transition:transform .55s var(--spring)}
.ss-seg.at-1 .ss-seg-pill{transform:translateX(100%)}
.ss-seg.at-2 .ss-seg-pill{transform:translateX(200%)}
.ss-seg.at-3 .ss-seg-pill{transform:translateX(300%)}
.ss-seg button{position:relative;z-index:1;min-width:0;height:44px;padding:0 4px;font:600 13px/1 var(--font);color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.ss-seg button[aria-selected="true"]{color:var(--on-navy)}

/* Deal tile (extends .c-tile) */
.ss-tile{display:block;break-inside:avoid;margin-bottom:18px}
.ss-tile .c-tile-img{display:block}
.ss-tile .c-tile-img>img{padding:16px 16px 50px}
.ss-imglink{display:block}
.ss-imglink>img{display:block;width:100%;height:auto;padding:16px 16px 50px;mix-blend-mode:multiply;transition:transform .45s var(--spring)}
.ss-tile:hover .ss-imglink>img{transform:scale(1.05) rotate(-1.5deg)}
.ss-hot{position:absolute;left:8px;top:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;background:#11152E;color:#FFFFFF;font:700 12px/1 var(--font)}
.ss-hot .ic{color:#FFB36B;animation:ss-flick 1.8s ease-in-out infinite;transform-origin:50% 90%}
@keyframes ss-flick{50%{transform:scale(1.15) rotate(-6deg)}}
.ss-hot.ss-exp{background:#5A6080}
.ss-tile h3{margin-top:9px;padding:0 4px;font:600 13px/1.32 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-tile h3 a:hover{text-decoration:underline}
.ss-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;padding:7px 4px 0;font:500 12px/1 var(--font);color:var(--muted)}
.ss-meta>[aria-hidden="true"]{display:none}
.ss-meta>*{white-space:nowrap}
.ss-save{color:var(--good);font-weight:700}
.ss-logo{display:inline-flex;align-items:center;height:20px;padding:0 5px;border-radius:7px;background:#FFFFFF;border:1px solid var(--line);color:#11152E;font-size:11px}
.ss-logo img{width:40px;height:13px;object-fit:contain}
.ss-mrp{text-decoration:line-through}
.ss-offer{display:flex;align-items:center;gap:5px;margin:8px 4px 0;padding:6px 9px;border-radius:12px;background:var(--mint);color:#11152E;font:600 12px/1.2 var(--font);white-space:nowrap;overflow:hidden}
.ss-offer.coupon{background:var(--rose)}
.ss-offer span{overflow:hidden;text-overflow:ellipsis}
.ss-get{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 8px);height:44px;margin:10px 4px 0;border:0;border-radius:999px;background:var(--cta);color:#FFFFFF;font:700 13px/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .25s var(--spring),filter .2s}
.ss-get:hover{filter:brightness(1.07);color:#FFFFFF;text-decoration:none}
.ss-get:active{transform:scale(.94)}
.ss-get .ic{transition:transform .25s var(--spring)}
.ss-get:hover .ic{transform:translate(2px,-2px)}
.ss-get.is-ghost{background:var(--surface-2);color:var(--text)}
.ss-get.is-ghost:hover{color:var(--text)}
.ss-tile.is-expired .c-tile-img>img,.ss-tile.is-expired .ss-imglink>img{filter:grayscale(.7);opacity:.75}
.ss-in{animation:ss-in .6s var(--spring) both}
@keyframes ss-in{from{transform:translateY(34px) scale(.9);opacity:0}}
.ss-swap-a .ss-tile{animation:ss-swap-a .5s var(--spring) both}
.ss-swap-b .ss-tile{animation:ss-swap-b .5s var(--spring) both}
@keyframes ss-swap-a{from{transform:translateY(18px) scale(.96);opacity:.15}}
@keyframes ss-swap-b{from{transform:translateY(18px) scale(.96);opacity:.15}}

/* Skeleton + load more */
.ss-skel{border-radius:24px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:ss-shimmer 1.3s ease infinite}
@keyframes ss-shimmer{from{background-position:100% 50%}to{background-position:0 50%}}
.ss-skel-tile{break-inside:avoid;margin-bottom:18px}
.ss-skel-tile .m{height:190px}
.ss-skel-tile .l{height:12px;margin:10px 4px 0;border-radius:6px}
.ss-skel-tile .l.s{width:60%}
.ss-more{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 36px);height:54px;margin:4px 18px 0;border:0;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:0 8px 20px rgba(17,21,46,.08);font:700 14px/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .25s var(--spring)}
.ss-more:hover{color:var(--text);text-decoration:none}
.ss-more:active{transform:scale(.96)}
.ss-more[disabled],.ss-more[aria-busy="true"]{cursor:progress}
.ss-spin{width:18px;height:18px;border:2.5px solid var(--line-strong);border-top-color:var(--cta);border-radius:50%;animation:c-rot .7s linear infinite}

/* Offer tickets */
.ss-tickets{display:grid;grid-auto-flow:column;grid-auto-columns:284px;gap:12px;overflow-x:auto;padding:4px 18px 10px;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none}
.ss-tickets::-webkit-scrollbar{display:none}
.ss-ticket{position:relative;display:grid;grid-template-columns:94px minmax(0,1fr);min-height:120px;border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 8px 20px rgba(17,21,46,.08);scroll-snap-align:start;transition:transform .35s var(--spring);-webkit-mask:radial-gradient(circle 10px at 94px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 94px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 10px at 94px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 94px 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ss-ticket:hover{transform:translateY(-4px) rotate(-.6deg)}
.ss-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:24px 0 0 24px;border-right:2px dashed rgba(17,21,46,.18);background:var(--tint);color:#11152E;text-align:center}
.ss-stub b{font:800 22px/1 var(--font);letter-spacing:-.04em}
.ss-stub small{font:700 12px/1.1 var(--font);letter-spacing:.04em;text-transform:uppercase}
.ss-tk{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 14px}
.ss-tk h3{font:700 14px/1.3 var(--font);letter-spacing:-.01em}
.ss-tk p{font:500 12px/1.35 var(--font);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-tk span{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font:700 13px/1 var(--font)}
.ss-side .ss-tickets{grid-auto-flow:row;grid-auto-columns:auto;padding:0;overflow:visible}

/* Stores */
.ss-stores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px;padding:0 18px}
.ss-store{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;font:600 12px/1.2 var(--font);color:var(--text);text-align:center}
.ss-store>span{display:grid;place-items:center;width:70px;height:70px;max-width:100%;border-radius:50%;background:#FFFFFF;box-shadow:0 8px 20px rgba(17,21,46,.10);transition:transform .35s var(--spring)}
.ss-store:hover>span{transform:translateY(-5px) scale(1.06)}
.ss-store:active>span{transform:scale(.9)}
.ss-store img{width:50px;height:18px;object-fit:contain}
.ss-side .ss-stores{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}

/* Telegram card */
.ss-tg{position:relative;margin:34px 18px 0;padding:24px 20px;border-radius:30px;background:#2B3467;color:#FFFFFF;overflow:hidden;box-shadow:0 18px 40px rgba(43,52,103,.32)}
:root[data-theme="dark"] .ss-tg{background:#1C2242}
.ss-tg h3{position:relative;max-width:76%;font:800 23px/1.08 var(--font);letter-spacing:-.045em}
.ss-tg p{position:relative;max-width:80%;margin-top:8px;font:500 13px/1.5 var(--font);color:#C9D3E8}
.ss-tg-btns{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* Brand pills, darkened from #229ED9 / #1DA851 so white text passes WCAG AA */
.ss-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;font:700 14px/1 var(--font);color:#FFFFFF;text-decoration:none;transition:transform .25s var(--spring),filter .2s}
.ss-pill:hover{filter:brightness(1.08);color:#FFFFFF;text-decoration:none}
.ss-pill:active{transform:scale(.94)}
.ss-pill.tg{background:#1873A8}
.ss-pill.wa{background:#0E7F42}
.ss-plane{position:absolute;right:-16px;top:8px;width:136px;height:136px;color:rgba(186,215,233,.18);animation:ss-fly 5s ease-in-out infinite}
@keyframes ss-fly{50%{transform:translate(-8px,-10px) rotate(-7deg)}}
.ss-side .ss-tg{margin:0}

/* Tools */
.ss-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 18px}
.ss-tool{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:24px;background:var(--tint);color:#11152E;transition:transform .35s var(--spring)}
.ss-tool:hover{transform:translateY(-5px) rotate(-1deg);color:#11152E}
.ss-tool i{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:rgba(255,255,255,.8)}
.ss-tool b{display:block;font:700 14px/1.25 var(--font)}
.ss-tool small{display:block;margin-top:3px;font:500 12px/1.3 var(--font);color:#4A5070}
.ss-side .ss-tools{grid-template-columns:1fr 1fr;padding:0}

/* Filter chips + pager */
.ss-chips{display:flex;gap:8px;overflow-x:auto;padding:0 18px 16px;scrollbar-width:none}
.ss-chips::-webkit-scrollbar{display:none}
.ss-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:0 4px 12px rgba(17,21,46,.06);font:600 13px/1 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s,transform .25s var(--spring)}
.ss-chip:hover{color:var(--text);text-decoration:none}
.ss-chip:active{transform:scale(.93)}
.ss-chip[aria-pressed="true"],.ss-chip[aria-current="page"],.ss-chip[aria-current="page"]:hover{background:var(--navy);color:var(--on-navy)}
.ss-chip[aria-pressed="true"] .ic{animation:c-pop .45s var(--spring)}
.ss-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:16px 18px 0}
.ss-pager a,.ss-pager span{display:grid;place-items:center;min-width:46px;height:46px;padding:0 14px;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:0 4px 12px rgba(17,21,46,.06);font:700 14px/1 var(--font);text-decoration:none;transition:transform .25s var(--spring)}
.ss-pager a:hover{transform:translateY(-2px);color:var(--text);text-decoration:none}
.ss-pager [aria-current="page"]{background:var(--navy);color:var(--on-navy)}
.ss-pager .gap{min-width:16px;padding:0;background:none;box-shadow:none}

/* Breadcrumbs + store hero */
.ss-crumbs{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:12px 18px 0;font:500 12px/1 var(--font);color:var(--muted);white-space:nowrap;scrollbar-width:none}
.ss-crumbs::-webkit-scrollbar{display:none}
.ss-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted)}
.ss-crumbs a:hover{color:var(--text);text-decoration:underline}
.ss-crumbs [aria-current="page"]{color:var(--text)}
.ss-crumbs .ic{width:12px;height:12px}
.ss-shero{position:relative;margin:12px 18px 0;padding:22px 18px 16px;border-radius:30px;background:var(--tint);color:#11152E;overflow:hidden}
.ss-shero .ss-bubbles{width:40%;opacity:.95}
.ss-shero .ss-bubbles img{width:72px;height:72px;padding:8px;border-radius:22px}
.ss-shero .ss-bubbles img:nth-child(1){right:64px;top:18px}
.ss-shero .ss-bubbles img:nth-child(2){right:-6px;top:58px}
.ss-shero-bub{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:#FFFFFF;box-shadow:0 10px 24px rgba(17,21,46,.12)}
.ss-shero-bub img{width:60px;height:22px;object-fit:contain}
.ss-shero h1{position:relative;max-width:68%;margin-top:14px;font:800 24px/1.1 var(--font);letter-spacing:-.045em}
.ss-facts{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ss-fact{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.8);font:600 12px/1 var(--font)}
.ss-fact.live{color:#1F7A45}
.ss-fact.live i{width:7px;height:7px;border-radius:50%;background:#1F7A45;animation:ss-ping 1.6s ease-out infinite}
.ss-intro{position:relative;margin-top:12px;font:400 14px/1.6 var(--font);color:#3C4262}
.ss-intro.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-textbtn{position:relative;margin-top:2px;min-height:44px;font:700 13px/1 var(--font);color:#11152E;text-decoration:underline;text-underline-offset:3px}

/* Deal page additions */
.ss-share{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.ss-sharebtn{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border-radius:999px;background:var(--surface-2);color:var(--text);font:600 13px/1 var(--font);transition:transform .25s var(--spring)}
.ss-sharebtn:active{transform:scale(.93)}
.ss-sharebtn.wa{background:#DDF5E7;color:#11652F}
.ss-sharebtn.tg{background:#DCEBFF;color:#155E8A}
.ss-glance{margin-top:16px;border-radius:24px;background:var(--surface-2);overflow:hidden}
.ss-glance li{display:flex;align-items:center;gap:12px;padding:14px 16px;font:500 13px/1.4 var(--font)}
.ss-glance li+li{border-top:1px solid var(--line)}
.ss-glance a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ss-glance .ic{flex:none;color:var(--good)}
.ss-steps{display:grid;gap:10px;margin-top:12px;counter-reset:s}
.ss-step{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;background:var(--surface-2)}
.ss-step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--on-navy);font:800 15px/1 var(--font)}
.ss-step b{display:block;font:700 14px/1.3 var(--font)}
.ss-step small{display:block;margin-top:3px;font:500 12px/1.3 var(--font);color:var(--muted)}
.ss-rail{display:grid;grid-auto-flow:column;grid-auto-columns:168px;gap:14px;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 8px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.ss-rail::-webkit-scrollbar{display:none}
.ss-rail .ss-tile{margin:0;scroll-snap-align:start}

/* Footer */
.ss-foot{margin-top:34px;padding:28px 18px 120px;border-radius:32px 32px 0 0;background:var(--surface)}
.ss-foot .c-logo{display:inline-block;font-size:28px}
.ss-foot-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ss-foot-links a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;background:var(--surface-2);color:var(--text);font:600 12px/1 var(--font);text-decoration:none;transition:transform .25s var(--spring)}
.ss-foot-links a:hover{transform:translateY(-2px);color:var(--text);text-decoration:none}
.ss-foot p{margin-top:16px;font:500 12px/1.6 var(--font);color:var(--muted)}
.ss-foot-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 2fr;gap:36px}
.ss-foot h4{margin-bottom:10px;font:700 13px/1 var(--font)}
.ss-foot li+li{margin-top:8px}
.ss-foot li a{font:500 14px/1 var(--font);color:var(--muted)}
.ss-foot li a:hover{color:var(--text)}

/* Desktop header + layouts (grid layouts switch on at >=992, see section 9) */
.ss-dhead{position:sticky;top:0;z-index:60;background:var(--bg);background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--line)}
.ss-dhead .row{display:flex;align-items:center;gap:22px;height:78px}
.ss-dhead .c-logo{margin-right:0;font-size:28px}
.ss-dhead .c-search{flex:1;max-width:520px;height:52px;margin:0}
.ss-dnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.ss-dnav a{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;font:600 14px/1 var(--font);color:var(--muted);white-space:nowrap;text-decoration:none;transition:background-color .25s,color .25s}
.ss-dnav a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.ss-dnav a.on,.ss-dnav a.on:hover{background:var(--navy);color:var(--on-navy)}
.ss-dnav .c-badge{top:-2px;left:auto;right:-2px}
.ss-hero{display:block;margin-top:8px}
.ss-deckbox{display:block}
.ss-layout{display:block}
.ss-side{display:flex;flex-direction:column;gap:20px;padding-top:32px}
.ss-panel{padding:20px;border-radius:30px;background:var(--surface);box-shadow:0 8px 24px rgba(17,21,46,.06)}
.ss-panel>h3{margin-bottom:14px;font:700 18px/1.2 var(--font);letter-spacing:-.03em}

/* Desktop deal page: .ss-dl / .ss-dimg / .ss-dsheet / .ss-likebtn rules live in the >=992 block
   (section 9); ds-deal.css styles them below 992px. */
@keyframes ss-hover{50%{translate:0 -12px}}

/* Greeting row + stories modal */
.ss-greetrow{display:block}
.ss-greetrow p:not(.c-greet){padding:8px 18px 0;font:500 15px/1.5 var(--font);color:var(--muted)}
.ss-svwrap{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,13,28,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:ss-fade .3s ease both}
@keyframes ss-fade{from{opacity:0}}
@media (min-width:992px){.ss-svwrap .c-sv{position:relative;inset:auto;width:420px;max-width:calc(100vw - 32px);height:790px;max-height:calc(100vh - 48px);padding:0;border-radius:34px;overflow:hidden}}

/* ===================================================================== 6. Feed grid */
/* Row order = newest first; fixed 1:1 image boxes, so nothing jumps while images load. */
.c-masonry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;align-items:stretch;padding:0 18px}
.c-masonry>.c-tile,.c-masonry>.ss-tile,.c-masonry>.ss-skel-tile{margin:0}
.ss-tile{display:flex;flex-direction:column;min-width:0}
.ss-tile .c-tile-img,.c-masonry .c-tile-img,.ss-rail .c-tile-img,.c-rail .c-tile-img{aspect-ratio:1}
@supports not (aspect-ratio:1){.ss-tile .c-tile-img,.c-masonry .c-tile-img,.ss-rail .c-tile-img,.c-rail .c-tile-img{height:0;padding-top:100%}}
.ss-tile .ss-imglink{position:absolute;inset:0}
.ss-tile .c-tile-img>img,.ss-tile .ss-imglink>img,.c-masonry .c-tile-img>img,.ss-rail .c-tile-img>img,.c-rail .c-tile-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px 12px 46px}
/* Get Deal pinned to the bottom of each tile so a row of tiles lines up */
.ss-tile>.ss-get{margin-top:auto}
.ss-tile>:nth-last-child(2){margin-bottom:10px}
.ss-skel-tile .m{height:auto;aspect-ratio:1}

/* ===================================================================== 7. Site shell */
/* Skip link */
.ds-skip{position:fixed;left:12px;top:-80px;z-index:200;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--navy);color:var(--on-navy);font:700 14px/1 var(--font);text-decoration:none;box-shadow:var(--shadow);transition:top .2s}
.ds-skip:focus,.ds-skip:hover{top:calc(12px + env(safe-area-inset-top,0px));color:var(--on-navy);text-decoration:none}
.ds-skip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Shell isolation: no Bootstrap list/heading/link styles leak into the chrome */
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer,.ds-toasts) :is(h1,h2,h3,h4,p,ul,ol,li,figure){margin:0;padding:0}
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer) :is(ul,ol){list-style:none}
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer) a{color:inherit;text-decoration:none}
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer) a:hover{text-decoration:none}
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer) img{display:block;max-width:100%}
:where(.ds-head,.ds-cats,.ss-foot,.c-dock,.ds-drawer,.ds-toasts) svg{vertical-align:middle}

/* Header: sticky glass bar; one markup for every width */
.ds-head{font:400 14px/1.5 var(--font);color:var(--text);padding-top:env(safe-area-inset-top,0px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ds-head-row{position:relative;display:flex;align-items:center;gap:8px;height:64px}
.ds-head .c-logo{margin-right:auto;font-size:24px}
.ds-head .c-logo:hover{color:var(--text)}
.ds-head .ss-dnav{display:none}
.ds-head .c-round:hover{color:var(--text)}
.ds-tg .ic{color:var(--tg)}
.ds-wa .ic{color:var(--wa)}
/* Search: a pill dropping below the bar until there is room for it inline (>=1200) */
.ds-head .ds-search{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:2;display:none;max-width:none;height:56px;margin:0;box-shadow:var(--shadow)}
.ds-head.is-search .ds-search{display:flex;animation:ds-drop .4s var(--spring) both}
.ds-head.is-search .ds-search-toggle{background:var(--navy);color:var(--on-navy)}
@keyframes ds-drop{from{transform:translateY(-12px) scale(.96);opacity:0}}

/* Search suggestions (ds.js): the list under any [data-ds-search] box. Shell-isolated like the
   header, so it looks the same with or without body.ds-r. */
[data-ds-search]{position:relative}
.c-search.has-sugg,.c-search.has-sugg:focus-within{z-index:30;transform:none}
.ds-sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);font:400 14px/1.4 var(--font);color:var(--text);text-align:left;-webkit-font-smoothing:antialiased;animation:ds-sugg-in .18s var(--ease) both}
@supports (height:1dvh){.ds-sugg{max-height:min(72dvh,560px)}}
.ds-sugg[hidden]{display:none}
.ds-sugg,.ds-sugg *{box-sizing:border-box}
@keyframes ds-sugg-in{from{opacity:0;transform:translateY(-4px)}}
.ds-sugg.is-loading .ds-sugg-o:not(.ds-sugg-go){opacity:.55}
.ds-sugg-h{display:flex;align-items:center;justify-content:space-between;margin:0;padding:10px 12px 4px;font:700 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ds-sugg-h button{margin:-6px -6px -6px 0;padding:6px 8px;border:0;border-radius:10px;background:none;font:600 12px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
.ds-sugg-h button:hover{background:var(--surface-2);color:var(--text)}
.ds-sugg-o{display:flex;align-items:center;gap:12px;min-height:46px;margin:0;padding:6px 10px;border-radius:16px;color:var(--text);text-decoration:none;transition:background-color .15s}
.ds-sugg-o:hover,.ds-sugg-o.is-on{background:var(--surface-2);color:var(--text);text-decoration:none}
.ds-sugg-o:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ds-sugg-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--surface-2);color:var(--muted)}
.ds-sugg-ic .ic{width:16px;height:16px}
.ds-sugg-o:hover .ds-sugg-ic,.ds-sugg-o.is-on .ds-sugg-ic{background:var(--surface);color:var(--text)}
.ds-sugg-t{display:block;flex:1;min-width:0}
.ds-sugg-n{display:block;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.ds-sugg-n mark{padding:0;background:none;color:inherit;font-weight:800}
.ds-sugg-m{display:block;margin-top:2px;overflow:hidden;font-size:12px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.ds-sugg-go .ds-sugg-n{font-weight:500}
.ds-sugg-img{flex:none;width:44px;height:44px;padding:3px;border-radius:12px;background:#fff;object-fit:contain}
.ds-sugg-d .ds-sugg-n{display:-webkit-box;font-size:13px;font-weight:500;line-height:1.35;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ds-sugg-d .ds-sugg-n mark{font-weight:700}
.ds-sugg-p{font-weight:700;color:var(--text)}
.ds-sugg-p s{margin-left:5px;font-weight:500;color:var(--muted)}
.ds-sugg-off{font-weight:700;color:var(--good)}

/* Category chips under the header */
.ds-cats{font:400 14px/1.5 var(--font);color:var(--text)}
.ds-cats .ss-chips{margin:0 calc(-1 * var(--gutter));padding:12px var(--gutter) 6px;list-style:none}
.ds-cats .ss-chips>li{flex:none;display:flex}
.ds-cats .ss-chip{height:40px;padding:0 15px;box-shadow:0 2px 8px rgba(17,21,46,.06)}
.ds-cats .ss-chip:focus-visible{outline-offset:-3px}

/* Footer */
.ds-foot{position:relative;margin-top:40px;margin-bottom:calc(-1 * var(--dock-space));padding:32px 0 calc(28px + var(--dock-space));font:400 14px/1.5 var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
.ds-foot .ss-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.ds-foot-brand,.ds-foot-popular{grid-column:1 / -1}
.ds-foot-brand p{max-width:420px;margin-top:12px}
.ds-foot .ss-foot-links{margin-top:0}
.ds-foot-h{margin:0 0 12px;font:700 13px/1 var(--font);letter-spacing:.01em;color:var(--text)}
.ds-foot li a{display:inline-flex;align-items:center;min-height:32px}
.ds-foot .ds-foot-legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.ds-foot-legal li{font:500 12px/1.6 var(--font);color:var(--muted)}
.ds-foot-legal li a{display:inline;min-height:0;font:inherit;font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:2px}
.ds-foot-legal li a:hover{color:var(--text);text-decoration:underline}
.ds-foot .ds-foot-copy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px;font:600 12px/1.5 var(--font);color:var(--muted)}
.ds-foot-copy svg{width:14px;height:14px;fill:var(--coral)}

/* Dock badge counts (rewards / contests not yet opened) */
.ds-dock .ic{width:22px;height:22px}

/* Saved drawer: bottom sheet on mobile, right-hand panel on desktop */
.ds-drawer{position:fixed;inset:0;z-index:120;font:400 14px/1.5 var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
.ds-drawer-scrim{position:absolute;inset:0;background:rgba(10,13,28,.5);opacity:0;transition:opacity .3s ease}
.ds-drawer.is-open .ds-drawer-scrim{opacity:1}
.ds-drawer-panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:560px;max-height:86vh;margin:0 auto;padding:8px 0 calc(14px + env(safe-area-inset-bottom,0px));border-radius:30px 30px 0 0;background:var(--surface);box-shadow:0 -18px 40px rgba(10,13,28,.24);transform:translateY(100%);transition:transform .42s var(--ease);outline:0}
.ds-drawer.is-open .ds-drawer-panel{transform:none}
.ds-drawer-panel::before{content:"";flex:none;width:44px;height:5px;margin:4px auto 8px;border-radius:3px;background:var(--line-strong)}
.ds-drawer-head{display:flex;align-items:center;gap:10px;padding:4px 14px 10px 20px}
.ds-drawer-head h2{font:700 20px/1.2 var(--font);letter-spacing:-.03em;color:var(--text)}
.ds-drawer-total{font:600 13px/1 var(--font);color:var(--muted)}
.ds-drawer-x{margin-left:auto;background:var(--surface-2);box-shadow:none}
.ds-saved-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 8px 20px}
.ds-saved-item{display:flex;align-items:center;gap:6px;padding:8px 0}
.ds-saved-item+.ds-saved-item{border-top:1px solid var(--line)}
.ds-saved-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border-radius:18px}
.ds-saved-link:hover .ds-saved-title{text-decoration:underline}
.ds-saved-img{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--sky);overflow:hidden;isolation:isolate}
.ds-saved-img img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply}
.ds-saved-txt{min-width:0;display:flex;flex-direction:column;gap:6px}
.ds-saved-title{font:600 13px/1.32 var(--font);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-saved-meta{display:flex;align-items:baseline;gap:6px;font:800 14px/1 var(--font);color:var(--text)}
.ds-saved-meta em{font-style:normal;font-size:12px;font-weight:700;color:var(--cta-text)}
.ds-saved-rm{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--muted);transition:background-color .2s,color .2s}
.ds-saved-rm:hover{background:var(--surface-2);color:var(--cta-text)}
.ds-saved-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 28px 18px;text-align:center}
.ds-saved-empty-ic{display:grid;place-items:center;width:72px;height:72px;margin-bottom:6px;border-radius:50%;background:var(--rose);color:#D0344F}
.ds-saved-empty .ds-saved-empty-h{font:700 17px/1.3 var(--font);color:var(--text)}
.ds-saved-empty p{max-width:300px;font:500 13px/1.5 var(--font);color:var(--muted)}
.ds-saved-browse{display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:10px;padding:0 20px;border-radius:999px;background:var(--navy);color:var(--on-navy);font:700 14px/1 var(--font)}
.ds-saved-browse:hover{color:var(--on-navy)}
.ds-drawer .ds-drawer-note{padding:10px 20px 0;font:500 12px/1.4 var(--font);color:var(--muted);text-align:center}

/* Toast region (role=status); the toast itself is positioned fixed */
.ds-toasts{position:fixed;left:0;bottom:0;width:0;height:0;z-index:130;font-family:var(--font)}

/* Shell surfaces without backdrop-filter support stay readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ss-dhead,.c-dock,.c-buy{background:var(--surface)}
}

/* ===================================================================== 8. Legacy helpers (moved from Header.php inline CSS) */
.collapse-container{background-color:var(--ds-background);box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;opacity:.8;color:var(--ds-blue)}
.collapse-btn{background-color:var(--ds-blue);opacity:.8;color:var(--ds-light);cursor:pointer}
.ds-body header.bg-unset{padding:.5rem .75rem}

/* ===================================================================== 9. Responsive */
/* Phones + tablets: components carry their own 18px inset when used bare (as in the mobile boards);
   inside .ss-wrap the wrap supplies the gutter, so the inset is dropped and scrollers bleed to the edge. */
@media (max-width:991.98px){
  .ss-wrap :is(.c-greet,.c-sechead,.c-masonry,.ss-h2,.ss-stores,.ss-tools,.ss-pager,.ss-greetrow p:not(.c-greet)){padding-left:0;padding-right:0}
  .ss-wrap :is(.c-search,.c-deck,.ss-banner,.ss-seg,.ss-tg,.ss-shero){margin-left:0;margin-right:0}
  .ss-wrap :is(.c-stories,.ss-tickets,.ss-chips,.ss-crumbs){margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .ds-head .c-search:focus-within{transform:none}
}
@media (max-width:575.98px){
  .ss-wrap .ss-more{width:100%;margin-left:0;margin-right:0}
}
/* Five header buttons (search, Telegram, WhatsApp, saved, theme) beside the logo */
@media (max-width:399.98px){
  .ds-head-row{gap:6px}
  .ds-head .c-logo{font-size:21px}
  .ds-head .c-round{width:38px;height:38px}
}
@media (max-width:359.98px){
  .ds-head-row{gap:4px}
  .ds-head .c-logo{font-size:19px}
  .ds-head .c-round{width:34px;height:34px}
  .c-dock a,.c-dock button{font-size:11px}
}

/* Tablet (576-991) */
@media (min-width:576px){
  .c-masonry{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  .ss-tile .c-tile-img>img,.ss-tile .ss-imglink>img,.c-masonry .c-tile-img>img,.ss-rail .c-tile-img>img,.c-rail .c-tile-img>img{padding:16px 16px 50px}
  .ss-rail{grid-auto-columns:190px}
  .ss-tools{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ss-more{width:340px;margin:12px auto 0}
  .ss-seg{max-width:580px}
  .c-greet{font-size:38px}
  .ss-slide{height:240px;padding:40px 28px 24px}
  .ss-slide h3{font-size:32px}
  .ss-bubbles img{width:110px;height:110px}
  .c-specs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ss-shero{padding:28px 28px 20px}
  .ss-shero h1{font-size:30px}
  .ds-foot .ss-foot-cols{grid-template-columns:1fr 1fr 2fr}
  .ds-foot-popular{grid-column:auto}
  .ds-cats .ss-chip{height:42px}
}
@media (min-width:576px) and (max-width:991.98px){
  .c-deck{max-width:520px;margin-left:auto;margin-right:auto}
}
@media (min-width:768px){
  .ss-stores{grid-template-columns:repeat(8,minmax(0,1fr))}
  .ss-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Desktop (>=992): every ".ss-desk X" rule from the boards lives here */
@media (min-width:992px){
  .ss-h2{padding:40px 0 18px}
  .ss-h2 h2{font-size:28px}
  .ss-banner{margin:0}
  .ss-slide{height:320px;padding:56px 44px 40px}
  .ss-hero .ss-banner,.ss-hero .ss-slide{height:100%}
  .ss-slide h3{max-width:52%;font-size:48px}
  .ss-slide .go{height:52px;padding:0 24px;font-size:16px}
  .ss-bubbles img{width:176px;height:176px;padding:18px;border-radius:40px}
  .ss-bubbles img:nth-child(1){right:200px;top:70px}
  .ss-bubbles img:nth-child(2){right:30px;top:40px}
  .ss-bubbles img:nth-child(3){right:90px;bottom:36px}
  .ss-bars{left:44px;right:44px;top:22px}
  .ss-seg{margin:0 0 22px;max-width:580px}
  .c-masonry{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;padding:0}
  .ss-layout .c-masonry{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ss-more{width:340px;margin:20px auto 0}
  .ss-chips{padding:0 0 18px}
  .ss-crumbs{padding:18px 0 0}
  .ss-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ss-rail{grid-auto-columns:220px;margin:0;padding:4px 0 8px;scroll-padding-inline:0}
  .ss-foot{padding:44px 0 36px;border-radius:40px 40px 0 0}
  .c-stories{gap:28px;padding:26px 0 6px;justify-content:flex-start}
  .c-story{width:84px}
  .c-ring{width:80px;height:80px}
  .c-greet{padding:34px 0 0;font-size:46px}
  .c-sechead,.c-masonry,.ss-stores,.ss-tools,.ss-pager{padding-left:0;padding-right:0}
  .c-search,.c-deck,.ss-tg,.ss-shero{margin-left:0;margin-right:0}
  .c-tile-img{border-radius:26px}

  /* Layout grids */
  .ss-hero{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px;height:440px}
  .ss-deckbox{display:flex;flex-direction:column;padding:18px;border-radius:32px;background:var(--surface);box-shadow:var(--shadow)}
  .ss-deckbox .c-sechead{padding:2px 4px 14px}
  .ss-deckbox .c-deck{flex:1;height:auto;margin:0}
  .ss-deckbox .c-actions{margin-top:14px}
  .ss-deckbox .c-act{width:52px;height:52px}
  .ss-deckbox .c-act.get{width:auto;height:52px}
  .ss-deckbox .c-card>img{height:calc(100% - 160px)}
  .ss-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
  .ss-side{padding-top:40px}
  .ss-greetrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
  .ss-greetrow p:not(.c-greet){max-width:360px;padding:0 0 6px}
  .ss-shero{padding:36px 40px 28px}
  .ss-shero h1{font-size:38px}
  .ss-shero .ss-bubbles img{width:120px;height:120px;padding:14px;border-radius:32px}
  .ss-shero .ss-bubbles img:nth-child(1){right:170px;top:28px}
  .ss-shero .ss-bubbles img:nth-child(2){right:30px;top:70px}
  /* Desktop deal page (mockup SSDealDesk) */
  .ss-dl{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:32px;align-items:start;margin-top:18px}
  .ss-dimg{position:sticky;top:100px;display:grid;place-items:center;height:620px;border-radius:40px;background:var(--tint);overflow:hidden}
  .ss-dimg>img{width:72%;height:auto;mix-blend-mode:multiply;animation:c-hero-in .9s var(--spring) both,ss-hover 6s ease-in-out 1s infinite}
  .ss-dimg .chips{position:absolute;top:22px;left:22px;right:22px;display:flex;align-items:center;gap:8px}
  .ss-dimg .c-sv-drop{position:static;font-size:16px}
  .ss-dimg .c-glass{margin-left:auto}
  .ss-dsheet{padding:30px;border-radius:36px;background:var(--surface);box-shadow:var(--shadow)}
  .ss-dsheet .c-dtitle{font-size:26px}
  .ss-dsheet .c-getbtn{flex:none;width:100%;height:62px;margin-top:18px;font-size:17px}
  .ss-likebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:10px;border-radius:999px;background:var(--surface-2);font:700 14px/1 var(--font);transition:transform .25s var(--spring)}
  .ss-likebtn:active{transform:scale(.96)}
  .ss-likebtn.on{color:#D0344F}
  .ss-likebtn.on svg{fill:#D0344F;animation:c-pop .5s var(--spring)}

  /* Shell */
  .c-dock{left:50%;right:auto;width:520px;bottom:20px;margin:0;transform:translateX(-50%);box-shadow:0 18px 48px rgba(17,21,46,.22)}
  .c-toast{bottom:32px}
  .ds-head-row{gap:10px;height:78px}
  .ds-head .c-logo{margin-right:0;font-size:26px}
  .ds-head .ss-dnav{display:flex;gap:2px;margin-left:auto}
  .ds-head .ss-dnav a{padding:0 10px}
  .ds-cats .ss-chips{margin:0;padding:14px 0 4px}
  .ds-foot{margin-top:56px;margin-bottom:0;padding:44px 0 36px}
  .ds-foot .ss-foot-cols{grid-template-columns:1.3fr 1fr 1fr 2fr;gap:36px}
  .ds-foot-brand,.ds-foot-popular{grid-column:auto}
  .ds-drawer-panel{top:0;left:auto;right:0;width:420px;max-width:none;max-height:none;margin:0;padding-top:18px;border-radius:32px 0 0 32px;box-shadow:-18px 0 40px rgba(10,13,28,.2);transform:translateX(100%)}
  .ds-drawer-panel::before{display:none}
  .ds-drawer-head{padding-top:6px}
  .ds-saved-empty{justify-content:flex-start;padding-top:72px}
}
@media (min-width:1200px){
  .ds-head-row{gap:16px}
  .ds-head .c-logo{font-size:28px}
  .ds-head .ss-dnav a{padding:0 12px}
  .ds-head .ds-search{position:relative;top:auto;left:auto;right:auto;display:flex;flex:1 1 auto;min-width:200px;max-width:520px;height:52px;box-shadow:0 6px 18px rgba(17,21,46,.06);animation:none}
  .ds-head .ds-search-toggle{display:none}
}
@media (hover:hover){
  .c-round:hover{box-shadow:0 6px 18px rgba(17,21,46,.14)}
}

/* ===================================================================== 10. Motion + print */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .c-tile,.c-dhero>img{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{
  .ds-skip,.ds-cats,.c-dock,.ds-drawer,.ds-toasts,.ds-head .c-round,.ds-head .ds-search,.ds-head .ss-dnav,.c-buy,.c-dtop{display:none!important}
  .ds-head{position:static;background:none;border:0}
  body.ds-body{padding-bottom:0}
  .ds-foot{margin-bottom:0;padding-bottom:24px}
}