/* NNB GIDA V330 — PRODUCT INDEX
   Built directly on V321 stable core.
   One presentation layer only. No V323–V329 theme inheritance. */

:root{
  --idx-bg:#f3f4f5;
  --idx-paper:#ffffff;
  --idx-ink:#0d0f12;
  --idx-graphite:#15191f;
  --idx-muted:#858b94;
  --idx-line:#e2e5e9;
  --idx-line-2:#d6dae0;
  --idx-silver:#aeb4bd;
}

html{background:var(--idx-bg)!important}
body{
  background:
    radial-gradient(100% 36% at 50% -10%,rgba(255,255,255,.96),transparent 65%),
    linear-gradient(180deg,#f8f9fa 0%,#f3f4f5 55%,#eef0f2 100%)!important;
  color:var(--idx-ink)!important;
}
body .app{max-width:1120px!important;background:transparent!important}

/* HEADER: utility bar, not a large floating capsule */
body .apple-topbar{
  height:52px!important;
  margin:0 0 12px!important;
  padding:0 1px!important;
  border-radius:0!important;
  background:rgba(247,248,249,.88)!important;
  border:0!important;
  border-bottom:1px solid rgba(13,15,18,.075)!important;
  box-shadow:none!important;
  backdrop-filter:blur(20px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(130%)!important;
}
body .iconbtn{
  width:39px!important;height:39px!important;
  border-radius:12px!important;
  background:#fff!important;
  border:1px solid var(--idx-line)!important;
  box-shadow:0 3px 10px rgba(13,15,18,.04)!important;
}
body .iconbtn svg{stroke:#14171b!important;stroke-width:2.05!important}
body .center-mark{
  width:39px!important;height:39px!important;border-radius:12px!important;
  background:#fff!important;border:1px solid var(--idx-line)!important;
  box-shadow:0 3px 10px rgba(13,15,18,.045)!important;
}
body .center-mark img{width:34px!important;height:34px!important;filter:none!important}

/* INDEX MASTHEAD */
body .v330-index-head{
  display:grid!important;
  grid-template-columns:166px minmax(0,1fr)!important;
  gap:10px!important;
  margin:0 0 16px!important;
  align-items:stretch!important;
}
body .v330-index-mark{
  min-height:100%!important;
  padding:18px 16px!important;
  border-radius:20px!important;
  background:
    radial-gradient(120% 90% at 0 0,rgba(255,255,255,.08),transparent 45%),
    linear-gradient(155deg,#1b2027 0%,#11151a 62%,#090c10 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 14px 34px rgba(10,12,16,.12)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  position:relative!important;
  overflow:hidden!important;
}
body .v330-index-mark:before{
  content:""!important;
  position:absolute!important;top:15px!important;left:15px!important;
  width:28px!important;height:2px!important;background:#fff!important;opacity:.9!important;
}
body .v330-index-mark:after{
  content:""!important;
  position:absolute!important;right:-42px!important;top:-42px!important;
  width:110px!important;height:110px!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 0 0 22px rgba(255,255,255,.018),0 0 0 44px rgba(255,255,255,.012)!important;
}
body .v330-index-mark span{
  color:#aeb4bd!important;
  font-size:8px!important;font-weight:900!important;letter-spacing:.22em!important;
}
body .v330-index-mark b{
  display:block!important;
  margin-top:7px!important;
  color:#fff!important;
  font-size:22px!important;line-height:.91!important;
  font-weight:920!important;letter-spacing:-.05em!important;
}
body .v330-index-mark i{
  display:block!important;
  margin-top:13px!important;
  color:#727984!important;
  font-size:9px!important;font-weight:850!important;
  font-style:normal!important;letter-spacing:.16em!important;
}

body .v330-brand-wall,
body .apple-hero.v330-brand-wall{
  margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
body .v330-brand-wall .apple-hero-visual{
  height:100%!important;min-height:235px!important;
  aspect-ratio:auto!important;
  border-radius:20px!important;
  background:#fff!important;
  border:1px solid rgba(13,15,18,.075)!important;
  box-shadow:0 14px 34px rgba(13,15,18,.06)!important;
}
body .v330-brand-wall .apple-hero-visual img{
  width:100%!important;height:100%!important;object-fit:cover!important;
  filter:saturate(.94) contrast(1.01) brightness(1.005)!important;
  transform:scale(1.004)!important;
}
body .v330-brand-wall .apple-hero-visual:before{opacity:.08!important}
body .v330-brand-wall .apple-hero-visual:after{opacity:.05!important}

/* FINDER: monochrome command strip */
body .v330-finder,
body .apple-tools.v330-finder{
  margin:0 0 21px!important;
  padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
body .v330-finder-row{
  display:grid!important;
  grid-template-columns:96px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:stretch!important;
}
body .v330-find-label{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:54px!important;
  border-radius:14px!important;
  background:#15191f!important;
  color:#fff!important;
  font-size:8.5px!important;font-weight:900!important;letter-spacing:.17em!important;
}
body .v330-finder .search,
body .v330-finder .apple-search{
  height:54px!important;
  border-radius:14px!important;
  padding:0 17px!important;
  background:#fff!important;
  border:1px solid var(--idx-line)!important;
  box-shadow:0 6px 18px rgba(13,15,18,.035)!important;
}
body .v330-finder .apple-search svg{
  width:19px!important;height:19px!important;stroke:#747a83!important;
}
body .v330-finder .apple-search input{
  color:#16191d!important;-webkit-text-fill-color:#16191d!important;
  font-size:14.5px!important;font-weight:690!important;letter-spacing:-.015em!important;
}
body .v330-finder .apple-search input::placeholder{
  color:#92979f!important;-webkit-text-fill-color:#92979f!important;opacity:1!important;
}
body .v330-finder .search:focus-within{
  border-color:#cbd0d6!important;
  box-shadow:0 0 0 3px rgba(13,15,18,.03),0 9px 23px rgba(13,15,18,.05)!important;
}

/* CATEGORY INDEX: text tabs, not pills */
body .v330-finder .chips{
  display:flex!important;
  gap:0!important;
  min-height:47px!important;
  margin:7px 0 0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid var(--idx-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
body .v330-finder .chips::-webkit-scrollbar{display:none!important}
body .v330-finder .chip{
  position:relative!important;
  flex:0 0 auto!important;
  min-height:46px!important;
  padding:0 16px!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#747a83!important;
  font-size:11.5px!important;
  font-weight:820!important;
  letter-spacing:-.015em!important;
}
body .v330-finder .chip:after{
  content:""!important;
  position:absolute!important;
  left:15px!important;right:15px!important;bottom:-1px!important;
  height:2px!important;
  background:transparent!important;
}
body .v330-finder .chip small{
  min-width:auto!important;height:auto!important;
  padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  color:#a0a5ac!important;
  font-size:9px!important;font-weight:850!important;
}
body .v330-finder .chip.active{
  background:transparent!important;
  color:#111419!important;
  border:0!important;
  box-shadow:none!important;
}
body .v330-finder .chip.active:after{background:#111419!important}
body .v330-finder .chip.active small{background:transparent!important;color:#444a52!important}
@media(hover:hover){
  body .v330-finder .chip:hover{transform:none!important;color:#171a1f!important}
}

/* SHELF HEADER: publication-like */
body .v330-section-head,
body .section-head.v330-section-head{
  min-height:62px!important;
  margin:0 0 13px!important;
  padding:0 0 11px!important;
  align-items:end!important;
  border-bottom:1px solid var(--idx-line)!important;
}
body .v330-section-head:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;bottom:-1px!important;
  width:64px!important;height:2px!important;
  background:#111419!important;
}
body .v330-section-head:after{display:none!important}
body .v330-section-head .section-kicker{
  color:#91969e!important;
  font-size:8px!important;font-weight:900!important;letter-spacing:.27em!important;
}
body .v330-section-head h2{
  margin-top:5px!important;
  color:#0f1114!important;
  font-size:32px!important;line-height:.9!important;
  font-weight:920!important;letter-spacing:-.06em!important;
}
body .v330-section-head #count{
  min-height:34px!important;
  padding:0 0 0 14px!important;
  border:0!important;border-left:1px solid var(--idx-line-2)!important;
  border-radius:0!important;
  background:transparent!important;color:#4c525a!important;
  box-shadow:none!important;
  font-size:9px!important;font-weight:900!important;letter-spacing:.13em!important;
}

/* PRODUCT INDEX CARDS: no outer card shell; image + data plate */
body #grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:22px 14px!important;
}
body #grid>.card{
  display:block!important;
  min-width:0!important;
  background:transparent!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body #grid>.card:before,
body #grid>.card:after{display:none!important}
body #grid .card-visual{
  width:100%!important;
  aspect-ratio:1/1.02!important;
  margin:0!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 50% 18%,#fff 0 19%,rgba(255,255,255,.82) 35%,transparent 58%),
    linear-gradient(180deg,#fff 0%,#f9fafb 72%,#f0f2f4 100%)!important;
  border:1px solid #e6e8eb!important;
  box-shadow:0 8px 22px rgba(13,15,18,.035)!important;
}
body #grid .card-visual:before{
  left:25%!important;right:25%!important;bottom:8%!important;
  height:8%!important;opacity:.42!important;filter:blur(8px)!important;
}
body #grid .card-visual:after{opacity:.17!important}
body #grid .card-visual img{
  width:100%!important;height:100%!important;
  padding:9% 7% 13%!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 11px 13px rgba(13,15,18,.08))!important;
}
body #grid>.card .card-body{
  min-height:96px!important;
  padding:10px 2px 0!important;
  background:transparent!important;
}
body #grid .cat{
  color:#91969e!important;
  font-size:6.8px!important;font-weight:850!important;letter-spacing:.16em!important;
}
body #grid .card-weight{
  min-height:20px!important;
  padding:0 7px!important;
  border-radius:7px!important;
  background:#e9ecef!important;
  border:0!important;
  color:#4d535b!important;
  font-size:8px!important;
}
body #grid .name{
  min-height:35px!important;max-height:35px!important;
  margin:7px 0 8px!important;
  color:#111317!important;
  font-size:14px!important;line-height:1.05!important;
  font-weight:900!important;letter-spacing:-.04em!important;
}
body #grid .card-foot{
  min-height:26px!important;
  padding-top:7px!important;
  border-top:1px solid #e4e7ea!important;
}
body #grid .card-brand{
  color:#777d86!important;
  font-size:6.5px!important;font-weight:850!important;letter-spacing:.14em!important;
}
body #grid .card-open-label{
  display:inline!important;
  color:#737983!important;
  font-size:7px!important;font-weight:850!important;
}
body #grid .card-arrow{
  width:24px!important;height:24px!important;
  border-radius:7px!important;
  background:#15191f!important;color:#fff!important;
  box-shadow:none!important;
}
@media(hover:hover){
  body #grid>.card:hover{transform:none!important;box-shadow:none!important}
  body #grid>.card:hover .card-visual{
    transform:translateY(-2px)!important;
    border-color:#d9dde2!important;
    box-shadow:0 14px 30px rgba(13,15,18,.055)!important;
  }
  body #grid>.card:hover .card-visual img{
    transform:scale(1.014)!important;
    filter:drop-shadow(0 14px 16px rgba(13,15,18,.10))!important;
  }
}

/* DETAIL: product dossier */
body #detailModal{
  background:#f5f6f7!important;
  border:1px solid #dde1e5!important;
  box-shadow:0 28px 78px rgba(9,12,16,.20)!important;
}
body #detailModal .detail-browserbar{
  background:#12161c!important;
  border-color:rgba(255,255,255,.07)!important;
}
body #detailModal .detail-photo{
  background:#fff!important;border-color:#e5e8eb!important;
  box-shadow:none!important;
}
body #detailModal .detail-info{
  background:#fff!important;border-color:#e3e6ea!important;
  box-shadow:none!important;
}
body #detailModal .detail-name,
body #detailModal .detail-value{color:#101216!important}
body #detailModal .detail-category,
body #detailModal .detail-brand,
body #detailModal .detail-spec,
body #detailModal .detail-desc{color:#6e747d!important}

/* FOOTER: recede */
body .signature-footer{
  margin-top:30px!important;
  background:transparent!important;
  border:0!important;border-top:1px solid var(--idx-line)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Tablet */
@media(max-width:920px){
  body #grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Mobile: keep visual browsing fast, but remove "card" feeling */
@media(max-width:700px){
  html,body,body .app{background:#f3f4f5!important}
  body .app{padding-left:14px!important;padding-right:14px!important}
  body .apple-topbar{height:50px!important;margin-bottom:10px!important}

  body .v330-index-head{
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-bottom:14px!important;
  }
  body .v330-index-mark{
    min-height:48px!important;
    padding:0 13px!important;
    border-radius:13px!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:8px!important;
    box-shadow:0 8px 20px rgba(10,12,16,.10)!important;
  }
  body .v330-index-mark:before,
  body .v330-index-mark:after{display:none!important}
  body .v330-index-mark span{
    font-size:7px!important;letter-spacing:.17em!important;
  }
  body .v330-index-mark b{
    margin:0!important;
    font-size:12px!important;line-height:1!important;
    letter-spacing:-.02em!important;
  }
  body .v330-index-mark i{
    margin:0!important;
    font-size:7px!important;letter-spacing:.11em!important;
  }

  body .v330-brand-wall .apple-hero-visual{
    min-height:0!important;height:auto!important;
    aspect-ratio:1536/844!important;
    border-radius:16px!important;
    box-shadow:0 9px 24px rgba(13,15,18,.045)!important;
  }

  body .v330-finder{margin-bottom:18px!important}
  body .v330-finder-row{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:6px!important;
  }
  body .v330-find-label{
    min-height:51px!important;border-radius:12px!important;
    font-size:7px!important;letter-spacing:.12em!important;
  }
  body .v330-finder .search,
  body .v330-finder .apple-search{
    height:51px!important;border-radius:12px!important;padding:0 14px!important;
  }
  body .v330-finder .apple-search input{font-size:13.5px!important}
  body .v330-finder .chips{
    min-height:44px!important;margin-top:5px!important;
  }
  body .v330-finder .chip{
    min-height:43px!important;
    padding:0 13px!important;
    font-size:10.5px!important;
  }
  body .v330-finder .chip:after{left:12px!important;right:12px!important}

  body .v330-section-head{
    min-height:56px!important;margin-bottom:11px!important;padding-bottom:9px!important;
  }
  body .v330-section-head h2{font-size:29px!important}
  body .v330-section-head #count{
    min-height:31px!important;padding-left:10px!important;font-size:8px!important;
  }

  body #grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 10px!important;
  }
  body #grid .card-visual{
    aspect-ratio:1/1.04!important;
    border-radius:14px!important;
    box-shadow:0 6px 17px rgba(13,15,18,.03)!important;
  }
  body #grid .card-visual img{
    padding:8% 6% 12%!important;
    filter:drop-shadow(0 10px 12px rgba(13,15,18,.075))!important;
  }
  body #grid>.card .card-body{
    min-height:90px!important;
    padding:9px 1px 0!important;
  }
  body #grid .name{
    min-height:34px!important;max-height:34px!important;
    margin:6px 0 7px!important;
    font-size:13px!important;
  }
  body #grid .card-open-label{display:none!important}
  body #grid .card-arrow{
    width:23px!important;height:23px!important;border-radius:7px!important;
  }

  /* mobile product dossier becomes a clean bottom sheet */
  body #detailModal{
    top:auto!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:min(90dvh,780px)!important;max-height:90dvh!important;
    border-radius:26px 26px 0 0!important;
    border-left:0!important;border-right:0!important;border-bottom:0!important;
    transform:translateY(105%) scale(1)!important;
    box-shadow:0 -24px 70px rgba(9,12,16,.21)!important;
  }
  body #detailModal.show{transform:translateY(0) scale(1)!important}
  body #detailModal.closing{transform:translateY(105%) scale(1)!important}
}

@media(max-width:370px){
  body .app{padding-left:11px!important;padding-right:11px!important}
  body .v330-finder-row{grid-template-columns:64px minmax(0,1fr)!important}
  body .v330-find-label{font-size:6.5px!important}
  body #grid{gap:16px 8px!important}
  body #grid .name{font-size:12.2px!important}
}

@media(prefers-reduced-motion:reduce){
  body .chip,
  body #grid .card-visual,
  body #grid .card-visual img,
  body #detailModal{transition:none!important}
}


/* =========================================================
   V331 EXECUTIVE INDEX — maturity pass based on real iPhone view
   Less technical, less vertical waste, more visible product data.
   ========================================================= */
:root{
  --v331-bg:#f5f6f7;
  --v331-paper:#fff;
  --v331-ink:#111317;
  --v331-muted:#7b818a;
  --v331-line:#e3e6ea;
  --v331-dark:#15191f;
}
html{background:var(--v331-bg)!important}
body{
  background:linear-gradient(180deg,#fafbfc 0%,#f5f6f7 48%,#f1f3f5 100%)!important;
}

/* Header gets thinner and visually disappears into the page. */
body .apple-topbar{
  height:48px!important;
  margin-bottom:9px!important;
  border-bottom-color:rgba(17,19,23,.065)!important;
}
body .iconbtn,body .center-mark{
  width:37px!important;height:37px!important;min-width:37px!important;
  border-radius:11px!important;
}
body .center-mark img{width:32px!important;height:32px!important}

/* Brand rail: a quiet signature, not a hero block. */
body .v330-index-head{
  grid-template-columns:132px minmax(0,1fr)!important;
  gap:9px!important;
  margin-bottom:12px!important;
}
body .v330-index-mark{
  padding:13px 13px!important;
  border-radius:15px!important;
  background:linear-gradient(155deg,#191d23,#101419)!important;
  box-shadow:0 8px 22px rgba(10,12,16,.09)!important;
}
body .v330-index-mark:before{top:12px!important;left:13px!important;width:22px!important;height:1px!important;opacity:.58!important}
body .v330-index-mark:after{display:none!important}
body .v330-index-mark span{
  font-size:7px!important;letter-spacing:.20em!important;color:#a8aeb7!important;
}
body .v330-index-mark b{
  margin-top:6px!important;
  font-size:13px!important;line-height:1.05!important;
  font-weight:780!important;letter-spacing:-.018em!important;
  color:#f4f5f7!important;
}
body .v330-index-mark i{
  margin-top:9px!important;font-size:7px!important;letter-spacing:.12em!important;color:#707781!important;
}

/* Banner is shorter / calmer, without damaging the actual artwork. */
body .v330-brand-wall .apple-hero-visual{
  min-height:205px!important;
  border-radius:16px!important;
  box-shadow:0 9px 25px rgba(13,15,18,.045)!important;
}
body .v330-brand-wall .apple-hero-visual img{
  filter:saturate(.96) contrast(1.008) brightness(1.005)!important;
}

/* Finder becomes one single command bar. */
body .v330-finder{margin-bottom:16px!important}
body .v330-finder-row{
  display:block!important;
}
body .v330-find-label{display:none!important}
body .v330-finder .search,
body .v330-finder .apple-search{
  height:51px!important;
  border-radius:13px!important;
  padding:0 16px!important;
  border-color:#dfe3e7!important;
  box-shadow:0 4px 14px rgba(13,15,18,.028)!important;
}
body .v330-finder .apple-search input{
  font-size:14px!important;font-weight:660!important;
}
body .v330-finder .chips{
  min-height:42px!important;
  margin-top:4px!important;
}
body .v330-finder .chip{
  min-height:41px!important;
  padding:0 15px!important;
  color:#777d86!important;
}
body .v330-finder .chip:after{height:1.5px!important}
body .v330-finder .chip.active{color:#111317!important}

/* Category title is reduced to one editorial line. */
body .v330-section-head,
body .section-head.v330-section-head{
  min-height:50px!important;
  margin-bottom:10px!important;
  padding-bottom:8px!important;
}
body .v330-section-head:before{width:48px!important;height:1.5px!important}
body .v330-section-head .section-kicker{
  font-size:7.4px!important;letter-spacing:.23em!important;
}
body .v330-section-head h2{
  margin-top:4px!important;
  font-size:29px!important;
  letter-spacing:-.058em!important;
}
body .v330-section-head #count{
  min-height:28px!important;
  padding-left:11px!important;
  font-size:8px!important;
  border-left-color:#d9dde2!important;
}

/* Gallery cards: almost borderless, shorter image stage so name appears sooner. */
body #grid{gap:19px 12px!important}
body #grid .card-visual{
  aspect-ratio:1/.91!important;
  border-radius:14px!important;
  border-color:#e9ebee!important;
  box-shadow:0 5px 15px rgba(13,15,18,.025)!important;
  background:
    radial-gradient(circle at 50% 16%,#fff 0 20%,rgba(255,255,255,.84) 36%,transparent 61%),
    linear-gradient(180deg,#fff 0%,#fafbfc 70%,#f2f4f6 100%)!important;
}
body #grid .card-visual img{
  padding:12% 9% 16%!important;
  filter:drop-shadow(0 9px 11px rgba(13,15,18,.07))!important;
}
body #grid>.card .card-body{
  min-height:88px!important;
  padding-top:8px!important;
}
body #grid .name{
  min-height:33px!important;max-height:33px!important;
  margin:5px 0 6px!important;
  font-size:13.5px!important;
}
body #grid .card-foot{padding-top:6px!important}
body #grid .card-arrow{
  width:23px!important;height:23px!important;border-radius:7px!important;
}

/* Cleaner modal material. */
body #detailModal{background:#f7f8f9!important}
body #detailModal .detail-browserbar{background:#15191f!important}

@media(max-width:700px){
  html,body,body .app{background:#f5f6f7!important}
  body .app{padding-left:13px!important;padding-right:13px!important}
  body .apple-topbar{
    height:46px!important;
    margin-bottom:7px!important;
    padding:3px 3px!important;
  }
  body .iconbtn,body .center-mark{
    width:36px!important;height:36px!important;min-width:36px!important;
  }
  body .center-mark img{width:31px!important;height:31px!important}

  /* Mobile brand rail is just 36px high. */
  body .v330-index-head{
    gap:6px!important;
    margin-bottom:11px!important;
  }
  body .v330-index-mark{
    min-height:36px!important;height:36px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    grid-template-columns:auto 1fr auto!important;
    box-shadow:0 5px 14px rgba(10,12,16,.075)!important;
  }
  body .v330-index-mark span{font-size:6.3px!important;letter-spacing:.15em!important}
  body .v330-index-mark b{
    font-size:9.5px!important;font-weight:720!important;
    text-align:center!important;white-space:nowrap!important;
  }
  body .v330-index-mark i{font-size:6.2px!important;color:#838a94!important}

  /* Reduce banner footprint by width + light crop, while keeping all main brands readable. */
  body .v330-brand-wall{
    width:96%!important;
    margin:0 auto!important;
  }
  body .v330-brand-wall .apple-hero-visual{
    width:100%!important;
    aspect-ratio:1.92/1!important;
    min-height:0!important;height:auto!important;
    border-radius:14px!important;
    box-shadow:0 6px 18px rgba(13,15,18,.035)!important;
  }
  body .v330-brand-wall .apple-hero-visual img{
    object-fit:cover!important;
    object-position:center 49%!important;
    transform:scale(1.002)!important;
  }

  body .v330-finder{margin-bottom:13px!important}
  body .v330-finder .search,
  body .v330-finder .apple-search{
    height:48px!important;min-height:48px!important;
    border-radius:12px!important;
    padding:0 13px!important;
  }
  body .v330-finder .apple-search svg{width:18px!important;height:18px!important}
  body .v330-finder .apple-search input{font-size:13.2px!important}
  body .v330-finder .chips{
    min-height:39px!important;margin-top:2px!important;
  }
  body .v330-finder .chip{
    min-height:38px!important;
    padding:0 12px!important;
    font-size:10px!important;
  }

  body .v330-section-head,
  body .section-head.v330-section-head{
    min-height:46px!important;
    margin-bottom:8px!important;
    padding-bottom:7px!important;
  }
  body .v330-section-head h2{font-size:27px!important}
  body .v330-section-head #count{
    min-height:25px!important;padding-left:9px!important;font-size:7.5px!important;
  }

  body #grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px 9px!important;
  }
  body #grid .card-visual{
    aspect-ratio:1/.82!important;
    border-radius:13px!important;
    border-color:#ebedf0!important;
    box-shadow:0 4px 12px rgba(13,15,18,.022)!important;
  }
  body #grid .card-visual img{
    padding:13% 9% 17%!important;
    filter:drop-shadow(0 8px 10px rgba(13,15,18,.065))!important;
  }
  body #grid>.card .card-body{
    min-height:82px!important;
    padding:7px 1px 0!important;
  }
  body #grid .cat{font-size:6.4px!important}
  body #grid .card-weight{min-height:18px!important;font-size:7.5px!important}
  body #grid .name{
    min-height:31px!important;max-height:31px!important;
    margin:5px 0 5px!important;
    font-size:12.5px!important;
  }
  body #grid .card-foot{min-height:23px!important;padding-top:5px!important}
  body #grid .card-arrow{width:22px!important;height:22px!important}
}

@media(max-width:370px){
  body .app{padding-left:10px!important;padding-right:10px!important}
  body .v330-index-mark b{font-size:9px!important}
  body .v330-finder .chip{padding:0 11px!important}
  body #grid{gap:15px 8px!important}
  body #grid .name{font-size:11.8px!important}
}


/* ============================================================
   NNB GIDA V332 — EXECUTIVE BALANCE
   Real-device balance correction:
   - 820px breakpoint so narrow/tablet-like phone view cannot use desktop masthead
   - centered brand artwork
   - no clipped catalog rail
   - less vertical dead space
   - keeps V331 product cards/data hierarchy intact
   ============================================================ */

:root{
  --v332-bg:#f5f6f7;
  --v332-ink:#111317;
  --v332-line:#e2e5e9;
  --v332-dark:#15191f;
}

/* Global executive spacing */
body .app{
  max-width:1080px!important;
}
body .apple-topbar{
  margin-bottom:7px!important;
}
body .v330-finder{
  margin-bottom:12px!important;
}
body .v330-section-head,
body .section-head.v330-section-head{
  margin-top:0!important;
}

/* Desktop/tablet brand composition: balanced rather than tiny banner + heavy label. */
@media(min-width:821px){
  body .v330-index-head{
    grid-template-columns:156px minmax(0,1fr)!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }
  body .v330-index-mark{
    min-width:0!important;
    overflow:hidden!important;
  }
  body .v330-index-mark b{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body .v330-brand-wall .apple-hero-visual{
    min-height:190px!important;
  }
}

/*
  IMPORTANT REAL-DEVICE FIX:
  The user's browser is rendering the screenshot around the old 700px cutoff.
  Up to 820px we force a true phone/tablet composition.
*/
@media(max-width:820px){
  html,body,body .app{background:#f5f6f7!important}
  body .app{
    padding-left:13px!important;
    padding-right:13px!important;
  }

  /* Top navigation tighter, with more breathing room below logo than around it. */
  body .apple-topbar{
    height:46px!important;
    min-height:46px!important;
    margin:0 0 8px!important;
    padding:2px 2px 4px!important;
  }
  body .iconbtn,
  body .center-mark{
    width:36px!important;height:36px!important;min-width:36px!important;
    border-radius:11px!important;
  }
  body .center-mark img{width:31px!important;height:31px!important}

  /* Brand section is now a vertical composition at ALL phone/tablet widths. */
  body .v330-index-head{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    width:100%!important;
    gap:6px!important;
    margin:0 0 11px!important;
    overflow:visible!important;
  }

  /* Full-width slim catalog rail: cannot clip horizontally. */
  body .v330-index-mark{
    order:1!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 12px!important;
    border-radius:10px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:9px!important;
    overflow:hidden!important;
    box-shadow:0 5px 14px rgba(10,12,16,.07)!important;
  }
  body .v330-index-mark:before,
  body .v330-index-mark:after{display:none!important}
  body .v330-index-mark span{
    min-width:0!important;
    color:#aab0b8!important;
    font-size:6.4px!important;
    letter-spacing:.16em!important;
    white-space:nowrap!important;
  }
  body .v330-index-mark b{
    min-width:0!important;
    margin:0!important;
    color:#f5f6f7!important;
    font-size:9.5px!important;
    line-height:1!important;
    font-weight:760!important;
    letter-spacing:-.012em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body .v330-index-mark i{
    min-width:0!important;
    margin:0!important;
    color:#858c96!important;
    font-size:6.3px!important;
    line-height:1!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
  }

  /* Banner regains presence and centers itself; not pushed to one side. */
  body .v330-brand-wall,
  body .apple-hero.v330-brand-wall{
    order:2!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
  }
  body .v330-brand-wall .apple-hero-visual{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1.86/1!important;
    margin:0!important;
    border-radius:14px!important;
    box-shadow:0 7px 20px rgba(13,15,18,.038)!important;
  }
  body .v330-brand-wall .apple-hero-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 50%!important;
    transform:scale(1.001)!important;
  }

  /* Finder loses unnecessary vertical mass. */
  body .v330-finder,
  body .apple-tools.v330-finder{
    margin:0 0 10px!important;
    padding:0!important;
  }
  body .v330-finder-row{display:block!important}
  body .v330-find-label{display:none!important}
  body .v330-finder .search,
  body .v330-finder .apple-search{
    height:47px!important;
    min-height:47px!important;
    border-radius:12px!important;
    padding:0 13px!important;
    box-shadow:0 3px 12px rgba(13,15,18,.025)!important;
  }
  body .v330-finder .apple-search svg{
    width:17px!important;height:17px!important;
  }
  body .v330-finder .apple-search input{
    font-size:13px!important;
    font-weight:650!important;
  }

  /* Category navigation stays as the successful V331 tab system but tighter. */
  body .v330-finder .chips{
    min-height:36px!important;
    height:36px!important;
    margin-top:2px!important;
  }
  body .v330-finder .chip{
    min-height:35px!important;
    height:35px!important;
    padding:0 12px!important;
    font-size:9.8px!important;
  }
  body .v330-finder .chip small{
    font-size:8px!important;
  }

  /* Category heading: remove the dead area above first row. */
  body .v330-section-head,
  body .section-head.v330-section-head{
    min-height:42px!important;
    margin:0 0 7px!important;
    padding:0 0 6px!important;
  }
  body .v330-section-head .section-kicker{
    font-size:7px!important;
    letter-spacing:.22em!important;
  }
  body .v330-section-head h2{
    margin-top:3px!important;
    font-size:26px!important;
    line-height:.91!important;
  }
  body .v330-section-head:before{
    width:42px!important;
    height:1.5px!important;
  }
  body .v330-section-head #count{
    min-height:23px!important;
    padding-left:9px!important;
    font-size:7.2px!important;
    letter-spacing:.12em!important;
  }

  /* Keep V331 card language; only optical density is adjusted. */
  body #grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:15px 9px!important;
  }
  body #grid .card-visual{
    aspect-ratio:1/.80!important;
    border-radius:13px!important;
  }
  body #grid .card-visual img{
    padding:12% 9% 16%!important;
  }
  body #grid>.card .card-body{
    min-height:80px!important;
    padding-top:6px!important;
  }
  body #grid .name{
    min-height:30px!important;
    max-height:30px!important;
    margin:4px 0 5px!important;
    font-size:12.3px!important;
  }
  body #grid .card-foot{
    min-height:22px!important;
    padding-top:5px!important;
  }
}

/* Narrow phone final optical correction. */
@media(max-width:430px){
  body .app{
    padding-left:11px!important;
    padding-right:11px!important;
  }
  body .v330-index-mark{
    padding:0 10px!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:7px!important;
  }
  body .v330-index-mark span{font-size:6px!important}
  body .v330-index-mark b{font-size:9px!important}
  body .v330-index-mark i{font-size:5.9px!important}
  body .v330-brand-wall .apple-hero-visual{
    aspect-ratio:1.89/1!important;
  }
  body .v330-finder .chip{
    padding:0 11px!important;
    font-size:9.4px!important;
  }
  body .v330-section-head h2{font-size:25px!important}
  body #grid{gap:14px 8px!important}
  body #grid .name{font-size:11.9px!important}
}