/* 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:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --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}
/* One typeface across the whole site. The font tokens below point at
   Inter too, because a bare * selector loses to every class-level rule. */
*{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
/* `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:700;line-height:1.12;letter-spacing:-.02em;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:19px}
.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}
/* The bakery's name opens the h1, so the page's main heading names the shop
   before the proposition. Block-level inside the heading, at its own size. */
.hero-brand{display:block;font-size:20px;line-height:1.15;color:var(--ink);
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:12px}
.hero-brand::after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-top:10px}
.hero h1{font-size:38px;line-height:1.12;margin-bottom:14px}
.hero h1 em{font-style:normal;font-weight:500;color:var(--ink-72)}
.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)}
/* Light call to action, for use on the cream hero */
.pill-light{background:var(--paper);color:var(--ink);border-color:var(--line-card);
  box-shadow:0 6px 16px -12px rgba(42,23,16,.55)}
.pill-light:hover{color:var(--ink);border-color:var(--line-btn)}
.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:22px;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 ---------- */
/* Content must never butt straight into the footer. */
main{display:block;padding-bottom:56px}
.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 4px;display:flex;align-items:flex-end;gap:20px}
.page-head h1{font-size:30px}
.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-head{font-size:13.5px;font-weight:700;margin-bottom:12px}
.subcat-card{border:1px solid var(--line-card);border-radius:12px;overflow:hidden;text-align:center;
  background:var(--paper)}
.subcat-card .img{aspect-ratio:4/3;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}

/* Sidebar and results are separated by a real grid gap, so both columns start
   their content on the same line instead of depending on inner padding. */
.cat-body{display:grid;grid-template-columns:212px 1fr;gap:28px;
  border-top:1px solid var(--line-hair);padding-top:4px}
/* Without this the results column's content sets a min-content floor and
   pushes the whole grid past the viewport. */
.cat-body>*{min-width:0}
.filters summary{display:none}
.filters{background:var(--cream);border:1px solid var(--line-hair);border-radius:12px;
  padding:20px;margin:24px 0 8px;align-self:start}
.filters .grp{margin-bottom:22px}
.filters .grp:last-child{margin-bottom:0}
.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:24px 0 0;min-width:0}
.results .empty{padding:0;margin:0;border:1px dashed var(--line-input);border-radius:12px;
  text-align:center;padding:52px 24px;color:var(--ink-60);background:var(--paper)}
.results-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line-hair)}
.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:28px}
.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:26px;font-weight:700;letter-spacing:-.02em}
.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;gap:20px;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);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:24px;font-weight:700;letter-spacing:-.02em}
.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:32px;margin-bottom:12px}
.thanks h1 em{font-style:normal;font-weight:500}
.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:26px;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:16px;font-weight:700}
.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}
  .cat-body{gap:0;border-top:0;padding-top:0}
  .filters{padding:0;margin-top:18px}
  .filters summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:14px 24px;font-size:13.5px;font-weight:700}
  .filters summary::-webkit-details-marker{display:none}
  .filters summary::after{content:"+";margin-left:auto;font-size:17px;line-height:1;color:var(--ink-60)}
  .filters[open] summary::after{content:"\2212"}
  .filters[open] summary{border-bottom:1px solid var(--line-hair)}
  .filters form{padding:16px 24px 20px}
  .filters .grp{margin-bottom:16px}
  .results{padding:20px 0 0}
  .summary{border:0}
  .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%}

/* Coupon feedback. */
.coupon-msg{flex-basis:100%;font-size:12.5px;padding-top:2px}
.coupon-msg.ok{color:#12603a}
.coupon-msg.bad{color:var(--red)}
.coupon input[readonly]{background:var(--cream);color:var(--ink-60)}
.totals .r.discount b{color:#12603a}
.addon-sum{font-size:12.5px;color:var(--red);font-weight:600;margin-top:-6px}

/* Policy pages */
.policy{font-size:14.5px;line-height:1.65;color:var(--ink-80,var(--ink))}
.policy h2{font-size:18px;margin:28px 0 8px}
.policy p{margin:0 0 12px}
.policy ul{margin:0 0 12px;padding-left:20px}
.policy li{margin:0 0 6px}
.policy a{color:var(--red,#9E3B22);text-decoration:underline;text-underline-offset:2px}
.policy-date{font-size:12.5px;color:var(--ink-60)}

/* Sign in with Google */
.or-sep{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--ink-60);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line-hair)}
.g-signin{width:100%;min-height:44px;display:flex;justify-content:center}
.g-error{margin:10px 0 0;font-size:12.5px;color:var(--red)}

/* No blue flash on tap in mobile browsers */
html{-webkit-tap-highlight-color:transparent}

/* App review sign-in code */
.review-code{font-size:44px;font-weight:700;letter-spacing:10px;margin:22px 0 6px;color:var(--ink)}
.review-empty{color:var(--ink-45,rgba(42,23,16,.45));letter-spacing:6px;font-size:30px}
.review-note{font-size:12.5px;color:var(--ink-60)}

/* A way of getting the order that some items cannot travel by */
.radio-card.off{opacity:.45}
.radio-card.off .fee{text-decoration:line-through}
.way-warning{font-size:12.5px;line-height:1.5;color:var(--red);background:#F8E9E4;border-radius:10px;padding:10px 12px;margin:12px 0 0}
.pill.disabled{pointer-events:none;opacity:.45}

/* Get the app (header) */
.app-btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--cream);
  border-radius:999px;padding:8px 16px 8px 13px;line-height:1.1;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease}
.app-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(42,23,16,.7);color:var(--cream)}
.app-btn svg{color:var(--gold);flex:none}
.app-btn-text{display:flex;flex-direction:column}
.app-btn-text small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.app-btn-text b{font-size:12.5px;font-weight:600}
.hero-actions{flex-wrap:wrap}
.hero-actions .app-btn{height:44px;padding:0 20px 0 16px}
@media (max-width:620px){.hero-actions .app-btn{height:42px}}

/* Shop filters and endless scrolling */
.filters summary .n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  border-radius:9px;background:var(--red);color:#fff;font-size:11px;margin-left:6px;padding:0 5px}
.filters .grp label .n{color:var(--ink-50);font-size:11.5px;margin-left:2px}
.clear-filters{display:block;text-align:center;font-size:12.5px;color:var(--ink-60);margin-top:10px}
.sort-select{border:1px solid var(--line-input);border-radius:9px;padding:7px 10px;font:inherit;font-size:12.5px;background:var(--paper)}
.results-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}
.sort-label{font-size:13px;color:var(--ink-60)}
.scroll-more{display:flex;align-items:center;justify-content:center;gap:8px;padding:26px 0;color:var(--ink-60);font-size:13px}
.scroll-more .dots{display:inline-flex;gap:4px}
.scroll-more .dots i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pbdot 1s infinite ease-in-out}
.scroll-more .dots i:nth-child(2){animation-delay:.15s}
.scroll-more .dots i:nth-child(3){animation-delay:.3s}
@keyframes pbdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.scroll-end{text-align:center;color:var(--ink-45,rgba(42,23,16,.45));font-size:12.5px;padding:22px 0}

/* Filters: full-width rows where the column is narrow, chips where it is not */
.chip-set.rows{flex-direction:column;gap:6px}
.chip-set.rows .chip-check{width:100%;justify-content:space-between;border-radius:12px;padding:9px 12px}
.chip-set.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chip-set.two .chip-check{justify-content:center;padding:9px 8px;font-size:12.5px;text-align:center}
.filters-apply{width:100%;white-space:nowrap;padding:12px 10px;font-size:13px;margin-top:18px}
@media (min-width:1280px){
  .chip-set.two{grid-template-columns:1fr 1fr}
}

/* Filter chips: tap to switch on, no boxes to hunt for */
.chip-set{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;
  border:1.5px solid var(--line-input);background:var(--paper);font-size:13px;font-weight:500;
  color:var(--ink);cursor:pointer;user-select:none;transition:background .14s ease,border-color .14s ease,color .14s ease}
.chip-check input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.chip-check:hover{border-color:var(--line-btn)}
.chip-check .n{font-size:11px;font-weight:600;color:var(--ink-50);background:var(--light);
  border-radius:999px;padding:1px 6px}
.chip-check.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip-check.on .n{background:rgba(251,245,234,.18);color:var(--cream)}
.chip-check:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip-check:has(input:checked) .n{background:rgba(251,245,234,.18);color:var(--cream)}

.filters .grp h5{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin:0 0 10px}
.filters .grp+.grp{margin-top:18px}
.filters-apply{margin-top:20px}

/* What is filtered right now, each one removable */
.active-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px}
.active-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:var(--chip);color:var(--ink);font-size:12.5px;font-weight:500}
.active-chip i{font-style:normal;font-size:14px;line-height:1;color:var(--ink-50)}
.active-chip:hover{background:var(--light);color:var(--ink)}
.active-chip.clear{background:transparent;color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* Switch filters */
.switch-set{display:flex;flex-direction:column;gap:2px}
.switch-row{display:flex;align-items:center;gap:8px;padding:9px 4px;cursor:pointer;user-select:none;
  border-radius:10px;transition:background .14s ease}
.switch-row:hover{background:var(--light)}
.switch-row input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.switch-row .lbl{font-size:13.5px;font-weight:500;color:var(--ink)}
.switch-row .n{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-50);
  background:var(--light);border-radius:999px;padding:2px 7px}
.switch-row .switch{flex:none;margin-left:auto;width:38px;height:22px;border-radius:999px;
  background:rgba(42,23,16,.16);position:relative;transition:background .18s ease}
.switch-row .n+.switch{margin-left:0}
.switch-row .switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);box-shadow:0 1px 3px rgba(42,23,16,.35);transition:transform .18s ease}
.switch-row.on .switch,.switch-row:has(input:checked) .switch{background:var(--gold)}
.switch-row.on .switch::after,.switch-row:has(input:checked) .switch::after{transform:translateX(16px)}
.switch-row.on .lbl,.switch-row:has(input:checked) .lbl{font-weight:600}
.switch-row input:focus-visible+.lbl{text-decoration:underline}

/* Shop filter sidebar (design: filter-sidebar.html, in the site's own type) */
.pf{width:100%;max-width:280px;background:var(--cream);border:1px solid var(--line-card);border-radius:16px;
  overflow:hidden;align-self:start;position:sticky;top:96px}
.pf-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 13px;border-bottom:1px solid var(--line-hair)}
.pf-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:7px}
.pf-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700}
.pf-clear{font-size:12.5px;font-weight:600;color:var(--red)}
.pf-sec{padding:14px 18px;border-top:1px solid var(--line-hair)}
.pf-sec:first-of-type{border-top:0;padding:14px 10px 8px}
.pf-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);margin-bottom:9px}
.pf-sec:first-of-type .pf-label{padding:0 8px}

.pf-cats{display:flex;flex-direction:column}
.pf-cat{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:0;background:none;
  border-radius:10px;padding:9px 10px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
  text-align:left;cursor:pointer}
.pf-cat:hover{background:rgba(42,23,16,.05)}
.pf-cat .n{font-size:10.5px;color:var(--ink-50)}
.pf-cat input{position:absolute;opacity:0;width:0;height:0}
.pf-cat[aria-expanded="true"],.pf-cat.on,.pf-cat:has(input:checked){background:var(--ink);color:var(--light);font-weight:700}
.pf-cat[aria-expanded="true"] .n,.pf-cat.on .n,.pf-cat:has(input:checked) .n{color:var(--gold)}
.pf-subs{display:none;flex-direction:column;gap:1px;margin:6px 0 8px 14px;padding-left:12px;border-left:1px solid rgba(42,23,16,.18)}
.pf-cat[aria-expanded="true"]+.pf-subs{display:flex}

.pf-check{display:flex;align-items:center;gap:9px;padding:6px 4px;font-size:13px;cursor:pointer}
.pf-check input{appearance:none;width:16px;height:16px;margin:0;flex:0 0 16px;border:1px solid rgba(42,23,16,.3);
  border-radius:4px;background:var(--paper);display:grid;place-content:center;cursor:pointer}
.pf-check input:checked{background:var(--ink);border-color:var(--ink)}
.pf-check input:checked::before{content:"✓";color:var(--light);font-size:10px;line-height:1}
.pf-check span{flex:1}
.pf-check em{font-style:normal;font-size:10px;color:var(--ink-50)}

.pf-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px;background:var(--paper);
  border:1px solid rgba(42,23,16,.14);border-radius:10px}
.pf-seg input{position:absolute;opacity:0;pointer-events:none}
.pf-seg label{text-align:center;padding:8px 0;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer}
.pf-seg input:checked+label{background:var(--ink);color:var(--light);font-weight:700}

.pf-radio{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;cursor:pointer}
.pf-radio input{appearance:none;width:16px;height:16px;margin:0;flex:0 0 16px;border:1px solid rgba(42,23,16,.3);
  border-radius:50%;background:var(--paper);display:grid;place-content:center;cursor:pointer}
.pf-radio input:checked{border:1.5px solid var(--ink)}
.pf-radio input:checked::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.pf-radio:has(input:checked){font-weight:600}

.pf-toggles{display:flex;flex-direction:column;gap:12px}
.pf-toggle{display:flex;align-items:center;gap:12px;font-size:13px;cursor:pointer}
.pf-toggle span{flex:1}
.pf-toggle input{appearance:none;margin:0;width:34px;height:20px;flex:0 0 34px;border-radius:10px;
  background:rgba(42,23,16,.16);position:relative;transition:background .2s;cursor:pointer}
.pf-toggle input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
.pf-toggle input:checked{background:var(--ink)}
.pf-toggle input:checked::before{left:16px}

.pf-foot{padding:14px 16px 16px;border-top:1px solid var(--line-hair);background:var(--paper)}
.pf-cta{width:100%;background:var(--ink);color:var(--light);border:0;border-radius:22px;padding:13px;
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pf input:focus-visible,.pf button:focus-visible,.pf-seg input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:900px){.pf{max-width:none;position:static}.pf-foot{position:sticky;bottom:0}}