:root{
  --cranberry:#A7231B;
  --cranberry-deep:#7C160F;
  --sand:#EBD9D1;
  --rose:#DEB1B8;
  --cream:#F8F5F1;
  --blush:#FBE9EB;
  --ink:#2B1D1B;
  --ink-soft:#6B5551;
  --display:'Bodoni Moda',Georgia,serif;
  --body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--cranberry);
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.01em}
h2{font-size:clamp(2rem,4vw,3rem)}
.lede{font-size:1.05rem;color:var(--ink-soft);max-width:52ch}

/* ---------- scallop divider (signature, from the logo mark) ---------- */
.scallop{height:26px;width:100%;background-repeat:repeat-x;background-size:34px 26px}
.scallop--to-cream{background-image:radial-gradient(circle at 17px 0,transparent 15px,var(--cream) 15.5px)}
.scallop--to-sand{background-image:radial-gradient(circle at 17px 0,transparent 15px,var(--sand) 15.5px)}
.scallop--to-blush{background-image:radial-gradient(circle at 17px 0,transparent 15px,var(--blush) 15.5px)}

/* ---------- announcement ---------- */
.announce{
  background:var(--cranberry);color:#fff;text-align:center;
  padding:9px 16px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
}

/* ---------- header ---------- */
header{background:var(--cream);padding:26px 0 0;text-align:center}
.brandmark{width:96px;height:96px;margin:0 auto;object-fit:contain}
.brandline{
  margin-top:10px;font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-soft)
}
nav{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--sand);margin-top:22px}
nav ul{display:flex;justify-content:center;gap:34px;list-style:none;padding:15px 24px;flex-wrap:wrap}
nav a{
  text-decoration:none;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:var(--ink);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .25s,color .25s
}
nav a:hover,nav a:focus-visible{color:var(--cranberry);border-bottom-color:var(--cranberry)}

/* ---------- hero ---------- */
.hero{padding:70px 0 84px;background:var(--cream)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);margin:16px 0 20px}
.hero h1 em{font-style:italic;color:var(--cranberry)}
.hero .lede{margin-bottom:30px}
.hero-figure{position:relative}
.hero-figure img{width:100%;border-radius:3px;box-shadow:0 28px 60px -30px rgba(43,29,27,.42)}
.seal{
  position:absolute;right:-14px;bottom:-24px;width:118px;height:118px;
  display:grid;place-items:center;text-align:center;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
  color:var(--cranberry);font-weight:500;
}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
.seal span{position:relative;padding:0 20px}

/* Claire's banner, 16 August 2026. The banner is roughly 2.5:1, so it runs
   the full width of the page with the headline and buttons underneath it,
   rather than being squeezed into the right-hand half of the old two-column
   hero. Remove the hero--banner class from the <section> to go back. */
.hero--banner .hero-grid{display:block}
.hero--banner .hero-banner{margin-bottom:40px}
.hero--banner .hero-banner img{width:100%;border-radius:3px;box-shadow:0 24px 56px -32px rgba(43,29,27,.4)}
.hero--banner .hero-copy{text-align:center}
.hero--banner .hero-copy .lede{margin-left:auto;margin-right:auto}
.hero--banner h1{font-size:clamp(1.9rem,3.8vw,3rem);margin-top:12px}
@media(max-width:700px){
  /* A 2.5:1 banner shrinks to a letterbox strip on a phone and the wording
     inside it stops being readable, so on narrow screens it crops to the
     cards and tickets instead. The logo at the top of the page already
     carries the name. Adjust object-position to shift what's shown. */
  .hero--banner .hero-banner img{aspect-ratio:4/3;object-fit:cover;object-position:54% 50%}
  .hero--banner .hero-banner{margin-bottom:28px}
}

/* An element carrying the hidden attribute must never display. Without this,
   class rules such as .btn--block beat the browser's own [hidden] default.
   Fixed 26 Aug 2026: the Place order button stayed on screen at checkout
   when PayPal was the chosen method, offering an unpaid route through. */
[hidden]{display:none !important}

.btn{
  display:inline-block;text-decoration:none;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;padding:15px 32px;transition:.25s;
}
.btn--solid{background:var(--cranberry);color:#fff}
.btn--solid:hover{background:var(--cranberry-deep)}
.btn--line{border:1px solid var(--cranberry);color:var(--cranberry);margin-left:10px}
.btn--line:hover{background:var(--cranberry);color:#fff}

/* ---------- occasions ---------- */
.occasions{background:var(--sand);padding:76px 0 84px}
.section-head{text-align:center;margin-bottom:44px}
.section-head h2{margin:12px 0 10px}
.section-head .lede{margin:0 auto}
.occ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.occ{
  background:var(--cream);padding:38px 22px;text-align:center;text-decoration:none;
  border:1px solid transparent;transition:.28s;display:block
}
.occ:hover{border-color:var(--cranberry);transform:translateY(-4px)}
.occ h3{font-size:1.35rem;margin-bottom:8px}
.occ p{font-size:.85rem;color:var(--ink-soft)}
.occ-mark{font-family:var(--display);font-size:.8rem;color:var(--rose);letter-spacing:.3em;display:block;margin-bottom:14px}

/* ---------- collections ---------- */
.collection{padding:78px 0 88px;background:var(--cream)}
.collection--blush{background:var(--blush)}
.filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:44px}
.filter{
  background:none;border:1px solid var(--sand);cursor:pointer;font-family:var(--body);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:11px 22px;
  color:var(--ink-soft);transition:.24s
}
.filter:hover{border-color:var(--rose);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--cranberry);border-color:var(--cranberry);color:#fff}
/* flex rather than grid so a part-filled last row still centres */
.grid{display:flex;flex-wrap:wrap;gap:30px 24px;justify-content:center}
.card{background:transparent;text-decoration:none;display:flex;flex-direction:column;
      flex:0 0 calc(25% - 18px);max-width:calc(25% - 18px)}
.card-img{position:relative;overflow:hidden;background:var(--blush);aspect-ratio:1/1}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-img img{transform:scale(1.045)}
.tag{
  position:absolute;top:12px;left:12px;background:var(--cranberry);color:#fff;
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;font-weight:500
}
.card-body{padding:16px 2px 0;text-align:center}
.card h3{font-size:1.12rem;margin-bottom:5px;line-height:1.3}
.card .meta{font-size:.76rem;color:var(--ink-soft);margin-bottom:10px}
.price{font-family:var(--display);font-size:1.05rem;color:var(--cranberry)}
.price small{font-family:var(--body);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.grid-empty{text-align:center;color:var(--ink-soft);font-size:.9rem;padding:40px 0}

/* ---------- reviews ---------- */
.reviews{background:var(--cream);padding:76px 0 84px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{
  background:#fff;border:1px solid var(--sand);padding:30px 28px 26px;
  display:flex;flex-direction:column
}
.lede--lead{font-style:italic;margin-bottom:2px}
.rev .stars{color:var(--cranberry);letter-spacing:.24em;font-size:.8rem;margin-bottom:14px}
.rev blockquote{
  font-family:var(--display);font-size:1.12rem;line-height:1.5;color:var(--ink);
  margin-bottom:18px;flex:1
}
.rev cite{
  font-style:normal;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft)
}
.rev cite b{font-weight:500;color:var(--ink)}
.rev-note{text-align:center;font-size:.8rem;color:var(--ink-soft);font-style:italic;margin-top:34px}

/* ---------- about ---------- */
.about{background:var(--sand);padding:82px 0 90px}
.about-grid{display:grid;grid-template-columns:.85fr 1fr;gap:60px;align-items:center}
.about-grid img{width:100%;border-radius:3px;box-shadow:0 24px 50px -30px rgba(43,29,27,.4)}
.about h2{margin:14px 0 20px}
.about p{margin-bottom:15px;color:var(--ink-soft);max-width:56ch}
.sig{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--cranberry);margin-top:22px}

/* ---------- steps ---------- */
.steps{padding:78px 0 84px;background:var(--cream)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:46px}
.step{border-top:1px solid var(--rose);padding-top:22px}
.step .num{font-family:var(--display);font-size:2.4rem;color:var(--rose);line-height:1;display:block;margin-bottom:12px}
.step h3{font-size:1.25rem;margin-bottom:9px}
.step p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- delivery ---------- */
.delivery{background:var(--cranberry);color:#fff;padding:64px 0 70px}
.delivery h2{color:#fff;margin-bottom:34px;text-align:center}
.del-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.del h3{font-size:1.05rem;margin-bottom:9px;font-family:var(--body);font-weight:500;letter-spacing:.06em}
.del p{font-size:.87rem;color:rgba(255,255,255,.82)}
.del ul{list-style:none;font-size:.87rem;color:rgba(255,255,255,.82)}
.del li{padding:3px 0 3px 16px;position:relative}
.del li::before{content:'—';position:absolute;left:0;opacity:.6}

/* ---------- footer ---------- */
footer{background:var(--cream);padding:66px 0 34px;text-align:center}
footer .brandmark{width:74px;height:74px}
.socials{display:flex;justify-content:center;gap:26px;margin:24px 0 26px;flex-wrap:wrap}
.socials a{
  text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rose);padding-bottom:3px;transition:.24s
}
.socials a:hover{color:var(--cranberry);border-bottom-color:var(--cranberry)}
.foot-contact{font-size:.8rem;color:var(--ink-soft);line-height:1.8;margin-bottom:24px}
.foot-contact a{color:var(--cranberry)}
.copy{font-size:.72rem;color:var(--ink-soft);letter-spacing:.08em;border-top:1px solid var(--sand);padding-top:26px}

/* ---------- delivery note ---------- */
.del-note{
  margin:40px auto 0;max-width:80ch;text-align:center;
  border-top:1px solid rgba(255,255,255,.28);padding-top:30px
}
.del-note p{font-size:.9rem;color:rgba(255,255,255,.86);margin-bottom:13px}
.del-note p:last-child{margin-bottom:0}

/* ---------- basket + checkout ---------- */
.nav-basket{color:var(--cranberry)!important;font-weight:500}
.nav-basket .dot{
  display:inline-block;min-width:17px;height:17px;line-height:17px;margin-left:5px;
  background:var(--cranberry);color:#fff;border-radius:9px;font-size:.6rem;
  text-align:center;padding:0 5px;letter-spacing:0;vertical-align:1px
}
.btn--block{display:block;width:100%;text-align:center;margin-left:0}
.btn--block+.btn--block{margin-top:9px}
.btn[disabled]{opacity:.45;pointer-events:none}

.scrim{position:fixed;inset:0;background:rgba(43,29,27,.5);z-index:150;display:none;backdrop-filter:blur(2px)}
.scrim.open{display:block}

.drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:100%;z-index:160;
  background:var(--cream);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.3,1);
  box-shadow:-24px 0 60px -30px rgba(43,29,27,.6)
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--sand)}
.drawer-head h2{font-size:1.5rem}
.icon-btn{background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink);font-family:var(--body);padding:4px 8px;transition:color .2s}
.icon-btn:hover{color:var(--cranberry)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 24px 24px}
.drawer-foot{border-top:1px solid var(--sand);padding:20px 24px 24px;background:var(--blush)}
.empty{text-align:center;color:var(--ink-soft);font-size:.9rem;padding:56px 10px}

.line{display:grid;grid-template-columns:66px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--sand)}
.line:last-child{border-bottom:none}
.line img{width:66px;height:66px;object-fit:cover;background:var(--blush)}
.line h4{font-family:var(--display);font-weight:400;font-size:1rem;line-height:1.25;margin-bottom:4px}
.line dl{font-size:.74rem;color:var(--ink-soft);margin:6px 0 9px}
.line dl div{display:flex;gap:5px;padding:1px 0}
.line dt{color:var(--rose);flex:0 0 auto}
.line dt::after{content:':'}
.line-foot{display:flex;align-items:center;gap:9px;font-size:.8rem}
.qty{display:flex;align-items:center;border:1px solid var(--sand)}
.qty button{width:26px;height:26px;border:none;background:none;cursor:pointer;font-family:var(--body);color:var(--ink);font-size:.9rem;line-height:1}
.qty button:hover{color:var(--cranberry)}
.qty span{min-width:22px;text-align:center;font-size:.8rem}
.line-price{margin-left:auto;font-family:var(--display);color:var(--cranberry)}
.link-btn{background:none;border:none;padding:0;cursor:pointer;font-family:var(--body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--sand)}
.link-btn:hover{color:var(--cranberry);border-bottom-color:var(--cranberry)}

.totals{font-size:.88rem;margin-bottom:18px}
.totals div{display:flex;justify-content:space-between;padding:4px 0;color:var(--ink-soft)}
.totals .grand{border-top:1px solid var(--sand);margin-top:9px;padding-top:11px;color:var(--ink);font-size:1.02rem;align-items:baseline}
.totals .grand strong{font-family:var(--display);font-weight:400;color:var(--cranberry);font-size:1.25rem}
.freebar{font-size:.74rem;color:var(--ink-soft);margin-bottom:14px;text-align:center}

/* form controls */
.f{margin-bottom:15px}
.f label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);margin-bottom:6px}
.f .opt{text-transform:none;letter-spacing:.02em;font-weight:300;font-style:italic;color:var(--rose)}
/* Claire, 12 Aug 2026: the paid extras need to stand out, so the price is
   set in the brand red rather than the soft rose used for plain optionals. */
.f .opt--price{color:var(--cranberry);font-style:normal;font-weight:500;letter-spacing:.04em}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:.92rem;font-weight:300;color:var(--ink);
  background:var(--cream);border:1px solid var(--sand);padding:11px 12px;border-radius:2px;transition:border-color .2s
}
.f textarea{min-height:76px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--cranberry)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--cranberry);background:#fff4f3}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field-error{color:var(--cranberry);font-size:.78rem;margin-top:4px}
.f-hint{font-size:.76rem;color:var(--ink-soft);font-style:italic;margin:-9px 0 15px}

.ship{border:1px solid var(--sand);margin-bottom:6px;background:var(--cream);cursor:pointer;display:block;transition:border-color .2s}
.ship:hover{border-color:var(--rose)}
.ship.sel{border-color:var(--cranberry)}
.ship-in{display:flex;align-items:center;gap:12px;padding:13px 15px}
.ship input{accent-color:var(--cranberry);margin:0;width:auto;flex:0 0 auto}
.ship b{font-weight:500;font-size:.88rem;display:block}
.ship small{color:var(--ink-soft);font-size:.75rem;display:block}
.ship .p{margin-left:auto;font-family:var(--display);color:var(--cranberry);font-size:1rem;white-space:nowrap}

/* terms tick */
.terms-check{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin:0 0 16px;cursor:pointer}
.terms-check input{accent-color:var(--cranberry);width:auto;flex:0 0 auto;margin-top:4px}
.terms-check a{color:var(--cranberry)}
.terms-check.bad{color:var(--cranberry)}

/* checkout sheet */
.co{
  position:fixed;inset:0;z-index:170;background:rgba(43,29,27,.55);backdrop-filter:blur(3px);
  display:none;justify-content:center;overflow-y:auto;padding:40px 20px;align-items:flex-start
}
.co.open{display:flex}
.co-sheet{background:var(--cream);max-width:940px;width:100%;position:relative;box-shadow:0 40px 90px -30px rgba(43,29,27,.6)}
.co-head{padding:30px 40px 22px;border-bottom:1px solid var(--sand)}
.co-head h2{font-size:2rem;margin-top:8px}
.co-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
.co-main{padding:32px 40px 40px}
.co-side{padding:32px 34px 40px;background:var(--blush);border-left:1px solid var(--sand)}
.co-main h3,.co-side h3{
  font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--cranberry);margin-bottom:15px
}
.co-main section{margin-bottom:32px}
.pay-stub{border:1px dashed var(--rose);background:var(--blush);padding:22px 22px 20px;text-align:center}
.pay-stub b{display:block;font-weight:500;font-size:.95rem;margin-bottom:7px}
.pay-stub p{font-size:.82rem;color:var(--ink-soft);max-width:46ch;margin:0 auto}
.co-mini{font-size:.82rem;color:var(--ink-soft);border-bottom:1px solid var(--sand);padding:11px 0;display:flex;gap:10px}
.co-mini:last-of-type{border-bottom:none}
.co-mini span:last-child{margin-left:auto;white-space:nowrap;font-family:var(--display);color:var(--cranberry)}

.done{padding:60px 40px 66px;text-align:center;max-width:62ch;margin:0 auto}
.done h2{margin:14px 0 14px}
.done p{color:var(--ink-soft);margin-bottom:16px}
.ref{font-family:var(--display);font-size:1.7rem;color:var(--cranberry);letter-spacing:.06em;margin:6px 0 20px}
.receipt{
  text-align:left;background:var(--blush);border:1px solid var(--sand);padding:18px 20px;
  font-size:.78rem;line-height:1.7;white-space:pre-wrap;max-height:240px;overflow-y:auto;margin-bottom:20px;
  font-family:var(--body);color:var(--ink-soft)
}

/* panels inside a product sheet — handwriting samples, foil charts */
.sheet-panel{border:1px solid var(--sand);background:var(--blush);padding:20px;margin-bottom:26px}
.sheet-panel h3{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--cranberry);margin-bottom:11px}
.sheet-panel p{font-size:.86rem;color:var(--ink-soft);margin-bottom:10px}
.sheet-panel p:last-child{margin-bottom:0}
.sheet-panel img{width:100%;border:1px solid var(--sand);margin-bottom:13px;background:#fff}

@media(max-width:820px){
  .co-grid{grid-template-columns:1fr}
  .co-side{border-left:none;border-top:1px solid var(--sand)}
  .co-head,.co-main,.co-side{padding-left:24px;padding-right:24px}
  .co{padding:0}
}

/* ---------- product detail ---------- */
.overlay{
  position:fixed;inset:0;z-index:200;background:rgba(43,29,27,.55);
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 20px;
  backdrop-filter:blur(3px)
}
.overlay.open{display:flex}
.sheet{
  background:var(--cream);max-width:1040px;width:100%;position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:0;box-shadow:0 40px 90px -30px rgba(43,29,27,.6)
}
.sheet-close{
  position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border:none;cursor:pointer;
  background:var(--cream);color:var(--ink);font-size:1.3rem;line-height:1;font-family:var(--body);
  border-radius:50%;box-shadow:0 2px 10px rgba(43,29,27,.18);transition:.2s
}
.sheet-close:hover{background:var(--cranberry);color:#fff}
.sheet-gallery{background:var(--blush);padding:20px}
.sheet-main{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--blush);display:block}
.sheet-main[hidden]{display:none}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{
  width:62px;height:62px;padding:0;border:1px solid transparent;cursor:pointer;
  background:none;overflow:hidden;transition:.2s;position:relative
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current="true"]{border-color:var(--cranberry)}
.thumb:hover{border-color:var(--rose)}
/* A video in the photo strip gets a play marker so it reads as a clip. */
.thumb--video::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));pointer-events:none
}
.thumb--video::before{
  content:'';position:absolute;inset:0;background:rgba(43,29,27,.22);pointer-events:none
}
.sheet-info{padding:52px 44px 44px}
.sheet-info h2{font-size:1.9rem;margin:10px 0 6px}
.sheet-price{font-family:var(--display);font-size:1.5rem;color:var(--cranberry);margin-bottom:20px}
.sheet-price small{font-family:var(--body);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-right:8px}

/* ---------- long product description ---------- */
.sheet-info .desc{color:var(--ink-soft);margin-bottom:26px;font-size:.94rem}
.sheet-info .desc p{margin-bottom:11px}
.sheet-info .desc p:last-child{margin-bottom:0}
.desc-head{
  font-family:var(--display);font-weight:400;font-size:1.18rem;color:var(--ink);
  line-height:1.32;margin-bottom:12px;letter-spacing:.01em
}
.sheet-info .desc h4{
  font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--cranberry);margin:22px 0 9px
}
.sheet-info .desc ul{list-style:none;margin-bottom:11px}
.sheet-info .desc li{padding:3px 0 3px 18px;position:relative}
.sheet-info .desc li::before{content:'·';position:absolute;left:5px;color:var(--rose);font-size:1.4rem;line-height:1.05}
.desc-note{font-style:italic;font-size:.85rem;margin-top:18px!important;padding-top:14px;border-top:1px solid var(--sand)}

.needs{border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);padding:20px 0;margin-bottom:26px}
.needs h3{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--cranberry);margin-bottom:12px}
.needs ul{list-style:none;font-size:.9rem;color:var(--ink-soft)}
.needs li{padding:4px 0 4px 20px;position:relative}
.needs li::before{content:'·';position:absolute;left:6px;color:var(--rose);font-size:1.4rem;line-height:1.1}
.sheet-note{font-size:.78rem;color:var(--ink-soft);margin-top:16px;font-style:italic}
@media(max-width:880px){
  .sheet{grid-template-columns:1fr}
  .sheet-info{padding:32px 26px 36px}
  .overlay{padding:0}
}

/* ---------- legal page ---------- */
.legal{
  position:fixed;inset:0;z-index:210;background:rgba(43,29,27,.55);backdrop-filter:blur(3px);
  display:none;justify-content:center;overflow-y:auto;padding:40px 20px;align-items:flex-start
}
.legal.open{display:flex}
.legal-sheet{background:var(--cream);max-width:840px;width:100%;position:relative;box-shadow:0 40px 90px -30px rgba(43,29,27,.6)}
.legal-body{padding:44px 52px 56px}
.legal-body h2{font-size:2.1rem;margin:8px 0 6px}
.legal-body h3{
  font-family:var(--body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--cranberry);margin:38px 0 14px;padding-top:22px;border-top:1px solid var(--sand)
}
.legal-body h4{font-family:var(--body);font-size:.95rem;font-weight:500;color:var(--ink);margin:22px 0 7px}
.legal-body p,.legal-body li{font-size:.9rem;color:var(--ink-soft);margin-bottom:11px}
.legal-body ul{padding-left:20px;margin-bottom:16px}
.legal-body li{margin-bottom:5px}
.legal-body a{color:var(--cranberry)}
.legal-updated{font-size:.78rem;font-style:italic;color:var(--ink-soft)}
.legal-toc{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 4px}
.legal-toc a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cranberry);text-decoration:none;border-bottom:1px solid var(--rose);padding-bottom:2px}
.notice{
  border:1px dashed var(--cranberry);background:#fff4f3;padding:15px 18px;
  font-size:.84rem;color:var(--cranberry-deep);margin:22px 0 4px;line-height:1.6
}
.notice b{font-weight:500}
@media(max-width:820px){
  .legal-body{padding:34px 24px 44px}
  .legal{padding:0}
}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--cranberry);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .card{flex-basis:calc(33.333% - 16px);max-width:calc(33.333% - 16px)}
  .occ-grid{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.about-grid{grid-template-columns:1fr;gap:44px}
  .about-grid img{max-width:420px}
  .step-grid,.del-grid{grid-template-columns:1fr;gap:30px}
  .seal{right:auto;left:-10px}
}
@media(max-width:640px){
  .grid{gap:24px 16px}
  .card{flex-basis:calc(50% - 8px);max-width:calc(50% - 8px)}
  .occ-grid{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr}
  nav ul{gap:18px;padding:13px 16px}
  .hero{padding:44px 0 56px}
  .seal{width:96px;height:96px;font-size:.5rem;bottom:-18px}
  .btn--line{margin-left:0;margin-top:10px}
}

/* ==============================================================
   Added 9 September 2026 — product pages, breadcrumbs, related
   listings, the discount code box, and the terms page.
   ============================================================== */

/* ---------- product page ---------- */
.pdp-wrap{padding:34px 0 76px;background:var(--cream)}
.crumbs{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 6px;padding:0;margin:0}
.crumbs a{text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--cranberry);border-bottom-color:var(--cranberry)}
.crumbs li+li::before{content:'›';margin-right:6px;color:var(--rose)}
.pdp{
  background:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--sand)
}
.pdp .sheet-gallery{position:sticky;top:58px;align-self:start}
.pdp .sheet-info h1{font-size:1.9rem;margin:10px 0 6px;line-height:1.15}
.pdp .thumbs{min-height:62px}
.pdp noscript p{font-size:.84rem;color:var(--ink-soft);border:1px dashed var(--rose);padding:12px 14px;margin:10px 0}
@media(max-width:880px){
  .pdp{grid-template-columns:1fr}
  .pdp .sheet-gallery{position:static}
}

/* ---------- related listings ---------- */
.related{margin-top:72px}
.related .section-head{margin-bottom:34px}
.related .grid .card{flex-basis:calc(25% - 18px);max-width:calc(25% - 18px)}
@media(max-width:1000px){.related .grid .card{flex-basis:calc(33.333% - 16px);max-width:calc(33.333% - 16px)}}
@media(max-width:640px){.related .grid .card{flex-basis:calc(50% - 8px);max-width:calc(50% - 8px)}}

/* ---------- discount code, at checkout ---------- */
.promo{margin:0 0 18px;padding:14px 0 16px;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.promo label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);margin-bottom:6px}
.promo-row{display:flex;gap:8px}
.promo-row input{
  flex:1;min-width:0;width:auto;font-family:var(--body);font-size:.92rem;padding:10px 12px;
  border:1px solid var(--sand);background:var(--cream);color:var(--ink);text-transform:uppercase;letter-spacing:.08em
}
.promo-row input:focus{outline:none;border-color:var(--cranberry)}
.promo-row button{
  font-family:var(--body);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:0 16px;border:1px solid var(--cranberry);background:none;color:var(--cranberry);cursor:pointer;transition:.2s
}
.promo-row button:hover{background:var(--cranberry);color:#fff}
.promo-msg{font-size:.78rem;margin-top:7px;min-height:1em;color:var(--ink-soft)}
.promo-msg.ok{color:#2f6b3a}
.promo-msg.bad{color:var(--cranberry)}
.totals .disc span:last-child{color:var(--cranberry)}

/* ---------- the terms page, when it is a page ---------- */
.legal-page{padding:30px 0 70px;background:var(--cream)}
.legal-page .legal-body{padding:0;max-width:840px;margin:0 auto}
.legal-page .legal-body h1{font-size:2.1rem;margin:8px 0 6px}