/* Utility strip */
.np-utility { background: #0a0a0a; color: #d9d4cc; font-size: 0.74rem; letter-spacing: 0.02em; }
.np-utility-inner { display:flex; align-items:center; justify-content:space-between; height: 32px; }
.np-utility-loc { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; opacity:.85; }
.np-utility-loc:hover { opacity:1; color:var(--accent); }
.np-utility-right { display:flex; gap:18px; align-items: center; }
.np-utility-right a { color:inherit; text-decoration:none; opacity:.78; transition:opacity .15s, color .15s; }
.np-utility-right a:hover { opacity:1; color:var(--accent); }
.np-utility-sep { display:inline-block; width:1px; height:14px; background: rgba(255,255,255,0.14); margin: 0 4px; }
.np-utility-widgets { display: flex; align-items: center; gap: 6px; }
[data-theme="dark"] .np-utility { background:#000; color:#a8a39a; }

/* Restyle currency/lang/theme widgets when they live inside the dark utility strip.
   Beats the global !important rules from the header-glass pass. */
.np-utility #currencyToggle .currency-btn,
.np-utility #langToggle .lang-btn {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: #d9d4cc !important;
  height: 24px !important;
  letter-spacing: 0.02em !important;
  transition: color .15s, background .15s !important;
  transform: none !important;
}
.np-utility #currencyToggle .currency-btn:hover,
.np-utility #langToggle .lang-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
.np-utility #currencyToggle .currency-btn::before,
.np-utility #langToggle .lang-btn::before { display: none !important; }
.np-utility .theme-toggle {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  color: #d9d4cc !important;
  transition: color .15s, background .15s !important;
  transform: none !important;
}
.np-utility .theme-toggle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
}
.np-utility .theme-toggle::before { display: none !important; }
.np-utility .theme-toggle svg { width: 13px; height: 13px; }
.np-utility .currency-btn svg,
.np-utility .lang-btn svg { width: 9px; height: 9px; opacity: 0.7; }
.np-utility .currency-dropdown,
.np-utility .lang-dropdown { z-index: 10000; top: calc(100% + 4px) !important; }

/* Hide the original slots in the main header on /newpage only */
.np-newpage-anchor .header-actions > .currency-toggle,
.np-newpage-anchor .header-actions > .lang-toggle,
.np-newpage-anchor .header-actions > .theme-toggle { display: none !important; }
@media (max-width: 720px) {
  .np-utility-right a { display: none; }
  .np-utility-sep { display: none; }
}

/* Section title pattern: "Plain text <accent word>" with horizontal dividers */
.np-section { padding: 56px 0; }
.np-section.tight { padding: 36px 0; }
/* ── Best deals of the day ──────────────────────────────────── */
#npDealsStack { position: relative; }
.np-deals-carousel { position: relative; }
.np-deals-track { position: relative; }
.np-deals-track > .np-deals-layout { display: none; }
.np-deals-track > .np-deals-layout.is-active { display: grid; animation: npDealIn .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes npDealIn {
  from { opacity: 0; transform: translateX(var(--np-deal-dir, 30px)); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .np-deals-track > .np-deals-layout.is-active { animation: none; }
}
.np-deals-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--white); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 16px rgba(28,28,30,0.14); transition: transform .2s, color .2s, border-color .2s;
}
.np-deals-arrow:hover { color: var(--accent); border-color: var(--accent-border); transform: translateY(-50%) scale(1.06); }
.np-deals-arrow svg { width: 18px; height: 18px; }
.np-deals-prev { left: -10px; }
.np-deals-next { right: -10px; }
[data-theme="dark"] .np-deals-arrow { background: rgba(40,30,24,0.92); border-color: rgba(255,255,255,0.12); }
.np-deals-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.np-deals-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 28%, transparent); transition: background .2s, transform .2s; }
.np-deals-dot.is-active { background: var(--accent); transform: scale(1.3); }
@media (max-width: 560px) { .np-deals-arrow { width: 34px; height: 34px; } .np-deals-prev { left: 0; } .np-deals-next { right: 0; } }
.np-deals-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 34px 30px; border-radius: 22px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent) 9%, transparent) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 36px rgba(196,114,58,0.10);
}
[data-theme="dark"] .np-deals-empty {
  background: linear-gradient(135deg, rgba(196,114,58,0.22) 0%, rgba(196,114,58,0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 36px rgba(0,0,0,0.35);
}
.np-deals-empty .dl-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); }
.np-deals-empty .dl-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.np-deals-empty .dl-desc { font-size:.9rem; line-height:1.55; color: var(--text2); max-width: 560px; }
.np-deals-empty .dl-cta {
  margin-top: 6px; display:inline-flex; align-items:center; gap:8px;
  padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size:.9rem;
  background: var(--accent); color:#fff; text-decoration:none;
  transition: transform .2s, box-shadow .2s;
}
.np-deals-empty .dl-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(196,114,58,0.35); }
.np-deals-layout {
  display: grid; grid-template-columns: 300px 1fr; gap: 18px;
  align-items: stretch;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 36px rgba(196,114,58,0.10);
  position: relative;
}
[data-theme="dark"] .np-deals-layout {
  background: linear-gradient(135deg, rgba(196,114,58,0.24) 0%, rgba(196,114,58,0.10) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 36px rgba(0,0,0,0.35);
}
@media (max-width: 980px) { .np-deals-layout { grid-template-columns: 1fr; padding: 18px; } }
.np-deals-left {
  border-radius: 16px; padding: 22px 20px;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  display: flex; flex-direction: column; gap: 18px;
  position: relative; min-height: 360px;
}
[data-theme="dark"] .np-deals-left {
  background: rgba(28,22,16,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.np-deals-left .dl-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom: 4px; }
.np-deals-left .dl-title { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.np-deals-left .dl-desc  { font-size: .88rem; line-height: 1.55; color: var(--text2); }
.np-deals-left .dl-countdown-label { font-size: .76rem; color: var(--muted); margin-bottom: 8px; }
.np-deals-left .dl-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.np-deals-left .dl-cu { background: var(--white); border-radius: 12px; padding: 10px 4px; text-align: center; box-shadow: 0 2px 8px rgba(28,28,30,0.05); }
[data-theme="dark"] .np-deals-left .dl-cu { background: rgba(255,255,255,0.06); }
.np-deals-left .dl-cu-num { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05; }
.np-deals-left .dl-cu-lab { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.np-deals-left .dl-cta {
  position: relative; margin-top: auto; align-self: flex-start;
  padding: 10px 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color: #fff; border: none;
  font-weight: 600; font-size: .85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
              0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  overflow: hidden; isolation: isolate;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.np-deals-left .dl-cta::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 28%,
    rgba(255,255,255,0) 55%,
    color-mix(in srgb, var(--accent) 30%, transparent) 80%,
    color-mix(in srgb, var(--accent) 90%, white) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
.np-deals-left .dl-cta > * { position: relative; z-index: 2; }
.np-deals-left .dl-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 25%, rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 75%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none; opacity: 0; mix-blend-mode: overlay; z-index: 1;
}
.np-deals-left .dl-cta:hover {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
              0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent);
}
.np-deals-left .dl-cta:hover::after { animation: subscribeSheen .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; opacity: 1; }
.np-deals-scroll-wrap { position: relative; padding: 0 56px; min-width: 0; }
.np-deals-scroll-wrap .dsw-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-tint-strong);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.np-deals-scroll-wrap .dsw-prev { left: 0; }
.np-deals-scroll-wrap .dsw-next { right: 0; }
.np-deals-scroll-wrap .dsw-nav svg { width: 18px; height: 18px; color: var(--text); }
.np-deals-scroll-wrap .dsw-nav:hover { color: var(--accent); border-color: var(--accent-border); }
@media (max-width: 720px) {
  .np-deals-scroll-wrap { padding: 0 4px; }
  .np-deals-scroll-wrap .dsw-nav { display: none; }
}
.np-deals-right {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;
}
.np-deals-right::-webkit-scrollbar { display: none; }
.np-deals-right > * { flex: 0 0 240px; }

/* ── Upcoming Promotions ──────────────────────────────────── */
.np-upcoming-sub { text-align:left; font-size: .95rem; color: var(--text2); margin: -8px 0 24px; max-width: 640px; }
/* Cards flow left-to-right; left-aligned, wrap onto next row if too many.
   Each card is a hub-hero–style image card. */
.np-upcoming-grid {
  display: flex; flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px;
}
.np-upcoming-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden; isolation: isolate;
  width: 360px;
  min-height: 320px;
  background-color: #2a1c12;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  text-decoration: none; color: inherit;
  box-shadow: 0 10px 28px rgba(28,28,30,0.10);
  transition: transform .25s, box-shadow .25s;
}
.np-upcoming-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(28,28,30,0.15); }
.np-upcoming-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.68) 100%);
  z-index: 1;
}
[data-theme="dark"] .np-upcoming-card { box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.np-upc-overlay { position: relative; z-index: 2; padding: 22px; color: #fff; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.np-upc-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.np-upc-title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.2; margin: 2px 0 4px; }
.np-upc-desc  { font-size: .88rem; color: rgba(255,255,255,0.85); line-height: 1.45;
                overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-upc-countdown { font-size: .82rem; color: rgba(255,255,255,0.8); font-weight: 600; margin-top: 4px; }
.np-upc-countdown strong { color: #fff; font-variant-numeric: tabular-nums; }
.np-upc-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff; font-weight: 600; font-size: .82rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.np-upc-cta:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
@media (max-width: 720px) {
  .np-upcoming-card { width: 100%; min-height: 280px; }
}

.np-title-row { display:flex; align-items:center; gap:18px; margin-bottom: 28px; }
.np-title-row > .np-line { flex:1; height:1px; background: var(--border); }
.np-title { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; white-space:nowrap; }
.np-title .accent { color: var(--accent); }
.np-title-row .np-cta { white-space:nowrap; margin-left: 12px; }
@media (max-width: 720px) { .np-title { font-size: 1.35rem; } .np-section { padding: 40px 0; } }

/* Hero slider — full-bleed, photo backdrop, copper accent headline word */
.np-hero { position: relative; min-height: clamp(460px, 64vh, 660px); overflow: hidden; background: #1a120c; }
.np-hero-track { position: absolute; inset: 0; display: flex; transition: transform .65s cubic-bezier(.22,.61,.36,1); will-change: transform; direction: ltr; }
[dir="rtl"] .np-hero-slide:not(.flip) { justify-content: flex-end; }
[dir="rtl"] .np-hero-slide:not(.flip) .np-hero-content { text-align: right; direction: rtl; }
[dir="rtl"] .np-hero-slide.flip { justify-content: flex-start; }
[dir="rtl"] .np-hero-slide.flip .np-hero-content { text-align: left; direction: rtl; }
.np-hero-slide { flex: 0 0 100%; position: relative; display: flex; align-items: center; padding: 32px 0; }
.np-hero-slide .hero-photo { position:absolute; inset:0; background-size: cover; background-position: center; }
.np-hero-slide .hero-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); }
.np-hero-slide.flip .hero-photo::after { background: linear-gradient(270deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); }
.np-hero-content { position:relative; z-index:2; max-width: 560px; padding: 24px 0; color: #fff; }
.np-hero-slide.flip { justify-content: flex-end; }
.np-hero-slide.flip .np-hero-content { text-align: right; }
.np-hero-eyebrow { display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#f0e2d2; opacity:.85; margin-bottom: 14px; }
.np-hero-headline { font-family: var(--font-serif); font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; }
.np-hero-headline .accent { color: var(--accent); }
.np-hero-sub { font-size: 1rem; line-height: 1.55; opacity: .9; margin-bottom: 22px; max-width: 480px; }
.np-hero-slide.flip .np-hero-sub { margin-left: auto; }
.np-hero-pill { display:inline-flex; align-items:center; gap:10px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.65); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; transition: background .2s, border-color .2s, color .2s; }
.np-hero-pill:hover { background: var(--accent); border-color: var(--accent); color:#fff; }
.np-hero-dots { position:absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display:flex; gap: 0; z-index: 3; }
/* Visual dot stays 8px, but a transparent padding box enlarges the tap target
   to ~28px each (gap:0 + content-box clip) for easier mobile use. */
.np-hero-dot { width: 8px; height: 8px; box-sizing: content-box; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.45); background-clip: content-box; cursor: pointer; transition: background .2s, transform .2s; border:none; }
.np-hero-dot.active { background: var(--accent); background-clip: content-box; transform: scale(1.4); }
.np-hero-nav { position:absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(8px); z-index: 3; }
.np-hero-nav:hover { background: var(--accent); border-color: var(--accent); }
.np-hero-nav.prev { left: 24px; }
.np-hero-nav.next { right: 24px; }
@media (max-width: 720px) { .np-hero-nav { display:none; } .np-hero-slide.flip { justify-content: flex-start; } .np-hero-slide.flip .np-hero-content { text-align: left; } .np-hero-slide.flip .np-hero-sub { margin-left: 0; } }

/* Hero v2 — static left image + 2x2 product tiles right */
.np-hero-v2 { padding: 28px 0; }
.np-hv2-grid { display:grid; grid-template-columns: 1.55fr 1fr; gap: 24px; min-height: 520px; align-items: stretch; }
@media (max-width: 980px) { .np-hv2-grid { grid-template-columns: 1fr; } }
.np-hv2-left {
  position: relative; border-radius: 20px; overflow: hidden;
  background-size: cover; background-position: center;
  min-height: 480px; text-decoration: none;
  display:flex; align-items: flex-end;
}
.np-hv2-left::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}
.np-hv2-overlay { position:relative; z-index:1; padding: 36px 32px; color:#fff; max-width: 560px; }
.np-hv2-eyebrow { font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,0.85); margin-bottom: 10px; }
.np-hv2-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.08; margin: 0 0 12px; }
.np-hv2-sub { font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 0 0 18px; max-width: 480px; }
.np-hv2-cta { display:inline-flex; align-items:center; gap:6px; padding: 11px 22px; border-radius: 999px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); color:#fff; font-weight: 600; font-size: .9rem; backdrop-filter: blur(10px); transition: background .18s, transform .18s; }
.np-hv2-cta:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }

.np-hv2-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np-hv2-tile {
  display:flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px; text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s;
}
[data-theme="dark"] .np-hv2-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.np-hv2-tile:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.np-hv2-tile-img { width:100%; aspect-ratio: 1/1; border-radius: 12px; background: var(--sand) center/cover no-repeat; margin-bottom: 10px; }
.np-hv2-tile-meta { display:flex; flex-direction:column; gap: 4px; }
.np-hv2-tile-name { font-size: .82rem; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-hv2-tile-price { font-size: .92rem; font-weight: 700; color: var(--accent); }
@media (max-width: 600px) { .np-hv2-right { grid-template-columns: 1fr 1fr; } }

/* Category tile grid — white rounded cards with circular product image */
/* Shop-by-venue is a right-drifting looping marquee (mirror of the partners
   strip, opposite direction). The track holds the tile set twice so the loop is
   seamless; it pauses on hover. Edges fade out with a mask. */
.np-cat-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.np-cat-grid {
  display: flex; align-items: flex-start;
  width: max-content;
  animation: catScrollRight 35s linear infinite;
  will-change: transform;
  padding: 8px 0;
}
/* Per-item margin (NOT flex gap): with gap, N tiles have N-1 gaps so translateX(-50%)
   lands half a gap off a clean copy boundary and the loop visibly jumps. A trailing
   margin on every tile makes each copy exactly repeatable → seamless loop. */
.np-cat-grid .np-cat-tile { margin-right: 22px; }
.np-cat-grid:hover { animation-play-state: paused; }
@keyframes catScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .np-cat-grid { animation: none; } }
/* RTL: the venue + partners marquees are tracks far wider than their frame and
   must lay out left-to-right in every locale. In RTL the track otherwise
   right-aligns and overflows off-screen left (translateX animation then keeps it
   there), so the strip renders blank. Force LTR on the marquee frames only —
   their headings live in a separate .np-title-row, so Arabic text is untouched. */
[dir="rtl"] .np-cat-marquee, [dir="rtl"] .brands-strip { direction: ltr; }
.np-cat-viewall-wrap { text-align: center; margin-top: 24px; }
.np-cat-viewall {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 24px; border-radius: 999px;
  font-family: var(--font-serif); font-weight: 600; font-size: 0.92rem; color: var(--text); text-decoration: none;
  background: var(--glass-tint-md, rgba(255,255,255,0.55)); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 12px rgba(28,28,30,0.06);
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.np-cat-viewall:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); transform: translateY(-2px); }
.np-cat-viewall svg { opacity: 0.75; }
[data-theme="dark"] .np-cat-viewall { background: rgba(255,255,255,0.05); }
.np-cat-tile {
  background: transparent;
  border: none;
  padding: 10px 6px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto;
  transition: transform .2s;
  min-height: auto;
}
.np-cat-tile:hover { transform: translateY(-3px); }
.np-cat-tile-img {
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  /* Transparent product cutouts float directly on the page — no circle behind
     them (the faint grey tint didn't match the cream/dark page and read as a
     visible disc). Cutouts have their own shape, so they blend straight in. */
  background: transparent;
  border: none;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  /* Smooths the cursor-proximity scale/brightness (set in JS) and the ease-back. */
  transition: transform .15s ease-out, filter .15s ease-out;
  will-change: transform;
}
.np-cat-tile-img img {
  width: 100%; height: 100%;
  /* Cutouts have no background — contain (not cover) + padding so the whole
     machine is visible inside the circle instead of a zoomed-in crop. */
  object-fit: contain;
  padding: 18px;
  box-sizing: border-box;
  display: block;
  transition: transform .35s;
}
.np-cat-tile:hover .np-cat-tile-img img { transform: scale(1.05); }
.np-cat-tile-label {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
@media (max-width: 980px) {
  .np-cat-tile-img { width: 120px; height: 120px; }
}
@media (max-width: 520px) {
  .np-cat-grid { gap: 16px; }
  .np-cat-tile-img { width: 100px; height: 100px; }
}

/* Tabbed featured products — sliding glass-pill indicator */
.np-tabs { display: flex; justify-content: center; gap: 0; margin: -8px auto 24px; padding: 4px; position: relative; border-radius: 999px; width: fit-content; }
.np-tab { padding: 8px 18px; border-radius: 999px; border: none; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; transition: color .2s; position: relative; z-index: 2; white-space: nowrap; }
.np-tab:hover { color: var(--text); }
.np-tab.active { color: var(--text); background: transparent !important; }
.np-tab.active::before { display: none !important; }
/* Re-center the tabs row */
.np-tabs-row { display: flex; justify-content: center; }
.np-tab-indicator {
  position: absolute;
  top: 4px; left: 0;
  height: calc(100% - 8px);
  background: var(--glass-tint-md);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), 0 2px 8px rgba(28,28,30,0.08);
  transition: transform .42s cubic-bezier(0.34, 1.4, 0.64, 1), width .32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  width: 0;
  transform: translateX(0);
  overflow: hidden;
}
.np-tab-indicator::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.18) 80%, rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
[data-theme="dark"] .np-tab-indicator {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.35);
}
[data-theme="dark"] .np-tab-indicator::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,.34) 0%, rgba(255,236,200,.10) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(212,136,78,.10) 80%, rgba(212,136,78,.34) 100%);
}

/* Product row sliding transition when tab changes */
.np-product-row { transition: opacity .2s ease, transform .3s cubic-bezier(.4,0,.2,1); will-change: opacity, transform; min-height: 460px; }
.np-product-row.np-slide-out-left  { opacity: 0; transform: translateX(-24px); }
.np-product-row.np-slide-out-right { opacity: 0; transform: translateX(24px); }
/* Reserve slot heights so the magazine grid and category tiles don't collapse pre-load */
.np-mag { min-height: 380px; }
.np-product-row.np-slide-in-left   { opacity: 0; transform: translateX(-24px); }
.np-product-row.np-slide-in-right  { opacity: 0; transform: translateX(24px); }

/* Product card grid (6 across, scales down) */
/* Card prices: stack vertically on /newpage so long values like €23.416,40 don't truncate */
.np-newpage-anchor .np-product-row .price-with-us { flex-direction: column; align-items: flex-start; gap: 1px; }
.np-newpage-anchor .np-product-row .price-compare { font-size: 0.78rem; order: -1; }
.np-newpage-anchor .np-product-row .price-current { font-size: 1.05rem; line-height: 1.2; }

.np-product-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1280px) { .np-product-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .np-product-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .np-product-row { grid-template-columns: repeat(2, 1fr); } }

/* ═══ ITALIAN BAKERY SETUP HUB ═══ */
.np-hub { padding-top: 24px; }
.np-hub .container { padding-left: 32px; padding-right: 32px; }
@media (max-width: 720px) {
  .np-hub .container { padding-left: 16px; padding-right: 16px; }
  .np-hub-hero { min-height: 240px; }
}
.np-hub-intro { max-width: 880px; margin: 0 auto 28px; text-align: center; font-size: .98rem; line-height: 1.7; color: var(--text2); }
.np-hub-layout {
  display: grid;
  /* Three EQUAL columns — matches the reference UniTheme BBQ hub layout. */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 22px;
}
@media (max-width: 1080px) {
  .np-hub-layout { grid-template-columns: 1fr 1fr; }
  .np-hub-hero { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 640px) {
  .np-hub-layout { grid-template-columns: 1fr; }
  .np-hub-hero { grid-column: auto; order: 0; }
}
.np-hub-col {
  display: flex; flex-direction: column;
  background: var(--glass-tint-md);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border-radius: 18px;
  padding: 14px;
  gap: 10px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.np-hub-col::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0) 50%, rgba(196,114,58,0) 50%, rgba(196,114,58,0.08) 75%, rgba(196,114,58,0.22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
[data-theme="dark"] .np-hub-col {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.np-hub-col-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 4px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.np-hub-mini {
  /* Reference layout: image LEFT 120x120, 15px gap, text RIGHT. */
  display: grid; grid-template-columns: 120px 1fr;
  gap: 15px; align-items: center;
  padding: 0 0 15px; border-radius: 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-decoration: none; color: inherit;
  transition: opacity .18s, transform .15s;
  min-height: 120px;
}
.np-hub-mini:last-child { border-bottom: none; padding-bottom: 0; }
.np-hub-mini:hover { transform: translateY(-1px); opacity: .92; }
[data-theme="dark"] .np-hub-mini { border-bottom-color: rgba(255,255,255,0.08); }
.np-hub-mini-img {
  width: 120px; height: 120px; border-radius: 10px;
  object-fit: cover; background: var(--sand);
}
.np-hub-mini-text {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; min-width: 0;
}
.np-hub-mini-name { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.35;
                    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.np-hub-mini-price { font-size: 1rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
[data-theme="dark"] .np-hub-mini-price { color: var(--accent-light, var(--accent)); }

.np-hub-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  min-height: 360px;
  background: linear-gradient(135deg, #2a1c12, #1a1108);
}
.np-hub-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .85;
}
.np-hub-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.78) 100%);
  color: #fff;
}
.np-hub-hero-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.np-hub-hero-title { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 800; line-height: 1.05; margin: 0 0 6px; }
.np-hub-hero-sub { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0 0 14px; max-width: 380px; }
.np-hub-hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem;
  backdrop-filter: blur(8px);
  transition: background .15s, transform .15s;
}
.np-hub-hero-cta:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }

/* margin-top clears the slide dots above so they read clearly. */
.np-hub-carousel-wrap { position: relative; padding: 6px 0; margin-top: 40px; }
/* Both nav arrows grouped at the top-right, above the products. */
.np-hub-carousel-wrap .hcw-nav-top {
  display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px;
}
.np-hub-carousel-wrap .hcw-nav {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass-tint-strong);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.np-hub-carousel-wrap .hcw-nav svg { width: 18px; height: 18px; color: var(--text); }
.np-hub-carousel-wrap .hcw-nav:hover { color: var(--accent); border-color: var(--accent-border); }
@media (max-width: 720px) {
  .np-hub-carousel-wrap { padding: 6px 0; margin-top: 34px; }
  .np-hub-carousel-wrap .hcw-nav-top { display: none; }
  .np-hub-carousel { padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
}
.np-hub-carousel {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0;
  scroll-snap-type: x mandatory;
}
.np-hub-carousel::-webkit-scrollbar { display: none; }
/* Show whole cards only (no half-card peeking): 6 per view on desktop,
   snapping to card edges so every rest position lands on full cards. */
.np-hub-carousel > * { flex: 0 0 calc((100% - 70px) / 6); scroll-snap-align: start; }
@media (max-width: 1100px) { .np-hub-carousel > * { flex: 0 0 calc((100% - 42px) / 4); } }
@media (max-width: 720px)  { .np-hub-carousel > * { flex: 0 0 calc((100% - 14px) / 2); } }

.np-hub-slidewrap { position: relative; }
/* Lock hub height so the empty/loaded states of different variants don't
   collapse the section. Bakery typically loads ~560px tall; reserve that. */
.np-hub-layout { min-height: 560px; }
.np-hub-col { min-height: 560px; }
.np-hub-slidenav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4;
  /* Chevron always dark so it's visible whether the arrow sits over a
     light bread photo or a dark coffee photo, and in both site themes. */
  color: #1c1c1e;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 6px 18px rgba(0,0,0,0.22);
  transition: background .15s, color .15s, transform .15s;
}
/* Position arrows OVER the middle hero column (1/3 from each edge) so they
   sit on the image, not on the outer edges of the layout. */
.np-hub-slidenav.prev { left: calc(33.333% + 8px); }
.np-hub-slidenav.next { right: calc(33.333% + 8px); }
.np-hub-slidenav:hover { background: #fff; color: var(--accent); transform: translateY(-50%) scale(1.05); }
[data-theme="dark"] .np-hub-slidenav {
  background: rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.55);
  color: #1c1c1e;
}
[data-theme="dark"] .np-hub-slidenav:hover { background: #fff; color: var(--accent); }
@media (max-width: 1080px) {
  /* Hub layout collapses to 2 cols, hero spans both. Center arrows on the hero. */
  .np-hub-slidenav.prev { left: 8px; }
  .np-hub-slidenav.next { right: 8px; }
}
@media (max-width: 720px) {
  .np-hub-slidenav { width: 36px; height: 36px; }
  .np-hub-slidenav svg { width: 16px; height: 16px; }
  .np-hub-layout { min-height: 480px; }
  .np-hub-col { min-height: 0; }
}
.np-hub-dots {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.np-hub-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  cursor: pointer; opacity: .35; transition: opacity .2s, background .2s, transform .2s;
  border: none; padding: 0;
}
.np-hub-dot.active { background: var(--accent); opacity: 1; transform: scale(1.4); }
.np-hub-layout { transition: opacity .35s ease; }
.np-hub-layout.fading { opacity: 0; }

.np-pcr-wrap { position: relative; padding: 6px 56px; }
.np-pcr-wrap .pcr-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-tint-strong);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.np-pcr-wrap .pcr-prev { left: 0; }
.np-pcr-wrap .pcr-next { right: 0; }
.np-pcr-wrap .pcr-nav svg { width: 18px; height: 18px; color: var(--text); }
.np-pcr-wrap .pcr-nav:hover { color: var(--accent); border-color: var(--accent-border); }
.np-pcr {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;
}
.np-pcr::-webkit-scrollbar { display: none; }
.np-pcr > * { flex: 0 0 240px; }
@media (max-width: 720px) {
  .np-pcr-wrap { padding: 6px 4px; }
  .np-pcr-wrap .pcr-nav { display: none; }
}

.np-loading-row { padding: 60px 0; text-align: center; color: var(--muted); font-size: .9rem; }
.np-show-more-wrap { text-align: center; margin-top: 22px; }
/* .np-show-more / a.np-cta pill styling moved to main.css (site-wide liquid glass). */

/* Magazine modular grid (workshop highlights) */
.np-mag { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 16px; }
@media (max-width: 1080px) { .np-mag { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .np-mag { grid-template-columns: 1fr; } }
.np-mag-tall { border-radius: 18px; padding: 28px; min-height: 380px; background: linear-gradient(135deg, #faf4eb 0%, #f1e3d0 100%); position: relative; overflow: hidden; }
[data-theme="dark"] .np-mag-tall { background: linear-gradient(135deg, #2a2117 0%, #1a140c 100%); }
.mt-slides { position: relative; height: 100%; min-height: 322px; }
.mt-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.mt-slide.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.np-mag-tall .mt-eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.np-mag-tall .mt-title { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; margin: 8px 0 6px; color: var(--text); line-height: 1.1; }
.np-mag-tall .mt-sub { font-size: .9rem; color: var(--text2); margin-bottom: 18px; }
.np-mag-tall .mt-img { width: 100%; height: 180px; object-fit: contain; align-self: center; border-radius: 12px; }
.np-mag-tall .mt-cta { align-self: flex-start; display:inline-flex; align-items:center; gap:6px; color: var(--text); font-weight: 600; font-size: .82rem; text-decoration: none; }
.np-mag-tall .mt-cta:hover { color: var(--accent); }
.mt-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.mt-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(28,28,30,0.22); cursor: pointer; transition: background .2s, transform .2s; }
.mt-dot:hover { background: rgba(28,28,30,0.45); }
.mt-dot.active { background: var(--accent); transform: scale(1.25); }
[data-theme="dark"] .mt-dot { background: rgba(255,236,200,0.20); }
[data-theme="dark"] .mt-dot:hover { background: rgba(255,236,200,0.40); }
[data-theme="dark"] .mt-dot.active { background: var(--accent); }
.np-mag-center { border-radius: 18px; padding: 24px; background: var(--glass-card); backdrop-filter: blur(14px); min-height: 380px; position: relative; }
.mc-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 332px; transition: opacity .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1); }
.mc-stage.fading { opacity: 0; transform: translateX(-22px); }
.mc-stage.fading.dir-back { transform: translateX(22px); }
.np-mag-list { transition: opacity .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1); }
.np-mag-list.fading { opacity: 0; transform: translateY(10px); }
[data-theme="dark"] .np-mag-center { background: rgba(24,22,17,.55); }
.np-mag-center .mc-img { max-width: 70%; max-height: 230px; object-fit: contain; margin: 16px 0; }
.np-mag-center .mc-name { font-weight: 600; color: var(--text); font-size: .95rem; text-align: center; margin-bottom: 6px; }
.np-mag-center .mc-price { font-size: 1.05rem; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.np-mag-center .mc-add {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color: #fff; border: none;
  font-weight: 600; font-size: .85rem; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
              0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  overflow: hidden; isolation: isolate;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.np-mag-center .mc-add::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 28%,
    rgba(255,255,255,0) 55%,
    color-mix(in srgb, var(--accent) 30%, transparent) 80%,
    color-mix(in srgb, var(--accent) 90%, white) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
.np-mag-center .mc-add > * { position: relative; z-index: 2; }
.np-mag-center .mc-add::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 25%, rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 75%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none; opacity: 0; mix-blend-mode: overlay; z-index: 1;
}
.np-mag-center .mc-add:hover {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
              0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent);
}
.np-mag-center .mc-add:hover::after { animation: subscribeSheen .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; opacity: 1; }
/* Override the general .np-mag-center > * rule that forces every
   direct child to position:relative + z-index:2. The arrows need
   absolute positioning AND a higher z-index than .mc-stage,
   otherwise the stage (later in DOM order) steals every click. */
.np-mag-center > .mc-nav { position: absolute !important; z-index: 5 !important; }
.mc-nav { top: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(28,28,30,0.10); transition: background .15s, transform .15s; }
.mc-nav svg { width: 14px; height: 14px; }
.mc-nav:hover { background: #fff; transform: translateY(-1px); }
.mc-prev { left: 16px; }
.mc-next { right: 16px; }
[data-theme="dark"] .mc-nav { background: rgba(40,32,22,0.85); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
[data-theme="dark"] .mc-nav:hover { background: rgba(50,40,28,0.95); }
.np-mag-list { display: flex; flex-direction: column; gap: 10px; }
.np-mag-li { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 11px; border-radius: 14px; background: var(--glass-card); backdrop-filter: blur(14px); text-decoration: none; color: inherit; transition: background .15s, transform .15s; align-items: center; }
.np-mag-li:hover { background: var(--glass-heavy); transform: translateX(-3px); }
[data-theme="dark"] .np-mag-li { background: rgba(24,22,17,.55); }
.np-mag-li img { width: 72px; height: 72px; object-fit: contain; }
.np-mag-li .li-name { font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.np-mag-li .li-code { font-size: .68rem; color: var(--muted); margin-top: 4px; }
.np-mag-li .li-price { margin-top: 6px; font-weight: 700; color: var(--accent); font-size: .95rem; }

/* Big promo cards row (4 wide, full-bleed photographic) */
.np-promo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 920px) { .np-promo-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .np-promo-row { grid-template-columns: 1fr; } }
.np-promo-card { position: relative; aspect-ratio: 1 / 1.6; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background-size: cover; background-position: center; transition: transform .25s; }
@media (max-width: 920px) { .np-promo-card { aspect-ratio: 1 / 1.2; } }
@media (max-width: 520px) { .np-promo-card { aspect-ratio: 1.6 / 1; } }
.np-promo-card:hover { transform: translateY(-3px); }
.np-promo-card::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%); }
.np-promo-card > * { position: relative; z-index: 2; }
.np-promo-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.np-promo-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.12; margin-bottom: 14px; }
/* Frosted liquid-glass pill — matches the hero "Explore →" CTA. */
.np-promo-pill { display:inline-flex; align-items:center; gap:8px; padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.65); color:#fff; font-size: .85rem; font-weight: 600; align-self: flex-start; transition: background .2s, border-color .2s, color .2s; }
.np-promo-card:hover .np-promo-pill { background: var(--accent); border-color: var(--accent); color:#fff; }

/* Latest news asymmetric grid (1 large + 6 smaller in 3x2) */
.np-news { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.np-news-card { border-radius: 16px; overflow: hidden; background: var(--glass-card); backdrop-filter: blur(14px); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s; }
[data-theme="dark"] .np-news-card { background: rgba(24,22,17,.55); }
.np-news-card:hover { transform: translateY(-3px); }
.np-news-card .nc-img { aspect-ratio: 16/10; background-size: cover; background-position: center; flex-shrink: 0; }
.np-news-card .nc-body { padding: 14px 16px; }
.np-news-card .nc-date { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.np-news-card .nc-title { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.np-news-featured { grid-column: 1; grid-row: 1 / span 2; }
.np-news-featured .nc-img { flex: 1; min-height: 280px; }
.np-news-featured .nc-title { font-family: var(--font-serif); font-size: 1.15rem; }
@media (max-width: 980px) { .np-news { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .np-news-featured { grid-column: 1 / -1; grid-row: auto; } .np-news-featured .nc-img { min-height: 200px; } }
@media (max-width: 520px) { .np-news { grid-template-columns: 1fr; } }

/* ── Blog stacked cards (sticky-stack deck) ───────────────────── */
.blog-stack { display: flex; flex-direction: column; gap: 26px; }
.bstack-card {
  position: sticky;
  /* each card sticks a little lower than the previous, so they pile into a deck
     with the earlier cards' headers peeking above */
  top: calc(var(--nav-h, 64px) + 22px + var(--i) * 16px);
  display: block; position: sticky;
  /* full-page panels: each blog slide fills the screen (no cropped strip), and
     they stack as you scroll, revealing the next full page underneath */
  height: clamp(460px, 86vh, 820px);
  border-radius: 24px; overflow: hidden;
  text-decoration: none; color: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22), 0 6px 18px rgba(0,0,0,0.12);
  transform: scale(calc(1 - var(--i) * 0.012));
  transform-origin: center top;
  isolation: isolate;
}
.bstack-card .bstack-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.bstack-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,14,8,0) 28%, rgba(20,14,8,0.45) 62%, rgba(20,14,8,0.82) 100%);
}
.bstack-card:hover .bstack-bg { transform: scale(1.05); }
.bstack-body {
  position: relative; z-index: 2;
  margin-top: auto; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 30px;
}
.bstack-date { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.bstack-title { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.2; color: #fff; }
.bstack-read { font-size: .82rem; font-weight: 600; color: var(--accent-light, #F2C4A0); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.bstack-card:hover .bstack-read { opacity: 1; transform: translateY(0); }
.blog-viewall-row { display: flex; justify-content: center; margin-top: 30px; }
.blog-viewall {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text); text-decoration: none;
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--accent-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px rgba(196,114,58,0.14);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.blog-viewall:hover { transform: translateY(-1px); background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(196,114,58,0.32); }
@media (prefers-reduced-motion: reduce) { .bstack-card { position: relative; transform: none; top: auto; } }

/* Newsletter + Social block */
.np-cta-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .np-cta-pair { grid-template-columns: minmax(0, 1fr); } }
.np-cta-card { min-width: 0; max-width: 100%; background: var(--glass-card); backdrop-filter: blur(14px); border-radius: 18px; padding: 32px 28px; text-align: center; border: 1px solid rgba(28,28,30,.04); }
[data-theme="dark"] .np-cta-card { background: rgba(24,22,17,.55); border-color: rgba(255,236,200,.06); }
.np-cta-card h3 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.np-cta-card .lead { font-size: .92rem; color: var(--text2); margin-bottom: 6px; }
.np-cta-card .sub { font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.np-newsletter-form { display: flex; gap: 8px; max-width: 380px; width: 100%; margin: 0 auto; }
.np-newsletter-form input { flex: 1 1 0; min-width: 0; width: 100%; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(28,28,30,.12); background: #fff; font-size: .9rem; outline: none; }
.np-newsletter-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,114,58,.12); }
.np-newsletter-form button {
  position: relative;
  padding: 12px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color:#fff; border:none;
  font-weight: 600; font-size: .85rem;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.np-newsletter-form button::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.25) 28%,
    rgba(255,255,255,0)    55%,
    color-mix(in srgb, var(--accent) 30%, transparent) 80%,
    color-mix(in srgb, var(--accent) 90%, white) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
.np-newsletter-form button > * { position: relative; z-index: 2; }
.np-newsletter-form button::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 75%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none; opacity: 0;
  mix-blend-mode: overlay;
  z-index: 1;
}
.np-newsletter-form button:hover {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent);
}
.np-newsletter-form button:hover::after {
  animation: subscribeSheen .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  opacity: 1;
}
@keyframes subscribeSheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
.np-social-row { display: flex; gap: 10px; justify-content: center; }
.np-social-row a { width: 40px; height: 40px; border-radius: 50%; background: rgba(28,28,30,.06); display: flex; align-items: center; justify-content: center; color: var(--text2); transition: background .15s, color .15s, transform .15s; }
[data-theme="dark"] .np-social-row a { background: rgba(255,236,200,.08); }
.np-social-row a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* Footer */
.np-footer { background: #0a0a0a; color: #c8c2b8; padding: 56px 0 0; margin-top: 64px; }
[data-theme="dark"] .np-footer { background: #000; }
.np-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
@media (max-width: 820px) { .np-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .np-footer-grid { grid-template-columns: 1fr; } }
.np-footer h4 { color:#fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.np-footer ul { list-style: none; padding: 0; margin: 0; }
.np-footer li { margin-bottom: 8px; }
.np-footer a { color: #b8b2a8; text-decoration: none; font-size: .85rem; transition: color .15s; }
.np-footer a:hover { color: var(--accent); }
.np-footer-brand { max-width: 320px; }
.np-footer-brand .fb-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800; color: #fff; }
.np-footer-brand .fb-name span { color: var(--accent); }
.np-footer-brand p { font-size: .85rem; line-height: 1.6; margin-top: 8px; color: #b8b2a8; }
.np-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: .78rem; color: #8a8478; }
.np-footer-bottom .pay-methods { margin: 0; }
.np-footer-bottom .np-footer-copyright { text-align: center; }
.np-pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-pay-row .pay { height: 26px; padding: 5px 10px; background: #fff; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 800; color: #222; letter-spacing: .02em; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.np-pay-row .pay.visa { color: #1a1f71; }
.np-pay-row .pay.mc { color: #eb001b; }
.np-pay-row .pay.amex { color: #006fcf; }
.np-pay-row .pay.paypal { color: #003087; }
.np-pay-row .pay.btc { background: #f7931a; color: #fff; }
.np-pay-row .pay.usdt { background: #26a17b; color: #fff; }

/* ════════════════════════════════════════════════════════════════
   LIQUID GLASS PASS — gradient-mask ::before borders + stronger blur
   on every np-* card surface. Heavy `!important` because some props
   override the base class definitions above. The gradient uses the
   same recipe as main.css glass system (warm cream → copper accent).
   ════════════════════════════════════════════════════════════════ */
.np-mag-tall,
.np-mag-center,
.np-mag-li,
.np-mfr-card,
.np-news-card,
.np-cta-card {
  position: relative !important;
  backdrop-filter: blur(40px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.7) !important;
  background: var(--glass-heavy) !important;
  border: none !important;
  box-shadow:
    0 6px 24px rgba(28,28,30,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  transform: translateZ(0);
}
.np-mag-tall::before,
.np-mag-center::before,
.np-mag-li::before,
.np-mfr-card::before,
.np-news-card::before,
.np-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.18) 18%,
    rgba(255,255,255,0)   50%,
    rgba(196,114,58,0)    50%,
    rgba(196,114,58,.06)  75%,
    rgba(196,114,58,.22)  100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.np-mag-tall > *,
.np-mag-center > *,
.np-mag-li > *,
.np-mfr-card > *,
.np-news-card > *,
.np-cta-card > * { position: relative; z-index: 2; }

/* Dark theme uses the warm-amber gradient stops, same recipe as global glass */
[data-theme="dark"] .np-mag-tall,
[data-theme="dark"] .np-mag-center,
[data-theme="dark"] .np-mag-li,
[data-theme="dark"] .np-mfr-card,
[data-theme="dark"] .np-news-card,
[data-theme="dark"] .np-cta-card {
  background: rgba(24,22,17,.72) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,236,200,0.06) !important;
}
[data-theme="dark"] .np-mag-tall::before,
[data-theme="dark"] .np-mag-center::before,
[data-theme="dark"] .np-mag-li::before,
[data-theme="dark"] .np-mfr-card::before,
[data-theme="dark"] .np-news-card::before,
[data-theme="dark"] .np-cta-card::before {
  background: linear-gradient(135deg,
    rgba(255,236,200,.42)  0%,
    rgba(255,236,200,.10)  18%,
    rgba(255,255,255,0)    50%,
    rgba(212,136,78,0)     50%,
    rgba(212,136,78,.08)   75%,
    rgba(212,136,78,.30)   100%) !important;
}

/* Magazine tall card kept its warm cream gradient backing — let it shine through */
.np-mag-tall { background: linear-gradient(135deg, rgba(250,244,235,0.85) 0%, rgba(241,227,208,0.85) 100%) !important; }
[data-theme="dark"] .np-mag-tall { background: linear-gradient(135deg, rgba(42,33,23,0.82) 0%, rgba(26,20,12,0.82) 100%) !important; }

/* Promo cards: photographic, but add a soft gradient hairline so they don't feel flat */
.np-promo-card { box-shadow: 0 6px 24px rgba(28,28,30,0.18), inset 0 0 0 1px rgba(255,255,255,0.10); }

/* Show-more buttons → liquid glass (mirrors .btn-glass recipe) */
.np-show-more {
  position: relative !important;
  background: var(--glass-tint-md) !important;
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: none !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.55),
    0 2px 6px rgba(28,28,30,0.05);
  overflow: hidden;
}
.np-show-more::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.np-show-more > * { position: relative; z-index: 2; }
.np-show-more:hover {
  background: color-mix(in srgb, var(--glass-tint-strong) 92%, var(--accent) 8%) !important;
  color: var(--accent) !important;
  transform: translateY(-1px) translateZ(0);
}
.np-show-more:disabled { opacity: 0.55; cursor: progress; }
[data-theme="dark"] .np-show-more {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.10),
    0 2px 6px rgba(0,0,0,0.30) !important;
}
[data-theme="dark"] .np-show-more::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,.34) 0%,
    rgba(255,236,200,.10) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(212,136,78,.10) 80%,
    rgba(212,136,78,.34) 100%);
}

/* Featured-row tabs also get the glass treatment for visual consistency */
.np-tab {
  position: relative;
  transition: all .18s;
}
.np-tab.active {
  background: var(--glass-tint-md) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), 0 2px 6px rgba(28,28,30,0.05);
}
.np-tab.active::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.18) 80%, rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
[data-theme="dark"] .np-tab.active::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,.34) 0%, rgba(255,236,200,.10) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(212,136,78,.10) 80%, rgba(212,136,78,.34) 100%);
}

/* ════════════════════════════════════════════════════════════════
   Categories mega-dropdown — stronger glass scoped to /newpage.
   Higher blur, lower opacity, gradient mask on both panels.
   ════════════════════════════════════════════════════════════════ */
.np-newpage-anchor .cat-dropdown {
  background: color-mix(in srgb, var(--cream) 48%, transparent) !important;
  backdrop-filter: blur(80px) saturate(2.0) !important;
  -webkit-backdrop-filter: blur(80px) saturate(2.0) !important;
  box-shadow:
    0 32px 80px rgba(28,28,30,0.22),
    0 8px 20px rgba(28,28,30,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.np-newpage-anchor .cat-dropdown-list {
  background: color-mix(in srgb, var(--sand, #f0ebe4) 38%, transparent) !important;
  border-right: 1px solid rgba(28,28,30,0.06);
}
.np-newpage-anchor .cat-dropdown-panel {
  background: color-mix(in srgb, #ffffff 28%, transparent) !important;
  position: relative;
}
.np-newpage-anchor .cat-dropdown-overlay {
  background: rgba(28,28,30,0.25) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

[data-theme="dark"] .np-newpage-anchor .cat-dropdown {
  background: rgba(22,20,15,0.48) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.65),
    0 8px 20px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,236,200,0.08) !important;
}
[data-theme="dark"] .np-newpage-anchor .cat-dropdown-list {
  background: rgba(12,11,9,0.30) !important;
  border-right: 1px solid rgba(255,236,200,0.08);
}
[data-theme="dark"] .np-newpage-anchor .cat-dropdown-panel {
  background: rgba(22,20,15,0.14) !important;
}
[data-theme="dark"] .np-newpage-anchor .cat-dropdown-overlay {
  background: rgba(0,0,0,0.45) !important;
}

/* ── Explore current promotions: CTA strip + product carousel ── */
.np-explore { padding: 36px 0; }
.np-explore-band {
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  border-radius: 22px;
  padding: 44px 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  isolation: isolate;
}
.np-explore-video {
  position: absolute; top: 0; bottom: 0;
  /* LTR: nudge the flame slightly inward from the band's right edge so it
     reads as a deliberate accent rather than flush-against-edge. */
  right: 60px;
  width: 42%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  pointer-events: none;
  /* Inner-edge fade lands on the card-facing side. The CSS variable flips
     direction automatically in RTL via the rule below. */
  -webkit-mask-image: linear-gradient(to var(--inner-fade-dir, left), #000 78%, transparent 100%);
          mask-image: linear-gradient(to var(--inner-fade-dir, left), #000 78%, transparent 100%);
}
/* RTL: keep the flame flush against the band's left edge (unchanged — user
   asked for the LTR nudge only, not RTL). */
[dir="rtl"] .np-explore-video { right: auto; left: 0; }
/* The ice clip is a 960x960 square, and `cover` was cropping the top and
   bottom off it. `contain` shows the whole frame; narrower so it reads as an
   accent rather than half the band. */
.np-ice-video {
  width: 34%; object-fit: contain; object-position: center; right: 34px;
  /* Feathered well inside the frame so no straight edge of the clip is ever
     visible — the opaque core is small and the fade runs a long way out. */
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 52% 50%, #000 30%, rgba(0,0,0,0.9) 52%, rgba(0,0,0,0.45) 72%, transparent 90%);
          mask-image: radial-gradient(ellipse 60% 58% at 52% 50%, #000 30%, rgba(0,0,0,0.9) 52%, rgba(0,0,0,0.45) 72%, transparent 90%);
}
/* The whole band is built from the clip's OWN colours, sampled zone by zone off
   a frame: backdrop runs #00688a at its darkest through #007393 and #0084a2 to
   #248da5 at its lightest, with the top corners around #0082a0 and the bottom
   right the deepest at #00698b. The band reproduces that same sweep — deepest
   under the cards for text contrast, brightest where the clip sits — so the
   video and the panel are one continuous surface rather than a photo on a box. */
/* The shared overlay lays a black scrim from 15% to 75% over the whole band,
   which was flattening the teal back to near-black and making the clip look
   like a bright rectangle punched through a dark panel. For the ice band, tint
   that scrim teal and keep it light so the sampled palette actually survives. */
#npIceSection .np-explore-overlay {
  /* Measured off the live render rather than trusting the CSS: the panel was
     coming out at #085d73 while the clip's backdrop rendered near #2b8095, and
     the gap was this scrim, which sits over BOTH but bites the flat panel
     harder than the bright picture. Taper it away toward the right so the two
     meet at their true colours; keep it on the left where the cards need the
     contrast. */
  background: linear-gradient(100deg, rgba(1,30,42,0.62) 0%, rgba(1,40,54,0.4) 34%, rgba(1,45,60,0.16) 62%, rgba(1,50,66,0.04) 80%, rgba(1,50,66,0) 100%);
}
/* The clip is square but its slot is tall, so with object-fit: contain the
   picture sat in a centred square SMALLER than the element — and a mask is
   measured against the element, so the fade landed in empty space and left the
   picture's own straight edges showing. Making the slot square puts the mask
   back on the picture. */
#npIceSection .np-explore-video { top: 50%; bottom: auto; transform: translateY(-50%); aspect-ratio: 1 / 1; height: auto; }
#npIceSection .np-explore-band {
  /* Right-hand end matched to the values he measured off the live render:
     #0b728d mid-right, #0b758e top-right, #0c728a bottom-right. The two small
     radials place the top and bottom tones where he measured them; the linear
     lands on #0b728d and stays there, so the panel meets the clip on the same
     colour instead of a brighter one. */
  background:
    radial-gradient(ellipse 42% 46% at 88% 10%, #0b758e 0%, rgba(11,117,142,0) 72%),
    radial-gradient(ellipse 42% 46% at 88% 92%, #0c728a 0%, rgba(12,114,138,0) 72%),
    linear-gradient(103deg, #013b4e 0%, #00506a 22%, #05627e 46%, #0a6c86 70%, #0b728d 88%, #0b728d 100%);
}
[data-theme="light"] #npIceSection .np-explore-band {
  background:
    radial-gradient(ellipse 46% 78% at 78% 50%, #53939e 0%, rgba(83,147,158,0) 68%),
    linear-gradient(103deg, #024154 0%, #005872 22%, #00688a 48%, #007393 68%, #0084a2 86%, #159db8 100%);
}
@media (max-width: 880px) { .np-ice-video { width: 44%; } }
@media (max-width: 560px) {
  .np-ice-video { width: 82%; opacity: 0.3; }
  /* Stacked on a phone the clip sits behind the cards, so run the same palette
     vertically and keep the top end deep enough to read card text over. */
  #npIceSection .np-explore-band { background: linear-gradient(180deg, #013b4e 0%, #00506a 45%, #00688a 78%, #007393 100%); }
}
[dir="rtl"] { --inner-fade-dir: right; }
@media (max-width: 880px) { .np-explore-video { width: 55%; } }
@media (max-width: 560px) { .np-explore-video { width: 100%; opacity: 0.35; } }
.np-explore-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}
.np-explore-content { position: relative; z-index: 2; }
.np-explore-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.np-explore-accent { color: rgba(255,255,255,0.92); font-style: italic; }
.np-explore-sub {
  font-size: .95rem;
  color: rgba(255,255,255,0.88);
  margin: 0 0 28px;
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.np-pcr-wrap { position: relative; display: flex; align-items: center; gap: 10px; }
.np-pcr {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;
  flex: 1;
}
.np-pcr::-webkit-scrollbar { display: none; }
.np-pcr > * { flex: 0 0 220px; }

/* Explore (flame band) — cap to MAX 3 cards visible; scroll the rest.
   Cards stay at the standard catalog size; the flame video fills the
   opposite side as a smaller ambient backdrop. */
.np-explore-pcr .np-pcr > * { flex: 0 0 220px; }
.np-explore-pcr .np-pcr {
  /* 3 cards × 220px + 2 × 14px gap = 688px */
  max-width: 688px;
  flex: 0 1 auto;
  margin-right: auto; /* push the carousel + arrows toward the LTR side, leaving the flame visible on the right */
}
[dir="rtl"] .np-explore-pcr .np-pcr {
  margin-right: 0;
  margin-left: auto; /* mirror in RTL: cards on the right, flame on the left */
}
.np-explore-pcr { justify-content: flex-start; }
[dir="rtl"] .np-explore-pcr { justify-content: flex-end; }
@media (max-width: 880px) {
  .np-explore-pcr .np-pcr > * { flex: 0 0 200px; }
  .np-explore-pcr .np-pcr { max-width: 100%; }
}
@media (max-width: 560px) {
  .np-explore-pcr .np-pcr > * { flex: 0 0 80%; }
}
.pcr-nav {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(28,28,30,0.16);
  background: rgba(255,255,255,0.85);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s;
}
.pcr-nav svg { width: 18px; height: 18px; }
.np-explore-pcr .pcr-nav {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.36);
  color: #fff;
}
.np-explore-pcr .pcr-nav svg { color: #fff; }
.np-explore-pcr .pcr-nav:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.55); }
/* Top-right arrow cluster for the homepage product carousels (matches the hub),
   instead of arrows sitting on the far-left / far-right edges. */
.np-pcr-wrap.pcr-top { display: block; padding: 0; }
.np-pcr-wrap.pcr-top .pcr-nav-top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.np-pcr-wrap.pcr-top .pcr-nav { position: static; transform: none; top: auto; }
/* Clean full cards (no half-card peek), snapping to card edges. */
.np-pcr-wrap.pcr-top .np-pcr { scroll-snap-type: x mandatory; }
.np-pcr-wrap.pcr-top .np-pcr > * { flex: 0 0 calc((100% - 70px) / 6); scroll-snap-align: start; }
@media (max-width: 1100px) { .np-pcr-wrap.pcr-top .np-pcr > * { flex: 0 0 calc((100% - 42px) / 4); } }
@media (max-width: 720px)  { .np-pcr-wrap.pcr-top .np-pcr > * { flex: 0 0 calc((100% - 14px) / 2); } .np-pcr-wrap.pcr-top .pcr-nav-top { display: none; } }
[data-theme="dark"] .np-explore-band { box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

/* Same stacking fix as the dp pages: the header is z-index 100 and the strip
   creates its own stacking context, so its dropdowns can only escape if the
   strip outranks the header. */
.np-utility{position:relative;z-index:200}