/* Calyn Cadeau — Direction A · Editorial Linen
   Recreated from the design handoff (Calyn Cadeau.dc.html) */

:root{
  --display: 'Cormorant Garamond', serif;
  --body: 'Jost', sans-serif;
  --accent: #C7A06A;           /* design-doc default accent */
  --ink: #2B2520;
  --paper: #F2ECE0;
  --panel: #FBF7EF;
  --muted: #9a8f80;
  --muted-2: #6F665B;
  --desc: #5f574c;
}

*{ box-sizing: border-box; }

/* the `hidden` attribute must always win, even over display:grid/flex rules */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ -webkit-user-drag: none; user-select: none; }

/* Centered "screen" — mirrors the 1280px design frame */
.screen{
  max-width: 1280px;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
}

h1,h2{ margin: 0; }

.eyebrow{
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.btn-solid{
  background: var(--ink);
  color: var(--paper);
  padding: 16px 32px;
  border: none;
}
.btn-solid:hover{ opacity: .88; }
.btn-underline{
  padding: 16px 4px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  align-self: center;
}
.btn-underline:hover{ opacity: .7; }

/* ---------- Header ---------- */
.site-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 64px;
  border-bottom: 1px solid rgba(43,37,32,.10);
}
/* The wordmark itself, the same artwork the rest of Calyn Cadeau uses,
   rather than the name set in a typeface that only resembles it. */
.brand{
  display: block;
  text-decoration: none;
}
.brand img{
  display: block;
  height: 26px;
  width: auto;
}
.nav{
  display: flex;
  gap: 38px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.nav a{ color: inherit; text-decoration: none; transition: color .2s ease; }
.nav a:hover{ color: var(--ink); }

/* The way back to the rest of the shop. Divided from the section links
   because it does something different: those move you down this page,
   this one leaves it. */
.nav a.nav-store{
  position: relative;
  padding-left: 38px;
  color: var(--ink);
}
.nav a.nav-store::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: rgba(43,37,32,.20);
}
.nav a.nav-store::after{
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
}
.nav a.nav-store:hover::after{ opacity: .45; }

/* ---------- Hero ---------- */
.hero{
  text-align: center;
  padding: 86px 64px 52px;
}
.hero .eyebrow{ margin-bottom: 26px; }
.hero-title{
  font-family: var(--display);
  font-weight: 300;
  font-size: 86px;
  line-height: .97;
  letter-spacing: -.01em;
}
.hero-sub{
  max-width: 500px;
  margin: 30px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-2);
}
.hero-actions{
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 36px;
}

/* ---------- Hero image ---------- */
.hero-media{ padding: 0 64px; }
.hero-media-frame{ position: relative; }
.hero-media-frame img{
  width: 100%;
  display: block;
  border-radius: 2px;
}

/* ---------- Section heads ---------- */
.section-head{ text-align: center; margin-bottom: 48px; }
.section-head .eyebrow{ margin-bottom: 18px; }
.section-title{
  font-family: var(--display);
  font-weight: 300;
  font-size: 54px;
  line-height: 1;
}

/* ---------- 01 The Studio / configurator ---------- */
.studio{ padding: 98px 64px 30px; }
.configurator{
  display: grid;
  /* minmax(0,…) lets the columns shrink below the wallet's fixed 366px width
     on narrow screens instead of forcing the controls column off-canvas */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 58px;
  align-items: center;
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.08);
  border-radius: 3px;
  padding: 58px;
}
.stage{
  display: flex;
  justify-content: center;
  padding: 24px 0;
  background: radial-gradient(58% 46% at 50% 82%, rgba(43,37,32,.12), rgba(43,37,32,0) 72%);
}
.wallet-mount{ display: flex; justify-content: center; }

.control-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(43,37,32,.12);
  padding-bottom: 12px;
}
.control-label{
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.color-name{ font-family: var(--display); font-size: 25px; }

.swatches{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 22px 0 32px;
}
.swatch{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .2s ease;
}
.swatch:hover{ transform: translateY(-1px); }
.swatch .ring{
  position: absolute;
  inset: -6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.field-label{
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 11px;
}

.seg{ display: flex; gap: 8px; margin-bottom: 26px; }
.seg-wrap{ flex-wrap: wrap; margin-bottom: 24px; }
.seg-btn{
  padding: 9px 13px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
  font-family: var(--body);
  line-height: 1.1;
  background: transparent;
  color: var(--muted-2);
  border-color: rgba(43,37,32,.22);
}
.seg-btn:hover{ border-color: rgba(43,37,32,.4); }
.seg-btn.active{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pers-fields[hidden]{ display: none; }

.name-input{
  width: 100%;
  background: transparent;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 15px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .04em;
}
.name-input:focus{ outline: none; border-color: rgba(43,37,32,.5); }
.name-input::placeholder{ color: #a89e90; }
.helper{ font-size: 12px; color: var(--muted); margin-top: 10px; }

.purchase{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(43,37,32,.12);
}
.price-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.price{ font-family: var(--display); font-size: 31px; }
.price-note{ font-size: 12px; color: var(--muted); }
.buy-row{ display: flex; align-items: stretch; gap: 12px; }
.qty{
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 0 16px;
}
.qty-btn{ cursor: pointer; font-size: 17px; color: var(--muted-2); user-select: none; }
.qty-btn:hover{ color: var(--ink); }
.qty-val{ font-size: 14px; min-width: 12px; text-align: center; }
.add-to-cart{
  flex: 1;
  text-align: center;
  padding: 15px 18px;
  font-size: 11px;
}

/* ---------- Description / Specs ---------- */
.specs{ padding: 6px 64px 36px; }
.specs-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  border-top: 1px solid rgba(43,37,32,.12);
  padding-top: 46px;
}
.meta-label{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.desc{ font-size: 15px; line-height: 1.8; color: var(--desc); margin: 0 0 18px; }
.desc-list{ display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--desc); }
.spec-table{ display: flex; flex-direction: column; }
.spec-row{
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(43,37,32,.1);
}
.spec-row.no-border{ border-bottom: none; }
.spec-k{ color: var(--muted); font-size: 13.5px; }
.spec-v{ font-size: 14px; }

/* ---------- 02 The Range ---------- */
.range{ padding: 74px 64px 98px; }
.range-img{ width: 100%; display: block; border-radius: 2px; }
.range-names{
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- 03 The Craft ---------- */
.craft{ background: #ECE4D6; padding: 98px 64px; }
.craft-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}
.craft-grid video{ width: 100%; display: block; border-radius: 2px; }
.block-title{
  font-family: var(--display);
  font-weight: 300;
  font-size: 50px;
  line-height: 1.02;
  margin: 0 0 22px;
}
.craft .block-title{ margin-top: 20px; }
.block-text{
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted-2);
  max-width: 420px;
}
.stats{ display: flex; gap: 40px; margin-top: 34px; font-size: 13px; color: var(--muted-2); }
.stat-num{ font-family: var(--display); font-size: 30px; color: var(--ink); }

/* ---------- 04 The Detail ---------- */
.detail{ padding: 98px 64px; }
.detail-grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 58px;
  align-items: center;
}
.detail .block-title{ margin-top: 20px; }
.detail .block-text{ max-width: 380px; }
.detail-grid img{ width: 100%; display: block; border-radius: 2px; }

/* ---------- 05 The Gift ---------- */
.gift{ padding: 0 64px 98px; }
.gift-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 58px;
  align-items: center;
}
.gift-grid img{ width: 100%; display: block; border-radius: 2px; }
.gift .block-title{ margin-top: 20px; }
.gift .block-text{ max-width: 360px; }
.gift-cta{ margin-top: 30px; padding: 15px 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: #E9E1D5; padding: 70px 64px 48px; }
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(233,225,213,.16);
  padding-bottom: 40px;
}
.footer-brand img{
  display: block;
  height: 40px;
  width: auto;
}
.footer-nav a{
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-nav a:hover{ color: #E9E1D5; }
.footer-nav{
  display: flex;
  gap: 34px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #bdb3a4;
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(30,16,8,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 50;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-title{ font-size: 66px; }
  .section-title{ font-size: 44px; }
  .block-title{ font-size: 40px; }
  .site-header,.hero,.hero-media,.studio,.specs,.range,.craft,.detail,.gift,.site-footer{ padding-left: 40px; padding-right: 40px; }
  .configurator{ padding: 40px; gap: 40px; }
}

@media (max-width: 820px){
  /* The product links are the navigation now, so they stay on a phone.
     The header stacks — logo above, the product strip centred below —
     so a wrapped nav never collides with the wordmark. */
  .site-header{ flex-direction: column; gap: 16px; align-items: center; }
  .nav{ flex-wrap: wrap; justify-content: center; gap: 12px 18px; font-size: 11px; }
  .nav a.nav-store{ padding-left: 0; }
  .nav a.nav-store::before{ display: none; }
  .specs-grid,
  .craft-grid,
  .detail-grid,
  .gift-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .configurator{
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* keep image-left / text-right reading order sensible on stack */
  .detail-grid img{ order: -1; }
  .hero-title{ font-size: 54px; }
}

@media (max-width: 560px){
  .site-header,.hero,.hero-media,.studio,.specs,.range,.craft,.detail,.gift,.site-footer{ padding-left: 22px; padding-right: 22px; }
  .site-header{ padding-top: 20px; padding-bottom: 20px; }
  .hero{ padding-top: 56px; padding-bottom: 40px; }
  .hero-title{ font-size: 42px; }
  .hero-actions{ flex-direction: column; align-items: center; gap: 14px; }
  .section-title{ font-size: 36px; }
  .block-title{ font-size: 34px; }
  .studio{ padding-top: 64px; }
  .configurator{ padding: 26px; }
  .range-names{ font-size: 10px; letter-spacing: .1em; }
  .footer-top{ flex-direction: column; align-items: flex-start; gap: 22px; }
  .footer-nav{ gap: 22px; }
  .footer-bottom{ flex-direction: column; gap: 8px; }
  /* scale the fixed-size wallet down to fit narrow screens */
  .wallet-mount{ transform: scale(.78); transform-origin: center; height: 184px; }
}

@media (max-width: 380px){
  .wallet-mount{ transform: scale(.66); height: 156px; }
}

/* =========================================================
   Checkout — delivery + payment
   ========================================================= */
.checkout-secure{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkout-secure .lock{ font-size: 13px; }

.checkout-steps{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 64px 0;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-steps .step{ color: var(--muted); text-decoration: none; }
.checkout-steps a.step:hover{ color: var(--ink); }
.checkout-steps .step.current{ color: var(--ink); }
.checkout-steps .step-sep{ color: rgba(43,37,32,.3); }

.checkout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 58px;
  align-items: start;
  padding: 40px 64px 90px;
}
.checkout-main{ display: flex; flex-direction: column; gap: 30px; }

.co-block{
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.08);
  border-radius: 3px;
  padding: 40px;
}
.co-block-head{ display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.co-num{
  font-family: var(--display);
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
}
.co-title{ font-family: var(--display); font-weight: 300; font-size: 34px; line-height: 1; }
.co-subhead{
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 14px;
}
.co-subhead:first-of-type{ margin-top: 0; }
.co-demo-note{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-2);
  background: rgba(199,160,106,.12);
  border: 1px solid rgba(199,160,106,.34);
  border-radius: 2px;
  padding: 12px 14px;
  margin: 0 0 8px;
}
.co-hint{ font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }

.co-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.co-grid-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

/* fields */
.field{ display: flex; flex-direction: column; margin-bottom: 16px; position: relative; }
.field-lbl{
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.field-lbl em{ font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field input,
.field select{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .02em;
}
.field input::placeholder{ color: #b3a797; }
.field input:focus,
.field select:focus{ outline: none; border-color: rgba(43,37,32,.55); }
.field input[readonly]{ background: rgba(43,37,32,.04); color: var(--muted-2); }
.field select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236F665B' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.field .err{ font-size: 11.5px; color: #b3402e; margin-top: 6px; min-height: 0; }
.field.has-err input,
.field.has-err select{ border-color: #c0553f; }
.card-brand{
  position: absolute; right: 14px; top: 35px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}

.checkrow{
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--muted-2); cursor: pointer; margin-top: 6px;
}
.checkrow input{ width: 16px; height: 16px; accent-color: var(--ink); }

/* radio option rows (delivery / e-wallet) */
.opt-list{ display: flex; flex-direction: column; gap: 10px; }
.opt{
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 15px 16px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.opt:hover{ border-color: rgba(43,37,32,.45); }
.opt.selected{ border-color: var(--ink); background: rgba(43,37,32,.03); }
.opt input{ width: 16px; height: 16px; accent-color: var(--ink); flex: 0 0 auto; }
.opt-body{ display: flex; flex-direction: column; gap: 3px; flex: 1; }
.opt-name{ font-size: 14.5px; color: var(--ink); }
.opt-desc{ font-size: 12.5px; color: var(--muted); }
.opt-price{ font-family: var(--display); font-size: 19px; color: var(--ink); }

.pay-tabs{ margin-bottom: 22px; flex-wrap: wrap; }
.pay-pane{ animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }

/* summary */
.checkout-aside{ position: sticky; top: 24px; }
.summary{
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.10);
  border-radius: 3px;
  padding: 30px;
}
.summary-head{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.summary-item{ display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.summary-preview{
  width: 150px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 8px;
}
#summaryWallet, #confWallet{ transform: scale(.41); transform-origin: center; flex: 0 0 auto; }
.summary-item-info{ min-width: 0; }
.summary-name{ font-size: 14px; color: var(--ink); line-height: 1.35; }
.summary-meta{ font-size: 12.5px; color: var(--muted-2); margin-top: 5px; line-height: 1.4; }
.summary-qty{ font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.summary-line-price{ font-family: var(--display); font-size: 18px; color: var(--ink); align-self: start; }

.summary-rows{
  border-top: 1px solid rgba(43,37,32,.12);
  margin-top: 24px; padding-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.summary-row{ display: flex; justify-content: space-between; font-size: 14px; color: var(--muted-2); }
.summary-row span:last-child{ color: var(--ink); }
.summary-row.total{
  border-top: 1px solid rgba(43,37,32,.12);
  margin-top: 6px; padding-top: 16px;
  font-size: 15px; color: var(--ink);
}
.summary-row.total span:first-child{ letter-spacing: .04em; }
.summary-row.total span:last-child{ font-family: var(--display); font-size: 24px; }

.place-order{ width: 100%; border: none; margin-top: 24px; padding: 17px 18px; font-size: 11.5px; }
.place-order:disabled{ opacity: .7; cursor: default; }
.summary-back{
  display: block; text-align: center; margin-top: 16px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); text-decoration: none;
}
.summary-back:hover{ color: var(--ink); }

/* =========================================================
   Order confirmation
   ========================================================= */
.confirmed{ padding: 30px 64px 90px; }
.confirmed-hero{ text-align: center; padding: 50px 0 56px; }
.confirmed-mark{
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); font-size: 28px;
}
.confirmed-hero .eyebrow{ margin-bottom: 18px; }
.confirmed-title{ font-family: var(--display); font-weight: 300; font-size: 60px; line-height: 1; }
.confirmed-sub{ max-width: 460px; margin: 22px auto 0; font-size: 15.5px; line-height: 1.75; color: var(--muted-2); }
.confirmed-sub strong{ color: var(--ink); font-weight: 400; }
.confirmed-orderno{
  margin-top: 22px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.confirmed-orderno span{ color: var(--ink); }

.confirmed-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 920px; margin: 0 auto; }
.conf-card{
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.10);
  border-radius: 3px;
  padding: 30px;
}
.conf-item{ margin-top: 14px; }
.conf-block{ font-size: 14px; line-height: 1.7; color: var(--ink); }
.conf-block div{ color: var(--muted-2); }
.conf-block div:first-child{ color: var(--ink); }
.conf-est{ margin-top: 16px; font-size: 13.5px; line-height: 1.7; color: var(--muted-2); }
.conf-est strong{ color: var(--ink); font-weight: 400; }
.conf-paid{ font-family: var(--display); font-size: 19px; color: var(--ink); margin-top: 6px; }
.confirmed-actions{ text-align: center; margin-top: 44px; }

/* checkout responsive */
@media (max-width: 1024px){
  .checkout, .checkout-steps, .confirmed{ padding-left: 40px; padding-right: 40px; }
  .checkout{ grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; }
}
@media (max-width: 880px){
  .checkout{ grid-template-columns: minmax(0, 1fr); }
  .checkout-aside{ position: static; }
  .confirmed-grid{ grid-template-columns: 1fr; }
  .confirmed-title{ font-size: 46px; }
}
@media (max-width: 560px){
  .checkout, .checkout-steps, .confirmed{ padding-left: 22px; padding-right: 22px; }
  .co-block{ padding: 26px; }
  .co-grid-2, .co-grid-3{ grid-template-columns: 1fr; gap: 0; }
  .co-title{ font-size: 28px; }
  .summary-item{ grid-template-columns: auto 1fr; }
  .summary-line-price{ grid-column: 2; }
  .confirmed-title{ font-size: 38px; }
}

/* Billplz payment panel */
.billplz-panel{
  border: 1px solid rgba(43,37,32,.16);
  border-radius: 3px;
  padding: 24px;
  background: #fff;
}
.billplz-row{ display: flex; gap: 18px; align-items: flex-start; }
.billplz-badge{
  flex: 0 0 auto;
  background: #0a8f4d;
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 6px;
  text-transform: lowercase;
}
.billplz-copy{ min-width: 0; }
.billplz-title{ font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.billplz-copy p{ margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted-2); }
.billplz-methods{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(43,37,32,.10);
}
.billplz-methods span{
  font-size: 11px; letter-spacing: .06em; color: var(--muted-2);
  border: 1px solid rgba(43,37,32,.18); border-radius: 2px;
  padding: 6px 10px; white-space: nowrap;
}
#payModeNote{ margin-top: 18px; }

/* failed-payment mark */
.confirmed-mark.failed{ background: #c0553f; }

/* thank-you item list */
.ty-items{ display: flex; flex-direction: column; margin: 14px 0 6px; }
.ty-item{
  display: flex; justify-content: space-between; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid rgba(43,37,32,.1);
  font-size: 14px;
}
.ty-item:last-child{ border-bottom: none; }
.ty-item-no{ color: var(--muted); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.ty-item-desc{ color: var(--ink); text-align: right; }

/* =========================================================
   US "Sets" — bundle configurator, Sets panel, FAQ
   ========================================================= */
:root{
  --gold: #C7A06A;
  --silver: #9AA0A6;
  --hairline: rgba(43,37,32,.12);
}

/* configurator becomes a single stacked column */
.configurator{ display: block; }

.bundle-head{ margin-bottom: 28px; }
.bundle-head .field-label{ text-align: center; letter-spacing: .24em; }
.bundle-select{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bundle-opt{
  position: relative; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline); border-radius: 3px;
  padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 7px;
  font-family: var(--body); transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.bundle-opt:hover{ border-color: rgba(43,37,32,.34); transform: translateY(-2px); }
.bundle-opt.active{ border-color: var(--ink); background: rgba(43,37,32,.03); }
.bundle-tag{
  position: absolute; top: -9px; left: 18px;
  background: var(--gold); color: #231a12; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
}
.bundle-label{ font-family: var(--display); font-size: 22px; color: var(--ink); line-height: 1; }
.bundle-price{ font-family: var(--display); font-size: 17px; color: var(--muted-2); }
.bundle-blurb{ font-size: 12px; line-height: 1.5; color: var(--muted); }

.items{ display: flex; flex-direction: column; gap: 18px; margin: 30px 0; }
.item-card{ border: 1px solid var(--hairline); border-radius: 3px; padding: 26px; background: #fff; }
.item-head{
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--hairline); padding-bottom: 12px; margin-bottom: 22px;
}
.item-no{ font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.item-colorname{ font-family: var(--display); font-size: 22px; color: var(--ink); }
.item-body{ display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 30px; align-items: center; }
.item-preview{ width: 244px; height: 160px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pv-mount{ transform: scale(.62); transform-origin: center; flex: 0 0 auto; }
.item-card.single .item-body{ grid-template-columns: 300px minmax(0, 1fr); }
.item-card.single .item-preview{ width: 300px; height: 200px; }
.item-card.single .pv-mount{ transform: scale(.78); }
.item-controls .field-label{ margin-top: 18px; }
.item-controls .field-label:first-child{ margin-top: 0; }
.field-label em{ font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ---- Photo-preview configurator (lanyard / luggage tag / keychain) ----
   The card holder draws its preview; these show the chosen colour's
   studio photo, so the preview box is portrait rather than the wallet's
   landscape. Scoped to .product-config so the card holder is untouched. */
.product-config .item-body{ grid-template-columns: 172px minmax(0, 1fr); gap: 30px; }
.product-config .item-card.single .item-body{ grid-template-columns: 224px minmax(0, 1fr); }
.product-config .item-preview{ width: 172px; height: 229px; }
.product-config .item-card.single .item-preview{ width: 224px; height: 299px; }
.product-config .pv-photo{
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; border-radius: 2px;
}

.ship-note{ font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }
.checkout-btn{ width: 100%; border: none; padding: 17px 18px; font-size: 11.5px; }
.returns-note{ font-size: 12px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }

/* ---- The Sets (dark panel) ---- */
.sets{ padding: 44px 64px 24px; }
.sets-panel{ background: var(--ink); color: #E9E1D5; border-radius: 3px; padding: 72px 64px; }
.sets-head{ text-align: center; margin-bottom: 46px; }
.sets-head .eyebrow{ color: var(--gold); margin-bottom: 16px; }
.sets-head .section-title{ color: #F4EDDE; }
.sets-list{ max-width: 640px; margin: 0 auto; }
.set-row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 28px 0; border-top: 1px solid rgba(233,225,213,.16);
}
.set-row:last-child{ border-bottom: 1px solid rgba(233,225,213,.16); }
.set-info{ display: flex; flex-direction: column; gap: 7px; }
.set-name{ font-family: var(--display); font-size: 27px; color: #F4EDDE; line-height: 1.1; }
.set-desc{ font-size: 13px; color: #a99d8a; }
.set-tag{
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(199,160,106,.5); border-radius: 2px; padding: 3px 7px;
  margin-left: 10px; vertical-align: middle; white-space: nowrap;
}
.set-price{ font-family: var(--display); font-size: 30px; color: #F4EDDE; white-space: nowrap; }
.set-was{
  font-size: 18px; color: #a99d8a; text-decoration-color: rgba(169,157,138,.8);
  margin-right: 6px; vertical-align: 2px;
}
.bundle-was{ font-size: 13px; color: var(--muted); margin-right: 4px; }
.price-was{ font-size: 17px; color: var(--muted); margin-right: 6px; vertical-align: 3px; }
.sets-foot{ text-align: center; margin-top: 38px; font-size: 12px; letter-spacing: .08em; color: #a99d8a; }

/* ---------- 06 The Collection ---------- */
.collection{ padding: 96px 64px; }
.collection-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
}
.coll-card{
  color: inherit;
  text-decoration: none;
  display: block;
}
.coll-img{
  overflow: hidden;               /* the image can grow without moving the page */
  background: var(--panel);
  aspect-ratio: 3 / 4;
}
.coll-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.coll-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 20px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}
.coll-price{ white-space: nowrap; }
.coll-desc{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--desc);
}

/* Kept here rather than with the other breakpoints further up the file:
   these rules must come after the ones they override, and the base rules
   for this section are directly above. */
@media (max-width: 1024px){
  .collection{ padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 820px){
  .collection-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 560px){
  .collection{ padding: 64px 22px; }
  .collection-grid{ grid-template-columns: 1fr; gap: 34px; }
}

/* ---- FAQ accordion ---- */
.faq{ padding: 44px 64px 98px; }
.faq-list{ max-width: 760px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--hairline); }
.faq-item summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 26px 0; font-family: var(--display); font-size: 23px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-mark{ position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.faq-mark::before, .faq-mark::after{ content: ''; position: absolute; background: var(--muted-2); transition: transform .3s ease; }
.faq-mark::before{ top: 6.25px; left: 0; width: 14px; height: 1.5px; }
.faq-mark::after{ top: 0; left: 6.25px; width: 1.5px; height: 14px; }
.faq-item[open] .faq-mark::after{ transform: scaleY(0); }
.faq-item p{ margin: 0 0 26px; font-size: 15px; line-height: 1.8; color: var(--desc); max-width: 640px; }

/* =========================================================
   Motion support (GSAP) — transform/opacity only
   ========================================================= */
/* masked line reveal */
.hero-title{ position: relative; }
.line-mask{ display: block; overflow: hidden; }
.line{ display: block; will-change: transform; }

/* gold shimmer overlay — gradient clipped to duplicate glyphs */
.hero-shimmer{
  position: absolute; inset: 0; pointer-events: none;
  color: transparent;
  background-image: linear-gradient(105deg, rgba(199,160,106,0) 42%, rgba(199,160,106,.85) 50%, rgba(199,160,106,0) 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
}

/* hero parallax frame */
.hero-media-frame{ overflow: hidden; border-radius: 2px; }
.hero-media-frame img{ will-change: transform; }
.hero-px{ position: relative; will-change: transform; }
.hero-px img{ width: 100%; display: block; }
.hero-video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.hero-video.on{ opacity: 1; }
.range-video{ width: 100%; display: block; border-radius: 2px; }

/* foil light sweep */
.foil-frame{ position: relative; overflow: hidden; border-radius: 2px; }
.foil-frame img{ width: 100%; display: block; }
.foil-sweep{
  position: absolute; inset: -2% -20%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,246,225,.34) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-130%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* range swatch chips */
.range-chips{ display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.chip{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: default; transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.chip-dot{
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 3px 8px rgba(50,32,14,.28), inset 0 1px 0 rgba(255,255,255,.3);
  transition: box-shadow .35s ease;
}
.chip-name{
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
  opacity: .55; transform: translateY(2px);
  transition: opacity .35s ease, transform .35s ease, color .35s ease;
}
@media (hover: hover){
  .coll-card:hover .coll-img img{ transform: scale(1.04); }
  .chip:hover{ transform: translateY(-4px); }
  .chip:hover .chip-dot{ box-shadow: 0 10px 20px rgba(50,32,14,.32), inset 0 1px 0 rgba(255,255,255,.3); }
  .chip:hover .chip-name{ opacity: 1; transform: translateY(0); color: var(--ink); }
}
.range-chips.static .chip-name{ opacity: 1; }

/* sets: JS-drawn hairlines replace static borders */
.sets-list.motion .set-row{ border-top: none; border-bottom: none; position: relative; }
.sets-list .rule{
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(233,225,213,.16);
  transform-origin: left center; will-change: transform;
}
.sets-list .rule-bottom{ top: auto; bottom: 0; }

/* slower, weightier buttons */
.btn{ transition: opacity .35s ease, transform .35s ease, background .35s ease; }
.checkout-btn{ will-change: transform; }

@media (prefers-reduced-motion: reduce){
  .coll-img img{ transition: none; }
  html{ scroll-behavior: auto; }
  .chip, .chip-dot, .chip-name, .btn{ transition: none; }
}

/* ---- Sets/configurator responsive ---- */
@media (max-width: 1024px){
  .sets, .faq{ padding-left: 40px; padding-right: 40px; }
  .sets-panel{ padding: 56px 40px; }
}
@media (max-width: 820px){
  /* must also beat the higher-specificity .item-card.single override */
  .item-body, .item-card.single .item-body{ grid-template-columns: 1fr; gap: 8px; justify-items: center; }
  .item-preview, .item-card.single .item-preview{ width: 100%; }
  .product-config .item-preview, .product-config .item-card.single .item-preview{ width: 210px; height: 280px; }
  .item-controls{ width: 100%; min-width: 0; }
}
@media (max-width: 640px){
  .bundle-select{ grid-template-columns: 1fr; }
  .bundle-tag{ top: 20px; left: auto; right: 20px; }
  /* keep the "Most gifted" tag clear of the set name */
  .bundle-opt .bundle-label{ padding-right: 104px; }
}
@media (max-width: 560px){
  .sets, .faq{ padding-left: 22px; padding-right: 22px; }
  .sets-panel{ padding: 40px 24px; }
  .set-name{ font-size: 22px; }
  .set-price{ font-size: 24px; }
  .faq-item summary{ font-size: 19px; }
  /* 7 chips can't fit one row on narrow phones — wrap, centered */
  .range-chips{ flex-wrap: wrap; justify-content: center; gap: 16px 18px; }
}