/* ===========================================================
   Golden Chain Foods — shared styles for every page.
   Page-specific styles for the ordering flow live in order.css.
   =========================================================== */
:root{
  /* ink */
  --ink:#26342B;
  --ink-2:#4E5B4F;
  --ink-3:#657061;
  /* surfaces */
  --paper:#FAF6F0;
  --card:#FFFFFF;
  --warm:#F5EEE3;
  --line:#E8DECF;
  --line-2:#D6CCB6;
  /* brand */
  --espresso:#26342B;
  --espresso-2:#33453A;
  --gold:#C9962F;
  --gold-ink:#8C6A2F;
  --gold-ink-deep:#7A5C28;   /* for text sitting on --gold-soft */
  --gold-soft:#F7E9C9;
  /* status */
  --err:#A8321E;
  --err-bg:#FDF2EF;
  /* shape */
  --r:14px;
  --r-sm:10px;
  --sh-1:0 1px 2px rgba(38,52,43,.06), 0 1px 3px rgba(38,52,43,.05);
  --sh-2:0 4px 14px rgba(38,52,43,.09);
  --sh-3:0 -6px 24px rgba(38,52,43,.14);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1040px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;line-height:1.22}
img{max-width:100%}
a{color:var(--gold-ink)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------- site header ---------------- */
.site-head{background:linear-gradient(170deg,var(--espresso-2),var(--espresso));color:#fff}
/* marketing pages carry .sticky; the order page does not (it has its own
   sticky category tabs and total bar, which would stack up on a phone) */
.site-head.sticky{position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(38,52,43,.22)}
.site-head .head-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;max-width:var(--maxw);margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:1;min-width:0}
.seal{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--gold-soft);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(201,150,47,.55);
}
.seal img{display:block;width:28px;height:28px}
.logo .nm{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.15;white-space:nowrap}
.logo .tag{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:700;line-height:1.5}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  color:#D6CBBC;text-decoration:none;font-size:.93rem;font-weight:600;
  padding:10px 14px;border-radius:999px;min-height:42px;display:inline-flex;align-items:center;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
/* current page: a filled pill, so there is no stray underline to clip */
.nav a[aria-current=page]{
  color:#fff;background:rgba(255,255,255,.13);border-color:rgba(249,230,190,.34);
}
.nav a.cta{
  background:var(--gold);color:var(--espresso);border-color:var(--gold);
  margin-left:8px;box-shadow:0 2px 0 #A3762A;padding:10px 18px;
}
.nav a.cta:hover{background:#D6A33C;color:var(--espresso)}
.nav a.cta[aria-current=page]{background:var(--gold);color:var(--espresso);border-color:var(--gold)}
@media(max-width:620px){
  .site-head .head-bar{flex-wrap:wrap;gap:0;padding:10px 16px 0}
  .site-head.sticky .seal{width:36px;height:36px;flex:0 0 36px}
  .site-head.sticky .seal img{width:24px;height:24px}
  .site-head.sticky .logo .nm{font-size:1.04rem}
  .site-head.sticky .nav{margin-top:8px;padding:5px 0 7px}
  .site-head.sticky .nav a{min-height:38px;padding:8px 12px}
  .logo{flex:1 0 100%}
  .nav{
    width:100%;margin-top:11px;padding:7px 0 9px;gap:3px;
    border-top:1px solid rgba(249,230,190,.17);
  }
  .nav a{padding:9px 13px;font-size:.89rem;min-height:40px}
  .nav a.cta{margin-left:auto;padding:9px 16px}
}

/* ---------------- hero & bands ---------------- */
.hero{background:linear-gradient(170deg,var(--espresso),#1C2721);color:#fff;padding:46px 0 52px;overflow:hidden}
.hero .grid{display:grid;gap:30px;align-items:center}
@media(min-width:800px){.hero .grid{grid-template-columns:1.05fr .95fr;gap:42px}}
.eyebrow{
  display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;font-weight:700;
  color:var(--gold);border:1px solid rgba(201,150,47,.45);border-radius:999px;padding:6px 13px;margin-bottom:18px;
}
.hero h1{font-size:2.1rem;margin:0 0 14px;color:#fff}
@media(min-width:800px){.hero h1{font-size:2.6rem}}
.hero p.lede{font-size:1.06rem;color:#E4D8C9;margin:0 0 26px;max-width:46ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:11px}
.hero .facts{display:flex;flex-wrap:wrap;gap:22px;margin:30px 0 0;padding-top:22px;border-top:1px solid rgba(249,230,190,.2)}
.hero .facts div{min-width:96px}
.hero .facts b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--gold)}
.hero .facts span{font-size:.8rem;color:#CBBCAA}

.collage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.collage .tile{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--warm);
  aspect-ratio:1/1;box-shadow:var(--sh-2);
}
.collage .tile.wide{grid-column:1/-1;aspect-ratio:16/9}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage .ph{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:radial-gradient(120% 120% at 30% 20%,#FBF1DA,#EFE0BE);color:var(--gold-ink);
}
.collage .tile.no-image img{display:none}
.collage .tile.no-image .ph{display:flex}
.collage .ph .mk{font-family:var(--serif);font-size:1.5rem;font-weight:700}
.collage .ph .lb{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85;text-align:center;padding:0 8px}

.band{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0}
.band.dark{background:var(--espresso);border-color:var(--espresso);color:#fff}
.band.dark h2{color:#fff}
.band.dark p{color:#E4D8C9}

/* ---------------- sections ---------------- */
section{margin:44px 0}
/* <main> must form a block formatting context, otherwise the first section's
   top margin collapses out of it and the content sits flush against the band
   above (the hero on the home page, the header elsewhere). */
main{display:flow-root}
main > section:first-child{margin-top:0;padding-top:84px}
@media(max-width:559px){
  main > section:first-child{padding-top:64px}
  section{margin:34px 0}
}
.section-head{max-width:60ch;margin-bottom:24px}
.section-head h2{font-size:1.6rem;margin:0 0 8px}
.section-head p{color:var(--ink-2);margin:0}

.note{margin:0 0 18px;color:var(--ink-2);font-size:.94rem;max-width:62ch}
.note strong{color:var(--ink)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------------- cards ---------------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.cards.two,.cards.three,.cards.four{grid-template-columns:1fr 1fr}}
@media(min-width:860px){
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .cards.four{grid-template-columns:repeat(4,1fr)}
}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:20px}
.panel.flush{padding:0;overflow:hidden}

.tile-link{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.tile-link:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--gold)}
.shot{position:relative;aspect-ratio:4/3;background:var(--warm);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.tile-link:hover .shot img{transform:scale(1.05)}
.shot .ph{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(120% 120% at 30% 20%,#FBF1DA,#EFE0BE);
}
.shot.no-image img{display:none}
.shot.no-image .ph{display:flex}
.ph .mark{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--gold-ink);
}
.ph .lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-ink);opacity:.85}
.tile-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile-body h3{margin:0;font-size:1.13rem}
.tile-body p{margin:0;font-size:.9rem;color:var(--ink-2)}
.cards.four .tile-body p{min-height:3.4em}
.tile-body .meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.tile-body .price-pill{align-self:flex-start;margin-top:auto}
.tile-body .more{padding-top:12px;font-weight:700;font-size:.9rem;color:var(--gold-ink)}

/* phones: category tiles read as compact rows, not four full-height cards */
@media(max-width:559px){
  .cards.four{gap:11px}
  .cards.four .tile-link{flex-direction:row;align-items:stretch}
  .cards.four .shot{
    flex:0 0 136px;aspect-ratio:1/1;align-self:center;
    margin:12px 0 12px 12px;border-radius:10px;background:#fff;
  }
  .cards.four .shot img{object-fit:contain}   /* show the whole product, don't crop it */
  .cards.four .tile-link:hover .shot img{transform:none}
  .cards.four .tile-body{padding:12px 14px;gap:4px;justify-content:center}
  .cards.four .tile-body h3{font-size:1.06rem}
  .cards.four .tile-body p{
    font-size:.84rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cards.four .tile-body{padding:12px 13px 12px 12px}
  .cards.four .tile-body .meta{font-size:.68rem}
  .cards.four .tile-body p{min-height:0}
  .cards.four .tile-body .price-pill{align-self:flex-start;margin-top:2px}
  .cards.four .tile-body .more{margin-top:0;padding-top:6px;font-size:.85rem}
}

.price-pill{
  display:inline-block;font-size:.82rem;font-weight:700;color:var(--gold-ink-deep);background:var(--gold-soft);
  border-radius:999px;padding:5px 11px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.howto{counter-reset:s;display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:720px){.howto{grid-template-columns:repeat(3,1fr)}}
.howto li{list-style:none;counter-increment:s;position:relative;padding-left:48px}
.howto li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--gold-soft);color:var(--gold-ink-deep);display:grid;place-items:center;font-weight:700;
}
.howto h3{margin:0 0 5px;font-size:1.06rem}
.howto p{margin:0;color:var(--ink-2);font-size:.92rem}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 22px;font-family:var(--sans);font-size:1.02rem;font-weight:700;cursor:pointer;text-decoration:none;
  color:var(--espresso);background:var(--gold);border:none;border-radius:12px;min-height:54px;
  box-shadow:0 2px 0 #A3762A;transition:transform .12s,box-shadow .12s,background .14s;
}
.btn:hover{background:#D6A33C;color:var(--espresso)}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}
.btn.block{width:100%}
.btn.dark{color:#fff;background:var(--espresso);box-shadow:0 2px 0 #1A2420}
.btn.dark:hover{background:var(--espresso-2);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);box-shadow:none;font-size:.97rem;min-height:50px}
.btn.ghost:hover{border-color:var(--gold);background:var(--warm);color:var(--ink)}
.btn.on-dark{background:transparent;color:#fff;border:1.5px solid rgba(249,230,190,.45);box-shadow:none}
.btn.on-dark:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------------- contact card ---------------- */
.contact-row{display:flex;flex-wrap:wrap;gap:10px}
.contact-row a{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;
  text-decoration:none;font-size:.94rem;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:999px;transition:all .15s;
}
.contact-row a:hover{border-color:var(--gold);background:var(--gold-soft)}
.contact-row svg{width:16px;height:16px;fill:var(--gold-ink);flex:0 0 16px}
.band.dark .contact-row a{background:rgba(255,255,255,.08);border-color:rgba(249,230,190,.3);color:#fff}
.band.dark .contact-row a:hover{background:rgba(255,255,255,.16)}
.band.dark .contact-row svg{fill:var(--gold)}

/* placeholder copy marker — search the repo for class="todo" */
.fine a,.note a{color:var(--gold-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.todo{
  display:block;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  background:repeating-linear-gradient(45deg,#FDF9F1,#FDF9F1 10px,#F7F1E6 10px,#F7F1E6 20px);
  color:var(--ink-2);font-size:.88rem;padding:11px 14px;margin:14px 0;
}
.todo b{color:var(--gold-ink);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em}

/* "on shelves at" strip */
.stockists{
  /* no divider: the rule read as if it belonged to the heading below it.
     Whitespace separates the strip instead. */
  text-align:center;padding-bottom:40px;
}
.stockists .label{
  margin:0 0 16px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--ink-3);
}
.stockists ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:12px 30px;
}
.stockists li{font-family:var(--serif);font-size:1.15rem;color:var(--ink-2);white-space:nowrap}
@media(max-width:559px){
  .stockists{padding-bottom:28px}
  .stockists ul{gap:9px 20px}
  .stockists li{font-size:1.02rem}
}

/* ---------------- footer ---------------- */
.site-foot{background:var(--espresso);color:#CBBCAA;margin-top:54px;padding:36px 0 30px;font-size:.9rem}
.site-foot .cols{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:680px){.site-foot .cols{grid-template-columns:1.3fr 1fr 1fr}}
.site-foot h3{color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 11px;font-family:var(--sans);font-weight:700}
.site-foot a{color:#EADFD1;text-decoration:none}
.site-foot a:hover{color:var(--gold);text-decoration:underline}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot .foot-logo{display:block;width:190px;height:auto;margin:-14px 0 6px -10px}
.site-foot .legal{
  margin:28px 0 0;padding-top:18px;border-top:1px solid rgba(249,230,190,.16);
  font-size:.82rem;color:#A8988A;
}