/* ═══════════════════════════════════════════════════════════════════════════
   Navalo shop pages — /explore, /explore/:cat, /explore/:cat/:sku.

   Loaded by explore-view.html and product.html ONLY. No other page links to
   this sheet, and every rule is prefixed .nvs-* under the #nvsRoot container,
   so nothing here can reach index.html, store.html, the admin or any Workwear
   surface. That isolation is the point: the app's own sheets are edited
   concurrently, and these two documents must not depend on them.

   ── THE DESIGN THIS IMPLEMENTS ─────────────────────────────────────────────
   A Claude Design handoff (three pages: index, category, product view). The
   spec is followed on VALUES — sizes, colours, ratios, easing — and not on
   CLASS NAMES: the handoff calls everything .dx-*, this file keeps the shipped
   .nvs-* namespace, because renaming a live sheet buys nothing and costs every
   selector in the tests and in js/navalo-shop.js.

   ONE DELIBERATE DIVERGENCE, and it is a value: the handoff pins --maxw to
   1340px; this keeps the app's own min(96vw,1600px). The homepage a shopper
   arrives from uses 1600, so a narrower Explore would put a visible seam one
   click into the funnel. The handoff's numbers all derive from the container,
   and its stated acceptance check — six cards plus the section header visible
   at 1440x900 — still holds: at a 1440 viewport 96vw is 1382px, within 3% of
   the 1340 it was measured at.

   The rhythm is the point of the whole design and is easy to flatten by
   accident: DARK index hero -> light promises strip -> white grid -> dark CTA,
   and then a WHITE category hero so page 2 reads as a step inward rather than
   a repeat. Two greys carry it — #f5f6f8 for the banded strips (promises,
   technical panels, help card, trust bar) and #eef0f3 behind every garment
   render.

   DESKTOP-FIRST. Phones are not a target for these pages yet, but they must
   not be broken, so the tail of the file stacks the grids.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The ONE rule here that is not scoped to #nvsRoot, and it has to be: the
   default 8px body margin was putting a white gutter down both sides of every
   full-bleed band — the navy top bar, the index hero, the promises strip, the
   closing CTA — so nothing on these pages was actually full-bleed. Measured:
   .nvs-top rendered at y=8 with 8px of page showing either side of it.
   Safe because explore-view.html and product.html load this sheet and nothing
   else does; there is no other content on either document. */
body{ margin:0; }

#nvsRoot{
  --bg:#ffffff; --panel:#ffffff; --hdr:#0a1428; --navy:#0a1428;
  --ink:#101828; --sub:#5d6b7e; --faint:#8b95a3;
  --line:#e4e7ec; --line2:#eef0f3; --blue:#2f6fed; --blue-bg:#e9f0fd;
  --band:#f5f6f8; --shot:#eef0f3;
  --radius:16px; --maxw:min(96vw,1600px);
  --sans:'DM Sans', system-ui, -apple-system, sans-serif;
  /* one font throughout (owner, 13-14 Oct 2026, app edit A1): the section
     headings, the /explore tile names and the product panels' numbers, in
     Playfair Display until then, are DM Sans, each at its own size, weight
     and letter-spacing */
  /* every page's main heading (h1) matches the homepage's: DM Sans 800 (owner, 12 Oct 2026) */
  --h1-font:'DM Sans', system-ui, -apple-system, sans-serif;
  font-family:var(--sans); color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
#nvsRoot *{ box-sizing:border-box; }
#nvsRoot img{ display:block; max-width:100%; }
#nvsRoot button{ font-family:inherit; cursor:pointer; }
#nvsRoot h1,#nvsRoot h2,#nvsRoot h3{ margin:0; }
/* DELIBERATELY no `#nvsRoot a{color:inherit}` reset. An id selector scores
   (1,0,1) and would beat every single-class component rule below — it made the
   white header CTA render white-on-white, because the <a> inherited the dark
   bar's colour instead of taking .nvs-topcta's navy. Each anchor sets its own
   colour and text-decoration instead. */

.nvs-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.nvs-sec{ padding:56px 0 64px; }
/* The grid sits deliberately close under the promises strip — the strip is the
   section's lid, and standard section padding opens a gap that reads as a
   missing heading. */
.nvs-sec.tight{ padding-top:20px; }
.nvs-sec.alt{ background:var(--band); }

/* ── buttons (matched to .dk-btn) ───────────────────────────────────────── */
.nvs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--hdr); color:#fff; border:1px solid var(--hdr); border-radius:11px;
  padding:.8rem 1.5rem; font-size:14.5px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, box-shadow .2s ease, background .15s ease; }
.nvs-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(10,20,40,.5); background:#13233f; }
.nvs-btn:active{ transform:translateY(0); }
.nvs-btn.lg{ padding:.95rem 1.9rem; font-size:15.5px; }
.nvs-btn.ghost{ background:#fff; color:var(--hdr); border-color:#fff; }
.nvs-btn.ghost:hover{ background:#eef0f3; color:var(--hdr); }
/* Outline ghost — on WHITE, where the filled ghost above would be invisible. */
.nvs-btn.quiet{ background:#fff; color:var(--ink); border-color:var(--line); }
.nvs-btn.quiet:hover{ background:#f7f8fa; color:var(--ink); border-color:#c3cbd6; }
/* white fill / navy text — the dark bar's CTA, same as .dk-topcta */
.nvs-topcta{ background:#fff; color:var(--hdr); border-color:#fff; }
.nvs-topcta:hover{ background:#eef0f3; color:var(--hdr); box-shadow:0 8px 22px -12px rgba(0,0,0,.5); }
.nvs-btn.full{ width:100%; }

/* ── dark top bar ───────────────────────────────────────────────────────────
   SOLID navy, not the homepage's transparent-over-hero bar: the category and
   product pages open on white, so a transparent header would render
   white-on-white. Same lockup, same nav type, same white CTA. */
.nvs-top{ background:var(--hdr); color:#fff; position:sticky; top:0; z-index:60; }
.nvs-top-in{ max-width:var(--maxw); margin:0 auto; padding:0 40px; height:70px; display:flex; align-items:center; gap:2rem; }
.nvs-top-sp{ flex:1; }
.nvs-brand{ display:flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none;
  text-transform:uppercase; letter-spacing:.14em; font-size:15px; font-weight:400;
  font-family:'Libre Baskerville', Georgia, serif; }
.nvs-brand-mark{ position:relative; width:36px; height:36px; border-radius:50%; border:1.6px solid currentColor;
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; letter-spacing:.02em; flex-shrink:0; }
.nvs-brand-dot{ position:absolute; top:-3px; left:50%; transform:translateX(-50%) rotate(45deg); width:5px; height:5px; background:currentColor; }
/* The octopus roundel already contains its own circle, so the badge ring is
   dropped when the mask is used — otherwise the circle is drawn twice.
   Painted with currentColor (mask, not <img>) so one asset reads white here. */
.nvs-brand-mark:has(.nvs-brand-img){ border:none; }
@supports not selector(:has(*)){ .nvs-brand-mark,.nvs-empty-mark{ border-color:transparent; } }
.nvs-brand-img{ display:block; width:100%; height:100%; background:currentColor;
  -webkit-mask:url(../assets/brand/navalo-icon-navy.png) center/contain no-repeat;
          mask:url(../assets/brand/navalo-icon-navy.png) center/contain no-repeat; }
.nvs-topnav{ display:flex; align-items:center; gap:1.6rem; }
.nvs-topnav a{ font-size:14px; font-weight:600; color:rgba(255,255,255,.72); text-decoration:none; }
.nvs-topnav a:hover{ color:#fff; }
.nvs-topnav a.on{ color:#fff; }

/* ── the phone and tablet menu (Anthony's testing notes, 29 Sep 2026, #12) ──
   Hidden above 900px, where the nav itself shows. The panel sits INSIDE
   .nvs-top (sticky, so it is the containing block) and drops below the bar.
   44px button and 48px rows: finger-sized. At 560px and below the CTA leaves
   the bar and becomes the panel's last row (.nvs-menucta), so brand, button
   and (on Navalo's product page) the basket fit a 320px bar. */
.nvs-menubtn{ display:none; align-items:center; justify-content:center; flex-shrink:0;
  min-width:44px; min-height:44px; margin-right:-10px; padding:0; border:none; border-radius:10px;
  background:none; color:#fff; cursor:pointer; }
.nvs-menubtn .nvs-mi-bars, .nvs-menubtn .nvs-mi-x{ display:inline-flex; }
.nvs-menubtn .nvs-mi-x, .nvs-menubtn[aria-expanded="true"] .nvs-mi-bars{ display:none; }
.nvs-menubtn[aria-expanded="true"] .nvs-mi-x{ display:inline-flex; }
.nvs-menubtn:focus-visible, .nvs-menu a:focus-visible{ outline:3px solid #b48127; outline-offset:2px; }
.nvs-menu{ position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column;
  background:var(--hdr); border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 30px -20px rgba(0,0,0,.55); padding:6px 20px 18px; }
.nvs-menu[hidden]{ display:none; }
.nvs-menu a{ display:flex; align-items:center; min-height:48px; font-size:15px; font-weight:600;
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1); }
.nvs-menu a:hover{ color:rgba(255,255,255,.78); }
.nvs-menu a.nvs-menucta{ display:none; justify-content:center; margin-top:14px; min-height:48px;
  background:#fff; color:var(--hdr); border:1px solid #fff; border-radius:11px; white-space:normal; text-align:center; }
.nvs-menu a.nvs-menucta:hover{ background:#eef0f3; color:var(--hdr); }
@media (min-width:901px){ .nvs-menu{ display:none !important; } }

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.nvs-crumb{ display:flex; align-items:center; gap:.5rem; font-size:13px; color:var(--sub); flex-wrap:wrap; }
.nvs-crumb a{ color:var(--sub); text-decoration:none; }
.nvs-crumb a:hover{ color:var(--blue); }
.nvs-crumb span[aria-current]{ color:var(--ink); font-weight:600; }
.nvs-crumb-sep{ display:inline-flex; color:#b6bec9; }
/* over the dark index hero */
.nvs-crumb.dark, .nvs-crumb.dark a{ color:rgba(255,255,255,.62); }
.nvs-crumb.dark a:hover{ color:#fff; }
.nvs-crumb.dark span[aria-current]{ color:#fff; }
.nvs-crumb.dark .nvs-crumb-sep{ color:rgba(255,255,255,.4); }

/* ── page 1 hero: dark editorial band ───────────────────────────────────────
   So the white category pages read as a step inward rather than as more of the
   same. The overlay is dark where the type sits and opens up to the photograph
   on the right; without it the headline loses contrast against a bright sky. */
.nvs-ihero{ position:relative; background:var(--hdr); color:#fff; overflow:hidden; }
.nvs-ihero-bg{ position:absolute; inset:0; }
.nvs-ihero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.nvs-ihero-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(6,12,24,.93) 0%,rgba(6,12,24,.72) 38%,rgba(6,12,24,.28) 72%,rgba(6,12,24,.1) 100%); }
.nvs-ihero-in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:26px 40px 62px; }
.nvs-ihero h1{ font-family:var(--h1-font); font-size:56px; line-height:1.04; font-weight:800; letter-spacing:-.02em; margin:1.5rem 0 0; }
.nvs-ihero p{ font-size:17px; color:rgba(255,255,255,.78); line-height:1.55; margin:1.1rem 0 0; max-width:33rem; text-wrap:pretty; }

/* ── page 2 hero: copy left, lifestyle photo bleeding off the right ─────────
   The photo is absolutely positioned and dissolved into the page with a
   left-to-right white gradient, rather than sitting in a box — a hard edge
   here makes it read as a banner ad. Below 1080px it is hidden outright and
   the copy takes the full width: at that size the gradient would be eating
   most of the image anyway. */
.nvs-chero{ position:relative; overflow:hidden; }
.nvs-chero-img{ position:absolute; top:0; right:0; bottom:0; width:52%; }
.nvs-chero-img img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.nvs-chero-img::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.85) 22%,rgba(255,255,255,0) 62%); }
.nvs-chero-in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:24px 40px 26px; }
.nvs-chero-in > *{ max-width:56%; }
.nvs-chero-in > .nvs-crumb, .nvs-chero-in > .nvs-catpills{ max-width:none; }
.nvs-chero h1{ font-family:var(--h1-font); font-size:58px; line-height:1.04; font-weight:800; letter-spacing:-.02em; margin:.5rem 0 0; }
.nvs-chero p{ font-size:16.5px; color:var(--sub); line-height:1.55; margin:1.05rem 0 0; max-width:33rem; text-wrap:pretty; }

/* Category switcher. This is the PRIMARY sideways move — the breadcrumb goes
   back up, the pills go across — so they are anchors, not buttons: a shopper
   comparing two categories opens them in tabs. */
.nvs-catpills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.2rem; }
.nvs-catpills a{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem;
  font-size:13px; font-weight:600; color:var(--sub); text-decoration:none; transition:.15s; }
.nvs-catpills a:hover{ border-color:#c3cbd6; color:var(--ink); }
.nvs-catpills a.on{ background:var(--hdr); border-color:var(--hdr); color:#fff; }

/* ── promises strip (5-up, on the index AND every category page) ─────────── */
.nvs-prom{ background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nvs-prom-in{ max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:repeat(5,1fr); }
.nvs-prom-i{ display:flex; gap:.85rem; padding:18px 22px 18px 0; }
.nvs-prom-i + .nvs-prom-i{ border-left:1px solid #e0e4ea; padding-left:22px; }
.nvs-prom-ic{ flex-shrink:0; color:var(--hdr); margin-top:1px; display:inline-flex; }
.nvs-prom-i b{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.nvs-prom-i p{ font-size:13px; color:var(--sub); line-height:1.45; margin:.35rem 0 0; }

/* ── section head ───────────────────────────────────────────────────────── */
.nvs-sec-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:18px; }
.nvs-sec-hd.end{ justify-content:flex-end; margin-bottom:16px; }
.nvs-sec-hd h2{ font-family:var(--sans); font-size:30px; font-weight:600; letter-spacing:-.02em; }
.nvs-sec-hd span{ font-size:13px; color:var(--sub); }
.nvs-allbtn{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  padding-bottom:2px; border-bottom:1.5px solid var(--line); transition:.18s; }
.nvs-allbtn svg{ transition:transform .25s ease; }
.nvs-allbtn:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.nvs-allbtn:hover svg{ transform:translateX(3px); }

/* ── index tiles: 4 across, name over the photo ─────────────────────────────
   Hover is slow and restrained on purpose — the image creeps, the underline
   fills, the arrow moves 4px. No lift and no shadow: four large photographs
   all jumping is the fastest way to make an editorial page feel like a
   dashboard. */
.nvs-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* Stitcha Communities only (js/navalo-shop.js adds these below four
   categories): the row sized to the tiles there are, above the widths where
   the grid already narrows. */
@media (min-width:1181px){ .nvs-tiles.nvs-tiles-n3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1081px){ .nvs-tiles.nvs-tiles-n2{ grid-template-columns:repeat(2,1fr); } }
/* ...and between the phone and 1080px, where the grid below is two across,
   the third of three tiles would sit alone beside an empty cell: it spans
   the row instead. Equal rows (1fr) give it exactly its 4:3 siblings'
   height; its own ratio is dropped so it stretches to that row. */
@media (min-width:561px) and (max-width:1080px){
  .nvs-tiles.nvs-tiles-n3{ grid-auto-rows:1fr; }
  .nvs-tiles.nvs-tiles-n3 > :last-child{ grid-column:1 / -1; aspect-ratio:auto; }
}
.nvs-tile{ position:relative; display:block; text-align:left; text-decoration:none; color:#fff;
  border-radius:12px; overflow:hidden; background:#10192b; aspect-ratio:4/3; }
.nvs-tile-media{ position:absolute; inset:0; }
.nvs-tile-media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.nvs-tile:hover .nvs-tile-media img{ transform:scale(1.055); }
.nvs-tile-media::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(6,12,24,.9) 0%,rgba(6,12,24,.44) 46%,rgba(6,12,24,.04) 80%,rgba(6,12,24,.16) 100%); }
.nvs-tile-tx{ position:absolute; left:0; right:0; bottom:0; display:block; padding:14px 15px 13px; z-index:2; }
.nvs-tile-tx b{ display:block; font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.nvs-tile-n{ display:block; font-size:11px; color:rgba(255,255,255,.68); margin-top:.2rem; }
.nvs-tile-go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  padding-bottom:2px; border-bottom:1.5px solid rgba(255,255,255,.32); transition:.2s; }
.nvs-tile-go svg{ transition:transform .25s ease; }
.nvs-tile:hover .nvs-tile-go{ border-bottom-color:#fff; }
.nvs-tile:hover .nvs-tile-go svg{ transform:translateX(4px); }

/* ── product card + grid ────────────────────────────────────────────────────
   6 across at store-card scale, which is the whole reason the grid replaced a
   carousel: a full row plus the section header has to be visible on a laptop
   without scrolling, and a rail hides its contents behind a gesture.
   5 across since 22 Oct 2026 (owner, Navalo and Stitcha: "change collections
   desktop tiles from 6 per row to 5 per row"); narrower screens as before. */
.nvs-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.nvs-card{ display:flex; flex-direction:column; width:100%; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .16s ease, box-shadow .16s ease; }
.nvs-card:hover{ border-color:#c3cbd6; box-shadow:0 16px 36px -22px rgba(16,24,40,.4); }
.nvs-card-media{ position:relative; display:block; aspect-ratio:3/4; background:var(--shot); overflow:hidden; }
.nvs-card-media > img{ width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.nvs-card:hover .nvs-card-media > img{ transform:scale(1.035); }
/* hover reveals the BACK view, exactly as the wizard's cards do */
.nvs-card-back{ position:absolute; inset:0; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.nvs-card:hover .nvs-card-back{ opacity:1; }
.nvs-card-body{ display:block; padding:10px 12px 11px; }
.nvs-card-nm{ display:block; font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(2 * 1.25 * 13.5px); }
/* ONE line, clamped — not two reserved. The card's baselines are already
   held by the two-line name reservation above, so a second reservation buys
   no alignment and costs 16px on every card in the grid; that 16px is the
   difference between the first row landing above the fold at 1440x900 and
   below it. The description here is the first SENTENCE of the owner's copy,
   which is written to be short. */
.nvs-card-desc{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11.5px; color:var(--sub); line-height:1.35; margin:.2rem 0 .5rem; }
.nvs-card-more{ display:flex; align-items:center; gap:.35rem; font-size:11.5px; font-weight:700; color:var(--ink); margin-top:.5rem; }
.nvs-card:hover .nvs-card-more{ color:var(--blue); }
/* The promotional card (Admin Tools > Product tiles, owner 23 Oct 2026; only
   where one is saved with a picture): a cell of the grid like its
   neighbours, the owner's picture filling all of it, the words over its foot
   on a dark scrim and the brand's own button (.nvs-btn). Neutral colours
   only, so Stitcha's palette has nothing here to restate. */
.nvs-promo{ position:relative; }
.nvs-promo .nvs-card-media{ flex:1 1 auto; }
.nvs-promo-tx{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:56px 14px 14px; color:#fff; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.46) 58%, rgba(0,0,0,0)); }
.nvs-promo-h{ display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.nvs-promo-t{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12px; line-height:1.4; color:rgba(255,255,255,.92); }
.nvs-promo-btn{ margin-top:4px; max-width:100%; padding:.55rem 1rem; font-size:12.5px; white-space:normal; text-align:left; }
@media (max-width:560px){
  .nvs-promo-tx{ gap:4px; padding:40px 10px 10px; }
  .nvs-promo-h{ font-size:14.5px; }
  .nvs-promo-t{ -webkit-line-clamp:2; font-size:11px; }
  .nvs-promo-btn{ padding:.45rem .75rem; font-size:11.5px; border-radius:9px; }
}

/* Paging: "Load more" while tiles are still to come; once they are all on the
   page the slot is empty (no "Showing all" since 31 Oct 2026, owner: "Please
   just remove that") and keeps its room, so the page ends as before. */
.nvs-more{ display:flex; justify-content:center; margin-top:30px; }
/* INFINITE SCROLL (Navalo, owner 29 Oct 2026; js/navalo-shop.js
   autoMoreWire): where the browser watches the foot of the grid
   (html.nvs-io) the next tiles arrive as the visitor nears it, so "Load
   more" keeps its room (the line watched) but is not shown; without that
   it is the button it always was. */
html.nvs-io .nvs-more [data-a="more"]{ visibility:hidden; }

/* ── colour swatches ────────────────────────────────────────────────────── */
.nvs-sws{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nvs-sw{ width:12px; height:12px; border-radius:50%; border:1px solid transparent; padding:0;
  box-shadow:0 0 0 1px rgba(16,24,40,.18) inset; }
.nvs-sw-more{ font-size:11px; font-weight:700; color:var(--sub); margin-left:1px; }
/* product page: real buttons, larger, with a ring on the selected one */
.nvs-sw.btn{ width:26px; height:26px; cursor:pointer; box-shadow:0 0 0 1px rgba(16,24,40,.2) inset; transition:.14s; }
.nvs-sw.btn:hover{ transform:scale(1.08); }
.nvs-sw.btn.on{ box-shadow:0 0 0 1px rgba(16,24,40,.2) inset, 0 0 0 2px #fff, 0 0 0 4px var(--hdr); }

/* ══ PRODUCT VIEW ══════════════════════════════════════════════════════════
   THE ONE MEASUREMENT THAT MATTERS. The hero is sized off the THUMBNAIL RAIL,
   not the other way round: four 96px thumbs at 3:4 plus three 10px gaps set
   the height, and the main image derives its width from that, so the two
   columns finish dead level.
   Do NOT give .nvs-pd-main a percentage width or 1fr — the alignment breaks
   and the hero grows past a laptop viewport. */
.nvs-pd{ --th:96px; --thg:10px; --pvh:calc(4 * var(--th) * 4 / 3 + 3 * var(--thg));
  display:grid; grid-template-columns:var(--th) auto minmax(0,1fr); gap:22px; align-items:start; padding-bottom:56px; }
.nvs-pd-rail{ display:flex; flex-direction:column; gap:var(--thg); }
/* A unisex pair carries 8 views. The rail KEEPS the four-thumb height that
   sizes the hero (see the warning above) and scrolls inside it; the chevron
   below is for anyone who does not try scrolling. Scrollbar hidden — a 96px
   column with a scrollbar loses thumb width and the chevron already signals
   "more". */
.nvs-pd-railwrap{ display:flex; flex-direction:column; gap:8px; width:var(--th); }
/* No scroll-behavior:smooth here — a smoothed programmatic scrollTop runs on
   animation frames, and a throttled/background tab never advances them, so the
   chevron would silently do nothing. Instant is always correct. */
.nvs-pd-railwrap .nvs-pd-rail{ max-height:var(--pvh); overflow-y:auto; scrollbar-width:none; }
.nvs-pd-railwrap .nvs-pd-rail::-webkit-scrollbar{ display:none; }
.nvs-pd-railwrap .nvs-th{ flex:0 0 auto; }
.nvs-rail-more{ width:var(--th); height:26px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--line); border-radius:8px; color:var(--sub);
  padding:0; cursor:pointer; transition:.14s; }
.nvs-rail-more:hover{ border-color:#c3cbd6; color:var(--ink); }
.nvs-th{ width:var(--th); aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:var(--shot);
  border:1.5px solid var(--line); padding:0; transition:.14s; }
.nvs-th > img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.nvs-th:hover{ border-color:#c3cbd6; }
.nvs-th.on{ border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-bg); }
.nvs-pd-main{ height:var(--pvh); width:calc(var(--pvh) * 3 / 4); border-radius:10px; overflow:hidden; background:var(--shot); }
.nvs-pd-main > img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

.nvs-pd-info{ padding-top:2px; }
.nvs-pd-badge{ display:inline-block; background:var(--blue-bg); color:var(--blue); border-radius:5px;
  padding:.32rem .6rem; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.nvs-pd-h1{ font-family:var(--h1-font); font-size:44px; line-height:1.04; font-weight:800; letter-spacing:-.02em; margin:.8rem 0 0; }
.nvs-pd-tag{ font-size:17px; color:var(--sub); line-height:1.45; margin:.85rem 0 0; }
.nvs-pd-rule{ display:block; height:1px; background:var(--line); margin:1.5rem 0; border:0; }
.nvs-pd-col-k{ font-size:14px; color:var(--sub); }
.nvs-pd-col-k b{ color:var(--ink); font-weight:700; }
.nvs-pd-col .nvs-sws{ gap:10px; margin:.8rem 0 0; }
.nvs-pd-long{ font-size:14.5px; color:var(--sub); line-height:1.6; margin:1.5rem 0 0; text-wrap:pretty; }

.nvs-featrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:1.8rem 0 0; }
.nvs-feat{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; color:var(--hdr); }
.nvs-feat-ic{ display:inline-flex; }
.nvs-feat b{ font-size:11.5px; font-weight:600; color:var(--sub); line-height:1.3; }

.nvs-pd-cta{ width:100%; margin-top:1.9rem; background:var(--hdr); color:#fff; border:1px solid var(--hdr);
  border-radius:8px; padding:1.05rem 1.4rem; font-size:14px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:.7rem; transition:.15s; }
.nvs-pd-cta:hover{ background:#13233f; box-shadow:0 10px 26px -12px rgba(10,20,40,.55); }
.nvs-pd-cap{ display:block; text-align:center; font-size:13px; color:var(--sub); margin:.85rem 0 0; }
.nvs-pd-cta:focus-visible{ outline:3px solid #6ea2ff; outline-offset:3px; }
.nvs-pd-cta{ min-height:48px; }
.nvs-pd-col,.nvs-pd-info{ min-width:0; }
.nvs-pd-h1,.nvs-pd-tag,.nvs-pd-long{ overflow-wrap:anywhere; }
.nvs-pd-cta{ -webkit-tap-highlight-color:transparent; }
.nvs-pd-cta:disabled{ cursor:not-allowed; opacity:.55; }
@media (max-width:560px){ .nvs-pd-cta{ font-size:12px; letter-spacing:.04em; } }

/* (Navalo's two ways to buy, 19 Oct 2026, and their compact bar on phones,
   22 Oct 2026: Navalo's garment page takes the store's layout since 26 Oct
   2026, .nvs-sp at the foot of this file) */

/* ── technical details: three panels, matching the store product page ────── */
.nvs-panels{ background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0; }
.nvs-panels-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.nvs-panel{ display:flex; gap:18px; align-items:flex-start; }
.nvs-panel-img{ width:96px; height:96px; flex-shrink:0; border-radius:6px; overflow:hidden; background:#e6e9ee; }
.nvs-panel-img img{ width:100%; height:100%; object-fit:cover; }
/* "Awaiting image" (owner, 12 Oct 2026; js/navalo-shop.js techPanelsHTML): a
   fallback tile with no picture in the Imagery tab draws this plain space in
   its 96px square, and no photo is asked for. Navalo's look: the square's own
   light grey with the page's grey words. Stitcha's cream:
   css/communities-theme.css. */
.nvs-panel-img.nvs-await{ display:flex; align-items:center; justify-content:center; color:var(--sub); box-shadow:inset 0 0 0 1px #d5dae2; }
.nvs-panel-img.nvs-await > span{ font:700 10px/1.35 'DM Sans', system-ui, -apple-system, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:0 6px; }
.nvs-panel-hd{ display:flex; align-items:baseline; gap:.6rem; }
.nvs-panel-n{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--blue); }
.nvs-panel-tx b{ font-size:15.5px; font-weight:700; letter-spacing:-.005em; }
.nvs-panel-tx p{ font-size:13px; color:var(--sub); line-height:1.5; margin:.45rem 0 0; }

/* ── details + help ─────────────────────────────────────────────────────── */
.nvs-det{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.nvs-det-h{ font-family:var(--sans); font-size:26px; font-weight:600; letter-spacing:-.02em; margin-bottom:1.1rem; }
.nvs-det-tbl{ margin:0; }
.nvs-det-row{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.nvs-det-row:last-child{ border-bottom:1px solid var(--line); }
.nvs-det-row dt{ font-size:13.5px; color:var(--sub); }
.nvs-det-row dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); }

.nvs-help{ display:flex; gap:16px; background:var(--band); border:1px solid var(--line); border-radius:12px; padding:22px; }
.nvs-help-ic{ color:var(--hdr); flex-shrink:0; display:inline-flex; }
.nvs-help b{ display:block; font-size:15px; font-weight:700; }
.nvs-help p{ font-size:13px; color:var(--sub); line-height:1.5; margin:.35rem 0 .85rem; }
.nvs-help-btn{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink); }
.nvs-help-btn:hover{ color:var(--blue); }

.nvs-also{ margin-top:26px; }
.nvs-also-hd{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--sub); margin-bottom:12px; }
.nvs-also-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start; }
.nvs-also-i{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.nvs-also-img{ display:block; width:100%; aspect-ratio:3/4; border-radius:7px; overflow:hidden; background:var(--shot); margin-bottom:7px; }
.nvs-also-img img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .4s ease; }
.nvs-also-i:hover .nvs-also-img img{ transform:scale(1.05); }
/* a hover picture, only where Admin Tools > Product tiles gives this row one
   (owner, 22 Oct 2026); without it the row is exactly as before */
.nvs-also-img.nvs-also-hov{ position:relative; }
.nvs-also-img .nvs-also-back{ position:absolute; inset:0; opacity:0; transition:opacity .22s ease, transform .4s ease; pointer-events:none; }
.nvs-also-i:hover .nvs-also-back, .nvs-also-i:focus-visible .nvs-also-back{ opacity:1; }
/* BOTH lines reserved, not just clamped: a name that wraps to two lines would
   otherwise push its neighbours' baselines out and the row stops being a row.
   This is a fix, not an accident — keep the min-height with the clamp. */
.nvs-also-i b{ font-size:12px; font-weight:600; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(2 * 1.3 * 12px); }
.nvs-also-i:hover b{ color:var(--blue); }

/* ── closing CTA band (the homepage's, minus the Explore button) ─────────── */
.nvs-cta{ position:relative; background:var(--hdr); color:#fff; overflow:hidden; }
.nvs-cta-bg{ position:absolute; inset:0; }
.nvs-cta-bg img{ width:100%; height:100%; object-fit:cover; opacity:.92; object-position:center 42%; }
.nvs-cta-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--hdr) 26%,rgba(10,20,40,.55) 60%,rgba(10,20,40,.12) 100%); }
.nvs-cta-in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:30px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nvs-cta-tx h2{ font-family:var(--sans); font-size:34px; font-weight:600; letter-spacing:-.02em; }
.nvs-cta-tx p{ font-size:15px; color:rgba(255,255,255,.72); margin:.5rem 0 0; }

/* ── the foot (shared, closes the collection, product and About pages) ────
   The support address and the legal links, centred. It replaced the
   three-point trust bar on 16 Oct 2026 (js/navalo-shop.js footHTML). */
.nvs-foot{ background:var(--band); border-top:1px solid var(--line); padding:22px 20px 26px; text-align:center; }
.nvs-foot-help{ font-size:13px; color:var(--sub); line-height:1.5; margin:0; }
/* the support address (#20): a real link, and a long address breaks rather
   than pushing the page wider on a phone */
.nvs-foot-mail{ font-weight:600; color:var(--hdr); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.nvs-foot-mail:hover{ color:var(--blue); }
.nvs-foot .nvs-legal{ font-size:13px; line-height:1.5; margin:10px 0 0; opacity:.8; }
.nvs-foot .nvs-legal a{ color:inherit; }

/* ── empty / loading states ─────────────────────────────────────────────────
   A bad slug comes straight off the URL, so this is a normal outcome, not an
   error page: branded, calm, and always a way back into the collection. */
.nvs-empty{ padding:90px 0 100px; }
.nvs-empty-in{ max-width:640px; margin:0 auto; padding:0 40px; text-align:center; }
.nvs-empty-mark{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; border:1.6px solid var(--hdr); color:var(--hdr);
  font-size:15px; font-weight:800; margin-bottom:24px; }
.nvs-empty-mark:has(.nvs-brand-img){ border:none; }
.nvs-empty h1{ font-family:var(--h1-font); font-size:34px; font-weight:800; letter-spacing:-.02em; }
.nvs-empty p{ margin:.9rem 0 1.8rem; font-size:15.5px; line-height:1.6; color:var(--sub); }
.nvs-load{ display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding:120px 40px; font-size:14.5px; color:var(--sub); }
.nvs-spin{ width:17px; height:17px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--hdr);
  animation:nvsSpin .8s linear infinite; }
@keyframes nvsSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .nvs-spin{ animation-duration:2.4s; }
  .nvs-tile-media img, .nvs-card-media > img, .nvs-also-img img{ transition:none; }
  .nvs-also-img .nvs-also-back{ transition:none; }
}

/* ── narrow screens ─────────────────────────────────────────────────────────
   A DESKTOP deliverable; phones are out of scope for polish but must not be
   actively broken, so the grids collapse in the handoff's own steps. */
@media (max-width:1180px){
  .nvs-prom-in{ grid-template-columns:repeat(3,1fr); }
  .nvs-prom-i:nth-child(4){ border-left:none; padding-left:0; }
  .nvs-tiles{ grid-template-columns:repeat(3,1fr); }
  .nvs-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1080px){
  .nvs-chero-img{ display:none; }
  .nvs-chero-in > *{ max-width:none; }
  /* the info column drops UNDER the gallery rather than being squeezed — the
     hero's width is derived from the thumbnail rail and cannot shrink */
  .nvs-pd{ grid-template-columns:var(--th) auto; }
  .nvs-pd-info{ grid-column:1 / -1; }
  .nvs-det{ grid-template-columns:1fr; gap:32px; }
  .nvs-chero h1{ font-size:44px; }
  .nvs-ihero h1{ font-size:42px; }
  .nvs-tiles{ grid-template-columns:repeat(2,1fr); }
  .nvs-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .nvs-top-in,.nvs-wrap,.nvs-ihero-in,.nvs-chero-in,.nvs-prom-in,.nvs-cta-in{ padding-left:20px; padding-right:20px; }
  /* the nav collapses out and the bar tightens, or the brand lockup plus a
     nowrap CTA push the header past the viewport and the whole page scrolls
     sideways */
  .nvs-topnav{ display:none; }
  .nvs-menubtn{ display:inline-flex; }
  .nvs-top-in{ gap:1rem; }
  .nvs-brand{ font-size:13px; letter-spacing:.1em; min-width:0; }
  .nvs-topcta{ padding:.65rem 1rem; font-size:13px; }
  .nvs-cta-in{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:820px){
  .nvs-prom-in{ grid-template-columns:repeat(2,1fr); }
  .nvs-prom-i:nth-child(3){ border-left:none; padding-left:0; }
  .nvs-grid{ grid-template-columns:repeat(2,1fr); }
  .nvs-panels-row{ grid-template-columns:1fr; gap:22px; }
  .nvs-also-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  /* the CTA moves from the bar into the menu (see .nvs-menucta) */
  .nvs-topcta{ display:none; }
  .nvs-menu a.nvs-menucta{ display:flex; }
  .nvs-tiles{ grid-template-columns:1fr; }
  .nvs-prom-in{ grid-template-columns:1fr; }
  .nvs-prom-i + .nvs-prom-i{ border-left:none; padding-left:0; }
  /* the strip sits after the range here (placeProm), so the range's own
     section opens straight under the hero: a little more air than "tight" */
  .nvs-sec.tight{ padding-top:28px; }
  .nvs-featrow{ grid-template-columns:repeat(2,1fr); }
  .nvs-ihero h1,.nvs-chero h1{ font-size:34px; }
  .nvs-pd-h1{ font-size:32px; }
}

/* ── About (/about) ────────────────────────────────────────────────────────
   The hero is OPTIONAL by design. With no authored picture .has-img is absent
   and the heading sits on the pale band below — a finished look, not a broken
   one, so an owner who never uploads anything still gets a page they can show
   someone. The image variant only adds the photo, the scrim and the light ink. */
.nvs-abhero{ background:var(--sand,#f3f1ec); padding:56px 0 44px; }
.nvs-abhero-in{ width:min(1180px,92vw); margin:0 auto; position:relative; z-index:2; }
.nvs-abhero h1{ font-family:var(--h1-font); font-size:clamp(30px,4.2vw,50px); line-height:1.06;
  font-weight:800; letter-spacing:-.02em; margin:.5rem 0 0; max-width:16ch; }
.nvs-abhero-lede{ font-size:clamp(15px,1.35vw,18px); line-height:1.6; margin:.9rem 0 0;
  max-width:52ch; color:var(--ink-2,#4a5158); }

.nvs-abhero.has-img{ position:relative; padding:88px 0 76px; color:#fff; background:#0b1b33; overflow:hidden; }
.nvs-abhero.has-img .nvs-abhero-bg{ position:absolute; inset:0; }
.nvs-abhero.has-img .nvs-abhero-bg img{ width:100%; height:100%; object-fit:cover; }
/* The scrim is on the WRAPPER, not the image, so it cannot be defeated by a
   photo that fails to load — the heading stays readable either way. */
.nvs-abhero.has-img .nvs-abhero-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to right,rgba(5,10,20,.82) 0%,rgba(5,10,20,.55) 55%,rgba(5,10,20,.3) 100%); }
.nvs-abhero.has-img .nvs-abhero-lede{ color:rgba(255,255,255,.88); }

.nvs-abstory{ padding:52px 0 8px; }
.nvs-abstory-in{ width:min(760px,92vw); margin:0 auto; }
.nvs-abstory h2{ font-family:var(--sans); font-size:clamp(22px,2.4vw,30px); letter-spacing:-.015em; margin:0 0 .8rem; }
.nvs-abstory p{ font-size:15.5px; line-height:1.72; margin:0 0 1rem; color:var(--ink-2,#4a5158); }

.nvs-abvals{ padding:34px 0 56px; }
.nvs-abvals-in{ width:min(1180px,92vw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.nvs-abval b{ display:block; font-size:15.5px; letter-spacing:-.01em; margin:0 0 .35rem; }
.nvs-abval p{ font-size:13.5px; line-height:1.62; margin:0; color:var(--ink-2,#4a5158); }
/* a point's words typed with a blank line are two paragraphs (the Copy tab,
   15 Oct 2026): a gap between them, as between the story's */
.nvs-abval p + p{ margin-top:.6em; }
@media (max-width:820px){ .nvs-abvals-in{ grid-template-columns:1fr; gap:20px; } }

/* The basket drawer is isolated in navalo-direct.css. */
.nvs-address { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
/* a refusal (no size, basket cap) reads as a warning, not a status */
#nvsBuyMessage.nvs-warn { color: #7f1d1d; font-weight: 600; }
@media (max-width: 560px) {
  .nvs-pd { --th: 56px; grid-template-columns: var(--th) minmax(0, 1fr); gap: 14px; }
  .nvs-pd-main { width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .nvs-pd-info { width: 100%; }
}

/* ── How it works and the FAQs (owner, 19 Oct 2026: the mock-up) ─────────────
   Navalo's /how-it-works (how-view.html) and /faq (faq-view.html), drawn by
   js/navalo-shop.js howHTML and faqHTML. The mock-up's headings are a serif,
   Playfair Display, as on Navalo's homepage; everything else is the shop
   pages' DM Sans. Pictures that carry no words of their own fade into the
   band beside the words (a mask), so a replacement photo of any width still
   sits behind nothing. Phones stack every row. */
.nvs-topnav a.on{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:9px; }
.nvs-hw-in{ width:min(1180px,92vw); margin:0 auto; position:relative; }
.nvs-hw-kick{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#3a4655; }
.nvs-hw-hero h1, .nvs-hw-step h2, .nvs-hw-four h2, .nvs-hw-faq h2, .nvs-hw-close h2, .nvs-fq-hero h1{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif; font-weight:400; color:var(--hdr);
  letter-spacing:-.01em; text-wrap:balance; }
.nvs-hw-btn{ margin-top:1.7rem; }
.nvs-hw-n{ display:block; font-size:13px; font-weight:600; letter-spacing:.06em; color:#3a4655; }

.nvs-hw-hero{ position:relative; overflow:hidden; background:#eef3f7; min-height:440px; display:flex; align-items:center; }
.nvs-hw-hero-pic{ position:absolute; top:0; right:0; bottom:0; width:64%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 36%); mask-image:linear-gradient(to right, transparent 0, #000 36%); }
.nvs-hw-hero-pic img{ width:100%; height:100%; object-fit:cover; object-position:60% 30%; display:block; }
.nvs-hw-hero-in{ padding:72px 0; }
.nvs-hw-hero-in > *{ max-width:520px; }
#nvsRoot .nvs-hw-hero h1{ font-size:clamp(38px,4.4vw,60px); line-height:1.08; margin:.7rem 0 0; }
.nvs-hw-lede{ font-size:16.5px; line-height:1.55; color:#2a3442; margin:1rem 0 0; max-width:30em; }

.nvs-hw-steps{ background:#f8f7f3; padding:56px 0 64px; }
.nvs-hw-steps-in{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.nvs-hw-step{ display:flex; flex-direction:column; }
.nvs-hw-step-tx{ flex:1; }
#nvsRoot .nvs-hw-step h2{ font-size:clamp(26px,2.4vw,34px); line-height:1.15; margin:.4rem 0 .75rem; }
.nvs-hw-step p{ font-size:15px; line-height:1.55; color:#3a4655; margin:0 0 .4rem; max-width:30em; }
.nvs-hw-pic{ margin-top:22px; aspect-ratio:11/10; border-radius:4px; overflow:hidden; background:#e9ebee; }
.nvs-hw-pic img{ width:100%; height:100%; object-fit:cover; display:block; }

.nvs-hw-four{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:#eef2f6; }
.nvs-hw-four-tx{ padding:56px 48px 56px max(4vw, calc((100vw - 1180px) / 2)); }
#nvsRoot .nvs-hw-four h2{ font-size:clamp(28px,2.8vw,38px); line-height:1.12; margin:.4rem 0 .85rem; }
.nvs-hw-four-tx > p{ font-size:16px; line-height:1.55; color:#2a3442; margin:0; max-width:32em; }
.nvs-hw-feats{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.nvs-hw-feats li{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.nvs-hw-feat-ic{ display:inline-flex; color:var(--hdr); }
.nvs-hw-feat-t{ font-size:13px; line-height:1.35; color:var(--ink); max-width:12em; }
.nvs-hw-four-pic{ min-height:360px; }
.nvs-hw-four-pic img{ width:100%; height:100%; object-fit:cover; display:block; }

.nvs-hw-faq{ background:#f8f7f3; padding:64px 0 72px; }
.nvs-hw-faq-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
#nvsRoot .nvs-hw-faq h2{ font-size:clamp(30px,3vw,42px); line-height:1.1; margin:.55rem 0 0; }
.nvs-hw-more{ display:inline-flex; align-items:center; gap:.4rem; font-size:15px; font-weight:600; color:#2b5c9a; text-decoration:none; }
.nvs-hw-more:hover{ text-decoration:underline; text-underline-offset:4px; }
.nvs-hw-faq-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; align-items:start; margin-top:28px; }
.nvs-faq-i{ background:#fff; border:1px solid #e3e6eb; border-radius:4px; }
.nvs-faq-i summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; cursor:pointer; }
.nvs-faq-i summary::-webkit-details-marker{ display:none; }
.nvs-faq-i summary:focus-visible{ outline:3px solid #6ea2ff; outline-offset:2px; border-radius:4px; }
.nvs-faq-q{ font-size:15.5px; font-weight:500; line-height:1.4; color:var(--ink); }
.nvs-faq-pm{ position:relative; flex:none; width:16px; height:16px; }
.nvs-faq-pm::before, .nvs-faq-pm::after{ content:''; position:absolute; left:0; right:0; top:50%; height:1.6px; margin-top:-.8px;
  background:var(--hdr); border-radius:1px; transition:transform .2s ease; }
.nvs-faq-pm::after{ transform:rotate(90deg); }
.nvs-faq-i[open] .nvs-faq-pm::after{ transform:rotate(0deg); }
.nvs-faq-a{ padding:0 22px 18px; }
.nvs-faq-a p{ font-size:14.5px; line-height:1.6; color:var(--sub); margin:0; }
.nvs-faq-a p + p{ margin-top:.7rem; }

.nvs-hw-close{ position:relative; overflow:hidden; background:#f4ede4; min-height:320px; display:flex; align-items:center; }
.nvs-hw-close-pic{ position:absolute; top:0; right:0; bottom:0; width:62%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40%); mask-image:linear-gradient(to right, transparent 0, #000 40%); }
.nvs-hw-close-pic img{ width:100%; height:100%; object-fit:cover; object-position:70% 55%; display:block; }
.nvs-hw-close-in{ padding:56px 0; }
.nvs-hw-close-in > *{ max-width:520px; }
#nvsRoot .nvs-hw-close h2{ font-size:clamp(34px,3.6vw,50px); line-height:1.08; margin:.6rem 0 0; }
.nvs-hw-close-p{ font-size:16px; line-height:1.55; color:#2a3442; margin:.8rem 0 0; }

.nvs-fq-hero{ background:#f8f7f3; padding:40px 0 28px; }
.nvs-fq-in{ max-width:820px; }
#nvsRoot .nvs-fq-hero h1{ font-size:clamp(34px,4vw,52px); line-height:1.08; margin:1rem 0 0; }
.nvs-fq-lede{ font-size:16.5px; line-height:1.55; color:#2a3442; margin:.8rem 0 0; }
.nvs-fq-list{ background:#f8f7f3; padding:8px 0 72px; }
.nvs-fq-list .nvs-fq-in{ display:flex; flex-direction:column; gap:12px; }

@media (max-width:900px){
  .nvs-hw-hero-pic{ width:58%; }
  .nvs-hw-hero-in > *, .nvs-hw-close-in > *{ max-width:46%; }
  .nvs-hw-steps-in{ grid-template-columns:minmax(0,1fr); max-width:560px; gap:44px; }
  .nvs-hw-four{ grid-template-columns:minmax(0,1fr); }
  .nvs-hw-four-tx{ padding:48px 4vw; }
  .nvs-hw-four-pic{ min-height:0; aspect-ratio:2/1; }
}
@media (max-width:760px){
  .nvs-hw-faq-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .nvs-hw-hero, .nvs-hw-close{ display:block; min-height:0; }
  .nvs-hw-hero-pic, .nvs-hw-close-pic{ position:relative; width:100%; aspect-ratio:16/10; -webkit-mask-image:none; mask-image:none; }
  .nvs-hw-hero-in, .nvs-hw-close-in{ padding:28px 0 36px; }
  .nvs-hw-hero-in > *, .nvs-hw-close-in > *{ max-width:none; }
  #nvsRoot .nvs-hw-hero h1{ font-size:34px; }
  .nvs-hw-steps{ padding:40px 0 48px; }
  .nvs-hw-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
  .nvs-hw-four-pic{ aspect-ratio:16/10; }
  .nvs-hw-faq{ padding:44px 0 52px; }
  #nvsRoot .nvs-hw-close h2{ font-size:32px; }
  .nvs-faq-i summary{ padding:16px 18px; }
  .nvs-faq-a{ padding:0 18px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .nvs-faq-pm::before, .nvs-faq-pm::after{ transition:none; }
}

/* ── NAVALO'S HEADER AND FOOTER (owner, 20 Oct 2026) ─────────────────────────
   "Please can we fix the header navigation bar layout across the website":
   the HOMEPAGE's bar and footer (css/navalo-home-v2.css .nvh2-top, .nvh2-foot,
   and the phone .nvm2-hd, .nvm2-foot), drawn by js/navalo-shop.js navTopHTML
   and navFootHTML on Navalo only. Same values as that sheet: white bar 76px
   tall, the navy lockup 40px high, the three links 14px/500 with 40px between,
   the navy button, the bag; the ☰ and its panel from 1000px down; on phones a
   60px bar with the ☰ left, the lockup centred and the bag right. Stitcha's
   bar and foot (.nvs-top, .nvs-foot above) are untouched. */
/* (no font-family of their own: the page's DM Sans, so the owner's Fonts and
   sizes choices reach these links as they reach every other text here) */
/* (and Navalo's garment page in the store's layout, .nvs-sp, for its
   NAVALO COLLECTION label in the site's navy: owner, 29 Oct 2026) */
.nvs-top2, .nvs-foot2, .nvs-sp{ --nv-ink:#14202E; --nv-navy:#0E2238; --nv-line:#E6E1D8; --nv-sand:#EFEBE3;
  --nv-pad:clamp(24px,4.45vw,64px); }
.nvs-top2{ background:#fff; color:var(--nv-ink); border-bottom:1px solid var(--nv-line); }
/* the bar's edges are the page's (owner, 27 Oct 2026: "everything is in line
   with the padding"): the width and side padding of .nvs-wrap and the hero,
   so the roundel's left edge is the breadcrumb's and the heading's */
.nvs-top2 .nvs-top-in{ max-width:var(--maxw); height:76px; padding:0 40px; justify-content:space-between; gap:24px; }
/* the builder's lockup (owner, 27 Oct 2026: "change it to the image"; as
   css/skins/yachting/skin.css .dk-brand): the octopus roundel painted in the
   ink, then NAVALO in Libre Baskerville, spaced .14em; sized as the owner's
   picture (the word 2.7 times the roundel's width, the gap 0.4 of it) */
/* (the font is the logo's, never the Fonts and sizes choices': !important, as skin.css's .dk-brand) */
.nvs-logo2{ display:flex; align-items:center; flex:none; gap:16px; color:var(--nv-navy); text-decoration:none;
  font-family:'Libre Baskerville', Georgia, serif !important; font-size:20px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; line-height:1; }
.nvs-logo2-w{ font-family:'Libre Baskerville', Georgia, serif !important; }
.nvs-logo2:hover{ color:var(--nv-navy); }
.nvs-logo2 .nvs-brand-mark{ width:40px; height:40px; }
.nvs-logo2-w{ margin-right:-.14em; white-space:nowrap; }
.nvs-nav2{ display:flex; gap:40px; font-size:14px; font-weight:500; }
.nvs-nav2 a{ color:var(--nv-ink); text-decoration:none; white-space:nowrap; }
.nvs-nav2 a:hover, .nvs-nav2 a.on{ color:var(--nv-ink); text-decoration:underline; text-underline-offset:5px; }
.nvs-act2{ display:flex; align-items:center; gap:22px; flex:0 1 auto; min-width:0; }
.nvs-cta2{ display:inline-flex; align-items:center; gap:10px; background:var(--nv-navy); color:#fff; font-size:14px; font-weight:600;
  line-height:1.2; padding:12px 20px; border-radius:4px; text-decoration:none; text-align:center; }
.nvs-cta2:hover{ background:#1A3350; color:#fff; }
.nvs-bag2{ position:relative; display:flex; color:var(--nv-ink); }
.nvs-bag2:hover{ color:var(--nv-ink); }
.nvs-bag2-n{ position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--nv-navy);
  color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; }
/* the garment pages' basket button (js/navalo-direct.js), dressed as the bag */
.nvs-top2 .nvs-basket-toggle{ position:relative; min-width:0; min-height:0; padding:0; color:var(--nv-ink); }
.nvs-top2 .nvs-basket-toggle svg{ width:21px; height:21px; }
.nvs-top2 #nvsBasketCount{ position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; border-radius:9px; background:var(--nv-navy);
  color:#fff; font-size:10.5px; line-height:17px; }
.nvs-top2 #nvsBasketCount[hidden]{ display:none; }
.nvs-top2 :is(a,button):focus-visible{ outline:2px solid #2F5F98; outline-offset:3px; }
.nvs-top2 .nvs-menubtn{ display:none; align-items:center; justify-content:center; width:40px; height:40px; margin:0 -8px 0 -10px;
  background:none; border:0; padding:0; color:var(--nv-ink); }
.nvs-top2 .nvs-menu{ background:#fff; border-bottom:1px solid var(--nv-line); padding:6px var(--nv-pad) 14px;
  box-shadow:0 18px 30px -22px rgba(14,34,56,.45); }
.nvs-top2 .nvs-menu a{ display:block; min-height:0; padding:13px 0; font-size:15px; font-weight:500; color:var(--nv-ink);
  border-bottom:1px solid var(--nv-sand); text-decoration:none; }
.nvs-top2 .nvs-menu a:hover{ color:var(--nv-ink); text-decoration:underline; text-underline-offset:5px; }
.nvs-top2 .nvs-menu a.nvs-menucta{ display:none; }
@media (min-width:1001px) and (max-width:1240px){ .nvs-logo2{ font-size:17px; gap:14px; } .nvs-logo2 .nvs-brand-mark{ width:34px; height:34px; } }
/* The homepage's bar is 6px taller than the old one; the collection page's
   heading gives those 6px back, so the handoff's budget holds: at 1440x900 the
   section header and a full row of six garments are on screen
   (tests/explore-redesign.test.cjs) */
.nvs-top2 ~ .nvs-chero .nvs-chero-in{ padding-top:18px; }
@media (max-width:1000px){
  .nvs-top2 .nvs-nav2{ display:none; }
  .nvs-top2 .nvs-menubtn{ display:flex; }
}
/* the panel opens up to 1000px here, where the homepage's does */
@media (min-width:901px) and (max-width:1000px){ .nvs-top2 .nvs-menu:not([hidden]){ display:flex !important; } }
@media (max-width:900px){ .nvs-top2 .nvs-top-in{ padding:0 20px; gap:24px; } }
@media (max-width:560px){
  .nvs-top2 .nvs-top-in{ display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; height:60px; padding:0 8px; gap:0; }
  .nvs-top2 .nvs-menubtn{ order:-1; width:44px; height:44px; margin:0; }
  .nvs-top2 .nvs-logo2{ justify-self:center; }
  .nvs-top2 .nvs-logo2{ font-size:14px; gap:11px; }
  .nvs-top2 .nvs-logo2 .nvs-brand-mark{ width:28px; height:28px; }
  .nvs-top2 .nvs-act2{ justify-self:end; gap:0; }
  .nvs-top2 .nvs-cta2{ display:none; }
  .nvs-top2 :is(.nvs-bag2, .nvs-basket-toggle){ width:44px; height:44px; align-items:center; justify-content:center; }
  .nvs-top2 :is(.nvs-bag2-n, #nvsBasketCount){ top:5px; right:3px; min-width:16px; height:16px; font-size:10px; line-height:16px; }
  .nvs-top2 .nvs-menu{ padding:4px 20px 12px; }
  .nvs-top2 .nvs-menu a{ display:flex; align-items:center; min-height:48px; padding:0; font-size:16px; }
  .nvs-top2 .nvs-menu a.nvs-menucta{ display:flex; justify-content:center; gap:10px; margin-top:14px; border:0; border-radius:4px;
    background:var(--nv-navy); color:#fff; font-weight:600; font-size:15px; }
  .nvs-top2 .nvs-menu a.nvs-menucta:hover{ background:#1A3350; color:#fff; text-decoration:none; }
}

.nvs-foot2{ background:var(--nv-navy); color:#C9D1DB; font-size:14px; }
.nvs-foot2-in{ max-width:1440px; margin:0 auto; padding:64px var(--nv-pad) 40px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.nvs-foot2-brand{ display:flex; flex-direction:column; gap:16px; }
#nvsRoot .nvs-foot2-brand img{ height:28px; width:auto; align-self:flex-start; }
.nvs-foot2-brand span{ line-height:1.6; max-width:240px; }
.nvs-foot2 nav{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.nvs-foot2 nav b{ color:#fff; font-weight:600; letter-spacing:.08em; font-size:12px; text-transform:uppercase; }
.nvs-foot2 nav a{ color:#C9D1DB; font-size:14px; text-decoration:none; }
.nvs-foot2 nav a:hover{ color:#fff; }
.nvs-foot2 nav a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.nvs-foot2 nav.nvs-foot2-ph{ display:none; }
/* the footer's "Create your crew store", "Create a store" on phones (js/navalo-shop.js navCreateTx) */
.nvs-f2-m{ display:none; }
@media (max-width:560px){ .nvs-f2-d{ display:none; } .nvs-f2-m{ display:inline; } }
.nvs-foot2-copy{ max-width:1440px; margin:0 auto; padding:22px var(--nv-pad) 30px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:#9AA6B4;
  display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; }
.nvs-foot2 .nvs-foot-mail{ color:#C9D1DB; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.nvs-foot2 .nvs-foot-mail:hover{ color:#fff; }
@media (min-width:561px) and (max-width:1000px){ .nvs-foot2-in{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .nvs-foot2-in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; padding:40px 20px 26px; }
  .nvs-foot2-brand{ grid-column:1 / -1; }
  #nvsRoot .nvs-foot2-brand img{ height:24px; }
  .nvs-foot2-brand span{ display:none; }
  .nvs-foot2 nav.nvs-foot2-ph{ display:flex; }
  .nvs-foot2 nav a.nvs-foot2-dk{ display:none; }
  .nvs-foot2-copy{ margin:0 20px; padding:18px 0 28px; flex-direction:column; }
}

/* Navalo's feature tiles, when the Copy tab holds its own (one to six,
   js/navalo-shop.js promisesHTML data-n): one row, shared equally. Narrower
   screens keep the three / two / one a row above. */
@media (min-width:1181px){
  .nvs-prom-in[data-n="1"]{ grid-template-columns:1fr; }
  .nvs-prom-in[data-n="2"]{ grid-template-columns:repeat(2,1fr); }
  .nvs-prom-in[data-n="3"]{ grid-template-columns:repeat(3,1fr); }
  .nvs-prom-in[data-n="4"]{ grid-template-columns:repeat(4,1fr); }
  .nvs-prom-in[data-n="6"]{ grid-template-columns:repeat(6,1fr); }
}

/* ── NAVALO'S ABOUT PAGE (owner, 20 Oct 2026: the mock-up) ──────────────────
   js/navalo-shop.js navAboutHTML. A pale band with the heading, the story
   centred on white, the crew photo across the page, three points between
   hairlines, the navy closing band with contour lines. Headings in Playfair
   Display at 400, as Navalo's homepage; the rest the page's DM Sans.
   "Built by sailors, for crews." and "Where it started." (owner, 30 Oct 2026:
   "change ... to the homepage font, but again, not bold ... 400, regular"):
   Playfair Display As now (SiteFonts.AS_NOW 'navabout'), regular, with the
   homepage's letter spacing (its main heading -0.01em, its section headings
   none) and navy, each at its own size; a Heading font chosen in the Copy
   tab draws them too (the alias first, then Playfair Display: N0). */
.nva-in{ width:min(1180px,92vw); margin:0 auto; }
.nva-hero{ background:#f6f5f2; padding:30px 0 62px; }
.nva-hero .nvs-crumb{ margin:0 0 34px; }
#nvsRoot .nva-hero h1{ font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:400; color:#0E2238;
  font-size:clamp(38px,4.6vw,62px); line-height:1.06; letter-spacing:-.01em; margin:0; max-width:820px; text-wrap:balance; }
.nva-lede{ font-size:clamp(16px,1.42vw,19px); line-height:1.6; color:#3a4655; margin:22px 0 0; max-width:680px; }
.nva-story{ background:#fff; padding:52px 0 54px; text-align:center; }
.nva-kick{ font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#5a6f8a; }
#nvsRoot .nva-story h2{ font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:400; color:#0E2238;
  font-size:clamp(34px,3.7vw,50px); line-height:1.08; letter-spacing:normal; margin:16px 0 26px; }
.nva-story p{ font-size:clamp(15.5px,1.3vw,18px); line-height:1.65; color:#3a4655; margin:0 auto 18px; max-width:640px; }
.nva-story p:last-child{ margin-bottom:0; }
.nva-photo{ width:100%; aspect-ratio:1024 / 296; overflow:hidden; background:#dfe3e8; }
#nvsRoot .nva-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.nva-pts{ background:#fff; padding:34px 0 38px; }
.nva-pts-in{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.nva-pt{ padding:6px 34px 6px; }
.nva-pt:first-child{ padding-left:0; }
.nva-pt + .nva-pt{ border-left:1px solid #e2e5ea; }
.nva-pt-ic{ display:inline-flex; color:#0E2238; }
#nvsRoot .nva-pt h3{ font-weight:600; color:#0E2238;
  font-size:20px; line-height:1.25; margin:14px 0 8px; }
.nva-pt p{ font-size:14px; line-height:1.6; color:#5a6472; margin:0; max-width:310px; }
.nva-close{ position:relative; overflow:hidden; background:#0E2238; padding:30px 0 38px; text-align:center; }
.nva-close::before, .nva-close::after{ content:''; position:absolute; top:0; bottom:0; width:42%; pointer-events:none;
  background:repeating-radial-gradient(ellipse at 50% 60%, transparent 0 17px, rgba(255,255,255,.07) 17px 18px); }
.nva-close::before{ left:-12%; -webkit-mask-image:linear-gradient(to right,#000 30%,transparent); mask-image:linear-gradient(to right,#000 30%,transparent); }
.nva-close::after{ right:-12%; -webkit-mask-image:linear-gradient(to left,#000 30%,transparent); mask-image:linear-gradient(to left,#000 30%,transparent); }
.nva-close .nva-in{ position:relative; z-index:1; }
#nvsRoot .nva-close h2{ font-weight:700; color:#fff;
  font-size:clamp(30px,3.3vw,44px); line-height:1.1; margin:0 0 20px; }
.nva-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#0E2238; font-size:14px; font-weight:600;
  padding:13px 36px; border-radius:4px; text-decoration:none; }
.nva-btn:hover{ background:#EFEBE3; color:#0E2238; }
.nva-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (max-width:760px){
  .nva-pts-in{ grid-template-columns:minmax(0,1fr); }
  .nva-pt, .nva-pt:first-child{ padding:20px 0; }
  .nva-pt + .nva-pt{ border-left:none; border-top:1px solid #e2e5ea; }
  .nva-photo{ aspect-ratio:16 / 10; }
  .nva-hero{ padding:22px 0 40px; }
  .nva-story{ padding:40px 0 42px; }
}

/* ── NAVALO'S COLLECTION PAGES IN THE HOMEPAGE'S TYPE (owner, 20 Oct 2026:
   "update the fonts on the all products page to match the home page") ──────
   With Playfair Display chosen for the headings (Copy → Fonts and sizes,
   html[data-sf-h1|h2]), they take the homepage's weight (400) and navy, not
   the DM Sans weights they were drawn in; the garments' names take the
   homepage cards' 600 and ink. Navalo only (.nvs-top2 is its bar); every
   other font choice draws exactly as before. */
#nvsRoot .nvs-top2 ~ :is(.nvs-ihero, .nvs-chero) h1, #nvsRoot .nvs-top2 ~ .nvs-sec .nvs-sec-hd h2{ color:#0E2238; }
#nvsRoot .nvs-top2 ~ .nvs-ihero h1{ color:#fff; }
html[data-sf-h1="playfair-display"] #nvsRoot .nvs-top2 ~ :is(.nvs-ihero, .nvs-chero) h1,
html[data-sf-h1="playfair-display"] #nvsRoot .nvs-top2 ~ .nvs-wrap .nvs-pd-h1{ font-weight:400; letter-spacing:-.01em; }
/* the About page's headings take the Fonts setting like every other page (the
   owner's is Playfair Display); with it, the mock-up's light weight */
html[data-sf-h1="playfair-display"] #nvsRoot .nva-hero h1,
html[data-sf-h2="playfair-display"] #nvsRoot :is(.nva-story,.nva-close) h2{ font-weight:400; }
html[data-sf-h2="playfair-display"] #nvsRoot .nvs-top2 ~ .nvs-sec .nvs-sec-hd h2{ font-weight:400; letter-spacing:-.005em; }
#nvsRoot .nvs-top2 ~ .nvs-sec .nvs-card-nm{ font-weight:600; color:#14202E; }

/* ═══ NAVALO'S GARMENT PAGE IN THE STORE'S LAYOUT (owner, 26 Oct 2026) ═══════
   js/navalo-shop.js spPageHTML draws the user-built store's product page
   (js/store-page.js) with the store's own classes; these are its styles,
   copied from css/skins/yachting/desktop-store.css (.pp.dkp .dpv-*, the
   computer page, 1024px and up) and store.html (.pp-*, phones and tablets),
   under .nvs-sp-d / .nvs-sp-m so nothing else here or on the store moves.
   Keep the two in step: a change to the store's page belongs here too. */
.nvs-sp [hidden]{ display:none !important; }
.nvs-sp{ --hdr:#0a1428; --navy:#0a1428; --ink:#101828; --sub:#5d6b7e; --faint:#8b95a3;
  --blue:#2f6fed; --green:#17a34a; --green-bg:#e8f6ee; --gold:#e8a93a; --maxw:min(96vw,1600px); color:var(--ink); }
.nvs-sp a{ text-decoration:none; color:inherit; }
.nvs-sp-crumb .nvs-crumb{ margin:0; }
.nvs-buy-msg{ font-size:13px; line-height:1.45; color:var(--sub); margin:.7rem 0 0; }
.nvs-buy-msg:empty{ display:none; }

/* ── computers (spDeskBodyHTML) ── */
.nvs-sp-d{ --line:#e4e7ec; --line2:#eef0f3; --blue-bg:#eef3fd; }
.nvs-sp-d .dpv{ background:#faf9f7; color:var(--ink); }
.nvs-sp-d .nvs-sp-crumb{ max-width:var(--maxw); margin:0 auto; padding:22px 40px 0; }
.nvs-sp-d .dpv-top{ max-width:var(--maxw); margin:0 auto; padding:22px 40px 12px; display:grid; grid-template-columns:minmax(510px,1fr) minmax(0,1fr); gap:46px; align-items:start; }
.nvs-sp-d .dpv-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nvs-sp-d .dpv-cell{ position:relative; margin:0; aspect-ratio:3/4; background:#edeef1; border-radius:4px; overflow:hidden; }
.nvs-sp-d .dpv-cell img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:center top; display:block; }
.nvs-sp-d .dpv-info{ min-width:0; padding-top:2px; position:sticky; top:96px; align-self:start; }
.nvs-sp-d .dpv-coll-tag{ display:inline-block; background:var(--blue-bg); color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:.4rem .65rem; border-radius:7px; }
/* the label in the brand's navy (owner, 29 Oct 2026: "color match the Navalo
   collection label with the brand's navy ... the same navy we use in the rest
   of the site"): --nv-navy, the header's and footer's, on a pale tint of it */
.nvs-sp-d .dpv-coll-tag{ background:color-mix(in srgb, var(--nv-navy) 9%, #fff); color:var(--nv-navy); }
.nvs-sp-d .dpv-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; margin-top:.7rem; }
.nvs-sp-d .dpv-title-row .dpv-title{ min-width:0; }
.nvs-sp-d .dpv-title{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:33px; font-weight:800; letter-spacing:-.018em; line-height:1.1; text-transform:uppercase; margin:0; color:var(--ink); }
.nvs-sp-d .dpv-price{ font-size:28px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin-top:.6rem; }
.nvs-sp-d .dpv-price-dec{ margin-left:-.07em; }
.nvs-sp-d .dpv-desc{ font-size:14.5px; line-height:1.55; color:var(--sub); margin:.85rem 0 0; max-width:46ch; }
.nvs-sp-d .dpv-feats{ list-style:none; margin:.95rem 0 0; padding:0; max-width:46ch; display:grid; grid-template-columns:1fr 1fr; gap:.45rem .7rem; }
.nvs-sp-d .dpv-feats li{ display:flex; align-items:flex-start; gap:.4rem; font-size:13px; line-height:1.4; color:var(--ink); }
.nvs-sp-d .dpv-feats li svg{ flex:none; margin-top:.15rem; color:var(--accent, #15803d); }
.nvs-sp-d .dpv-sel-lbl{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin:1.5rem 0 .7rem; }
.nvs-sp-d .dpv-sel-lbl b{ color:var(--sub); font-weight:700; }
.nvs-sp-d .dpv-size-lbl{ display:flex; align-items:center; justify-content:space-between; }
.nvs-sp-d .dpv-sizeguide{ background:none; border:none; padding:0; font-size:12.5px; font-weight:700; color:var(--blue); text-transform:none; letter-spacing:0; cursor:pointer; }
.nvs-sp-d .dpv-sizeguide:hover{ text-decoration:underline; }
.nvs-sp-d .dpv-cols{ display:flex; flex-wrap:wrap; gap:11px; max-width:100%; }
.nvs-sp-d .dpv-col{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; padding:0; background:none; border:none; display:grid; place-items:center; cursor:pointer; }
.nvs-sp-d .dpv-col span{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.14); transition:transform .12s; }
.nvs-sp-d .dpv-col.on{ box-shadow:0 0 0 2px var(--ink); }
.nvs-sp-d .dpv-col:hover span{ transform:scale(1.06); }
.nvs-sp-d .dpv-sizes{ display:flex; flex-wrap:wrap; gap:9px; }
.nvs-sp-d .dpv-size{ min-width:52px; height:46px; padding:0 12px; border:1.5px solid var(--line); border-radius:6px; background:#fff; font-family:inherit; font-size:14.5px; font-weight:700; color:var(--ink); cursor:pointer; transition:.12s; }
.nvs-sp-d .dpv-size:hover{ border-color:#c4cbd5; }
.nvs-sp-d .dpv-size.on{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; }
.nvs-sp-d .dpv-sizemsg{ display:flex; align-items:center; gap:.5rem; font-size:13px; color:var(--green); font-weight:600; margin:.85rem 0 0; }
.nvs-sp-d .dpv-gtick{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; flex-shrink:0; }
.nvs-sp-d .dpv-add, .nvs-sp-d .dpv-build{ width:100%; margin-top:1.5rem; height:56px; border:none; border-radius:6px; background:var(--navy); color:#fff; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; justify-content:center; gap:.6rem; cursor:pointer; transition:.15s; }
.nvs-sp-d .dpv-build{ margin-top:.7rem; }
.nvs-sp-d .dpv-add:hover, .nvs-sp-d .dpv-build:hover{ background:#16243d; transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(10,20,40,.6); }
.nvs-sp-d .dpv-add.off, .nvs-sp-d .dpv-build.off{ background:#c0c6cf; cursor:default; }
.nvs-sp-d .dpv-add.off:hover, .nvs-sp-d .dpv-build.off:hover{ transform:none; box-shadow:none; background:#c0c6cf; }
.nvs-sp-d .dpv-custom{ width:100%; margin-top:.7rem; height:52px; border:1.5px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font-family:inherit; font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:.55rem; cursor:pointer; transition:.15s; }
.nvs-sp-d .dpv-custom:hover{ border-color:#c4cbd5; background:#fafbfc; }
.nvs-sp-d .dpv-custom.on{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; }
.nvs-sp-d .dpv-cust-ic{ display:inline-flex; }
.nvs-sp-d .dpv-perso{ margin-top:.7rem; border:1.5px solid var(--line); border-radius:6px; padding:14px 16px; background:#fff; display:flex; flex-direction:column; gap:.4rem; }
.nvs-sp-d .dpv-perso label{ font-size:12px; font-weight:700; color:var(--ink); }
.nvs-sp-d .dpv-perso input{ font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:.05em; padding:11px 13px; border:1.5px solid var(--line); border-radius:5px; color:var(--ink); }
.nvs-sp-d .dpv-perso input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }
.nvs-sp-d .dpv-perso-hint{ font-size:11.5px; color:var(--faint); }
.nvs-sp-d .dpv-accs{ margin-top:1.6rem; border-top:1px solid var(--line); }
.nvs-sp-d .dpv-acc{ border-bottom:1px solid var(--line); }
.nvs-sp-d .dpv-acc-hd{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; width:100%; background:none; border:none; padding:1.05rem .1rem; cursor:pointer; font-family:inherit; text-align:left; }
.nvs-sp-d .dpv-acc-hd b{ font-size:14.5px; font-weight:800; color:var(--ink); }
.nvs-sp-d .dpv-acc-sign{ position:relative; width:12px; height:12px; flex:none; color:var(--sub); }
.nvs-sp-d .dpv-acc-sign::before, .nvs-sp-d .dpv-acc-sign::after{ content:""; position:absolute; background:currentColor; inset:0; margin:auto; }
.nvs-sp-d .dpv-acc-sign::before{ width:12px; height:1.6px; }
.nvs-sp-d .dpv-acc-sign::after{ width:1.6px; height:12px; transition:transform .18s; }
.nvs-sp-d .dpv-acc.open .dpv-acc-sign::after{ transform:scaleY(0); }
.nvs-sp-d .dpv-acc-body{ display:none; padding:0 .1rem 1.2rem; }
.nvs-sp-d .dpv-acc.open .dpv-acc-body{ display:block; }
.nvs-sp-d .sp-acc-intro{ font-size:13px; color:var(--sub); line-height:1.6; margin:0 0 .8rem; }
.nvs-sp-d .sp-acc-cols{ display:flex; gap:1.2rem; align-items:flex-start; }
.nvs-sp-d .sp-acc-bul{ flex:1; margin:0; padding:0; list-style:none; columns:2; column-gap:2rem; }
.nvs-sp-d .sp-acc-bul li{ font-size:13px; color:var(--sub); line-height:1.55; padding:.16rem 0 .16rem 1rem; position:relative; break-inside:avoid; }
.nvs-sp-d .sp-acc-bul li::before{ content:"•"; position:absolute; left:.2rem; }
.nvs-sp-d .sp-acc-fig{ flex:0 0 190px; margin:0; }
.nvs-sp-d .sp-acc-fig img{ width:100%; border-radius:10px; display:block; }
.nvs-sp-d .sp-acc-fig figcaption{ font-size:11px; color:var(--sub); margin-top:.4rem; }
.nvs-sp-d .dpv-tech{ max-width:var(--maxw); margin:0 auto; padding:30px 40px 8px; }
.nvs-sp-d .dpv-h2{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:19px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin:0 0 26px; }
.nvs-sp-d .dpv-tech-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.nvs-sp-d .dpv-tech-card{ background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.nvs-sp-d .dpv-tech-img{ aspect-ratio:16/9; background:#0f1c30; overflow:hidden; }
.nvs-sp-d .dpv-tech-img img{ width:100%; height:100%; max-width:none; object-fit:cover; display:block; }
.nvs-sp-d .dpv-tech-foot{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
.nvs-sp-d .dpv-tech-tx{ flex:1; min-width:0; }
.nvs-sp-d .dpv-tech-head{ display:flex; align-items:center; gap:.5rem; }
.nvs-sp-d .dpv-tech-n, .nvs-sp-d .dpv-tech-head b{ font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.nvs-sp-d .dpv-tech-tx p{ font-size:13px; color:var(--sub); line-height:1.5; margin:.4rem 0 0; }
.nvs-sp-d .dpv-tech-arrow{ color:var(--ink); flex-shrink:0; display:inline-flex; }
.nvs-sp-d .sp-await{ display:flex; align-items:center; justify-content:center; color:#c9d3e0; }
.nvs-sp-d .sp-await > span{ font-size:11px; font-weight:700; line-height:1.35; letter-spacing:.12em; text-transform:uppercase; text-align:center; padding:0 10px; }
/* the collection banner (js/navalo-shop.js spBannerHTML) */
.nvs-sp-d .dpv-cbanner{ position:relative; max-width:var(--maxw); margin:24px auto 0; padding:0 40px; }
.nvs-sp-d .dpv-cbanner-bg{ position:absolute; inset:0 40px; width:calc(100% - 80px); max-width:none; height:100%; object-fit:cover; object-position:center 40%; border-radius:5px; }
.nvs-sp-d .dpv-cbanner-bg.sp-await{ display:flex; align-items:center; justify-content:flex-end; padding-right:56px; background:#0f1c30; color:rgba(255,255,255,.78); }
.nvs-sp-d .dpv-cbanner-in{ position:relative; border-radius:5px; padding:46px 52px; min-height:236px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; color:#fff; overflow:hidden; background:linear-gradient(90deg,rgba(8,16,30,.86) 28%,rgba(8,16,30,.42) 58%,rgba(8,16,30,.05) 80%); }
.nvs-sp-d .dpv-cbanner h2{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:33px; font-weight:800; letter-spacing:-.01em; line-height:1.08; text-transform:uppercase; margin:0; color:#fff; }
.nvs-sp-d .dpv-cbanner p{ font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.5; margin:.9rem 0 1.5rem; max-width:340px; }
.nvs-sp-d .dpv-cbanner-btn{ display:inline-block; background:#fff; color:var(--navy); border:none; border-radius:5px; padding:.85rem 1.5rem; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.15s; }
.nvs-sp-d .dpv-cbanner-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(0,0,0,.5); }
/* the bottom row: the sample reviews beside More in, as the store's */
.nvs-sp-d .dpv-bottom{ max-width:var(--maxw); margin:0 auto; padding:40px 40px 70px; display:grid; grid-template-columns:minmax(300px,.82fr) 1.45fr; gap:44px; align-items:start; }
.nvs-sp-d .dpv-bottom > :only-child{ grid-column:1 / -1; }
/* Complete your kit, then Recently viewed under it (29 Oct 2026) */
.nvs-sp-d .dpv-bottom + .dpv-bottom{ padding-top:0; }
.nvs-sp-d .pp-stars{ color:var(--gold); display:inline-flex; gap:1px; }
.nvs-sp-d .dpv-rev-sum{ display:flex; align-items:center; gap:.6rem; margin:.9rem 0 1.2rem; color:var(--gold); }
.nvs-sp-d .dpv-rev-note{ font-size:13px; color:var(--sub); }
.nvs-sp-d .dpv-rev-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 22px 18px; }
.nvs-sp-d .dpv-rev-body{ font-size:14.5px; color:var(--ink); line-height:1.6; margin:.7rem 0 1.1rem; }
.nvs-sp-d .dpv-rev-foot{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.nvs-sp-d .dpv-rev-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.nvs-sp-d .dpv-rev-nav{ position:absolute; top:18px; right:20px; display:flex; gap:8px; }
.nvs-sp-d .dpv-rev-nav button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:.15s; padding:0; }
.nvs-sp-d .dpv-rev-nav button svg{ width:16px; height:16px; }
.nvs-sp-d .dpv-rev-nav button:hover{ border-color:#c4cbd5; background:#f7f8fa; }
.nvs-sp-d .dpv-h3{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0; }
.nvs-sp-d .dpv-cys-hd{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.1rem; }
.nvs-sp-d .dpv-link{ font-size:13.5px; font-weight:700; color:var(--blue); }
.nvs-sp-d .dpv-link:hover{ text-decoration:underline; }
.nvs-sp-d .dpv-cys-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.nvs-sp-d .dpv-mini{ display:block; text-align:left; cursor:pointer; }
.nvs-sp-d .dpv-mini-img{ position:relative; aspect-ratio:3/4; background:#edeef1; border-radius:4px; overflow:hidden; }
.nvs-sp-d .dpv-mini-img img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:center top; transition:transform .4s; display:block; }
.nvs-sp-d .dpv-mini:hover .dpv-mini-img img{ transform:scale(1.05); }
.nvs-sp-d .dpv-mini-img img.sp-tile-hov{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease, transform .4s; }
.nvs-sp-d .dpv-mini:hover .dpv-mini-img img.sp-tile-hov, .nvs-sp-d .dpv-mini:focus-visible .dpv-mini-img img.sp-tile-hov{ opacity:1; }
.nvs-sp-d .dpv-mini-tx{ padding:.7rem .1rem 0; }
.nvs-sp-d .dpv-mini-tx b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.2; }
.nvs-sp-d .dpv-mini-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; font-size:11.5px; color:var(--sub); line-height:1.4; margin:.25rem 0 .3rem; }
.nvs-sp-d .dpv-mini-tx span{ font-size:13px; font-weight:700; color:var(--ink); }
@media (max-width:1140px){
  .nvs-sp-d .dpv-bottom{ grid-template-columns:1fr; gap:34px; }
  .nvs-sp-d .dpv-top{ grid-template-columns:1fr; gap:30px; }
  .nvs-sp-d .dpv-info{ position:static; }
  .nvs-sp-d .dpv-gallery{ max-width:480px; }
}
@media (prefers-reduced-motion:reduce){
  .nvs-sp-d .dpv-add, .nvs-sp-d .dpv-build, .nvs-sp-d .dpv-mini-img img, .nvs-sp-d .dpv-col span{ transition:none; }
}

/* ── phones and tablets (spPhoneBodyHTML) ── */
.nvs-sp-m{ --bg:#f6f7f9; --line:#e6e8ee; background:var(--bg); }
.nvs-sp-m .nvs-sp-crumb{ padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; }
.nvs-sp-m .pp-hero{ position:relative; background:#eef0f3; height:430px; overflow:hidden; }
.nvs-sp-m .pp-hero > img{ width:100%; height:100%; max-width:none; display:block; object-fit:cover; object-position:center 12%; }
.nvs-sp-m .pp-hero-chev{ position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:34px; height:44px; border:none; background:none; color:var(--hdr); display:flex; align-items:center; justify-content:center; padding:0; filter:drop-shadow(0 1px 2px rgba(255,255,255,.7)); }
.nvs-sp-m .pp-hero-chev.l{ left:4px; } .nvs-sp-m .pp-hero-chev.r{ right:4px; }
.nvs-sp-m .pp-hero-dots{ position:absolute; bottom:12px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:6px; }
.nvs-sp-m .pp-dot{ width:6px; height:6px; border-radius:50%; border:none; background:rgba(10,20,40,.25); padding:0; }
.nvs-sp-m .pp-dot.on{ background:var(--hdr); width:16px; border-radius:3px; }
.nvs-sp-m .pp-info{ background:#fff; padding:1.1rem 1.15rem 1.4rem; }
.nvs-sp-m .pp-brand{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); }
.nvs-sp-m .pp-titlerow{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; margin:.25rem 0 .4rem; }
.nvs-sp-m .pp-name{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.15; margin:0; }
.nvs-sp-m .pp-priceline{ display:flex; align-items:center; gap:.9rem; }
.nvs-sp-m .pp-price{ font-size:20px; font-weight:800; }
.nvs-sp-m .pp-desc{ font-size:13.5px; color:var(--sub); line-height:1.5; margin:.6rem 0 1.1rem; }
.nvs-sp-m .pp-sel-hd{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 .55rem; }
.nvs-sp-m .pp-sel-hd b{ font-weight:800; }
.nvs-sp-m .pp-sizeguide{ background:none; border:none; padding:0; color:var(--sub); font-family:inherit; font-size:12px; font-weight:600; text-decoration:underline; }
.nvs-sp-m .pp-cols{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.nvs-sp-m .pp-col{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; background:none; padding:0; display:flex; align-items:center; justify-content:center; }
.nvs-sp-m .pp-col span{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.nvs-sp-m .pp-col.on{ border-color:var(--ink); }
.nvs-sp-m .pp-sizes{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
.nvs-sp-m .pp-size{ min-width:46px; height:44px; padding:0 .4rem; border:1.5px solid var(--line); background:#fff; border-radius:10px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); }
.nvs-sp-m .pp-size.on{ border-color:var(--ink); background:var(--ink); color:#fff; }
.nvs-sp-m .pp-size-note{ display:flex; align-items:center; gap:.4rem; font-size:11.5px; color:var(--sub); margin:0 0 1rem; }
.nvs-sp-m .pp-tick{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; flex-shrink:0; border-radius:50%; background:var(--green); color:#fff; }
.nvs-sp-m .pp-pers{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem; margin:0 0 1.1rem; }
.nvs-sp-m .pp-pers-lbl{ display:flex; align-items:center; gap:.4rem; font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:.55rem; }
.nvs-sp-m .pp-pers-lbl svg{ color:var(--blue); }
.nvs-sp-m .pp-pers-fields{ display:flex; gap:.6rem; }
.nvs-sp-m .pp-pers input{ flex:1; min-width:0; box-sizing:border-box; border:1.5px solid var(--line); border-radius:10px; padding:.7rem .8rem; font-family:inherit; font-size:16px; background:#fff; color:var(--ink); }
.nvs-sp-m .pp-pers input:focus{ outline:none; border-color:var(--blue); }
.nvs-sp-m .pp-pers-note{ font-size:10.5px; color:var(--sub); margin:.5rem 0 0; }
.nvs-sp-m .nvs-buy-msg{ margin:0 0 1rem; }
.nvs-sp-m .pp-build{ width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; background:var(--hdr); color:#fff; border:none; border-radius:13px; padding:1rem; font-family:inherit; font-size:15px; font-weight:700; margin:0 0 .4rem; }
.nvs-sp-m .pp-build.off{ background:#c6cbd3; }
.nvs-sp-m .pp-accs{ margin-top:1rem; border-top:1px solid var(--line); }
.nvs-sp-m .pp-acc{ border-bottom:1px solid var(--line); }
.nvs-sp-m .pp-acc-hd{ display:flex; align-items:center; gap:.6rem; width:100%; background:none; border:none; padding:1rem .1rem; font-family:inherit; font-size:14.5px; font-weight:700; color:var(--ink); }
.nvs-sp-m .pp-acc-ic{ display:flex; color:var(--sub); }
.nvs-sp-m .pp-acc-hd b{ flex:1; text-align:left; }
.nvs-sp-m .pp-acc-chev{ color:var(--sub); transition:transform .2s; }
.nvs-sp-m .pp-acc.open .pp-acc-chev{ transform:rotate(180deg); }
.nvs-sp-m .pp-acc-body{ display:none; padding:0 .1rem 1.1rem; font-size:13px; color:var(--sub); line-height:1.55; }
.nvs-sp-m .pp-acc.open .pp-acc-body{ display:block; }
.nvs-sp-m .pp-acc-body p{ margin:0 0 .8rem; }
.nvs-sp-m .pp-acc-body ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.nvs-sp-m .pp-acc-body li{ font-size:13px; }
.nvs-sp-m .pp-acc-body .sp-acc-intro{ margin:0 0 .7rem; }
.nvs-sp-m .pp-acc-body .sp-acc-cols{ display:block; }
.nvs-sp-m .pp-acc-body .sp-acc-bul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.nvs-sp-m .pp-acc-body .sp-acc-fig{ margin:.8rem 0 0; }
.nvs-sp-m .pp-acc-body .sp-acc-fig img{ width:100%; max-width:280px; border-radius:10px; display:block; }
.nvs-sp-m .pp-acc-body .sp-acc-fig figcaption{ font-size:11px; color:var(--sub); margin-top:.35rem; }
/* the technical photos on phones (the owner, 26 Oct 2026: here and on the
   stores' phone pages, store.html .pp-tech): a row to swipe */
.nvs-sp-m .pp-tech{ background:#fff; padding:1.3rem 0 1.3rem 1.15rem; margin-top:.5rem; }
.nvs-sp-m .pp-tech h2{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:17px; font-weight:800; margin:0 0 .9rem; }
.nvs-sp-m .pp-tech-rail{ display:flex; gap:.7rem; overflow-x:auto; scrollbar-width:none; padding-right:1.15rem; }
.nvs-sp-m .pp-tech-rail::-webkit-scrollbar{ display:none; }
.nvs-sp-m .pp-tech-card{ flex:0 0 240px; width:240px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.nvs-sp-m .pp-tech-img{ aspect-ratio:16/9; background:#0f1c30; overflow:hidden; }
.nvs-sp-m .pp-tech-img img{ width:100%; height:100%; max-width:none; object-fit:cover; display:block; }
.nvs-sp-m .pp-tech-img.sp-await{ display:flex; align-items:center; justify-content:center; color:#c9d3e0; font-size:10.5px; font-weight:700; line-height:1.35; letter-spacing:.12em; text-transform:uppercase; }
.nvs-sp-m .pp-tech-tx{ padding:.75rem .85rem .9rem; }
.nvs-sp-m .pp-tech-tx b{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.nvs-sp-m .pp-tech-tx p{ font-size:12.5px; color:var(--sub); line-height:1.45; margin:.35rem 0 0; }
.nvs-sp-m .pp-set{ background:#fff; padding:1.3rem 0 1.3rem 1.15rem; margin-top:.5rem; }
.nvs-sp-m .pp-set-hd{ display:flex; align-items:center; justify-content:space-between; padding-right:1.15rem; margin-bottom:.9rem; }
.nvs-sp-m .pp-set-hd h3{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:17px; font-weight:800; margin:0; }
.nvs-sp-m .pp-set-hd a{ color:var(--sub); font-size:12.5px; font-weight:700; text-decoration:underline; }
.nvs-sp-m .pp-set-rail{ display:flex; gap:.7rem; overflow-x:auto; scrollbar-width:none; padding-right:1.15rem; }
.nvs-sp-m .pp-set-rail::-webkit-scrollbar{ display:none; }
.nvs-sp-m .pp-set-card{ flex:0 0 132px; width:132px; text-align:left; display:flex; flex-direction:column; }
.nvs-sp-m .pp-set-img{ display:block; height:132px; border-radius:12px; overflow:hidden; background:#eef0f3; margin-bottom:.5rem; }
.nvs-sp-m .pp-set-img img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 15%; display:block; }
.nvs-sp-m .pp-set-brand{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); }
.nvs-sp-m .pp-set-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; font-size:12.5px; font-weight:700; line-height:1.25; margin:.1rem 0; color:var(--ink); }
.nvs-sp-m .pp-set-pr{ display:block; margin-top:auto; font-size:12.5px; font-weight:700; color:var(--sub); }
/* the sample reviews on phones (store.html .pp-social) */
.nvs-sp-m .pp-social{ background:#fff; padding:1.3rem 0 1.6rem 1.15rem; margin-top:.5rem; }
.nvs-sp-m .pp-social h3{ font-family:'DM Sans', system-ui, -apple-system, sans-serif; font-size:17px; font-weight:800; margin:0 0 .6rem; padding-right:1.15rem; }
.nvs-sp-m .pp-social-note{ font-size:10px; color:var(--sub); opacity:.8; padding-right:1.15rem; margin:0 0 .6rem; }
.nvs-sp-m .pp-rev-rail{ display:flex; gap:.7rem; overflow-x:auto; scrollbar-width:none; padding-right:1.15rem; }
.nvs-sp-m .pp-rev-rail::-webkit-scrollbar{ display:none; }
.nvs-sp-m .pp-rev{ flex:0 0 260px; width:260px; box-sizing:border-box; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:1rem; color:#e0a93b; }
.nvs-sp-m .pp-stars{ display:inline-flex; gap:1px; color:#e8a93a; }
.nvs-sp-m .pp-rev-t{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); margin:.5rem 0 .3rem; line-height:1.3; }
.nvs-sp-m .pp-rev-b{ font-size:12.5px; color:var(--sub); line-height:1.5; margin:0 0 .7rem; }
.nvs-sp-m .pp-rev-by{ font-size:12px; font-weight:700; color:var(--ink); }
/* the bar at the foot with Add to bag (store.html .pp-bar), fixed to the
   screen here as the store's page is; the page keeps room for it */
.nvs-ppbar{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:#fff; border-top:1px solid #e6e8ee; padding:.7rem 1rem calc(.7rem + max(env(safe-area-inset-bottom), 8px)); }
.nvs-ppbar .pp-bar-add{ width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; background:#0a1428; color:#fff; border:none; border-radius:13px; padding:1rem; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.nvs-ppbar .pp-bar-add.off{ background:#c6cbd3; }
html.nvs-has-ppbar body{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }

/* the size guide (js/store-page.js spOpenSizeGuide's, at every width) */
.nvs-sg.sp-sg-overlay{ position:fixed; inset:0; z-index:420; background:rgba(10,20,40,.45); display:flex; align-items:center; justify-content:center; padding:24px; font-family:'DM Sans', system-ui, -apple-system, sans-serif; }
.nvs-sg .sp-sg{ position:relative; background:#fff; border-radius:18px; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; padding:26px 30px 24px; box-shadow:0 24px 60px rgba(10,20,40,.35); }
.nvs-sg .sp-sg-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:#f2f4f7; color:#101828; font-size:14px; cursor:pointer; }
.nvs-sg .sp-sg h3{ font-size:20px; font-weight:800; margin:0 0 .3rem; color:#101828; }
.nvs-sg .sp-sg-sub{ font-size:13px; color:#5d6b7e; line-height:1.5; margin:0 0 1rem; }
.nvs-sg .sp-sg-table{ width:100%; border-collapse:collapse; }
.nvs-sg .sp-sg-table th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5d6b7e; padding:.5rem .6rem; border-bottom:1px solid #e4e7ec; }
.nvs-sg .sp-sg-table td{ font-size:13.5px; color:#101828; padding:.55rem .6rem; border-bottom:1px solid #eef0f3; }
.nvs-sg .sp-sg-note{ font-size:12px; color:#8a94a3; margin:.9rem 0 0; line-height:1.45; }

/* THE GENDER FILTER (owner, 26 Oct 2026, Navalo and Stitcha; js/navalo-shop.js
   genderBarHTML): a row of chips over the grid of All garments and each
   collection, the collection pills' look, lit when on. All / Women / Men since
   31 Oct 2026, with a very small line under them while Women or Men is on
   (.nvs-gnote, a row of its own: "Includes unisex styles"). */
.nvs-gbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-6px 0 18px; }
.nvs-gnote{ flex-basis:100%; margin:-2px 0 0; font-size:11.5px; line-height:1.35; color:var(--sub); }
.nvs-gbar-l{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sub); margin-right:2px; }
.nvs-gchip{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45rem .95rem; font-size:13px; font-weight:600; color:var(--sub); line-height:1.2; transition:background .15s, border-color .15s, color .15s; }
.nvs-gchip:hover{ border-color:#c3cbd6; color:var(--ink); }
.nvs-gchip.on{ background:var(--hdr); border-color:var(--hdr); color:#fff; }
.nvs-gchip:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .nvs-gchip{ transition:none; } }

/* NAVALO'S FILTERS UNDER THE PROMISES STRIP (owner, 5 Nov 2026: "the banner
   with information is first, followed by the gender filters and then the
   category filters"; js/navalo-shop.js catSecHTML): the gender chips (and
   their small unisex line), then the row of collections, then the grid's
   title and count. Navalo only: Stitcha's pills stay in its hero. */
.nvs-filt{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:0 0 22px; }
.nvs-filt > .nvs-gbar{ margin:0; }
.nvs-filt > .nvs-catpills{ margin:0; }
@media (max-width:560px){ .nvs-filt{ margin-bottom:20px; } }