/* ══ ROYAL OUD — page-level composition ════════════════════ */

/* ── Breadcrumbs + page head ── */
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);
  padding-block:var(--s5)}
.crumbs a:hover{color:var(--gold-hi)}
.crumbs svg{width:13px;height:13px;opacity:.6}
.pagehead{padding-block:clamp(28px,5vw,56px) clamp(16px,3vw,32px);display:grid;gap:var(--s3);
  max-width:70ch;position:relative;z-index:2}
.pagehead h1{font-weight:600}
.pagehead--c{text-align:center;justify-items:center;margin-inline:auto}

/* ── Split band (story / offer) ── */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.band__art{position:relative;min-height:340px;display:grid;place-items:center;padding:var(--s6);
  background:radial-gradient(90% 80% at 50% 10%,rgba(201,162,39,.18),transparent 60%),
    linear-gradient(150deg,var(--surface-2),var(--bg-2))}
.band__art svg{width:min(340px,80%);height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.band__copy{padding:clamp(24px,4vw,56px);display:grid;gap:var(--s4);align-content:center}
.band--rev .band__art{order:2}
.band__list{display:grid;gap:12px;margin-top:var(--s2)}
.band__list li{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--text-2)}
.band__list svg{width:17px;height:17px;color:var(--gold-ink);flex:none;margin-top:5px}

/* ── Seasonal offer ── */
.offer{position:relative;overflow:hidden;border:1px solid var(--border-2);border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,56px);background:
    radial-gradient(80% 120% at 88% 0%,rgba(201,162,39,.2),transparent 55%),var(--surface);
  display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:var(--s6);align-items:center}
.offer h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
.countdown{display:flex;gap:var(--s3)}
.cd{min-width:74px;padding:12px 8px;text-align:center;border:1px solid var(--border-2);
  border-radius:var(--radius);background:var(--bg)}
.cd b{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--gold-ink);line-height:1.1}
.cd span{font-size:.66rem;color:var(--muted);letter-spacing:.1em}
.couponline{display:inline-flex;align-items:center;gap:10px;border:1px dashed var(--border-2);
  border-radius:var(--radius);padding:10px 14px;font-size:.84rem;color:var(--text-2);background:var(--bg)}

/* ── Product detail ── */
.pdp{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:var(--s7)}
.gallery{display:grid;gap:var(--s4);position:sticky;top:104px}
.gallery__main{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--card-glow),linear-gradient(165deg,var(--surface-2),var(--surface));
  aspect-ratio:1/1.06;display:grid;place-items:center;padding:var(--s6);cursor:zoom-in;overflow:hidden}
.gallery__main svg{width:80%;height:auto;max-height:100%;transition:transform var(--t-slow) var(--ease);
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))}
.gallery__main:hover svg{transform:scale(1.05)}
.gallery__zoom{position:absolute;bottom:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:.72rem;color:var(--muted);background:var(--glass);border:1px solid var(--border);
  padding:7px 12px;border-radius:999px;backdrop-filter:blur(8px)}
.gallery__zoom svg{width:14px;height:14px;color:var(--gold-ink)}
.gallery__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.gallery__thumbs button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  aspect-ratio:1/1;display:grid;place-items:center;padding:10px;transition:all var(--t-fast)}
.gallery__thumbs button:hover{border-color:var(--border-2)}
.gallery__thumbs button.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.gallery__thumbs svg{width:100%;height:auto;max-height:100%}

/* ── Buy box ── */
.buybox{display:grid;gap:var(--s5)}
.buybox__top{display:grid;gap:10px;padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.buybox__meta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.buybox__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-block:var(--s2)}
.buybox__price b{font-family:var(--font-display);font-size:2.2rem;color:var(--gold-ink);font-weight:600}
.buybox__price s{color:var(--faint)}
.savepill{font-size:.72rem;background:var(--surface-2);border:1px solid var(--border-2);color:var(--gold-ink);
  padding:4px 10px;border-radius:999px}
.optlabel{font-size:.74rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.sizelist{display:flex;gap:var(--s3);flex-wrap:wrap}
.sizebtn{border:1px solid var(--border);border-radius:var(--radius);padding:11px 16px;text-align:start;
  display:grid;gap:2px;background:var(--surface);transition:all var(--t-fast);min-width:104px}
.sizebtn:hover{border-color:var(--border-2)}
.sizebtn.on{border-color:var(--gold);background:var(--surface-2)}
.sizebtn b{font-size:.88rem;font-weight:600}
.sizebtn span{font-family:var(--font-display);font-size:.95rem;color:var(--gold-ink)}
.buybox__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.buybox__trust{display:grid;gap:10px;padding-top:var(--s4);border-top:1px solid var(--border)}
.buybox__trust div{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--muted)}
.buybox__trust svg{width:16px;height:16px;color:var(--gold-ink);flex:none;margin-top:4px}
.stockline{display:flex;align-items:center;gap:8px;font-size:.8rem}
.stockline .dot{width:7px;height:7px;border-radius:50%;background:#7FB069;box-shadow:0 0 0 3px rgba(127,176,105,.18)}
.stockline.low .dot{background:#D9A44C;box-shadow:0 0 0 3px rgba(217,164,76,.18)}

/* ── Cart page ── */
.cartpage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:clamp(24px,3.5vw,48px);align-items:start}
.cartpanel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  padding:clamp(20px,3vw,32px);display:grid;gap:var(--s4)}
.summary{position:sticky;top:104px;border:1px solid var(--border-2);border-radius:var(--radius-lg);
  background:var(--surface);padding:clamp(20px,3vw,30px);display:grid;gap:var(--s4)}
.summary h3{font-size:1.1rem;padding-bottom:var(--s3);border-bottom:1px solid var(--border)}

/* ── Checkout ── */
.checkout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,44px);align-items:start}
.formcard{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  padding:clamp(20px,3vw,34px);display:grid;gap:var(--s5)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.formgrid--full{grid-template-columns:1fr}
.payopts{display:grid;gap:var(--s3)}
.payopt{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;background:var(--surface-2);cursor:pointer;transition:all var(--t-fast)}
.payopt:hover{border-color:var(--border-2)}
.payopt.on{border-color:var(--gold);background:var(--surface-raise)}
.payopt input{accent-color:var(--gold);margin-top:4px}
.payopt b{display:block;font-size:.9rem}
.payopt small{font-size:.76rem;color:var(--muted)}
.notice{border:1px solid var(--border-2);border-radius:var(--radius);padding:14px 16px;background:var(--surface-2);
  display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--text-2)}
.notice svg{width:17px;height:17px;color:var(--gold-ink);flex:none;margin-top:4px}
.notice--warn{border-color:rgba(217,119,87,.4)}
.notice--warn svg{color:#D97757}

/* ── Order confirmation ── */
.confirm{border:1px solid var(--border-2);border-radius:var(--radius-lg);background:var(--surface);
  padding:clamp(24px,4vw,52px);display:grid;gap:var(--s5);text-align:center;justify-items:center;max-width:820px;
  margin-inline:auto}
.confirm__seal{width:78px;height:78px;border-radius:50%;border:1px solid var(--border-2);display:grid;
  place-items:center;background:var(--surface-2);animation:pulseRing 2.4s var(--ease) 1}
.confirm__seal svg{width:34px;height:34px;color:var(--gold-ink)}
.ordnum{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);color:var(--gold-ink);
  letter-spacing:.06em}
.kv{width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-align:start}
.kv__r{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s4);padding:12px 16px;font-size:.86rem;
  border-bottom:1px solid var(--line)}
.kv__r:last-child{border-bottom:0}
.kv__r:nth-child(odd){background:var(--surface-2)}
.kv__r span:first-child{color:var(--muted)}
.kv__r span:last-child{color:var(--text)}

/* ── Contact ── */
.cinfo{display:grid;gap:var(--s4)}
.cinfo__i{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s4);background:var(--surface);transition:all var(--t)}
.cinfo__i:hover{border-color:var(--border-2);transform:translateY(-3px)}
.cinfo__i svg{width:19px;height:19px;color:var(--gold-ink);flex:none;margin-top:5px}
.cinfo__i b{display:block;font-size:.88rem;font-weight:600}
.cinfo__i span,.cinfo__i a{font-size:.84rem;color:var(--muted)}
.cinfo__i a:hover{color:var(--gold-hi)}
.map{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);
  position:relative;min-height:230px;display:grid;place-items:center;text-align:center;padding:var(--s6)}
.map svg{width:36px;height:36px;color:var(--gold-ink);opacity:.75}

/* ── Newsletter ── */
.news{border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:clamp(24px,4vw,52px);
  background:radial-gradient(80% 130% at 10% 0%,rgba(201,162,39,.16),transparent 58%),var(--surface);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.newsform{display:flex;gap:var(--s3);flex-wrap:wrap}
.newsform .input{flex:1;min-width:200px}

/* ── Account modal ── */
.acctabs{display:flex;gap:var(--s2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.acctab{padding:12px 16px;font-size:.84rem;color:var(--muted);border-bottom:2px solid transparent;
  transition:all var(--t-fast)}
.acctab:hover{color:var(--text)}
.acctab.on{color:var(--gold-ink);border-color:var(--gold)}
.ordercard{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4);background:var(--surface);
  display:grid;gap:10px}
.ordercard__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.ordercard code{font-family:var(--font-display);font-size:1rem;color:var(--gold-ink);letter-spacing:.04em}

/* ── Policy / prose ── */
.prose{max-width:74ch}
.prose h2{margin-block:var(--s6) var(--s3)}
.prose h3{margin-block:var(--s5) var(--s2)}
.prose p,.prose li{font-size:.94rem;color:var(--text-2);line-height:1.9}
.prose ul{display:grid;gap:8px;padding-inline-start:var(--s5);list-style:none}
.prose ul li{position:relative;padding-inline-start:18px}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.78em;width:6px;height:1px;
  background:var(--gold)}
.toc{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.toc a{font-size:.78rem;border:1px solid var(--border);padding:7px 13px;border-radius:999px;color:var(--muted)}
.toc a:hover{border-color:var(--gold);color:var(--gold-hi)}