/* ==========================================================================
   hn2-home-v2.css — home page upgrade (Claude Design v2, applied 29.09.2026)
   Source: design-ref/claude-design-export/hn2-home-v2.css (unchanged original).
   Claude Code fixes vs the original are marked [CC].
   Load AFTER p10-home.css, hn2-home-newprod.css, hn2-home-recprod.css.
   Visual only: no text, headings, links, alt, image files or schema touched.
   Every rule is scoped to .hn2h. Rollback = remove this file.
   ========================================================================== */

/* 0. BUG FIX — tokens used by p10-home.css that are not defined anywhere.
   Because of them: .hn2h-cat__b padding is dropped (text touches the card
   border, title touches the image) and every transition on .hn2h-btn /
   .hn2h-cat / .hn2h-stat / .hn2h-rc is ignored. */
.hn2h{
  --space-7:1.75rem;
  --dur-fast:160ms;
  --dur-slow:450ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --color-text-body:var(--color-gray-700);
  --hn2-pad:clamp(56px,4rem + 3vw,112px);      /* content sections */
  --hn2-pad-sm:clamp(40px,2rem + 2vw,64px);    /* compact bands   */
}
/* one heading rhythm everywhere (kicker 8px → H2 → content 40/28px) */
.hn2h .hn2h-kick{line-height:1.4;margin:0 0 8px}
.hn2h .hn2h-h2{margin:0;line-height:1.15;text-wrap:balance}
.hn2h .hn2h-sh{margin-bottom:clamp(28px,1rem + 2vw,44px)}

/* 1. HERO -------------------------------------------------------------- */
@media(max-width:768px){
  /* the 100svh min-height centres the content and leaves ~150px empty navy
     above the badge and below the video on phones */
  .hn2h .hn2h-hero__in{min-height:0;padding-block:28px 48px;gap:28px}
  .hn2h .hn2h-hero__h{font-size:clamp(1.6rem,1.2rem + 2vw,1.9rem)}
  .hn2h .hn2h-hero__cta .hn2h-btn{min-height:48px;padding:12px 18px;font-size:var(--fs-sm)}
}

/* 2. ABOUT ------------------------------------------------------------- */
.hn2h .hn2h-about{padding-block:var(--hn2-pad)}
.hn2h .hn2h-about__txt .hn2h-h2{margin-bottom:20px}
.hn2h .hn2h-about__txt .hn2h-h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--color-red-500);margin-top:14px}
.hn2h .hn2h-about__txt p{max-width:62ch}
@media(max-width:768px){
  /* portrait cropped to head + shoulders: ~200px shorter, same file */
  .hn2h .hn2h-about__media img{width:100%;max-height:none;aspect-ratio:4/3;object-fit:cover;object-position:50% 12%}
  .hn2h .hn2h-about__in{gap:28px}
}

/* 3. STATS ------------------------------------------------------------- */
.hn2h .hn2h-stats .hn2h-wrap{padding-block:var(--hn2-pad) calc(var(--hn2-pad) + 24px)}
.hn2h .hn2h-kick--dark{color:var(--color-red-200)}           /* red-300 on navy = 3.9:1 (fails AA) → 6.3:1 */
.hn2h .hn2h-stats__grid{margin-top:clamp(28px,1rem + 2vw,40px)}
/* the last wave layer must be white = the next section, otherwise a
   light-blue band ends in a hard line */
/* [CC] each wave svg holds one path, so path:last-child hit all of them; the
   last *layer* (svg) is the one that must be solid white */
.hn2h .hn2h-stats .hn2mo-waves svg:last-child{opacity:1}
.hn2h .hn2h-stats .hn2mo-waves svg:last-child path{fill:#fff}

/* 4. CATEGORIES -------------------------------------------------------- */
.hn2h .hn2h-cats{padding-block:var(--hn2-pad-sm) var(--hn2-pad)}
.hn2h .hn2h-cats .hn2h-sep{margin-bottom:var(--hn2-pad-sm)}
.hn2h .hn2h-cat{border-color:var(--color-gray-300)}
.hn2h .hn2h-cats__grid .hn2h-cat .hn2h-cat__b{padding:14px 16px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 8px}
.hn2h .hn2h-cat__t{font-size:var(--fs-md);margin:0}
.hn2h .hn2h-cat__d{grid-column:1/-1;font-size:var(--fs-xs);line-height:1.6}
/* arrow chip sits next to the title, always visible (touch has no hover) */
.hn2h .hn2h-cats__grid .hn2h-cat .hn2h-cat__go{position:static;opacity:1;transform:none;width:26px;height:26px;font-size:14px;grid-row:1;grid-column:2}
.hn2h .hn2h-cat:hover .hn2h-cat__go{transform:translateX(-3px)}
@media(max-width:620px){
  .hn2h .hn2h-cats__grid{gap:12px}
  .hn2h .hn2h-cat__m{aspect-ratio:4/3}
  .hn2h .hn2h-cats__grid .hn2h-cat .hn2h-cat__b{padding:10px 12px 14px}
  .hn2h .hn2h-cat__d{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* 5. NEW PRODUCTS — "shelf": grey band + white packshot cards --------- */
.hn2h .hn2np{background:var(--color-gray-100);border-top:0;padding-block:0 var(--hn2-pad)}
/* [CC] full-width maritime stripe, identical to the one on top of the stats
   band (Gilad 29.09.2026: "why only on the right? like the other dividers").
   Design's original: a 120x8px tab at the start edge only. */
.hn2h .hn2np::before{content:"";display:block;width:100%;height:6px;margin:0;
  background:var(--stripe);background-size:60px 6px;border-radius:0}
.hn2h .hn2np-head{padding-top:clamp(32px,1.5rem + 2vw,56px);margin-bottom:24px;align-items:flex-end}
.hn2h .hn2np-grid{gap:16px}
.hn2h .hn2np-card{background:#fff;border:1px solid var(--color-gray-200);border-radius:16px;padding:10px 10px 16px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.hn2h .hn2np-img{background:#fff;border-radius:10px}
.hn2h .hn2np-img img{width:80%;height:80%}
.hn2h .hn2np-b{padding-inline:6px}
.hn2h .hn2np-cat{font-weight:600;color:var(--color-gray-500)}   /* 500 is not loaded */
.hn2h .hn2np-badge{background:var(--color-red-500);color:#fff;border:0}
.hn2h .hn2np-all{background:#fff;min-height:44px}
@media (hover:hover) and (pointer:fine){
  .hn2h .hn2np-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-navy-200)}
  .hn2h .hn2np-card:hover .hn2np-img{background:#fff}
}
/* [CC] tablets: one swipeable row (all 5 links visible) instead of hiding cards 4-5 */
@media(min-width:768px) and (max-width:1024px){
  .hn2h .hn2np-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:31%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:6px}
  .hn2h .hn2np-card,.hn2h .hn2np-card:nth-child(n+4){display:grid;scroll-snap-align:start}
}
@media(max-width:767px){
  .hn2h .hn2np-head{flex-wrap:nowrap;align-items:center}
  .hn2h .hn2np-titles{min-width:0}
  .hn2h .hn2np-all{padding:8px 12px;font-size:14px}
  .hn2h .hn2np-grid{grid-auto-columns:46%;gap:12px}
}

/* 6. LOGOS — compact white band, heading beside the marquee ------------ */
.hn2h .hn2h-logos{background:#fff;border-top:0;border-bottom:1px solid var(--color-gray-200);padding-block:var(--hn2-pad-sm)}
@media(min-width:900px){
  .hn2h .hn2h-logos .hn2h-wrap{display:flex;align-items:center;gap:40px}
  .hn2h .hn2h-logos .hn2h-sh{margin:0;flex:none;text-align:start;padding-inline-end:40px;border-inline-end:1px solid var(--color-gray-300)}
  .hn2h .hn2h-logos .hn2h-h2{font-size:var(--fs-xl)}
  .hn2h .hn2h-logos .hn2h-mq{flex:1;min-width:0}
}
.hn2h .hn2h-logo{width:156px;height:88px;padding:14px;border-radius:var(--radius-md);box-shadow:none}
.hn2h .hn2h-logo img{max-width:120px;max-height:56px}
@media(max-width:768px){
  .hn2h .hn2h-logos .hn2h-sh{margin-bottom:20px}
  .hn2h .hn2h-logo{width:124px;height:72px;padding:10px}
  .hn2h .hn2h-logo img{max-width:96px;max-height:46px}
}

/* 7. RECIPES — blue-white tile edge marks the home/B2C zone ------------ */
.hn2h .hn2h-rec{padding-block:0 var(--hn2-pad)}
.hn2h .hn2h-rec::before{content:"";display:block;height:12px;margin-bottom:var(--hn2-pad);
  background-color:#fff;background-image:repeating-conic-gradient(var(--color-navy-100) 0 25%,#fff 0 50%);background-size:24px 24px}
.hn2h .hn2rp-row{border-top:0;margin-top:32px;padding:18px 20px 20px;background:#fff;border:1px solid #ECE7D8;border-radius:16px}

/* 8. FAQ — cool grey, clearly different from the cream above ----------- */
.hn2h .hn2h-faq{background:var(--color-gray-100);padding-block:var(--hn2-pad)}
.hn2h .hn2h-faq__side{position:sticky;top:120px;align-self:flex-start}
.hn2h .hn2h-q summary{min-height:56px}
.hn2h .hn2h-q__ic{width:30px;height:30px;border-radius:50%;background:var(--color-red-50);color:var(--color-red-600);
  display:grid;place-items:center;font-size:20px}
@media(max-width:768px){
  .hn2h .hn2h-faq__side{position:static}
  .hn2h .hn2h-faq__ic{display:none}
  .hn2h .hn2h-q summary{min-height:52px}
}

/* 9. QUOTE FORM (Elementor, #quote) ------------------------------------ */
/* [CC] the form kicker on the live site is .hn2q__k (red-300 on navy) */
.hn2q .hn2q__k{color:var(--color-red-200)!important}            /* same AA fix as the stats kicker */

/* global: visible focus, and room for the floating quote button */
.hn2h a:focus-visible,.hn2h summary:focus-visible,.hn2h button:focus-visible{outline:3px solid var(--color-navy-400);outline-offset:3px;border-radius:6px}
/* [CC] no body padding-bottom: hn2-quote-cta.js already hides the floating
   button while the footer (#colophon) is on screen */

@media(prefers-reduced-motion:reduce){
  .hn2h .hn2np-card,.hn2h .hn2h-cat__go{transition:none}
  .hn2h .hn2np-card:hover{transform:none}
}