/* 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 ---------- */
.ds-deal .c-dhero{height:min(430px,56vh);min-height:300px;margin:0}
.ds-deal .c-dhero>img{width:78%;max-width:440px;height:auto;max-height:calc(100% - 72px);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)}}
}

.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}
.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 */
.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}

/* 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}
  .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;height:clamp(420px,calc(100vh - 140px),620px);margin:0}
  .ds-deal .ss-dimg>img{max-height:calc(100% - 150px);object-fit:contain}
  .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: keep the photo hero compact so the price sits on the first screen. */
@media (max-width:575.98px){
  .ds-deal .c-dhero{height:min(340px,44vh)}
}