/* ==========================================================================
   NEX Wellness landing page — page-scoped styles.
   Everything is scoped under .nw-landing so nothing leaks onto the rest of
   nexoffic.com (shared navbar/footer/other division pages are untouched).
   Tokens copied verbatim from shop.nexoffic.com (see DESIGN_TOKENS.md at
   the project root, local reference only — not deployed).

   2026-09-28 rewrite: this is a SIDE page, not a destination — drastically
   shortened to 3 sections (compact hero, 4 best sellers, closing band).
   Rules for the removed sections (brand story, categories, ingredients,
   why-choose) were deleted rather than left dead — see git history for the
   previous version if any of that content is wanted back later.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Newsreader:ital,opsz,wght@1,6..72,300;1,6..72,400;0,6..72,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

.nw-landing {
  --nw-red:        #E47E75;
  --nw-red-light:  #FCEDEA;
  --nw-red-pale:   #F7A69E;

  --nw-paper:      #FCFAF9;
  --nw-paper-2:    #F5EFEC;
  --nw-ink:        #171214;
  --nw-muted:      #7A6E6B;
  --nw-line:       #EAE2DF;

  --nw-cap:   'Jost', sans-serif;
  --nw-serif: 'Newsreader', Georgia, serif;
  --nw-body:  'Inter', system-ui, sans-serif;

  --nw-fs-cap:11px; --nw-fs-sm:13.5px; --nw-fs-body:16px;
  --nw-fs-md:clamp(17px,1.3vw,19px); --nw-fs-xl:clamp(26px,3.6vw,42px);

  --nw-sp-2:12px; --nw-sp-3:16px; --nw-sp-4:24px; --nw-sp-5:32px; --nw-sp-6:48px;
  /* Deliberately smaller than a normal section rhythm — this page is a
     quick glimpse, not a scroll experience. */
  --nw-sp-band:clamp(28px,4vw,48px);

  --nw-container:1440px;
  --nw-gutter:clamp(20px,5vw,72px);

  --nw-ls-cap:.22em;

  --nw-radius-card:3px 3px 3px 42px;
  --nw-radius-hero:4px 4px 4px 96px;
  --nw-radius-pill:999px;

  display:block;
  font-family:var(--nw-body);
  font-size:var(--nw-fs-body);
  line-height:1.6;
  color:var(--nw-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

.nw-landing *{box-sizing:border-box}
.nw-landing img{max-width:100%;display:block}
.nw-landing a{color:inherit}

.nw-landing .nw-wrap{max-width:var(--nw-container);margin-inline:auto;padding-inline:var(--nw-gutter)}

.nw-landing .nw-cap{font-family:var(--nw-cap);font-weight:400;text-transform:uppercase;letter-spacing:.22em;font-size:11px;line-height:1}

.nw-landing .nw-title{font-family:var(--nw-serif);font-weight:400;font-size:var(--nw-fs-xl);line-height:1.1;letter-spacing:-.01em;color:var(--nw-ink);margin:0}
.nw-landing .nw-title em{font-style:italic;color:var(--nw-red)}

/* Buttons */
.nw-landing .nw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 28px;border-radius:var(--nw-radius-pill);
  background:var(--nw-ink);color:var(--nw-paper);
  font-family:var(--nw-cap);font-size:var(--nw-fs-cap);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--nw-ls-cap);
  text-decoration:none;border:none;cursor:pointer;
  transition:background .3s ease,transform .25s ease;
}
.nw-landing .nw-btn:hover,.nw-landing .nw-btn:focus-visible{background:var(--nw-red);color:var(--nw-paper);transform:translateY(-2px)}

/* Card-level small CTA (product cards — kept smaller than the hero/closing buttons) */
.nw-landing .nw-btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 18px;border-radius:var(--nw-radius-pill);
  background:var(--nw-ink);color:var(--nw-paper);
  font-family:var(--nw-cap);font-size:10px;font-weight:400;
  text-transform:uppercase;letter-spacing:var(--nw-ls-cap);
  text-decoration:none;border:none;cursor:pointer;width:100%;
  transition:background .3s ease;
}
.nw-landing .nw-btn-sm:hover,.nw-landing .nw-btn-sm:focus-visible{background:var(--nw-red)}

/* Accessible focus states */
.nw-landing a:focus-visible,.nw-landing button:focus-visible{
  outline:2px solid var(--nw-red);outline-offset:3px;border-radius:2px;
}
.nw-landing .nw-btn:focus-visible{outline:2px solid var(--nw-ink);outline-offset:3px}

/* Product card (mirrors shop.nexoffic.com .product-card — no price fields,
   no description line: image + name + CTA only, see report) */
.nw-landing .nw-product-card{position:relative}
.nw-landing .nw-product-card .nw-img-wrap{position:relative;overflow:hidden;background:var(--nw-paper-2);aspect-ratio:4/5;border-radius:var(--nw-radius-card)}
.nw-landing .nw-product-card .nw-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.nw-landing .nw-product-card:hover .nw-img-wrap img{transform:scale(1.05)}
.nw-landing .nw-product-card .nw-card-body{padding-top:10px}
.nw-landing .nw-product-card .nw-prod-name{font-size:.9rem;font-weight:600;color:var(--nw-ink);margin:0 0 8px}

/* ===== 1. Compact hero — NOT full viewport, image is desktop-only ===== */
.nw-landing .nw-hero{padding-block:var(--nw-sp-6);background:var(--nw-paper);display:flex;align-items:center}
.nw-landing .nw-hero-grid{display:grid;grid-template-columns:1fr;gap:var(--nw-sp-4);align-items:center;width:100%}
.nw-landing .nw-hero-logo{width:96px;margin-bottom:var(--nw-sp-3)}
.nw-landing .nw-hero-copy h1{margin:0 0 var(--nw-sp-2)}
.nw-landing .nw-hero-copy .nw-lede{max-width:440px;margin:0 0 var(--nw-sp-4);font-size:var(--nw-fs-md);color:var(--nw-muted)}
.nw-landing .nw-hero-media{display:none}
.nw-landing .nw-hero-media .nw-img-wrap{position:relative;overflow:hidden;border-radius:var(--nw-radius-hero);background:var(--nw-paper-2);aspect-ratio:1/1}
.nw-landing .nw-hero-media img{width:100%;height:100%;object-fit:cover}

/* ===== 2. Featured products — 4 in a row desktop, horizontal scroll-snap mobile ===== */
.nw-landing .nw-products{padding-block:var(--nw-sp-band)}
.nw-landing .nw-products-head{text-align:center;margin-bottom:var(--nw-sp-3)}
.nw-landing .nw-product-row{
  display:flex;gap:var(--nw-sp-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;margin-inline:calc(var(--nw-gutter) * -1);padding-inline:var(--nw-gutter);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.nw-landing .nw-product-row .nw-product-card{scroll-snap-align:start;flex:0 0 62%}

/* ===== 3. Closing band — inline trust row + single CTA ===== */
.nw-landing .nw-closing{background:var(--nw-paper-2);text-align:center;padding-block:var(--nw-sp-band)}
.nw-landing .nw-trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--nw-sp-2) var(--nw-sp-4);margin-bottom:var(--nw-sp-4)}
.nw-landing .nw-trust-item{font-family:var(--nw-cap);font-size:10.5px;letter-spacing:var(--nw-ls-cap);text-transform:uppercase;color:var(--nw-ink);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.nw-landing .nw-trust-item i{color:var(--nw-red)}

/* ===== Desktop (≥992px, Bootstrap lg breakpoint) ===== */
@media (min-width:992px){
  .nw-landing .nw-hero{min-height:56vh;max-height:640px}
  .nw-landing .nw-hero-grid{grid-template-columns:1.1fr .9fr;gap:var(--nw-sp-6)}
  .nw-landing .nw-hero-media{display:block}

  .nw-landing .nw-product-row{
    overflow-x:visible;display:grid;grid-template-columns:repeat(4,1fr);
    margin-inline:0;padding-inline:0;
  }
  .nw-landing .nw-product-row .nw-product-card{flex:none}
}