/* ============================================================
   PurePharm — Concept D: "Strata"
   Demo 6's craft on the proven Ritual/Seed/Thorne section order.

   Borrowed from demo 6 (devices, not assets):
     · two-tone display headings, accent word stacked and offset
     · ornament watermark behind headings and in band corners
     · split button with an attached solid arrow block
     · bordered icon grid
     · features arranged around a centred product
   Recoloured off blush/peach, which signals the wrong buyer,
   onto warm stone + ink + gold. Ornament redrawn as topographic
   contours: Himalayan rock, not spa leaves.
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --cream:#F7F2E8;
  --cream-2:#EFE7D6;
  --paper:#FFFDF9;
  --ink:#14110B;
  --ink-2:#4E4738;
  --mute:#8A8171;
  --gold:#B08C2E;
  --gold-lt:#D4B25C;
  --gold-dk:#7A6019;
  --green:#2C6349;
  --line:#E2D8C1;
  --pad:clamp(66px,8vw,124px);
  --topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23B08C2E' stroke-width='1.1'%3E%3Cpath d='M10 330q90-140 190-70t210-40'/%3E%3Cpath d='M10 300q95-135 195-65t205-45'/%3E%3Cpath d='M20 268q92-124 188-58t202-48'/%3E%3Cpath d='M34 236q88-110 180-50t196-50'/%3E%3Cpath d='M52 206q82-96 170-44t188-50'/%3E%3Cpath d='M74 178q74-82 156-38t180-48'/%3E%3Cpath d='M100 152q64-66 140-30t170-44'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Archivo',system-ui,sans-serif;font-size:16.5px;line-height:1.68;
  color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
section{padding-block:var(--pad);position:relative;overflow:hidden}

/* ---- ornament: topographic contours, replacing demo 6's leaves ---- */
.topo{position:absolute;background:var(--topo) no-repeat center/contain;
  opacity:.09;pointer-events:none;z-index:0}
.topo--tl{top:-70px;left:-90px;width:400px;height:400px;transform:rotate(-8deg)}
.topo--br{bottom:-90px;right:-80px;width:440px;height:440px;transform:rotate(172deg)}
.mark-wm{position:absolute;pointer-events:none;z-index:0;opacity:.05;width:340px;
  top:50%;left:50%;transform:translate(-50%,-52%)}

/* ---- type: two-tone display heading, demo 6's signature device ---- */
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--ink);font-weight:500;
  line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,66px)}
h2{font-size:clamp(30px,3.8vw,50px)}
h3{font-size:20px;line-height:1.28}
.dual{display:inline-flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.dual em{font-style:normal;color:var(--gold-dk);font-size:.46em;line-height:1.02;
  font-weight:500;padding-top:.18em;max-width:6.5em;display:inline-block}
.dual.on-dark em{color:var(--gold-lt)}
.kick{display:inline-block;font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:16px}
.kick.on-dark{color:var(--gold-lt)}
.lede{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.62;max-width:58ch}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .dual{justify-content:center}
.center .kick{display:block;width:100%}
.center h2{display:block}

/* ---- split button: demo 6's device, white body + solid arrow block ---- */
.split{display:inline-flex;align-items:stretch;border:1px solid var(--ink);background:var(--paper);
  font-family:'Archivo',sans-serif;overflow:hidden}
.split span{padding:17px 26px;font-size:13.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);display:flex;align-items:center;
  transition:background .22s ease,color .22s ease}
.split i{width:54px;background:var(--ink);display:grid;place-items:center;font-style:normal;
  color:var(--cream);transition:background .22s ease}
.split i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  transition:transform .22s ease}
.split:hover span{background:var(--ink);color:var(--cream)}
.split:hover i{background:var(--gold)}
.split:hover i svg{transform:translateX(3px)}
.split--gold{border-color:var(--gold-dk)}
.split--gold span{background:var(--gold);color:var(--ink)}
.split--gold i{background:var(--gold-dk);color:var(--ink)}
.split--gold:hover span{background:var(--gold-dk);color:var(--cream)}
.split--gold:hover i{background:var(--ink);color:var(--cream)}
.split--full{width:100%}
.split--full span{flex:1;justify-content:center}

/* ---- announcement + header ---- */
.announce{background:var(--ink);color:#CFC5AC;text-align:center;font-size:13px;
  padding:11px 18px;letter-spacing:.02em}
.announce b{color:var(--gold-lt)}
.hdr{position:sticky;top:0;z-index:90;background:rgba(247,242,232,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:15px}
.logo{display:flex;align-items:center;gap:11px}
.logo img{height:30px;width:auto}
.logo b{font-family:'Fraunces',serif;font-size:23px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.logo b em{font-style:normal;color:var(--gold-dk)}
.menu{display:flex;gap:34px}
.menu a{font-size:14.5px;font-weight:500;color:var(--ink);position:relative;padding-block:5px}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .28s ease}
.menu a:hover::after{right:0}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;
  cursor:pointer;padding:13px}
.burger span{display:block;height:1.4px;background:var(--ink);margin:5px 0}
@media(max-width:940px){.menu,.hdr .split{display:none}.burger{display:block}}
.drawer{position:fixed;inset:0;z-index:200;background:var(--cream);display:none;
  flex-direction:column;justify-content:center;gap:4px;padding:28px}
.drawer.open{display:flex}
.drawer a{font-family:'Fraunces',serif;font-size:32px;color:var(--ink);padding:10px 0}
.drawer .x{position:absolute;top:22px;right:24px;width:44px;height:44px;border:1px solid var(--line);
  background:transparent;font-size:19px;cursor:pointer;color:var(--ink)}

/* ---- hero: static, not a slider ---- */
.hero{background:var(--cream);border-bottom:1px solid var(--line)}
.hero .grid{display:grid;gap:clamp(30px,4vw,60px);align-items:center;padding-block:clamp(44px,5vw,80px)}
@media(min-width:941px){.hero .grid{grid-template-columns:1.06fr .94fr}}
.hero .lede{margin-top:20px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:32px}
.hero-rate{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:14px;color:var(--ink-2)}
.hero-rate b{color:var(--ink)}
.stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.hero-fig{position:relative;display:grid;place-items:center;min-height:330px}
.hero-fig img.jar{max-height:400px;width:auto;position:relative;z-index:1;
  filter:drop-shadow(0 30px 46px rgba(20,17,11,.20))}
.hero-seal{position:absolute;right:2%;bottom:4%;z-index:2;background:var(--ink);color:var(--cream);
  border:1px solid var(--gold-dk);padding:11px 16px;text-align:center}
.hero-seal b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--gold-lt);line-height:1}
.hero-seal span{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:5px}

/* ---- value line ---- */
.vline{background:var(--paper);border-bottom:1px solid var(--line);text-align:center}
.vline .wrap{padding-block:clamp(44px,5vw,72px)}

/* ---- products, high on the page ---- */
.prods{display:grid;gap:24px;margin-top:48px}
@media(min-width:761px){.prods{grid-template-columns:1fr 1fr}}
.prod{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;
  position:relative;transition:box-shadow .25s ease}
.prod:hover{box-shadow:0 22px 52px rgba(20,17,11,.11)}
.prod.pick{border:1px solid var(--gold);box-shadow:0 18px 44px rgba(176,140,46,.14)}
.prod-media{background:var(--cream);padding:36px;display:grid;place-items:center;min-height:290px;
  position:relative;border-bottom:1px solid var(--line)}
.prod-media img{max-height:236px;width:auto}
.flag{position:absolute;top:0;right:0;background:var(--gold);color:var(--ink);font-size:10.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px}
.prod-body{padding:28px 30px 32px;display:flex;flex-direction:column;flex:1}
.prod-body h3{margin-bottom:5px}
.prod-sup{font-size:14px;color:var(--mute)}
.prod-cost{display:flex;align-items:baseline;gap:12px;margin:20px 0 4px}
.prod-cost .amt{font-family:'Fraunces',serif;font-size:38px;color:var(--ink);line-height:1}
.prod-cost .rate{font-size:13.5px;font-weight:700;color:var(--green)}
.prod-note{font-size:14.5px;margin:14px 0 26px;flex:1}
.prod-ship{font-size:12.5px;color:var(--mute);text-align:center;margin-top:13px}

/* ---- trust strip ---- */
.stats{background:var(--ink);color:#CFC5AC}
.stats .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;
  padding-block:clamp(46px,5vw,74px)}
@media(min-width:861px){.stats .wrap{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:'Fraunces',serif;font-size:clamp(27px,2.9vw,37px);
  color:var(--gold-lt);line-height:1;margin-bottom:10px;font-weight:500}
.stat span{font-size:13.5px;line-height:1.55;display:block}

/* ---- the lab panel: demo 6's icon grid, repurposed ---- */
.panel{background:var(--cream)}
.grid8{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:48px}
@media(min-width:681px){.grid8{grid-template-columns:repeat(4,1fr)}}
.cell{background:var(--cream);padding:30px 22px;text-align:center;transition:background .25s ease}
.cell:hover{background:var(--paper)}
.cell svg{width:34px;height:34px;stroke:var(--gold-dk);fill:none;stroke-width:1.4;margin:0 auto 15px}
.cell h3{font-size:15.5px;margin-bottom:7px}
.cell .res{font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;color:var(--green);display:block}
.cell .res.val{color:var(--ink)}
.cell small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-top:6px}

/* ---- proof around the product: demo 6's best device ---- */
.around{background:var(--paper)}
.around-grid{display:grid;gap:26px;align-items:center;margin-top:52px}
@media(min-width:941px){.around-grid{grid-template-columns:1fr 1.06fr 1fr}}
.fact{display:flex;gap:16px;align-items:flex-start;padding:18px 0}
.fact + .fact{border-top:1px solid var(--line)}
.fact .bub{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--cream);
  border:1px solid var(--line);display:grid;place-items:center}
.fact .bub svg{width:21px;height:21px;stroke:var(--gold-dk);fill:none;stroke-width:1.5}
.fact h3{font-size:16.5px;margin-bottom:4px}
.fact p{font-size:14px;color:var(--mute);line-height:1.55}
@media(min-width:941px){
  .around-col--l .fact{flex-direction:row-reverse;text-align:right}
  .around-col--l .fact h3,.around-col--l .fact p{text-align:right}
}
.around-mid{position:relative;display:grid;place-items:center;min-height:400px}
.around-mid img{max-height:400px;width:auto;position:relative;z-index:1;
  filter:drop-shadow(0 26px 44px rgba(20,17,11,.18))}

/* ---- certificate ---- */
.coa{background:var(--cream)}
.coa .grid{display:grid;gap:clamp(32px,4vw,60px);align-items:center}
@media(min-width:941px){.coa .grid{grid-template-columns:1fr 1fr}}
.coa-doc{border:1px solid var(--line);background:var(--paper);padding:13px;
  box-shadow:0 24px 56px rgba(20,17,11,.13);display:block}
.ticks{display:grid;gap:15px;margin-top:28px}
.ticks div{display:flex;gap:13px;align-items:flex-start;font-size:15.5px}
.ticks .t{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:2px}

/* ---- reviews ---- */
.says{background:var(--paper)}
.quotes{display:grid;gap:24px;margin-top:50px}
@media(min-width:821px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{border:1px solid var(--line);background:var(--cream);padding:30px 28px;position:relative}
.quote::before{content:"\201C";position:absolute;top:6px;right:20px;font-family:'Fraunces',serif;
  font-size:76px;color:var(--gold);opacity:.2;line-height:1}
.quote p{font-family:'Fraunces',serif;font-size:18.5px;line-height:1.42;color:var(--ink);
  margin:12px 0 18px;position:relative}
.quote footer{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* ---- questions ---- */
.qa{background:var(--cream)}
.qa-list{max-width:820px;margin:46px auto 0}
.qa details{border:1px solid var(--line);background:var(--paper);margin-bottom:12px}
.qa summary{list-style:none;cursor:pointer;padding:22px 56px 22px 26px;position:relative;
  font-family:'Fraunces',serif;font-size:18.5px;color:var(--ink);line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:26px;top:18px;font-size:23px;
  color:var(--gold-dk);font-family:'Archivo',sans-serif;font-weight:300}
.qa details[open] summary::after{content:"\2013"}
.qa .ans{padding:0 26px 24px;font-size:15.5px}

/* ---- close ---- */
.close{background:var(--ink);color:#CFC5AC;text-align:center}
.close h2{color:var(--paper)}
.close .lede{margin:18px auto 32px;color:#CFC5AC}

/* ---- footer ---- */
.ftr{background:var(--ink);color:#9E9583;font-size:14.5px;border-top:1px solid rgba(207,197,172,.14)}
.ftr .wrap{padding-block:56px 34px}
.ftr-grid{display:grid;gap:34px}
@media(min-width:761px){.ftr-grid{grid-template-columns:1.7fr repeat(4,minmax(0,1fr))}}
.ftr h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr a:hover{color:var(--gold-lt)}
.ftr-brand img{height:30px;margin-bottom:15px}
.ftr-brand p{font-size:14px;max-width:34ch}
.pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pay span{border:1px solid rgba(158,149,131,.3);padding:6px 12px;font-size:10.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ftr-legal{margin-top:42px;padding-top:22px;border-top:1px solid rgba(158,149,131,.2);
  font-size:12.5px;line-height:1.7;color:#867E6E}

/* ---- sticky buy ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--cream);
  border-top:1px solid var(--ink);display:none;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 18px;transform:translateY(105%);transition:transform .28s ease}
.dock.show{transform:translateY(0)}
.dock .info b{display:block;font-family:'Fraunces',serif;font-size:18px;color:var(--ink);line-height:1.1}
.dock .info span{font-size:11.5px;color:var(--green);font-weight:700}
.dock .split span{padding:12px 16px;font-size:11px}
.dock .split i{width:42px}
@media(max-width:940px){.dock{display:flex}body{padding-bottom:72px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ============================================================
   Inner pages
   ============================================================ */

/* ---- page header band ---- */
.pagehead{background:var(--cream);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead .wrap{padding-block:clamp(40px,5vw,72px)}
.crumb{font-size:12.5px;color:var(--mute);margin-bottom:16px}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--gold-dk)}
.pagehead .lede{margin-top:16px}

/* ---- product detail ---- */
.pdp{display:grid;gap:clamp(32px,4vw,58px);align-items:start}
@media(min-width:941px){.pdp{grid-template-columns:1.02fr .98fr}}
.gal-main{background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;
  padding:clamp(28px,4vw,52px);min-height:420px;position:relative}
.gal-main img{max-height:400px;width:auto}
.gal-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.gal-thumbs button{background:var(--cream);border:1px solid var(--line);padding:12px;cursor:pointer;
  transition:border-color .2s ease}
.gal-thumbs button.on{border-color:var(--gold);border-width:2px;padding:11px}
.gal-thumbs img{max-height:74px;width:auto;margin:0 auto}
.buy h1{font-size:clamp(27px,3vw,38px);margin-bottom:10px}
.sku{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.buy-rate{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:20px}
.buy-cost{display:flex;align-items:baseline;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.buy-cost .amt{font-family:'Fraunces',serif;font-size:46px;color:var(--ink);line-height:1}
.buy-cost .rate{font-size:14.5px;font-weight:700;color:var(--green)}
.sizes{display:flex;gap:12px;margin:22px 0}
.sizes a{flex:1;border:1px solid var(--line);padding:15px 14px;text-align:center;
  font-size:14px;font-weight:600;color:var(--ink);transition:border-color .2s ease,background .2s ease}
.sizes a:hover{border-color:var(--ink)}
.sizes a.on{border-color:var(--gold);background:rgba(176,140,46,.07);border-width:2px;padding:14px 13px}
.sizes a small{display:block;font-size:11.5px;font-weight:400;color:var(--mute);margin-top:3px}
.ship-line{display:flex;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--line);
  padding:14px 16px;font-size:14px;color:var(--ink);margin-top:16px}
.ship-line svg{width:20px;height:20px;stroke:var(--gold-dk);fill:none;stroke-width:1.6;flex-shrink:0}
.paynear{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:14px}
.paynear span{border:1px solid var(--line);padding:5px 11px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.paynear em{font-style:normal;font-size:11.5px;color:var(--mute);width:100%;text-align:center;margin-top:3px}
.proofbox{border:1px solid var(--line);border-left:3px solid var(--gold);padding:16px 18px;
  font-size:14.5px;margin-top:20px;background:var(--paper)}
.proofbox a{color:var(--gold-dk);font-weight:700;border-bottom:1px solid currentColor}

/* ---- steps ---- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
@media(min-width:761px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);padding:30px}
.step .n{font-family:'Fraunces',serif;font-size:34px;color:var(--gold);line-height:1;display:block;margin-bottom:12px}
.step h3{font-size:17.5px;margin-bottom:7px}
.step p{font-size:14.5px}

/* ---- results table (certificate page) ---- */
.results{width:100%;border-collapse:collapse;font-size:15px;margin-top:12px}
.results th{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);font-weight:700;padding:0 12px 14px 0;border-bottom:1px solid var(--ink)}
.results td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.results td:last-child,.results th:last-child{text-align:right;padding-right:0}
.results .nd{color:var(--green);font-weight:700}
.results .meth{font-size:12.5px;color:var(--mute);letter-spacing:.04em}
.batchbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.batchbar span,.batchbar a{border:1px solid var(--line);padding:11px 20px;font-size:13.5px;font-weight:600;color:var(--ink)}
.batchbar .on{border-color:var(--gold);background:rgba(176,140,46,.07)}
.meta4{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:34px}
@media(min-width:761px){.meta4{grid-template-columns:repeat(4,1fr)}}
.meta4 div{background:var(--cream);padding:18px 20px}
.meta4 dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.meta4 dd{font-size:15.5px;color:var(--ink);font-weight:600}

/* ---- two-column prose ---- */
.duo{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:901px){.duo{grid-template-columns:1fr 1fr}}
.prose p + p{margin-top:16px}
.prose h3{margin:30px 0 10px}
.notecards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.notecards > div{background:var(--paper);padding:26px 28px}
.notecards h3{font-size:17px;margin-bottom:7px}
.notecards p{font-size:14.5px}

/* ---- contact tiles ---- */
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
@media(min-width:761px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--paper);padding:32px 30px}
.tile .lbl{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dk);display:block;margin-bottom:12px}
.tile h3{font-size:19px;margin-bottom:8px}
.tile h3 a:hover{color:var(--gold-dk)}
.tile p{font-size:14.5px}

/* breadcrumb-only header band needs no height; and the first section after any
   page header was doubling up on vertical space */
.pagehead--slim .wrap{padding-block:20px}
.pagehead--slim .crumb{margin-bottom:0}
.pagehead + section{padding-top:clamp(44px,5vw,74px)}

/* ---- photography ---- */
/* dark trust strip now sits on real rock rather than flat black */
.stats{background:var(--ink) url('../img/himalaya-strata.webp') center/cover no-repeat;position:relative}
.stats::before{content:"";position:absolute;inset:0;background:rgba(20,17,11,.88)}
.stats .wrap{position:relative;z-index:1}

.band-img{position:relative;width:100%;height:clamp(300px,40vw,560px);overflow:hidden;border-bottom:1px solid var(--line)}
.band-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.band-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 24px;
  background:linear-gradient(transparent,rgba(20,17,11,.72));color:#E4DCC8;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}

.figure{border:1px solid var(--line);overflow:hidden;background:var(--cream)}
.figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.figure figcaption{padding:14px 18px;font-size:12.5px;color:var(--mute);
  letter-spacing:.06em;border-top:1px solid var(--line)}

.steps-fig{margin-top:52px;display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:901px){.steps-fig{grid-template-columns:.95fr 1.05fr}}

/* ---- journal index ---- */
.posts{display:grid;gap:26px;margin-top:48px}
@media(min-width:761px){.posts{grid-template-columns:repeat(2,1fr)}}
.post{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;
  transition:box-shadow .25s ease}
.post:hover{box-shadow:0 20px 46px rgba(20,17,11,.10)}
.post-media{background:var(--cream);border-bottom:1px solid var(--line);overflow:hidden}
.post-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-body{padding:28px 30px 32px;display:flex;flex-direction:column;flex:1}
.post .cat{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dk);border:1px solid rgba(176,140,46,.4);
  padding:5px 10px;align-self:flex-start;margin-bottom:14px}
.post h3{font-size:22px;line-height:1.24;margin-bottom:10px}
.post p{font-size:14.5px;flex:1}
.post .more{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dk)}
.post.lead{grid-column:1/-1}
@media(min-width:761px){.post.lead{flex-direction:row}
  .post.lead .post-media{width:46%;border-bottom:0;border-right:1px solid var(--line);flex-shrink:0}
  .post.lead .post-media img{height:100%;aspect-ratio:auto;min-height:320px}
  .post.lead .post-body{justify-content:center;padding:38px 40px}
  .post.lead h3{font-size:clamp(24px,2.6vw,32px)}}

/* ---- article ---- */
.article{max-width:720px;margin:0 auto}
.byline{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--mute);
  padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.byline b{color:var(--ink)}
.article p{font-size:17px;line-height:1.72;margin-bottom:18px}
.article h2{font-size:clamp(24px,2.6vw,32px);margin:44px 0 16px}
.article h3{font-size:20px;margin:30px 0 10px}
.article ul,.article ol{margin:0 0 20px 22px}
.article li{margin-bottom:9px;font-size:16.5px;line-height:1.65}
.article a{color:var(--gold-dk);font-weight:600;border-bottom:1px solid rgba(176,140,46,.45)}
.article a:hover{border-color:var(--gold-dk)}
.article strong{color:var(--ink)}
.article table{width:100%;border-collapse:collapse;font-size:15px;margin:24px 0}
.article th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding:0 12px 12px 0;border-bottom:1px solid var(--ink)}
.article td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.article blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 22px;margin:26px 0;
  font-family:'Fraunces',serif;font-size:20px;line-height:1.42;color:var(--ink)}
.article figure{margin:28px 0}
.article figure img{width:100%;border:1px solid var(--line)}
.article figcaption{font-size:12.5px;color:var(--mute);margin-top:10px;text-align:center}
.wp-block-rank-math-faq-block{margin-top:38px;border-top:1px solid var(--line);padding-top:8px}
.rank-math-faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.rank-math-question{font-family:'Fraunces',serif;font-size:19px;color:var(--ink);margin-bottom:8px;line-height:1.3}
.rank-math-answer p{font-size:15.5px;margin-bottom:0}
.article-cta{border:1px solid var(--line);background:var(--cream);padding:32px 34px;margin-top:44px}
.article-cta h3{font-size:21px;margin-bottom:8px}
.article-cta p{font-size:15px;margin-bottom:20px}

/* ---- in-article product aside: subtle, contextual, not a banner ---- */
.aside-buy{border:1px solid var(--line);background:var(--cream);padding:26px 28px;margin:38px 0;
  display:grid;gap:22px;align-items:center}
@media(min-width:601px){.aside-buy{grid-template-columns:132px 1fr}}
.aside-buy img{width:100%;max-width:132px;height:auto;margin:0 auto;mix-blend-mode:multiply}
.aside-buy .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:9px}
.aside-buy h3{font-size:19px;margin-bottom:7px;line-height:1.25}
.aside-buy p{font-size:14.5px;margin-bottom:16px;line-height:1.55}
.aside-buy .price{font-family:'Fraunces',serif;font-size:24px;color:var(--ink);margin-right:10px}
.aside-buy .per{font-size:13px;font-weight:700;color:var(--green)}
.aside-buy .row{display:flex;align-items:baseline;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.aside-buy .split span{padding:13px 20px;font-size:12px}
.aside-buy .split i{width:44px}

/* inline contextual link, slightly warmer than a plain article link */
.article .ctx{color:var(--gold-dk);font-weight:600;border-bottom:1px solid rgba(176,140,46,.5)}
.article .ctx:hover{border-color:var(--gold-dk)}

/* =========================================================================
   WordPress and WooCommerce integration
   ====================================================================== */

/* cart button in the header */
.pp-cart{position:relative;display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);color:var(--ink);flex-shrink:0}
.pp-cart:hover{border-color:var(--ink)}
.pp-cart svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.pp-cart b{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;border-radius:19px;
  background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:800;display:grid;
  place-items:center;padding:0 5px;line-height:1}

/* Woo's add-to-cart form, wearing our button */
.pp-atc{margin:22px 0 0}
.pp-atc form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0}
.pp-atc .quantity{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--paper)}
.pp-atc .quantity input.qty{width:64px;border:0;background:transparent;text-align:center;
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;color:var(--ink);
  -moz-appearance:textfield;padding:0 4px}
.pp-atc .quantity input.qty::-webkit-outer-spin-button,
.pp-atc .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-atc .quantity label{display:none}
.pp-atc button.single_add_to_cart_button{
  flex:1;min-width:230px;cursor:pointer;border:1px solid var(--gold-dk);background:var(--gold);
  color:var(--ink);font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:17px 26px;border-radius:0;
  transition:background .22s ease,color .22s ease}
.pp-atc button.single_add_to_cart_button:hover{background:var(--gold-dk);color:var(--cream)}
.pp-atc button.single_add_to_cart_button.loading{opacity:.7}
.pp-atc .stock.out-of-stock{color:#B00020;font-weight:700;font-size:14px}
.pp-atc .woocommerce-variation-price{margin-bottom:12px}

/* Woo pages (shop, cart, checkout, account) wrapped in our chrome */
.pp-woo{padding-block:clamp(40px,5vw,72px);background:var(--paper)}
.pp-woo h1,.pp-woo h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.018em;color:var(--ink)}
.pp-woo a{color:var(--gold-dk)}
.pp-woo .button,.pp-woo button.button,.pp-woo a.button,
.pp-woo .wc-block-components-button{
  background:var(--ink)!important;color:var(--cream)!important;border-radius:0!important;
  font-family:'Archivo',sans-serif!important;font-size:13px!important;font-weight:700!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;padding:16px 28px!important;
  border:1px solid var(--ink)!important}
.pp-woo .button:hover,.pp-woo button.button:hover,.pp-woo a.button:hover,
.pp-woo .wc-block-components-button:hover{background:var(--gold)!important;color:var(--ink)!important;
  border-color:var(--gold-dk)!important}
.pp-woo .checkout-button,.pp-woo .wc-block-cart__submit-button{
  background:var(--gold)!important;color:var(--ink)!important;border-color:var(--gold-dk)!important}
.pp-woo table.shop_table{border-collapse:collapse;border:0}
.pp-woo table.shop_table th{font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--ink);padding:0 12px 13px 0}
.pp-woo table.shop_table td{border-bottom:1px solid var(--line);padding:16px 12px 16px 0;color:var(--ink)}
.pp-woo .woocommerce-message,.pp-woo .woocommerce-info,.pp-woo .woocommerce-error{
  border-top-color:var(--gold);background:var(--cream);border-radius:0}
.pp-woo ul.products{display:grid;gap:24px;list-style:none;margin:0;padding:0}
@media(min-width:761px){.pp-woo ul.products{grid-template-columns:repeat(3,1fr)}}
.pp-woo ul.products li.product{border:1px solid var(--line);background:var(--paper);padding:0;text-align:left}
.pp-woo ul.products li.product a img{width:100%;background:var(--cream)}
.pp-woo ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces',serif;font-size:19px;color:var(--ink);padding:20px 22px 4px;margin:0}
.pp-woo ul.products li.product .price{display:block;padding:0 22px 16px;font-family:'Fraunces',serif;
  font-size:24px;color:var(--ink)}
.pp-woo ul.products li.product .button{margin:0 22px 22px;display:inline-block}

/* header right-hand cluster: cart, shop button, burger on one line */
.hdr-end{display:flex;align-items:center;gap:12px}
@media(max-width:940px){.hdr-end .pp-cart{order:1}}

/* product long description */
.pp-longdesc{background:var(--paper);border-top:1px solid var(--line)}
.pp-longdesc .article h2{font-size:clamp(22px,2.3vw,28px);margin:38px 0 14px}
.pp-longdesc .article h2:first-child{margin-top:0}
.pp-longdesc .article table{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0}
.pp-longdesc .article th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding:0 12px 12px 0;border-bottom:1px solid var(--ink)}
.pp-longdesc .article td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);color:var(--ink)}

/* two-tone heading: keep the accent aligned with the main phrase when it wraps */
@media(max-width:760px){
  .dual{flex-direction:column;gap:4px}
  .dual em{padding-top:2px;max-width:none}
  .center .dual,.vline .dual,.close .dual{align-items:center}
  .center .dual em,.vline .dual em,.close .dual em{text-align:center}
}

/* ==========================================================================
   Shop forms: cart, checkout, account.
   Woodmart ships fully rounded 40px pills. Nothing else on this site has a
   rounded corner and the fields were too short to read comfortably, with the
   floating label sitting on top of the value. Everything below is scoped to
   .pp-woo so Woodmart keeps its own styling anywhere we have not rebuilt.
   ========================================================================== */

.pp-woo{--fld-h:60px;--fld-pad:16px}
@media(max-width:760px){.pp-woo{--fld-h:56px}}

/* --- the field itself, blocks checkout and classic account alike ---------- */
.pp-woo input[type=text],
.pp-woo input[type=email],
.pp-woo input[type=tel],
.pp-woo input[type=url],
.pp-woo input[type=password],
.pp-woo input[type=search],
.pp-woo input[type=number],
.pp-woo select,
.pp-woo textarea,
.pp-woo .wc-blocks-components-select__select,
.pp-woo .wc-block-components-combobox-control input{
  box-sizing:border-box;
  width:100%;
  min-height:var(--fld-h);
  border:1px solid var(--line);
  background:#fff;
  padding:26px var(--fld-pad) 9px;
  font-family:'Archivo',sans-serif;
  font-size:16px;              /* 16px stops iOS zooming the page on focus */
  line-height:1.3;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}

.pp-woo textarea{padding-top:16px;min-height:120px;resize:vertical}

/* fields with no floating label sit centred instead of bottom-weighted */
.pp-woo .woocommerce-Input,
.pp-woo input.input-text{padding:16px var(--fld-pad)}

.pp-woo input:focus,
.pp-woo select:focus,
.pp-woo textarea:focus,
.pp-woo .wc-blocks-components-select__select:focus{
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent);
}

.pp-woo input::placeholder,.pp-woo textarea::placeholder{color:var(--mute)}

/* --- floating labels ------------------------------------------------------
   The whole complaint. Blocks pins the label over the value inside a short
   box, so the two collide. Give the field a taller body, park the resting
   label on the text baseline, and lift the active label clear of it. */
.pp-woo .wc-block-components-text-input,
.pp-woo .wc-blocks-components-select{position:relative}

.pp-woo .wc-block-components-text-input label,
.pp-woo .wc-blocks-components-select__label{
  position:absolute;
  left:calc(var(--fld-pad) + 1px);
  top:calc(var(--fld-h) / 2);
  transform:translateY(-50%);
  margin:0;
  padding:0;
  font-family:'Archivo',sans-serif;
  font-size:16px;
  line-height:1;
  color:var(--mute);
  pointer-events:none;
  transform-origin:left top;
  transition:top .14s ease,font-size .14s ease,color .14s ease,transform .14s ease;
}

.pp-woo .wc-block-components-text-input.is-active label,
.pp-woo .wc-block-components-text-input input:focus + label,
.pp-woo .wc-blocks-components-select__label{
  top:11px;
  transform:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.pp-woo .wc-block-components-text-input.is-active input:focus + label{color:var(--gold-dk)}

/* selects always show their label, so they never need the resting position */
.pp-woo .wc-blocks-components-select__select{padding-right:38px;appearance:none}

/* --- classic account form labels ------------------------------------------ */
.pp-woo .woocommerce form .form-row,
.pp-woo .woocommerce-form-row{margin-bottom:20px}

.pp-woo .woocommerce form .form-row label,
.pp-woo .woocommerce-form-row label{
  display:block;
  margin-bottom:9px;          /* was effectively 2px, hence "very close together" */
  font-family:'Archivo',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.pp-woo .woocommerce form .form-row label.woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:10px;
  margin-bottom:0;font-size:14px;letter-spacing:0;text-transform:none;
  font-weight:400;color:var(--ink-2);
}

/* --- spacing between fields ----------------------------------------------- */
.pp-woo .wc-block-components-text-input,
.pp-woo .wc-blocks-components-select,
.pp-woo .wc-block-components-address-form .wc-block-components-text-input{margin-top:18px}

/* --- checkboxes and radios ------------------------------------------------- */
.pp-woo input[type=checkbox],
.pp-woo input[type=radio]{
  width:19px;height:19px;min-height:0;
  accent-color:var(--gold-dk);
  padding:0;
}
.pp-woo input[type=radio]{border-radius:50%}

/* --- panels, radio cards, order summary ----------------------------------- */
.pp-woo .wc-block-components-radio-control__option,
.pp-woo .wc-block-components-panel,
.pp-woo .wc-block-components-order-summary,
.pp-woo .wc-block-checkout__sidebar .wc-block-components-sidebar,
.pp-woo .wc-block-components-checkout-step{border-radius:2px}

.pp-woo .wc-block-components-radio-control-accordion-option,
.pp-woo .wc-block-components-radio-control__option{
  border:1px solid var(--line);border-radius:2px;background:#fff;
}
.pp-woo .wc-block-components-radio-control__option--checked-option-highlighted,
.pp-woo .wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:var(--ink);
}

/* --- buttons: square, like every other button on the site ------------------ */
.pp-woo .wc-block-components-button,
.pp-woo .woocommerce-button,
.pp-woo button[type=submit],
.pp-woo .button{
  min-height:56px;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:13px;
}

/* --- account page: two columns Woodmart centres for no reason -------------- */
.pp-woo .u-column1,.pp-woo .u-column2,
.pp-woo .woocommerce-Address,
.pp-woo .col-1,.pp-woo .col-2{text-align:left}
.pp-woo .u-column2 h2,.pp-woo .col-2 h2{text-align:left}

/* --- select2, used by the province picker in places ------------------------ */
.pp-woo .select2-container--default .select2-selection--single{
  height:var(--fld-h);border:1px solid var(--line);
}
.pp-woo .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:var(--fld-h);padding-left:var(--fld-pad);color:var(--ink);
}
.pp-woo .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:var(--fld-h);
}

/* Woodmart's account page uses its own wd-* wrappers and centres the register
   column. Nothing else on the site is centred like that. */
.pp-woo .wd-registration-page,
.pp-woo .wd-col,
.pp-woo .col-login,
.pp-woo .col-register,
.pp-woo .wd-login-title{text-align:left}

.pp-woo .wd-login-title{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(20px,2vw,24px);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  margin-bottom:22px;
}

/* every button in the shop chrome, whatever class Woodmart gave it */
.pp-woo .btn,
.pp-woo .wd-btn,
.pp-woo a.button,
.pp-woo .woocommerce-form-register__submit,
.pp-woo .woocommerce-form-login__submit{
  min-height:56px;
  display:inline-flex;align-items:center;justify-content:center;
  padding-inline:30px;
  font-family:'Archivo',sans-serif;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13px;
  background:var(--ink);color:#fff;border:0;
}
.pp-woo .btn:hover,.pp-woo .wd-btn:hover,.pp-woo a.button:hover,
.pp-woo .woocommerce-form-register__submit:hover,
.pp-woo .woocommerce-form-login__submit:hover{background:var(--gold-dk);color:#fff}


/* Footer: five columns is one more than the original grid held, so the brand block
   gets its own row below tablet rather than being squeezed to nothing. */
@media(max-width:1080px){
  .ftr-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:44px}
  .ftr-brand{grid-column:1/-1;order:-1;max-width:46ch}
}
@media(max-width:720px){
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px}
}
.ftr-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.ftr-legal p{margin:0}

/* Journal archive grid. The lead card keeps its side-by-side layout; everything
   published after it lands in a three-up grid. */
.posts--grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:26px}
@media(max-width:980px){.posts--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.posts--grid{grid-template-columns:1fr}}
.posts--grid .post{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease}
.posts--grid .post:hover{border-color:var(--ink);transform:translateY(-2px)}

.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px}
.pager .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 14px;border:1px solid var(--line);background:var(--paper);
  font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:none}
.pager .page-numbers:hover{border-color:var(--ink)}
.pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

.steps .step h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.steps .step h3 a:hover{border-color:var(--gold)}

/* Journal cards.
   The masters are square, with everything meaningful inside the centred 16:9 band.
   A plain centred cover crop therefore works at any card shape: square keeps the whole
   image, 16:9 keeps exactly the safe band. No zooming or repositioning needed. */
.posts--grid .post-media{aspect-ratio:16/9;overflow:hidden}
.posts--grid .post-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.post.lead .post-media{overflow:hidden;max-height:430px}
.post.lead .post-media img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center}
@media(max-width:760px){.post.lead .post-media{max-height:250px}}

/* The featured image at the top of an article, cropped to the same safe band. */
.pp-post-hero{margin:0 0 34px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.pp-post-hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Long-form editor content: policy pages, stockists, anything added later. */
.pp-page{padding-block:clamp(40px,5vw,72px);background:var(--paper)}
.pp-page .prose{max-width:74ch}
.pp-page .prose > *:first-child{margin-top:0}
.pp-page .prose h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(23px,2.4vw,30px);
  font-weight:600;line-height:1.2;margin:44px 0 14px}
.pp-page .prose h3{font-family:'Fraunces',Georgia,serif;font-size:clamp(18px,1.8vw,21px);
  font-weight:600;margin:30px 0 10px}
.pp-page .prose p{margin-bottom:17px;line-height:1.72;color:var(--ink-2)}
.pp-page .prose a{color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px}
.pp-page .prose ul,.pp-page .prose ol{margin:0 0 20px 20px}
.pp-page .prose li{margin-bottom:9px;line-height:1.66;color:var(--ink-2)}
.pp-page .prose table{width:100%;border-collapse:collapse;margin:24px 0}
.pp-page .prose th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);padding:0 12px 10px 0;border-bottom:2px solid var(--ink)}
.pp-page .prose td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;color:var(--ink-2)}
.pp-page .prose blockquote{margin:22px 0;padding-left:20px;border-left:2px solid var(--gold)}
/* stockists is an Elementor page carrying the store locator, so let it use full width */
.pp-page .prose:has(.elementor),
.pp-page .prose:has(.asl-p-cnt),
.pp-page .prose:has([id^="asl-storelocator"]){max-width:none}

/* In-article calls to action.
   The journal shipped with text links only and no buttons, against a written instruction
   for four button CTAs per post. These reuse the site's button language rather than
   inventing a new one, and they sit inside the reading flow instead of the chrome. */
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0;align-items:stretch}
.pp-cta--single{margin:28px 0}
.pp-cta a{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 22px;border:2px solid var(--ink);background:var(--ink);color:#fff;
  font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.pp-cta a small{
  display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:none;opacity:.72;margin-top:2px;
}
.pp-cta a span{display:block}
.pp-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,17,11,.16)}
.pp-cta .gold{
  background:linear-gradient(155deg,#DDBC55,#C9A227 40%,#8A681F);
  border-color:#8A681F;color:#fff;
}
.pp-cta .gold:hover{background:linear-gradient(155deg,#E4C568,#D4AE33 40%,#9A7524)}
.pp-cta .ghost{background:transparent;border:2px solid #BE9226;color:var(--ink)}
.pp-cta .ghost:hover{background:rgba(190,146,38,.08)}
.pp-cta .arw{font-size:15px;line-height:1}
@media(max-width:620px){
  .pp-cta{flex-direction:column}
  .pp-cta a{width:100%;justify-content:space-between}
}
/* category copy under the product grid */
.pp-termdesc{margin-top:clamp(44px,5vw,72px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.pp-termdesc .prose{max-width:74ch}
.pp-termdesc h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(21px,2.2vw,27px);font-weight:600;margin:34px 0 12px}
.pp-termdesc h2:first-child{margin-top:0}
.pp-termdesc p{margin-bottom:15px;line-height:1.7;color:var(--ink-2)}
.pp-termdesc ul{margin:0 0 18px 20px}
.pp-termdesc li{margin-bottom:8px;line-height:1.65;color:var(--ink-2)}
.pp-termdesc a{color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px}

/* Related guides block at the end of a journal post */
.pp-related{margin:44px 0 0;padding:28px 30px;background:var(--cream);border:1px solid var(--line)}
.pp-related h2{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;margin:0 0 14px}
.pp-related ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pp-related a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.5;padding-bottom:2px}
.pp-related a:hover{border-color:var(--gold)}

/* Home page sets. The resin is the hero; the partner item is what it goes with. */
.sets{padding-block:clamp(56px,6vw,92px);background:var(--cream)}
.sets .lede{max-width:62ch;margin-inline:auto}
.setgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
@media(max-width:980px){.setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.setgrid{grid-template-columns:1fr}}
.set{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease}
.set:hover{border-color:var(--ink);transform:translateY(-2px)}
.set-media{aspect-ratio:1/1;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.set-media img{width:100%;height:100%;object-fit:contain;padding:14px}
.set-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.set-body h3{font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.3;font-weight:600;margin-bottom:12px}
.set-price{margin-bottom:16px}
.set-price b{display:block;font-family:'Archivo',sans-serif;font-size:23px;font-weight:700}
.set-price span{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.set .more{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dk)}
.setnote{margin-top:32px;text-align:center;font-size:14.5px;color:var(--ink-2)}

/* Mobile product page: get the price and the button above the fold.
   Measured on the previous stylesheet at 390px, the H1 landed at ~732px, the price at
   ~945px and Add to cart at ~1075px, against a visible viewport of about 700px. So the
   price sat 1.35 screens down while Contentsquare puts mobile scroll rate at 45.2%.
   Below 760px the gallery is capped and the buy column is pulled up. */
@media(max-width:760px){
  .pdp{gap:18px}
  .pdp .gal-main{max-height:30vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .pdp .gal-main img{max-height:30vh;width:auto;object-fit:contain}
  .pdp .gal-thumbs{margin-top:10px}
  .pdp .gal-thumbs button{width:44px;height:44px}
  .buy h1{font-size:clamp(21px,5.4vw,26px);line-height:1.18;margin-bottom:6px}
  .buy .sku{font-size:12.5px;margin-bottom:6px}
  .buy-rate{font-size:12.5px;margin-bottom:12px}
  .buy-cost{margin-bottom:14px}
  .pagehead--slim{padding-block:14px}
  .pagehead--slim .crumb{font-size:11.5px}
}
/* the delivery line now sits above the button, so it needs to read as a term not a footnote */
.ship-line{margin-bottom:14px;margin-top:0}
@media(max-width:760px){
  /* the chrome above the product was costing 230px before the gallery started */
  .announce{padding:7px 0;font-size:11.5px}
  .pagehead--slim{padding-block:9px}
  .pagehead--slim .crumb{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdp{padding-top:12px}
  .pdp .gal-thumbs{margin-top:8px;gap:8px}
}
@media(max-width:760px){
  /* explicit pixels: the vh cap was being defeated by the container padding */
  .pdp .gal-main{max-height:230px;min-height:0;padding:10px}
  .pdp .gal-main img{max-height:210px;height:auto}
}