/* =========================================================================
   Norman Lamps — Homepage + Header Redesign
   Scope:   EVERY rule is gated by html[data-newhome="1"]. With the flag off
            (normal visitors) this file is completely inert.
   Preview: append ?newhome=1 to any URL (sets a 30-day cookie, mirrors the
            existing ?nlm mobile flag). ?newhome=0 opts back out.
   Created: 2026-05-28
   ========================================================================= */

/* ---- 1. Design tokens -------------------------------------------------- */
html[data-newhome="1"]{
  --nh-navy-deep:#0B2238;
  --nh-navy:#12324F;
  --nh-navy-2:#2D5C88;
  --nh-gold:#E9B949;
  --nh-gold-soft:#F4DD80;
  --nh-white:#FFFFFF;
  --nh-light:#F5F7FA;
  --nh-slate:#C9D6E3;
  --nh-gray:#6B7280;
  --nh-ink:#1F2937;
  --nh-radius:14px;
  --nh-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  --nh-maxw:1170px;
}

/* ---- 2. Hide the legacy homepage slideshow (the old hero) -------------- */
/* The slideshow module is assigned only to the Home layout's content_top,
   so this is homepage-only by nature. !important beats swiper inline styles. */
html[data-newhome="1"] .slideshow.swiper-viewport{ display:none !important; }

/* Utility: visually-hidden label (accessible search label) */
html[data-newhome="1"] .nli-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================================
   3. HERO  (markup lives in home.twig, hidden via [hidden] until flagged)
   ========================================================================= */
html[data-newhome="1"] #nli-hero{
  display:block;                 /* overrides the [hidden] attribute */
  position:relative;
  overflow:hidden;
  color:var(--nh-white);
  background:
    radial-gradient(1100px 380px at 82% 18%, rgba(233,185,73,.16), transparent 60%),
    radial-gradient(700px 300px at 8% 90%, rgba(45,92,136,.45), transparent 60%),
    linear-gradient(135deg, var(--nh-navy) 0%, var(--nh-navy-deep) 70%);
  padding:52px 16px 0;
}
/* Decorative gold light-streak (pure CSS, no raster) */
html[data-newhome="1"] #nli-hero::after{
  content:""; position:absolute; right:-8%; top:8%;
  width:60%; height:120%;
  background:
    linear-gradient(115deg, transparent 46%, rgba(244,221,128,.18) 50%, transparent 54%),
    linear-gradient(125deg, transparent 58%, rgba(233,185,73,.12) 61%, transparent 64%);
  transform:rotate(-6deg); pointer-events:none; z-index:0;
}
html[data-newhome="1"] .nli-hero__inner{
  position:relative; z-index:1;
  max-width:var(--nh-maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px; align-items:center;
}

/* --- Left: search-first core --- */
html[data-newhome="1"] .nli-hero__eyebrow{
  margin:0 0 12px; color:var(--nh-gold-soft);
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
html[data-newhome="1"] .nli-hero__title{
  margin:0 0 14px; color:var(--nh-white);
  font-family:"Open Sans",Arial,sans-serif; font-weight:700;
  font-size:clamp(32px,4.4vw,52px); line-height:1.04; letter-spacing:-.5px;
  text-shadow:none;
}
html[data-newhome="1"] .nli-hero__title span{ color:var(--nh-gold); }
html[data-newhome="1"] .nli-hero__sub{
  margin:0 0 22px; max-width:48ch;
  color:var(--nh-slate); font-size:16.5px; line-height:1.55;
}

/* Search box (native GET form -> index.php?route=product/search&search=...) */
html[data-newhome="1"] .nli-hero__search{
  display:flex; align-items:center; gap:8px;
  background:var(--nh-white); border-radius:10px; padding:6px 6px 6px 14px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6); max-width:560px;
}
html[data-newhome="1"] .nli-hero__search-icon{ color:var(--nh-gray); font-size:16px; flex:0 0 auto; }
html[data-newhome="1"] .nli-hero__search-input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  font-size:16px; color:var(--nh-ink); padding:12px 4px; height:auto;
}
html[data-newhome="1"] .nli-hero__search-input::placeholder{ color:#9aa3af; }
html[data-newhome="1"] .nli-hero__search-btn{
  flex:0 0 auto; cursor:pointer;
  background:var(--nh-gold); color:var(--nh-navy-deep);
  border:0; border-radius:7px; padding:12px 26px;
  font-size:15px; font-weight:700; letter-spacing:.01em;
  transition:background .15s ease, transform .05s ease;
}
html[data-newhome="1"] .nli-hero__search-btn:hover{ background:var(--nh-gold-soft); }
html[data-newhome="1"] .nli-hero__search-btn:active{ transform:translateY(1px); }

/* Popular-search chips + shop-by-category links */
html[data-newhome="1"] .nli-hero__chips,
html[data-newhome="1"] .nli-hero__cats{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px;
}
html[data-newhome="1"] .nli-hero__chips-label,
html[data-newhome="1"] .nli-hero__cats-label{
  color:#9fb1c4; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin-right:4px;
}
html[data-newhome="1"] .nli-chip,
html[data-newhome="1"] .nli-cat{
  display:inline-block; text-decoration:none;
  padding:7px 13px; border-radius:999px; font-size:13.5px; line-height:1;
  color:var(--nh-white); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); transition:all .15s ease;
}
html[data-newhome="1"] .nli-chip:hover,
html[data-newhome="1"] .nli-cat:hover{
  background:var(--nh-gold); color:var(--nh-navy-deep); border-color:var(--nh-gold);
}
html[data-newhome="1"] .nli-hero__cats{ margin-top:12px; }
html[data-newhome="1"] .nli-cat{ background:transparent; border-color:rgba(244,221,128,.5); color:var(--nh-gold-soft); }

/* --- Right: light spec/feature panel (white-bg JPGs composite cleanly) --- */
html[data-newhome="1"] .nli-hero__panel{
  position:relative; background:var(--nh-white); color:var(--nh-ink);
  border-radius:var(--nh-radius); box-shadow:var(--nh-shadow);
  padding:22px 24px; display:flex; flex-direction:column; gap:14px;
}
html[data-newhome="1"] .nli-hero__panel-tag{
  align-self:flex-start; background:var(--nh-navy); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:6px;
}
html[data-newhome="1"] .nli-hero__panel-body{
  display:flex; align-items:center; gap:18px;
}
html[data-newhome="1"] .nli-hero__product{
  flex:0 0 auto; width:auto; height:auto;
  max-height:230px; max-width:46%; object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.18));
}
html[data-newhome="1"] .nli-hero__specs{ list-style:none; margin:0; padding:0; flex:1 1 auto; }
html[data-newhome="1"] .nli-hero__specs li{
  position:relative; padding:6px 0 6px 26px;
  font-size:14.5px; color:#374151; border-bottom:1px solid #eef1f5;
}
html[data-newhome="1"] .nli-hero__specs li:last-child{ border-bottom:0; }
html[data-newhome="1"] .nli-hero__specs li::before{
  content:"\f00c"; font-family:FontAwesome; /* FA4 check */
  position:absolute; left:0; top:6px; color:var(--nh-gold); font-size:13px;
}

/* --- Trust / benefit strip --- */
html[data-newhome="1"] .nli-hero__trust{
  position:relative; z-index:1;
  max-width:var(--nh-maxw); margin:40px auto 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  padding:22px 0 26px;
}
html[data-newhome="1"] .nli-trust{ display:flex; align-items:flex-start; gap:12px; }
html[data-newhome="1"] .nli-trust i{ color:var(--nh-gold); font-size:22px; line-height:1.2; flex:0 0 auto; width:26px; text-align:center; }
html[data-newhome="1"] .nli-trust strong{ display:block; color:#fff; font-size:14px; font-weight:700; margin-bottom:2px; }
html[data-newhome="1"] .nli-trust span{ display:block; color:#9fb1c4; font-size:12.5px; line-height:1.4; }

/* =========================================================================
   4. GLOBAL HEADER + NAV restyle (CSS-only on existing DOM; flag-scoped)
      Palette-matches the hero: white header, navy accents, gold nav.
      header:not(.checkout-header) scope keeps the custom /checkout/ .checkout-header safe.
   ========================================================================= */
/* ---- Row 1: navy utility bar (.nli-topbar, additive markup in header.twig).
   The legacy absolute announcement strip is hidden; the topbar replaces it. */
html[data-newhome="1"] #bottom-message{ display:none !important; }
html[data-newhome="1"] .nli-topbar{
  display:block; background:var(--nh-navy-deep); color:#cdd9e6; position:relative; z-index:5;
}
html[data-newhome="1"] .nli-topbar__inner{
  display:flex; align-items:center; justify-content:space-between; min-height:40px;
}
html[data-newhome="1"] .nli-topbar__group{ display:flex; align-items:center; gap:24px; }
html[data-newhome="1"] .nli-topbar__link{
  color:#cdd9e6; text-decoration:none; font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; padding:9px 0; background:none; border:0; cursor:pointer;
}
html[data-newhome="1"] .nli-topbar__link:hover,
html[data-newhome="1"] .nli-topbar .open > .nli-topbar__link{ color:var(--nh-gold); }
html[data-newhome="1"] .nli-topbar__link .fa{ color:var(--nh-gold); }
html[data-newhome="1"] .nli-topbar__acct{ position:relative; }
html[data-newhome="1"] .nli-topbar__acct .dropdown-menu{ right:0; left:auto; }

/* ---- Row 2: white header band -> logo | wide search | cart ---- */
html[data-newhome="1"] header:not(.checkout-header){ background:#fff; padding:12px 0; }
/* old inline utility links now live in the navy topbar */
html[data-newhome="1"] header:not(.checkout-header) .list-inline.top{ display:none !important; }
/* brand name + tagline */
html[data-newhome="1"] header:not(.checkout-header) #logo{ float:none; margin:0; }
html[data-newhome="1"] header:not(.checkout-header) #logoname a{ color:var(--nh-navy-deep); }
html[data-newhome="1"] header:not(.checkout-header) #subtitlenli{ color:var(--nh-navy-2); }
/* re-flow the grid: logo hugs content, right side fills */
html[data-newhome="1"] header:not(.checkout-header) > .container > .row{
  display:flex; align-items:center; flex-wrap:nowrap; gap:26px; margin:0;
}
html[data-newhome="1"] header:not(.checkout-header) > .container > .row > .col-sm-6{ float:none; padding:0; }
html[data-newhome="1"] header:not(.checkout-header) > .container > .row > .col-sm-6:first-child{
  flex:0 0 auto; width:auto; max-width:40%;
}
html[data-newhome="1"] header:not(.checkout-header) > .container > .row > .col-sm-6:last-child{
  flex:1 1 auto; width:auto;
}
/* inner search/cart row: search grows, cart fixed */
html[data-newhome="1"] header:not(.checkout-header) .col-sm-6:last-child > .row{
  display:flex; align-items:center; flex-wrap:nowrap; gap:14px; margin:0;
}
html[data-newhome="1"] header:not(.checkout-header) .col-sm-6:last-child > .row > .col-sm-7{
  flex:1 1 auto; width:auto; float:none; padding:0;
}
html[data-newhome="1"] header:not(.checkout-header) .col-sm-6:last-child > .row > .col-sm-5{
  flex:0 0 auto; width:auto; float:none; padding:0;
}
/* search box (keep #search id/structure; restyle only) */
html[data-newhome="1"] header:not(.checkout-header) #search{ margin-bottom:0; }
html[data-newhome="1"] header:not(.checkout-header) #search .input-lg{
  height:46px; border:1px solid #cdd6e0; border-right:0; box-shadow:none; border-radius:6px 0 0 6px;
}
html[data-newhome="1"] header:not(.checkout-header) #search .input-lg:focus{ border-color:var(--nh-gold); }
html[data-newhome="1"] header:not(.checkout-header) #search .btn{
  height:46px; background:var(--nh-navy) !important; border-color:var(--nh-navy) !important; color:#fff !important;
  border-radius:0 6px 6px 0;
}
html[data-newhome="1"] header:not(.checkout-header) #search .btn:hover{ background:var(--nh-navy-deep) !important; }
/* cart button */
html[data-newhome="1"] header:not(.checkout-header) #cart{ margin-bottom:0; }
html[data-newhome="1"] header:not(.checkout-header) #cart > .btn{
  height:46px; background:var(--nh-navy) !important; border-color:var(--nh-navy) !important; color:#fff !important;
  border-radius:6px; display:inline-flex; align-items:center; gap:8px;
}
html[data-newhome="1"] header:not(.checkout-header) #cart > .btn .fa{ color:var(--nh-gold); }
html[data-newhome="1"] header:not(.checkout-header) #cart.open > .btn{ background:#fff !important; color:var(--nh-navy) !important; }

/* ---- Row 3: gold category nav (#menu is OUTSIDE <header>) ---- */
html[data-newhome="1"] #menu{
  background:var(--nh-gold-soft) !important;
  border:0 !important; border-top:3px solid var(--nh-gold) !important;
  box-shadow:0 2px 6px -3px rgba(0,0,0,.3);
}
html[data-newhome="1"] #menu .nav > li > a{
  color:var(--nh-navy-deep); font-weight:700; font-size:1.18em;
}
html[data-newhome="1"] #menu .nav > li:hover{ background:rgba(11,34,56,.10); }
html[data-newhome="1"] #menu .btn-navbar{ background:var(--nh-navy-deep) !important; color:#fff; }

/* ---- Header responsive (flagged only) ---- */
@media (max-width:991px){
  html[data-newhome="1"] header:not(.checkout-header) > .container > .row{ gap:16px; }
  html[data-newhome="1"] header:not(.checkout-header) #logoname{ font-size:30px; }
}
@media (max-width:767px){
  html[data-newhome="1"] .nli-topbar__inner{ flex-wrap:wrap; justify-content:center; gap:6px 16px; min-height:0; padding:6px 0; }
  html[data-newhome="1"] .nli-topbar__group{ gap:14px; }
  html[data-newhome="1"] header:not(.checkout-header) > .container > .row{ flex-wrap:wrap; gap:12px; }
  html[data-newhome="1"] header:not(.checkout-header) > .container > .row > .col-sm-6:first-child{ flex:1 1 100%; max-width:100%; text-align:center; }
  html[data-newhome="1"] header:not(.checkout-header) > .container > .row > .col-sm-6:last-child{ flex:1 1 100%; }
}

/* =========================================================================
   5. RESPONSIVE
   ========================================================================= */
/* Tablet & down: stack hero to one column, panel below the search core */
@media (max-width:991px){
  html[data-newhome="1"] .nli-hero__inner{ grid-template-columns:1fr; gap:28px; }
  html[data-newhome="1"] .nli-hero__panel{ order:2; }
  html[data-newhome="1"] .nli-hero__trust{ grid-template-columns:repeat(2,1fr); gap:14px 22px; }
}
/* Mobile */
@media (max-width:767px){
  html[data-newhome="1"] #nli-hero{ padding:34px 16px 0; }
  html[data-newhome="1"] .nli-hero__search{ flex-wrap:nowrap; }
  html[data-newhome="1"] .nli-hero__search-btn{ padding:12px 18px; }
  html[data-newhome="1"] .nli-hero__sub{ font-size:15.5px; }
  html[data-newhome="1"] .nli-hero__panel-body{ gap:14px; }
  html[data-newhome="1"] .nli-hero__product{ max-height:170px; }
}
@media (max-width:480px){
  html[data-newhome="1"] .nli-hero__trust{ grid-template-columns:1fr; }
  html[data-newhome="1"] .nli-hero__title{ font-size:30px; }
  html[data-newhome="1"] .nli-hero__panel-body{ flex-direction:column; text-align:center; }
  html[data-newhome="1"] .nli-hero__product{ max-width:60%; max-height:200px; }
  html[data-newhome="1"] .nli-hero__specs{ width:100%; }
}

/* =========================================================================
   6. NLM mobile reconciliation
   NLM (nlm-shell.css) hides the legacy header/menu/slideshow on phones and
   renders its own fixed topbar. The hero lives OUTSIDE those elements, so it
   survives — just clear NLM's fixed topbar so the hero isn't tucked under it.
   ========================================================================= */
html[data-newhome="1"][data-nlm-mobile="1"] #nli-hero{
  margin-top:var(--nlm-h-topbar,56px);
}
/* The header restyle targets a hidden element under NLM; nothing to fight. */