/* Self-hosted fonts. No third-party request, no FOUT from a cold CDN. */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('assets/fonts/fraunces-normal-300_900-latin.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:italic; font-weight:300 900; font-display:swap;
  src:url('assets/fonts/fraunces-italic-300_900-latin.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('assets/fonts/archivo-normal-400_700-latin.woff2') format('woff2'); }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/dm-mono-normal-400-latin.woff2') format('woff2'); }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/dm-mono-normal-500-latin.woff2') format('woff2'); }

/* ============================================================
   SIAM SUPPLY CO.  Trade name for JIRATHAM PTE. LTD. (UEN 202433113G)

   Bright palette, taken off the packaging itself: Thai green,
   marigold, crimson, teal. Each category owns a colour, so the
   price list is scannable as well as loud.

   The page is a price list you can order from, not a brochure.
   One listing per product line; variants collapse inside it, so
   11 rows stand in for 35 SKUs and nothing is hidden.

   Product cut-outs have holes where the product itself is white,
   so anything showing one sits on a white or cream tile. Never
   place .thumb or .plate contents on a saturated colour.

   TO RENAME: edit the .wordmark blocks and the <title>.
   Product data is generated: photos/bin/export_site.py
   ============================================================ */

:root{
  /* base is the v4 bone paper, kept because it reads warm and expensive */
  --cream:  #F4EFE4;   /* page */
  --white:  #FDFBF6;   /* tiles, product grounds */
  --sand:   #E9E1D0;   /* quiet band */
  --ink:    #17140F;
  --ink-2:  #4C4335;
  --faint:  #857B69;
  --line:   rgba(23,20,15,.16);
  --line-2: rgba(23,20,15,.32);

  --red:      #E01B39;
  --red-d:    #B4122B;
  --green:    #00A14B;
  --green-d:  #007F3B;
  --teal:     #00A6A0;
  --marigold: #F7B500;
  --grape:    #6E4FA8;

  --ease: cubic-bezier(.16,.84,.44,1);
  --pad:  clamp(1.15rem, 4vw, 4rem);
  --max:  1340px;
  --tray: 76px;
}

/* category colour, set per listing from data-cats */
[data-cats~="inhalers"]{ --cc:var(--teal); }
[data-cats~="balms"]{    --cc:var(--red); }
[data-cats~="powders"]{  --cc:var(--green); }
[data-cats~="remedies"]{ --cc:var(--marigold); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
h1,h2,h3,h4{ font-family:"Fraunces",Georgia,serif; font-weight:600; margin:0;
  letter-spacing:-.028em; line-height:1.05; font-variation-settings:"SOFT" 20,"WONK" 1; }
p{ margin:0; }
a{ color:inherit; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:""; width:26px; height:3px; background:currentColor; flex:none; }
.eyebrow + h1, .eyebrow + h2{ margin-top:1.1rem; }
@media (max-width:520px){ .eyebrow{ letter-spacing:.14em; font-size:.6rem; } .eyebrow::before{ width:16px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.83rem; font-weight:700; text-decoration:none; cursor:pointer;
  padding:.82rem 1.35rem; border-radius:100px; border:2px solid transparent;
  white-space:nowrap;
  transition:transform .3s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .3s;
}
.btn-solid{ background:var(--red); color:#fff; box-shadow:0 6px 0 var(--red-d); }
.btn-solid:hover{ transform:translateY(-3px); box-shadow:0 9px 0 var(--red-d); }
.btn-solid:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--red-d); }
.btn-line{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--cream); transform:translateY(-3px); }
.btn-paper{ background:var(--ink); color:var(--cream); }
.btn-paper:hover{ transform:translateY(-3px); }
.btn:focus-visible{ outline:3px solid var(--grape); outline-offset:3px; }

/* ---------- top bar + header ---------- */
.topbar{ background:var(--ink); color:var(--cream); }
.topbar .wrap{
  display:flex; gap:1.25rem; align-items:center; justify-content:space-between;
  height:36px; overflow:hidden;
  font-family:"DM Mono",monospace; font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,239,228,.7);
}
.topbar span{ white-space:nowrap; }
.tb-a,.tb-b{ display:none; }
@media (min-width:620px){ .tb-b{ display:inline; } }
@media (min-width:1000px){ .tb-a{ display:inline; } }

header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:3px solid var(--ink);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:70px; }
.wordmark{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; }
.wordmark .mk{ font-family:"Fraunces",serif; font-weight:700; font-size:1.28rem;
  letter-spacing:-.038em; font-variation-settings:"SOFT" 30,"WONK" 1; }
.wordmark .mk em{ font-style:normal; color:var(--red); }
.wordmark .sub{ font-family:"DM Mono",monospace; font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); padding-left:.55rem; border-left:2px solid var(--line-2); }
@media (max-width:700px){ .wordmark .sub{ display:none; } }

nav{ display:none; gap:1.9rem; }
@media (min-width:1000px){ nav{ display:flex; } }
nav a{ font-size:.82rem; font-weight:600; text-decoration:none; color:var(--ink-2);
  position:relative; padding-block:.3rem; transition:color .25s; }
nav a::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--green); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
nav a:hover{ color:var(--ink); }
nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:520px){ header .btn{ padding:.62rem .9rem; font-size:.74rem; } }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--cream); }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 78% 8%,  rgba(247,181,0,.42), transparent 68%),
    radial-gradient(34% 42% at 96% 52%, rgba(0,166,160,.30), transparent 70%),
    radial-gradient(36% 44% at 4% 88%,  rgba(0,161,75,.26),  transparent 72%),
    radial-gradient(30% 36% at 30% 6%,  rgba(224,27,57,.16), transparent 70%);
}
.hero .wrap{ position:relative; z-index:1; padding-block:clamp(3rem,6vw,5.5rem) 0; }
.hero-grid{ display:grid; gap:clamp(2.5rem,4vw,4rem); align-items:center; }
@media (min-width:1000px){ .hero-grid{ grid-template-columns:1.05fr .95fr; } }
.hero h1{ font-size:clamp(2.7rem,6.4vw,5rem); max-width:13ch; }
.hero h1 .ac{ color:var(--red); font-style:italic; font-weight:500; font-variation-settings:"SOFT" 60,"WONK" 1; }
.hero-lede{ margin-top:1.4rem; color:var(--ink-2); font-size:clamp(1rem,1.4vw,1.12rem); max-width:44ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }

/* cut-outs have white holes, so they always get a white ground */
.plate{
  position:relative; background:var(--white);
  border:3px solid var(--ink); border-radius:4px;
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,2vw,2rem) 0;
  box-shadow:12px 12px 0 var(--marigold);
}
.plate-row{ display:flex; align-items:flex-end; justify-content:center; height:clamp(200px,22vw,300px); }
.plate-row img{
  height:calc(var(--h) * 1%); width:auto; margin-inline:calc(var(--ov,-2) * 1%);
  position:relative; z-index:var(--z,1);
  filter:drop-shadow(0 10px 9px rgba(23,20,15,.22));
  transition:transform .6s var(--ease);
}
.plate:hover .plate-row img{ transform:translateY(-8px); }
.plate-row img:nth-child(2){ transition-delay:60ms; }
.plate-row img:nth-child(3){ transition-delay:120ms; }
.plate-row img:nth-child(4){ transition-delay:180ms; }
.plate-row img:nth-child(5){ transition-delay:240ms; }
.plate-foot{
  margin-top:clamp(1rem,2vw,1.6rem); border-top:2px solid var(--line);
  padding:.85rem 0 1.1rem; display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; justify-content:center;
  font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint);
}
.plate-foot b{ font-weight:500; color:var(--ink); }

/* ---------- stat ledger ---------- */
.ledger{ margin-top:clamp(2.5rem,5vw,4rem); }
.ledger-in{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
@media (min-width:860px){ .ledger-in{ grid-template-columns:repeat(4,1fr); } }
.ledger dl{ margin:0; padding:1.3rem 1.15rem 1.5rem; background:var(--white);
  border:3px solid var(--ink); border-right-width:0; }
.ledger dl:last-child{ border-right-width:3px; }
.ledger dl:nth-child(1){ border-top:9px solid var(--red); }
.ledger dl:nth-child(2){ border-top:9px solid var(--teal); }
.ledger dl:nth-child(3){ border-top:9px solid var(--green); }
.ledger dl:nth-child(4){ border-top:9px solid var(--marigold); }
@media (max-width:859px){
  .ledger dl{ border-right-width:3px; }
  .ledger dl:nth-child(odd){ border-right-width:0; }
  .ledger dl:nth-child(n+3){ border-top-width:9px; }
}
.ledger dt{ font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); }
.ledger dd{ margin:.3rem 0 0; font-family:"Fraunces",serif; font-weight:700;
  font-size:clamp(1.55rem,3vw,2.1rem); letter-spacing:-.035em; line-height:1; }
.ledger dd small{ display:block; margin-top:.35rem; font-family:"Archivo",sans-serif;
  font-size:.71rem; font-weight:400; letter-spacing:0; color:var(--faint); }

/* ---------- section shell ---------- */
section{ padding-block:clamp(3.5rem,7vw,6rem); }
.sec-head{ display:grid; gap:1.2rem; margin-bottom:clamp(2rem,3.5vw,3rem); }
@media (min-width:900px){ .sec-head{ grid-template-columns:.9fr 1.1fr; align-items:end; gap:3rem; } }
.sec-head h2{ font-size:clamp(1.9rem,4vw,3rem); max-width:16ch; }
.sec-head p{ color:var(--ink-2); max-width:52ch; }

/* ---------- process: solid green block ---------- */
#how{ background:var(--green); color:#fff; }
#how .eyebrow{ color:#fff; }
#how .sec-head p{ color:rgba(255,255,255,.86); }
.steps{ display:grid; gap:3px; background:var(--ink); border:3px solid var(--ink); }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--white); color:var(--ink); padding:1.7rem 1.35rem 1.9rem; }
.step .n{ font-family:"Fraunces",serif; font-style:italic; font-size:2.4rem; font-weight:400;
  color:var(--green); line-height:1; display:block; margin-bottom:.8rem; }
.step h3{ font-size:1.06rem; margin-bottom:.5rem; }
.step p{ font-size:.85rem; color:var(--ink-2); line-height:1.6; }

/* ================= PRICE LIST ================= */
.list-sec{ background:var(--sand); border-block:3px solid var(--ink); }

.filters{
  position:sticky; top:70px; z-index:40;
  display:flex; gap:.45rem; overflow-x:auto; padding:1rem 0;
  background:color-mix(in srgb, var(--sand) 94%, transparent);
  backdrop-filter:blur(10px); border-bottom:2px solid var(--line);
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }

/* real links to the category landing pages, under the JS filter pills. The
   pills only filter this page; these are the pages a search engine can reach. */
.catnav{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:1rem 0 1.2rem; }
.catnav .lbl{ font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-right:.2rem; }
.catnav a{ font-family:"DM Mono",monospace; font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  border:2px solid var(--ink); border-radius:100px; padding:.44rem .9rem;
  white-space:nowrap; transition:background-color .2s, color .2s; }
.catnav a:hover{ background:var(--ink); color:var(--cream); }
.filters button{
  font-family:"DM Mono",monospace; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  background:var(--white); border:2px solid var(--ink); color:var(--ink);
  padding:.48rem .9rem; border-radius:100px; cursor:pointer; white-space:nowrap;
  transition:background-color .2s, color .2s, transform .2s;
}
.filters button:hover{ transform:translateY(-2px); }
.filters button[data-filter="inhalers"][aria-pressed="true"]{ background:var(--teal); color:#fff; }
.filters button[data-filter="balms"][aria-pressed="true"]{ background:var(--red); color:#fff; }
.filters button[data-filter="powders"][aria-pressed="true"]{ background:var(--green); color:#fff; }
.filters button[data-filter="remedies"][aria-pressed="true"]{ background:var(--marigold); color:var(--ink); }
.filters button[data-filter="all"][aria-pressed="true"]{ background:var(--ink); color:var(--cream); }

/* --- one listing per product line --- */
.listing{ background:var(--white); border:3px solid var(--ink); margin-bottom:.85rem; }
.listing.hide{ display:none; }

.lhead{
  display:grid; align-items:center; gap:1rem; width:100%;
  grid-template-columns:64px minmax(0,1fr) auto;
  padding:.95rem 1rem; background:none; border:0; cursor:pointer; text-align:left;
  border-left:9px solid var(--cc, var(--ink)); margin-left:-3px;
  transition:background-color .2s;
}
@media (min-width:900px){ .lhead{ grid-template-columns:72px minmax(0,1fr) 190px 130px auto; } }
.lhead:hover{ background:color-mix(in srgb, var(--cc, var(--ink)) 9%, transparent); }
.lhead:focus-visible{ outline:3px solid var(--grape); outline-offset:-3px; }

.thumb{
  width:64px; height:64px; border-radius:3px; background:var(--white);
  border:2px solid var(--line); display:grid; place-items:center; overflow:hidden;
}
@media (min-width:900px){ .thumb{ width:72px; height:72px; } }
.thumb img{ width:100%; height:100%; object-fit:contain; padding:9%; }
.thumb .na{ font-family:"DM Mono",monospace; font-size:.44rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); text-align:center; line-height:1.35; }

.lname{ min-width:0; }
.lname h3{ font-family:"Fraunces",serif; font-size:1.22rem; margin-bottom:.2rem; }
.lname .sub{ font-size:.82rem; color:var(--ink-2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.lvar,.lmoq{ display:none; }
@media (min-width:900px){
  .lvar,.lmoq{ display:block; font-family:"DM Mono",monospace; font-size:.72rem; color:var(--ink-2); }
  .lvar small,.lmoq small{ display:block; font-size:.57rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint); }
}

.lend{ display:flex; align-items:center; gap:.75rem; justify-self:end; }
.pill{
  font-family:"DM Mono",monospace; font-size:.62rem; font-weight:500;
  background:var(--red); color:#fff; min-width:22px; text-align:center;
  padding:.24rem .5rem; border-radius:100px; white-space:nowrap;
  opacity:0; transform:scale(.8); transition:opacity .25s, transform .25s;
}
.pill.on{ opacity:1; transform:none; }
.chev{ color:var(--cc, var(--ink)); transition:transform .35s var(--ease); flex:none; }
.lhead[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* variants, collapsed by default */
.vars{ display:none; padding:.2rem 1rem 1rem; border-top:2px solid var(--line); }
.vars.open{ display:block; }
@media (min-width:900px){ .vars{ padding-left:96px; } }

.var{
  display:grid; align-items:center; gap:.85rem;
  grid-template-columns:38px minmax(0,1fr) auto;
  padding:.6rem .7rem; border-radius:3px;
  transition:background-color .2s;
}
@media (min-width:900px){ .var{ grid-template-columns:44px minmax(0,1fr) 120px 150px; } }
.var:hover{ background:var(--sand); }
.var.picked{ background:color-mix(in srgb, var(--cc, var(--red)) 15%, transparent); }
.vthumb{ width:38px; height:38px; border-radius:3px; background:var(--white);
  border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
@media (min-width:900px){ .vthumb{ width:44px; height:44px; } }
.vthumb img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.vthumb .na{ font-family:"DM Mono",monospace; font-size:.36rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); text-align:center; line-height:1.3; }
.var .vn{ min-width:0; }
.var .vn b{ display:block; font-size:.89rem; font-weight:700; letter-spacing:-.004em; }
.var .vn .meta{ display:flex; flex-wrap:wrap; gap:.35rem .7rem; align-items:center; margin-top:.15rem; }
.var .vn .sku{ font-family:"DM Mono",monospace; font-size:.58rem; color:var(--faint); }
.var .vn .tag{ font-family:"DM Mono",monospace; font-size:.52rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:var(--green);
  padding:.12rem .38rem; border-radius:100px; }
.var .vn .tag.soon{ background:var(--marigold); color:var(--ink); }
.var .vmoq{ display:none; }
@media (min-width:900px){
  .var .vmoq{ display:block; font-family:"DM Mono",monospace; font-size:.68rem; color:var(--faint); }
}

/* stepper, stepping by pack size so an invalid quantity is impossible */
.qty{ display:flex; align-items:center; gap:.35rem; justify-self:end; }
.qty button{
  width:32px; height:32px; border-radius:100px; cursor:pointer;
  background:var(--white); border:2px solid var(--ink); color:var(--ink);
  display:grid; place-items:center; font-size:1rem; line-height:1; font-weight:700;
  transition:background-color .2s, color .2s, transform .15s;
}
.qty button:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.qty button:focus-visible{ outline:3px solid var(--grape); outline-offset:2px; }
.qty .v{
  font-family:"DM Mono",monospace; font-size:.76rem; min-width:64px; text-align:center;
  padding:.3rem .2rem; border-bottom:2px solid var(--line); color:var(--faint);
}
.qty .v.on{ color:var(--ink); font-weight:500; border-color:var(--cc, var(--red)); }
.qty .v em{ font-style:normal; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); display:block; }

.list-note{ margin-top:1.6rem; font-size:.82rem; color:var(--faint); }

/* ---------- order tray ---------- */
.tray{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--ink); color:var(--cream);
  border-top:4px solid var(--marigold);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.tray.up{ transform:none; }
.tray .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--tray); padding-block:.85rem; }
.tray-sum{ display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap; min-width:0; }
.tray-sum .big{ font-family:"Fraunces",serif; font-weight:700; font-size:1.35rem; letter-spacing:-.03em; }
.tray-sum .sub{ font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--marigold); }
.tray-act{ display:flex; gap:.5rem; align-items:center; flex:none; }
.tray .clear{
  background:none; border:0; cursor:pointer; color:rgba(244,239,228,.6);
  font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px; padding:.5rem;
}
.tray .clear:hover{ color:var(--cream); }
@media (max-width:620px){ .tray-sum .sub{ display:none; } .tray .wrap{ padding-inline:1rem; } }

/* ---------- buyers ---------- */
.buyers{ display:grid; gap:3px; background:var(--ink); border:3px solid var(--ink); }
@media (min-width:700px){ .buyers{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .buyers{ grid-template-columns:repeat(4,1fr); } }
.buyer{ background:var(--white); padding:1.8rem 1.35rem; transition:background-color .3s; }
.buyer:nth-child(1) .ic{ color:var(--red); }
.buyer:nth-child(2) .ic{ color:var(--teal); }
.buyer:nth-child(3) .ic{ color:var(--green); }
.buyer:nth-child(4) .ic{ color:var(--grape); }
.buyer:hover{ background:var(--sand); }
.buyer .ic{ margin-bottom:.9rem; }
.buyer h3{ font-size:1.03rem; margin-bottom:.45rem; }
.buyer p{ font-size:.84rem; color:var(--ink-2); line-height:1.58; }

/* ---------- terms ---------- */
#terms{ background:var(--sand); border-top:3px solid var(--ink); }
.terms{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:960px){ .terms{ grid-template-columns:1fr 1fr; } }
.tbl{ width:100%; border-collapse:collapse; font-size:.85rem; background:var(--white);
  border:3px solid var(--ink); }
.tbl caption{ text-align:left; font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); padding-bottom:.8rem; caption-side:top; }
.tbl th{ text-align:left; font-family:"DM Mono",monospace; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--ink); font-weight:400; padding:.6rem .9rem; }
.tbl td{ padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tr:hover td{ background:color-mix(in srgb, var(--marigold) 22%, transparent); }
.tbl td:last-child, .tbl th:last-child{ text-align:right; font-family:"DM Mono",monospace;
  font-size:.75rem; white-space:nowrap; color:var(--ink); font-weight:500; }
.notes{ display:flex; flex-direction:column; gap:1.15rem; }
.note{ background:var(--white); border:3px solid var(--ink); border-left-width:9px; padding:1rem 1.1rem; }
.note:nth-child(1){ border-left-color:var(--red); }
.note:nth-child(2){ border-left-color:var(--teal); }
.note:nth-child(3){ border-left-color:var(--green); }
.note:nth-child(4){ border-left-color:var(--marigold); }
.note h3{ font-size:1.02rem; margin-bottom:.3rem; }
.note p{ font-size:.85rem; color:var(--ink-2); line-height:1.6; }

/* ---------- contact: solid red block ---------- */
.contact{ background:var(--red); color:#fff; border-top:3px solid var(--ink); }
.contact .eyebrow{ color:var(--marigold); }
.contact-grid{ display:grid; gap:clamp(2.2rem,4vw,3.5rem); }
@media (min-width:940px){ .contact-grid{ grid-template-columns:1.1fr .9fr; align-items:start; } }
.contact h2{ font-size:clamp(2rem,4.4vw,3.2rem); max-width:13ch; }
.contact .lede{ margin-top:1.2rem; color:rgba(255,255,255,.9); max-width:44ch; }
.contact-cta{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.8rem; }
.contact .btn-paper{ background:#fff; color:var(--red); }
.contact .btn-line{ border-color:#fff; color:#fff; }
.contact .btn-line:hover{ background:#fff; color:var(--red); }
.deets{ display:grid; gap:3px; background:var(--ink); border:3px solid var(--ink); }
.deet{ background:var(--white); color:var(--ink); padding:1.1rem 1.2rem; }
.deet dt{ font-family:"DM Mono",monospace; font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:.3rem; }
.deet dd{ margin:0; font-size:.9rem; line-height:1.55; }
.deet dd a{ text-decoration:none; border-bottom:2px solid var(--marigold); transition:border-color .25s; }
.deet dd a:hover{ border-color:var(--red); }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:rgba(244,239,228,.55); font-size:.77rem; }
footer .wrap{ padding-block:2.2rem; display:grid; gap:1.4rem; }
@media (min-width:820px){ footer .wrap{ grid-template-columns:1fr auto; align-items:center; } }
footer .wordmark .mk{ color:var(--cream); }
footer .wordmark .sub{ color:rgba(244,239,228,.45); border-left-color:rgba(244,239,228,.3); }
footer .legal{ margin-top:.6rem; line-height:1.65; max-width:64ch; }
footer .fnav{ display:flex; flex-wrap:wrap; gap:1.2rem; }
footer .fnav a{ text-decoration:none; transition:color .25s; }
footer .fnav a:hover{ color:var(--marigold); }
.more{
  display:inline-block; margin:.5rem 0 0 .7rem;
  font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); text-decoration:none;
  border-bottom:2px solid currentColor; padding-bottom:1px;
  transition:opacity .2s;
}
.more:hover{ opacity:.6; }
@media (min-width:900px){ .more{ margin-left:0; } }

/* ---------- floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:65;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; border:3px solid var(--ink);
  box-shadow:0 6px 0 rgba(23,20,15,.35);
  transition:transform .35s var(--ease), box-shadow .25s;
}
.wa-float:hover{ transform:translateY(-3px); box-shadow:0 9px 0 rgba(23,20,15,.35); }
.wa-float:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(23,20,15,.35); }
.wa-float:focus-visible{ outline:3px solid var(--grape); outline-offset:3px; }
/* the order tray occupies the bottom strip, so lift clear of it */
body:has(.tray.up) .wa-float{ transform:translateY(calc(-1 * var(--tray))); }
body:has(.tray.up) .wa-float:hover{ transform:translateY(calc(-1 * var(--tray) - 3px)); }
@media (max-width:520px){ .wa-float{ width:50px; height:50px; right:.8rem; bottom:.8rem; } }