/* Param Bakers & Namkeen — storefront.
   Values come from the design handoff's token table; do not invent new ones. */

:root{
  /* colour */
  --ink:#2A1710;
  --admin-ink:#1F1109;
  --paper:#FFFFFF;
  --cream:#FBF5EA;
  --page:#EDE4D6;
  --light:#F7EFE1;
  --gold:#C9922E;
  --red:#9E3B22;
  --chip:#EFE2CE;

  --line-hair:rgba(42,23,16,.1);
  --line-card:rgba(42,23,16,.12);
  --line-input:rgba(42,23,16,.2);
  --line-btn:rgba(42,23,16,.25);
  --line-row:rgba(42,23,16,.09);

  --ink-50:rgba(42,23,16,.5);
  --ink-55:rgba(42,23,16,.55);
  --ink-60:rgba(42,23,16,.6);
  --ink-65:rgba(42,23,16,.65);
  --ink-72:rgba(42,23,16,.72);
  --light-40:rgba(247,239,225,.4);
  --light-45:rgba(247,239,225,.45);
  --light-70:rgba(247,239,225,.7);
  --light-72:rgba(247,239,225,.72);

  /* type */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --wrap:1180px;
  --shadow-card:0 18px 50px -24px rgba(42,23,16,.4);
  --shadow-hover:0 10px 24px -14px rgba(42,23,16,.35);
}

*{box-sizing:border-box}
/* `hidden` must beat any component display rule (drawer, overlay, panels). */
[hidden]{display:none!important}

html,body{margin:0}
body{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}
button{font:inherit;cursor:pointer}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}

/* One gutter, owned by .wrap. Everything else is vertical padding only, so
   every block on a page shares exactly the same left edge. */
.wrap{max-width:calc(var(--wrap) + 48px);margin:0 auto;width:100%;padding:0 24px}
.section{padding:28px 0}
.section.cream{background:var(--cream)}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.sec-head h2{font-size:22px}
.sec-head .count{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-50);text-transform:uppercase}
.sec-head .more{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--red)}

/* ---------- announcement + header ---------- */
.announce{background:var(--ink);color:var(--light);padding:8px 0;font-family:var(--mono);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.announce .wrap{display:flex;justify-content:space-between;gap:16px}

.site-header{border-bottom:1px solid var(--line-hair);background:var(--paper);position:sticky;top:0;z-index:30}
.site-header .wrap{display:flex;align-items:center;gap:22px;padding:16px 24px}
.logo{width:44px;height:44px;border-radius:9px;flex:none}
.main-nav{display:flex;gap:16px;flex-wrap:wrap}
.main-nav a{font-size:13.5px;font-weight:500}
.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}

.search{position:relative;width:230px;height:36px}
.search input{width:100%;height:100%;border:1px solid var(--line-input);border-radius:18px;
  padding:0 13px 0 34px;font:inherit;font-size:12.5px;background:var(--paper)}
.search input::placeholder{color:rgba(42,23,16,.45)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px}

.icon-btn{width:36px;height:36px;border-radius:50%;border:0;background:none;display:grid;
  place-items:center;position:relative;color:var(--ink)}
.icon-btn svg{width:19px;height:19px}
.icon-btn.filled{background:var(--ink);color:var(--light)}
.badge{position:absolute;top:-1px;right:-1px;border-radius:999px;font-size:9.5px;font-weight:700;
  padding:1px 5px;line-height:1.4}
.badge.red{background:var(--red);color:var(--light)}
.badge.gold{background:var(--gold);color:var(--ink);border:2px solid var(--paper)}

/* ---------- hero ---------- */
/* Breathing room under the sticky header, so the hero reads as a block
   rather than an extension of the nav bar. */
.hero-wrap{padding:24px 0 0}
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:300px;
  border-radius:16px;overflow:hidden;background:var(--cream)}
.hero-copy{background:var(--cream);padding:44px 34px;display:flex;flex-direction:column;justify-content:center}
/* The photo is shot on white. Multiplying it over the cream panel turns that
   white into the same cream, so the two halves read as one surface instead of
   meeting at a hard seam. */
.hero-img{background:var(--cream)}
.hero-img img{mix-blend-mode:multiply}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--red);text-transform:uppercase;margin-bottom:12px}
.hero h1{font-size:46px;line-height:1.02;margin-bottom:14px}
.hero h1 em{font-style:italic}
.hero p{font-size:14.5px;line-height:1.6;max-width:38ch;color:var(--ink-72);margin:0 0 22px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.pill{display:inline-block;border-radius:24px;padding:12px 22px;font-size:13.5px;font-weight:600;
  border:1px solid transparent;text-align:center}
.pill-primary{background:var(--ink);color:var(--light)}
.pill-secondary{border-color:var(--line-btn);color:var(--ink);background:transparent}
.pill-gold{background:var(--gold);color:var(--ink)}
.pill:hover{color:inherit}
.pill-primary:hover{color:var(--light)}

.add-pill{border:1px solid var(--ink);border-radius:14px;padding:5px 11px;font-size:11.5px;
  font-weight:600;background:transparent;color:var(--ink)}
.add-pill:hover{background:var(--ink);color:var(--light)}

/* ---------- category circles ---------- */
.cat-circles{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}
.cat-circle{text-align:center}
.cat-circle .img{aspect-ratio:1;border-radius:50%;border:1px solid var(--line-hair);overflow:hidden;
  background:var(--chip);margin-bottom:8px}
.cat-circle .img img{width:100%;height:100%;object-fit:cover}
.cat-circle .name{font-size:13px;font-weight:600}
.cat-circle .n{font-family:var(--mono);font-size:9.5px;color:var(--ink-50)}

/* ---------- product cards ---------- */
.prod-grid{display:grid;gap:14px}
.prod-grid.c5{grid-template-columns:repeat(5,1fr)}
.prod-grid.c4{grid-template-columns:repeat(4,1fr)}
.prod-card{background:var(--paper);border:1px solid var(--line-hair);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s ease}
.prod-card:hover{box-shadow:var(--shadow-hover)}
.section.cream .prod-card{background:var(--paper)}
.prod-card .thumb{aspect-ratio:1;background:var(--chip);position:relative;display:block}
.prod-card .thumb img{width:100%;height:100%;object-fit:cover}
.prod-card .tag{position:absolute;top:8px;right:8px;background:var(--paper);border-radius:10px;
  padding:2px 8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.prod-card .body{padding:11px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.prod-card .name{font-size:13.5px;font-weight:600;line-height:1.3}
.prod-card .cat{font-family:var(--mono);font-size:9.5px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.1em}
.prod-card .price-row{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.prod-card .price{font-size:14px;font-weight:700}
.prod-card .unit{font-size:11px;font-weight:500;color:var(--ink-55)}
.prod-card .add-pill{margin-left:auto}

/* ---------- category rails ---------- */
.rail{padding:28px 0;border-top:1px solid var(--line-hair)}
.rail.odd{background:var(--cream)}
.subcat-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.subcat-pill{border:1px solid var(--line-input);border-radius:16px;padding:6px 14px;font-size:12px;
  font-weight:600;background:var(--paper)}
.subcat-pill.active{background:var(--ink);color:var(--light);border-color:var(--ink)}

/* ---------- hampers + promises ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:26px 24px}
.hamper-card{background:var(--ink);color:var(--light);border-radius:14px;padding:24px}
.hamper-card .eyebrow{color:var(--gold)}
.hamper-card h2{font-size:26px;color:var(--light);margin-bottom:10px}
.hamper-card p{font-size:13px;color:var(--light-70);margin:0 0 18px}
.promises{display:flex;flex-direction:column;gap:10px}
.promise{border:1px solid var(--line-card);border-radius:12px;padding:14px 16px}
.promise b{font-size:13.5px}
.promise p{margin:2px 0 0;font-size:12.5px;color:var(--ink-60)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--light-70)}
.footer-top{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:28px;padding:34px 24px 28px}
.footer-top h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;margin:0 0 12px;font-weight:500}
.footer-top a{display:block;padding:3px 0;font-size:13px}
.footer-top a:hover{color:var(--gold)}
.f-brand img{width:56px;height:56px;border-radius:12px;margin-bottom:10px}
.f-brand .nm{font-weight:700;color:var(--light);margin-bottom:6px}
.f-brand p{margin:0 0 10px;font-size:13px;line-height:1.5}
.f-line{font-size:13px}
.f-line span{color:var(--light-45)}
.footer-bottom{border-top:1px solid rgba(247,239,225,.14);padding:15px 0;font-family:var(--mono);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.footer-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- breadcrumb / page heads ---------- */
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--ink-50);
  text-transform:uppercase;padding:14px 0 0}
.page-head{padding:10px 0 20px;display:flex;align-items:flex-end;gap:20px}
.page-head h1{font-size:38px}
.page-head p{margin:8px 0 0;font-size:14px;color:var(--ink-65);max-width:62ch}
.page-head .meta{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-50);text-transform:uppercase;white-space:nowrap}

/* ---------- category page ---------- */
.subcat-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
.subcat-card{border:1px solid var(--line-card);border-radius:12px;overflow:hidden;text-align:center;
  background:var(--paper)}
.subcat-card .img{height:70px;background:var(--chip)}
.subcat-card .img img{width:100%;height:100%;object-fit:cover}
.subcat-card .name{font-size:12.5px;font-weight:600;padding:8px 6px 2px}
.subcat-card .n{font-family:var(--mono);font-size:9px;color:var(--ink-50);padding-bottom:9px}

.cat-body{display:grid;grid-template-columns:212px 1fr}
.filters{background:var(--cream);border-right:1px solid var(--line-hair);padding:22px 20px}
.filters .grp{margin-bottom:20px}
.filters h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-60);
  text-transform:uppercase;margin:0 0 9px;font-weight:500}
.filters label{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.filters input[type=checkbox]{width:14px;height:14px;border:1px solid rgba(42,23,16,.35);border-radius:3px}
.results{padding:22px 24px}
.results-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.results-top .sort{margin-left:auto;font-size:12.5px;font-weight:600}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:18px 0 28px}
.pd-main{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--chip)}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.pd-thumbs button{aspect-ratio:1;border-radius:9px;overflow:hidden;border:1px solid var(--line-card);
  padding:0;background:var(--chip)}
.pd-info{display:flex;flex-direction:column;gap:14px}
.pd-info h1{font-size:36px}
.pd-desc{font-size:13.5px;color:var(--ink-65);margin:0}
.pd-price{display:flex;align-items:baseline;gap:9px}
.pd-price .amt{font-family:var(--serif);font-size:30px;font-weight:700}
.pd-price .unit{font-size:13px;color:var(--ink-60)}
.opt-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-60);text-transform:uppercase}
.weights{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:7px}
.weight{border:1px solid var(--line-input);border-radius:10px;padding:10px;text-align:center;background:var(--paper)}
.weight.on{border:2px solid var(--ink);background:var(--ink);color:var(--light)}
.weight .w{font-size:13.5px;font-weight:700}
.weight .p{font-size:12px;opacity:.7}
.qty{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line-btn);border-radius:22px;padding:6px 14px}
.qty button{border:0;background:none;font-size:15px;line-height:1;padding:0}
.buy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.buy-row .pill{flex:1}
.fulfil{border:1px solid var(--line-card);border-radius:12px;padding:14px 16px}
.fulfil .r{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0}
.fulfil .r b{font-weight:600}
.fulfil .r span{color:var(--ink-60)}
.addons{border:1px solid var(--line-card);border-radius:12px;padding:14px 16px}
.addons .hd{display:flex;align-items:center;margin-bottom:10px}
.addons .hd b{font-size:13.5px}
.addons .hd .k{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink-50)}
.addon{display:flex;align-items:center;gap:11px;padding:7px 0}
.addon .th{width:38px;height:38px;border-radius:9px;background:var(--chip);flex:none}
.addon .nm{font-size:12.5px;font-weight:600}
.addon .ds{font-size:11.5px;color:var(--ink-60)}
.addon .qty{margin-left:auto;border-radius:16px;padding:4px 10px;gap:9px}
.cake-msg{border-top:1px solid var(--line-row);margin-top:10px;padding-top:12px}
.cake-msg textarea{width:100%;min-height:58px;border:1px solid var(--line-input);border-radius:9px;
  padding:10px 12px;font:inherit;font-size:13px;resize:vertical}
.cake-msg .help{font-size:11.5px;color:var(--ink-60);margin-top:5px}
.ing h3{font-size:13.5px;font-family:var(--sans);font-weight:700;margin-bottom:5px}
.ing p{font-size:12.5px;line-height:1.6;color:var(--ink-65);margin:0}

/* ---------- cart / checkout ---------- */
.commerce{display:grid;grid-template-columns:1fr 316px;align-items:start}
.lines{padding:22px 0}
.lines-head{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-50);
  text-transform:uppercase;margin-bottom:12px}
.line{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-row)}
.line .th{width:76px;height:76px;border-radius:10px;background:var(--chip);flex:none;overflow:hidden}
.line .th img{width:100%;height:100%;object-fit:cover}
.line .nm{font-size:14px;font-weight:600}
.line .sz{font-family:var(--mono);font-size:9.5px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.1em}
.line .rm{font-size:12px;font-weight:600;color:var(--red);background:none;border:0;padding:4px 0}
.line .tot{width:74px;text-align:right;font-size:14.5px;font-weight:700}
.coupon{border:1px dashed rgba(42,23,16,.28);border-radius:12px;padding:14px 16px;margin-top:18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.coupon input{flex:1;min-width:150px;border:1px solid var(--line-input);border-radius:9px;padding:9px 12px;font:inherit}
.summary{background:var(--cream);border-left:1px solid var(--line-hair);padding:22px 20px;align-self:stretch}
.summary h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-60);
  text-transform:uppercase;margin:0 0 11px;font-weight:500}
.radio-card{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line-input);
  border-radius:11px;padding:11px 13px;margin-bottom:8px;background:var(--paper)}
.radio-card.on{border:2px solid var(--ink)}
.radio-card .dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--line-btn);flex:none;margin-top:2px}
.radio-card.on .dot{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.radio-card b{font-size:13px;font-weight:600;display:block}
.radio-card small{font-size:11.5px;color:var(--ink-60)}
.radio-card .fee{margin-left:auto;font-size:12.5px;font-weight:600}
.totals{margin-top:16px;font-size:13px}
.totals .r{display:flex;justify-content:space-between;padding:4px 0}
.totals .r span{color:var(--ink-60)}
.to-pay{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-row);
  margin-top:10px;padding-top:12px}
.to-pay b{font-family:var(--serif);font-size:28px;font-weight:400}
.summary .pill{width:100%;margin-top:12px}
.summary .note{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink-50);
  text-transform:uppercase;text-align:center;margin-top:10px}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form-grid .full{grid-column:1/-1}
.fld label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink-60);
  text-transform:uppercase;margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line-input);border-radius:9px;
  padding:11px 13px;font:inherit;font-size:13.5px;background:var(--paper)}
.steps{display:flex;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.steps .s{color:rgba(42,23,16,.4)}
.steps .s.done{color:var(--ink)}

/* ---------- thank you ---------- */
.thanks{background:var(--cream);padding:48px 24px;text-align:center}
.thanks .check{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--gold);
  display:grid;place-items:center;margin:0 auto 18px;font-size:24px}
.thanks h1{font-size:42px;margin-bottom:12px}
.thanks h1 em{font-style:italic}
.thanks p{font-size:14px;color:var(--ink-65);max-width:56ch;margin:0 auto 20px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 0}
.fact .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink-50);text-transform:uppercase}
.fact .v{font-size:13.5px;font-weight:700}
.next-steps{counter-reset:step;display:flex;flex-direction:column;gap:12px}
.next-steps .st{display:flex;gap:11px;align-items:flex-start}
.next-steps .n{width:22px;height:22px;border-radius:50%;background:var(--chip);display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;flex:none}

/* ---------- auth ---------- */
/* Grid children default to min-width:auto, so the square OTP cells were
   forcing their column wider than its share and overflowing the page.
   min-width:0 lets the columns actually honour 1fr. */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:520px;max-width:940px;margin:0 auto;
  border:1px solid var(--line-hair);border-radius:16px;overflow:hidden}
.auth>*{min-width:0}
.auth-left{background:var(--ink);color:var(--light);padding:36px 34px;display:flex;flex-direction:column}
.auth-left img{width:56px;height:56px;border-radius:12px;margin-bottom:20px}
.auth-left h2{font-size:34px;color:var(--light);margin-bottom:12px;text-wrap:balance}
.auth-left p{font-size:13.5px;color:var(--light-70)}
.auth-left .ft{margin-top:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--light-45)}
.auth-right{padding:36px 34px;min-width:0}
.auth-right .pill,.auth-right form{max-width:380px}
.auth-right .or{max-width:380px}
.tabs{display:flex;background:var(--cream);border-radius:22px;padding:4px;margin-bottom:22px}
.tabs button{flex:1;border:0;background:none;border-radius:18px;padding:8px;font-size:13px;font-weight:600}
.tabs button.on{background:var(--ink);color:var(--light)}
.phone-row{display:flex;gap:8px}
.phone-row .cc{border:1px solid var(--line-input);border-radius:9px;padding:11px 13px;font-size:13.5px;background:var(--cream)}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:330px}
.otp-cells input{aspect-ratio:1;border:1px solid var(--line-input);border-radius:10px;text-align:center;
  font-size:19px;font-weight:700;padding:0}
.otp-help{display:flex;justify-content:space-between;font-size:12px;margin-top:8px}
.otp-help .resend{color:var(--red);font-weight:700}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--ink-50)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-hair)}
.legal{font-size:11.5px;color:var(--ink-60);margin-top:14px}

/* ---------- cart drawer ---------- */
.drawer{position:fixed;top:0;right:0;width:min(380px,92vw);height:100%;background:var(--paper);z-index:60;
  display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.15)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line-hair)}
.drawer-head b{font-family:var(--serif);font-size:19px;font-weight:400}
.drawer-head button{border:0;background:none;font-size:22px;line-height:1}
.drawer-items{flex:1;overflow:auto;padding:8px 18px}
.drawer-foot{padding:16px 18px;border-top:1px solid var(--line-hair)}
.scrim{position:fixed;inset:0;background:rgba(31,17,9,.45);z-index:55}
.empty{color:var(--ink-60);padding:26px 0;font-size:13.5px}

/* ---------- responsive (handoff: collapse below ~900px) ---------- */
@media (max-width:1100px){
  .cat-circles{grid-template-columns:repeat(4,1fr)}
  .prod-grid.c5{grid-template-columns:repeat(3,1fr)}
  .subcat-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .pd,.commerce,.two-col,.auth{grid-template-columns:1fr}
  .cat-body{grid-template-columns:1fr}
  .filters{border-right:0;border-bottom:1px solid var(--line-hair)}
  .summary{border-left:0;border-top:1px solid var(--line-hair)}
  .footer-top{grid-template-columns:1fr 1fr}
  .main-nav,.search{display:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .page-head{flex-direction:column;align-items:flex-start}
  .page-head .meta{margin-left:0}
}
@media (max-width:620px){
  .prod-grid.c5,.prod-grid.c4{grid-template-columns:repeat(2,1fr)}
  .cat-circles{grid-template-columns:repeat(3,1fr)}
  .subcat-cards{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .thanks h1{font-size:30px}
  .page-head h1{font-size:28px}
}

/* Placeholder imagery: diagonal cream stripes, per the handoff. */
.ph{width:100%;height:100%;min-height:inherit;aspect-ratio:1;
  background:repeating-linear-gradient(45deg,#EFE2CE 0 10px,#F7EFE1 10px 20px)}
.pd-main .ph,.subcat-card .ph,.line .ph,.addon .ph{aspect-ratio:auto;height:100%}
.pagination{display:flex;gap:6px;margin-top:22px}
.pagination a,.pagination .current{border:1px solid var(--line-input);border-radius:9px;padding:6px 12px;font-size:12.5px}
.pagination .current{background:var(--ink);border-color:var(--ink);color:var(--light)}

/* Hero photography fills its column; the copy panel sets the height. */
.hero-img{position:relative;overflow:hidden;background:var(--cream);min-height:300px}
.hero-img picture,.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.hero-img{min-height:220px}}

/* Nothing should ever scroll the page sideways. */
html,body{overflow-x:hidden;max-width:100%}