/* ═══════════════════════════════════════════════════════════════════════════
   NAVALO'S HOMEPAGE (owner, 15 Oct 2026: the approved redesign, "Navalo
   Homepage Redesign", desktop 1440 and phone 390).

   Rendered by js/modules/yh-appv2.js: nvh2HTML() on computers and tablets
   (.dkhome.nvh2) and nvm2HTML() on phones (.nvm2-app / .nvm2), and ONLY on
   Navalo: deskHomeHTML() and homeHTML() hand over to them when the deployment
   is neither Stitcha nor Workwear. No other page carries these classes, so
   this sheet changes nothing on Stitcha or Workwear, and nothing outside
   Navalo's homepage.

   ── SCOPE ────────────────────────────────────────────────────────────────────
   Computers and tablets: every rule under #yha2Root .nvh2, inside
   (min-width:561px), the app's own switch (css/desktop-appv2.css). Phones:
   every rule under #yha2Root .nvm2-app, inside (max-width:560px)
   (css/mobile-appv2.css). The ID keeps each rule ahead of the app's resets
   (#yha2Root h1,h2,h3,p{margin:0} and the like).

   ── TYPE ─────────────────────────────────────────────────────────────────────
   Body text is DM Sans, as everywhere. The headings (h1, h2) are Playfair
   Display at 400 As now: the fonts runtime names them in SiteFonts.AS_NOW
   ('navhome'),
   and a heading font chosen in Admin Tools > Copy > Fonts and sizes draws
   them instead (its rules carry !important and an ID). Sizes are the
   canvas's at 1440 and shrink with the window below it.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width:561px){

  #yha2Root .nvh2{
    --nv-bg:#F7F5F0; --nv-ink:#14202E; --nv-navy:#0E2238; --nv-mut:#5A6472; --nv-mut2:#46505E;
    --nv-body:#2C3644; --nv-sand:#EFEBE3; --nv-line:#E6E1D8; --nv-link:#2F5F98; --nv-link-h:#1E4775;
    --nv-serif:'Playfair Display',Georgia,'Times New Roman',serif;
    --nv-pad:clamp(24px,4.45vw,64px);
    background:var(--nv-bg); color:var(--nv-ink); line-height:1.3;
    font-family:'DM Sans','Helvetica Neue',Helvetica,sans-serif;
  }
  #yha2Root .nvh2 a{ color:var(--nv-link); text-decoration:none; }
  #yha2Root .nvh2 a:hover{ color:var(--nv-link-h); }
  #yha2Root .nvh2 :is(a,button):focus-visible{ outline:2px solid var(--nv-link); outline-offset:3px; }
  /* the buttons that are links in the design: no button look of their own */
  #yha2Root .nvh2 :is(.nvh2-nav,.nvh2-menu,.nvh2-foot) button{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
  #yha2Root .nvh2-wrap{ max-width:1440px; margin:0 auto; padding:0 var(--nv-pad); box-sizing:border-box; }

  /* small capitals lines */
  #yha2Root .nvh2-kick{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--nv-mut); }
  /* the headings */
  #yha2Root .nvh2 :is(h1,h2){ margin:0; font-family:var(--nv-serif); font-weight:400; color:var(--nv-navy); }
  #yha2Root .nvh2 h1{ font-size:clamp(46px,4.6vw,66px); line-height:1.04; letter-spacing:-.01em; max-width:620px; text-wrap:balance; }
  #yha2Root .nvh2 h2{ font-size:clamp(36px,3.2vw,46px); line-height:1.1; }

  /* buttons */
  #yha2Root .nvh2-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--nv-navy); color:#fff; font-family:inherit;
    font-size:15px; font-weight:600; line-height:1.3; padding:15px 24px; border:0; border-radius:4px; cursor:pointer; white-space:nowrap; text-decoration:none; }
  #yha2Root .nvh2 a.nvh2-btn{ color:#fff; }
  #yha2Root .nvh2-btn:hover, #yha2Root .nvh2 a.nvh2-btn:hover{ background:#1A3350; color:#fff; }
  #yha2Root .nvh2-ghost, #yha2Root .nvh2-ghost:hover{ background:rgba(255,255,255,.7); color:var(--nv-navy); border:1px solid var(--nv-navy); padding:14px 24px; }
  #yha2Root .nvh2-ghost:hover{ background:#fff; }
  #yha2Root .nvh2 a.nvh2-white, #yha2Root .nvh2 a.nvh2-white:hover{ background:#fff; color:var(--nv-navy); }
  #yha2Root .nvh2 a.nvh2-white:hover{ background:var(--nv-sand); }

  /* ── header ─────────────────────────────────────────────────────────── */
  #yha2Root .nvh2-top{ position:relative; z-index:20; background:#fff; border-bottom:1px solid var(--nv-line); }
  #yha2Root .nvh2-top-in{ height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
  #yha2Root .nvh2-logo{ display:flex; align-items:center; background:none; border:0; padding:0; cursor:pointer; flex:none; }
  #yha2Root .nvh2-nav{ display:flex; gap:40px; font-size:14px; font-weight:500; }
  #yha2Root .nvh2-nav :is(a,button), #yha2Root .nvh2-nav a:hover{ color:var(--nv-ink); }
  #yha2Root .nvh2-nav :is(a,button):hover{ text-decoration:underline; text-underline-offset:5px; }
  #yha2Root .nvh2-act{ display:flex; align-items:center; gap:22px; flex:none; }
  #yha2Root .nvh2-topcta{ font-size:14px; padding:12px 20px; }
  #yha2Root .nvh2-bag, #yha2Root .nvh2-bag:hover{ position:relative; display:flex; color:var(--nv-ink); }
  /* ONE BAG (23 Oct 2026): the bag is a button that opens the drawer here */
  #yha2Root button.nvh2-bag{ background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; }
  #yha2Root .nvh2-bag-n[hidden]{ display:none; }
  #yha2Root .nvh2-bag-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; box-sizing:border-box; }
  #yha2Root .nvh2-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); cursor:pointer; }
  #yha2Root .nvh2-menu{ position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; 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); }
  #yha2Root .nvh2-menu[hidden]{ display:none; }
  #yha2Root .nvh2-menu :is(a,button), #yha2Root .nvh2-menu a:hover{ display:block; width:100%; padding:13px 0; font-size:15px; font-weight:500;
    color:var(--nv-ink); border-bottom:1px solid var(--nv-sand); }

  /* ── hero ───────────────────────────────────────────────────────────── */
  #yha2Root .nvh2-hero{ position:relative; height:640px; overflow:hidden; background:#DCE3E8; }
  /* the media is dkHeroMedia()'s (the video, or the Imagery tab's picture);
     the old hero's dark wash and top shade are not part of this design */
  #yha2Root .nvh2 .nvh2-hero-bg::after{ content:none; }
  #yha2Root .nvh2 .nvh2-hero-bg .dk-hero-topshade{ display:none; }
  #yha2Root .nvh2 .nvh2-hero-bg img{ object-position:72% 40%; }
  #yha2Root .nvh2-hero-fade{ position:absolute; inset:0;
    background:linear-gradient(90deg,rgba(247,245,240,.96) 0%,rgba(247,245,240,.86) 34%,rgba(247,245,240,0) 62%); }
  #yha2Root .nvh2-hero-in{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:22px; }
  #yha2Root .nvh2-hero .nvh2-kick{ color:var(--nv-mut2); }
  #yha2Root .nvh2-lede{ margin:0; font-size:18px; line-height:1.55; color:var(--nv-body); max-width:460px; }
  #yha2Root .nvh2-btns{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

  /* ── the four-point strip: the points share the band equally ─────────── */
  #yha2Root .nvh2-pts{ background:var(--nv-sand); border-bottom:1px solid #E2DCD1; }
  #yha2Root .nvh2-pts-in{ padding-top:30px; padding-bottom:30px; display:grid; gap:32px; grid-template-columns:repeat(4,minmax(0,1fr)); }
  #yha2Root .nvh2-pts-in[data-n="1"]{ grid-template-columns:minmax(0,1fr); }
  #yha2Root .nvh2-pts-in[data-n="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #yha2Root .nvh2-pts-in[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #yha2Root .nvh2-pts-in[data-n="5"]{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; }
  #yha2Root .nvh2-pts-in[data-n="6"]{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
  #yha2Root .nvh2-pt{ display:flex; gap:16px; align-items:center; min-width:0; }
  #yha2Root .nvh2-pt-ic{ flex:none; display:flex; color:var(--nv-navy); }
  #yha2Root .nvh2-pt svg{ width:34px; height:34px; display:block; }
  /* the set's 1.6 stroke is drawn for 24px; at 34px this keeps the design's line */
  #yha2Root .nvh2-pt svg *{ stroke-width:1.15px; }
  #yha2Root .nvh2-pt b{ display:block; font-size:15px; font-weight:600; color:var(--nv-ink); }
  #yha2Root .nvh2-pt div > span{ display:block; font-size:13px; color:var(--nv-mut); margin-top:3px; }

  /* ── section heads (the collection, the edit) ─────────────────────────── */
  #yha2Root .nvh2-sec{ padding:88px 0 84px; }
  #yha2Root .nvh2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
  #yha2Root .nvh2-head .nvh2-kick{ margin-bottom:12px; }
  #yha2Root .nvh2-more{ display:flex; gap:8px; align-items:center; font-size:15px; font-weight:600; }

  /* ── the collection ─────────────────────────────────────────────────── */
  #yha2Root .nvh2-cats{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
  #yha2Root .nvh2 a.nvh2-cat, #yha2Root .nvh2 a.nvh2-cat:hover{ display:flex; flex-direction:column; gap:14px; color:var(--nv-ink); }
  #yha2Root .nvh2-cat-img{ display:block; aspect-ratio:3/4; background:#E7E2D9; overflow:hidden; }
  #yha2Root .nvh2-cat-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
  #yha2Root .nvh2-cat:hover .nvh2-cat-img img{ transform:scale(1.03); }
  #yha2Root .nvh2-cat b{ display:flex; justify-content:space-between; gap:8px; font-size:15px; font-weight:600; }

  /* ── the two photo panels ───────────────────────────────────────────── */
  #yha2Root .nvh2-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #yha2Root .nvh2-panel{ position:relative; height:620px; overflow:hidden; background:#1B2B3C; }
  #yha2Root .nvh2-panel-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
  #yha2Root .nvh2-panel + .nvh2-panel .nvh2-panel-img{ object-position:50% 40%; }
  #yha2Root .nvh2-panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,22,36,0) 40%,rgba(10,22,36,.78) 100%); }
  #yha2Root .nvh2-panel-tx{ position:absolute; z-index:1; left:clamp(24px,3.9vw,56px); right:clamp(24px,3.9vw,56px); bottom:52px;
    display:flex; flex-direction:column; gap:14px; color:#fff; }
  #yha2Root .nvh2-panel-tx .nvh2-kick{ color:#fff; }
  #yha2Root .nvh2 .nvh2-panel h2{ color:#fff; font-size:clamp(32px,2.92vw,42px); line-height:1.12; }
  #yha2Root .nvh2 .nvh2-panel-tx a, #yha2Root .nvh2 .nvh2-panel-tx a:hover{ align-self:flex-start; color:#fff; font-size:15px; font-weight:600;
    text-decoration:underline; text-underline-offset:5px; }

  /* ── the Navalo edit ────────────────────────────────────────────────── */
  #yha2Root .nvh2-sec + .nvh2-sec, #yha2Root .nvh2-split + .nvh2-sec{ padding-bottom:88px; }
  #yha2Root .nvh2-cards{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; }
  #yha2Root .nvh2 a.nvh2-card, #yha2Root .nvh2 a.nvh2-card:hover{ display:flex; flex-direction:column; gap:10px; color:var(--nv-ink); }
  /* the photo sits inside the box's padding at whatever its own shape, never stretching the box */
  #yha2Root .nvh2-card-img{ position:relative; display:block; background:#EEEAE3; aspect-ratio:1/1.08; overflow:hidden; }
  #yha2Root .nvh2-card-img img{ position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px); object-fit:contain; display:block; mix-blend-mode:multiply; }
  #yha2Root .nvh2-card-nm{ font-size:15px; font-weight:600; line-height:1.35; }
  #yha2Root .nvh2-card:hover .nvh2-card-nm{ text-decoration:underline; text-underline-offset:4px; }
  #yha2Root .nvh2-card-pr{ font-size:14px; color:var(--nv-mut2); }
  /* A garment with a lifestyle shot (owner, 19 Oct 2026): the photo fills
     the card at the lifestyle shots' own 3:4, and the flat lay fades in over
     it while the pointer is on the card. */
  #yha2Root .nvh2-card-img.nvh2-life{ aspect-ratio:3/4; }
  #yha2Root .nvh2-card-img.nvh2-life img{ inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:normal; }
  #yha2Root .nvh2-card-flat{ opacity:0; transition:opacity .35s ease; }
  #yha2Root .nvh2-card:hover .nvh2-card-flat, #yha2Root .nvh2-card:focus-visible .nvh2-card-flat{ opacity:1; }
  /* Admin Tools > Product tiles (owner, 22 Oct 2026): a hover picture on a
     plain card, where the two share the frame and its blend, so the card's
     own picture fades out under it; a lifestyle shot there fills the frame */
  #yha2Root .nvh2-card-img.nvh2-hov > img:not(.nvh2-card-flat){ transition:opacity .35s ease; }
  #yha2Root .nvh2-card:hover .nvh2-card-img.nvh2-hov > img:not(.nvh2-card-flat), #yha2Root .nvh2-card:focus-visible .nvh2-card-img.nvh2-hov > img:not(.nvh2-card-flat){ opacity:0; }
  #yha2Root .nvh2-card-img img.nvh2-card-lifeh{ inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:normal; }
  #yha2Root .nvh2-dots{ display:flex; flex-wrap:wrap; gap:7px; }
  #yha2Root .nvh2-dots span{ width:13px; height:13px; border-radius:50%; display:block; box-shadow:inset 0 0 0 1px rgba(20,32,46,.25); }

  /* ── crew stores ────────────────────────────────────────────────────── */
  #yha2Root .nvh2-crew{ background:var(--nv-sand); }
  #yha2Root .nvh2-crew-in{ padding-top:88px; padding-bottom:88px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; }
  #yha2Root .nvh2-crew-tx{ display:flex; flex-direction:column; gap:22px; }
  #yha2Root .nvh2 .nvh2-crew h2{ font-size:clamp(40px,3.75vw,54px); line-height:1.06; }
  #yha2Root .nvh2-crew-p{ margin:0; font-size:17px; line-height:1.6; color:var(--nv-body); max-width:460px; }
  #yha2Root .nvh2-ticks{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; font-size:15px; font-weight:500; }
  #yha2Root .nvh2-ticks li{ display:flex; gap:12px; align-items:center; }
  #yha2Root .nvh2-ticks svg{ flex:none; display:block; }
  #yha2Root .nvh2-crew-act{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:10px; }
  #yha2Root .nvh2 a.nvh2-how{ display:flex; gap:8px; align-items:center; color:var(--nv-navy); font-size:15px; font-weight:600; }
  #yha2Root .nvh2 a.nvh2-how:hover{ text-decoration:underline; text-underline-offset:5px; }
  #yha2Root .nvh2-crew-img img{ width:100%; height:auto; display:block; }

  /* ── closing band ───────────────────────────────────────────────────── */
  #yha2Root .nvh2-more-band{ position:relative; height:560px; overflow:hidden; background:#0F2133; }
  #yha2Root .nvh2-band-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 35%; }
  #yha2Root .nvh2-band-fade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,18,30,.88) 0%,rgba(8,18,30,.62) 38%,rgba(8,18,30,.1) 72%); }
  #yha2Root .nvh2-band-in{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:20px; color:#fff; }
  #yha2Root .nvh2-band-in .nvh2-kick{ color:#fff; }
  #yha2Root .nvh2 .nvh2-more-band h2{ color:#fff; font-size:clamp(42px,4.03vw,58px); line-height:1.05; }
  #yha2Root .nvh2-band-p{ margin:0; font-size:17px; line-height:1.6; max-width:420px; color:#E3E8EE; }
  #yha2Root .nvh2-band-in .nvh2-btn{ align-self:flex-start; margin-top:8px; }

  /* ── footer ─────────────────────────────────────────────────────────── */
  #yha2Root .nvh2-foot{ background:var(--nv-navy); color:#C9D1DB; }
  #yha2Root .nvh2-foot-in{ padding-top:64px; padding-bottom:40px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; font-size:14px; }
  #yha2Root .nvh2-foot-brand{ display:flex; flex-direction:column; gap:16px; }
  #yha2Root .nvh2-foot-brand img{ height:28px; width:auto; align-self:flex-start; }
  #yha2Root .nvh2-foot-brand span{ line-height:1.6; max-width:240px; }
  #yha2Root .nvh2-foot nav{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  #yha2Root .nvh2-foot nav b{ color:#fff; font-weight:600; letter-spacing:.08em; font-size:12px; text-transform:uppercase; }
  #yha2Root .nvh2 .nvh2-foot nav :is(a,button){ color:#C9D1DB; font-size:14px; }
  #yha2Root .nvh2 .nvh2-foot nav :is(a,button):hover{ color:#fff; }
  #yha2Root .nvh2-copy{ padding-top:22px; padding-bottom: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; }
  /* the support address, at the right of the bottom line (20 Oct 2026) */
  #yha2Root .nvh2 .nvh2-help a{ color:#C9D1DB; text-decoration:underline; text-underline-offset:2px; }
  #yha2Root .nvh2 .nvh2-help a:hover{ color:#fff; }
}

/* the canvas's 1000px step: collection three a row, the edit three a row,
   the strip two a line, the panels, crew stores and the footer stacked or
   two a row, and the menu behind a button */
@media (min-width:561px) and (max-width:1000px){
  /* the words take more of a narrower hero: the wash reaches further */
  #yha2Root .nvh2-hero-fade{ background:linear-gradient(90deg,rgba(247,245,240,.96) 0%,rgba(247,245,240,.88) 52%,rgba(247,245,240,0) 86%); }
  #yha2Root .nvh2-nav{ display:none; }
  #yha2Root .nvh2-menubtn{ display:flex; }
  #yha2Root .nvh2-cats, #yha2Root .nvh2-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #yha2Root .nvh2-pts-in:is([data-n="2"],[data-n="3"],[data-n="4"],[data-n="5"],[data-n="6"]){ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
  #yha2Root .nvh2-split, #yha2Root .nvh2-crew-in{ grid-template-columns:minmax(0,1fr); }
  #yha2Root .nvh2-foot-in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1001px){
  #yha2Root .nvh2-menu{ display:none; }
}

/* ══ PHONES (Mobile.dc.html) ═══════════════════════════════════════════════ */
/* the top bar's lockup, computers and phones (owner, 27 Oct 2026: the
   builder's): the roundel and NAVALO, sized as the owner's picture (the word
   2.7 times the roundel's width, the gap 0.4 of it); on computers its left
   edge is the hero's (.nvh2-wrap) */
/* (the font is the logo's, never the Fonts and sizes choices': !important, as skin.css's .dk-brand) */
#yha2Root :is(.nvh2-logo, .nvm2-logo){ gap:16px; color:var(--nv-navy); font-family:'Libre Baskerville', Georgia, serif !important; font-size:20px;
  font-weight:400; letter-spacing:.14em; text-transform:uppercase; line-height:1; }
#yha2Root .nvh2-mark{ display:block; flex:none; width:40px; height:40px; 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; }
#yha2Root .nvh2-word{ margin-right:-.14em; white-space:nowrap; font-family:'Libre Baskerville', Georgia, serif !important; }

@media (max-width:560px){

  #yha2Root .nvm2-app{
    --nv-ink:#14202E; --nv-navy:#0E2238; --nv-mut:#5A6472; --nv-mut2:#46505E; --nv-body:#2C3644; --nv-sand:#EFEBE3;
    --nv-line:#E6E1D8; --nv-link:#2F5F98; --nv-link-h:#1E4775;
    --nv-serif:'Playfair Display',Georgia,'Times New Roman',serif;
    color:var(--nv-ink); font-family:'DM Sans','Helvetica Neue',Helvetica,sans-serif; line-height:1.3;
  }
  #yha2Root .nvm2-app a{ color:var(--nv-link); text-decoration:none; }
  #yha2Root .nvm2-app :is(a,button):focus-visible{ outline:2px solid var(--nv-link); outline-offset:3px; }
  #yha2Root .nvm2-app :is(.nvh2-menu,.nvm2-foot) button{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
  #yha2Root .nvm2{ background:#F7F5F0; }

  /* header: ☰, the logo centred, the bag */
  #yha2Root .nvm2-hd{ position:relative; z-index:62; flex:0 0 auto; display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center;
    min-height:60px; padding:env(safe-area-inset-top) 8px 0; background:#fff; border-bottom:1px solid var(--nv-line); box-sizing:border-box; }
  #yha2Root .nvm2-hd-b{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--nv-ink); }
  #yha2Root .nvm2-logo{ justify-self:center; display:flex; align-items:center; background:none; border:0; padding:0; }
  #yha2Root .nvm2-logo{ gap:11px; font-size:14px; }
  #yha2Root .nvm2-logo .nvh2-mark{ width:28px; height:28px; }
  #yha2Root .nvm2-hd .nvh2-bag{ position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--nv-ink); }
  #yha2Root .nvm2-hd .nvh2-bag-n{ position:absolute; top:5px; right:3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--nv-navy);
    color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-sizing:border-box; }
  #yha2Root .nvm2-hd .nvh2-menu{ position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; background:#fff;
    border-bottom:1px solid var(--nv-line); padding:4px 20px 12px; box-shadow:0 18px 30px -22px rgba(14,34,56,.45); }
  #yha2Root .nvm2-hd .nvh2-menu[hidden]{ display:none; }
  #yha2Root .nvm2-hd .nvh2-menu :is(a,button){ display:flex; align-items:center; width:100%; min-height:48px; font-size:16px; font-weight:500;
    color:var(--nv-ink); border-bottom:1px solid var(--nv-sand); }

  /* small capitals lines, headings */
  #yha2Root .nvm2-app .nvh2-kick{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--nv-mut); }
  #yha2Root .nvm2-app :is(h1,h2){ margin:0; font-family:var(--nv-serif); font-weight:400; color:var(--nv-navy); }
  #yha2Root .nvm2-app h2{ font-size:32px; line-height:1.12; }

  /* buttons, full width */
  #yha2Root .nvm2-btns{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
  #yha2Root .nvm2-app .nvm2-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; box-sizing:border-box;
    padding:0 16px; border:0; border-radius:4px; font-family:inherit; font-size:15px; font-weight:600; line-height:1.3; text-align:center; cursor:pointer; text-decoration:none; }
  #yha2Root .nvm2-app .nvm2-white{ background:#fff; color:var(--nv-navy); }
  #yha2Root .nvm2-app .nvm2-line{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.85); }
  #yha2Root .nvm2-app .nvm2-navy{ background:var(--nv-navy); color:#fff; }
  #yha2Root .nvm2-app .nvm2-text{ background:none; color:var(--nv-navy); gap:8px; }

  /* hero: the words over the photo */
  #yha2Root .nvm2-hero{ position:relative; height:600px; overflow:hidden; background:#1B2B3C; }
  #yha2Root .nvm2-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
  #yha2Root .nvm2-hero-fade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,22,36,0) 30%,rgba(10,22,36,.86) 78%); }
  #yha2Root .nvm2-hero-tx{ position:absolute; left:20px; right:20px; bottom:24px; display:flex; flex-direction:column; gap:14px; color:#fff; }
  #yha2Root .nvm2-hero-tx .nvh2-kick{ color:#fff; }
  #yha2Root .nvm2-app h1{ color:#fff; font-size:40px; line-height:1.06; text-wrap:balance; }
  #yha2Root .nvm2-hero .nvh2-lede{ margin:0; font-size:15px; line-height:1.55; color:#E3E8EE; }

  /* the four-point strip, two to a line */
  #yha2Root .nvm2-pts{ background:var(--nv-sand); padding:24px 20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
  #yha2Root .nvm2-pts[data-n="1"]{ grid-template-columns:minmax(0,1fr); }
  #yha2Root .nvm2-pts .nvh2-pt{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
  #yha2Root .nvm2-pts svg{ width:30px; height:30px; display:block; color:var(--nv-navy); }
  #yha2Root .nvm2-pts svg *{ stroke-width:1.15px; }
  #yha2Root .nvm2-pts b{ font-size:14px; font-weight:600; }
  #yha2Root .nvm2-pts .nvh2-pt > span{ font-size:12.5px; color:var(--nv-mut); margin-top:-4px; }

  /* the collection and the edit: rows you swipe */
  #yha2Root .nvm2-sec{ padding:48px 0 44px; }
  #yha2Root .nvm2-head{ padding:0 20px; margin-bottom:20px; }
  #yha2Root .nvm2-head .nvh2-kick{ margin-bottom:10px; }
  #yha2Root .nvm2-rail{ display:flex; gap:12px; overflow-x:auto; padding:0 20px; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; }
  #yha2Root .nvm2-rail::-webkit-scrollbar{ display:none; }
  #yha2Root .nvm2-rail a.nvh2-cat{ flex:0 0 62%; scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; color:var(--nv-ink); }
  #yha2Root .nvm2-rail .nvh2-cat-img{ display:block; aspect-ratio:3/4; background:#E7E2D9; overflow:hidden; }
  #yha2Root .nvm2-rail .nvh2-cat-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  #yha2Root .nvm2-rail .nvh2-cat b{ display:flex; justify-content:space-between; gap:8px; font-size:14px; font-weight:600; }
  #yha2Root .nvm2-rail a.nvh2-card{ flex:0 0 46%; scroll-snap-align:start; display:flex; flex-direction:column; gap:8px; color:var(--nv-ink); }
  #yha2Root .nvm2-rail .nvh2-card-img{ position:relative; display:block; background:#EEEAE3; aspect-ratio:1/1.08; overflow:hidden; }
  #yha2Root .nvm2-rail .nvh2-card-img img{ position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); object-fit:contain; display:block; mix-blend-mode:multiply; }
  /* the lifestyle shot fills the card (19 Oct 2026); a phone has no hover, so no flat lay */
  #yha2Root .nvm2-rail .nvh2-card-img.nvh2-life{ aspect-ratio:3/4; }
  #yha2Root .nvm2-rail .nvh2-card-img.nvh2-life img{ inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:normal; }
  #yha2Root .nvm2-rail .nvh2-card-img img.nvh2-card-flat{ display:none; }
  #yha2Root .nvm2-rail .nvh2-card-nm{ font-size:14px; font-weight:600; line-height:1.35; }
  #yha2Root .nvm2-rail .nvh2-card-pr{ font-size:13px; color:var(--nv-mut2); }
  #yha2Root .nvm2-rail .nvh2-dots{ display:flex; flex-wrap:wrap; gap:6px; }
  #yha2Root .nvm2-rail .nvh2-dots span{ width:12px; height:12px; border-radius:50%; display:block; box-shadow:inset 0 0 0 1px rgba(20,32,46,.25); }
  #yha2Root .nvm2-foot-link{ padding:0 20px; margin-top:22px; }
  #yha2Root .nvm2-app a.nvh2-more{ display:inline-flex; gap:8px; align-items:center; min-height:44px; font-size:15px; font-weight:600; }

  /* the two photo panels, stacked */
  #yha2Root .nvm2-split{ display:flex; flex-direction:column; }
  #yha2Root .nvm2-split .nvh2-panel{ position:relative; height:440px; overflow:hidden; background:#1B2B3C; }
  #yha2Root .nvm2-split .nvh2-panel-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
  #yha2Root .nvm2-split .nvh2-panel + .nvh2-panel .nvh2-panel-img{ object-position:50% 40%; }
  #yha2Root .nvm2-split .nvh2-panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,22,36,0) 35%,rgba(10,22,36,.82) 100%); }
  #yha2Root .nvm2-split .nvh2-panel-tx{ position:absolute; z-index:1; left:20px; right:20px; bottom:28px; display:flex; flex-direction:column; gap:10px; color:#fff; }
  #yha2Root .nvm2-split .nvh2-kick{ color:#fff; }
  #yha2Root .nvm2-app .nvm2-split h2{ color:#fff; font-size:30px; line-height:1.12; }
  #yha2Root .nvm2-app .nvm2-split .nvh2-panel-tx a{ display:flex; align-items:center; gap:.3em; align-self:flex-start; min-height:44px; color:#fff; font-size:15px; font-weight:600;
    text-decoration:underline; text-underline-offset:5px; }

  /* crew stores */
  #yha2Root .nvm2-crew{ background:var(--nv-sand); padding:48px 20px 40px; display:flex; flex-direction:column; gap:18px; }
  /* min(…, vw): the canvas's size from 384px up; on a narrower phone each of
     the heading's two lines still fits on one line in the widest fonts at
     the top size step (Fonts and sizes; tests/site-fonts-size-layout-phone-nav-a) */
  #yha2Root .nvm2-app .nvm2-crew h2{ font-size:min(38px,9.9vw); line-height:1.06; }
  #yha2Root .nvm2-crew .nvh2-crew-p{ margin:0; font-size:15px; line-height:1.6; color:var(--nv-body); }
  #yha2Root .nvm2-crew-img{ margin:4px 0; }
  #yha2Root .nvm2-crew-img img{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }
  #yha2Root .nvm2-crew .nvh2-ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14.5px; font-weight:500; }
  #yha2Root .nvm2-crew .nvh2-ticks li{ display:flex; gap:12px; align-items:center; }
  #yha2Root .nvm2-crew .nvh2-ticks svg{ flex:none; display:block; }
  #yha2Root .nvm2-crew .nvm2-btns{ gap:6px; margin-top:8px; }

  /* closing band */
  #yha2Root .nvm2-band{ position:relative; height:540px; overflow:hidden; background:#0F2133; }
  #yha2Root .nvm2-band .nvh2-band-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 30%; }
  #yha2Root .nvm2-band-fade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,18,30,.1) 20%,rgba(8,18,30,.88) 72%); }
  #yha2Root .nvm2-band-tx{ position:absolute; left:20px; right:20px; bottom:28px; display:flex; flex-direction:column; gap:14px; color:#fff; }
  #yha2Root .nvm2-band-tx .nvh2-kick{ color:#fff; }
  #yha2Root .nvm2-app .nvm2-band h2{ color:#fff; font-size:min(40px,10.4vw); line-height:1.05; }
  #yha2Root .nvm2-band .nvh2-band-p{ margin:0; font-size:15px; line-height:1.6; color:#E3E8EE; }

  /* footer */
  #yha2Root .nvm2-foot{ background:var(--nv-navy); color:#C9D1DB; padding:40px 20px 28px; display:flex; flex-direction:column; gap:26px; font-size:14px; }
  #yha2Root .nvm2-foot > img{ height:24px; width:auto; align-self:flex-start; }
  #yha2Root .nvm2-foot-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  #yha2Root .nvm2-foot nav{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  #yha2Root .nvm2-foot nav b{ color:#fff; font-weight:600; letter-spacing:.08em; font-size:12px; text-transform:uppercase; }
  #yha2Root .nvm2-app .nvm2-foot nav :is(a,button){ color:#C9D1DB; font-size:14px; }
  #yha2Root .nvm2-copy{ border-top:1px solid rgba(255,255,255,.12); padding-top:18px; font-size:13px; color:#9AA6B4;
    display:flex; flex-direction:column; gap:8px; }
  #yha2Root .nvm2-app .nvh2-help a{ color:#C9D1DB; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
}

/* LAST RESORT for a long top-bar button wording from the Copy tab (16 Oct
   2026): the button may narrow and take a second line rather than push the
   basket and ☰ out of the bar. "Create your crew store" fits on one line at
   every width, so this never shows for it. */
@media (min-width:561px){
  #yha2Root .nvh2-act{ flex:0 1 auto; min-width:0; }
  #yha2Root .nvh2-topcta{ min-width:0; white-space:normal; text-align:center; line-height:1.2; }
  /* the menu's links never wrap: the wide logo (19 Oct 2026) leaves the
     button less room, so it is the button that narrows */
  #yha2Root .nvh2-nav > *{ white-space:nowrap; }
}
/* the wide logo a little smaller where the bar is tightest, from the width
   the menu's links appear at */
@media (min-width:1001px) and (max-width:1240px){
  #yha2Root .nvh2-logo{ gap:14px; font-size:17px; }
  #yha2Root .nvh2-logo .nvh2-mark{ width:34px; height:34px; }
}

/* the flat lay appears at once for anyone who asks for less motion (19 Oct 2026) */
@media (prefers-reduced-motion:reduce){
  #yha2Root .nvh2-card-flat, #yha2Root .nvh2-card-img.nvh2-hov > img{ transition:none; }
}

/* ── promotional cards in the homepage's tile rows (Admin Tools > Product
   tiles, "Promotional cards", owner 25 Oct 2026, Navalo and Stitcha;
   js/modules/yh-appv2.js hpromoLay): a tile of the row like its neighbours
   (it keeps the row's own tile class, so a rail gives it a tile's width),
   the owner's picture filling it, the words over its foot on a dark scrim.
   Drawn only where a card is switched on with a picture; neutral colours
   only, so Stitcha's palette has nothing here to restate. ── */
#yha2Root#yha2Root a.hpromo{ position:relative; display:block; align-self:stretch; min-height:260px; overflow:hidden;
  color:#fff; text-decoration:none; background:#1B2B3C; }
#yha2Root#yha2Root a.hpromo::after{ content:none; }
#yha2Root .hpromo-img{ position:absolute; inset:0; display:block; }
#yha2Root .hpromo-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; mix-blend-mode:normal; transform:none; }
#yha2Root .hpromo-tx{ position:absolute; left:0; right:0; bottom:0; z-index:2; 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)); }
#yha2Root .hpromo-h{ display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.2; color:#fff; }
#yha2Root .hpromo-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); }
#yha2Root .hpromo-btn{ margin-top:4px; max-width:100%; padding:.5rem .9rem; border-radius:999px; background:#fff; color:#111;
  font-size:12.5px; font-weight:600; line-height:1.25; }
@media (max-width:560px){
  #yha2Root#yha2Root a.hpromo{ min-height:220px; }
  #yha2Root .hpromo-tx{ gap:4px; padding:40px 10px 10px; }
  #yha2Root .hpromo-h{ font-size:14.5px; }
  #yha2Root .hpromo-t{ -webkit-line-clamp:2; font-size:11px; }
  #yha2Root .hpromo-btn{ padding:.4rem .7rem; font-size:11.5px; }
}