/* NNB GIDA V305 — APPLE SIGNATURE
   A lighter, more refined Apple-like gallery system.
   Touches only presentation. Data, admin, API and modal logic stay intact. */
:root{
  --v305-ink:#0b0c0d;
  --v305-deep:#111214;
  --v305-paper:#ffffff;
  --v305-soft:#f6f6f7;
  --v305-soft-2:#efeff1;
  --v305-line:rgba(15,18,20,.07);
  --v305-line-strong:rgba(15,18,20,.11);
  --v305-muted:#72757b;
  --v305-shadow:rgba(17,19,21,.08);
}
html,body{max-width:100%;overflow-x:hidden!important}
body{
  background:linear-gradient(180deg,#f5f5f6 0%,#f3f3f4 35%,#f7f7f8 100%)!important;
}

/* Top controls — quiet glass panel */
body .apple-tools{
  padding:10px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(250,250,251,.94))!important;
  border:1px solid rgba(255,255,255,.65)!important;
  box-shadow:
    0 18px 44px rgba(18,20,22,.06),
    0 2px 10px rgba(18,20,22,.03),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}
body .search,body .apple-search{
  height:58px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#ffffff,#fbfbfc)!important;
  border:1px solid rgba(15,18,20,.06)!important;
  box-shadow:0 10px 24px rgba(15,18,20,.03), inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body .search input,body .apple-search input{
  color:#101113!important;
}
body .search input::placeholder,body .apple-search input::placeholder{
  color:#a1a3a8!important;
}

/* Shelf chips — Apple pill rail */
body .chips{
  position:relative!important;
  box-sizing:border-box!important;
  display:flex!important;
  width:100%!important;
  min-height:62px!important;
  margin-top:10px!important;
  padding:7px!important;
  gap:9px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border-radius:23px!important;
  background:linear-gradient(180deg,rgba(16,18,20,.98),rgba(8,10,11,.98))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 28px rgba(10,12,14,.10)!important;
  scroll-snap-type:x proximity;
  scroll-padding-inline:9px;
  -webkit-overflow-scrolling:touch;
}
body .chips:after{content:"";flex:0 0 12px}
body .chips::-webkit-scrollbar{display:none}
body .chip{
  flex:0 0 auto!important;
  scroll-snap-align:start;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:46px!important;
  padding:0 15px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))!important;
  color:rgba(255,255,255,.86)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}
body .chip small{
  display:grid!important;
  place-items:center!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.74)!important;
  font-size:9px!important;
  font-weight:950!important;
}
body .chip.active{
  border-color:rgba(255,255,255,.95)!important;
  background:linear-gradient(180deg,#ffffff,#f0f0f2)!important;
  color:#0c0d0f!important;
  box-shadow:0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.98)!important;
}
body .chip.active small{
  background:#101214!important;
  color:#fff!important;
}
body .chip:active{transform:scale(.98)!important}

/* Header */
body .section-head{
  position:relative!important;
  min-height:60px!important;
  margin:26px 4px 14px!important;
  padding:0 2px 14px!important;
  border-bottom:1px solid var(--v305-line)!important;
}
body .section-head:after{
  content:""!important;
  position:absolute!important;
  left:2px!important;
  bottom:-1px!important;
  width:72px!important;
  height:4px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#0c0d0f,#2f3236)!important;
}
body .section-kicker{
  color:#6e7176!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.24em!important;
}
body .section-head h1,body .section-head h2{
  max-width:calc(100vw - 138px)!important;
  margin-top:7px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0b0c0d!important;
  font-size:32px!important;
  line-height:.92!important;
  font-weight:950!important;
  letter-spacing:-.07em!important;
}
body #count{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:70px!important;
  min-height:35px!important;
  padding:0 13px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#111315,#070809)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 20px rgba(0,0,0,.10)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}

/* Product cards — floating studio objects */
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:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(252,252,253,.98))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:
    0 22px 54px rgba(16,19,21,.07),
    0 3px 12px rgba(16,19,21,.03),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
  color:#0b0c0d!important;
  isolation:isolate!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
body #grid>.card:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:2!important;
  border-radius:inherit!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
body #grid>.card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 28px 62px rgba(16,19,21,.10),0 4px 14px rgba(16,19,21,.04), inset 0 1px 0 rgba(255,255,255,.98)!important;
}
body #grid>.card:active{transform:scale(.988)!important}

body #grid .card-visual{
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  aspect-ratio:1/0.96!important;
  margin:10px 10px 0!important;
  overflow:hidden!important;
  border-radius:22px 22px 18px 18px!important;
  border:1px solid rgba(15,18,20,.045)!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,1) 0,rgba(255,255,255,1) 14%,rgba(255,255,255,.55) 36%,transparent 62%),
    linear-gradient(180deg,#fbfbfc 0%,#f7f7f8 70%,#f2f2f4 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98), inset 0 -16px 22px rgba(16,18,20,.018)!important;
}
body #grid .card-visual:before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:12px!important;
  width:58%!important;
  height:5px!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.98),rgba(255,255,255,0))!important;
  box-shadow:0 10px 22px rgba(255,255,255,.86)!important;
}
body #grid .card-visual:after{
  content:""!important;
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  bottom:16px!important;
  height:4px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(208,211,216,.18),rgba(160,164,170,.72),rgba(208,211,216,.18))!important;
  box-shadow:0 12px 20px rgba(12,15,18,.12)!important;
}
body #grid .card-visual img{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:14px 12px 24px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 16px 20px rgba(14,16,18,.09))!important;
  transform:translateZ(0)!important;
}
body #grid .card-stage-id{display:none!important}

body #grid .card-body,
body #grid .nnb-skeleton-card .card-body{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex:1!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:110px!important;
  padding:13px 14px 14px!important;
  background:transparent!important;
  color:#0b0c0d!important;
}
body #grid .card-topline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-height:21px!important;
  margin-bottom:9px!important;
}
body #grid .cat{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#7a7d83!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
body #grid .card-weight{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:20px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#141618,#090a0b)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
  font-size:7.6px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.05em!important;
}
body #grid .name{
  display:-webkit-box!important;
  min-height:44px!important;
  max-height:44px!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  color:#0b0c0d!important;
  font-size:15px!important;
  line-height:1.03!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  text-wrap:balance!important;
}
body #grid .card-foot{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:26px!important;
  margin-top:auto!important;
  padding-top:10px!important;
  border-top:1px solid rgba(15,18,20,.06)!important;
}
body #grid .card-brand{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#8b8e94!important;
  font-size:7.8px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.2em!important;
  text-transform:uppercase!important;
}
body #grid .card-open{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
}
body #grid .card-arrow{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#121416,#090a0b)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 16px rgba(0,0,0,.08)!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
}

/* Skeletons */
body #grid .nnb-skeleton-card{background:rgba(255,255,255,.96)!important}
body #grid .nnb-skeleton-pill,
body #grid .nnb-skeleton-name span,
body #grid .nnb-skeleton-brand,
body #grid .nnb-skeleton-arrow{background:#ececef!important}

/* Scroll performance */
body.nnb-scrolling #grid>.card{transform:none!important;box-shadow:0 6px 16px rgba(16,19,21,.045)!important}
body.nnb-scrolling #grid .card-visual img{filter:none!important}

@media(max-width:390px){
  body .apple-tools{padding:8px!important;border-radius:24px!important}
  body .search,body .apple-search{height:54px!important;border-radius:18px!important}
  body .chips{min-height:58px!important;padding:6px!important;gap:8px!important}
  body .chip{min-height:44px!important;padding:0 13px!important;font-size:11.5px!important}
  body #grid{gap:13px!important}
  body #grid>.card{border-radius:24px!important}
  body #grid .card-visual{margin:8px 8px 0!important;border-radius:19px 19px 16px 16px!important}
  body #grid .card-visual img{padding:12px 10px 22px!important}
  body #grid .card-body,body #grid .nnb-skeleton-card .card-body{min-height:104px!important;padding:12px 12px 13px!important}
  body #grid .name{min-height:40px!important;max-height:40px!important;font-size:13.5px!important}
  body #grid .cat{font-size:7.3px!important}
  body #grid .card-brand{font-size:7.3px!important}
  body #grid .card-arrow{width:26px!important;height:26px!important;font-size:12px!important}
}
@media(min-width:700px){
  body #grid{gap:18px!important}
  body #grid .card-body,body #grid .nnb-skeleton-card .card-body{min-height:116px!important;padding:14px 15px 15px!important}
  body #grid .name{font-size:16px!important}
  body #grid>.card:hover .card-visual img{transform:translate3d(0,-2px,0) scale(1.012)!important}
}
@media(prefers-reduced-motion:reduce){
  body .chip,body #grid>.card,body #grid .card-visual img{transition:none!important}
}