/* ══════════════════════════════════════════════════════════════════════════
   /deals/{slug} — the components only this page needs

   Scoped `.v2x.atd.atdx.dld`, one class deeper than public-atd-detail.css, so a
   deal-only rule always out-cascades the shared rule it refines and can never
   leak sideways onto the other nine module pages.

   Everything else — hero, section rail, tone ramp, checklists, numbered steps,
   §PROSCONS panels, sidebar cards, related grid, closing band — is the shared
   kit. What is left is the one thing a deal page is FOR: the money. The offer
   panel below is that, and nothing else lives here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §DLD-OFFER) The offer panel ────────────────────────────────────────
   Parked in the hero's right column through the hero's $asideView slot, so it
   also has to fill it: `.atdx-aside` is a full-height flex column and a card
   that will not grow leaves a gap under itself whenever the identity half of
   the hero runs taller. */
.v2x.atd.atdx.dld .dld-offer{ flex:1 1 auto; }

/* ── §DLD-PRICE) The price stack ────────────────────────────────────────
   Four rungs, each a different weight, so the eye lands in the order the money
   makes sense in: what it used to cost (small, struck), the label, what it
   costs now (the largest thing on the page after the H1, and the only green
   number), then the saving as a pill. No plate behind it — the numbers carry
   themselves, and a tinted box under a tinted pill was two competing surfaces
   fighting for the same 400px. */
.v2x.atd.atdx.dld .dld-o-price{ margin:0 0 18px; }
.v2x.atd.atdx.dld .dld-o-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--line,#e7eaf1);
}
.v2x.atd.atdx.dld .dld-o-k{
  font-size:.78rem; font-weight:650; line-height:1.4; color:var(--muted);
}
.v2x.atd.atdx.dld .dld-o-kk{
  display:block; font-weight:800; color:var(--ink);
}
.v2x.atd.atdx.dld .dld-o-was{
  font-size:1.02rem; font-weight:650; color:var(--muted); text-decoration:line-through;
  text-decoration-thickness:2px; text-decoration-color:rgba(244,63,94,.7);
}
.v2x.atd.atdx.dld .dld-o-now{
  display:flex; align-items:baseline; gap:6px; margin:2px 0 0;
  font-size:2.55rem; font-weight:850; line-height:1.05; letter-spacing:-.025em;
  color:#07845F;
}
body.theme-dark .v2x.atd.atdx.dld .dld-o-now{ color:#34D399; }
.v2x.atd.atdx.dld .dld-o-per{
  font-size:.92rem; font-weight:650; letter-spacing:0; color:var(--muted);
}
/* A struck parent paints its children too, and `text-decoration:none` on a
   descendant cannot cancel it — only a fresh inline box escapes the line. */
.v2x.atd.atdx.dld .dld-o-was .dld-o-per{ display:inline-block; margin-left:5px; }
/* The saving is a pastel plate with dark-green ink, never green-on-green: a
   tint carrying its own tone as text fails AA at this size. */
.v2x.atd.atdx.dld .dld-o-save{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  padding:7px 13px; border-radius:999px;
  font-size:.84rem; font-weight:800; line-height:1.3; color:#046C4E;
  background-color:rgba(16,185,129,.13); border:1px solid rgba(16,185,129,.26);
}
body.theme-dark .v2x.atd.atdx.dld .dld-o-save{
  color:#6EE7B7; background-color:rgba(16,185,129,.18); border-color:rgba(16,185,129,.32);
}
.v2x.atd.atdx.dld .dld-o-note{
  margin:10px 0 0; font-size:.82rem; line-height:1.5; color:var(--muted);
}

/* ── §DLD-CTA) The claim button ─────────────────────────────────────────
   Full width on purpose: it is the one action the panel exists to offer, and a
   button that stops short of the card edge reads as one option among several.
   Only the box changes — the gradient, shadow and hover come from the shared
   `.atd-cta-row .atd-btn-primary`, so the deal page cannot drift from the rest
   of the site's primary button. `color` is restated anyway because
   `.v2x.atd a` paints every anchor accent-blue at (0,2,1); this is (0,4,0) and
   its hover (0,4,1), which clears both. */
.v2x.atd.atdx.dld .dld-o-ctarow{ margin-top:16px; }
.v2x.atd.atdx.dld .dld-o-cta{
  display:flex; width:100%; justify-content:center; gap:10px;
  padding:15px 20px; border-radius:14px; font-size:1rem; font-weight:750; color:#fff;
}
.v2x.atd.atdx.dld .dld-o-cta:hover,
.v2x.atd.atdx.dld .dld-o-cta:focus,
.v2x.atd.atdx.dld .dld-o-cta:active{ color:#fff; }
.v2x.atd.atdx.dld .dld-o-cta .atd-btn-ic{ display:inline-flex; align-items:center; }

/* ── §DLD-COUPON) The code field ────────────────────────────────────────
   A dashed field that reads as something to be torn off and used. Neutral, so
   the only saturated things in the panel stay the price and the button. The
   code is monospace and selectable — a visitor who cannot use the copy button
   (no clipboard permission, an in-app browser) must still be able to read and
   type it, so it is never an image and never truncated. */
.v2x.atd.atdx.dld .dld-coupon{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:14px; padding:12px 14px; border-radius:14px;
  background-color:rgba(100,116,139,.06); border:2px dashed rgba(100,116,139,.32);
}
body.theme-dark .v2x.atd.atdx.dld .dld-coupon{
  background-color:rgba(148,163,184,.10); border-color:rgba(148,163,184,.28);
}
.v2x.atd.atdx.dld .dld-coupon-tx{
  flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:center;
}
.v2x.atd.atdx.dld .dld-coupon-l{
  font-size:.66rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.v2x.atd.atdx.dld .dld-coupon-c{
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:1.15rem; font-weight:750; letter-spacing:.09em; color:var(--ink);
  overflow-wrap:anywhere; user-select:all;
}
.v2x.atd.atdx.dld .dld-coupon-b{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:11px;
  font-size:.85rem; font-weight:750; line-height:1.3; cursor:pointer;
  color:var(--accent-dark,#2060C0); background-color:#fff; border:1px solid var(--accent,#3680ED);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.v2x.atd.atdx.dld .dld-coupon-b:hover{
  background-color:var(--accent-soft,#eef4fe); color:var(--accent-dark,#2060C0);
}
body.theme-dark .v2x.atd.atdx.dld .dld-coupon-b{
  color:#9CC3FF; background-color:rgba(54,128,237,.12); border-color:rgba(156,195,255,.45);
}
body.theme-dark .v2x.atd.atdx.dld .dld-coupon-b:hover{
  background-color:rgba(54,128,237,.22); color:#C7DCFF;
}
/* Copied: the one moment the button is allowed to be solid — it is confirming,
   not inviting. */
.v2x.atd.atdx.dld .dld-coupon-b.is-done,
body.theme-dark .v2x.atd.atdx.dld .dld-coupon-b.is-done{
  color:#fff; background-color:#0EA575; border-color:#0EA575;
}

.v2x.atd.atdx.dld .dld-o-checks{ margin-top:14px; }

/* ── §DLD-FOOT) Proof, then the clock ───────────────────────────────────
   Two quiet lines under everything else. Amber while the deal is running out,
   rose once it has ended, muted when it simply has no end date — "no end date
   announced" is stated rather than left blank, because an offer with no expiry
   and an offer whose expiry was never entered look identical otherwise. */
.v2x.atd.atdx.dld .dld-o-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line,#e7eaf1);
  display:flex; flex-direction:column; gap:9px;
}
.v2x.atd.atdx.dld .dld-o-fl{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:.83rem; font-weight:650; line-height:1.45; color:var(--muted);
}
.v2x.atd.atdx.dld .dld-o-fl svg{ flex:0 0 auto; }
.v2x.atd.atdx.dld .dld-o-fl strong{ font-weight:850; color:var(--ink); }
.v2x.atd.atdx.dld .dld-o-claimed svg{ color:#F97316; }
.v2x.atd.atdx.dld .dld-o-exp.is-soon{ color:#A85B08; font-weight:750; }
body.theme-dark .v2x.atd.atdx.dld .dld-o-exp.is-soon{ color:#FBC97A; }
.v2x.atd.atdx.dld .dld-o-exp.is-gone{ color:#B31D3C; font-weight:750; }
body.theme-dark .v2x.atd.atdx.dld .dld-o-exp.is-gone{ color:#FB9BB0; }

@media (max-width:575.98px){
  .v2x.atd.atdx.dld .dld-o-now{ font-size:2.15rem; }
  .v2x.atd.atdx.dld .dld-coupon-tx{ flex:1 1 100%; }
  .v2x.atd.atdx.dld .dld-coupon-b{ width:100%; justify-content:center; }
}