/* =====================================================================
   NATUREBASKET – SHOP REDESIGN (v2)
   Customer shopping page: Discover (home shelves) + Browse (category / search).
   Loaded LAST, after theme.css, so it overrides the older card / category /
   toolbar rules without touching them. Follows shop-ui-ux-redesign.md:
     • green = brand, headings, selected category   • orange = ADD / View cart / Checkout only
     • one card radius (12px), one chip radius (999px) • no hover zoom / lift / shine / pop
   ===================================================================== */

:root {
  --hdr-h: 124px;                 /* real value is measured in app.js (syncHdrH) */
  --v2-pad: clamp(10px, 2vw, 28px);
  --v2-r: 12px;
  --v2-surface: #fffaf0;
}
@media (min-width: 900px) { :root { --hdr-h: 74px; } }

/* the floating mascot belongs to the old playful home; the new shop is clean */
body[data-view="home"]::before { display: none; }

/* ── PAGE FRAME ── */
#view-home { max-width: 1480px; margin: 0 auto; padding: 0 var(--v2-pad) 24px; }

/* ── HERO (carousel that fits each banner) ──
   The frame (#heroWrap, with the toran on top) is as wide as the current banner allows: full container width,
   but never so wide that the hero would be taller than half the screen (width = 50% of screen height x banner ratio).
   The hero keeps the banner's own ratio (--r, set per slide in home.js), so every banner fills its frame fully:
   no cropping and no empty bands. Phones are simply full width. */
#heroWrap { --r: 2.5; width: 100%; width: min(100%, calc(50vh * var(--r))); width: min(100%, calc(50svh * var(--r)));
  margin: 0 auto; transition: width .35s ease; }
#view-home .hm-hero {
  width: 100%; margin: 12px 0 0; border: 0 !important; border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 77, 40, .14) !important;
  aspect-ratio: var(--r, 2.5); height: auto; min-height: 0; max-height: none; transition: aspect-ratio .35s ease;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent; contain: layout paint;
}
#view-home .hm-slide, #view-home .hm-slide.on { min-height: 0; }
#view-home .hm-slide.hm-img { background: #fdf3e0; }
#view-home .hm-slide.hm-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: none !important; transition: none !important; -webkit-user-drag: none; user-select: none; }
#view-home .hm-dots { bottom: 8px; }
#view-home .hm-dot { width: 8px; height: 8px; }
#view-home .hm-dot.on { width: 28px; }
@media (min-width: 641px) {
  #view-home .hm-hero { border-radius: 20px; }
  #view-home .hm-dots { bottom: 12px; }
  #view-home .hm-dot { width: 10px; height: 10px; }
  #view-home .hm-dot.on { width: 38px; }
}
@media (max-width: 380px) { #view-home .hm-hero { border-radius: 14px; margin-top: 8px; } }
.hm-arr { display: none; }
@media (hover: hover) and (min-width: 900px) { .hm-arr { display: block; } }

/* ── DISCOVER: "Shop by categories" image grid (no scrolling, wraps) ── */
#view-home .nb-catsec { padding-top: 22px; }
#view-home .nb-catsec:has(#catGrid:empty) { display: none; }
#view-home .nb-catsec .nb-shelf-head { padding-bottom: 12px; }
#view-home #catGrid.nb-cats {
  position: static; display: grid !important; overflow: visible !important; flex-wrap: initial !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px;
  margin: 0; padding: 0; background: none; border: 0; scroll-snap-type: none !important;
}
#view-home .nb-cat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: auto; height: auto; min-width: 0;
  padding: 0; border: 0; border-radius: 0; background: none; text-decoration: none; text-align: center;
  color: var(--nb-ink); white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#view-home .nb-cat .ci {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
#view-home .nb-cat .ci img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
#view-home .nb-cat .ci .nb-emoji { font-size: clamp(30px, 6vw, 52px); }
#view-home .nb-cat .cn {
  width: 100%; font: 700 12.5px/1.25 'DM Sans', sans-serif; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#view-home .nb-cat:active .ci { transform: scale(.97); }
@media (hover: hover) { #view-home .nb-cat:hover .ci img { transform: scale(1.06); } #view-home .nb-cat:hover .cn { color: var(--nb-green); } }
@media (min-width: 641px) { #view-home #catGrid.nb-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; } #view-home .nb-cat .cn { font-size: 13.5px; } }
@media (min-width: 900px) { #view-home #catGrid.nb-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }  }
@media (min-width: 1500px) { #view-home #catGrid.nb-cats { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* ── FESTIVAL shelf (Ayudha Pooja) ── */
#view-home .nb-shelf.nb-fest {
  margin-top: 18px; padding: 16px 14px 12px; border-radius: 20px;
  background: linear-gradient(135deg, #fff3d6 0%, #ffe0a8 100%); border: 1px solid #f5cf8a;
}
#view-home .nb-fest .nb-shelf-head h2 { color: #8a2d0b; font-size: clamp(20px, 3.2vw, 28px); }
#view-home .nb-fest .nb-shelf-head p { color: #8a5a1a; font-size: clamp(12.5px, 1.6vw, 14.5px); font-weight: 600; }
@media (min-width: 900px) { #view-home .nb-shelf.nb-fest { padding: 20px 22px 16px; } }
#view-home .nb-fest .nb-rail { scroll-snap-type: none; scroll-behavior: auto; overscroll-behavior-x: contain; }
body.mode-browse #festivalSection { display: none; }

/* ── MODES ── */
.nb-browse { display: none; }
body.mode-browse .nb-browse { display: grid; }
body.mode-browse #discover,
body.mode-browse .nb-cats,
body.mode-browse .nb-catsec { display: none; }

/* ── SHELVES ── */
#buyAgainSection, .nb-shelf { padding-top: 22px; }
.nb-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 2px 10px; }
.nb-shelf-head h2 { font: 800 20px/1.15 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-green-d); }
.nb-shelf-head p { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.nb-see {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; white-space: nowrap;
  font-weight: 700; font-size: 13px; color: var(--nb-green); text-decoration: none;
}
.nb-see i { font-size: 10px; transition: transform .15s; }
@media (hover: hover) { .nb-see:hover i { transform: translateX(3px); } }

.nb-shelf-wrap { position: relative; }
.nb-shelf .nb-rail, #buyAgainRail {
  display: flex; gap: 10px; overflow-x: auto; margin: 0 -2px; padding: 4px 2px 14px;
  scroll-snap-type: x proximity; scroll-padding-left: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nb-shelf .nb-rail::-webkit-scrollbar, #buyAgainRail::-webkit-scrollbar { display: none; }

/* desktop arrows */
.nb-sh-arr { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .nb-sh-arr {
    display: grid; place-items: center; position: absolute; top: 38%; transform: translateY(-50%); z-index: 5;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--nb-line); background: #fff; color: var(--nb-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16); cursor: pointer; opacity: 0; transition: opacity .15s;
  }
  .nb-sh-arr.l { left: -14px; } .nb-sh-arr.r { right: -14px; }
  .nb-shelf-wrap:hover .nb-sh-arr { opacity: 1; }
  .nb-sh-arr:hover { color: var(--nb-green); border-color: var(--nb-green); }
}

/* end-of-shelf "See all" card */
.nb-card-more {
  flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  scroll-snap-align: start; border: 1px dashed #cfe0d5; border-radius: var(--v2-r); background: #fff;
  color: var(--nb-green); text-decoration: none; text-align: center; min-height: 220px;
}
.nb-more-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--nb-green-l); font-size: 14px; }
.nb-card-more b { font-size: 13.5px; }
.nb-card-more small { font-size: 11.5px; color: var(--muted); }
@media (hover: hover) { .nb-card-more:hover { border-color: var(--nb-green); background: var(--nb-green-l); } }

/* skeleton while the catalogue loads */
.nb-sk-sec { padding-top: 22px; }
.nb-sk-title { display: block; width: 170px; height: 20px; border-radius: 6px; margin-bottom: 12px; }
.nb-sk-row { display: flex; gap: 10px; overflow: hidden; }
.nb-sk-row b { flex: 0 0 150px; height: 262px; border-radius: var(--v2-r); }
.nb-sk-title, .nb-sk-row b {
  background: linear-gradient(100deg, #f1e6cf 30%, #fff7e6 50%, #f1e6cf 70%); background-size: 200% 100%; animation: nbSkel 1.2s infinite linear;
}
@media (min-width: 640px) { .nb-sk-row b { flex-basis: 190px; } }

/* ═════════ PRODUCT CARD (spec 4.5) ═════════ */
.nb-card, .nb-grid .nb-card {
  background: #fff; border: 1px solid var(--nb-line); border-radius: var(--v2-r); box-shadow: none; animation: none;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  container-type: inline-size; transition: box-shadow .15s, border-color .15s;
}
.nb-card:hover { transform: none; box-shadow: none; border-color: var(--nb-line); }
@media (hover: hover) { .nb-card:hover { box-shadow: 0 4px 14px rgba(23, 43, 33, .10); border-color: #e2d6bd; } }
.nb-card:active { transform: scale(.98); }
.nb-card:hover .nb-card-media { box-shadow: none; }
.nb-card.in-cart, .nb-card.in-cart:hover { border-color: #8fd1a8; box-shadow: none; }

.nb-card .nb-card-media {
  margin: 8px 8px 0; border-radius: 10px; aspect-ratio: 1 / 1; background: #f7f9f8;
  position: relative; display: grid; place-items: center; overflow: hidden; box-shadow: none;
}
.nb-card .nb-card-media::before, .nb-card .nb-card-media::after { display: none; }
.nb-card .nb-card-media .nb-img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0;
  transform: none !important; filter: none !important; transition: none;
}
.nb-card .nb-card-media .nb-emoji { font-size: 64px; transform: none !important; }

/* one badge per corner */
.nb-card .nb-badge15 {
  top: 6px; left: 6px; padding: 2px 8px 2px 6px; font-size: 10px; letter-spacing: .3px;
  background: #fff7e6; color: #b45309; border: 1px solid #ffd9a0; border-radius: 999px; box-shadow: none; text-shadow: none;
}
.nb-card .nb-badge15 b { font-size: 11px; margin-right: 0; }
.nb-card .nb-badge15 i { animation: none; }
.nb-card .nb-badge15::after { display: none; }
.nb-card .nb-tag-low {
  top: auto; right: auto; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; background: #fff3e0; color: #b45309;
}
.nb-card.is-out .nb-img, .nb-card.is-out .nb-emoji { filter: grayscale(1) !important; opacity: .45; }
.nb-out-label {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  text-align: center; padding: 3px 0; font-size: 12px; font-weight: 700; color: #444; background: rgba(255, 255, 255, .8);
}

.nb-card .nb-card-body { padding: 10px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nb-card .nb-card-cat { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-card .nb-card-name {
  font: 600 14px/1.3 'DM Sans', sans-serif; color: var(--nb-ink); min-height: 2.6em; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nb-card .nb-card-tamil { font-size: 11.5px; line-height: 1.3; color: var(--muted); margin-top: 2px; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-card .nb-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.nb-card .nb-price { font: 700 16px/1 'DM Sans', sans-serif; color: var(--nb-ink); white-space: nowrap; }
.nb-card .nb-price small { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 0; }

/* Price + action share a row only when the card is wide enough for the in-cart stepper.
   (Measured: price + a 3-part stepper needs ~190px of inner width, so the switch is at 200px
   rather than 160px; below it the price sits on its own line over a full-width button, so
   nothing ever wraps and the card never jumps when ADD turns into the stepper.) */
@container (max-width: 199px) {
  .nb-card-foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .nb-card-foot .nb-act { display: block; }
  .nb-card-foot .nb-act > * { width: 100%; }
}

/* ADD / stepper – same size, 34px, 8px radius, orange is the only action colour */
/* .nb-add renders as a <button> or an <a> (e.g. the "Options" link) – make both a centered pill */
.nb-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap; }
:is(.nb-card, .nb-sr) .nb-add {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-width: 64px; padding: 0 14px; border-radius: 8px; box-shadow: none;
  border: 1.5px solid var(--nb-orange); background: #fff; color: var(--nb-orange);
  font: 700 13px 'DM Sans', sans-serif; letter-spacing: .4px; text-shadow: none;
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
:is(.nb-card, .nb-sr) .nb-add::after { content: ''; position: absolute; inset: -5px; }   /* 44px touch target */
/* rails: fixed card widths (150px on phones => stacked layout above).
   These also cancel the older, more specific .nb-card.rail rules in shop.css. */
.nb-card.rail { flex: 0 0 150px; scroll-snap-align: start; }
@media (min-width: 640px) { .nb-card.rail { flex-basis: 176px; } }
@media (min-width: 1000px) { .nb-card.rail { flex-basis: 204px; } }
.nb-card.rail .nb-card-name { font-size: 14px; }
.nb-card.rail .nb-price { font-size: 16px; }
.nb-card.rail .nb-card-foot { flex-wrap: nowrap; }
.nb-card.rail .nb-add { height: 34px; min-width: 64px; padding: 0 14px; }
.nb-card.rail .nb-stepper { height: 34px; }
.nb-card.rail .nb-stepper button { width: 32px; min-width: 32px; }
/* Variant ("Options") cards: the "from ₹X" price is wider than a plain price, so always put
   the Options button on its own full-width row. Placed after the .rail rules (0,4,0) so it
   beats their flex-wrap:nowrap, which would otherwise squeeze/clip the button. */
.nb-card.has-variants .nb-card-foot,
.nb-card.rail.has-variants .nb-card-foot { flex-wrap: wrap; }
.nb-card.has-variants .nb-card-foot .nb-act,
.nb-card.rail.has-variants .nb-card-foot .nb-act { width: 100%; }
.nb-card.has-variants .nb-card-foot .nb-add,
.nb-card.rail.has-variants .nb-card-foot .nb-add { width: 100%; min-width: 0; }
:is(.nb-card, .nb-sr) .nb-add:hover { background: #fff; color: var(--nb-orange); border-color: var(--nb-orange); box-shadow: none; }
@media (hover: hover) {
  :is(.nb-card, .nb-sr) .nb-add:not(:disabled):hover { background: var(--nb-orange); color: #fff; }
}
:is(.nb-card, .nb-sr) .nb-add:active { transform: scale(.97); }
:is(.nb-card, .nb-sr) .nb-add:disabled {
  min-width: 0; padding: 0 8px; border-color: #d9dcd9; color: #8d948f; background: #f3f4f3; font-size: 11px; letter-spacing: 0; cursor: not-allowed;
}
:is(.nb-card, .nb-sr) .nb-stepper {
  display: inline-flex; align-items: center; justify-content: space-between; height: 34px; border-radius: 8px;
  background: var(--nb-orange); box-shadow: none; overflow: hidden;
}
:is(.nb-card, .nb-sr) .nb-stepper button { width: 32px; min-width: 32px; height: 100%; font-size: 11px; position: relative; }
:is(.nb-card, .nb-sr) .nb-stepper span { min-width: 24px; padding: 0 2px; text-align: center; font-weight: 700; font-size: 13px; }


/* ═════════ BROWSE: rail / sidebar + list ═════════ */
.nb-browse { grid-template-columns: 72px minmax(0, 1fr); gap: 0 10px; align-items: start; padding-top: 10px; }
.nb-browse-main { min-width: 0; }

.nb-rn-nav {
  position: sticky; top: calc(var(--hdr-h) + 8px); z-index: 40;
  max-height: calc(100vh - var(--hdr-h) - 84px); max-height: calc(100dvh - var(--hdr-h) - 84px);
  overflow-y: auto; scrollbar-width: none; padding: 6px 0;
  background: #fff; border: 1px solid var(--nb-line); border-radius: var(--v2-r);
}
.nb-rn-nav::-webkit-scrollbar { display: none; }
.nb-rn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; text-decoration: none; color: var(--nb-ink); text-align: center;
}
.nb-rn-ic {
  width: 44px; height: 44px; border-radius: 12px; background: #f4f7f5; color: var(--nb-green);
  display: grid; place-items: center; overflow: hidden; font-size: 20px; flex: none;
}
.nb-rn-ic img { width: 100%; height: 100%; object-fit: cover; }
.nb-rn-ic .nb-emoji { font-size: 24px; }
.nb-rn-ic.small { width: 34px; height: 34px; border-radius: 10px; }
.nb-rn-ic.small .nb-emoji { font-size: 18px; }
.nb-rn-name {
  font: 600 10.5px/1.2 'DM Sans', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.nb-rn-n { display: none; font-style: normal; }
.nb-rn.active { background: var(--nb-green-l); }
.nb-rn.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nb-green); }
.nb-rn.active .nb-rn-name { color: var(--nb-green-d); font-weight: 700; }
.nb-rn.active .nb-rn-ic { background: #fff; }
.nb-rn-subs { display: none; }

/* toolbar: "Fruits · 70 items"      [Sort] [Filters] */
.nb-browse-main .nb-list-head {
  position: sticky; top: var(--hdr-h); z-index: 50; margin: 0 0 8px; padding: 10px 2px;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  background: var(--v2-surface); border: 0; border-bottom: 1px solid var(--nb-line); border-radius: 0; box-shadow: none;
}
.nb-back-btn {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--nb-line); background: #fff; color: var(--nb-ink); cursor: pointer; font-size: 12px;
}
.nb-list-title { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.nb-list-title h3 {
  font: 800 18px/1.2 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-green-d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.nb-list-title span#itemsSubtitle { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.nb-toolbar { flex: none; display: flex; gap: 8px; }
.nb-sort, .nb-filter-btn {
  height: 36px; border-radius: 999px; border: 1px solid var(--nb-line); background: #fff; color: var(--nb-ink);
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: 600 12.5px 'DM Sans', sans-serif; cursor: pointer;
}
.nb-sort select { font: 600 12.5px 'DM Sans', sans-serif; max-width: 118px; }
.nb-sort i, .nb-filter-btn i { color: var(--nb-green); }
.nb-filter-count { background: var(--nb-green); color: #fff; }
@media (hover: hover) { .nb-sort:hover, .nb-filter-btn:hover { border-color: var(--nb-green); } }
@media (max-width: 420px) { .nb-sort > i { display: none; } .nb-sort select { max-width: 96px; } }

/* sub-category chips (phones only; desktop uses the sidebar) */
.nb-browse-main .nb-subbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.nb-browse-main .nb-subbar::-webkit-scrollbar { display: none; }
.nb-subchip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--nb-line); color: var(--nb-ink); font: 600 12.5px 'DM Sans', sans-serif; cursor: pointer;
}
.nb-subchip em { font-style: normal; font-size: 10.5px; color: var(--muted); background: #f1f4f2; border-radius: 999px; padding: 1px 7px; }
.nb-subchip.active { background: var(--nb-green); border-color: var(--nb-green); color: #fff; }
.nb-subchip.active em { background: rgba(255, 255, 255, .22); color: #fff; }

/* active filters: only when there are any */
.nb-browse-main .nb-active-filters { padding: 0 0 10px; gap: 8px; flex-wrap: wrap; }
.nb-fchip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #cfe5d6; background: var(--nb-green-l); color: var(--nb-green-d); font: 600 12px 'DM Sans', sans-serif; cursor: pointer;
}
.nb-fchip i { font-size: 10px; }

/* grid: 2 columns on phones, then as many ~200px columns as fit */
#view-home .nb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 2px 0 24px; }
@media (min-width: 640px) { #view-home .nb-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } }
.nb-skel { border-radius: var(--v2-r); }
#view-home .nb-sentinel { min-height: 40px; }

/* ── DESKTOP: left sidebar with expanding sub-categories ── */
@media (min-width: 900px) {
  .nb-browse { grid-template-columns: 250px minmax(0, 1fr); gap: 0 24px; padding-top: 14px; }
  .nb-rn-nav { padding: 8px; }
  .nb-rn { flex-direction: row; gap: 10px; padding: 7px 10px; border-radius: 10px; text-align: left; }
  .nb-rn-ic { width: 34px; height: 34px; border-radius: 10px; }
  .nb-rn-ic .nb-emoji { font-size: 19px; }
  .nb-rn-name { flex: 1; font-size: 13.5px; -webkit-line-clamp: 1; }
  .nb-rn-n { display: inline; font-size: 11px; color: var(--muted); }
  .nb-rn.active::before { top: 8px; bottom: 8px; }
  @media (hover: hover) { .nb-rn:not(.active):hover { background: #f4f7f5; } }
  .nb-rn-subs { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 27px; padding-left: 8px; border-left: 2px solid var(--nb-line); }
  .nb-rn-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--nb-ink); font: 600 13px 'DM Sans', sans-serif; text-align: left; cursor: pointer;
  }
  .nb-rn-sub em { font-style: normal; font-size: 11px; color: var(--muted); }
  @media (hover: hover) { .nb-rn-sub:not(.active):hover { background: #f4f7f5; } }
  .nb-rn-sub.active { background: var(--nb-green-l); color: var(--nb-green-d); font-weight: 700; }
  .nb-browse-main .nb-subbar { display: none !important; }
  .nb-back-btn { display: none; }
  .nb-list-title h3 { font-size: 22px; }
}

/* ═════════ SEARCH DROPDOWN ═════════ */
.nb-search { position: relative; }
.nb-sp {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 200; padding: 8px;
  background: #fff; border: 1px solid var(--nb-line); border-radius: 16px; box-shadow: 0 18px 40px rgba(23, 43, 33, .22);
  max-height: min(70vh, 540px); overflow-y: auto; text-align: left;
}
.nb-sp.open { display: block; }
.nb-sp-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.nb-sp-clear { border: 0; background: none; color: var(--nb-green); font: 700 11.5px 'DM Sans', sans-serif; cursor: pointer; text-transform: none; letter-spacing: 0; }
.nb-sp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 10px; }
.nb-sp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--nb-line);
  background: #f7f9f8; color: var(--nb-ink); font: 600 12.5px 'DM Sans', sans-serif; cursor: pointer;
}
.nb-sp-chip i { font-size: 11px; color: var(--muted); }
@media (hover: hover) { .nb-sp-chip:hover { border-color: var(--nb-green); color: var(--nb-green); } }
.nb-sp-cat {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--nb-ink); font-size: 13.5px;
}
.nb-sp-cat > span:nth-child(2) { flex: 1; min-width: 0; }
.nb-sp-cat > i { font-size: 10px; color: var(--muted); }
.nb-sr { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
@media (hover: hover) { .nb-sp-cat:hover, .nb-sr:hover { background: #f4f7f5; } }
.nb-sr-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.nb-sr-img { width: 46px; height: 46px; border-radius: 8px; background: #f7f9f8; overflow: hidden; display: grid; place-items: center; flex: none; }
.nb-sr-img .nb-img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; transform: none; }
.nb-sr-img .nb-emoji { font-size: 26px; }
.nb-sr-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nb-sr-t b { font: 600 13.5px/1.25 'DM Sans', sans-serif; color: var(--nb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-sr-t small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-sr-t i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--nb-ink); }
.nb-sr-act { flex: none; }
.nb-sr .nb-add { height: 32px; min-width: 62px; }
.nb-sr .nb-stepper { height: 32px; }
.nb-sp-all {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 4px; padding: 11px 10px;
  border: 0; border-top: 1px solid var(--nb-line); background: transparent; color: var(--nb-green); font: 700 13px 'DM Sans', sans-serif; text-align: left; cursor: pointer;
}
.nb-sp-none { padding: 18px 10px; color: var(--muted); font-size: 13px; text-align: center; }

/* ═════════ MINI CART BAR (bottom, with free-delivery progress) ═════════ */
.nb-cartbar {
  border-radius: 14px; padding: 10px 10px 12px 16px; background: var(--nb-green-d); overflow: hidden;
  box-shadow: 0 10px 28px rgba(10, 90, 44, .38);
}
.nb-cartbar-l b { font-size: 14px; font-weight: 700; }
.nb-cartbar-l small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; text-align: left; opacity: .85; }
.nb-cartbar-l small:empty { display: none; }
.nb-cartbar-r { padding: 10px 14px; border-radius: 10px; background: var(--nb-orange); color: #fff; font-weight: 800; font-size: 14px; box-shadow: none; }
.nb-cartbar-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .16); }
.nb-cartbar-prog i { display: block; height: 100%; width: 0; background: var(--nb-yellow); transition: width .3s; }

/* ═════════ FILTER SHEET ═════════ */
.nb-fgroup .nb-switch + .nb-switch { margin-top: 14px; }

/* ═════════ MOTION: calm by default ═════════ */
@media (prefers-reduced-motion: reduce) {
  .nb-sk-title, .nb-sk-row b, .nb-skel { animation: none !important; }
  .nb-shelf-wrap *, .nb-rn *, .nb-cat { transition: none !important; }
}

/* ── TOP BAR: responsive buttons ── */
header.nb-header .store-switch span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) {
  header.nb-header { padding: 8px 10px; }
  header.nb-header .nb-header-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo actions" "search search"; gap: 8px; }
  header.nb-header .logo { min-width: 0; gap: 8px; }
  header.nb-header .logo-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; }
  header.nb-header .logo-text { min-width: 0; }
  header.nb-header .logo-text h1 { font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header.nb-header .logo-text p { font-size: 14px; line-height: 1.1; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header.nb-header .header-actions { flex: none; gap: 8px; }
  header.nb-header .store-switch { width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; }
  header.nb-header .store-switch span { display: none; }
  header.nb-header .cart-btn { position: relative; width: 46px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 99px; }
  header.nb-header .cart-btn > i { font-size: 17px; }
  header.nb-header .cart-count { position: absolute; top: -7px; right: -5px; min-width: 19px; height: 19px; padding: 0 4px; font-size: 10.5px; border-radius: 99px; z-index: 2; }
  header.nb-header .nb-search { height: 42px; padding: 0 12px; }
  header.nb-header .nb-search input { font-size: 16px; }   /* 16px stops iOS zooming into the field */
}
@media (max-width: 359px) {
  header.nb-header { padding: 6px 8px; }
  header.nb-header .logo-icon { width: 34px; height: 34px; }
  header.nb-header .logo-text h1 { font-size: 15px; }
  header.nb-header .logo-text p { display: none; }
  header.nb-header .header-actions { gap: 6px; }
  header.nb-header .store-switch { width: 36px; height: 36px; }
  header.nb-header .cart-btn { width: 42px; height: 36px; }
}

/* ═════════ PRODUCT PAGE (quick-commerce style) ═════════ */
#view-product { max-width: 1240px; margin: 0 auto; padding: 0 var(--v2-pad) 24px; }
#view-product .nb-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: 12px 2px 6px; font-size: 12px; }
#view-product .nb-crumbs::-webkit-scrollbar { display: none; }
#view-product .nb-crumbs span { overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
#view-product .nb-pd { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 6px 0 0; align-items: start; }
@media (min-width: 900px) {
  #view-product .nb-pd { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
  #view-product .nb-pd-media { position: sticky; top: calc(var(--hdr-h) + 16px); }
}

/* image panel */
#view-product .nb-pd-media {
  aspect-ratio: 1 / 1; width: 100%; max-height: none; background: #fff; border: 1px solid #eee3cf;
  border-radius: 20px; box-shadow: none; overflow: hidden; cursor: default;
}
@media (max-width: 899px) { #view-product .nb-pd-media { max-height: min(100vw, 460px); margin: 0 auto; } }
#view-product .nb-pd-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: none !important; filter: none !important; transition: none; }
#view-product .nb-pd-media .nb-emoji { font-size: clamp(90px, 22vw, 150px); }

/* info column */
#view-product .nb-pd-info { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-width: 0; }
#view-product .nb-pd-cat {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; border-radius: 0;
  font: 700 13px 'DM Sans', sans-serif; color: var(--nb-green); text-decoration: none;
}
#view-product .nb-pd-cat i { font-size: 9px; }
#view-product .nb-pd-info h1 { font: 800 clamp(22px, 3.4vw, 32px)/1.18 'Baloo 2', 'DM Sans', sans-serif; margin: 6px 0 2px; color: var(--nb-ink); }
#view-product .nb-pd-tamil { font-size: 15px; color: var(--muted); margin: 0 0 6px; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.pd-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  font: 700 12px 'DM Sans', sans-serif; background: #f4f5f2; color: #374139; border: 1px solid #e7e9e5;
}
.pd-chip i { font-size: 11px; }
.pd-chip.fast { background: #fff4e0; color: #b45309; border-color: #ffd9a0; }
.pd-chip.ok { background: #eaf7ef; color: #15803d; border-color: #c9ebd5; }
.pd-chip.low { background: #fff4e0; color: #b45309; border-color: #ffd9a0; }
.pd-chip.out { background: #fee2e2; color: #b91c1c; border-color: #fbc5c5; }
#view-product .nb-pd-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; padding-top: 14px; border-top: 1px dashed #e6e0d2; }
#view-product .nb-pd-price b { font: 800 clamp(28px, 5vw, 36px)/1 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-green-d); }
#view-product .nb-pd-price span { font-size: 14px; font-weight: 600; color: var(--muted); }

/* buy row (desktop) */
#view-product .nb-pd-buy { display: flex; flex-wrap: nowrap; gap: 10px; margin: 14px 0 18px; align-items: center; }
#view-product .nb-pd-buy .nb-act { flex: 1 1 220px; max-width: 320px; display: block; }
#view-product .nb-add.big { width: 100%; min-width: 0; height: 52px; font-size: 16px; border-radius: 14px !important; }
#view-product .nb-stepper.big { width: 100%; height: 52px; border-radius: 14px; justify-content: space-between; }
#view-product .nb-stepper.big span { flex: 1; min-width: 0; }
#view-product .nb-pd-buy .nb-ghost-btn { height: 52px; padding: 0 18px; border-radius: 14px; white-space: nowrap; }

/* trust strip */
.pd-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.pd-trust > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: #fbf8f0; border: 1px solid #f1e7cf; }
.pd-trust i { font-size: 18px; color: var(--nb-green); margin-bottom: 4px; }
.pd-trust b { font-size: 12px; line-height: 1.2; color: var(--nb-ink); }
.pd-trust small { font-size: 11px; color: var(--muted); }

/* accordions */
#view-product .nb-accs { gap: 8px; }
#view-product .nb-acc { border-radius: 14px; border: 1px solid #ece6d6; background: #fff; }
#view-product .nb-acc summary { padding: 13px 14px; font-size: 14px; }

/* shelves below the product */
#view-product .nb-pd-more { background: none; margin-top: 26px; }
#view-product .nb-pd-more .nb-section-head h2 { font: 800 20px/1.2 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-green-d); padding-bottom: 0; }
#view-product .nb-pd-more .nb-section-head h2::after { display: none; }

/* sticky buy bar (phones) */
.pd-buybar { display: none; }
@media (max-width: 899px) {
  #view-product { padding-bottom: 150px; }
  #view-product .nb-pd-buy { display: none; }
  .pd-buybar {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; z-index: 135;
    bottom: calc(63px + env(safe-area-inset-bottom)); padding: 10px 14px; background: #fff;
    border-top: 1px solid #eee3cf; box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
  .pd-bb-price { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
  .pd-bb-price b { font: 800 22px/1 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-green-d); }
  .pd-bb-price small { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px; }
  .pd-buybar .nb-act { flex: 1; min-width: 0; display: block; }
  .pd-buybar .nb-add.big, .pd-buybar .nb-stepper.big { height: 48px; }
  body[data-view="product"] .nb-cartbar { display: none !important; }
}
@media (max-width: 380px) { .pd-trust small { display: none; } .pd-trust > div { padding: 10px 4px; } }

/* ═════════ PACK SELECTOR: horizontal, select-only cards ═════════ */
#view-product .nb-pv { margin: 14px 0 4px; }
#view-product .nb-pv-title { margin-bottom: 8px; font-size: 14px; }
.pv-row {
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 8px 2px 10px; margin: 0 -2px;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.pv-row::-webkit-scrollbar { display: none; }
.pv-card {
  position: relative; flex: 0 0 auto; width: min(236px, 72vw); display: flex; align-items: center; gap: 10px;
  padding: 10px 34px 10px 10px; text-align: left; cursor: pointer; scroll-snap-align: start;
  background: #fff; border: 1.5px solid #e9e4d6; border-radius: 14px; font-family: inherit; color: var(--nb-ink);
  transition: border-color .15s, box-shadow .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .pv-card:not(.sel):hover { border-color: #bfd8c8; } }
.pv-card:active { transform: scale(.985); }
.pv-card.sel { border-color: var(--nb-green); background: #f3fbf6; box-shadow: 0 0 0 1px var(--nb-green) inset, 0 6px 16px rgba(15, 77, 40, .12); }
.pv-img { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #f4f5f2; }
.pv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-img .nb-emoji { font-size: 28px; }
.pv-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pv-name { font: 800 14px/1.2 'DM Sans', sans-serif; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pv-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pv-save { font-style: normal; padding: 1px 7px; border-radius: 99px; background: #fff4e0; color: #b45309; font-weight: 800; font-size: 10.5px; }
.pv-price { font: 800 16px/1.2 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-green-d); white-space: nowrap; }
.pv-price small { margin-left: 6px; font: 600 11px 'DM Sans', sans-serif; color: var(--muted); }
.pv-tick {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid #d3cfc2; background: #fff; color: transparent; font-size: 10px;
}
.pv-card.sel .pv-tick { background: var(--nb-green); border-color: var(--nb-green); color: #fff; }
.pv-bag { position: absolute; right: 8px; bottom: 7px; font-size: 10.5px; font-weight: 800; color: var(--nb-green); }
.pv-ribbon {
  position: absolute; top: -9px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--nb-orange), var(--nb-yellow));
}
#view-product .nb-vs { margin-top: 6px; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }

/* =====================================================================
   ORDER DATE BLOCK (Item #17) � customer banner + checkout notice
   ===================================================================== */
.nb-odbanner {
  margin: 10px var(--v2-pad, 12px) 2px; padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1.5px solid #fdba74;
  color: #9a3412; font-size: 13px; font-weight: 600; line-height: 1.45;
  display: flex; align-items: flex-start; gap: 9px;
}
.nb-odbanner i { margin-top: 2px; color: #ea580c; }
.nb-odbanner.soon { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; color: #1e40af; }
.nb-odbanner.soon i { color: #2563eb; }
.nb-odcheckout {
  margin-top: 6px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
}
.nb-odcheckout.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.nb-fast-blocked { opacity: .5; filter: grayscale(.4); position: relative; }
.nb-fast-blocked::after {
  content: 'Not available during this period'; position: absolute; left: 6px; right: 6px; bottom: 6px;
  background: rgba(153,27,27,.92); color: #fff; font-size: 10px; font-weight: 700; text-align: center;
  padding: 3px 4px; border-radius: 6px; line-height: 1.2;
}

/* ═════════ VARIANT GROUP CARD (default variant + More link) ═════════ */
.nb-card.nb-group .nb-card-media { cursor: default; }
.nb-group-toggle {
  position: absolute; top: 6px; right: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: 1px solid var(--nb-line); border-radius: 999px; background: rgba(255,255,255,.94);
  color: var(--nb-green-d); font: 700 11px 'DM Sans', sans-serif; letter-spacing: .3px; cursor: pointer;
  text-decoration: none; box-shadow: 0 1px 3px rgba(23,43,33,.08); -webkit-tap-highlight-color: transparent;
}
.nb-group-toggle::after { content: ''; position: absolute; inset: -8px -6px; }
@media (hover: hover) { .nb-group-toggle:hover { border-color: var(--nb-green); background: var(--nb-green-l); } }
.nb-card.nb-group .nb-group-title { min-height: 2.6em; }

/* ═════════ VARIANT GROUP PAGE (?view=group) ═════════ */
#view-group { padding-bottom: 40px; }
#view-group .nb-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: 12px 2px 6px; font-size: 12px; }
#view-group .nb-crumbs::-webkit-scrollbar { display: none; }
#view-group .nb-crumbs span { overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }

.nb-gp-head { display: flex; align-items: center; gap: 14px; padding: 6px 2px 14px; }
.nb-gp-thumb { flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff, #e6f2ea); border: 1px solid var(--nb-line); }
.nb-gp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-gp-thumb .nb-emoji { font-size: 32px; }
.nb-gp-info { min-width: 0; }
.nb-gp-info h1 { margin: 0; font: 800 20px/1.2 'Baloo 2', 'DM Sans', sans-serif; color: var(--nb-ink); }
.nb-gp-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.nb-gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.nb-gp-card { position: relative; display: flex; flex-direction: column; padding: 10px; background: #fff; border: 1.5px solid var(--nb-line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .nb-gp-card:hover { border-color: #e2d6bd; box-shadow: 0 6px 18px rgba(23,43,33,.10); } }
.nb-gp-media { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff, #e6f2ea); border: 1px solid var(--nb-line); }
.nb-gp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-gp-media .nb-emoji { font-size: 44px; }
.nb-gp-name { margin-top: 8px; font: 600 13.5px/1.3 'DM Sans', sans-serif; color: var(--nb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-gp-meta { margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-gp-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-gp-price { font: 800 16px/1 'DM Sans', sans-serif; color: var(--nb-ink); white-space: nowrap; }
.nb-gp-foot .nb-act { flex: none; }

/* ── image fallback: logo/app_logo.png replaces every emoji / icon ── */
img.nb-fb { object-fit: contain !important; padding: 12%; box-sizing: border-box; background: #fff; }
.nb-rn-ic.all img { padding: 10%; }
.nb-sc-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; background: #f4f7f5; }
.nb-sc-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-sc-ic img.nb-fb { padding: 2px; }
.nb-sc-lb { flex: 1; text-align: left; }
.nb-subchip .nb-sc-lb { flex: none; }
.nb-subchip { padding-left: 5px; }
.nb-subchip.active .nb-sc-ic { background: #fff; }
@media (min-width: 900px) {
  .nb-rn-sub { justify-content: flex-start; }
  .nb-rn-sub em { margin-left: auto; }
  .nb-rn-sub .nb-sc-ic { width: 26px; height: 26px; }
}
.nb-oi-img { display: inline-block; width: 26px; height: 26px; vertical-align: middle; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid #eef1ef; }
.nb-oi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-ck-img img, .nb-sr-img img, .nb-gp-thumb img, .nb-vc-img img, .pv-img img { object-fit: contain; }