/* /discover and /discover/<type>/<slug> — uses the same design tokens as
   /collections so the experience feels native. Mobile-first responsive. */

:root {
  --primary-color: #2C3E50;
  --primary-light: #34495E;
  --accent-color: #D4AF37;
  --accent-hover: #C19B2E;
  --secondary-color: #1A1A1A;
  --text-primary: #2C3E50;
  --text-secondary: #5A6C7D;
  --text-light: #8B9DAD;
  --background-light: #F8F9FA;
  --background-cream: #FFF9F0;
  --border-color: #E8ECEF;
  --border-dark: #D1D8DD;
  --shadow-sm: 0 2px 8px rgba(44, 62, 80, 0.06);
  --shadow-md: 0 4px 16px rgba(44, 62, 80, 0.08);
  --shadow-lg: 0 8px 32px rgba(44, 62, 80, 0.12);
  --shadow-xl: 0 16px 48px rgba(44, 62, 80, 0.15);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Discover-specific */
  --grid-gap: 10px;
}

/* Halloween canonical occasion hub — mobile-first market navigation and
   inventory-backed filters. All cards use existing brand tokens/fallbacks so
   the module remains legible if the premium font layer is delayed. */
.dz-halloween-paths,
.dz-market-filters,
.dz-halloween-guides {
  margin: 24px 0;
}

.dz-halloween-section-head {
  max-width: 760px;
  margin-bottom: 16px;
}

.dz-halloween-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #8b4b18;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.dz-halloween-section-head h2,
.dz-market-filter-head h2 {
  margin: 0;
  color: #26142f;
  font-family: var(--font-display, "Cormorant Garamond", "Cormorant Fallback", serif);
  font-size: clamp(1.65rem, 7vw, 2.45rem);
  line-height: 1.06;
}

.dz-halloween-section-head p,
.dz-market-filter-head p {
  margin: 9px 0 0;
  color: #625a66;
  font-size: .94rem;
  line-height: 1.6;
}

.dz-halloween-path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dz-halloween-path {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  min-height: 108px;
  padding: 18px 44px 18px 18px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 155, 55, .28), transparent 42%),
    linear-gradient(145deg, #2d1638, #4d244f 68%, #6c342b);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(42, 19, 48, .13);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dz-halloween-path:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(42, 19, 48, .2);
}

.dz-halloween-path-title {
  font-family: var(--font-display, "Cormorant Garamond", "Cormorant Fallback", serif);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.1;
}

.dz-halloween-path-desc {
  grid-column: 1;
  color: rgba(255, 255, 255, .78);
  font-size: .81rem;
  line-height: 1.45;
}

.dz-halloween-path-arrow {
  position: absolute;
  right: 17px;
  top: 17px;
  color: #f5ad55;
  font-size: 1.25rem;
}

.dz-market-filters {
  padding: 18px 14px;
  color: #26142f;
  background: linear-gradient(150deg, #fffaf4, #fff 52%, #f7f1fa);
  border: 1px solid #eaddeb;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(45, 22, 56, .1);
}

.dz-market-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dz-market-filter-reset {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  color: #5c2a63;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  background: #fff;
  border: 1px solid #d9c7dd;
  border-radius: 999px;
  cursor: pointer;
}

.dz-market-filter-reset[hidden] { display: none; }

.dz-market-filter-groups {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.dz-market-filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dz-market-filter-group legend {
  margin-bottom: 8px;
  padding: 0;
  color: #3b3340;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.dz-market-filter-options {
  display: flex;
  gap: 8px;
  margin: 0 -14px;
  padding: 0 14px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: inline proximity;
}

.dz-market-filter {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 11px 9px 14px;
  color: #3f3543;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d9ccd9;
  border-radius: 999px;
  box-shadow: 0 3px 9px rgba(47, 29, 51, .05);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.dz-market-filter:hover:not(:disabled) { transform: translateY(-1px); border-color: #85518a; }
.dz-market-filter[aria-pressed="true"] {
  color: #fff;
  background: #54285c;
  border-color: #54285c;
}

.dz-market-filter:disabled {
  color: #aaa3ac;
  background: #f3f0f3;
  border-color: #ebe5eb;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .72;
}

.dz-market-filter[aria-pressed="true"]:disabled {
  color: #fff;
  background: #54285c;
  border-color: #54285c;
  opacity: .78;
}

.dz-market-filter-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  place-items: center;
  color: inherit;
  font-size: .7rem;
  background: rgba(86, 47, 91, .08);
  border-radius: 999px;
}

.dz-market-filter[aria-pressed="true"] .dz-market-filter-count { background: rgba(255, 255, 255, .18); }

.dz-market-filter-status {
  margin: 14px 0 0;
  color: #6c626e;
  font-size: .78rem;
  font-weight: 650;
}

.dz-pin[hidden] { display: none !important; }

/* Theme filter rail on audience hubs (/discover/for/*). Server-rendered (no
   post-paint injection → no CLS); chips are buttons whose state lives in the
   DOM only — topic.js swaps the grid through the feed API. */
.dz-theme-filters { margin: 14px 0 12px; }
.dz-theme-filter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.dz-theme-filter-title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.dz-theme-filter-status {
  margin: 0;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
}
.dz-theme-chips {
  display: flex;
  gap: 8px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dz-theme-chips::-webkit-scrollbar { display: none; }
.dz-theme-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 11px 9px 14px;
  color: #3f3543;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d9ccd9;
  border-radius: 999px;
  box-shadow: 0 3px 9px rgba(47, 29, 51, .05);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dz-theme-chip:hover { border-color: #85518a; }
.dz-theme-chip.is-active,
.dz-theme-chip[aria-pressed="true"] {
  color: #fff;
  background: #54285c;
  border-color: #54285c;
}
.dz-theme-chip-count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  color: inherit;
  font-size: .7rem;
  background: rgba(86, 47, 91, .08);
  border-radius: 999px;
}
.dz-theme-chip.is-active .dz-theme-chip-count,
.dz-theme-chip[aria-pressed="true"] .dz-theme-chip-count { background: rgba(255, 255, 255, .18); }
.dz-theme-chip:focus-visible { outline: 3px solid #ed9a3b; outline-offset: 3px; }
@media (min-width: 640px) {
  .dz-theme-chips { flex-wrap: wrap; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-theme-chip { transition: none; }
}

.dz-halloween-guide-grid,
.dz-halloween-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dz-halloween-guide-card,
.dz-halloween-feature-grid article {
  padding: 18px;
  background: #fff;
  border: 1px solid #e9e0e8;
  border-radius: 16px;
}

.dz-halloween-guide-card h3,
.dz-halloween-feature-grid h3 {
  margin: 0 0 7px;
  color: #34233a;
  font-family: var(--font-display, "Cormorant Garamond", "Cormorant Fallback", serif);
  font-size: 1.16rem;
  line-height: 1.15;
}

.dz-halloween-guide-card p,
.dz-halloween-feature-grid p {
  margin: 0;
  color: #6a626c;
  font-size: .84rem;
  line-height: 1.55;
}

.dz-halloween-feature-grid {
  margin-top: 10px;
}

.dz-halloween-feature-grid article:first-child {
  color: #fff;
  background: linear-gradient(145deg, #402048, #713c4f);
  border-color: transparent;
}

.dz-halloween-feature-grid article:first-child h3,
.dz-halloween-feature-grid article:first-child p { color: #fff; }

.dz-market-filter:focus-visible,
.dz-market-filter-reset:focus-visible,
.dz-halloween-path:focus-visible {
  outline: 3px solid #ed9a3b;
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .dz-halloween-paths,
  .dz-market-filters,
  .dz-halloween-guides { margin: 34px 0; }
  .dz-halloween-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-market-filters { padding: 24px; }
  .dz-market-filter-options { margin: 0; padding: 0 0 4px; flex-wrap: wrap; overflow: visible; }
  .dz-halloween-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-halloween-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .dz-halloween-path-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dz-market-filter-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
  .dz-halloween-guide-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dz-halloween-path,
  .dz-market-filter { transition: none; }
}

/* ── Halloween persona lane ────────────────────────────────────────────────
   The "which one is you?" doorway above the attribute filters. Server-rendered
   into first paint and every card is a fixed-height object, so nothing here can
   shift layout. The buttons inside carry data-filter-group="persona" and reuse
   .dz-market-filter, so the press state and count chip come for free. */
.dz-persona-lane {
  margin: 20px 0 26px;
  padding: 18px 14px;
  color: #26142f;
  background: linear-gradient(155deg, #fff6ec, #fffdfb 46%, #f4eefa);
  border: 1px solid #ecdcdf;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(45, 22, 56, .1);
}

.dz-persona-head { max-width: 720px; margin-bottom: 16px; }
.dz-persona-head h2 {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.45rem, 4.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.15;
}
.dz-persona-head p { margin: 0; color: #6c626e; font-size: .88rem; line-height: 1.5; }

.dz-persona-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dz-persona-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  background: #fff;
  border: 1px solid #efe4f0;
  border-radius: 16px;
}

.dz-persona-thumb {
  align-self: start;
  width: 78px;
  height: 104px;
  object-fit: cover;
  border-radius: 11px;
  background: #f3ecf4;
}
.dz-persona-thumb-empty { display: block; }

.dz-persona-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; height: 100%; }

.dz-persona-kicker {
  color: #8b4b18;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dz-persona-label {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
}

.dz-persona-line { margin: 0 0 4px; color: #5d545f; font-size: .85rem; line-height: 1.45; }

.dz-persona-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  /* Pushed to the bottom so the buttons line up across a row whatever the
     copy length — the cards read as one object, not five loose ones. */
  margin-top: auto;
  padding-top: 8px;
}

/* The product shortcut: one tap from "that's me" to a page that takes a photo. */
.dz-persona-try {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 14px;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  background: #562f5b;
  border-radius: 999px;
}
.dz-persona-try:hover { background: #6b3c71; }
.dz-persona-try-sub {
  overflow: hidden;
  color: rgba(255, 255, 255, .74);
  font-size: .68rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-persona-deadline {
  margin: 14px 0 0;
  color: #6c626e;
  font-size: .8rem;
  line-height: 1.45;
  min-height: 1.45em;
}
.dz-persona-deadline strong { color: #8b4b18; }

/* A selected lane dims the cards that are not the chosen one, so the page
   answers "which did I pick?" without scrolling back up. */
.dz-persona-lane.is-filtered .dz-persona-card { opacity: .55; }
.dz-persona-lane.is-filtered .dz-persona-card.is-chosen { opacity: 1; }

@media (min-width: 640px) {
  .dz-persona-lane { margin: 30px 0; padding: 24px; }
  .dz-persona-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (min-width: 1100px) {
  .dz-persona-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dz-persona-card,
  .dz-persona-try { transition: none; }
}

@media (min-width: 600px) {
  :root { --grid-gap: 12px; }
}
@media (min-width: 900px) {
  :root { --grid-gap: 16px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Poppins', 'Poppins Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 16px;
  font-weight: 400;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.dz-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 12px 60px;
}
@media (min-width: 768px) {
  .dz-page { padding: 18px 20px 80px; }
}

.dz-hero {
  text-align: center;
  padding: 8px 8px 14px;
  margin: 0 auto 4px;
  max-width: 880px;
}
.dz-hero-title {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 1.55em;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #1c1c1c;
  letter-spacing: -0.01em;
}
.dz-hero-sub {
  font-size: 0.95em;
  line-height: 1.45;
  color: #555;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .dz-hero { padding: 14px 16px 18px; }
  .dz-hero-title { font-size: 2.1em; }
  .dz-hero-sub { font-size: 1em; }
}

/* ── Hero CTA + social proof (conversion) ─────────────────────────────── */
.dz-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82em;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 5px 13px;
  margin: 0 0 10px;
  box-shadow: var(--shadow-sm);
}
.dz-hero-eyebrow .dz-stars { font-size: 0.95em; }
.dz-hero-eyebrow-txt strong { color: var(--text-primary); font-weight: 600; }

.dz-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 10px;
  padding: 15px 30px;
  font-family: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
  font-size: 1.06em;
  font-weight: 600;
  color: #1c1c1c;
  text-decoration: none;
  background: linear-gradient(135deg, #F3CF5B 0%, var(--accent-color) 55%, var(--accent-hover) 100%);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(212,175,55,0.38), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dz-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212,175,55,0.46); filter: brightness(1.02); }
.dz-hero-cta:active { transform: translateY(0); }
.dz-hero-cta-arrow { transition: transform .15s ease; }
.dz-hero-cta:hover .dz-hero-cta-arrow { transform: translateX(3px); }

.dz-hero-microtrust {
  font-size: 0.78em;
  color: var(--text-light);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Top trust strip sits tighter than the (removed) bottom one. */
.dz-trust-bar--top { margin: 6px auto 18px; }

@media (min-width: 768px) {
  .dz-hero-cta { font-size: 1.14em; padding: 16px 36px; }
  .dz-hero-eyebrow { font-size: 0.86em; }
}

/* ── Sticky mobile CTA bar — appears after the hero CTA scrolls away ───── */
.dz-sticky-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px;
  font-family: 'Poppins', 'Poppins Fallback', Arial, sans-serif; font-size: 1.02em; font-weight: 600;
  color: #1c1c1c; text-decoration: none;
  background: linear-gradient(135deg, #F3CF5B 0%, var(--accent-color) 55%, var(--accent-hover) 100%);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.4);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.dz-sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.dz-sticky-cta-arrow { transition: transform .15s ease; }
.dz-sticky-cta:active { filter: brightness(0.97); }
@media (min-width: 768px) { .dz-sticky-cta { display: none !important; } }
.dz-mode-search .dz-sticky-cta { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (max-width: 767px) { body { padding-bottom: 72px; } }

/* ── Top progress bar — visible while a navigation is in flight ────── */
.dz-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  z-index: 9999;
  opacity: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  pointer-events: none;
}
.dz-progress.is-active {
  opacity: 1;
}

/* ── Discovery mega-menu (replaces nav-desktop on /discover pages) ──── */
.dz-meganav {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 60;
}
.dz-meganav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.dz-meganav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  flex-wrap: nowrap;
  /* IMPORTANT: do NOT set overflow-x:auto here. CSS spec promotes overflow-y
     to auto whenever overflow-x is non-visible, which clips the absolute-
     positioned dropdown panels vertically — they wouldn't render at all.
     The 6 mega-nav items fit comfortably on any reasonable desktop width. */
  overflow: visible;
  flex: 1;
}
.dz-meganav-item {
  position: relative;
  flex: 0 0 auto;
}
.dz-meganav-link {
  display: inline-flex;
  align-items: center;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  font-family: inherit;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.dz-meganav-link:hover,
.dz-meganav-link:focus-visible,
.dz-meganav-item.is-open .dz-meganav-link {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-color);
  background-color: rgba(0,0,0,0.025);
}
.dz-meganav-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}
.dz-meganav-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
  line-height: 1;
}
.dz-meganav-link::after {
  content: '▾';
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-light);
  transition: transform .2s ease;
}
.dz-meganav-item.is-open .dz-meganav-link::after {
  transform: rotate(180deg);
}

.dz-meganav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  padding: 24px 28px 28px;
  display: none;
  min-width: 720px;
  max-width: 920px;
  z-index: 70;
}
.dz-meganav-item.is-open .dz-meganav-panel { display: grid; }
.dz-meganav-panel {
  grid-template-columns: 220px repeat(3, 1fr);
  gap: 24px 36px;
}
.dz-meganav-panel.no-feat { grid-template-columns: repeat(3, 1fr); }

/* Desktop hides the sheet-title (already obvious from the open tab) */
.dz-meganav-panel-title { display: none; }

/* Featured-image hero card in the first column of each dropdown */
.dz-meganav-feat {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: var(--background-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  align-self: start;
}
.dz-meganav-feat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dz-meganav-feat img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.dz-meganav-feat .feat-meta {
  padding: 10px 12px 12px;
}
.dz-meganav-feat .feat-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-hover);
  margin-bottom: 4px;
  display: block;
}
.dz-meganav-feat .feat-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-meganav-col {
  min-width: 0;
}
.dz-meganav-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary, var(--text-light));
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.dz-meganav-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dz-meganav-col a {
  display: block;
  font-size: 14px;
  font-weight: 450;
  color: var(--text-primary);
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 -10px; /* extend hover bg beyond text edge for breathing room */
  line-height: 1.4;
  border-radius: 6px;
  transition: color .12s ease, background-color .12s ease, transform .12s ease;
}
.dz-meganav-col a:hover {
  color: var(--accent-hover);
  background-color: rgba(0,0,0,0.035);
  transform: translateX(2px);
}
.dz-meganav-col a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}
.dz-meganav-col a .count {
  color: var(--text-light);
  font-size: 11px;
  margin-left: 6px;
  font-weight: 400;
}

/* Mobile: meganav becomes a horizontal scrollable chip strip. Tapping a chip
   opens its sub-links as a bottom sheet (the old vertical accordion ate ~400px
   of above-the-fold real estate on the homepage). */
@media (max-width: 899px) {
  .dz-meganav-inner { padding: 6px 0; }
  .dz-meganav-list {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  .dz-meganav-list::-webkit-scrollbar { display: none; }
  .dz-meganav-item { width: auto; flex: 0 0 auto; }
  .dz-meganav-link {
    width: auto;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  .dz-meganav-link:hover,
  .dz-meganav-item.is-open .dz-meganav-link {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
  }
  /* Chip row has no room for the dropdown chevron */
  .dz-meganav-link::after { display: none; }

  /* Dimmed backdrop while a sheet is open. The document-level click handler in
     nav-discover-bar.js closes the open item when anything outside .dz-meganav-item
     is tapped, which includes this pseudo-element. */
  .dz-meganav:has(.dz-meganav-item.is-open)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 80;
    animation: dz-meganav-fade .2s ease;
  }
  @keyframes dz-meganav-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Bottom sheet. Always rendered (display:grid) and slid off-screen via
     transform so the open/close transition animates. */
  .dz-meganav-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    background: #fff;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
    padding: 20px 18px 24px;
    grid-template-columns: 1fr;
    gap: 0;
    min-width: 0;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 90;
    display: grid !important;
    transform: translateY(100%);
    pointer-events: none;
    transition: transform .3s cubic-bezier(.2,.9,.3,1);
  }
  .dz-meganav-item.is-open .dz-meganav-panel {
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Drag handle affordance at the top of the sheet */
  .dz-meganav-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.18);
    margin: 0 auto 14px;
  }
  /* Sheet header — shows the bucket name the user just tapped, so they
     have anchoring context. Injected by JS as first child of the panel. */
  .dz-meganav-panel-title {
    display: block !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
  }
  .dz-meganav-col {
    padding: 0;
  }
  .dz-meganav-col h4 {
    margin: 16px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-light);
    border-bottom: 0;
    padding-bottom: 0;
  }
  .dz-meganav-col h4:first-child {
    margin-top: 0;
  }
  .dz-meganav-col a {
    padding: 14px 4px;
    margin: 0;
    font-size: 15px;
    border-radius: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .dz-meganav-col a:active {
    background-color: rgba(0,0,0,0.04);
  }
  .dz-meganav-col a:last-child { border-bottom: 0; }
  .dz-meganav-feat { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .dz-meganav-panel { transition: none; }
  }
}

/* ── Search bar (matches /collections .search-container style) ──────── */
.dz-search-wrap {
  position: sticky;
  top: 46px;             /* sits below the mega-nav (sticky at top: 0) */
  z-index: 50;
  margin: 4px auto 14px;
  max-width: 520px;
  padding: 8px 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
}
@media (max-width: 899px) {
  /* On mobile the meganav becomes a full accordion at the top, then the search
     bar sits underneath. We don't make it sticky on mobile because the
     accordion can grow tall and would push the search far off-screen. */
  .dz-search-wrap { position: relative; top: 0; padding: 0; backdrop-filter: none; background: transparent; }
}
.dz-search-icon {
  position: absolute;
  left: 14px;
  font-size: 1rem;
  color: var(--text-light);
  pointer-events: none;
  z-index: 1;
}
.dz-search-input {
  width: 100%;
  padding: 12px 44px 12px 42px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: #fff;
  transition: var(--transition-smooth);
  outline: none;
  -webkit-appearance: none;
}
.dz-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* readonly = launches the View all browse overlay rather than typing in place */
.dz-search-input[readonly] { cursor: pointer; caret-color: transparent; }
.dz-search-clear {
  position: absolute;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--background-light);
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
}
.dz-search-clear:hover { background: var(--accent-color); color: #fff; }
.dz-search-clear[hidden] { display: none; }

/* Autocomplete dropdown */
.dz-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
}
.dz-suggest[hidden] { display: none; }
.dz-suggest li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dz-suggest li:hover,
.dz-suggest li.is-active { background: var(--background-light); }
.dz-suggest img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 36px;
}
.dz-suggest .ss-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dz-suggest .ss-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Static top-sold strip — baked from sales intelligence before deploy ─ */
.dz-top-sellers {
  margin: 2px 0 18px;
}
.dz-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 4px 10px;
}
.dz-section-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: 0;
}
.dz-section-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-light);
}
.dz-section-link {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-hover);
  text-decoration: none;
  padding-bottom: 2px;
}
.dz-section-link:hover { color: var(--text-primary); }
.dz-top-sellers-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 200px);
  gap: 10px;
  overflow-x: auto;
  padding: 2px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.dz-top-sellers-row::-webkit-scrollbar { display: none; }

/* CLS guard: the strips ship visible (no `hidden`) so their space exists at
   first paint; the row reserves its settled height (card 180w × 3:4 image +
   info block + row padding — measured on prod) and shows shimmering ghost
   cards until discover.js fills it in place. Keep these values in sync with
   the card sizing above if it ever changes. */
.dz-top-sellers-row { min-height: 326px; }
.dz-top-sellers-row:empty {
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--background-light, #f4efe8) 0 180px,
      transparent 180px 190px);
  position: relative;
  overflow: hidden;
}
.dz-top-sellers-row:empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  animation: dzStripShimmer 1.6s ease-in-out infinite;
}
@keyframes dzStripShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* 🔥 Most-clicked-for-this-query strip — shown above search results. */
.dz-fire {
  margin: 4px 0 14px;
}
.dz-fire-head {
  display: flex;
  align-items: center;
  padding: 0 4px 6px;
}
.dz-fire-emoji {
  font-size: 22px;
  line-height: 1;
}
.dz-fire-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 140px);
  gap: 10px;
  overflow-x: auto;
  padding: 2px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.dz-fire-row::-webkit-scrollbar { display: none; }
.dz-fire-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dz-fire-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-md);
}
.dz-fire-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--background-light);
}
.dz-fire-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
}
.dz-fire-name {
  min-height: 30px;
  padding: 6px 8px 8px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .dz-fire { margin-bottom: 18px; }
  .dz-fire-row {
    grid-auto-columns: minmax(140px, 160px);
    gap: 12px;
  }
  .dz-fire-emoji { font-size: 26px; }
}
.dz-top-seller {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dz-top-seller:hover {
  transform: translateY(-2px);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-md);
}
.dz-top-seller img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--background-light);
}
.dz-top-seller .rank {
  position: absolute;
  top: 7px;
  left: 7px;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(44, 62, 80, 0.92);
  box-shadow: var(--shadow-sm);
}
/* Trending strip reuses the top-seller card; only the badge changes to a
   flame + growth %. */
.dz-top-seller .rank.is-trending {
  gap: 3px;
  background: linear-gradient(135deg, #ff7a18, #e8590c);
}
/* New Art strip reuses the top-seller card; the badge becomes a "New" pill. */
.dz-top-seller .rank.is-new {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6d5efc, #4936d1);
}
/* Most Visited Today strip reuses the top-seller card; the badge becomes an
   eye/views pill (teal) so it reads distinctly from Trending and New. */
.dz-top-seller .rank.is-most-visited {
  gap: 4px;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #0ea5a4, #0b7c86);
}
.dz-top-seller .rank.is-most-visited svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
/* Avatar hub "Most previewed" strip: sparkle + unique previewers (magenta so
   it reads apart from sold / viewed / new). */
.dz-top-seller .rank.is-previewed {
  gap: 4px;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #d63384, #9d174d);
}
.dz-top-seller .rank.is-previewed svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* ── Avatar strip ("who is in the picture") ─────────────────────────────
   Homepage strip (#dz-avatars, filled by discover.js renderAvatars) and the
   rail on /discover/avatar/* hubs (server-rendered, .dz-avatar-rail). One
   card = circular hero (the avatar's top-sold design) + name + design count.
   The row reserves its settled height so the homepage fill is CLS-free; the
   inline guard in index.html mirrors the 168px. */
.dz-avatars-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  min-height: 168px;
}
.dz-avatars-row::-webkit-scrollbar { display: none; }
.dz-avatars-row:empty {
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--background-light, #f4efe8) 0 112px,
      transparent 112px 122px);
  position: relative;
  overflow: hidden;
}
.dz-avatars-row:empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  animation: dzStripShimmer 1.6s ease-in-out infinite;
}
.dz-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 156px;
  padding: 10px 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dz-avatar:hover {
  transform: translateY(-2px);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-md);
}
.dz-avatar.is-active {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 2px rgba(193, 155, 46, 0.25);
}
.dz-avatar .thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--background-light);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-color);
  flex: 0 0 auto;
}
.dz-avatar .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.dz-avatar .name {
  margin-top: 8px;
  min-height: 32px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-avatar .count {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-light);
}
@media (min-width: 768px) {
  .dz-avatars-row { grid-auto-columns: 124px; gap: 12px; }
}
.dz-mode-search .dz-avatars { display: none !important; }

/* Crawlable /gifts hub cards. These use the shared Discover shell but remain
   a simple one-column reading layout on phones and wider screens. */
.dz-gift-hub-list {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}
.dz-gift-hub-card {
  display: block;
  margin-bottom: .75rem;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border-color, #e5e0d8);
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dz-gift-hub-card:hover {
  border-color: var(--border-dark, #c7beb0);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 62, 80, .08));
  transform: translateY(-1px);
}
.dz-gift-hub-card:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .45);
  outline-offset: 2px;
}
.dz-gift-hub-card-title {
  display: block;
  margin-bottom: .25rem;
  font-size: 1rem;
  line-height: 1.4;
}
.dz-gift-hub-card-description {
  display: block;
  color: var(--text-secondary, #6b6558);
  font-size: .85rem;
  line-height: 1.55;
}
.dz-top-seller .info {
  padding: 8px 9px 10px;
}
.dz-top-seller .name {
  min-height: 34px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-top-seller .sub {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-light);
}
.dz-top-seller .price {
  color: var(--accent-hover);
  font-weight: 700;
}
@media (min-width: 768px) {
  .dz-top-sellers { margin-bottom: 22px; }
  .dz-top-sellers-row {
    grid-auto-columns: minmax(152px, 178px);
    gap: 12px;
    /* smaller cards → shorter settled row (measured on prod) */
    min-height: 289px;
  }
  .dz-section-head h2 { font-size: 20px; }
}

/* ── Topic chips: horizontal scroll with a clear visual scroll affordance ─ */
/* The whole row is wrapped in `.dz-categories-wrap` so we can position a
   gradient fade + a chevron hint over the scrollable content without the
   overlay scrolling away. */
.dz-categories-wrap {
  position: relative;
  margin-bottom: 16px;
}
.dz-categories {
  display: flex;
  gap: 10px;
  padding: 12px 4px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Mask the edges so chips fade out smoothly where there's more to scroll.
     JS adds .is-scrolled / .is-end classes so the mask updates based on
     scroll position (right edge only at start, both in middle, left only
     at end). */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
  transition: -webkit-mask-image .25s ease, mask-image .25s ease;
}
.dz-categories::-webkit-scrollbar { display: none; }
.dz-categories.is-scrolled {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.dz-categories.is-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
}

/* Chevron hint — pulses subtly until the user scrolls. Dismissed for good
   once scroll has happened. Pure visual cue: pointer-events none so taps
   pass through to the chip beneath. */
.dz-categories-hint {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  pointer-events: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  z-index: 5;
  animation: dzChevronPulse 1.6s ease-in-out infinite;
  opacity: 0.95;
  transition: opacity .25s ease;
}
.dz-categories-wrap.has-scrolled .dz-categories-hint {
  opacity: 0;
}
.dz-categories-wrap.no-overflow .dz-categories-hint {
  display: none;
}
@keyframes dzChevronPulse {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-categories-hint { animation: none; }
}

/* Instagram-style circle filters (premium metallic-gold ring → white gap →
   round photo). Soft drop shadow gives each circle depth so the row pops. */
.dz-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  font-family: inherit;
  scroll-snap-align: start;
}
.dz-chip-img {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  /* Polished-gold ring with a metallic sheen (conic = highlights + shadows). */
  background: conic-gradient(from 220deg, #f7dca2, #d8a64a, #b8860b, #f0c873, #c98f33, #f7dca2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(44, 62, 80, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.dz-chip:hover .dz-chip-img { transform: translateY(-2px) scale(1.05); box-shadow: 0 9px 20px rgba(44, 62, 80, 0.22); filter: saturate(1.08); }
.dz-chip:active .dz-chip-img { transform: translateY(0) scale(1.0); }
.dz-chip-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2.5px solid #fff;
  background: #fff;
  box-sizing: border-box;
}
/* Inner disc for Best-sellers / no-image fallback — mirrors the photo's
   white-bordered circle so the gold ring → white gap → center is consistent. */
.dz-chip-special {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color, #1f2937);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
/* Best-sellers: shiny gold dome with a crisp star (was a flat empty blob). */
.dz-chip-special.gold {
  background: radial-gradient(circle at 34% 28%, #fff0c4 0%, #f6cd6a 32%, #e0a93c 62%, #b8860b 100%);
  color: #fff;
  font-size: 32px;
  text-shadow: 0 1px 2px rgba(120, 78, 8, 0.5);
}
.dz-chip-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 92px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-chip:hover .dz-chip-label { text-decoration: underline; }
/* Active filter: bright accent ring + warm glow so the selection is obvious. */
.dz-chip.is-active .dz-chip-img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-color, #D4AF37), 0 5px 14px rgba(212, 175, 55, 0.35); }
.dz-chip.is-active .dz-chip-label { font-weight: 700; color: var(--text-primary); }

/* ── Topic page header (H1 + intro + breadcrumbs) ────────────────────── */
.dz-topic-header {
  max-width: 920px;
  margin: 4px auto 12px;
  padding: 0 4px;
}
.dz-breadcrumb {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 12px;
  line-height: 1.4;
}
.dz-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.dz-breadcrumb a:hover { color: var(--accent-color); }
.dz-breadcrumb span { margin: 0 6px; color: var(--text-light); }

.dz-topic-h1 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
@media (min-width: 768px) {
  .dz-topic-h1 { font-size: 36px; margin-bottom: 12px; }
}
@media (min-width: 1200px) {
  .dz-topic-h1 { font-size: 44px; }
}

.dz-topic-intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0;
}
@media (min-width: 768px) { .dz-topic-intro { font-size: 16px; } }

/* Hub hero: centered landing-page treatment + trust chips */
.dz-topic-header { text-align: center; }
.dz-topic-header .dz-breadcrumb { text-align: left; }
.dz-topic-header .dz-topic-intro { margin: 0 auto; }
.dz-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 14px auto 2px;
}
.dz-trust-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
@media (max-width: 599px) { .dz-trust { gap: 6px 12px; } .dz-trust-chip { font-size: 12px; } }

/* Related-topic rail (internal linking) */
.dz-related-rail {
  max-width: 920px;
  margin: 14px auto 16px;
  padding: 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.dz-related-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-smooth);
  white-space: nowrap;
  min-height: 32px;
}
.dz-related-chip:hover {
  background: var(--background-light);
  border-color: var(--accent-color);
  color: var(--accent-hover);
}

.dz-topic-summary {
  max-width: 920px;
  margin: 8px auto 14px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--text-light);
}

/* ── Product grid — row-major so DOM order = reading order. Cards are all
     3:4, so this renders identically to the old CSS-columns masonry, but
     admin-pinned products (prepended in the DOM) now visually rank first,
     top-left, instead of stacking down the first column. ─────────────── */
.dz-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, 1fr);   /* mobile default */
  align-items: start;
}
@media (min-width: 600px)  { .dz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .dz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dz-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .dz-grid { grid-template-columns: repeat(5, 1fr); } }
.dz-grid .dz-pin { margin: 0; }

/* ── Pin card ────────────────────────────────────────────────────────── */
.dz-pin {
  break-inside: avoid;
  display: block;
  margin: 0 0 var(--grid-gap);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid transparent;
}
@media (hover: hover) {
  .dz-pin:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
  }
}
.dz-pin:active { transform: scale(0.99); }

.dz-pin img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--background-light);
  aspect-ratio: var(--ar, 3 / 4);
  /* contain = show the FULL product image (canvas + mockup badges), never crop */
  object-fit: contain;
}

.dz-pin .meta {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 768px) { .dz-pin .meta { padding: 10px 12px 12px; } }

.dz-pin .title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.dz-pin .price {
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
/* Offer ladder 2026-09-06: arm-consistent chip beside the card price (headline-discount.v1.js) */
.dz-pin .price-line { display: flex; align-items: center; gap: 6px; }
.dz-pin .pg-pct-chip { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 999px; background: #7b2431; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; }

.dz-pin .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  background: rgba(44, 62, 80, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.dz-pin.is-seed::after {
  content: '✨';
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  box-shadow: var(--shadow-sm);
}

/* ── State indicators ────────────────────────────────────────────────── */
.dz-sentinel { height: 1px; }
.dz-loading {
  text-align: center;
  color: var(--text-light);
  padding: 18px;
  font-size: 13px;
}
/* Keep the row's space when hidden: it toggles right where a bottom-of-feed
   reader is looking, and collapsing/expanding it shifts the footer (CLS). */
.dz-loading[hidden] { display: block; visibility: hidden; }
.dz-empty {
  text-align: center;
  padding: 60px 18px;
  color: var(--text-light);
  font-size: 14px;
}

/* Load More — explicit fallback button (always present, also fires when
   the IntersectionObserver-based infinite scroll doesn't fire — common
   when grid is short, when the user scrolls fast, or on devices/browsers
   that throttle observers). */
.dz-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 18px 32px;
}
/* Same CLS treatment as .dz-loading: keep the space, hide the control. */
.dz-load-more-wrap[hidden] { display: flex; visibility: hidden; }
.dz-load-more {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color, #2C3E50);
  border: 0;
  border-radius: 999px;
  padding: 12px 30px;
  cursor: pointer;
  min-height: 44px;
  min-width: 200px;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}
.dz-load-more:hover:not(:disabled) {
  background: var(--primary-light, #34495E);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.dz-load-more:active:not(:disabled) { transform: translateY(0); }
.dz-load-more:disabled {
  background: var(--text-light);
  cursor: wait;
}

/* ── Skeleton placeholders — first paint before fetch resolves ─────── */
.dz-skel {
  break-inside: avoid;
  margin: 0 0 var(--grid-gap);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dz-skel-img {
  width: 100%;
  aspect-ratio: var(--ar, 3 / 4);
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: dzShimmer 1.2s ease-in-out infinite;
}
.dz-skel-meta {
  padding: 10px 12px 12px;
}
.dz-skel-line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: dzShimmer 1.2s ease-in-out infinite;
  margin-bottom: 6px;
}
.dz-skel-line.short { width: 60%; }
@keyframes dzShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-skel-img, .dz-skel-line { animation: none; }
}

/* ── Topic body (long-form SEO content below the grid) ──────────────── */
.dz-topic-body {
  max-width: 720px;
  margin: 32px auto 60px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
@media (min-width: 768px) {
  .dz-topic-body { font-size: 15px; padding: 0; }
}
.dz-topic-body p { margin: 0 0 14px; }
.dz-topic-body h2 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 10px;
}
.dz-topic-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 18px 0 8px;
}

/* ── Sub-topic image cards ("Browse by who's in the portrait") ───────── */
.dz-subtopics { margin: 18px 0 8px; text-align: center; }
.dz-subtopics-title {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 8px 0 14px;
}
.dz-subtopics-rail {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 4px 4px;
}
.dz-subtopics-rail::-webkit-scrollbar { display: none; }
.dz-subtopic-card { scroll-snap-align: start; flex: 0 0 auto; }
.dz-subtopic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 116px;
  color: var(--text-primary);
  text-decoration: none;
}
/* Instagram-style story circle: gradient ring → white gap → round photo */
.dz-subtopic-img {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  background: linear-gradient(45deg, #e0a44a, #c97e3a, #9a5b2f, #b8860b);
  transition: transform .15s ease, filter .15s ease;
}
.dz-subtopic-card:hover .dz-subtopic-img {
  transform: scale(1.05);
  filter: saturate(1.15);
}
.dz-subtopic-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  display: block;
  border: 2px solid #fff;
  background: #fff;
  box-sizing: border-box;
}
.dz-subtopic-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.dz-subtopic-card:hover .dz-subtopic-name { text-decoration: underline; }
.dz-subtopic-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
@media (max-width: 599px) {
  .dz-subtopics-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 4px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dz-subtopics-rail::-webkit-scrollbar { display: none; }
  .dz-subtopic-card { flex: 0 0 108px; width: 108px; scroll-snap-align: start; }
  .dz-subtopic-img { width: 100px; height: 100px; }
}

/* ── Child sub-topic showcases (hub pages: H2 + top sellers + see-all) ─ */
/* Hub child sections — a top divider + accent eyebrow (the hub name) make it
   obvious which collection each sub-section belongs to as you scroll, and the
   "See all" is a clear pill instead of muted text. */
.dz-child-sec { margin: 0; padding: 26px 0 8px; border-top: 1px solid var(--border-color); }
.dz-child-sec:first-of-type { border-top: none; padding-top: 12px; }
.dz-child-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.dz-child-sec-headtext { min-width: 0; }
.dz-child-sec-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover, #b8860b);
  margin: 0 0 3px;
}
.dz-child-sec-title {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}
.dz-child-sec-title a { color: var(--text-primary); text-decoration: none; }
.dz-child-sec-title a:hover { text-decoration: underline; }
.dz-child-sec-count {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--background-light);
  border-radius: 999px;
  padding: 2px 9px;
}
.dz-child-sec-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-hover, #b8860b);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  padding: 7px 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dz-child-sec-more:hover { background: var(--accent-color, #D4AF37); border-color: var(--accent-color, #D4AF37); color: #1c1c1c; }
.dz-child-sec-more-arrow { transition: transform .15s ease; }
.dz-child-sec-more:hover .dz-child-sec-more-arrow { transform: translateX(3px); }
.dz-child-sec-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 760px;
  margin: -2px 0 12px;
}
/* End-of-row "See all" card — spans both grid rows so it reads as a full-height
   call to continue into the sub-collection. */
.dz-child-sec-seeall {
  grid-row: 1 / span 2;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 150px;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  border: 1px dashed var(--border-dark);
  border-radius: 12px;
  background: var(--background-light);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dz-child-sec-seeall:hover { background: #fff; border-color: var(--accent-color); transform: translateY(-3px); }
.dz-child-sec-seeall-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(45deg, #e0a44a, #b8860b); color: #fff; font-size: 22px;
}
.dz-child-sec-seeall-txt { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 0 8px; }
.dz-child-sec-row {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 285px;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 8px;
}
.dz-child-sec-row::-webkit-scrollbar { display: none; }
.dz-child-sec-row .dz-pin {
  scroll-snap-align: start;
  margin: 0;
  break-inside: auto;
}
@media (max-width: 599px) { .dz-child-sec-row { grid-auto-columns: 225px; } }

/* Carousel wrapper + hover arrows (added by topic.js; arrows desktop-only) */
.dz-row-wrap { position: relative; }
.dz-row-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border, #e8e2d8);
  background: var(--surface, #fff);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  z-index: 5;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dz-row-nav:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.dz-row-nav-prev { left: -12px; }
.dz-row-nav-next { right: -12px; }
@media (max-width: 768px), (pointer: coarse) { .dz-row-nav { display: none; } }

/* ── Topic FAQ (below the body, also emitted as FAQPage JSON-LD) ─────── */
.dz-faq-item {
  border: 1px solid var(--border, #e8e2d8);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 0 16px;
  margin: 0 0 10px;
}
.dz-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  padding: 14px 0;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.dz-faq-item summary::-webkit-details-marker { display: none; }
.dz-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
}
.dz-faq-item[open] summary::after { content: '–'; }
.dz-faq-a { padding: 0 0 14px; }

/* ── Mobile-specific tweaks ─────────────────────────────────────────── */
@media (max-width: 599px) {
  .dz-page { padding: 8px 8px 80px; }
  .dz-topic-header { padding: 0 4px; margin-top: 4px; }
  .dz-related-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 4px;
    margin: 12px -4px 14px;
    scroll-padding: 0 4px;
    scrollbar-width: none;
  }
  .dz-related-rail::-webkit-scrollbar { display: none; }
  .dz-related-rail .dz-related-chip { flex: 0 0 auto; }

  /* Tighter card spacing on small screens */
  .dz-pin .meta { padding: 6px 8px 8px; }
  .dz-pin .title { font-size: 12px; line-height: 1.3; }
  .dz-pin .price { font-size: 11px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════ Discover home facade sections ════════════════ */
.dz-section-title {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 26px; font-weight: 600; color: var(--text-primary);
  text-align: center; margin: 8px 0 4px;
}
@media (min-width:768px){ .dz-section-title { font-size: 32px; } }
.dz-section-sub { text-align: center; color: var(--text-secondary); font-size: 15px; margin: 0 0 18px; }

/* How it works — horizontal 3-up with explanatory visuals */
.dz-how { max-width: 1100px; margin: 38px auto 12px; padding: 0 8px; }
.dz-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dz-how-step { text-align: center; padding: 4px; }
.dz-how-visual {
  position: relative; width: 100%; max-width: 230px; margin: 0 auto 12px;
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--border-color); box-shadow: 0 6px 18px rgba(44,62,80,.10);
}
.dz-how-visual img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--background-light); }
.dz-how-num {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(45deg,#e0a44a,#b8860b); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 2px 7px rgba(0,0,0,.22);
}
.dz-how-step h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--text-primary); }
.dz-how-step p { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
/* Stay horizontal on mobile via a swipeable row instead of stacking */
@media (max-width: 640px) {
  .dz-how-steps {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .dz-how-steps::-webkit-scrollbar { display: none; }
  .dz-how-step { scroll-snap-align: center; }
}

/* Shop-by-category sections */
.dz-home-sections { max-width:1500px; margin:26px auto 0; padding:0 12px; }
.dz-home-sec { margin: 0 0 30px; }
.dz-home-sec-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 12px; }
.dz-home-sec-headtext { min-width:0; }
.dz-home-sec-title { font-family:'Cormorant Garamond','Cormorant Fallback',Georgia,serif; font-size:25px; font-weight:600; margin:0; line-height:1.15; }
.dz-home-sec-title a { color:var(--text-primary); text-decoration:none; }
.dz-home-sec-title a:hover { color:var(--accent-hover); }
.dz-home-sec-desc { font-size:13.5px; color:var(--text-secondary); margin:3px 0 0; line-height:1.4; }
.dz-home-sec-more { flex:0 0 auto; font-size:13px; font-weight:600; color:var(--accent-hover); text-decoration:none; white-space:nowrap; padding-top:6px; }
.dz-home-sec-more:hover { text-decoration:underline; }
/* "See all" card at the end of each horizontal scroll row */
.dz-hs-seeall {
  flex:0 0 152px; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:10px;
  border:1px dashed var(--border-dark); border-radius:12px; background:var(--background-light);
  text-decoration:none; color:var(--text-primary);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.dz-hs-seeall:hover { background:#fff; border-color:var(--accent-color); transform:translateY(-3px); }
.dz-hs-seeall-arrow { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:linear-gradient(45deg,#e0a44a,#b8860b); color:#fff; font-size:22px; }
.dz-hs-seeall-txt { font-size:13px; font-weight:600; line-height:1.3; }
@media (max-width:599px){ .dz-hs-seeall { flex:0 0 132px; } }
.dz-home-sec-row { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px 8px; }
.dz-home-sec-row::-webkit-scrollbar { display:none; }
.dz-hs-card { flex:0 0 240px; scroll-snap-align:start; background:#fff; border:1px solid var(--border-color); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.dz-hs-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dz-hs-card img { width:100%; aspect-ratio:3/4; object-fit:contain; background:var(--background-light); display:block; }
.dz-hs-info { padding:8px 10px 10px; }
.dz-hs-name { font-size:13px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dz-hs-price { font-size:13px; font-weight:600; color:var(--accent-color,#9a7b4f); margin-top:3px; }
@media (max-width:599px){ .dz-hs-card { flex:0 0 200px; } }

/* Reviews */
.dz-reviews { max-width:1140px; margin:38px auto 10px; padding:26px 16px; background:var(--background-light,#faf8f4); border-radius:16px; }
.dz-reviews-head { text-align:center; margin-bottom:18px; }
.dz-reviews-rating { font-size:15px; color:var(--text-secondary); margin-top:4px; }
.dz-stars { color:#f5a623; letter-spacing:1px; }
/* Single horizontal-scrolling row on every viewport (desktop + mobile). */
.dz-reviews-grid { display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:8px 2px 16px; scrollbar-width:thin; scrollbar-color:var(--border-color,#ddd) transparent; }
.dz-reviews-grid::-webkit-scrollbar { height:8px; }
.dz-reviews-grid::-webkit-scrollbar-thumb { background:var(--border-color,#ddd); border-radius:999px; }
.dz-reviews-grid::-webkit-scrollbar-track { background:transparent; }
.dz-reviews-grid > .dz-review { flex:0 0 auto; width:clamp(250px,80vw,290px); scroll-snap-align:start; }
.dz-review { margin:0; background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:0; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.dz-review:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
/* Real photo review — a happy customer with their premium themed canvas. */
.dz-review-photo { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--background-light); }
.dz-review-photo-wrap { position:relative; }
.dz-review-verified-badge { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#fff; background:rgba(22,101,52,.92); padding:4px 9px; border-radius:999px; backdrop-filter:blur(2px); }
.dz-review-body { padding:12px 15px 15px; }
.dz-review .dz-stars { font-size:14px; }
.dz-review blockquote { margin:7px 0; font-size:13.5px; line-height:1.5; color:var(--text-primary); }
.dz-review figcaption { font-size:13px; font-weight:600; color:var(--text-primary); }
.dz-review figcaption span { font-weight:400; color:var(--text-light,#999); }

/* Trust bar — vertical centered cards: a clear gpt-image-2 visual on top,
   then the benefit + subtext (was a cramped horizontal layout with awkward
   text wrapping). */
.dz-trust-bar { max-width:1140px; margin:26px auto; padding:0 12px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:768px){ .dz-trust-bar { grid-template-columns:repeat(4,1fr); gap:16px; } }
.dz-trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 14px; background:#fff; border:1px solid var(--border-color); border-radius:16px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.dz-trust-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dz-trust-ico { font-size:24px; }
/* gpt-image-2 trust visual (replaces the flat emoji — explains the benefit). */
.dz-trust-img { width:86px; height:86px; border-radius:16px; object-fit:cover; background:var(--background-light); box-shadow:var(--shadow-sm); }
@media (min-width:768px){ .dz-trust-img { width:104px; height:104px; } }
.dz-trust-item strong { display:block; font-size:14px; font-weight:600; color:var(--text-primary); line-height:1.25; }
.dz-trust-item small { display:block; font-size:12px; color:var(--text-secondary); line-height:1.45; margin-top:3px; }

/* Home FAQ */
.dz-home-faq { max-width:760px; margin:38px auto; padding:0 12px; }
.dz-home-faq .dz-faq-item { border:1px solid var(--border-color); border-radius:12px; background:#fff; padding:0 16px; margin:0 0 10px; }
.dz-home-faq summary { cursor:pointer; font-weight:600; color:var(--text-primary); padding:14px 28px 14px 0; list-style:none; position:relative; }
.dz-home-faq summary::-webkit-details-marker { display:none; }
.dz-home-faq summary::after { content:'+'; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--text-secondary); }
.dz-home-faq .dz-faq-item[open] summary::after { content:'–'; }
.dz-home-faq .dz-faq-a { padding:0 0 14px; font-size:14px; line-height:1.6; color:var(--text-secondary); }
.dz-feed-title { margin-top:34px; }

/* Hide facade sections in search mode (focus on results) */
.dz-mode-search .dz-how, .dz-mode-search .dz-home-sections, .dz-mode-search .dz-reviews,
.dz-mode-search .dz-trust-bar, .dz-mode-search .dz-home-faq, .dz-mode-search .dz-feed-title,
.dz-mode-search .dz-top-sellers { display:none !important; }

/* ── Event CTA (per-topic, e.g. Black Friday / Christmas hubs) ──
   Rendered by lib/discovery/event-cta.js from topic.cta — see
   scripts/discovery/q4-taxonomy.js. */
.dz-event-cta {
  margin: 14px 0 4px;
  text-align: center;
}
.dz-event-cta-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-color, #D4AF37);
  border: 0;
  border-radius: 999px;
  padding: 13px 32px;
  min-height: 44px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
}
.dz-event-cta-btn:hover,
.dz-event-cta-btn:focus-visible {
  background: var(--accent-hover, #C19B2E);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.dz-event-cta-btn:focus-visible {
  outline: 3px solid var(--primary-color, #2C3E50);
  outline-offset: 2px;
}
.dz-event-cta-sub {
  margin: 8px auto 0;
  max-width: 560px;
  font-size: 13px;
  color: var(--text-secondary, #5A6C7D);
}
@media (max-width: 640px) {
  .dz-event-cta-btn { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
}

/* Curated theme-filter strip sits directly under the dynamic topic chips —
   pull it up a touch so the two circular rows read as one grouped block. */
.dz-theme-filters-wrap { margin-top: -6px; }

/* ── "View all" chip + full-screen topic grid modal ─────────────────────── */
.dz-chip-viewall .dz-chip-special { border-style: dashed; background: var(--accent-color, #D4AF37); }
.dz-chip-viewall .dz-chip-label { font-weight: 700; }

body.dz-gridview-open { overflow: hidden; }

.dz-gridview-overlay[hidden] { display: none; }
.dz-gridview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;   /* nothing inside may cause sideways scroll */
  -webkit-overflow-scrolling: touch;
  animation: dz-gridview-in .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  .dz-gridview-overlay { animation: none; }
}
@keyframes dz-gridview-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.dz-gridview-panel { min-height: 100%; display: flex; flex-direction: column; }

.dz-gridview-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-color, #E8ECEF);
}
.dz-gridview-title {
  flex: 1;
  min-width: 0;
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz-gridview-back,
.dz-gridview-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark, #D1D8DD);
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-smooth);
}
.dz-gridview-back { border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.dz-gridview-close { width: 38px; height: 38px; border-radius: 50%; font-size: 22px; line-height: 1; }
.dz-gridview-back:hover,
.dz-gridview-close:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* In-overlay search bar — sits under the sticky head, searches categories
   first then falls back to cached product results. */
.dz-gridview-searchbar {
  position: sticky;
  top: 59px;                    /* just below the sticky head */
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px 6px;
  background: rgba(255, 255, 255, 0.96);
}
.dz-gridview-search-icon {
  position: absolute;
  left: 28px;
  color: var(--text-light);
  pointer-events: none;
  display: inline-flex;
}
.dz-gridview-search-input {
  width: 100%;
  padding: 12px 44px 12px 42px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 16px;   /* ≥16px: stops iOS Safari's focus auto-zoom */
  font-family: inherit;
  color: var(--text-primary);
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  transition: var(--transition-smooth);
}
.dz-gridview-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.dz-gridview-search-clear {
  position: absolute;
  right: 24px;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--background-light);
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dz-gridview-search-clear:hover { background: var(--accent-color); color: #fff; }
.dz-gridview-search-clear[hidden] { display: none; }

/* Search result states */
.dz-gridview-status {
  font-size: 13px;
  color: var(--text-light);
  margin: 4px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dz-gridview-empty-msg { font-size: 14px; color: var(--text-secondary); }
.dz-gridview-reset {
  border: 1px solid var(--border-dark, #D1D8DD);
  background: #fff;
  color: var(--text-primary);
  border-radius: 999px;
  padding: 7px 16px;
  min-height: 36px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.dz-gridview-reset:hover { border-color: var(--accent-color); color: var(--accent-color); }
.dz-gridview-products { margin-top: 4px; }
.dz-gridview-products .dz-pin { margin: 0; }
/* Skeleton pins shown while a product search resolves — mirrors the pin's own
   aspect ratio so the grid doesn't jump when real results replace them. */
.dz-gridview-prod-skel {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #eef1f4;
  animation: dz-gridview-pulse 1.2s ease-in-out infinite;
}
.dz-gridview-searchprods {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  border: 1px solid var(--border-dark, #D1D8DD);
  background: #fff;
  color: var(--primary-color);
  border-radius: 999px;
  padding: 9px 18px;
  min-height: 40px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.dz-gridview-searchprods:hover { border-color: var(--accent-color); color: var(--accent-color); }

.dz-gridview-body { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 14px 60px; }
@media (min-width: 768px) { .dz-gridview-body { padding: 24px 24px 80px; } }

.dz-gridview-sec { margin-bottom: 32px; scroll-margin-top: 128px; /* clear the sticky head+search when jump-pills scroll here */ }
.dz-gridview-sec-title {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dz-gridview-sec-count {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--background-light, #F6F3EE);
  border: 1px solid var(--border-color, #E8ECEF);
  border-radius: 999px;
  padding: 4px 8px;
}

/* Type jump-pills — quick nav to each section of the browse root. */
.dz-gridview-typenav {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dz-gridview-typenav::-webkit-scrollbar { display: none; }
.dz-gridview-typenav[hidden] { display: none; }
.dz-gridview-typepill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;           /* touch-friendly target */
  padding: 6px 14px;
  border: 1px solid var(--border-dark, #D1D8DD);
  border-radius: 999px;
  background: #fff;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}
.dz-gridview-typepill:hover { border-color: var(--accent-color); color: var(--accent-color); }
.dz-gridview-typepill-count {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--background-light, #F6F3EE);
  border-radius: 999px;
  padding: 3px 7px;
}
@media (min-width: 768px) { .dz-gridview-typenav { padding: 4px 24px 10px; } }

.dz-gridview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 18px 10px;
}
@media (min-width: 768px) {
  .dz-gridview-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 22px 14px; }
}
@media (min-width: 1024px) {
  /* Slightly larger circles once there's room — easier scanning on desktop. */
  .dz-gridview-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 26px 16px; }
}

.dz-gridview-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--text-primary);
}
.dz-gridview-tile-img {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  /* Same polished-gold ring as the strip chips. */
  background: conic-gradient(from 220deg, #f7dca2, #d8a64a, #b8860b, #f0c873, #c98f33, #f7dca2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(44, 62, 80, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (min-width: 768px) { .dz-gridview-tile-img { width: 88px; height: 88px; } }
.dz-gridview-tile:hover .dz-gridview-tile-img { transform: translateY(-2px) scale(1.05); box-shadow: 0 9px 20px rgba(44, 62, 80, 0.22); }
.dz-gridview-tile-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2.5px solid #fff;
  background: #fff;
  box-sizing: border-box;
}
.dz-gridview-noimg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color, #2C3E50);
  color: #fff;
}
.dz-gridview-tile-badge {
  position: absolute;
  top: -2px;
  right: -6px;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent-color, #D4AF37);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.dz-gridview-tile-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-gridview-tile:hover .dz-gridview-tile-label { text-decoration: underline; }
.dz-gridview-tile-count { font-size: 11px; color: var(--text-light); margin-top: -4px; }

.dz-gridview-tile.is-skel { pointer-events: none; }
.dz-gridview-tile.is-skel .dz-gridview-tile-img { background: #eef1f4; box-shadow: none; animation: dz-gridview-pulse 1.2s ease-in-out infinite; }
.dz-gridview-skel-line { width: 60%; height: 10px; border-radius: 5px; background: #eef1f4; animation: dz-gridview-pulse 1.2s ease-in-out infinite; }
@keyframes dz-gridview-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.dz-gridview-parent-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-color);
}
.dz-gridview-parent-link:hover { color: var(--accent-color); }

/* Visible keyboard focus across the overlay's interactive controls. */
.dz-gridview-tile:focus-visible .dz-gridview-tile-img,
.dz-gridview-typepill:focus-visible,
.dz-gridview-reset:focus-visible,
.dz-gridview-searchprods:focus-visible,
.dz-gridview-search-clear:focus-visible,
.dz-gridview-back:focus-visible,
.dz-gridview-close:focus-visible,
.dz-gridview-parent-link:focus-visible {
  outline: 3px solid var(--primary-color, #2C3E50);
  outline-offset: 2px;
}