/* ── Self-hosted faces — no network dependency, no system-serif fallback ── */
@font-face { font-family:'Cinzel'; src:url('fonts/Cinzel.ttf') format('truetype-variations'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('fonts/Archivo.ttf') format('truetype-variations'); font-weight:400 700; font-style:normal; font-display:swap; }

/* Ambrosia — shared stylesheet. Resets, grid helpers and breakpoints only;
   component styling stays inline per element.

   Breakpoint ladder, widest first: 1080 → 980 → 900 → 860 → 760 → 620 → 480.
   Every rule that must beat an inline style carries !important; that is the
   only reason !important appears here. */

/* ── base ── */
html, body { margin:0; padding:0; background:#F0E9DC; }
html { scroll-behavior:auto; }
[id] { scroll-margin-top:24px; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
button { font-family:Archivo, sans-serif; border:none; background:none; }
input, textarea { font-family:Archivo, sans-serif; }
input::placeholder, textarea::placeholder { color:#A9A096; }
input[type="checkbox"] { accent-color:#6B1F28; }
input:focus, textarea:focus { outline:none; border-bottom-color:#7A5622; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline:2px solid #7A5622; outline-offset:3px; }

/* ── grids ── */
.hdr    { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.g2     { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3     { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4     { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.gcat   { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.two    { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.split  { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.fig    { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.mast   { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
.csplit { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.psplit { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.row    { display:grid; grid-template-columns:64px minmax(0,0.85fr) minmax(0,1.5fr); }
.led    { display:grid; grid-template-columns:72px minmax(0,1fr); }
.crow   { display:grid; grid-template-columns:96px minmax(0,1fr) auto; }
.f2     { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.f3     { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
.orow   { display:grid; grid-template-columns:minmax(96px,0.7fr) minmax(120px,1fr) minmax(0,2fr) minmax(84px,0.7fr) minmax(84px,0.7fr) minmax(92px,0.8fr); }
.prow   { display:grid; grid-template-columns:minmax(110px,1fr) minmax(90px,0.8fr) minmax(0,1.4fr) minmax(90px,0.8fr); }
.trow   { display:grid; grid-template-columns:minmax(150px,1.5fr) minmax(104px,0.9fr) minmax(64px,0.6fr) minmax(90px,0.8fr) minmax(90px,0.8fr) minmax(76px,0.6fr) minmax(96px,0.8fr); min-width:820px; }
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.stick  { position:sticky; top:24px; }

@media (max-width: 1080px) {
  .psplit, .csplit { grid-template-columns:minmax(0,1fr) !important; }
  .stick { position:static !important; }
}
@media (max-width: 980px) {
  .split { grid-template-columns:minmax(0,1fr) !important; }
  .gcat  { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 900px) {
  .mast, .fig, .two { grid-template-columns:minmax(0,1fr) !important; }
  .g4, .fg3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .row { grid-template-columns:48px minmax(0,1fr) !important; }
  .led { grid-template-columns:52px minmax(0,1fr) !important; }
}
@media (max-width: 860px) {
  .g3 { grid-template-columns:minmax(0,1fr) !important; }
  .orow, .prow { grid-template-columns:minmax(0,1fr) !important; gap:6px !important; }
}
@media (max-width: 760px) {
  .g2 { grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width: 620px) {
  .crow { grid-template-columns:72px minmax(0,1fr) !important; }
  .f2, .f3 { grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width: 480px) {
  .g4, .gcat, .fg3 { grid-template-columns:minmax(0,1fr) !important; }
  .row { grid-template-columns:38px minmax(0,1fr) !important; }
  .led { grid-template-columns:40px minmax(0,1fr) !important; }
}

/* ── header on mobile ──
   Row one: mark, wordmark and CART. Row two: the same three links the desktop
   header carries, spread across the full width at 44px tap height. No drawer. */
@media (max-width: 760px) {
  .hdr {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:0 !important;
    padding:10px 0 !important;
  }
  .hdr > * { justify-self:auto !important; }
  .hdr .hmid {
    order:1 !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:9px !important;
  }
  .hdr .hmid svg { width:26px !important; height:26px !important; flex:0 0 auto; }
  .hdr .hword { font-size:16px !important; letter-spacing:0.2em !important; padding-left:0.2em !important; }
  .hdr .hright { order:2 !important; flex:0 0 auto !important; gap:18px !important; }
  .hdr .hleft  {
    order:3 !important; flex:1 0 100% !important; flex-wrap:nowrap !important;
    justify-content:space-between !important; gap:0 !important;
    border-top:1px solid #D8C9B2; margin-top:4px;
  }
  .hdr .hshop { display:flex !important; }
  .hdr .hright > a:not(:last-child):not(.hfaq) { display:none !important; }
  .hdr .hleft > a, .hdr .hright > a {
    min-height:44px; display:flex; align-items:center; padding:0 2px !important;
  }
}
@media (max-width: 380px) {
  .hdr .hword { font-size:14px !important; letter-spacing:0.16em !important; }
  .hdr .hmid svg { width:22px !important; height:22px !important; }
}

/* ── touch sizing ──
   Phones get real tap targets: footer link columns, breadcrumbs and the small
   tracked "→" links all read as 12px text on desktop but need 44px of height
   to be hittable. Tracked micro-labels come up a step so they stay legible. */
@media (max-width: 760px) {
  .fcol { gap:0 !important; }
  .fcol > a {
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:14.5px !important;
  }
  .crumb > a, .crumb > span { min-height:44px; display:inline-flex; align-items:center; }
  .minilink { min-height:44px !important; align-items:center !important; }
  .coarow a { min-height:44px; display:inline-flex; align-items:center; }
  .hdr .hmid { min-height:44px !important; }
}


/* ── certificate rows on the Standard page ── */
.coarow { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,0.7fr) minmax(0,1fr) auto; }
@media (max-width: 860px) {
  .coarow { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; row-gap:18px !important; }
}

/* ── previous / next compound strip on product pages ── */
.pstrip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(20px,4vw,56px); }
@media (max-width: 620px) {
  .pstrip { grid-template-columns:minmax(0,1fr) !important; }
  .pstrip > a:last-child { border-top:1px solid #D8C9B2; justify-content:flex-start !important; text-align:left !important; flex-direction:row-reverse; }
}

/* ── Standard page: square photograph beside the four points ── */
.stdband { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1fr); }
@media (max-width: 860px) {
  .stdband { grid-template-columns:minmax(0,1fr) !important; }
}

/* Standard page: the numeral sits close to the claim it marks */
#oxblood .led { grid-template-columns:52px minmax(0,1fr); }

/* the Standard photograph matches the height of the four points beside it */
.stdphoto { aspect-ratio:1/1; align-self:center; }
@media (max-width: 860px) {
  .stdphoto { height:auto; aspect-ratio:1/1; }
}

/* ── homepage Standard band fills the viewport when jumped to ── */
.stdsection {
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
.stdsection .stdphoto { position:relative; min-height:0; aspect-ratio:1/1; }
.stdsection .stdphoto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px) {
  .stdsection { min-height:0; display:block; }
  .stdsection .stdphoto { aspect-ratio:1/1; }
}

/* short viewports: keep the Standard band's call to action above the fold */
@media (min-width: 861px) and (max-height: 820px) {
  .stdsection { padding-top:24px !important; padding-bottom:24px !important; }
  .stdsection .led { padding-top:8px !important; padding-bottom:8px !important; }
  .stdsection h2 { font-size:clamp(26px,3.4vw,40px) !important; }
}