/* NNB GIDA V311 — CORPORATE SHOWROOM
   Final presentation layer for categories, product cards and product detail.
   Data, admin, D1/R2, image delivery and stability logic remain untouched. */
:root{
  --v311-ink:#0b0c0e;
  --v311-muted:#777b82;
  --v311-paper:#ffffff;
  --v311-soft:#f3f3f5;
  --v311-line:rgba(13,15,18,.075);
  --v311-line-strong:rgba(13,15,18,.12);
  --v311-shadow:0 18px 48px rgba(15,17,20,.065),0 3px 12px rgba(15,17,20,.025);
}

/* Filter console: quieter, more corporate and easier to scan. */
body .apple-tools{
  position:relative!important;
  padding:10px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,249,250,.98))!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 18px 46px rgba(16,18,21,.055),inset 0 1px 0 rgba(255,255,255,.98)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body .search,body .apple-search{
  position:relative!important;
  height:56px!important;
  border-radius:19px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,248,249,.98))!important;
  border:1px solid rgba(13,15,18,.06)!important;
  box-shadow:0 10px 28px rgba(15,17,20,.05),inset 0 1px 0 rgba(255,255,255,.98)!important;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s cubic-bezier(.22,.61,.36,1),border-color .24s ease,background-color .24s ease!important;
  will-change:transform,box-shadow!important;
}
body .search:before,body .apple-search:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.12) 26%,rgba(255,255,255,0) 48%)!important;
}
body .search:hover,body .apple-search:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(13,15,18,.08)!important;
  box-shadow:0 12px 30px rgba(15,17,20,.06),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
body .search:focus-within,body .apple-search:focus-within{
  border-color:rgba(12,13,15,.18)!important;
  box-shadow:0 0 0 4px rgba(12,13,15,.04),0 14px 34px rgba(15,17,20,.065),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
body .search input,body .apple-search input{font-weight:740!important;letter-spacing:-.015em!important}
body .chips{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:58px!important;
  min-height:58px!important;
  margin-top:9px!important;
  padding:6px!important;
  gap:7px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(251,251,252,.96),rgba(242,243,245,.98))!important;
  border:1px solid rgba(13,15,18,.055)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)!important,0 10px 22px rgba(15,17,20,.05)!important;
  scroll-snap-type:x proximity!important;
  scroll-padding-inline:6px!important;
  scrollbar-width:none!important;
  overscroll-behavior-inline:contain!important;
  -webkit-overflow-scrolling:touch!important;
  isolation:isolate!important;
}
body .chips::-webkit-scrollbar{display:none!important}
body .chips:before{content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}
body .chips:after{content:""!important;flex:0 0 2px!important}
body .chip{
  position:relative!important;
  flex:0 0 auto!important;
  min-height:44px!important;
  padding:0 15px!important;
  gap:8px!important;
  scroll-snap-align:start!important;
  border-radius:15px!important;
  border:1px solid rgba(13,15,18,.045)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,248,249,.96))!important;
  color:#50535a!important;
  box-shadow:0 1px 0 rgba(255,255,255,.92)!important,0 2px 6px rgba(15,17,20,.025)!important;
  font-size:11.5px!important;
  font-weight:860!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
  transform:translateZ(0)!important;
  will-change:transform,box-shadow!important;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1),border-color .25s ease,background-color .25s ease,color .25s ease!important;
  overflow:hidden!important;
}
body .chip small{
  display:grid!important;
  place-items:center!important;
  min-width:21px!important;
  height:21px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:rgba(12,13,15,.06)!important;
  color:#666a71!important;
  font-size:9px!important;
  font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background-color .25s ease,color .25s ease,box-shadow .25s ease!important;
}
body .chip.active{
  border-color:#0d0e10!important;
  background:linear-gradient(180deg,#1a1b1e,#0a0b0d)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18)!important,inset 0 1px 0 rgba(255,255,255,.13)!important;
}
body .chip.active::before{content:""!important;position:absolute!important;inset:0!important;border-radius:inherit!important;pointer-events:none!important;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%)!important;opacity:.9!important}
body .chip.active small{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important}
body .chip:hover,body .chip:focus-visible{
  transform:translateY(-1.5px)!important;
  border-color:rgba(13,15,18,.08)!important;
  color:#1d1f23!important;
  box-shadow:0 8px 18px rgba(15,17,20,.08)!important,inset 0 1px 0 rgba(255,255,255,.95)!important;
}
body .chip:hover small,body .chip:focus-visible small{
  transform:scale(1.04)!important;
  background:#ffffff!important;
  color:#1d1f23!important;
  box-shadow:0 6px 12px rgba(15,17,20,.08)!important,inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body .chip.active:hover,body .chip.active:focus-visible{
  transform:translateY(-1.5px) scale(1.01)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.2)!important,inset 0 1px 0 rgba(255,255,255,.13)!important;
}
body .chip.active:hover small,body .chip.active:focus-visible small{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
body .chip:active{transform:scale(.985)!important}
body .chip:focus-visible{outline:3px solid rgba(10,11,13,.16)!important;outline-offset:2px!important}

/* Shelf heading. */
body .section-head{
  min-height:58px!important;
  margin:25px 4px 14px!important;
  padding:0 2px 13px!important;
  border-bottom:1px solid var(--v311-line)!important;
}
body .section-head:after{
  width:54px!important;height:3px!important;
  background:#101114!important;
}
body .section-kicker{
  color:#777b81!important;
  font-size:8.5px!important;
  letter-spacing:.22em!important;
}
body .section-head h1,body .section-head h2{
  margin-top:7px!important;
  color:var(--v311-ink)!important;
  font-size:clamp(29px,3vw,37px)!important;
  line-height:.96!important;
  letter-spacing:-.062em!important;
}
body #count{
  min-width:68px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  background:#111214!important;
  color:#fff!important;
  font-size:8.5px!important;
  letter-spacing:.11em!important;
  box-shadow:0 8px 18px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.1)!important;
}

/* Product grid and cards. */
body #grid{gap:16px!important;align-items:stretch!important}
body #grid>.card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  overflow:hidden!important;
  border-radius:25px!important;
  background:#fff!important;
  border:1px solid rgba(12,14,17,.055)!important;
  box-shadow:var(--v311-shadow)!important;
  color:var(--v311-ink)!important;
  isolation:isolate!important;
  will-change:transform,box-shadow!important;
  transform:translateZ(0)!important;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),box-shadow .34s cubic-bezier(.22,.61,.36,1),border-color .28s ease,background-color .28s ease!important;
}
body #grid>.card:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body #grid>.card:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  opacity:0!important;
  transform:translateY(6px)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 20%,rgba(255,255,255,0) 48%),radial-gradient(circle at 50% -8%,rgba(255,255,255,.65),rgba(255,255,255,0) 58%)!important;
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.61,.36,1)!important;
}
body #grid>.card:hover,
body #grid>.card:focus-visible{
  transform:translateY(-4px) scale(1.003)!important;
  border-color:rgba(12,14,17,.10)!important;
  box-shadow:0 30px 68px rgba(15,17,20,.11),0 5px 16px rgba(15,17,20,.04)!important;
}
body #grid>.card:hover:after,
body #grid>.card:focus-visible:after{
  opacity:1!important;
  transform:translateY(0)!important;
}
body #grid>.card:active{transform:scale(.988)!important}
body #grid .card-stage-id{display:none!important}
body #grid .card-visual{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  aspect-ratio:1/1.02!important;
  margin:8px 8px 0!important;
  overflow:hidden!important;
  border-radius:19px!important;
  border:1px solid rgba(13,15,18,.05)!important;
  background:
    radial-gradient(circle at 50% 16%,rgba(255,255,255,.99) 0 16%,rgba(255,255,255,.78) 33%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#fcfcfd 0%,#f6f6f7 62%,#efeff1 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -10px 16px rgba(13,15,18,.015)!important;
  isolation:isolate!important;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)!important;
}
/* Subtle botanical studio reflections — monochrome and intentionally restrained. */
body #grid .card-visual:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  left:17%!important;
  right:17%!important;
  bottom:9%!important;
  height:12%!important;
  pointer-events:none!important;
  opacity:.82!important;
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,.61,.36,1),filter .3s ease!important;
  filter:blur(10px)!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(18,20,24,.18) 0 24%,rgba(18,20,24,.10) 36%,rgba(18,20,24,0) 72%)!important;
}
/* Marble-like pedestal below the original product image. */
body #grid .card-visual:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.7!important;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 24%,rgba(255,255,255,0) 48%)!important;
  transition:opacity .3s ease!important;
}
body #grid .card-visual img,
body #grid .card-visual svg.placeholder{
  position:relative!important;
  z-index:3!important;
}
body #grid .card-visual img{
  width:92%!important;
  height:92%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  padding:7% 6% 13%!important;
  transform:translateY(-1%) scale(1)!important;
  filter:drop-shadow(0 16px 18px rgba(13,15,18,.12))!important;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),filter .4s ease!important;
}
body #grid .card-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-height:116px!important;
  padding:13px 14px 14px!important;
  background:#fff!important;
}
body #grid .card-topline{align-items:center!important;gap:8px!important}
body #grid .cat{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#777a80!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
}
body #grid .card-weight{
  flex:0 0 auto!important;
  min-height:21px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(13,15,18,.05)!important;
  background:#f2f3f5!important;
  color:#1d1d1f!important;
  font-size:7.6px!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  box-shadow:0 0 0 rgba(0,0,0,0)!important;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background-color .28s ease,border-color .28s ease,box-shadow .28s ease!important;
}
body #grid .name{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  min-height:43px!important;
  max-height:43px!important;
  margin:9px 0 10px!important;
  color:#101114!important;
  font-size:15.5px!important;
  line-height:1.06!important;
  font-weight:920!important;
  letter-spacing:-.047em!important;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),color .24s ease!important;
}
body #grid .card-foot{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-top:auto!important;
  padding-top:10px!important;
  border-top:1px solid var(--v311-line)!important;
}
body #grid .card-brand{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#888b91!important;
  font-size:7.7px!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
  transition:color .24s ease,transform .3s cubic-bezier(.22,.61,.36,1)!important;
}
body #grid .card-open{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}
body #grid .card-open-label{
  color:#64676d!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),color .24s ease,opacity .24s ease!important;
}
body #grid .card-arrow{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  background:#111214!important;
  color:#fff!important;
  box-shadow:0 7px 15px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.10)!important;
  font-size:12px!important;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,background-color .24s ease!important;
}
body #grid>.card:hover .card-visual,
body #grid>.card:focus-visible .card-visual{
  border-color:rgba(13,15,18,.07)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.99),inset 0 -10px 16px rgba(13,15,18,.02)!important;
}
body #grid>.card:hover .card-visual:before,
body #grid>.card:focus-visible .card-visual:before{
  opacity:1!important;
  transform:scale(1.06)!important;
  filter:blur(12px)!important;
}
body #grid>.card:hover .card-visual:after,
body #grid>.card:focus-visible .card-visual:after{
  opacity:.92!important;
}
body #grid>.card:hover .card-visual img,
body #grid>.card:focus-visible .card-visual img{
  transform:translateY(-2.2%) scale(1.02)!important;
  filter:drop-shadow(0 19px 22px rgba(13,15,18,.14))!important;
}
body #grid>.card:hover .card-weight,
body #grid>.card:focus-visible .card-weight{
  transform:translateY(-1px)!important;
  background:#ffffff!important;
  border-color:rgba(13,15,18,.08)!important;
  box-shadow:0 8px 16px rgba(15,17,20,.06)!important;
}
body #grid>.card:hover .name,
body #grid>.card:focus-visible .name{
  transform:translateY(-1px)!important;
  color:#000!important;
}
body #grid>.card:hover .card-brand,
body #grid>.card:focus-visible .card-brand{
  transform:translateX(.5px)!important;
  color:#6d7178!important;
}
body #grid>.card:hover .card-open-label,
body #grid>.card:focus-visible .card-open-label{
  transform:translateX(1px)!important;
  color:#2b2d31!important;
  opacity:1!important;
}
body #grid>.card:hover .card-arrow,
body #grid>.card:focus-visible .card-arrow{
  transform:translate3d(2px,-1px,0) scale(1.04)!important;
  box-shadow:0 10px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Product detail — stable corporate product sheet. */
body #detailModal{
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(920px,calc(100vw - 36px))!important;
  height:min(690px,calc(100dvh - 36px))!important;
  max-width:920px!important;
  max-height:690px!important;
  overflow:hidden!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  background:#fff!important;
  box-shadow:0 35px 110px rgba(0,0,0,.26),0 3px 14px rgba(0,0,0,.08)!important;
  transform:translate(-50%,calc(-50% + 22px)) scale(.985)!important;
}
body #detailModal.show{transform:translate(-50%,-50%) scale(1)!important}
body #detailModal.closing{transform:translate(-50%,calc(-50% + 18px)) scale(.988)!important}
body #detailModal,body #detailModal.closing,body #detailModal.detail-opening{will-change:transform,opacity!important}
body #detailModal .detail-wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:10px!important;
  gap:10px!important;
  overflow:hidden!important;
  background:#fff!important;
}
body #detailModal .detail-browserbar{
  grid-column:1/-1!important;
  grid-row:1!important;
  position:relative!important;
  top:auto!important;
  min-height:58px!important;
  margin:0!important;
  padding:7px 9px!important;
  grid-template-columns:42px minmax(0,1fr) 42px!important;
  gap:9px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#17181a,#090a0b)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.10)!important;
}
body #detailModal .detail-browser-brand,
body #detailModal .detail-browser-close{
  width:42px!important;height:42px!important;border-radius:999px!important;
}
body #detailModal .detail-browser-brand{background:#fff!important;padding:3px!important}
body #detailModal .detail-browser-brand img{width:36px!important;height:36px!important;border-radius:50%!important}
body #detailModal .detail-browser-copy{transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:100%!important}
body #detailModal .detail-browser-domain{font-size:14px!important;font-weight:950!important;line-height:1!important;letter-spacing:-.02em!important;color:#fff!important;text-align:center!important}
body #detailModal .detail-browser-label{display:none!important}
body #detailModal .detail-browser-close{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.80)!important;
  box-shadow:0 5px 13px rgba(0,0,0,.14)!important;
}
body #detailModal .detail-browser-close:before,
body #detailModal .detail-browser-close:after{background:#121315!important;width:16px!important;height:1.5px!important}
body #detailModal .detail-stage{
  grid-column:1!important;
  grid-row:2!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:22px!important;
  border:1px solid rgba(13,15,18,.05)!important;
  background:
    radial-gradient(circle at 50% 16%,rgba(255,255,255,.98) 0 16%,rgba(255,255,255,.78) 32%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#fcfcfd 0%,#f6f6f7 62%,#efeff1 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -10px 16px rgba(13,15,18,.015)!important;
  isolation:isolate!important;
}
body #detailModal .detail-stage:before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:auto 7% 4% 7%!important;
  height:24%!important;
  opacity:.55!important;
  filter:blur(18px)!important;
  background:radial-gradient(ellipse at center,rgba(18,20,24,.12) 0 24%,rgba(18,20,24,.06) 38%,rgba(18,20,24,0) 72%)!important;
}
body #detailModal .detail-stage:after{display:none!important}
body #detailModal .detail-photo{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  overflow:hidden!important;
}
body #detailModal .detail-photo:after{
  content:""!important;
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  bottom:9%!important;
  height:12%!important;
  z-index:1!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(18,20,24,.18) 0 24%,rgba(18,20,24,.10) 36%,rgba(18,20,24,0) 72%)!important;
  filter:blur(10px)!important;
}
body #detailModal .detail-photo img{
  position:relative!important;
  z-index:3!important;
  width:94%!important;
  height:94%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  padding:5% 6% 11%!important;
  filter:drop-shadow(0 18px 22px rgba(13,15,18,.12))!important;
}

body #detailModal .detail-info{
  grid-column:2!important;
  grid-row:2!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  padding:20px 18px 18px!important;
  overflow:auto!important;
  border-radius:22px!important;
  background:#fff!important;
  scrollbar-width:none!important;
  overscroll-behavior:contain!important;
}
body #detailModal .detail-info::-webkit-scrollbar{display:none!important}
body #detailModal .detail-kicker{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:#f0f0f2!important;
  color:#62656b!important;
  font-size:8px!important;
  font-weight:920!important;
  letter-spacing:.16em!important;
}
body #detailModal .detail-title{
  margin:14px 0 7px!important;
  color:#101114!important;
  font-size:clamp(30px,3.2vw,43px)!important;
  line-height:.96!important;
  letter-spacing:-.06em!important;
}
body #detailModal .detail-sub{
  color:#85888e!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
body #detailModal .detail-description{
  margin:15px 0 0!important;
  color:#666a70!important;
  font-size:12.5px!important;
  line-height:1.55!important;
  font-weight:650!important;
}
body #detailModal .detail-specs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:18px!important;
}
body #detailModal .detail-spec{
  min-width:0!important;
  padding:11px 12px!important;
  border-radius:15px!important;
  background:#f5f5f6!important;
  border:1px solid rgba(13,15,18,.035)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body #detailModal .detail-spec small{
  display:block!important;
  margin-bottom:5px!important;
  color:#8a8d93!important;
  font-size:7.5px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
body #detailModal .detail-spec b{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:#191a1d!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
body #detailModal .detail-browserbar,
body #detailModal .detail-stage,
body #detailModal .detail-info,
body #detailModal .detail-photo img,
body #detailModal .detail-kicker,
body #detailModal .detail-title,
body #detailModal .detail-sub,
body #detailModal .detail-description,
body #detailModal .detail-spec,
body #detailModal .detail-browser-close{
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
}
body #detailModal.detail-opening .detail-browserbar{
  animation:nnbDetailBarIn .52s cubic-bezier(.22,.61,.36,1) both!important;
}
body #detailModal.detail-opening .detail-stage{
  animation:nnbDetailStageIn .62s cubic-bezier(.22,.61,.36,1) .03s both!important;
}
body #detailModal.detail-opening .detail-info{
  animation:nnbDetailInfoIn .58s cubic-bezier(.22,.61,.36,1) .08s both!important;
}
body #detailModal.detail-opening .detail-photo img{
  animation:nnbDetailPhotoIn .72s cubic-bezier(.22,.61,.36,1) .10s both!important;
}
body #detailModal.detail-opening .detail-kicker{
  animation:nnbDetailFadeUp .42s cubic-bezier(.22,.61,.36,1) .14s both!important;
}
body #detailModal.detail-opening .detail-title{
  animation:nnbDetailFadeUp .48s cubic-bezier(.22,.61,.36,1) .18s both!important;
}
body #detailModal.detail-opening .detail-sub,
body #detailModal.detail-opening .detail-description{
  animation:nnbDetailFadeUp .48s cubic-bezier(.22,.61,.36,1) .24s both!important;
}
body #detailModal.detail-opening .detail-spec{
  animation:nnbDetailSpecIn .48s cubic-bezier(.22,.61,.36,1) both!important;
}
body #detailModal.detail-opening .detail-spec:nth-child(1){animation-delay:.22s!important}
body #detailModal.detail-opening .detail-spec:nth-child(2){animation-delay:.27s!important}
body #detailModal.detail-opening .detail-spec:nth-child(3){animation-delay:.32s!important}
body #detailModal.detail-opening .detail-spec:nth-child(4){animation-delay:.37s!important}
body #detailModal.detail-opening .detail-spec:nth-child(5){animation-delay:.42s!important}
body #detailModal.detail-opening .detail-browser-close{
  animation:nnbDetailCloseIn .46s cubic-bezier(.22,.61,.36,1) .18s both!important;
}
body #detailModal.closing .detail-browserbar{
  animation:nnbDetailBarOut .28s cubic-bezier(.4,0,.2,1) both!important;
}
body #detailModal.closing .detail-stage{
  animation:nnbDetailStageOut .30s cubic-bezier(.4,0,.2,1) .02s both!important;
}
body #detailModal.closing .detail-info{
  animation:nnbDetailInfoOut .26s cubic-bezier(.4,0,.2,1) both!important;
}
body #detailModal.closing .detail-photo img{
  animation:nnbDetailPhotoOut .28s cubic-bezier(.4,0,.2,1) both!important;
}
body #detailModal.closing .detail-kicker,
body #detailModal.closing .detail-title,
body #detailModal.closing .detail-sub,
body #detailModal.closing .detail-description,
body #detailModal.closing .detail-spec,
body #detailModal.closing .detail-browser-close{
  animation:nnbDetailFadeOut .22s cubic-bezier(.4,0,.2,1) both!important;
}
@keyframes nnbDetailBarIn{
  0%{opacity:0;transform:translateY(-10px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes nnbDetailStageIn{
  0%{opacity:0;transform:translateY(18px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes nnbDetailInfoIn{
  0%{opacity:0;transform:translateY(16px) scale(.992)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes nnbDetailPhotoIn{
  0%{opacity:0;transform:translateY(12px) scale(.955)}
  65%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes nnbDetailFadeUp{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes nnbDetailSpecIn{
  0%{opacity:0;transform:translateY(14px) scale(.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes nnbDetailCloseIn{
  0%{opacity:0;transform:scale(.88)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes nnbDetailBarOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-8px) scale(.988)}
}
@keyframes nnbDetailStageOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(14px) scale(.985)}
}
@keyframes nnbDetailInfoOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(10px) scale(.992)}
}
@keyframes nnbDetailPhotoOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(10px) scale(.96)}
}
@keyframes nnbDetailFadeOut{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(8px)}
}

@media(max-width:720px){
  body .apple-tools{padding:8px!important;border-radius:24px!important}
  body .search,body .apple-search{height:53px!important;border-radius:17px!important}
  body .chips{height:54px!important;min-height:54px!important;margin-top:8px!important;padding:5px!important;border-radius:18px!important}
  body .chip{min-height:41px!important;padding:0 13px!important;font-size:11px!important}
  body .section-head{margin-top:22px!important}
  body .section-head h1,body .section-head h2{font-size:29px!important}
  body #grid{gap:12px!important}
  body #grid>.card{border-radius:22px!important;box-shadow:0 12px 28px rgba(15,17,20,.06),0 2px 7px rgba(15,17,20,.025)!important}
  body #grid .card-visual{margin:7px 7px 0!important;border-radius:17px!important}
  body #grid .card-visual:before{opacity:.88!important;filter:blur(8px)!important}
  body #grid .card-visual img{width:94%!important;height:94%!important;padding:8% 5% 14%!important;filter:drop-shadow(0 14px 16px rgba(13,15,18,.11))!important}
  body #grid .card-body{min-height:108px!important;padding:11px 11px 12px!important}
  body #grid .cat{font-size:7px!important;letter-spacing:.15em!important}
  body #grid .card-weight{min-height:19px!important;padding:0 7px!important;font-size:6.8px!important}
  body #grid .name{min-height:40px!important;max-height:40px!important;margin:8px 0 9px!important;font-size:13.5px!important;line-height:1.08!important}
  body #grid .card-brand{font-size:6.9px!important;letter-spacing:.14em!important}
  body #grid .card-open-label{display:none!important}
  body #grid .card-arrow{width:26px!important;height:26px!important;font-size:11px!important}

  body #detailModal{
    left:8px!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:25px!important;
    transform:translateY(20px) scale(.99)!important;
  }
  body #detailModal.show{transform:translateY(0) scale(1)!important}
  body #detailModal.closing{transform:translateY(16px) scale(.99)!important}
  body #detailModal.detail-opening .detail-photo img{animation-duration:.66s!important}
  body #detailModal .detail-wrap{
    display:flex!important;
    flex-direction:column!important;
    padding:8px!important;
    gap:8px!important;
  }
  body #detailModal .detail-browserbar{flex:0 0 auto!important;min-height:54px!important;border-radius:18px!important;grid-template-columns:40px minmax(0,1fr) 40px!important;padding:6px 7px!important}
  body #detailModal .detail-browser-brand,body #detailModal .detail-browser-close{width:40px!important;height:40px!important}
  body #detailModal .detail-browser-brand img{width:34px!important;height:34px!important}
  body #detailModal .detail-stage{flex:1 1 46%!important;min-height:210px!important;height:auto!important;border-radius:19px!important}
  body #detailModal .detail-photo{height:100%!important}
  body #detailModal .detail-photo img{width:94%!important;height:94%!important;padding:6% 5% 15%!important;filter:none!important}
  body #detailModal .detail-info{flex:1 1 50%!important;min-height:0!important;padding:13px 12px 14px!important;border-radius:19px!important}
  body #detailModal .detail-kicker{min-height:25px!important;padding:0 9px!important;font-size:7px!important}
  body #detailModal .detail-title{margin:11px 0 6px!important;font-size:clamp(25px,7vw,34px)!important}
  body #detailModal .detail-description{margin-top:11px!important;font-size:11.5px!important;line-height:1.42!important}
  body #detailModal .detail-specs{gap:7px!important;margin-top:13px!important}
  body #detailModal .detail-spec{padding:9px 10px!important;border-radius:13px!important}
  body #detailModal .detail-spec small{font-size:7px!important}
  body #detailModal .detail-spec b{font-size:11.5px!important}
}

@media(max-width:380px){
  body #grid{gap:10px!important}
  body #grid .card-body{padding:10px!important}
  body #grid .name{font-size:12.8px!important}
  body #detailModal{left:6px!important;right:6px!important;top:max(6px,env(safe-area-inset-top))!important;bottom:max(6px,env(safe-area-inset-bottom))!important}
  body #detailModal .detail-wrap{padding:6px!important;gap:6px!important}
  body #detailModal .detail-stage{min-height:180px!important}
  body #detailModal .detail-info{padding:11px 10px 12px!important}
}

@media(hover:none){body #grid>.card:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){
  body .search,body .search::before,body .apple-search,body .apple-search::before,body .chip,body .chip::before,body .chip small,body #grid>.card,body #grid>.card:after,body #grid .card-visual,body #grid .card-visual:before,body #grid .card-visual:after,body #grid .card-visual img,body #grid .card-weight,body #grid .name,body #grid .card-brand,body #grid .card-open-label,body #grid .card-arrow,body #detailModal,body #detailModal .detail-browserbar,body #detailModal .detail-stage,body #detailModal .detail-info,body #detailModal .detail-kicker,body #detailModal .detail-title,body #detailModal .detail-sub,body #detailModal .detail-description,body #detailModal .detail-spec,body #detailModal .detail-photo img{transition:none!important;animation:none!important}
}