/* NOS price drop sale: "the hour dial" panel, price track, reserve dialog, sticky bar, listing cards.
 * Follows the shop's own palette: its --gold, --gold-light, --dark, --dark-2, --text, --white and
 * --border variables first, then Astra's global colours, then the NOS values. The muted greys, boxes
 * and rules are mixed from that palette, so on the NOS palette they are exactly the NOS values and on
 * a light theme they keep their contrast. The dial is a dark watch face on any theme. Fonts are the
 * shop's (Cormorant Garamond, Jost), which the theme loads. Motion only for real events, the
 * seconds sweep and a price falling by the cent; prefers-reduced-motion shows still states. */
.nosdp {
  --nosdp-gold: var(--gold, var(--ast-global-color-0, #d4af5a));
  --nosdp-gold-hi: var(--gold-light, var(--ast-global-color-1, #f0d080));
  --nosdp-gold-soft: var(--ast-global-color-0, #e2c48e);
  --nosdp-bg: var(--dark, var(--ast-global-color-4, #0a0a0a));
  --nosdp-text: var(--text, var(--ast-global-color-3, #e0e0e0));
  --nosdp-head: var(--white, var(--ast-global-color-2, #fff));
  --nosdp-bg-2: var(--dark-2, color-mix(in srgb, var(--nosdp-head) 3%, var(--nosdp-bg)));
  --nosdp-box: color-mix(in srgb, var(--nosdp-head) 2%, var(--nosdp-bg));
  --nosdp-muted: color-mix(in oklab, var(--nosdp-head) 63%, var(--nosdp-bg));
  --nosdp-grey: color-mix(in oklab, var(--nosdp-head) 59%, var(--nosdp-bg));
  --nosdp-line: var(--border, color-mix(in srgb, var(--nosdp-gold) 18%, transparent));
  --nosdp-rule: color-mix(in srgb, var(--nosdp-head) 8%, transparent);
  --nosdp-serif: "Cormorant Garamond", Georgia, serif;
  --nosdp-sans: "Jost", system-ui, sans-serif;
  color: var(--nosdp-text);
  font-family: var(--nosdp-sans);
  font-variant-numeric: tabular-nums;
}
.nosdp *, .nosdp *::before, .nosdp *::after { box-sizing: border-box; }
.nosdp p, .nosdp dl, .nosdp dd, .nosdp ul, .nosdp figure { margin: 0; }
.nosdp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nosdp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nosdp a:focus-visible, .nosdp button:focus-visible, .nosdp summary:focus-visible, .nosdp-msg:focus-visible { outline: 2px solid var(--nosdp-gold); outline-offset: 3px; }
/* The theme's sticky add-to-cart bar never shows on a sale watch (the plugin's own bar takes its place). */
body.nosdp-sale-product .ast-sticky-add-to-cart { display: none !important; }

/* ---------- panel ---------- */
/* The owner's preview of a coming sale: a thin gold ribbon above the panel. */
.nosdp-ribbon { margin: 6px 0 0 !important; padding: 8px 12px; border-top: 2px solid var(--nosdp-gold); background: color-mix(in srgb, var(--nosdp-gold) 8%, transparent); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0.04em; color: var(--nosdp-gold-soft) !important; }
.nosdp-ribbon + .nosdp-panel { margin-top: 0; }
.nosdp-panel { position: relative; margin: 6px 0 30px; padding-top: 18px; border-top: 1px solid var(--nosdp-line); font-size: 15px; line-height: 1.6; }
.nosdp-panel .nosdp-eyebrow { margin: 0; padding: 0; font-family: var(--nosdp-sans) !important; font-size: 11.5px; font-weight: 600 !important; line-height: 1.4; letter-spacing: 0.24em !important; text-transform: uppercase; color: var(--nosdp-gold); }
.nosdp-panel .nosdp-chip { position: absolute; top: 18px; right: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nosdp-text); }
.nosdp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nosdp-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nosdp-gold) 16%, transparent); }
.nosdp-chip.nosdp-tone-held::before, .nosdp-chip.nosdp-tone-paused::before { background: var(--nosdp-grey); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nosdp-head) 7%, transparent); }
.nosdp-chip.nosdp-tone-upcoming::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--nosdp-gold); }
.nosdp-top { display: flex; align-items: center; gap: 30px; margin-top: 20px; }
.nosdp-dial-wrap { --dial: 184px; flex: none; width: var(--dial); height: var(--dial); }
.nosdp-main { flex: 1; min-width: 0; }
.nosdp-label { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nosdp-muted); }
.nosdp-was { margin-top: 8px !important; font-size: 21px; font-weight: 400; line-height: 1.2; color: var(--nosdp-gold); }
/* Dimmed toward black, not the page: the same as 72% on the dark palette, darker (still readable) on a light one. */
.nosdp-was s { color: color-mix(in srgb, var(--nosdp-gold) 72%, #0a0a0a); text-decoration-thickness: 1px; }
.nosdp-price-box { position: relative; margin-top: 2px; }
.nosdp-price, .nosdp-roll { font-family: var(--nosdp-sans); font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; color: var(--nosdp-gold); white-space: nowrap; }
.nosdp-price.is-rolling { color: transparent; }
.nosdp-roll { position: absolute; left: 0; top: 0; display: flex; white-space: pre; pointer-events: none; }
.nosdp-w { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
.nosdp-w-in { display: flex; flex-direction: column; animation: nosdp-wheel 1s cubic-bezier(0.45, 1.18, 0.55, 1) both; }
.nosdp-w-in > span { display: block; height: 1.1em; }
@keyframes nosdp-wheel { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.nosdp-asof { margin-top: 4px !important; font-size: 12.5px; color: var(--nosdp-muted); }
/* A daily drop: how far below the shop price the price is now (24 October 2026). */
.nosdp-below { margin-top: 6px !important; font-size: 14px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--nosdp-gold); }
.nosdp-below[hidden] { display: none; }
.nosdp-next { margin-top: 10px !important; font-size: 14.5px; line-height: 1.5; color: var(--nosdp-muted); }
.nosdp-next strong { font-weight: 500; color: var(--nosdp-text); }
.nosdp-tone-upcoming .nosdp-price, .nosdp-tone-held .nosdp-price, .nosdp-tone-paused .nosdp-price { color: var(--nosdp-gold-soft); }
.nosdp-note { margin-top: 22px !important; padding: 13px 16px; border-left: 2px solid var(--nosdp-gold); background: var(--nosdp-box); font-size: 14px; line-height: 1.6; color: var(--nosdp-text) !important; }
.nosdp-note.nosdp-tone-held, .nosdp-note.nosdp-tone-paused { border-left-color: var(--nosdp-grey); }
.nosdp-note.nosdp-tone-ended { padding: 0; border: 0; background: none; font-family: var(--nosdp-serif); font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--nosdp-head) !important; }
.nosdp-note strong { font-weight: 500; color: var(--nosdp-head); }
.nosdp-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nosdp-left { white-space: nowrap; }

/* A falling price (continuous sales): the euros steady, the cents on wheels. The box keeps the
   width of the starting price and the struck price keeps its line, so nothing moves around it. */
.nosdp-price.is-live { display: block; min-height: 1.1em; }
.nosdp-pv { display: inline-flex; align-items: flex-start; height: 1.1em; line-height: 1.1em; white-space: pre; }
.nosdp-pi, .nosdp-pp { display: block; height: 1.1em; }
.nosdp-wh { display: block; width: 1ch; height: 1.1em; overflow: hidden; text-align: center; }
.nosdp-wh-in { display: flex; flex-direction: column; will-change: transform; }
.nosdp-wh-in > span { display: block; height: 1.1em; line-height: 1.1em; }
.nosdp-panel.is-at-start [data-nosdp-was], .nosdp-card.is-at-start .nosdp-card-was { visibility: hidden; }
.nosdp-next-2 { margin-top: 2px !important; }

/* ---------- the hour dial ---------- */
/* A dark watch face on any theme: its own fixed palette (the NOS gold, white and greys). */
.nosdp-dial { --nosdp-gold: var(--gold, #d4af5a); --nosdp-gold-hi: var(--gold-light, #f0d080); --nosdp-head: #fff; --nosdp-muted: #999; --nosdp-grey: #8f8f8f; position: relative; width: 100%; height: 100%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.022) 0deg 0.6deg, rgba(255, 255, 255, 0) 0.6deg 2.4deg), radial-gradient(circle at 50% 34%, #1c1c1c 0%, #121212 48%, #0b0b0b 100%); box-shadow: 0 0 0 5px #0d0d0d, 0 0 0 6px rgba(212, 175, 90, 0.16), 0 22px 44px -18px #000, inset 0 2px 10px rgba(0, 0, 0, 0.85); }
.nosdp-d-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.nosdp-d-bezel { fill: none; stroke: rgba(212, 175, 90, 0.42); stroke-width: 1; }
.nosdp-d-inner { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.nosdp-d-m { fill: none; stroke: #5f5f5f; stroke-width: 0.9; }
.nosdp-d-f { fill: none; stroke: #a8a8a8; stroke-width: 1.4; }
.nosdp-d-q { fill: none; stroke: var(--nosdp-gold); stroke-width: 2.6; }
.nosdp-d-track { fill: none; stroke: rgba(212, 175, 90, 0.1); stroke-width: 3; }
.nosdp-d-arc { fill: none; stroke: var(--nosdp-gold); stroke-width: 3; filter: drop-shadow(0 0 3px rgba(212, 175, 90, 0.55)); transition: stroke-dashoffset 1s linear; }
.is-reset .nosdp-d-arc { transition: stroke-dashoffset 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nosdp-d-pulse { fill: none; stroke: var(--nosdp-gold-hi); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nosdp-d-pulse.is-on { animation: nosdp-pulse 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) 1; }
@keyframes nosdp-pulse { 0% { opacity: 0.9; transform: scale(1); stroke-width: 3; } 100% { opacity: 0; transform: scale(1.2); stroke-width: 0.5; } }
.nosdp-d-hand path { stroke: var(--nosdp-gold-hi); stroke-width: 1.15; stroke-linecap: round; }
.nosdp-d-hand circle { fill: var(--nosdp-gold-hi); }
.nosdp-d-hand .nosdp-d-pin { fill: #0b0b0b; }
.nosdp-d-c { position: absolute; inset: 0; z-index: 1; pointer-events: none; text-align: center; }
.nosdp-d-l { position: absolute; left: 14%; right: 14%; top: 29%; display: block; font-size: calc(var(--dial) * 0.052); font-weight: 600; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: var(--nosdp-gold); text-shadow: 0 0 4px #141414, 0 0 8px #141414; }
/* The date window: the number on its own dark ground, framed, above the hand. */
.nosdp-d-w { position: absolute; left: 50%; top: 57%; display: flex; align-items: baseline; justify-content: center; gap: calc(var(--dial) * 0.025); min-width: 44%; padding: calc(var(--dial) * 0.03) calc(var(--dial) * 0.05) calc(var(--dial) * 0.026); border: 1px solid rgba(212, 175, 90, 0.55); border-radius: 3px; background: linear-gradient(180deg, #050505 0%, #0e0e0e 100%); box-shadow: 0 0 0 2px #0f0f0f, inset 0 2px 4px rgba(0, 0, 0, 0.9); transform: translateX(-50%); white-space: nowrap; }
.nosdp-d-w[hidden] { display: none; }
.nosdp-d-v { font-size: calc(var(--dial) * 0.15); font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--nosdp-head); font-variant-numeric: tabular-nums; }
.nosdp-d-u { font-size: calc(var(--dial) * 0.046); font-weight: 500; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nosdp-muted); }
.nosdp-d-u:empty { display: none; }
.nosdp-d-w.is-long .nosdp-d-v { font-size: calc(var(--dial) * 0.1); }
.nosdp-d-w.is-long { top: 59%; }
.nosdp-d-held .nosdp-d-w, .nosdp-d-paused .nosdp-d-w { border-color: rgba(255, 255, 255, 0.22); }
.nosdp-d-held .nosdp-d-q, .nosdp-d-paused .nosdp-d-q { stroke: var(--nosdp-grey); }
.nosdp-d-held .nosdp-d-arc, .nosdp-d-paused .nosdp-d-arc { stroke: var(--nosdp-grey); filter: none; }
.nosdp-d-held .nosdp-d-track, .nosdp-d-paused .nosdp-d-track { stroke: rgba(255, 255, 255, 0.06); }
.nosdp-d-held .nosdp-d-hand path, .nosdp-d-paused .nosdp-d-hand path { stroke: #b5b5b5; }
.nosdp-d-held .nosdp-d-hand circle, .nosdp-d-paused .nosdp-d-hand circle { fill: #b5b5b5; }
.nosdp-d-held .nosdp-d-hand .nosdp-d-pin, .nosdp-d-paused .nosdp-d-hand .nosdp-d-pin { fill: #0b0b0b; }
.nosdp-d-held .nosdp-d-l, .nosdp-d-paused .nosdp-d-l { color: var(--nosdp-muted); }
.nosdp-d-held .nosdp-d-bezel, .nosdp-d-paused .nosdp-d-bezel { stroke: rgba(255, 255, 255, 0.16); }
/* Ended: the dial at rest, the word engraved. */
.nosdp-dial.is-rest .nosdp-d-hand, .nosdp-dial.is-rest .nosdp-d-arc, .nosdp-dial.is-rest .nosdp-d-track { display: none; }
.nosdp-dial.is-rest .nosdp-d-m, .nosdp-dial.is-rest .nosdp-d-f { opacity: 0.55; }
.nosdp-dial.is-rest .nosdp-d-q { stroke: #7d7d7d; }
.nosdp-dial.is-rest .nosdp-d-bezel { stroke: rgba(255, 255, 255, 0.14); }
.nosdp-d-e { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 0.2em; font-family: var(--nosdp-serif); font-size: calc(var(--dial) * 0.13); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #a9a9a9; background: linear-gradient(180deg, #8e8e8e 0%, #d2d2d2 48%, #8a8a8a 52%, #b4b4b4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1)) drop-shadow(0 -1px 0 #000); }

/* ---------- actions ---------- */
.nosdp-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.nosdp .nosdp-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 16px 40px; overflow: hidden; border: 0.8px solid var(--nosdp-gold); border-radius: 0; background: transparent; font-family: var(--nosdp-sans); font-size: 12.24px; font-weight: 600; line-height: 1.25; letter-spacing: 2.69px; text-align: center; text-decoration: none; text-transform: uppercase; color: var(--nosdp-gold); cursor: pointer; box-shadow: none; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.nosdp .nosdp-btn > span { position: relative; z-index: 1; }
.nosdp .nosdp-btn-primary { background: var(--nosdp-gold); color: var(--nosdp-bg); }
.nosdp .nosdp-btn-primary:hover, .nosdp .nosdp-btn-primary:focus-visible { background: var(--nosdp-gold-hi); border-color: var(--nosdp-gold-hi); color: var(--nosdp-bg); }
/* Light crossing a polished case. */
.nosdp .nosdp-btn-primary::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.nosdp .nosdp-btn-primary:not([disabled]):hover::after { animation: nosdp-sheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) 1; }
@keyframes nosdp-sheen { 0% { left: -40%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
.nosdp .nosdp-btn[disabled] { background: transparent; border-color: color-mix(in srgb, var(--nosdp-head) 16%, transparent); color: var(--nosdp-muted); cursor: default; opacity: 1; }
.nosdp .nosdp-btn-outline:hover, .nosdp .nosdp-btn-outline:focus-visible { background: var(--nosdp-gold); color: var(--nosdp-bg); }
.nosdp .nosdp-btn-quiet { align-self: center; width: auto; min-height: 44px; padding: 10px 18px; border: 0; background: none; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--nosdp-muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--nosdp-muted) 50%, transparent); text-underline-offset: 5px; }
.nosdp .nosdp-btn-quiet:hover { background: none; color: var(--nosdp-text); }
.nosdp-hint { margin-top: 12px !important; font-size: 13px; line-height: 1.5; text-align: center; color: var(--nosdp-muted) !important; }
.nosdp-msg { margin-top: 12px !important; font-size: 14px; color: var(--nosdp-text) !important; }
.nosdp-msg:empty { display: none; }

/* ---------- price track ---------- */
.nosdp .nosdp-track { margin-top: 30px !important; padding: 0; border: 0; background: none; box-shadow: none; }
.nosdp-track-svg { width: 100%; min-height: 110px; }
.nosdp-track-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.nosdp-track-svg text { font-family: var(--nosdp-sans); }
.nosdp-track-cap { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 12px; color: var(--nosdp-muted); }
.nosdp-dots-key { flex: none; width: 22px; border-top: 2px dotted color-mix(in srgb, var(--nosdp-gold) 70%, transparent); transform: translateY(-3px); }
.nosdp-tr-g0 { stop-color: var(--nosdp-gold); stop-opacity: 0.24; }
.nosdp-tr-g1 { stop-color: var(--nosdp-gold); stop-opacity: 0; }
.nosdp-tr-grid { stroke: color-mix(in srgb, var(--nosdp-head) 22%, transparent); stroke-width: 1; }
.nosdp-tr-axis { stroke: color-mix(in srgb, var(--nosdp-head) 12%, transparent); stroke-width: 1; }
.nosdp-tr-day { fill: var(--nosdp-grey); font-size: 11px; letter-spacing: 0.04em; }
.nosdp-tr-end { stroke: color-mix(in srgb, var(--nosdp-gold) 40%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.nosdp-tr-past, .nosdp-tr-cur { fill: none; stroke: var(--nosdp-gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.nosdp-tr-cur { stroke-width: 2.2; }
.nosdp-tr-area.is-held, .nosdp-tr-area.is-paused { opacity: 0.45; filter: grayscale(1); }
.nosdp-tr-past.is-held, .nosdp-tr-cur.is-held, .nosdp-tr-past.is-paused, .nosdp-tr-cur.is-paused { stroke: #a5a5a5; }
.nosdp-tr-conn { fill: none; stroke: color-mix(in srgb, var(--nosdp-gold) 60%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.nosdp-tr-next { fill: var(--nosdp-bg); stroke: var(--nosdp-gold); stroke-width: 1.6; }
.nosdp-tr-dots { fill: none; stroke: color-mix(in srgb, var(--nosdp-gold) 60%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 6; }
.nosdp-tr-now { fill: var(--nosdp-gold-hi); stroke: var(--nosdp-bg); stroke-width: 2; }
.nosdp-tr-glow { fill: var(--nosdp-gold); opacity: 0.32; filter: blur(4px); }
.nosdp-tr-now.is-held, .nosdp-tr-now.is-paused { fill: #bdbdbd; }
.nosdp-tr-glow.is-held, .nosdp-tr-glow.is-paused { opacity: 0; }
.nosdp-tr text { paint-order: stroke; stroke: var(--nosdp-bg); stroke-width: 4px; stroke-linejoin: round; }
.nosdp-tr-lbl { fill: var(--nosdp-muted); font-size: 11.5px; }
.nosdp-tr-lbl-b { fill: var(--nosdp-text); font-size: 12px; font-weight: 500; }
.nosdp-tr-lbl-cur { fill: var(--nosdp-head); font-size: 12.5px; font-weight: 600; }
.nosdp-tr-lbl-next { fill: var(--nosdp-gold-soft); font-size: 12px; font-weight: 500; }
.nosdp-tr.is-draw .nosdp-tr-past { stroke-dasharray: 1; animation: nosdp-draw 1.5s cubic-bezier(0.45, 0, 0.2, 1) both; }
.nosdp-tr.is-draw .nosdp-tr-cur { stroke-dasharray: 1; animation: nosdp-draw 0.6s 1.35s ease-out both; }
.nosdp-tr.is-draw .nosdp-tr-area { animation: nosdp-fade 1.4s 0.3s ease both; }
.nosdp-tr.is-draw .nosdp-tr-now, .nosdp-tr.is-draw .nosdp-tr-glow, .nosdp-tr.is-draw .nosdp-tr-next, .nosdp-tr.is-draw .nosdp-tr-dots, .nosdp-tr.is-draw .nosdp-tr-conn, .nosdp-tr.is-draw text { animation: nosdp-fade 0.7s 1.6s ease both; }
.nosdp-tr.is-extend .nosdp-tr-cur { stroke-dasharray: 1; animation: nosdp-draw 1s ease-out both; }
.nosdp-tr.is-extend .nosdp-tr-now, .nosdp-tr.is-extend .nosdp-tr-glow, .nosdp-tr.is-extend .nosdp-tr-lbl-cur { animation: nosdp-fade 0.6s 0.4s ease both; }
@keyframes nosdp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* The price tape of a continuous sale: prices under a fixed gold index, the fallen stretch in gold,
   the coming prices as far as the snapshot vouches for them, then a dotted line. */
.nosdp-track.is-tape .nosdp-track-svg { min-height: 104px; }
.nosdp-track.is-tape .nosdp-track-svg svg { height: 104px; }
.nosdp-tp-t { stroke: color-mix(in srgb, var(--nosdp-head) 34%, transparent); stroke-width: 1; }
.nosdp-tp-t.is-major { stroke: color-mix(in srgb, var(--nosdp-head) 62%, transparent); stroke-width: 1.4; }
.nosdp-tp-t.is-past { stroke: color-mix(in srgb, var(--nosdp-gold) 75%, transparent); }
.nosdp-tp-l { fill: var(--nosdp-muted); font-size: 11.5px; letter-spacing: 0.02em; }
.nosdp-tp-l.is-past { fill: var(--nosdp-gold-soft); }
.nosdp-tp-rule { fill: none; stroke: color-mix(in srgb, var(--nosdp-head) 22%, transparent); stroke-width: 1; }
.nosdp-tp-done { fill: none; stroke-width: 3; stroke-linecap: round; }
.nosdp-tp-g0 { stop-color: var(--nosdp-gold); stop-opacity: 0; }
.nosdp-tp-g1 { stop-color: var(--nosdp-gold); stop-opacity: 1; }
.nosdp-tp-needle { fill: none; stroke: var(--nosdp-gold-hi); stroke-width: 1.2; }
.nosdp-tp-cap { fill: var(--nosdp-gold-hi); }
.nosdp-tape .nosdp-tp-dots { stroke: color-mix(in srgb, var(--nosdp-gold) 45%, transparent); }
@keyframes nosdp-fade { from { opacity: 0; } }

/* ---------- facts, how it works ---------- */
.nosdp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px !important; border-top: 1px solid var(--nosdp-rule); border-bottom: 1px solid var(--nosdp-rule); }
.nosdp-facts > div { padding: 15px 12px 15px 0; }
.nosdp-facts > div + div { padding-left: 18px; border-left: 1px solid var(--nosdp-rule); }
.nosdp-facts dt { font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nosdp-gold); }
.nosdp-facts dd { margin-top: 5px; line-height: 1.45; }
.nosdp-fv { display: block; font-size: 14px; white-space: nowrap; color: var(--nosdp-text); }
.nosdp-fs { display: block; font-size: 12.5px; color: var(--nosdp-muted); }
.nosdp-how { margin-top: 22px; border: 1px solid color-mix(in srgb, var(--nosdp-gold) 15%, transparent); background: var(--nosdp-box); }
.nosdp-how summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 20px; font-size: 12.24px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nosdp-gold); cursor: pointer; list-style: none; }
.nosdp-how summary::-webkit-details-marker { display: none; }
.nosdp-how-i { position: relative; flex: none; width: 12px; height: 12px; }
.nosdp-how-i::before, .nosdp-how-i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 0.3s ease; }
.nosdp-how-i::after { transform: rotate(90deg); }
.nosdp-how[open] .nosdp-how-i::after { transform: rotate(0deg); }
.nosdp-how ul { margin: 0 !important; padding: 0 20px 8px !important; list-style: none !important; }
.nosdp-how li { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--nosdp-head) 6%, transparent); }
.nosdp-how li strong { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nosdp-gold-soft); }
.nosdp-how li span { font-size: 13px; line-height: 1.6; color: var(--nosdp-muted); }
.nosdp-tz { margin-top: 14px !important; font-size: 12px; color: var(--nosdp-muted) !important; }
.nosdp-panel [data-nosdp-part]:empty { display: none; }

/* ---------- ended: the dial at rest beside the sentence and the way back to the collection ---------- */
.nosdp-panel.nosdp-tone-ended { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 30px; align-items: center; }
.nosdp-tone-ended > .nosdp-eyebrow { grid-column: 1 / -1; }
.nosdp-tone-ended > .nosdp-top { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 4px; }
.nosdp-tone-ended > [data-nosdp-part="note"], .nosdp-tone-ended > [data-nosdp-part="act"], .nosdp-tone-ended > .nosdp-msg { grid-column: 2; }
.nosdp-tone-ended > [data-nosdp-part="note"] { align-self: end; }
.nosdp-tone-ended > [data-nosdp-part="act"] { align-self: start; }
.nosdp-tone-ended .nosdp-note { margin-top: 20px !important; }
.nosdp-tone-ended .nosdp-actions { margin-top: 18px; }

/* ---------- the Sunday Steal page ---------- */
.nosdp-steal-wrap { width: 100%; }
/* Its own ground (the theme's content colour), as an article: the greys are mixed for it, not for the page behind. */
.nosdp-steal { box-sizing: border-box; max-width: 600px; margin: 44px auto 72px; padding: 40px 24px 44px; background: var(--nosdp-bg); text-align: center; font-size: 15px; line-height: 1.6; }
.nosdp-steal .nosdp-ribbon { margin: 0 0 18px !important; text-align: left; }
.nosdp-steal .nosdp-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nosdp-gold); }
.nosdp-steal-dial { --dial: 210px; width: var(--dial); height: var(--dial); margin: 30px auto 0; }
.nosdp-steal .nosdp-steal-h { margin: 30px 0 0; padding: 0; text-wrap: balance; font-family: var(--nosdp-serif) !important; font-size: 38px; font-weight: 400 !important; line-height: 1.15; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--nosdp-head); }
.nosdp-steal-p { margin-top: 12px !important; font-size: 18px; color: var(--nosdp-text); }
.nosdp-steal-watch { margin: 28px auto 0 !important; }
.nosdp-steal-watch img { display: block; width: min(340px, 100%); height: auto; margin: 0 auto; border-radius: 2px; background: #fff; }
.nosdp-steal .nosdp-steal-name { margin: 18px 0 0; padding: 0; text-wrap: balance; font-family: var(--nosdp-serif) !important; font-size: 30px; font-weight: 400 !important; line-height: 1.2; letter-spacing: 0.03em !important; color: var(--nosdp-head); }
.nosdp-steal .nosdp-price-box { margin-top: 18px; }
.nosdp-steal .nosdp-label { display: block; }
.nosdp-steal .nosdp-price { font-size: 52px; }
.nosdp-steal .nosdp-note { text-align: left; }
.nosdp-steal .nosdp-actions { max-width: 420px; margin-left: auto; margin-right: auto; }
.nosdp-steal-terms { margin: 26px auto 0 !important; padding: 16px 0 0 !important; max-width: 460px; border-top: 1px solid var(--nosdp-rule); list-style: none !important; text-align: left; }
.nosdp-steal-terms li { position: relative; margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--nosdp-muted); }
.nosdp-steal-terms li::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 6px; height: 6px; border: 1px solid var(--nosdp-gold); transform: rotate(45deg); }
.nosdp-steal .nosdp-msg { text-align: center; }
.nosdp-steal-pending .nosdp-steal-h { animation: nosdp-fade 0.6s ease both; }
.nosdp-steal-active .nosdp-steal-watch, .nosdp-steal-active .nosdp-price-box { animation: nosdp-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- reserve dialog ---------- */
.nosdp-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid color-mix(in srgb, var(--nosdp-gold) 22%, transparent); border-top: 2px solid var(--nosdp-gold); border-radius: 0; background: var(--nosdp-bg-2); color: var(--nosdp-text); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75); }
.nosdp-dialog::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.nosdp-dialog[open] { animation: nosdp-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes nosdp-rise { from { opacity: 0; transform: translateY(12px); } }
.nosdp-dlg-in { position: relative; padding: 30px 32px 24px; }
.nosdp .nosdp-x { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 26px; font-weight: 300; line-height: 1; color: var(--nosdp-muted); cursor: pointer; }
.nosdp .nosdp-x:hover { color: var(--nosdp-gold); background: none; }
.nosdp-dlg-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--nosdp-gold) !important; }
.nosdp-dialog .nosdp-dlg-title { margin: 8px 0 0; padding: 0; font-family: var(--nosdp-serif) !important; font-size: 32px; font-weight: 400 !important; line-height: 1.15; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--nosdp-head); }
.nosdp-dlg-name { margin-top: 6px !important; font-size: 14px; color: var(--nosdp-muted) !important; }
.nosdp-dlg-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 20px !important; padding: 14px 0; border-top: 1px solid var(--nosdp-rule); border-bottom: 1px solid var(--nosdp-rule); }
.nosdp-dlg-price dt { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nosdp-muted); }
.nosdp-dlg-price dd { font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--nosdp-gold); }
.nosdp-dlg-list { margin: 18px 0 0 !important; padding: 0 !important; list-style: none !important; }
.nosdp-dlg-list li { position: relative; margin: 0 0 9px; padding-left: 20px; font-size: 14px; line-height: 1.55; color: color-mix(in oklab, var(--nosdp-head) 79.7%, var(--nosdp-bg-2)) !important; }
.nosdp-dlg-list li::before { content: ""; position: absolute; left: 1px; top: 0.6em; width: 6px; height: 6px; border: 1px solid var(--nosdp-gold); transform: rotate(45deg); }
.nosdp-dlg-act { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; }
.nosdp-dialog .nosdp-msg { text-align: center; }

/* ---------- sticky bar (in the theme's sticky add-to-cart style) ---------- */
.nosdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; padding: 10px max(24px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border-top: 1px solid var(--nosdp-line); background: color-mix(in srgb, var(--nosdp-bg) 97%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nosdp-bar[hidden] { display: none; }
.nosdp-bar-in { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; }
.nosdp-bar-dial { --dial: 44px; position: relative; flex: none; width: 44px; height: 44px; box-shadow: 0 0 0 3px #0d0d0d, 0 0 0 4px rgba(212, 175, 90, 0.18); }
.nosdp-bar-dial .nosdp-d-m, .nosdp-bar-dial .nosdp-d-inner { display: none; }
.nosdp-bar-dial .nosdp-d-arc, .nosdp-bar-dial .nosdp-d-track { stroke-width: 7; }
.nosdp-bar-dial .nosdp-d-hand path { stroke-width: 3; }
.nosdp-bar-t { flex: 1; min-width: 0; overflow: hidden; font-family: var(--nosdp-serif); font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--nosdp-text); }
.nosdp-bar-x { display: flex; flex: none; align-items: center; gap: 22px; }
.nosdp-bar-p { min-width: 0; text-align: right; }
.nosdp-bar-l { display: block; overflow: hidden; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--nosdp-muted); }
.nosdp-bar-f { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--nosdp-gold); }
.nosdp-bar .nosdp-btn { width: auto; min-height: 44px; padding: 12px 28px; }
.nosdp-bar-short { display: none; }
.nosdp-bar-state { padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--nosdp-head) 16%, transparent); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nosdp-muted); }
html.nosdp-has-bar body { padding-bottom: var(--nosdp-bar-h, 66px); }
/* Keyboard focus is never hidden under the bar (WCAG 2.2 SC 2.4.11). */
html.nosdp-has-bar { scroll-padding-bottom: var(--nosdp-bar-h, 66px); }
.nosdp-bar:not([hidden]) { animation: nosdp-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes nosdp-up { from { transform: translateY(100%); } }

/* ---------- listing cards (in the shop's card style) ---------- */
.nosdp-list { display: grid; grid-template-columns: repeat(var(--nosdp-c, 3), minmax(0, 1fr)); gap: 20px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.nosdp-list > li { margin: 0 !important; padding: 0; }
.nosdp-cols-1 { --nosdp-c: 1; } .nosdp-cols-2 { --nosdp-c: 2; } .nosdp-cols-3 { --nosdp-c: 3; } .nosdp-cols-4 { --nosdp-c: 4; } .nosdp-cols-5 { --nosdp-c: 5; } .nosdp-cols-6 { --nosdp-c: 6; }
@media (max-width: 1000px) { .nosdp-list:not(.nosdp-cols-1) { --nosdp-c: 2; } }
@media (max-width: 360px) { .nosdp-list.nosdp-list { --nosdp-c: 1; } }
.nosdp-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--nosdp-gold) 9%, transparent); border-radius: 4px; background: var(--nosdp-bg-2); transition: border-color 0.3s ease; }
.nosdp-card:hover { border-color: color-mix(in srgb, var(--nosdp-gold) 35%, transparent); }
.nosdp-card-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.nosdp .nosdp-card-img img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; border-radius: 0; box-shadow: none; transition: transform 0.5s ease; }
.nosdp-card:hover .nosdp-card-img img { transform: scale(1.05); }
.nosdp .nosdp-card-label { position: absolute; top: 0; right: 0; padding: 6px 9px; border-radius: 0 0 0 2px; background: var(--nosdp-gold); font-size: 10.5px; font-weight: 600; line-height: 1.15; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nosdp-bg) !important; }
.nosdp-card-body { display: flex; flex: 1; flex-direction: column; padding: 12px 14px 14px; }
.nosdp .nosdp-card-title { margin: 0; padding: 0; font-family: var(--nosdp-serif) !important; font-size: 1rem; font-weight: 400 !important; line-height: 1.35; letter-spacing: 0.02em !important; text-transform: none; }
.nosdp .nosdp-card .nosdp-card-title a { color: var(--nosdp-text); text-decoration: none; }
.nosdp-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nosdp-card-body [data-nosdp-part="card"] { flex: 1; }
.nosdp-card-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; margin-top: 8px !important; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--nosdp-gold) !important; }
.nosdp-card-was { font-weight: 400; color: color-mix(in srgb, var(--nosdp-gold) 72%, #111); white-space: nowrap; }
.nosdp-card-now { white-space: nowrap; }
.nosdp-card-line { display: flex; align-items: center; gap: 7px; margin-top: 6px !important; font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.35; color: var(--nosdp-muted) !important; }
.nosdp-ring { flex: none; width: 14px; height: 14px; }
.nosdp-ring-t { fill: none; stroke: color-mix(in srgb, var(--nosdp-gold) 22%, transparent); stroke-width: 2.4; }
/* Also used in the theme's own product loops (outside .nosdp), hence the fallbacks. */
.nosdp-ring-a { fill: none; stroke: var(--nosdp-gold, var(--gold, var(--ast-global-color-0, #d4af5a))); stroke-width: 2.4; }
.nosdp-tone-held .nosdp-ring-a, .nosdp-tone-paused .nosdp-ring-a { stroke: var(--nosdp-grey, #8f8f8f); }
.nosdp-card-btn { display: block; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--nosdp-gold); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-align: center; text-transform: uppercase; color: var(--nosdp-gold); transition: background-color 0.3s ease, color 0.3s ease; }
.nosdp-card:hover .nosdp-card-btn { background: var(--nosdp-gold); color: var(--nosdp-bg); }
.nosdp-card-ended { margin-top: 10px !important; font-family: var(--nosdp-serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: color-mix(in oklab, var(--nosdp-head) 67.8%, var(--nosdp-bg-2)) !important; text-shadow: 0 1px 0 color-mix(in srgb, var(--nosdp-head) 7%, transparent), 0 -1px 0 var(--nosdp-bg); }
.nosdp-card.nosdp-tone-ended .nosdp-card-img img { opacity: 0.42; filter: grayscale(1); }
.nosdp-card.nosdp-tone-ended .nosdp-card-label { display: none; }
.nosdp-card.nosdp-tone-ended .nosdp-card-btn { border-color: color-mix(in srgb, var(--nosdp-head) 18%, transparent); color: var(--nosdp-muted); }
.nosdp-card.nosdp-tone-ended:hover .nosdp-card-btn { background: transparent; color: var(--nosdp-text); }
.nosdp-list-wrap .nosdp-tz { margin-top: 18px !important; }
.nosdp-list-empty { color: var(--nosdp-muted) !important; }

@media (max-width: 768px) {
  .nosdp-panel { font-size: 14.5px; }
  .nosdp-top { gap: 20px; }
  .nosdp-dial-wrap { --dial: 132px; }
  .nosdp-price, .nosdp-roll { font-size: 36px; }
  .nosdp-was { font-size: 18px; }
  .nosdp-next { font-size: 13.5px; }
  .nosdp-panel .nosdp-chip { font-size: 10px; letter-spacing: 0.16em; }
  .nosdp-panel.nosdp-tone-ended { column-gap: 20px; }
  .nosdp-bar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .nosdp-bar-in { gap: 12px; }
  .nosdp-bar-t, .nosdp-bar-long { display: none; }
  .nosdp-bar-short { display: inline; }
  .nosdp-bar-x { flex: 1; justify-content: space-between; gap: 12px; }
  .nosdp-bar-p { text-align: left; }
  .nosdp-bar .nosdp-btn { padding: 12px 24px; }
  .nosdp-dlg-in { padding: 26px 20px 18px; }
  .nosdp-dialog .nosdp-dlg-title { font-size: 27px; }
}
@media (max-width: 480px) {
  .nosdp-steal { margin: 20px auto 48px; padding: 28px 16px 32px; }
  .nosdp-steal-dial { --dial: 164px; margin-top: 22px; }
  .nosdp-steal .nosdp-steal-h { font-size: 28px; }
  .nosdp-steal .nosdp-steal-name { font-size: 25px; }
  .nosdp-steal .nosdp-price { font-size: 42px; }
  .nosdp-facts { grid-template-columns: 1fr; }
  .nosdp-facts > div, .nosdp-facts > div + div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-left: 0; }
  .nosdp-facts > div + div { border-top: 1px solid var(--nosdp-rule); }
  .nosdp-facts dd { margin: 0; text-align: right; }
  .nosdp-fv, .nosdp-fs { display: inline; }
}
@media (max-width: 359px) {
  .nosdp-top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .nosdp *, .nosdp *::before, .nosdp *::after { animation: none !important; transition: none !important; }
  .nosdp-bar:not([hidden]), .nosdp-dialog[open] { animation: none; }
}
