/* ==================================================================
   LIVIO storefront elevation layer — PUBLIC pages only (/, /catalog,
   /rfq). Loaded AFTER livio-ds.css; strictly additive so the 13 other
   pages on the base system (portals, dashboards, sign-in) are
   untouched.

   Bespoke-luxury craft on the existing "light engineered" system:
   - Fraunces display serif for headlines, Inter for body,
     IBM Plex Mono for equipment spec lines and micro-labels.
   - Livio gold #FFC107 reserved for the primary CTA; every other
     accent (trust cues, eyebrows, card actions) uses the muted
     bronze --color-amber-deep.
   - One deep espresso tone (--color-deep) grounds the closing band
     and footer.
   ================================================================== */

:root{
  --color-amber:#FFC107;
  --color-amber-bright:#ffd044;
  --color-deep:#211e18;
  --color-deep-line:rgba(244,242,236,.16);
  --color-deep-dim:rgba(244,242,236,.68);
  /* Newsreader (was Fraunces): same editorial-serif register, but with
     conventional display glyphs — Fraunces' display-cut lowercase "f" has a
     curled hook terminal that read as a broken glyph in headlines, and no
     WONK/opsz/feature setting normalizes it (it's inherent to the design). */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* rfq.html's legacy inline tokens read --font; point it at the system body face */
  --font:var(--font-text);
}
body{font-optical-sizing:auto;}

/* ── display serif rides lighter and looser than the grotesque did ── */
.hero-h{font-weight:560;letter-spacing:-.015em;line-height:1.04;font-size:clamp(2.4rem,5vw,4rem);}
.big{font-weight:560;letter-spacing:-.01em;line-height:1.1;font-size:clamp(1.85rem,3.8vw,2.9rem);}
.sec-h{font-weight:560;letter-spacing:-.008em;}
.display{font-weight:580;letter-spacing:-.005em;line-height:1.15;}
.lead{font-size:1.08rem;line-height:1.7;}

/* generous vertical rhythm on public sections */
.section{padding:4.5rem 0;}
@media(min-width:768px){.section{padding:5.5rem 0;}}

/* ── condensed hero (hybrid fold) ── */
.sf-hero{padding:2.9rem 0 2.4rem;}
@media(min-width:768px){.sf-hero{padding:3.4rem 0 2.8rem;}}

/* hero trust cues — restrained bronze line, no fills, no badges */
.trustline{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 2.2rem;margin-top:2.1rem;}
.trustline span{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--color-fg-dim);}
.trustline svg{width:15px;height:15px;stroke:var(--color-amber-deep);flex:none;}

/* ── premium equipment card (homepage showcase + /catalog) ── */
.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;}
.sf-card{display:flex;flex-direction:column;gap:.9rem;padding:1.7rem 1.7rem 1.4rem;background:var(--color-surface);border:1px solid var(--color-line);text-decoration:none;color:inherit;transition:border-color .18s var(--ease-machined),transform .18s var(--ease-machined),background-color .18s;}
.sf-card:hover{border-color:var(--color-amber-deep);transform:translateY(-2px);background:#fffdf7;}
.sf-card-cat{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--color-fg-faint);}
.sf-card-spec{font-family:var(--font-mono);font-size:.94rem;font-weight:500;line-height:1.7;color:var(--color-fg);}
.sf-card-avail{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;color:var(--color-fg-dim);}
.sf-card-avail .dot{width:7px;height:7px;border-radius:50%;flex:none;}
.sf-card-avail.in .dot{background:#3a7d44;}
.sf-card-avail.soon .dot{background:var(--color-amber-deep);}
.sf-card-cta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--color-line);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;color:var(--color-amber-deep);display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.sf-card-cta .arr{transition:transform .18s var(--ease-machined);}
.sf-card:hover .sf-card-cta .arr{transform:translateX(4px);}

/* quiet assurance line beneath the showcase / catalog note */
.sf-assurance{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--color-fg-faint);}
.sf-assurance svg{width:14px;height:14px;stroke:var(--color-amber-deep);flex:none;}

/* ── deep espresso band: closing CTA + footer ── */
.sf-deep{background:var(--color-deep);color:var(--color-paper);border-top:1px solid var(--color-deep);}
.sf-deep .lead,.sf-deep .dim{color:var(--color-deep-dim);}
.sf-deep .label-mono{color:var(--color-deep-dim);}
.sf-deep a.dim{transition:color .15s;}
.sf-deep a.dim:hover{color:var(--color-paper);}
.sf-deep .eng-grid{background-image:linear-gradient(to right,rgba(244,242,236,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(244,242,236,.06) 1px,transparent 1px);}
.sf-deep .btn-ghost{border-color:rgba(244,242,236,.32);color:var(--color-paper);}
.sf-deep .btn-ghost:hover{border-color:var(--color-amber);color:var(--color-amber);}
.sf-deep .brand small{color:var(--color-deep-dim);}

/* ── STORE-FIRST homepage additions (V1) ─────────────────────────
   Extends the layer above; used only where the markup opts in. */

/* nav search/request bar centerpiece */
.sf-appbar .appbar-inner{height:auto;min-height:72px;flex-wrap:wrap;row-gap:.55rem;padding-top:.6rem;padding-bottom:.6rem;}
.sf-search{flex:1 1 340px;display:flex;max-width:620px;min-width:0;}
.sf-search input{flex:1;min-width:0;border:1px solid var(--color-line-bright);border-right:none;background:var(--color-surface);padding:.68rem 1rem;font-family:var(--font-text);font-size:1rem;color:var(--color-fg);transition:border-color .15s;}
.sf-search input::placeholder{color:var(--color-fg-faint);}
.sf-search input:focus{outline:none;border-color:var(--color-amber-deep);}
.sf-search button{border:1px solid var(--color-line-bright);background:var(--color-surface);color:var(--color-amber-deep);padding:0 1rem;display:flex;align-items:center;transition:background-color .15s,border-color .15s,color .15s;}
.sf-search button:hover{background:var(--color-amber);border-color:var(--color-amber);color:var(--color-ink);}
.sf-search svg{width:16px;height:16px;stroke:currentColor;flex:none;}
@media(max-width:940px){.sf-search{order:3;flex-basis:100%;max-width:none;}}
/* Nav text links — hidden on small screens (logo + search + primary CTA remain).
   Centralized here so every page's shared nav behaves identically on mobile. */
.hub-textlink{display:none;}
@media(min-width:600px){.hub-textlink{display:inline-flex;}}
/* Shared footer column layout — centralized so the one footer renders
   identically on every public page (static + server-rendered). */
@media(min-width:820px){.footgrid{grid-template-columns:2fr 1fr 1fr 1fr!important;}}

/* Image area for product cards AND homepage category tiles: grid-paper ground,
   line-art icon centred, category photo layered over it. The tile shares this
   treatment by extending the selector — the card's own declarations are
   untouched, so its rendering is provably unchanged; .sf-tile-img below only
   overrides the two values that must differ (the bleed margin matches the
   tile's narrower padding, and the band is shorter to suit a smaller tile). */
.sf-card-img,.sf-tile-img{margin:-1.7rem -1.7rem 0;height:118px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--color-line);background-color:var(--color-paper);background-image:linear-gradient(to right,color-mix(in oklab,var(--color-line) 60%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklab,var(--color-line) 60%,transparent) 1px,transparent 1px);background-size:1.6rem 1.6rem;background-position:center;}
.sf-card-img,.sf-tile-img{position:relative;overflow:hidden;}
.sf-card-img svg{width:44px;height:44px;stroke:var(--color-fg-dim);stroke-width:1.3;fill:none;transition:stroke .18s;}
.sf-card:hover .sf-card-img svg{stroke:var(--color-amber-deep);}
/* category/listing photo layered over the icon; invisible until it loads, so
   a missing file degrades to the icon with no broken-image glyph and no
   layout shift (the image area is fixed-height) */
.sf-card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease;}
.sf-card-photo.on{opacity:1;}

/* availability + qualitative scarcity cue (never a number) */
.sf-card-flags{display:flex;align-items:center;justify-content:space-between;gap:.5rem .9rem;flex-wrap:wrap;}
.sf-scarcity{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--color-amber-deep);}
.sf-scarcity::before{content:"";width:6px;height:6px;background:var(--color-amber);flex:none;}

/* Direct-Buy priced card (phase 2, flag-gated): the card body links to the
   product page; a distinct "Buy now" button opens checkout. Shares the .sf-card
   box, but the padding moves onto the inner link so the image bleed still reaches
   the card edge, plus a bottom buy row. This markup only renders when
   DIRECT_BUY_ENABLED is on and the item is buy-eligible — otherwise the classic
   whole-card <a> is emitted unchanged. */
.sf-card-priced{padding:0;gap:0;}
.sf-card-link{display:flex;flex-direction:column;gap:.9rem;padding:1.7rem 1.7rem 1.1rem;text-decoration:none;color:inherit;flex:1 1 auto;}
.sf-buyrow{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.9rem 1.7rem 1.4rem;border-top:1px solid var(--color-line);}
.sf-price{font-family:var(--font-mono);font-weight:600;font-size:1.08rem;letter-spacing:.01em;color:var(--color-fg);white-space:nowrap;}
.sf-buy{white-space:nowrap;}

/* browsable category tiles */
/* Tiles are data-driven now (count varies with the live catalogue), so the
   grid auto-fits: any number of tiles fills the row cleanly instead of
   assuming exactly six. */
.sf-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--color-line);border:1px solid var(--color-line);}
@media(min-width:680px){.sf-tiles{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}}
.sf-tile{background:var(--color-paper);padding:1.7rem 1rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center;transition:background-color .15s;}
.sf-tile:hover{background:var(--color-surface);}
/* align-self:stretch + the negative bleed carry the band edge-to-edge despite
   the tile centring everything else; the margins mirror .sf-tile's padding. */
.sf-tile-img{align-self:stretch;margin:-1.7rem -1rem 0;height:96px;}
.sf-tile svg{width:34px;height:34px;stroke:var(--color-fg-dim);stroke-width:1.3;fill:none;transition:stroke .15s;}
.sf-tile:hover svg{stroke:var(--color-amber-deep);}
.sf-tile .t-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--color-fg);}
.sf-tile .t-go{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:var(--color-fg-faint);transition:color .15s;}
.sf-tile:hover .t-go{color:var(--color-amber-deep);}

/* two-lane how-it-works: parallel paths converging on a shared secured row */
.sf-paths{display:grid;grid-template-columns:1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line);}
@media(min-width:820px){.sf-paths{grid-template-columns:1fr 1fr;}}
.sf-lane{background:var(--color-paper);display:flex;flex-direction:column;}
.sf-lane .cell{border-top:1px solid var(--color-line);flex:1;}
.sf-lane-h{padding:.9rem 1.5rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--color-fg);display:flex;align-items:center;gap:.55rem;}
@media(min-width:768px){.sf-lane-h{padding:1rem 2rem;}}
.sf-lane-h .dot{width:7px;height:7px;border-radius:50%;background:#3a7d44;flex:none;}
.sf-lane-h.alt{color:var(--color-fg-dim);}
/* in-lane 01→02 direction arrow (replaces the divider between the steps) */
.sf-flow-down{display:flex;justify-content:center;padding:.2rem 0;border-top:1px solid var(--color-line);}
.sf-flow-down + .cell{border-top:none;}
.sf-flow-down svg{width:18px;height:18px;stroke:var(--color-amber-deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

.sf-converge{grid-column:1/-1;background:var(--color-surface);}
.sf-converge-h{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem .2rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--color-amber-deep);}
@media(min-width:768px){.sf-converge-h{padding:1.1rem 2rem .2rem;}}
.sf-converge-h .ln{height:1px;background:var(--color-line-bright);flex:1;}

/* funnel: legs from each lane's center meet at one down-arrow */
.sf-funnel{padding-top:.4rem;}
.sf-funnel .legs{display:block;width:100%;height:34px;}
.sf-funnel .legs path{stroke:var(--color-amber-deep);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke;opacity:.75;}
.sf-funnel .tip{display:block;margin:-5px auto 0;width:18px;height:18px;stroke:var(--color-amber-deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:819px){.sf-funnel .legs{display:none;}.sf-funnel{padding-top:.1rem;}}

/* the shared trunk: one centered 03 → 04 sequence on a tinted, gold-topped
   surface — visibly different from the two-lane grid above */
.sf-trunk{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:.8rem;padding:1.6rem 2rem 2rem;background:color-mix(in oklab,var(--color-amber) 7%,var(--color-surface));border-top:2px solid var(--color-amber);}
.sf-trunk-step{max-width:21rem;display:flex;flex-direction:column;align-items:center;text-align:center;}
.sf-trunk-arr{display:flex;align-items:center;flex:none;}
.sf-trunk-arr svg{width:22px;height:22px;stroke:var(--color-amber-deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:640px){.sf-trunk{flex-direction:column;gap:.9rem;}.sf-trunk-arr svg{transform:rotate(90deg);}}

/* scarcity statement band */
.sf-band{padding:2.7rem 0;}
.sf-band .band-h{font-family:var(--font-display);font-weight:560;letter-spacing:-.008em;font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.3;}
.sf-band .band-h em{font-style:normal;color:var(--color-amber);}
/* the industry's "sold out" is deliberately crossed out; the strike is
   explicit (color + thickness) so it reads as design, not a glitch */
.sf-band .band-h .struck{color:var(--color-deep-dim);text-decoration:line-through;text-decoration-color:rgba(244,242,236,.55);text-decoration-thickness:2px;}

/* ── RFQ concierge treatment (classes exist only on rfq.html) ── */
.intake-hero{max-width:800px;margin:60px auto 40px;}
.intake-hero h1{font-family:var(--font-display);font-weight:560;font-size:clamp(2.1rem,4.4vw,3rem);letter-spacing:-.01em;line-height:1.08;}
.intake-hero h1 .gold{color:var(--color-amber-deep);}
.intake-hero .lead{font-size:1.05rem;line-height:1.7;color:var(--color-fg-dim);max-width:36rem;margin-left:auto;margin-right:auto;margin-bottom:40px;}
.intake-drop{border:1px solid var(--color-line-bright);background:var(--color-surface);padding:52px 32px;transition:border-color .18s,background-color .18s;}
.intake-drop:hover,.intake-drop.dragging{border-color:var(--color-amber-deep);background:#fffdf7;}
.intake-drop .drop-icon{display:flex;justify-content:center;margin-bottom:16px;}
.intake-drop .drop-icon svg{width:34px;height:34px;stroke:var(--color-amber-deep);}
.intake-drop .drop-headline{font-family:var(--font-display);font-weight:580;font-size:1.35rem;letter-spacing:-.005em;}
.intake-drop .drop-sub{color:var(--color-fg-dim);}
.intake-drop .drop-formats{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;color:var(--color-fg-faint);}
.intake-or{color:var(--color-fg-faint);}
.intake-or::before,.intake-or::after{background:var(--color-line);}
.intake-manual a{color:var(--color-fg);border-bottom:1px solid var(--color-line-bright);}
.intake-manual a:hover{border-color:var(--color-amber-deep);color:var(--color-amber-deep);}
.sf-reassure{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:28px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--color-fg-dim);}
.sf-reassure svg{width:14px;height:14px;stroke:var(--color-amber-deep);flex:none;}
.step-title{font-family:var(--font-display);font-weight:580;letter-spacing:-.005em;}
.btn-primary{background:var(--color-amber);color:var(--color-ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:500;}
.btn-primary:hover{background:var(--color-amber-bright);}
.btn-secondary{background:transparent;border:1px solid var(--color-line-bright);color:var(--color-fg);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:500;}
.btn-secondary:hover{border-color:var(--color-amber-deep);color:var(--color-amber-deep);}