/* ============================================================
   Dékolé Marketplace — culturally filtered commerce module
   A self-contained brand system, separate from the main Dekole site.
   Warm/cream palette, orange + gold accents, market feel.
   ============================================================ */

.mkt-body, .mkt-main {
  --mkt-cream:        #FFF8F0;
  --mkt-cream-2:      #FBF1E1;
  --mkt-paper:        #FFFFFF;
  --mkt-orange:       #E94E1B;
  --mkt-orange-2:     #F25C2D;
  --mkt-gold:         #F59F00;
  --mkt-gold-2:       #F9C84A;
  --mkt-ink:          #1F2937;
  --mkt-text:         #1F2937;
  --mkt-muted:        #6B7280;
  --mkt-soft:         #94A3B8;
  --mkt-border:       #E5E1D8;
  --mkt-border-soft:  #F1ECE0;
  --mkt-green:        #16A34A;
  --mkt-blue:         #2563EB;

  --mkt-radius-sm:    8px;
  --mkt-radius:       12px;
  --mkt-radius-lg:    18px;
  --mkt-radius-pill:  999px;
  --mkt-shadow-sm:    0 1px 2px rgba(31, 41, 55, .06);
  --mkt-shadow:       0 6px 18px rgba(31, 41, 55, .08);
  --mkt-shadow-lg:    0 18px 40px rgba(31, 41, 55, .12);
}
.mkt-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mkt-text);
  background: var(--mkt-cream);
  -webkit-font-smoothing: antialiased;
}
.mkt-main { background: var(--mkt-cream); }

/* Container — matched exactly to dekogo's `.dekogo-container`:
   max-width 1600px, no horizontal padding, centered. The Bootstrap
   `.container` default 15px gutter is zeroed out so marketplace card
   grids reach the same edges as dekogo's hero / event grids. */
.mkt-body .container,
.mkt-body .container-fluid {
  max-width: 1600px !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto;
  margin-right: auto;
}
/* Shared dark navy header — leave at its global 1352px rule (matches dekogo
   header). No marketplace-specific override here. */

@media (max-width: 1100px) {
  .mkt-body .container, .mkt-body .container-fluid {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 768px) {
  .mkt-body .container, .mkt-body .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.mkt-accent  { color: var(--mkt-orange); }
.mkt-accent2 { color: var(--mkt-gold); }

/* ============================================================
   HEADER
   ============================================================ */
.mkt-header {
  background: var(--mkt-paper);
  border-bottom: 1px solid var(--mkt-border-soft);
  padding: 14px 0;
}
.mkt-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}
.mkt-header-logo {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--mkt-ink);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
}
.mkt-header-logo span { color: var(--mkt-orange); }
.mkt-header-logo:hover { color: var(--mkt-ink); }

.mkt-header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.mkt-header-nav::-webkit-scrollbar { display: none; }
.mkt-header-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--mkt-text);
  padding: 8px 12px;
  border-radius: var(--mkt-radius-sm);
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.mkt-header-link:hover { color: var(--mkt-orange); background: rgba(233, 78, 27, .08); }
.mkt-header-link.is-active { color: var(--mkt-orange); }
.mkt-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Buttons */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--mkt-radius-sm);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.mkt-btn:active { transform: translateY(1px); }
.mkt-btn-sm { padding: 7px 14px; font-size: 12px; }
.mkt-btn-lg { padding: 13px 22px; font-size: 15px; }

.mkt-btn-accent {
  background: linear-gradient(135deg, var(--mkt-orange), var(--mkt-orange-2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(233, 78, 27, .25);
}
.mkt-btn-accent:hover { color: #fff; opacity: .95; }
.mkt-btn-outline {
  background: var(--mkt-paper);
  color: var(--mkt-text);
  border-color: var(--mkt-border);
}
.mkt-btn-outline:hover { border-color: var(--mkt-orange); color: var(--mkt-orange); }
.mkt-btn-outline-dark {
  background: var(--mkt-paper);
  color: var(--mkt-text);
  border-color: var(--mkt-ink);
}
.mkt-btn-outline-dark:hover { background: var(--mkt-ink); color: #fff; }

/* ============================================================
   ANNOUNCE BAR
   ============================================================ */
.mkt-announce {
  background: var(--mkt-cream-2);
  border-bottom: 1px solid var(--mkt-border-soft);
  padding: 10px 0;
}
.mkt-announce-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.mkt-announce-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mkt-text);
}
.mkt-announce-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
}
.mkt-announce-dot--orange { background: var(--mkt-orange); }
.mkt-announce-dot--gold   { background: var(--mkt-gold); }
.mkt-announce-dot--green  { background: var(--mkt-green); }
.mkt-announce-dot--blue   { background: var(--mkt-blue); }

/* ============================================================
   HERO
   ============================================================ */
.mkt-hero {
  padding: 36px 0 28px;
  background:
    radial-gradient(620px 280px at 88% 30%, rgba(249, 159, 0, .08), transparent 60%),
    radial-gradient(540px 240px at 10% 100%, rgba(233, 78, 27, .06), transparent 60%),
    var(--mkt-cream);
  position: relative;
}
.mkt-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 880px) {
  .mkt-hero-grid { grid-template-columns: 1fr; }
}
.mkt-hero-eyebrow {
  display: inline-block;
  background: rgba(233, 78, 27, .1);
  color: var(--mkt-orange);
  padding: 5px 12px;
  border-radius: var(--mkt-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mkt-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mkt-ink);
  margin: 0 0 14px;
}
.mkt-hero-sub {
  font-size: 15px;
  color: var(--mkt-muted);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 520px;
}

/* Search */
.mkt-hero-search {
  position: relative;
  margin-bottom: 16px;
  max-width: 520px;
}
.mkt-hero-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mkt-muted);
  pointer-events: none;
}
.mkt-hero-search input {
  width: 100%;
  padding: 12px 50px 12px 42px;
  font-size: 14px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius);
  color: var(--mkt-text);
  outline: none;
  transition: border-color .15s ease;
}
.mkt-hero-search input:focus { border-color: var(--mkt-orange); }
.mkt-hero-search input::placeholder { color: var(--mkt-soft); }
.mkt-hero-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--mkt-radius-sm);
  background: linear-gradient(135deg, var(--mkt-orange), var(--mkt-orange-2));
  color: #fff;
  cursor: pointer;
}

/* Chips */
.mkt-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  max-width: 560px;
}
.mkt-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mkt-text);
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  transition: border-color .15s ease, color .15s ease;
}
.mkt-chip:hover { border-color: var(--mkt-orange); color: var(--mkt-orange); }
.mkt-chip--all { background: var(--mkt-cream-2); }

.mkt-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Visual collage */
.mkt-hero-visual { position: relative; }
.mkt-hero-collage {
  position: relative;
  height: 460px;
  border-radius: var(--mkt-radius-lg);
  background:
    radial-gradient(closest-side, rgba(245, 159, 0, .14), transparent 70%);
}
@media (max-width: 880px) { .mkt-hero-collage { height: 360px; } }
.mkt-hero-collage::before {
  content: '';
  position: absolute;
  inset: 8% 8%;
  border: 1px dashed rgba(233, 78, 27, .25);
  border-radius: 50%;
  pointer-events: none;
}
.mkt-hero-collage-tile {
  position: absolute;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--mkt-orange);
  font-size: 32px;
}
.mkt-hero-collage-tile small {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: var(--mkt-muted);
  font-weight: 600;
  white-space: nowrap;
}
.mkt-hero-collage-portrait {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 60px;
  color: var(--mkt-orange);
  background: linear-gradient(135deg, rgba(233, 78, 27, .15), rgba(245, 159, 0, .15));
}
.mkt-hero-collage-spices {
  text-align: center;
  padding: 12px;
  font-size: 32px;
}
.mkt-hero-collage-tile-1 { width: 32%; height: 50%; top: 8%;  left: 30%;  transform: rotate(-3deg); background-size: cover; }
.mkt-hero-collage-tile-2 { width: 28%; height: 28%; top: 8%;  left: 6%;   transform: rotate(-5deg); padding: 8px; background-size: cover;}
.mkt-hero-collage-tile-3 { width: 26%; height: 28%; top: 12%; right: 6%;  transform: rotate(4deg);    background-size: cover; }
.mkt-hero-collage-tile-4 { width: 28%; height: 28%; bottom: 18%; left: 10%; transform: rotate(-2deg); background-size: cover; }
.mkt-hero-collage-tile-5 { width: 32%; height: 30%; bottom: 12%; right: 8%; transform: rotate(3deg); background-size: cover; }

.mkt-hero-trust-badge,
.mkt-hero-delivery-badge {
  position: absolute;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 10px 12px;
  font-size: 11px;
  z-index: 3;
}
.mkt-hero-trust-badge {
  bottom: 8%;
  left: -4%;
  width: 200px;
}
.mkt-hero-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  color: var(--mkt-text);
}
.mkt-hero-trust-row strong { font-size: 12px; }
.mkt-hero-trust-close { color: var(--mkt-soft); cursor: pointer; }
.mkt-hero-trust-stars { color: var(--mkt-gold); letter-spacing: 1px; font-size: 13px; }
.mkt-hero-trust-avatars { display: inline-flex; }
.mkt-hero-trust-avatars span {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mkt-orange), var(--mkt-gold));
  border: 1.5px solid #fff;
  margin-left: -4px;
}
.mkt-hero-trust-avatars span:first-child { margin-left: 0; }
.mkt-hero-trust-avatars span:nth-child(2) { background: linear-gradient(135deg, var(--mkt-blue), #93C5FD); }
.mkt-hero-trust-avatars span:nth-child(3) { background: linear-gradient(135deg, var(--mkt-green), #6EE7B7); }
.mkt-hero-trust-avatars span:nth-child(4) { background: linear-gradient(135deg, #DB2777, #F472B6); }

.mkt-hero-delivery-badge {
  bottom: -4%;
  right: 0;
  width: 220px;
}
.mkt-hero-delivery-icons {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.mkt-hero-delivery-icons span {
  flex: 1;
  text-align: center;
  padding: 4px 2px;
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream);
}
.mkt-hero-delivery-icons i { display: block; color: var(--mkt-orange); margin-bottom: 2px; font-size: 13px; }
.mkt-hero-delivery-icons small { font-size: 9px; color: var(--mkt-muted); font-weight: 600; }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
.mkt-section { padding: 36px 0; }
.mkt-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
}
.mkt-section-title-icon {
  display: inline-flex;
  margin-right: 10px;
  color: var(--mkt-orange);
}
.mkt-section-title-icon--accent { color: var(--mkt-gold); }
.mkt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.mkt-section-head .mkt-section-title { margin: 0; }
/* Optional title + subtitle stack used when a section has a descriptive
   subtitle below the heading (e.g. Trending Across Cultures). */
.mkt-section-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-section-sub {
  font-size: 13px;
  color: var(--mkt-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 720px;
}
.mkt-section-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mkt-section-head-note { font-size: 12px; color: var(--mkt-muted); }
.mkt-section-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--mkt-orange);
}
.mkt-section-link:hover { text-decoration: underline; }

/* ============================================================
   BROWSE BY MARKET — photo-style cards, 5-top / 4-bottom split
   ============================================================ */
.mkt-markets-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.mkt-markets-row:last-child { margin-bottom: 0; }
.mkt-markets-row--five  { grid-template-columns: repeat(5, 1fr); }
.mkt-markets-row--four  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .mkt-markets-row--five { grid-template-columns: repeat(3, 1fr); }
  .mkt-markets-row--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mkt-markets-row--five,
  .mkt-markets-row--four { grid-template-columns: repeat(2, 1fr); }
}

.mkt-market-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 10;
  padding: 20px;
  border-radius: var(--mkt-radius);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mkt-market-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mkt-shadow-lg);
  color: #fff;
  text-decoration: none;
}
.mkt-market-card:hover .mkt-market-card-bg { transform: scale(1.04); }

/* Background layer — gradient fallback under the photo */
.mkt-market-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--mkt-card-accent, var(--mkt-orange));
  background-image:
    linear-gradient(135deg,
      var(--mkt-card-accent, var(--mkt-orange)) 0%,
      var(--mkt-card-accent2, var(--mkt-gold)) 100%);
  transition: transform .35s ease;
  z-index: 0;
}
/* Dark overlay so the white title is always readable on any image */
.mkt-market-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.62) 100%);
}

/* Decorative fallback icon (only shown when no image, sits behind the title) */
.mkt-market-card-fallback {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 48px;
  color: rgba(255, 255, 255, .25);
  z-index: 1;
  pointer-events: none;
}

.mkt-market-card-body {
  position: relative;
  z-index: 2;
}
.mkt-market-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.mkt-market-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* Slightly larger cards on the bottom 4-column row so they read at the same
   visual weight as the 5-column row (matches the reference). */
.mkt-markets-row--four .mkt-market-card { aspect-ratio: 16 / 9; }

/* ============================================================
   FILTER BY COUNTRY
   ============================================================ */
.mkt-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mkt-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mkt-text);
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mkt-flag-chip:hover {
  border-color: var(--mkt-orange);
  color: var(--mkt-orange);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(31, 41, 55, .06);
}
.mkt-flag { font-size: 16px; }
/* Real flag image inside the chip — small rounded rectangle on the left. */
.mkt-flag-img {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(31, 41, 55, .08);
}
.mkt-flag-chip--more { color: var(--mkt-muted); }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.mkt-product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
@media (max-width: 1200px) { .mkt-product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px)  { .mkt-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .mkt-product-grid { grid-template-columns: repeat(2, 1fr); } }

.mkt-product-card {
  position: relative;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mkt-product-card:hover {
  border-color: var(--mkt-orange);
  box-shadow: var(--mkt-shadow);
  transform: translateY(-2px);
}

/* Save heart in top-right corner */
.mkt-product-card-fav {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--mkt-muted);
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(31, 41, 55, .12);
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.mkt-product-card-fav:hover { color: var(--mkt-orange); transform: scale(1.06); }

/* Media — 4:3 landscape keeps the card from feeling vertically tall. */
.mkt-product-card-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--mkt-cream), var(--mkt-cream-2));
  background-size: cover;
  background-position: center;
  border-radius: var(--mkt-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--mkt-orange);
}
.mkt-product-card-media.has-image i { display: none; }

/* Body wraps title/seller/location/footer in a tight vertical stack */
.mkt-product-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* Title + price on the same row (title left, price right) */
.mkt-product-card-headRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mkt-product-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mkt-ink);
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-product-card-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--mkt-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.mkt-product-card-seller {
  font-size: 11px;
  color: var(--mkt-muted);
  margin: -2px 0 0;
  line-height: 1.25;
}

.mkt-product-card-location {
  font-size: 11px;
  color: var(--mkt-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
}
.mkt-product-card-location i { font-size: 11px; color: var(--mkt-muted); }

/* Footer row: pill badge (left) + Make Offer / Shop Now button (right) */
.mkt-product-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.mkt-product-card-footer .mkt-btn { margin-left: auto; }

/* Pill badges (single primary delivery indicator) */
.mkt-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--mkt-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.mkt-pill--shipping {
  background: rgba(37, 99, 235, .10);
  color: var(--mkt-blue);
  border-color: rgba(37, 99, 235, .25);
}
.mkt-pill--pickup {
  background: rgba(233, 78, 27, .10);
  color: var(--mkt-orange);
  border-color: rgba(233, 78, 27, .30);
}
.mkt-pill--delivery {
  background: rgba(139, 92, 246, .10);
  color: #6D28D9;
  border-color: rgba(139, 92, 246, .25);
}

/* Featured Global Merchants — slimmer cards (4-up on desktop) so the row
   feels like a curated row, not a hero strip. */
.mkt-sponsored-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .mkt-sponsored-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mkt-sponsored-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .mkt-sponsored-grid { grid-template-columns: 1fr; } }

.mkt-product-card--sponsored {
  border-color: var(--mkt-gold-2);
  background: linear-gradient(180deg, #FFFCF3 0%, #fff 60%);
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
}
/* The image becomes a square thumbnail on the left, ~40% of card width. */
.mkt-product-card--sponsored .mkt-product-card-media {
  aspect-ratio: 1 / 1;
  flex: 0 0 40%;
  align-self: stretch;
  min-height: 100%;
}
.mkt-product-card--sponsored .mkt-product-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 6px;
}
/* Reposition the save-heart for the horizontal layout. */
.mkt-product-card--sponsored .mkt-product-card-fav {
  top: 14px;
  right: 14px;
}

.mkt-sponsored-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--mkt-gold);
  color: #fff;
  padding: 4px 9px;
  border-radius: var(--mkt-radius-sm);
  z-index: 3;
}

/* ============================================================
   GARAGE SALES
   ============================================================ */
.mkt-garage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 880px) { .mkt-garage-grid { grid-template-columns: 1fr; } }
.mkt-garage-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 12px;
}
/* Split calendar date block: coloured "MON" header over a white day number. */
.mkt-garage-card-date {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 52px;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  overflow: hidden;
  flex-shrink: 0;
  text-align: center;
}
.mkt-garage-card-date-mon {
  background: linear-gradient(135deg, var(--mkt-orange), var(--mkt-orange-2));
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 0;
}
.mkt-garage-card-date-day {
  color: var(--mkt-ink);
  font-size: 22px;
  font-weight: 900;
  padding: 6px 0;
}
.mkt-garage-card-thumb {
  width: 56px;
  height: 66px;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
  flex-shrink: 0;
}
.mkt-garage-card-body { flex: 1; min-width: 0; }
.mkt-garage-card-body h3 { font-size: 13px; font-weight: 700; margin: 0 0 4px; color: var(--mkt-ink); line-height: 1.25; }
.mkt-garage-card-body p {
  font-size: 11px;
  color: var(--mkt-muted);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Footer row: distance on the left, View Details on the right. */
.mkt-garage-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.mkt-garage-card-foot .mkt-garage-card-distance { margin: 0; }
.mkt-garage-card-foot .mkt-btn { flex-shrink: 0; padding: 6px 12px; }
/* Standalone button (homepage variant where it's a direct card child). */
.mkt-garage-card > .mkt-btn { flex-shrink: 0; align-self: center; padding: 7px 12px; }
.mkt-garage-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--mkt-cream-2);
  border: 1px dashed var(--mkt-gold-2);
  border-radius: var(--mkt-radius);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--mkt-text);
  flex-wrap: wrap;
}
/* Ribbon variant — soft orange gradient with inward V-cut ends so the banner
   reads like a flag/ribbon. Used below the garage sale grid. */
.mkt-garage-cta--ribbon {
  border: 0;
  background: linear-gradient(90deg, #FDE6D3 0%, #FBD3B0 50%, #FDE6D3 100%);
  padding: 14px 56px;
  border-radius: 0;
  clip-path: polygon(
    0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%,
    0 100%, 24px 50%
  );
  margin-top: 4px;
  justify-content: center;
  gap: 28px;
}
.mkt-garage-cta--ribbon .mkt-garage-cta-text {
  text-align: center;
  font-size: 14px;
}
.mkt-garage-cta--ribbon .mkt-garage-cta-text strong {
  color: var(--mkt-orange);
  margin-right: 4px;
}

/* ============================================================
   LOKAL SPOTLIGHT
   ============================================================ */
.mkt-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .mkt-spotlight-grid { grid-template-columns: 1fr; } }
.mkt-spotlight-card {
  display: flex;
  gap: 16px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 16px;
  position: relative;
}
/* Photo — square portrait on the left, real Unsplash image as background.
   Falls back to the old orange gradient + user-circle icon if no image. */
.mkt-spotlight-photo {
  width: 120px;
  height: 120px;
  border-radius: var(--mkt-radius-sm);
  background: linear-gradient(135deg, var(--mkt-orange), var(--mkt-gold)) center/cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  align-self: flex-start;
}
.mkt-spotlight-body {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mkt-spotlight-fav {
  position: absolute; top: 0; right: 0;
}
.mkt-spotlight-body h3 { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--mkt-ink); padding-right: 28px; }
.mkt-spotlight-country { font-size: 12px; color: var(--mkt-orange); font-weight: 700; margin: 0 0 8px; display: inline-flex; align-items: center; gap: 4px; }
.mkt-spotlight-bio { font-size: 12px; color: var(--mkt-muted); line-height: 1.5; margin: 0 0 12px; }
.mkt-spotlight-body .mkt-btn { align-self: center; margin-top: auto; }

/* ============================================================
   SPLIT ROW — Lokal Spotlight (left) + Community Buzz (right)
   Sit side-by-side on one row to match the reference layout.
   ============================================================ */
.mkt-split-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: start;
}
.mkt-split-col {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 18px;
}
@media (max-width: 1100px) {
  .mkt-split-row { grid-template-columns: 1fr; }
}

/* In the narrower spotlight column, keep both cards side-by-side. */
.mkt-split-col--spotlight .mkt-spotlight-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) {
  .mkt-split-col--spotlight .mkt-spotlight-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COMMUNITY BUZZ
   ============================================================ */
.mkt-buzz-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 880px) { .mkt-buzz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .mkt-buzz-grid { grid-template-columns: 1fr; } }
.mkt-buzz-col {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 16px;
}
.mkt-buzz-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--mkt-ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mkt-border-soft);
}
.mkt-buzz-col ul { list-style: none; padding: 0; margin: 0; }
.mkt-buzz-col li {
  padding: 6px 0;
  font-size: 12px;
  color: var(--mkt-text);
  border-bottom: 1px dashed var(--mkt-border-soft);
}
.mkt-buzz-col li:last-child { border-bottom: 0; }
.mkt-buzz-col li a { color: var(--mkt-text); }
.mkt-buzz-col li a:hover { color: var(--mkt-orange); }
.mkt-buzz-col li small { display: block; color: var(--mkt-muted); font-size: 10px; margin-top: 2px; }
.mkt-buzz-col-link { padding-top: 10px !important; border-bottom: 0 !important; }
.mkt-buzz-col-link a { color: var(--mkt-orange) !important; font-weight: 700; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.mkt-final {
  padding: 50px 0;
}
.mkt-final-card {
  position: relative;
  background:
    radial-gradient(600px 240px at 80% 80%, rgba(245, 159, 0, .12), transparent 60%),
    linear-gradient(180deg, var(--mkt-cream-2) 0%, var(--mkt-paper) 100%);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 48px 32px;
  text-align: center;
  overflow: hidden;
}
/* Skyline variant — faded line-art monuments span the bottom of the card
   (Eiffel, Taj Mahal, pyramids, etc.) instead of a photo, matching the
   reference. The ::before photo overlay is suppressed for this variant. */
.mkt-final-card--skyline::before { display: none; }
.mkt-final-card > * { position: relative; z-index: 1; }
.mkt-final-card .mkt-final-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 78%;
  pointer-events: none;
  z-index: 0;
}
.mkt-final-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: var(--mkt-ink);
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.mkt-final-card p {
  font-size: 14px;
  color: var(--mkt-muted);
  margin: 0 auto 22px;
  max-width: 600px;
  line-height: 1.6;
}
.mkt-final-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* The FA-icon decorations are retired now that the background image carries
   the landmark silhouettes. Hidden rather than removed to keep the markup
   compatible. */
.mkt-final-deco { display: none; }

/* ---- Seller-recruitment variant ("Sell to a Global Audience") ----
   Larger padding + bigger headline + eyebrow tag so the final CTA reads as
   a destination block, not just a sign-off line. */
.mkt-final--seller { padding: 64px 0; }
.mkt-final-card--seller {
  padding: 64px 40px 60px;
  background:
    radial-gradient(700px 280px at 80% 90%, rgba(245, 159, 0, .14), transparent 60%),
    radial-gradient(500px 240px at 15% 10%, rgba(233, 78, 27, .10), transparent 65%),
    linear-gradient(180deg, var(--mkt-cream-2) 0%, var(--mkt-paper) 100%);
}
.mkt-final-eyebrow {
  display: inline-block;
  background: rgba(233, 78, 27, .12);
  color: var(--mkt-orange);
  padding: 6px 14px;
  border-radius: var(--mkt-radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mkt-final-card--seller h2 { font-size: clamp(32px, 4.6vw, 50px); margin-bottom: 14px; }
.mkt-final-card--seller p   { font-size: 15px; max-width: 720px; }
.mkt-final-card--seller .mkt-final-ctas { margin-top: 24px; gap: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.mkt-footer {
  background: var(--mkt-paper);
  border-top: 1px solid var(--mkt-border-soft);
  padding: 28px 0 22px;
  margin-top: 40px;
}
.mkt-footer-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mkt-border-soft);
}
.mkt-footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--mkt-ink);
  text-decoration: none;
}
.mkt-footer-logo span { color: var(--mkt-orange); }
.mkt-footer-logo:hover { color: var(--mkt-ink); }
.mkt-footer-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.mkt-footer-nav a {
  font-size: 13px;
  color: var(--mkt-muted);
  font-weight: 500;
}
.mkt-footer-nav a:hover { color: var(--mkt-orange); }
.mkt-footer-socials { display: flex; gap: 12px; }
.mkt-footer-socials a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mkt-cream-2);
  color: var(--mkt-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.mkt-footer-socials a:hover { background: var(--mkt-orange); color: #fff; }
.mkt-footer-meta {
  padding-top: 14px;
  font-size: 12px;
  color: var(--mkt-soft);
  text-align: center;
}

/* Crumbs (market page) */
.mkt-crumbs {
  font-size: 13px;
  color: var(--mkt-muted);
  margin-bottom: 18px;
}
.mkt-crumbs a { color: var(--mkt-muted); }
.mkt-crumbs a:hover { color: var(--mkt-orange); }
.mkt-crumbs strong { color: var(--mkt-ink); }
.mkt-crumbs span { margin: 0 6px; }

/* ------------------------------------------------------------------
   Icons8 wrapper image — keep inline icons aligned with adjacent text
   and buttons. Used by partials/icon.blade.php.
   ------------------------------------------------------------------ */
.mkt-icon {
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
  object-fit: contain;
}
.mkt-btn .mkt-icon,
.mkt-section-link .mkt-icon,
.mkt-flag-chip .mkt-icon,
.mkt-section-title .mkt-icon {
  vertical-align: middle;
}
.mkt-section-title { gap: 10px; }
.mkt-product-card-fav .mkt-icon { vertical-align: middle; }
.mkt-hero-delivery-icons .mkt-icon { vertical-align: middle; margin-bottom: 4px; display: block; margin-inline: auto; }

/* ============================================================
   EXPLORE PAGE
   ============================================================ */
.mkt-explore { background: var(--mkt-cream); }

/* ---- Announcement bar (auto-scrolling chips) ---- */
.mkt-announce {
  background: linear-gradient(180deg, #FFF6E6 0%, var(--mkt-cream) 100%);
  border-bottom: 1px solid var(--mkt-border-soft);
  padding: 10px 0;
}
.mkt-announce-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-announce-arrow {
  width: 28px; height: 28px;
  border: 1px solid var(--mkt-border);
  border-radius: 50%;
  background: var(--mkt-paper);
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mkt-announce-track {
  flex: 1;
  display: flex;
  gap: 28px;
  overflow: hidden;
  white-space: nowrap;
  justify-content: space-between;
}
.mkt-announce-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mkt-text);
}

/* ---- Page head ---- */
.mkt-explore-head { padding-top: 32px; padding-bottom: 18px; }
.mkt-explore-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  color: var(--mkt-ink);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.mkt-explore-sub {
  font-size: 14px;
  color: var(--mkt-muted);
  margin: 0 0 20px;
}
.mkt-explore-search {
  position: relative;
  max-width: 640px;
  margin-bottom: 18px;
}
.mkt-explore-search input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-paper);
  padding: 0 18px 0 44px;
  font-size: 14px;
  color: var(--mkt-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mkt-explore-search input:focus {
  border-color: var(--mkt-orange);
  box-shadow: 0 0 0 4px rgba(233, 78, 27, .12);
}
.mkt-explore-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--mkt-muted);
}

/* ---- Filter tabs ---- */
.mkt-explore-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mkt-filter-tab {
  border: 1px solid var(--mkt-border);
  background: var(--mkt-paper);
  color: var(--mkt-text);
  border-radius: var(--mkt-radius-pill);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mkt-filter-tab:hover { border-color: var(--mkt-orange); color: var(--mkt-orange); }
.mkt-filter-tab.is-active {
  background: var(--mkt-ink);
  border-color: var(--mkt-ink);
  color: #fff;
}
.mkt-filter-tab--more { color: var(--mkt-muted); }

/* ---- Two-column split: grid left, sidebar right ----
   align-items: stretch lets the sidebar match the left grid's height. */
.mkt-explore-body { padding-top: 18px; }
.mkt-explore-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .mkt-explore-split { grid-template-columns: 1fr; }
}

/* Left column wrapper — stacks the market grid + Browse by Region +
   Featured Countries together so they fill the same height as the
   sidebar (Other markets + value props). */
.mkt-explore-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mkt-explore-inner-section {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 18px;
}
.mkt-explore-inner-section .mkt-section-head { margin-bottom: 14px; }
.mkt-explore-inner-section .mkt-section-title { font-size: 18px; }

/* Primary tile grid — 6 columns. Most tiles span 2 (giving 3 per row); the
   leftover items in the last row use .mkt-tile--wide to span 3, filling the
   full row width evenly even though there are only 2 of them.
   align-self: start prevents tiles from stretching when the parent split row
   matches the sidebar's height. */
.mkt-explore-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-content: start;
}
.mkt-explore-grid .mkt-tile { grid-column: span 2; align-self: start; }
.mkt-explore-grid .mkt-tile--wide { grid-column: span 3; }
@media (max-width: 780px) {
  .mkt-explore-grid { grid-template-columns: repeat(4, 1fr); }
  .mkt-explore-grid .mkt-tile,
  .mkt-explore-grid .mkt-tile--wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .mkt-explore-grid { grid-template-columns: 1fr; }
  .mkt-explore-grid .mkt-tile,
  .mkt-explore-grid .mkt-tile--wide { grid-column: span 1; }
}

/* Market tile (photo card with overlaid title). Wider 5:2 landscape ratio
   keeps the cards short so 4 rows of tiles read cleanly side-by-side with
   the sidebar list. */
.mkt-tile {
  position: relative;
  display: block;
  aspect-ratio: 5 / 2;
  border-radius: var(--mkt-radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--mkt-tile-accent, var(--mkt-orange)), var(--mkt-tile-accent2, var(--mkt-gold)));
  transition: transform .18s ease, box-shadow .18s ease;
}
.mkt-tile:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow); color: #fff; text-decoration: none; }
.mkt-tile-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.mkt-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.7) 100%);
}
.mkt-tile-badge {
  position: absolute;
  top: 12px; left: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.mkt-tile-body {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  z-index: 2;
}
.mkt-tile-body h3 {
  margin: 0 0 4px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.mkt-tile-body p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  line-height: 1.35;
}

/* ---- Right sidebar ----
   Sidebar matches the left grid's height. The primary "Other markets" card
   grows to fill leftover space; inside, the Add list spaces items evenly so
   the View All Markets button sits at the bottom edge. The list cap on item
   gap keeps the spacing tight even if the sidebar is short. */
.mkt-explore-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.mkt-explore-side-card {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.mkt-explore-side-card:first-child { flex: 1; min-height: 0; }
/* Add list stays tightly packed at the top of the card; the View All Markets
   button is pushed to the bottom via margin-top: auto so it lines up with
   the bottom of the left grid without inflating the gap between rows. */
.mkt-add-viewall { margin-top: auto; }
.mkt-explore-side-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0 0 3px;
  line-height: 1.3;
}
.mkt-explore-side-sub {
  font-size: 10px;
  color: var(--mkt-muted);
  margin: 0 0 8px;
  line-height: 1.35;
}
.mkt-add-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.mkt-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--mkt-border);
}
.mkt-add-row:first-child { padding-top: 4px; }
.mkt-add-row:last-child  { border-bottom: 0; }
.mkt-add-thumb {
  width: 44px; height: 54px;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
  flex-shrink: 0;
}
.mkt-add-meta { flex: 1; min-width: 0; }
.mkt-add-meta strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--mkt-ink);
  margin-bottom: 2px;
  line-height: 1.25;
}
.mkt-add-meta small {
  display: block;
  font-size: 10px;
  color: var(--mkt-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-add-btn {
  border: 1px solid var(--mkt-orange);
  background: var(--mkt-paper);
  color: var(--mkt-orange);
  border-radius: var(--mkt-radius-sm);
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  flex-shrink: 0;
}
.mkt-add-btn:hover { background: var(--mkt-orange); color: #fff; transform: translateY(-1px); }
.mkt-add-viewall {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: var(--mkt-orange);
  font-weight: 800;
  border: 1.5px solid var(--mkt-orange);
  background: var(--mkt-paper);
  padding: 8px 14px;
  border-radius: var(--mkt-radius-sm);
  font-size: 12px;
}
.mkt-add-viewall:hover { background: var(--mkt-orange); color: #fff; }

/* Value props sidebar card — tightened so the whole sidebar (Other markets
   card + value props) fits within the main grid's natural height. */
.mkt-value-props { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.mkt-value-row { display: flex; gap: 10px; align-items: flex-start; }
.mkt-value-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(233, 78, 27, .10);
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-value-icon .mkt-icon { width: 16px; height: 16px; }
.mkt-value-meta strong { display: block; font-size: 11px; font-weight: 700; color: var(--mkt-ink); margin-bottom: 1px; line-height: 1.25; }
.mkt-value-meta small { display: block; font-size: 10px; color: var(--mkt-muted); line-height: 1.35; }

/* ---- Browse by Region ---- */
.mkt-region-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
}
.mkt-region-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--mkt-text);
  min-width: 78px;
  padding: 6px 4px;
  transition: color .15s ease, transform .15s ease;
}
.mkt-region-chip:hover { color: var(--mkt-orange); transform: translateY(-2px); text-decoration: none; }
.mkt-region-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(245, 159, 0, .10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mkt-region-name { font-size: 11px; font-weight: 600; }

/* ---- Featured Countries ---- */
.mkt-country-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mkt-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-paper);
  color: var(--mkt-text);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.mkt-country-chip:hover { border-color: var(--mkt-orange); color: var(--mkt-orange); text-decoration: none; }
.mkt-country-flag { font-size: 14px; line-height: 1; }
.mkt-country-chip--more { color: var(--mkt-orange); }

/* ---- Trending mini cards ---- */
.mkt-trending-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .mkt-trending-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .mkt-trending-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .mkt-trending-grid { grid-template-columns: 1fr; } }
.mkt-trending-card {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mkt-trending-card:hover {
  transform: translateY(-2px);
  border-color: var(--mkt-orange);
  box-shadow: var(--mkt-shadow);
}
.mkt-trending-media {
  aspect-ratio: 16 / 9;
  background: var(--mkt-cream-2) center/cover no-repeat;
}
.mkt-trending-body { padding: 12px 14px 14px; }
.mkt-trending-body h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0 0 10px;
}
.mkt-trending-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mkt-trending-thumbs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mkt-trending-thumb {
  width: 30px;
  height: 30px;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(31, 41, 55, .08);
  flex-shrink: 0;
}
.mkt-trending-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.mkt-trending-rating {
  color: var(--mkt-gold);
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mkt-trending-rating i { font-size: 11px; }
.mkt-trending-stats small {
  font-size: 10px;
  color: var(--mkt-muted);
  font-weight: 600;
  margin-top: 2px;
}

/* ---- Seller CTA banner ----
   A single inline-SVG skyline (Eiffel + temples + columns + clock tower +
   etc.) stretches the full width as one continuous line-art illustration.
   The portrait + body content centers horizontally on top, like in the
   reference design. */
.mkt-seller-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #FFF1DF 0%, #FCE0C2 50%, #FFE9CD 100%);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 24px 32px;
  overflow: hidden;
  min-height: 190px;
}

/* The full-width skyline SVG sits behind everything else, anchored to the
   bottom so the monuments rise from the bottom edge like a city silhouette. */
.mkt-seller-cta-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Sparkles near the headline */
.mkt-seller-cta-spark {
  position: absolute;
  color: var(--mkt-orange);
  opacity: .55;
  z-index: 2;
}
.mkt-seller-cta-spark--1 { top: 22px; left: 38%;  font-size: 14px; }
.mkt-seller-cta-spark--2 { top: 30px; right: 32%; font-size: 10px; }

/* Photo + body grouped together and centered as a unit. */
.mkt-seller-cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 860px;
  width: 100%;
}

/* Tall cutout-style portrait anchored at the bottom edge.
   A radial-gradient mask fades the rectangle into a soft oval so the
   photo's dark background dissolves into the peach banner — the result
   reads like a transparent cutout instead of a hard-edged photo. */
.mkt-seller-cta-photo {
  width: 160px;
  height: 180px;
  background: center top / cover no-repeat;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: -24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 55%, transparent 100%);
  mix-blend-mode: multiply;
}

.mkt-seller-cta-body { flex: 1; min-width: 0; }
.mkt-seller-cta-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.mkt-seller-cta-body p { font-size: 13px; color: var(--mkt-muted); margin: 0 0 14px; }
.mkt-seller-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .mkt-seller-cta {
    padding: 18px;
    min-height: 0;
  }
  .mkt-seller-cta-content {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }
  .mkt-seller-cta-photo {
    width: 100px;
    height: 120px;
    margin-bottom: 0;
    align-self: flex-start;
  }
  .mkt-seller-cta-skyline { opacity: .6; }
}

/* ============================================================
   MARKET DETAIL PAGE (Caribbean Market and others)
   ============================================================ */

/* ---- Hero with title + chips left, photo right ---- */
.mkt-market-hero { padding: 16px 0 24px; }
.mkt-market-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 880px) {
  .mkt-market-hero-grid { grid-template-columns: 1fr; }
}
.mkt-market-hero-content { position: relative; }
.mkt-market-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  color: var(--mkt-ink);
  letter-spacing: -.02em;
  margin: 0 0 10px;
  line-height: 1.05;
}
/* Per-market decorative ornament — Talavera flowers / floral flourish that
   sits to the right of the title, overlapping into the hero photo's column
   so the whole hero composition reads as one rich cluster. */
.mkt-hero-ornament {
  position: absolute;
  right: -60px;
  top: -10px;
  width: clamp(180px, 22vw, 280px);
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* The hero photo column gets position: relative so the right-side ornament
   (lanterns + fan) anchors to the photo's right edge. */
.mkt-market-hero-visual { position: relative; }

/* Asian — left half: floating ruyi clouds beside the title. */
.mkt-hero-ornament--asian-left {
  right: -40px;
  top: 0;
  width: clamp(180px, 22vw, 260px);
}

/* Asian — right half: a vertical chain of Icons8 Chinese-lantern PNGs
   hanging just past the right edge of the hero photo. The vertical line is
   a CSS ::before so we don't need an extra SVG. */
.mkt-hero-ornament--asian-right {
  position: absolute;
  top: 0;
  /* Straddle the photo's right edge — about a third of the lantern sits
     inside the photo, the rest hangs in the whitespace just outside it. */
  left: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 16px; */
  pointer-events: none;
  z-index: 2;
}
.mkt-hero-ornament--asian-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  background: #7C2D12;
  opacity: .55;
}
.mkt-asian-lantern {
  position: relative;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(31, 41, 55, .15));
}
.mkt-asian-lantern--1 { width: 60px; height: 80px; }
.mkt-asian-lantern--2 { width: 50px; height: 70px; }
.mkt-asian-lantern--3 { width: 40px; height: 60px; }

/* Pacific Islands ornaments — hibiscus + palm leaf cluster on the left,
   and a small accent sprig peeking from the photo's bottom-right corner. */
.mkt-hero-ornament--pacific-left {
  right: -40px;
  top: 0;
  width: clamp(180px, 22vw, 260px);
}
.mkt-hero-ornament--pacific-right {
  position: absolute;
  bottom: -16px;
  right: -28px;
  width: clamp(70px, 8vw, 100px);
  height: auto;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 880px) {
  .mkt-hero-ornament--pacific-right { display: none; }
}

@media (max-width: 880px) {
  .mkt-hero-ornament,
  .mkt-hero-ornament--asian-right { display: none; }
}
.mkt-market-hero-sub {
  font-size: 14px;
  color: var(--mkt-muted);
  margin: 0 0 18px;
  max-width: 520px;
  line-height: 1.55;
}
.mkt-flag-rows { display: flex; flex-direction: column; gap: 8px; }
.mkt-flag-row { display: flex; flex-wrap: wrap; gap: 8px; }

.mkt-market-hero-visual {
  aspect-ratio: 16 / 9;
  border-radius: var(--mkt-radius);
  background: var(--mkt-cream-2) center/cover no-repeat;
  box-shadow: 0 12px 28px rgba(31, 41, 55, .14);
}

/* ---- Pacific Islands "overlay" hero: a single full-width photo card with
   the title + tagline + sub overlaid on the upper-left third. ---- */
.mkt-market-hero--overlay { padding: 18px 0 8px; }
.mkt-market-hero-overlay {
  position: relative;
  aspect-ratio: 16 / 6.5;
  min-height: 320px;
  border-radius: var(--mkt-radius-lg);
  background: var(--mkt-cream-2) center/cover no-repeat;
  box-shadow: 0 12px 30px rgba(31, 41, 55, .14);
  overflow: hidden;
}
.mkt-market-hero-overlay::before {
  /* Soft white gradient on the left so the headline stays readable over
     the photo, regardless of underlying content. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 252, 245, .95) 0%, rgba(255, 252, 245, .75) 30%, rgba(255, 252, 245, 0) 55%);
  pointer-events: none;
}
.mkt-market-hero-overlay-text {
  position: relative;
  z-index: 1;
  max-width: 460px;
  padding: 36px 0 36px 48px;
}
.mkt-market-hero-overlay-text .mkt-market-hero-title {
  font-size: clamp(36px, 4.4vw, 56px);
  margin-bottom: 14px;
}
.mkt-market-hero-tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--mkt-orange);
  font-style: italic;
  margin: 0 0 10px;
}
.mkt-market-hero--overlay .mkt-market-hero-sub { font-size: 13px; max-width: 380px; }

/* "Shop by Island" / "Shop by Category" labeled chip rows used on the
   Pacific page. Label sits on the left; chips flow inline to its right;
   View All link anchors on the right. */
.mkt-shop-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 6px 0;
}
.mkt-shop-row-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--mkt-ink);
  flex-shrink: 0;
}
.mkt-shop-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.mkt-shop-row-link {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
}

/* Island chips — outlined pill style, smaller than the regular flag chips. */
.mkt-island-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mkt-text);
  background: var(--mkt-paper);
  border: 1.5px solid var(--mkt-orange);
  border-radius: var(--mkt-radius-pill);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mkt-island-chip:hover { background: var(--mkt-orange); color: #fff; text-decoration: none; }

/* ---- Pacific Islands seller cards ----
   Horizontal card: small logo + name/place/bio + View-Shop link on the left,
   large product photo on the right. No rating row.  */
.mkt-seller-grid--pacific {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) { .mkt-seller-grid--pacific { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .mkt-seller-grid--pacific { grid-template-columns: 1fr; } }

.mkt-pacific-seller-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  overflow: hidden;
  min-height: 170px;
}
.mkt-pacific-seller-info {
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
}
.mkt-pacific-seller-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mkt-pacific-seller-logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(14, 116, 144, .12);
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-pacific-seller-name { font-size: 14px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 2px; line-height: 1.2; }
.mkt-pacific-seller-place {
  font-size: 11px;
  color: var(--mkt-orange);
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.mkt-pacific-seller-bio { font-size: 12px; color: var(--mkt-muted); line-height: 1.4; margin: 0 0 12px; }
.mkt-pacific-seller-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--mkt-orange);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.mkt-pacific-seller-link:hover { text-decoration: underline; color: var(--mkt-orange); }

.mkt-pacific-seller-product {
  background: var(--mkt-cream-2) center/cover no-repeat;
  min-height: 170px;
}

/* ---- Pacific Islands sponsored BANNER style ----
   A horizontal banner with title + Shop Now on the left, product photo in
   the centre, and a brand mark on the right. Soft cream/teal gradient with
   subtle wave shapes on the edges. */
.mkt-sponsored-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.5fr;
  align-items: stretch;
  gap: 0;
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(14, 116, 144, .14) 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 50%, rgba(14, 116, 144, .12) 0%, transparent 55%),
    linear-gradient(90deg, #E6F5F4 0%, #F2F9F7 50%, #E6F5F4 100%);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 24px 32px 24px 110px;
  overflow: hidden;
  min-height: 180px;
}
.mkt-sponsored-banner::before,
.mkt-sponsored-banner::after {
  /* Soft wave SVG flourishes anchored on the left/right edges. */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 110px;
  background:
    radial-gradient(circle at 30% 30%, rgba(14, 116, 144, .22) 1px, transparent 2px) 0 0 / 18px 18px,
    radial-gradient(40% 60% at 30% 50%, rgba(14, 116, 144, .18) 0%, transparent 70%);
  pointer-events: none;
}
.mkt-sponsored-banner::before { left: 0;  }
.mkt-sponsored-banner::after  { right: 0; transform: scaleX(-1); }

.mkt-sponsored-banner .mkt-sponsored-badge {
  top: 14px;
  left: 14px;
  background: var(--mkt-orange);
  z-index: 2;
}

.mkt-sponsored-banner-text { position: relative; z-index: 1; }
.mkt-sponsored-banner-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.mkt-sponsored-banner-desc {
  font-size: 13px;
  color: var(--mkt-muted);
  margin: 0 0 14px;
  max-width: 320px;
}

.mkt-sponsored-banner-photo {
  position: relative;
  z-index: 1;
  align-self: stretch;
  /* `cover` + mix-blend-mode lets the photo fill the centre area and melt
     into the banner's cream/teal background instead of sitting in a box. */
  background: center/cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.mkt-sponsored-banner-brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #0E7490;
  text-align: center;
}
.mkt-sponsored-banner-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.2;
}

@media (max-width: 880px) {
  .mkt-sponsored-banner {
    grid-template-columns: 1fr;
    padding: 24px;
    text-align: center;
  }
  .mkt-sponsored-banner-desc { margin-left: auto; margin-right: auto; }
  .mkt-sponsored-banner-photo { min-height: 160px; }
  .mkt-sponsored-banner::before,
  .mkt-sponsored-banner::after { display: none; }
}

/* ---- Pacific 3-column bottom row (Events + Garage Sales + single Lokal Spotlight) ----
   align-items: stretch keeps all three panel cards the same height — they're
   internal flex columns so any shorter content pushes its trailing link to
   the bottom of the matched height. */
.mkt-pacific-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1200px) { .mkt-pacific-3col { grid-template-columns: 1fr; } }

.mkt-pacific-panel {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.mkt-pacific-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.mkt-pacific-panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0;
}
.mkt-pacific-panel-link {
  font-size: 12px;
  color: var(--mkt-orange);
  font-weight: 700;
  text-decoration: none;
}
.mkt-pacific-panel-foot-link {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 700;
  color: var(--mkt-orange);
  margin-top: 12px;
  text-decoration: none;
}
.mkt-pacific-panel-foot-link:hover { text-decoration: underline; color: var(--mkt-orange); }

/* Compact event/garage row used inside Pacific panels */
.mkt-pacific-row-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mkt-pacific-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.mkt-pacific-row-date {
  width: 50px; height: 60px;
  flex-shrink: 0;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-orange);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mkt-pacific-row-date-mon { font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.mkt-pacific-row-date-day { font-size: 20px; font-weight: 900; line-height: 1; }
.mkt-pacific-row-thumb {
  width: 60px; height: 60px;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
  flex-shrink: 0;
}
.mkt-pacific-row-body { flex: 1; min-width: 0; }
.mkt-pacific-row-body h4 { font-size: 13px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 2px; line-height: 1.25; }
.mkt-pacific-row-body p  { font-size: 11px; color: var(--mkt-muted); margin: 0; line-height: 1.35; }
.mkt-pacific-row-meta    { font-size: 10px; }

.mkt-pacific-row-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--mkt-orange);
  border-radius: var(--mkt-radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

/* Single Lokal Spotlight card on the right */
.mkt-pacific-spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 14px;
  align-items: stretch;
  flex: 1;
}
.mkt-pacific-spotlight-name { font-size: 16px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 2px; line-height: 1.25; }
.mkt-pacific-spotlight-role { font-size: 12px; color: var(--mkt-orange); font-weight: 700; margin: 0 0 8px; }
.mkt-pacific-spotlight-bio  { font-size: 12px; color: var(--mkt-muted); line-height: 1.5; margin: 0 0 10px; }
.mkt-pacific-spotlight-quote {
  font-size: 12px;
  color: var(--mkt-orange);
  font-style: italic;
  margin: 0 0 12px;
  line-height: 1.5;
}
.mkt-pacific-spotlight-photo {
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
  min-height: 180px;
}

/* ---- Pacific Islands FINAL CTA — wide horizontal banner ----
   Cream/teal gradient with subtle wave shapes top + bottom, a coral SVG on
   the far left, and shells + hibiscus on the far right. Text on the left,
   buttons on the right (horizontal layout, not stacked). */
.mkt-final-card--pacific {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.55) 0%, transparent 70%),
    linear-gradient(180deg, #DEF0EE 0%, #ECF6F4 50%, #DEF0EE 100%);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 28px 140px;
  overflow: hidden;
  min-height: 160px;
  text-align: left;
}
.mkt-final-card--pacific::before,
.mkt-final-card--pacific::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 24px;
  background-image:
    radial-gradient(20px 12px at 30% 50%, rgba(255,255,255,.6) 0%, transparent 60%),
    radial-gradient(24px 12px at 70% 50%, rgba(14, 116, 144, .12) 0%, transparent 60%);
  background-repeat: repeat-x;
  background-size: 80px 24px;
  pointer-events: none;
}
.mkt-final-card--pacific::before { top: 0; }
.mkt-final-card--pacific::after  { bottom: 0; transform: scaleY(-1); }

.mkt-pacific-cta-deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 90%;
  width: auto;
  pointer-events: none;
  z-index: 0;
}
.mkt-pacific-cta-deco--left  { left: 10px; }
.mkt-pacific-cta-deco--right { right: 10px; }

.mkt-pacific-cta-text { position: relative; z-index: 1; max-width: 580px; }
.mkt-pacific-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--mkt-ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.mkt-pacific-cta-sub {
  font-size: 13px;
  color: var(--mkt-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 540px;
}
.mkt-pacific-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mkt-final-card--pacific .mkt-btn-accent {
  background: linear-gradient(135deg, #0E7490, #22D3EE);
  box-shadow: 0 4px 12px rgba(14, 116, 144, .25);
}

@media (max-width: 880px) {
  .mkt-final-card--pacific {
    grid-template-columns: 1fr;
    padding: 24px 80px;
    text-align: center;
  }
  .mkt-pacific-cta-actions { justify-content: center; }
  .mkt-pacific-cta-deco { height: 70%; }
}
@media (max-width: 560px) {
  .mkt-final-card--pacific { padding: 24px; }
  .mkt-pacific-cta-deco { display: none; }
}

/* Popular Islands image-card row */
.mkt-island-card-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) { .mkt-island-card-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .mkt-island-card-row { grid-template-columns: repeat(2, 1fr); } }
.mkt-island-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mkt-island-card:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow); text-decoration: none; }
.mkt-island-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.7) 100%);
}
.mkt-island-card-name {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  z-index: 2;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* On the Pacific page, the categories row also uses .mkt-shop-row so the
   chips wrap nicely to the right of the "Shop by Category" label. */
.mkt-market-categories--islands { padding: 4px 0 8px; border-top: 0; border-bottom: 1px solid var(--mkt-border-soft); }
.mkt-market-categories--islands + .mkt-market-categories { border-top: 0; }

/* Halftone world-map backdrop behind the hero — a dotted grid is masked by a
   local world-map SVG so the dots only show through the continent shapes,
   producing the dotted map in the reference. Dots inherit the market accent
   and the whole layer is faded so it sits quietly behind the title. */
.mkt-market-hero { position: relative; overflow: hidden; }
.mkt-market-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--mkt-orange) 1.2px, transparent 1.5px);
  background-size: 11px 11px;
  -webkit-mask: url('../images/world-map.svg') no-repeat 58% 46% / 74% auto;
          mask: url('../images/world-map.svg') no-repeat 58% 46% / 74% auto;
  opacity: .28;
  pointer-events: none;
  z-index: 0;
}
.mkt-market-hero .container { position: relative; z-index: 1; }

/* ---- Category nav row — horizontal chips (icon left, label right) ---- */
.mkt-market-categories { padding: 4px 0 24px; border-top: 1px solid var(--mkt-border-soft); border-bottom: 1px solid var(--mkt-border-soft); margin-top: 8px; }
.mkt-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.mkt-category-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--mkt-text);
  border-radius: var(--mkt-radius-sm);
  transition: background .15s ease, color .15s ease;
}
.mkt-category-chip:hover { background: rgba(233, 78, 27, .06); color: var(--mkt-orange); text-decoration: none; }
.mkt-category-icon {
  width: 34px; height: 34px;
  border-radius: var(--mkt-radius-sm);
  background: rgba(245, 159, 0, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-category-icon .mkt-icon { width: 22px; height: 22px; }
.mkt-category-name { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---- Featured sellers (3-up) ---- */
.mkt-seller-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .mkt-seller-grid { grid-template-columns: 1fr; } }

/* Horizontal card — circular avatar on the left, info column on the right. */
.mkt-seller-card {
  position: relative;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mkt-seller-photo {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--mkt-cream-2) center/cover no-repeat;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(31, 41, 55, .10);
  flex-shrink: 0;
}
.mkt-seller-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mkt-seller-name { font-size: 15px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 3px; padding-right: 26px; line-height: 1.25; }
.mkt-seller-place { font-size: 12px; color: var(--mkt-muted); margin: 0 0 5px; }
.mkt-seller-rating {
  font-size: 12px;
  color: var(--mkt-gold);
  font-weight: 800;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mkt-seller-rating i { font-size: 11px; }
.mkt-seller-rating small { color: var(--mkt-muted); font-weight: 600; }
.mkt-seller-dot { color: var(--mkt-soft); }
.mkt-seller-bio { font-size: 12px; color: var(--mkt-muted); line-height: 1.45; margin: 0 0 12px; }
.mkt-seller-info .mkt-btn { align-self: flex-start; margin-top: auto; }

/* ---- Product grid 7-up variant (Shop {Market} Finds) ---- */
.mkt-product-grid--7 {
  grid-template-columns: repeat(7, 1fr);
}
@media (max-width: 1300px) { .mkt-product-grid--7 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 980px)  { .mkt-product-grid--7 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .mkt-product-grid--7 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Wide sponsored listing (one big card) ----
   Columns are tuned so the left half (photo + body) sits at roughly a 3:2
   ratio against the right half (features + thumbnails). */
.mkt-sponsored-wide {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1.8fr 1fr 200px;
  align-items: center;
  gap: 24px;
  background: linear-gradient(180deg, #FFFCF3 0%, #fff 60%);
  border: 1px solid var(--mkt-gold-2);
  border-radius: var(--mkt-radius);
  padding: 18px 22px;
}
@media (max-width: 1100px) {
  .mkt-sponsored-wide { grid-template-columns: 200px 1fr 1fr; }
  .mkt-sponsored-wide-thumbs { display: none; }
}
@media (max-width: 720px) {
  .mkt-sponsored-wide { grid-template-columns: 1fr; text-align: center; }
  .mkt-sponsored-wide-features { align-items: center; }
  .mkt-sponsored-wide-bullets li { justify-content: center; }
}

.mkt-sponsored-wide .mkt-sponsored-badge { top: 14px; left: 14px; }

.mkt-sponsored-wide-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
}
.mkt-sponsored-wide-body { display: flex; flex-direction: column; align-items: flex-start; }
.mkt-sponsored-wide-title { font-size: 17px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 5px; }
.mkt-sponsored-wide-desc   { font-size: 12px; color: var(--mkt-muted); margin: 0 0 10px; line-height: 1.5; max-width: 420px; }
.mkt-sponsored-wide-price  { margin: 0 0 3px; font-size: 14px; }
.mkt-sponsored-wide-price strong { color: var(--mkt-ink); font-size: 20px; font-weight: 900; margin-right: 8px; }
.mkt-sponsored-wide-old { color: var(--mkt-muted); text-decoration: line-through; font-size: 14px; }
.mkt-sponsored-wide-seller { font-size: 12px; color: var(--mkt-muted); margin: 0 0 8px; }
.mkt-sponsored-wide-body .mkt-pill { align-self: flex-start; }

/* Features column — bullets stacked, Shop Now CTA beneath, divider on the left */
.mkt-sponsored-wide-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  border-left: 1px solid var(--mkt-border-soft);
  padding-left: 24px;
  align-self: stretch;
  justify-content: center;
}
.mkt-sponsored-wide-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkt-sponsored-wide-bullets li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mkt-text);
}
/* Outlined circle around each bullet icon, tinted to the market accent. */
.mkt-feature-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--mkt-orange);
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-sponsored-wide-cta { margin-top: 2px; }

.mkt-sponsored-wide-thumbs {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mkt-sponsored-wide-thumb {
  flex: 1;
  aspect-ratio: 3 / 4;
  border-radius: var(--mkt-radius-sm);
  background: var(--mkt-cream-2) center/cover no-repeat;
}

/* ---- Garage card tweaks for market page ---- */
.mkt-garage-card-distance { color: var(--mkt-orange); font-weight: 700; font-size: 11px; margin-top: 2px; }

/* ---- Popular Countries in this Market (right column, 2-column layout) ---- */
.mkt-split-col--popular .mkt-section-title { margin-bottom: 14px; }
.mkt-popular-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
@media (max-width: 520px) { .mkt-popular-list { grid-template-columns: 1fr; } }
.mkt-popular-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed var(--mkt-border);
  font-size: 13px;
}
.mkt-popular-name { font-weight: 700; color: var(--mkt-ink); display: inline-flex; align-items: center; gap: 8px; }
.mkt-popular-name .mkt-flag-img { width: 22px; height: 16px; }
.mkt-popular-count { font-size: 11px; color: var(--mkt-muted); font-weight: 600; white-space: nowrap; }
.mkt-popular-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: color .15s;
}
.mkt-popular-link:hover { color: var(--mkt-orange); text-decoration: none; }
.mkt-popular-link:hover .mkt-popular-name { color: var(--mkt-orange); }

/* Market page uses an even split between Lokal Spotlight and Popular
   Countries (overrides the homepage 5fr / 7fr ratio). align-items: stretch
   keeps both panel cards the same height even though their content differs. */
.mkt-market .mkt-split-row {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .mkt-market .mkt-split-row { grid-template-columns: 1fr; }
}

/* African-layout split-row ratios. */
.mkt-market .mkt-split-row--3070 { grid-template-columns: 3fr 7fr; }
.mkt-market .mkt-split-row--6040 { grid-template-columns: 6fr 4fr; }
@media (max-width: 1100px) {
  .mkt-market .mkt-split-row--3070,
  .mkt-market .mkt-split-row--6040 { grid-template-columns: 1fr; }
}

/* Vertical stack used in the African layout for the events column and the
   garage-sales column — same card markup, just stacked vertically. */
.mkt-event-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 4-column variant for the garage / events grid (used by the Asian page). */
.mkt-garage-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .mkt-garage-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .mkt-garage-grid--4 { grid-template-columns: 1fr; } }

/* ---- Trending Pantry & Tea — mini product cards in a 6-up grid ---- */
.mkt-trending-pantry {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .mkt-trending-pantry { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .mkt-trending-pantry { grid-template-columns: repeat(2, 1fr); } }
.mkt-trending-pantry-card {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mkt-trending-pantry-card:hover {
  border-color: var(--mkt-orange);
  box-shadow: var(--mkt-shadow);
  transform: translateY(-2px);
}
.mkt-trending-pantry-media {
  aspect-ratio: 1 / 1;
  background: var(--mkt-cream-2) center/cover no-repeat;
}
.mkt-trending-pantry-body { padding: 8px 10px 10px; }
.mkt-trending-pantry-body h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--mkt-ink);
  margin: 0 0 2px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-trending-pantry-seller { font-size: 10px; color: var(--mkt-muted); margin: 0 0 3px; }
.mkt-trending-pantry-price  { font-size: 13px; font-weight: 900; color: var(--mkt-ink); margin: 0; }

/* Artisan Spotlight — single highlighted artisan card. */
.mkt-artisan-card {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mkt-artisan-photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--mkt-cream-2) center/cover no-repeat;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(31, 41, 55, .10);
  margin-bottom: 12px;
}
.mkt-artisan-name { font-size: 16px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 4px; }
.mkt-artisan-role { font-size: 12px; color: var(--mkt-orange); font-weight: 700; margin: 0 0 10px; }
.mkt-artisan-bio  { font-size: 12px; color: var(--mkt-muted); line-height: 1.5; margin: 0 0 14px; }
.mkt-artisan-card .mkt-btn { margin-top: auto; }

/* ============================================================
   V2 HOMEPAGE — CULTURE-DRIVEN GLOBAL MARKETPLACE SECTIONS
   ============================================================ */

/* ---- 6. Foods of the World — horizontal cuisine cards (6-up so each
   tile reads as a real food card, not a thumbnail). ---- */
.mkt-cuisine-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1200px) { .mkt-cuisine-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mkt-cuisine-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mkt-cuisine-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--mkt-radius);
  background: var(--mkt-cream-2) center/cover no-repeat;
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mkt-cuisine-card:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow); text-decoration: none; }
.mkt-cuisine-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 85%, rgba(0,0,0,.75) 100%);
}
.mkt-cuisine-card-name {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  text-align: center;
  z-index: 2;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  padding: 0 10px;
}

/* ---- 7. Handmade & Artisan — craft category cards (6-up so each
   product photo is bigger and reads as a curated category). ---- */
.mkt-artisan-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1200px) { .mkt-artisan-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mkt-artisan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mkt-artisan-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--mkt-ink);
  gap: 8px;
}
.mkt-artisan-cat-card:hover { text-decoration: none; color: var(--mkt-orange); }
.mkt-artisan-cat-card:hover .mkt-artisan-cat-photo { transform: translateY(-2px); box-shadow: var(--mkt-shadow); }
.mkt-artisan-cat-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--mkt-radius);
  background: var(--mkt-cream-2) center/cover no-repeat;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.mkt-artisan-cat-badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--mkt-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(31, 41, 55, .12);
}
.mkt-artisan-cat-name { font-size: 13px; font-weight: 700; }

/* ---- 8. Cultural Festivals & Experiences ---- */
.mkt-festival-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1200px) { .mkt-festival-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mkt-festival-grid { grid-template-columns: 1fr; } }
.mkt-festival-card {
  display: flex;
  flex-direction: column;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mkt-festival-card:hover { transform: translateY(-2px); border-color: var(--mkt-orange); box-shadow: var(--mkt-shadow); }
.mkt-festival-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--mkt-cream-2) center/cover no-repeat;
}
.mkt-festival-date {
  position: absolute;
  top: 10px; left: 10px;
  width: 48px;
  background: var(--mkt-paper);
  border-radius: var(--mkt-radius-sm);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(31, 41, 55, .12);
}
.mkt-festival-date-mon {
  background: var(--mkt-orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 0;
}
.mkt-festival-date-day {
  color: var(--mkt-ink);
  font-size: 18px;
  font-weight: 900;
  padding: 4px 0;
}
.mkt-festival-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mkt-festival-name { font-size: 14px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 2px; line-height: 1.25; }
.mkt-festival-meta { font-size: 11px; color: var(--mkt-muted); margin: 0 0 10px; display: inline-flex; align-items: center; }
.mkt-festival-cta { align-self: flex-start; margin-top: auto; }

/* ---- 9. Discover Cultural Stores ---- */
.mkt-store-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1200px) { .mkt-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mkt-store-grid { grid-template-columns: 1fr; } }
.mkt-store-card {
  position: relative;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mkt-store-card:hover { transform: translateY(-2px); border-color: var(--mkt-orange); box-shadow: var(--mkt-shadow); }
.mkt-store-banner {
  aspect-ratio: 16 / 7;
  background: var(--mkt-cream-2) center/cover no-repeat;
}
.mkt-store-logo {
  position: absolute;
  top: 60px;
  left: 14px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mkt-cream-2) center/cover no-repeat;
  border: 3px solid var(--mkt-paper);
  box-shadow: 0 2px 6px rgba(31, 41, 55, .12);
}
.mkt-store-body { padding: 26px 14px 14px; }
.mkt-store-name { font-size: 14px; font-weight: 800; color: var(--mkt-ink); margin: 0 0 3px; }
.mkt-store-meta { font-size: 11px; color: var(--mkt-muted); margin: 0 0 5px; display: inline-flex; align-items: center; }
.mkt-store-stats { font-size: 12px; color: var(--mkt-muted); margin: 0 0 12px; display: inline-flex; align-items: center; gap: 6px; }
.mkt-store-rating { color: var(--mkt-gold); font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.mkt-store-rating i { font-size: 10px; }
.mkt-store-dot { color: var(--mkt-soft); }
.mkt-store-count { font-weight: 600; }
.mkt-store-cta { width: 100%; justify-content: center; }

/* ---- 10. Cultural Collections — image-heavy cards ---- */
.mkt-collection-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1200px) { .mkt-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mkt-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mkt-collection-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--mkt-radius);
  background: var(--mkt-cream-2) center/cover no-repeat;
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mkt-collection-card:hover { transform: translateY(-3px); box-shadow: var(--mkt-shadow); text-decoration: none; }
.mkt-collection-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.75) 100%);
}
.mkt-collection-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  z-index: 2;
  color: #fff;
}
.mkt-collection-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mkt-collection-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
}

/* ============================================================
   V2 SECTION PAGES (Foods, Handmade, Festivals, Stores, Collections)
   Larger 4-up grids for the dedicated "Browse all" catalog pages.
   ============================================================ */
.mkt-section-grid--full.mkt-cuisine-row,
.mkt-section-grid--full.mkt-artisan-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .mkt-section-grid--full.mkt-cuisine-row,
  .mkt-section-grid--full.mkt-artisan-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .mkt-section-grid--full.mkt-cuisine-row,
  .mkt-section-grid--full.mkt-artisan-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Trending Across Cultures full page — 5-up product grid (denser than the
   homepage row since this is the dedicated catalog). */
.mkt-section-grid--product.mkt-product-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) { .mkt-section-grid--product.mkt-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mkt-section-grid--product.mkt-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Festival / store / collection grids on full pages get 4 per row instead
   of the 5 used as a homepage strip. */
.mkt-section-grid--festival.mkt-festival-grid,
.mkt-section-grid--store.mkt-store-grid,
.mkt-section-grid--collection.mkt-collection-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .mkt-section-grid--festival.mkt-festival-grid,
  .mkt-section-grid--store.mkt-store-grid,
  .mkt-section-grid--collection.mkt-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .mkt-section-grid--festival.mkt-festival-grid,
  .mkt-section-grid--store.mkt-store-grid,
  .mkt-section-grid--collection.mkt-collection-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   V2 MARKETPLACE PRODUCT CARD (.mkt-pcard)
   Photo-dominant, no card border, minimal chrome — modeled after
   Lululemon + Macys. Lives alongside the legacy .mkt-product-card
   so the old card stays available outside the marketplace.
   ============================================================ */
.mkt-pcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-pcard-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: var(--mkt-cream-2) center/cover no-repeat;
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s ease;
}
.mkt-pcard-photo:hover { transform: translateY(-2px); text-decoration: none; }

.mkt-pcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--mkt-ink);
  color: #fff;
  padding: 4px 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 4px;
  z-index: 2;
  line-height: 1.2;
}
.mkt-pcard-badge--sale { background: var(--mkt-orange); }
.mkt-pcard-badge--sponsored { background: var(--mkt-gold); }

.mkt-pcard-fav {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--mkt-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(31, 41, 55, .12);
  transition: color .15s ease, background .15s ease, transform .15s ease;
  z-index: 2;
}
.mkt-pcard-fav:hover { color: var(--mkt-orange); background: #fff; transform: scale(1.06); }

.mkt-pcard-body {
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mkt-pcard-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mkt-muted);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-pcard-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mkt-pcard-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--mkt-ink);
  margin: 0;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-pcard-name a,
.mkt-pcard-name a:hover,
.mkt-pcard-name a:focus,
.mkt-pcard-name a:visited {
  color: inherit;
  text-decoration: none;
}
.mkt-pcard-name a:hover { text-decoration: underline; }
.mkt-pcard-price {
  font-size: 13px;
  color: var(--mkt-ink);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  line-height: 1.35;
}
.mkt-pcard-price strong { font-weight: 700; }
.mkt-pcard-price-now {
  color: var(--mkt-orange);
  font-weight: 800;
  display: block;
}
.mkt-pcard-price-old {
  color: var(--mkt-muted);
  text-decoration: line-through;
  font-size: 11px;
  display: block;
}