/* /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;
}
@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; }
}

/* ── 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: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transition-smooth);
  font-family: inherit;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}
.dz-meganav-link:hover,
.dz-meganav-item.is-open .dz-meganav-link {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-color);
}
.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 12px 12px;
  box-shadow: var(--shadow-md);
  padding: 18px 22px 22px;
  display: none;
  min-width: 620px;
  max-width: 860px;
  z-index: 70;
}
.dz-meganav-item.is-open .dz-meganav-panel { display: grid; }
.dz-meganav-panel {
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 18px 24px;
}
.dz-meganav-panel.no-feat { grid-template-columns: repeat(3, 1fr); }

/* 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: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-light);
  margin: 0 0 10px;
}
.dz-meganav-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dz-meganav-col a {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  padding: 6px 0;
  line-height: 1.4;
  transition: color .15s ease;
}
.dz-meganav-col a:hover {
  color: var(--accent-hover);
}
.dz-meganav-col a .count {
  color: var(--text-light);
  font-size: 11px;
  margin-left: 6px;
}

/* Mobile: meganav becomes accordion. Submenus slide down with animation. */
@media (max-width: 899px) {
  .dz-meganav-inner { padding: 0; flex-direction: column; align-items: stretch; }
  .dz-meganav-list { flex-direction: column; gap: 0; overflow-x: visible; }
  .dz-meganav-item { width: 100%; }
  .dz-meganav-link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    font-weight: 500;
  }
  .dz-meganav-link:hover,
  .dz-meganav-item.is-open .dz-meganav-link {
    border-bottom-color: var(--border-color);
    background: var(--background-light);
  }

  /* Smooth slide-down: change display:none → max-height transition */
  .dz-meganav-panel {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 18px;
    background: var(--background-light);
    grid-template-columns: 1fr;
    gap: 0;
    min-width: 0;
    max-width: none;
    display: grid !important;        /* override desktop's display: none */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
  }
  .dz-meganav-item.is-open .dz-meganav-panel {
    max-height: 1200px;
    opacity: 1;
    padding: 8px 18px 16px;
  }
  .dz-meganav-col { padding: 8px 0; }
  .dz-meganav-col h4 {
    margin: 6px 0 6px;
    font-size: 11px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
  }
  .dz-meganav-col a {
    padding: 9px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .dz-meganav-col a:last-child { border-bottom: 0; }
  /* Featured-image card hidden on mobile — accordion is text-dense */
  .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);
}
.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;
}

/* ── 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: 8px;
  padding: 8px 4px 12px;
  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; }
}

.dz-chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-color);
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-smooth);
  font-family: inherit;
  /* tap-target sizing */
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.dz-chip:hover { background: var(--background-light); border-color: var(--border-dark); }
.dz-chip.is-active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* ── 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; } }

/* 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);
}

/* ── Masonry grid (CSS columns — no JS layout math) ──────────────────── */
.dz-grid {
  column-gap: var(--grid-gap);
  column-count: 2;          /* mobile default */
}
@media (min-width: 600px)  { .dz-grid { column-count: 3; } }
@media (min-width: 900px)  { .dz-grid { column-count: 4; } }
@media (min-width: 1200px) { .dz-grid { column-count: 5; } }
@media (min-width: 1600px) { .dz-grid { column-count: 6; } }

/* ── 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);
  object-fit: cover;
}

.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;
}

.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;
}
.dz-loading[hidden] { display: none; }
.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;
}
.dz-load-more-wrap[hidden] { display: none; }
.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;
}

/* ── 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;
  }
}