/* DealsSpy deal page (V4 Swipe Stories). Loaded only on /deals/* after ds.css,
   which owns every shared .c-* / .ss-* / .odo* class. This file only adapts the
   mockup to a real document (page scroller, fixed buy bar, responsive columns)
   and styles the deal-only pieces: coupon, offer band, rich admin content. */

.ds-deal{position:relative}
.ds-deal [hidden]{display:none!important}
.ds-grow{flex:1}

/* ---------- Mobile + tablet (<992px): sticky tinted hero, rising sheet ---------- */
/* The sheet rises 40px over the hero's bottom (.c-sheet margin-top:-40px), so the photo is centred in
   the part above it. The fixed grid row lets the photo's max-height count from the hero: in an auto
   row it counted from the photo itself, so the photo kept its full size and ran under the sheet. */
.ds-deal .c-dhero{height:min(430px,56vh);min-height:300px;margin:0;padding-bottom:40px;grid-template-rows:100%;grid-template-columns:100%}
.ds-deal .c-dhero>img{width:78%;max-width:440px;height:auto;max-height:calc(100% - 40px);object-fit:contain}
.ds-deal .c-dhero .c-dtop{position:absolute;top:14px;left:14px;right:14px;z-index:3}

/* Hero parallax driven by the page scroller (not a container). */
@supports (animation-timeline:scroll()){
  .ds-deal .c-dhero>img{animation:dsd-par linear both;animation-timeline:scroll(root block);animation-range:0 420px}
  @keyframes dsd-par{to{transform:translateY(-60px) scale(.72);opacity:.3;filter:blur(3px)}}
}

/* Product photo: the whole photo area opens the zoom viewer (ds-deal.js); the magnifier chip says so.
   The back / share buttons sit above it. */
.ds-zoom{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.ds-zoom:focus-visible{outline:3px solid var(--navy);outline-offset:-6px}
.ds-zoom-ic{position:absolute;right:14px;bottom:54px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.74);color:#11152E;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 12px rgba(17,21,46,.12);transition:transform .2s var(--spring)}
.ds-zoom-ic .ic{width:18px;height:18px}
.ds-zoom:hover .ds-zoom-ic{transform:scale(1.08)}
.ds-zoom:active .ds-zoom-ic{transform:scale(.88)}
/* Desktop: beside the share button (the floating dock can cover the panel's bottom). */
.ss-dimg .ds-zoom-ic{top:22px;right:74px;bottom:auto;width:44px;height:44px}

/* Zoom viewer: the photo full screen. Pinch, double-tap, the wheel or + / - zoom (up to 4x), a drag
   looks around; swipe down, a tap beside the photo, Back, Esc or the close button close it. */
.ds-zv{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#FFFFFF;overflow:hidden;overscroll-behavior:contain;opacity:0;transition:opacity .22s ease}
.ds-zv::backdrop{background:transparent}
.ds-zv.is-open{opacity:1}
.ds-zv-bg{position:absolute;inset:0;background:rgba(10,12,28,.94)}
.ds-zv-stage{position:absolute;inset:0;display:grid;place-items:center;padding:calc(68px + env(safe-area-inset-top,0px)) 12px calc(60px + env(safe-area-inset-bottom,0px));touch-action:none;cursor:zoom-in;-webkit-user-select:none;user-select:none}
.ds-zv.is-zoomed .ds-zv-stage{cursor:grab}
.ds-zv-img{display:block;max-width:none;border-radius:14px;background:#FFFFFF;transform-origin:50% 50%;will-change:transform;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;transform:scale(.92);transition:transform .3s var(--spring)}
.ds-zv.is-open .ds-zv-img{transform:none}
.ds-zv-img.is-live{transition:none}
.ds-zv-bar{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:2;display:flex;gap:8px}
.ds-zv-bar button{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#FFFFFF;cursor:pointer;transition:background-color .2s,transform .2s var(--spring)}
.ds-zv-bar button:hover{background:rgba(255,255,255,.26)}
.ds-zv-bar button:active{transform:scale(.9)}
.ds-zv-bar button:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.ds-zv-bar .ic{width:22px;height:22px}
.ds-zv.is-zoomed [data-zv-zoom] .v{display:none}
.ds-zv-hint{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2;margin:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);font:600 12px/1.2 var(--font);white-space:nowrap;transform:translateX(-50%);pointer-events:none;transition:opacity .2s}
.ds-zv.is-zoomed .ds-zv-hint{opacity:0}
@media (min-width:992px){
  .ds-zv-stage{padding:76px 40px 64px}
  .ds-zv-bar{top:20px;right:20px}
}
@media (prefers-reduced-motion:reduce){
  .ds-zv,.ds-zv-img{transition:none}
}

.ds-deal .c-sheet{padding-bottom:32px}
.ds-deal .c-glass{color:#11152E}

/* Breadcrumb (an ordered list inside the .ss-crumbs scroller) */
.ds-deal .ss-crumbs{padding:0 0 12px}
.ds-crumbs{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.ds-crumbs li{display:inline-flex;align-items:center;gap:6px;flex:none}
.ds-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none}
.ds-crumbs a:hover{color:var(--text);text-decoration:underline}
.ds-crumbs a[aria-current]{max-width:64vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
.ds-crumbs a[aria-current]:hover{text-decoration:none}

/* Meta row: store pill (always white so logos read), freshness, ended */
.ds-deal .c-dmeta{flex-wrap:wrap;row-gap:8px}
.ds-deal .c-dmeta .pill{min-width:44px;color:#11152E;font:700 12px/1 var(--font);text-decoration:none;transition:transform .2s var(--spring)}
.ds-deal .c-dmeta a.pill:hover{transform:translateY(-1px)}
.ds-deal .c-dmeta .fresh i{animation:dsd-ping 1.6s ease-out infinite}
.ds-when{display:inline-flex;align-items:center;gap:6px}
/* A newer live deal for the same product (Deals.php FindNewerLive) */
.ds-newer{display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:11px 14px;border-radius:18px;background:var(--sky);color:#11152E;text-decoration:none;transition:transform .25s var(--spring)}
.ds-newer:hover{transform:translateY(-1px)}
.ds-newer:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ds-newer-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.75)}
.ds-newer-t{display:grid;gap:2px;flex:1;min-width:0}
.ds-newer-t b{font:700 14px/1.25 var(--font)}
.ds-newer-t small{font:500 12.5px/1.3 var(--font);color:#3C4466}
.ds-newer>.ic:last-child{flex:none;opacity:.7}
.ds-ended{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:9px;background:var(--rose);color:#8A1C2E;font:700 12px/1 var(--font)}
@keyframes dsd-ping{0%{box-shadow:0 0 0 0 rgba(31,122,69,.45)}100%{box-shadow:0 0 0 8px rgba(31,122,69,0)}}

/* Price block */
.ds-deal .c-dprice{min-width:0}
.ds-pricebox{min-width:0}
/* Each cell takes its final digit's width from a hidden sizer and the rolling
   column is centred over it, so proportional figures never leave gaps ($1 9). */
.ds-deal .c-dprice .odo-d{position:relative}
.ds-odo-w{display:block;height:1em;line-height:1em;visibility:hidden}
.ds-deal .c-dprice .odo-d .odo-col{position:absolute;top:0;left:50%;width:1em;margin-left:-.5em}
.ds-deal .c-dprice .odo-col span{text-align:center}
.ds-deal .c-dprice .odo.ds-odo-l{font-size:34px}
.ds-deal .c-dprice .odo.ds-odo-xl{font-size:28px}
.ds-pctbig{display:block;font:800 34px/1 var(--font);letter-spacing:-.04em;color:var(--cta)}
.ds-mrp{display:block;margin-top:8px;font:500 14px/1 var(--font);color:var(--muted)}
.ds-deal .c-saveband{animation:dsd-band .55s var(--spring) .55s both}
.ds-deal .c-saveband .ic{flex:none;color:#1F7A45}
@keyframes dsd-band{from{transform:scale(.92);opacity:0}}

/* Offer ribbon (bank / coupon / sale text from the deal row) */
.ds-offerband{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;padding:12px 16px;border-radius:20px;background:var(--butter);color:#11152E;font:600 14px/1.4 var(--font)}
.ds-offerband .ic{flex:none;margin-top:1px;color:#8A5A00}

/* Coupon chip (tap to copy) */
.ds-coupon{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin-top:12px;padding:8px 8px 8px 16px;border:2px dashed var(--line-strong);border-radius:20px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:transform .2s var(--spring),border-color .2s}
.ds-coupon:hover{border-color:var(--cta)}
.ds-coupon:active{transform:scale(.98)}
.ds-coupon-txt{min-width:0}
.ds-coupon-k{display:block;font:600 12px/1 var(--font);color:var(--muted)}
.ds-coupon-v{display:block;margin-top:6px;font:800 18px/1.15 var(--font);letter-spacing:.06em;overflow-wrap:anywhere}
.ds-coupon-go{display:inline-flex;align-items:center;gap:6px;flex:none;height:44px;margin-left:auto;padding:0 16px;border-radius:999px;background:var(--navy);color:var(--on-navy);font:700 13px/1 var(--font);transition:background-color .25s,color .25s}
.ds-coupon.is-copied{border-color:var(--good)}
.ds-coupon.is-copied .ds-coupon-go{background:var(--good);color:var(--surface)}
.ds-coupon.is-copied .ds-coupon-go .ic{animation:dsd-pop .45s var(--spring)}

/* Get CTA: the label swaps to "Opening {Store}…" as cosmetic feedback only
   (ds.js has already opened the store tab by the time this class lands). */
.ds-deal .ss-dsheet .c-getbtn{width:100%;margin-top:16px}
.ds-deal .c-getbtn{padding:0 20px;cursor:pointer;transition:transform .2s var(--spring),filter .2s}
.ds-deal .c-getbtn:hover{filter:brightness(1.07)}
.ds-deal .c-getbtn .lbl{max-width:100%;min-width:0}
.ds-deal .c-getbtn .lbl .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Floating buy bar: the Get button takes the room beside the heart, whatever its label. The label
   used to set its width: on most phones with a 4-5 digit price it ran past the screen edge and the
   whole page got wider (zoomed out). inline-size containment keeps the label out of the page's
   width; without the room, "Get it on" goes (ds-deal.js). */
.ds-deal .c-buy .c-getbtn{min-width:0;contain:inline-size}
.ds-deal .c-getbtn .t.is-short .pre{display:none}
.ds-deal .c-getbtn .l-a{display:none}
.ds-deal .c-getbtn.opening .l-a{display:inline-flex}
.ds-deal .c-getbtn.opening .l-b{display:none}
.ds-deal .c-getbtn.opening .fill{animation-duration:1.35s}

/* Extra admin links (admin classes may recolour them) */
.ds-xlinks{display:grid;gap:8px;margin-top:10px}
.ds-xlink{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:10px 18px;border-radius:999px;background:var(--surface-2);color:var(--text);font:700 14px/1.25 var(--font);text-align:center;cursor:pointer;transition:transform .2s var(--spring),filter .2s}
.ds-xlink:hover{filter:brightness(.97)}
.ds-xlink:active{transform:scale(.97)}

/* Save + share */
/* "Save to my list" under the Get button: a pill on phones too (it only had styles on desktop,
   so phones showed a bare 24px text button). */
@media (max-width:991.98px){
  .ds-deal .ss-likebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:10px;padding:0;border:0;border-radius:999px;background:var(--surface-2);color:var(--text);font:700 14px/1 var(--font);transition:transform .25s var(--spring)}
  .ds-deal .ss-likebtn:active{transform:scale(.96)}
  .ds-deal .ss-likebtn[aria-pressed="true"]{color:#D0344F}
  .ds-deal .ss-likebtn[aria-pressed="true"] svg{fill:#D0344F;animation:c-pop .5s var(--spring)}
}
.ds-deal .ss-likebtn{cursor:pointer}
.ds-deal .ss-likebtn .ds-on-t,.ds-deal .ss-likebtn[aria-pressed="true"] .ds-off-t{display:none}
.ds-deal .ss-likebtn[aria-pressed="true"] .ds-on-t{display:inline}
.ds-deal a.ss-sharebtn{text-decoration:none}
.ds-deal .ss-sharebtn{cursor:pointer}

/* Tag chips are links (store, categories, tags, brands) */
.ds-deal .c-hl>a{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface-2);color:var(--text);font:600 13px/1 var(--font);white-space:nowrap;text-decoration:none;transition:transform .2s var(--spring),background-color .2s}
.ds-deal .c-hl>a:hover{background:var(--line-strong)}
.ds-deal .c-hl>a:active{transform:scale(.95)}
.ds-deal .c-hl>a.is-store{background:var(--navy);color:var(--on-navy)}
.ds-deal .c-hl>a.is-store .ic{color:inherit}

/* At a glance */
.ds-deal .ss-glance a{color:inherit}
.ds-deal .ss-glance .is-muted,.ds-deal .ss-glance .is-muted .ic{color:var(--muted)}

/* Rich admin content (How to claim, Offer details) */
.ds-rich{font:400 15px/1.65 var(--font);color:var(--text);overflow-wrap:anywhere}
.ds-rich>:first-child{margin-top:0}
.ds-rich>:last-child{margin-bottom:0}
.ds-rich p,.ds-rich ul,.ds-rich ol,.ds-rich table,.ds-rich blockquote,.ds-rich pre,.ds-rich figure{margin:0 0 .8em}
.ds-rich ul{list-style:disc;padding-left:1.3em}
.ds-rich ol{list-style:decimal;padding-left:1.4em}
.ds-rich li{margin:.3em 0}
.ds-rich li::marker{color:var(--cta)}
.ds-rich ol li::marker{color:var(--text);font-weight:700}
.ds-rich h2,.ds-rich h3,.ds-rich h4,.ds-rich h5,.ds-rich h6{margin:1.1em 0 .45em;font:700 16px/1.3 var(--font);letter-spacing:-.01em}
.ds-rich h2{font-size:17px}
.ds-rich a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ds-rich img{display:block;max-width:100%;height:auto;margin:.8em auto;border-radius:16px}
.ds-rich table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px}
.ds-rich th,.ds-rich td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ds-rich th{font-weight:700}
.ds-rich blockquote{padding:10px 14px;border-left:3px solid var(--navy);border-radius:10px;background:var(--surface-2)}
.ds-rich code{padding:1px 6px;border-radius:6px;background:var(--surface-2);font-size:.9em}
.ds-rich pre{padding:12px;border-radius:12px;background:var(--surface-2);overflow-x:auto;font-size:13px}
.ds-rich hr{margin:1em 0;border:0;border-top:1px dashed var(--line-strong)}
.ds-rich iframe,.ds-rich video{max-width:100%}
.ds-howto{margin-top:12px;padding:16px 18px;border-radius:22px;background:var(--surface-2)}
.ds-deal .c-about.ds-rich{font-size:15px}
.ds-deal .ds-clamp{max-height:15em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.ds-deal .c-more{cursor:pointer}

/* Store links inside Offer details become redirect buttons */
.ds-inline-cta{display:inline-flex;align-items:center;max-width:100%;min-height:36px;margin:2px 0;padding:6px 14px;border-radius:999px;background:var(--sky);color:#155E8A;font:700 14px/1.3 var(--font);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;cursor:pointer;transition:transform .2s var(--spring),filter .2s}
.ds-inline-cta:hover{filter:brightness(.96)}
.ds-inline-cta:active{transform:scale(.96)}
.ds-inline-cta img{margin:0;border-radius:8px}
/* A linked picture: the whole image, not cropped into the pill */
.ds-inline-cta.is-img{display:block;width:auto;min-height:0;margin:.8em auto;padding:0;border-radius:16px;background:none;white-space:normal;overflow:visible}
.ds-inline-cta.is-img:hover{filter:none;opacity:.92}
.ds-inline-cta.is-img:active{transform:scale(.98)}
.ds-inline-cta.is-img img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:16px}

/* Spec grid */
.ds-deal .c-spec{min-width:0}
.ds-deal .c-spec dd{overflow-wrap:anywhere}

/* Pricing details */
.ds-pricing{margin-top:12px;padding:16px 18px;border-radius:22px;background:var(--surface-2);font:400 14px/1.65 var(--font)}
.ds-pricing strong{font-weight:700}
.ds-pricing .ds-pricing-by{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-strong);font:500 12px/1.6 var(--font);color:var(--muted)}
.ds-pricing-by a{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Telegram card: the heading is an h2 here (it is its own section) */
.ds-deal .ss-tg{margin:28px 0 0}
.ds-deal .ss-tg>div{position:relative}
.ds-deal .ss-tg h2{position:relative;max-width:76%;font:800 23px/1.08 var(--font);letter-spacing:-.045em;color:#FFFFFF}
.ds-deal .ss-tg .ss-plane{fill:currentColor}
.ds-deal .ss-tg a.ss-pill{text-decoration:none}

/* Related rails + fine print */
.ds-related{margin-top:4px}
.ds-related>.c-h2{margin-bottom:4px}
.ds-related .ss-h2{padding:22px 0 12px}
.ds-related .ss-h2 h2{font-size:18px}
.ds-fine{margin:24px 0 0;font:500 12px/1.6 var(--font);color:var(--muted)}
.ds-fine a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Heart pop on the buy-bar heart */
.ds-deal .c-buy .c-round{cursor:pointer}
.ds-deal .c-buy .c-round.on svg,.ds-deal .c-buy .c-round[aria-pressed="true"] svg{fill:#D0344F;animation:dsd-pop .5s var(--spring)}
.ds-deal .c-buy .c-round[aria-pressed="true"]{color:#D0344F}
@keyframes dsd-pop{0%{transform:scale(.3)}60%{transform:scale(1.35)}100%{transform:scale(1)}}

@media (max-width:991.98px){
  /* The two-column desktop shell collapses into the sheet. */
  .ds-deal .ss-dimg{display:none}
  .ds-deal .ss-dl{display:block;margin:0}
  .ds-deal .ss-dsheet{padding:0;border-radius:0;background:none;box-shadow:none}

  /* Glass buy bar owns the bottom of the screen; the dock steps aside. */
  .ds-deal .c-buy{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto}
  /* The bar steps aside while the page's own Get button is on screen (ds-deal.js), so the same
     button isn't shown twice, and slides back in once that button has scrolled away. */
  .ds-deal .c-buy.ds-bar-watch{animation:none;transition:transform .45s var(--spring),opacity .25s ease,visibility 0s}
  .ds-deal .c-buy.ds-bar-watch.is-off{transform:translateY(calc(100% + 32px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s ease,opacity .2s ease,visibility 0s linear .3s}
  .c-dock,.ds-mobile-nav-wrapper{display:none!important}
}

/* Tablets: keep the reading column comfortable inside the full-bleed sheet. */
@media (min-width:576px) and (max-width:991.98px){
  .ds-deal .c-sheet{padding-left:max(18px,calc((100% - 720px) / 2));padding-right:max(18px,calc((100% - 720px) / 2))}
  .ds-deal .c-dhero{height:min(460px,52vh)}
}

@media (max-width:379.98px){
  .ds-deal .c-getbtn{font-size:15px;padding:0 14px}
  .ds-deal .c-dprice .odo{font-size:36px}
  .ds-deal .c-dprice .odo.ds-odo-l{font-size:30px}
  .ds-deal .c-dprice .odo.ds-odo-xl{font-size:25px}
}

/* ---------- Desktop (>=992px): sticky image panel + sheet card ---------- */
@media (min-width:992px){
  .ds-deal .c-dhero,.ds-deal .c-buy,.ds-deal .c-handle{display:none}
  .ds-deal .c-sheet{max-width:1232px;margin:0 auto;padding:0 32px 48px;border-radius:0;background:none;box-shadow:none}
  .ds-deal .ss-crumbs{padding:18px 0 0}
  .ds-crumbs a[aria-current]{max-width:420px}
  .ds-deal .ss-dl{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:32px;align-items:start;margin-top:18px}
  .ds-deal .ss-dimg{display:grid;grid-template-rows:100%;grid-template-columns:100%;height:clamp(420px,calc(100vh - 140px),620px);margin:0}
  .ds-deal .ss-dimg>img{max-height:calc(100% - 150px);object-fit:contain}
  /* The chips stay above the photo's zoom button; only the share button in them takes taps. */
  .ds-deal .ss-dimg .chips{z-index:3;pointer-events:none}
  .ds-deal .ss-dimg .chips .c-glass{pointer-events:auto}
  .ds-deal .ss-dimg .ss-fact .ic{color:currentColor}
  .ds-deal .c-dprice .odo{font-size:48px}
  .ds-deal .c-dprice .odo.ds-odo-l{font-size:40px}
  .ds-deal .c-dprice .odo.ds-odo-xl{font-size:34px}
  .ds-deal .c-pring{width:96px;height:96px}
  .ds-deal .c-hl{margin:20px 0 0;padding:0;flex-wrap:wrap;overflow:visible}
  .ds-deal .ss-dsheet .ss-steps{grid-template-columns:1fr}
  .ds-deal .ss-tg{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:40px 0 0;padding:30px 36px}
  .ds-deal .ss-tg h2,.ds-deal .ss-tg p{max-width:none}
  .ds-deal .ss-tg-btns{margin:0;flex-wrap:nowrap}
  .ds-deal .ss-tg .ss-plane{right:360px;top:4px}
  .ds-related>.c-h2{margin-top:40px;font-size:28px;letter-spacing:-.035em}
  .ds-related .ss-h2{padding:28px 0 14px}
  .ds-related .ss-h2 h2{font-size:22px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  /* Keep fill-mode end states (odometer digits, ring value) but skip the motion. */
  .ds-deal *,.ds-deal *::before,.ds-deal *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* Scroll-driven and looping image motion is removed outright. */
  .ds-deal .c-dhero>img,.ds-deal .ss-dimg>img,.ds-deal .ss-plane,.ds-deal .c-dmeta .fresh i{animation:none!important}
}

/* Long product names: three lines with an ellipsis, full name on demand. */
.ds-deal .c-dtitle{font-size:20px;line-height:1.28;letter-spacing:-.02em;overflow-wrap:anywhere}
.ds-deal .ds-tclamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ds-deal .ds-tmore{display:inline-flex;align-items:center;gap:4px;min-height:36px;margin:2px 0 0;padding:0;border:0;background:none;font:700 13px/1 var(--font);color:var(--muted);cursor:pointer;transition:color .2s}
.ds-deal .ds-tmore:hover{color:var(--text)}
.ds-deal .ds-tmore .ic{transition:transform .3s var(--spring)}
.ds-deal .ds-tmore[aria-expanded="true"] .ic{transform:rotate(180deg)}
.ds-deal .ds-tmore[hidden]{display:none}
@media (min-width:992px){
  .ds-deal .ss-dsheet .c-dtitle{font-size:24px;line-height:1.25}
}

/* Phones: the price card sits on the first screen, above the floating buy bar (the whole card from
   about 640px of screen height, the price figure from about 550px). The photo hero takes the height
   that is left, between 160 and 340px (svh: the screen with the browser's bars showing), and the
   pieces above the price are tighter: a two-line title (the full name is a tap away), smaller gaps.
   It used to keep 300px+ of photo, which pushed the price under the bar on most phones. */
@media (max-width:575.98px){
  .ds-deal .c-dhero{min-height:0;height:clamp(160px,calc(100vh - 430px),340px);height:clamp(160px,calc(100svh - 430px),340px)}
  .ds-deal .c-dhero>img{max-height:calc(100% - 24px)}
  .ds-deal .c-handle{margin:2px auto 10px}
  .ds-deal .ss-crumbs{padding-bottom:4px}
  .ds-deal .c-dtitle{margin-top:8px}
  .ds-deal .ds-tclamp{-webkit-line-clamp:2}
  .ds-deal .ds-tmore{min-height:28px}
  .ds-deal .ss-dsheet .c-dprice{margin-top:12px}
}