/* ============================================================
   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 — full-bleed up to 1700px with fluid side gutters that scale
   from 16px on phones to 40px on wide screens, so the clamp() alone covers
   every breakpoint (no per-width media queries needed). */
.mkt-body .container,
.mkt-body .container-fluid {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}
/* Shared dark navy header — leave at its global 1352px rule (matches dekogo
   header). No marketplace-specific override here. */
.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
   ============================================================ */
/* Single-row country filter: chips that don't fit are moved into the
   "More" dropdown by JS, so the row never wraps to a second line. */
.mkt-flags-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.mkt-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mkt-flags-wrap .mkt-flags-row {
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  /* Shrink to the chips that actually fit so no empty gap is left
     between the last chip and the "More" button. */
  flex: 0 1 auto;
}
.mkt-flags-wrap .mkt-flag-chip { flex: 0 0 auto; }
.mkt-flags-more {
  position: relative;
  flex: 0 0 auto;
}
.mkt-flags-more .mkt-flag-chip--more {
  padding: 6px 12px 6px 14px;
  cursor: pointer;
  font-family: inherit;
}
.mkt-flags-more .mkt-flag-chip--more .mkt-icon--ui {
  transition: transform .18s ease;
}
/* Open state: the button reads as the menu's anchor, and the caret flips. */
.mkt-flags-more .mkt-flag-chip--more[aria-expanded="true"] {
  color: var(--mkt-orange);
  border-color: var(--mkt-orange);
  background: var(--mkt-cream-2);
}
.mkt-flags-more .mkt-flag-chip--more[aria-expanded="true"] .mkt-icon--ui {
  transform: rotate(180deg);
}
/* The panel itself never scrolls — only the list inside it does, so the
   "View all countries" footer stays pinned and the scrollbar stops above it. */
.mkt-flags-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  width: 244px;
  padding: 6px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow-lg);
}
.mkt-flags-menu[hidden] { display: none; }
.mkt-flags-menu-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mkt-flags-menu-list::-webkit-scrollbar { width: 6px; }
.mkt-flags-menu-list::-webkit-scrollbar-track { background: transparent; }
.mkt-flags-menu-list::-webkit-scrollbar-thumb {
  background: var(--mkt-border);
  border-radius: 3px;
}
.mkt-flags-menu-list::-webkit-scrollbar-thumb:hover { background: var(--mkt-muted); }
.mkt-flags-menu-list { scrollbar-width: thin; scrollbar-color: var(--mkt-border) transparent; }
/* Chips moved in here by the overflow script become full-width menu rows —
   pills stacked two-per-line left a ragged mosaic with dead space. */
.mkt-flags-menu-list .mkt-flag-chip {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13.5px;
  background: transparent;
  border: 0;
  border-radius: var(--mkt-radius-sm);
  box-shadow: none;
}
.mkt-flags-menu-list .mkt-flag-chip:hover {
  background: var(--mkt-cream-2);
  color: var(--mkt-orange);
  box-shadow: none;
}
.mkt-flags-menu-list:empty { display: none; }
.mkt-flags-menu-all {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-top: 6px;
  padding: 9px 10px 5px;
  border-top: 1px solid var(--mkt-border-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--mkt-orange);
  text-decoration: none;
}
.mkt-flags-menu-all:hover { text-decoration: underline; color: var(--mkt-orange); }

/* Desktop only — on phones the row swipes and this link replaces "More". */
.mkt-flags-all-link { display: none; }

@media (max-width: 767.98px) {
  /* Two chips fit at phone widths, so the row scrolls sideways instead of
     collapsing 20-odd countries behind a dropdown. */
  .mkt-flags-wrap .mkt-flags-row {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mkt-flags-wrap .mkt-flags-row::-webkit-scrollbar { display: none; }
  .mkt-flags-wrap .mkt-flag-chip { scroll-snap-align: start; }
  .mkt-flags-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mkt-orange);
    text-decoration: none;
  }
  .mkt-flags-all-link:hover { color: var(--mkt-orange); text-decoration: underline; }
}

@media (max-width: 575.98px) {
  .mkt-flags-wrap { gap: 6px; }
  .mkt-flags-wrap .mkt-flags-row { gap: 6px; }
  .mkt-flags-menu {
    width: calc(100vw - 24px);
    max-width: 300px;
  }
  .mkt-flags-menu-list { max-height: 45vh; }
}
.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;
}
/* The chips centre themselves while they fit and only start scrolling once
   they don't — space-between used to fling four chips at the far edges of a
   1400px bar with nothing in between. */
.mkt-announce-track {
  flex: 1;
  display: flex;
  gap: clamp(20px, 3.5vw, 52px);
  justify-content: center;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mkt-announce-track::-webkit-scrollbar { display: none; }
/* Once scrolling, left-align so the first chip is reachable. */
.mkt-announce.is-scrollable .mkt-announce-track { justify-content: flex-start; }
.mkt-announce-arrow[hidden] { display: none; }
.mkt-announce-arrow:disabled { opacity: .35; cursor: default; }
.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);
  display: inline-flex;
  pointer-events: none;
}
.mkt-explore-search-icon svg { display: block; }

/* Orange submit button variant */
.mkt-explore-search--btn input { padding-right: 58px; }
.mkt-explore-search-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 34px;
  border: 0;
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.mkt-explore-search-btn svg { display: block; }
.mkt-explore-search-btn:hover { background: var(--mkt-orange-2); }
.mkt-explore-search-btn:active { transform: translateY(-50%) scale(.94); }

/* ---- 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: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .mkt-region-row { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 640px)  { .mkt-region-row { grid-template-columns: repeat(3, 1fr); } }
.mkt-region-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  text-decoration: none;
  color: var(--mkt-text);
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mkt-region-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mkt-shadow-sm);
  border-color: var(--mkt-border);
  text-decoration: none;
  color: var(--mkt-orange);
}
.mkt-region-icon {
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mkt-region-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--mkt-ink);
  white-space: nowrap;
}
.mkt-region-card:hover .mkt-region-name { color: var(--mkt-orange); }

/* ---- 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
   fills the open band between the title column and the hero photo.

   It is decoration, so it paints *behind* the copy (z-index 0 against the
   content's z-index 1). It used to sit above and covered the country "More"
   chip and the tail of the sub-heading at common widths. Vertically centred
   rather than top-anchored so it stays inside that band as the copy grows. */
.mkt-hero-ornament {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(160px, 19vw, 250px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
/* Copy and controls always win over the flourish behind them. */
.mkt-market-hero-content > *:not(.mkt-hero-ornament) {
  position: relative;
  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: -30px;
  width: clamp(160px, 19vw, 240px);
}

/* 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: -30px;
  width: clamp(160px, 19vw, 240px);
}
.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. */
/* overflow visible so the country "More" dropdown isn't clipped; the
   ::before pattern is inset:0 so it stays inside the hero on its own. */
.mkt-market-hero { position: relative; overflow: visible; }
.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;
  /* Nudged right and toned down: at .28 the dots read as speckle *through*
     the sub-heading rather than as texture behind the hero. */
  -webkit-mask: url('../images/world-map.svg') no-repeat 66% 46% / 70% auto;
          mask: url('../images/world-map.svg') no-repeat 66% 46% / 70% auto;
  opacity: .18;
  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: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  min-width: 76px;
  text-decoration: none;
  color: var(--mkt-text);
  border-radius: var(--mkt-radius);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
/* On the market page the chips are a uniform icon-over-label set, so they
   belong on a grid: flex-wrap + space-between spread each wrapped row by a
   different amount, which read as three misaligned rows on a phone. The
   Global page keeps the flex row — its chips are variable-width pills. */
.mkt-market-categories .mkt-category-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  justify-content: center;
  align-items: start;
  gap: 6px;
}
.mkt-category-chip:hover { background: rgba(233, 78, 27, .06); color: var(--mkt-orange); text-decoration: none; transform: translateY(-2px); }
.mkt-category-chip.is-on { background: rgba(233, 78, 27, .10); color: var(--mkt-orange); }
.mkt-category-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mkt-cream-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.mkt-category-name { font-size: 13px; font-weight: 600; white-space: nowrap; text-align: center; }
/* Grid cells get narrow on phones — let the longer labels wrap inside their
   own cell instead of spilling over the neighbouring chip. */
.mkt-market-categories .mkt-category-name { white-space: normal; }

/* Hero "Trusted Sellers" badge */
.mkt-hero-trust {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(4px);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 12px 16px;
  min-width: 210px;
  z-index: 3;
}
.mkt-hero-trust-text strong { display: block; font-size: 14px; font-weight: 800; color: var(--mkt-ink); }
.mkt-hero-trust-text small { font-size: 12px; color: var(--mkt-muted); }
.mkt-hero-trust-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mkt-hero-trust-avatars { display: inline-flex; }
.mkt-hero-trust-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mkt-cream-2) center/cover no-repeat;
  border: 2px solid #fff;
  margin-left: -8px;
  box-shadow: 0 1px 2px rgba(31,41,55,.15);
}
.mkt-hero-trust-avatar:first-child { margin-left: 0; }
.mkt-hero-trust-count { font-size: 12px; font-weight: 700; color: var(--mkt-orange); }
@media (max-width: 600px) { .mkt-hero-trust { position: static; margin-top: 12px; min-width: 0; } }

/* ---- 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;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--mkt-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mkt-pcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--mkt-shadow);
  border-color: var(--mkt-border);
}
.mkt-pcard-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--mkt-cream-2) center/cover no-repeat;
  text-decoration: none;
  overflow: hidden;
}

/* Missing-image placeholder — subtle branded tile instead of a blank box. */
.mkt-pcard-photo--empty {
  background: linear-gradient(135deg, var(--mkt-cream) 0%, var(--mkt-cream-2) 100%);
}
.mkt-pcard-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--mkt-soft);
}
.mkt-pcard-ph-icon { opacity: .8; }
.mkt-pcard-ph-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mkt-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mkt-pcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--mkt-ink);
  color: #fff;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 7px;
  z-index: 2;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(31, 41, 55, .18);
}
.mkt-pcard-badge--best      { background: #E23B3B; }
.mkt-pcard-badge--new       { background: #16A34A; }
.mkt-pcard-badge--sale      { background: var(--mkt-orange); }
.mkt-pcard-badge--top       { background: #1E293B; }
.mkt-pcard-badge--pickup    { background: #15A34A; }
.mkt-pcard-badge--sponsored { background: var(--mkt-gold); color: var(--mkt-ink); }

/* Seller avatar overlapping the photo's bottom-left corner. */
.mkt-pcard-avatar {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mkt-cream-2) center/cover no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(31, 41, 55, .22);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-pcard-avatar-initial {
  font-size: 13px;
  font-weight: 800;
  color: var(--mkt-muted);
}
.mkt-pcard-avatar.is-verified::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #16A34A;
  border: 2px solid #fff;
}

.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: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.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;
}
.mkt-pcard-price-old {
  color: var(--mkt-soft);
  text-decoration: line-through;
  font-size: 11px;
  margin-left: 4px;
}

/* Rating + price row */
.mkt-pcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.mkt-pcard-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mkt-ink);
  white-space: nowrap;
}
.mkt-pcard-rating .fa-star { color: var(--mkt-gold); font-size: 12px; }
.mkt-pcard-rating small { color: var(--mkt-muted); font-weight: 500; }
.mkt-pcard-meta .mkt-pcard-price { margin-left: auto; }

/* Location line */
.mkt-pcard-loc {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: 11.5px;
  color: var(--mkt-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-pcard-loc-icon { flex: 0 0 auto; color: var(--mkt-soft); }

/* Shipping + tag pills */
.mkt-pcard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.mkt-pcard-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}
.mkt-pcard-pill--ship {
  background: var(--mkt-border-soft);
  color: var(--mkt-muted);
}
.mkt-pcard-pill--tag {
  background: rgba(233, 78, 27, .10);
  color: var(--mkt-orange);
}

/* ============================================================
   COMMUNITY MODULES — Events, Garage Sales, Lokal Spotlight
   Restored on every market page per the client doc. Cards reuse
   the festival photo/date-badge language so the market pages
   stay visually consistent.
   ============================================================ */

/* ---------- shared card bits ---------- */
.mkt-event-grid,
.mkt-garage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .mkt-event-grid, .mkt-garage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mkt-event-grid, .mkt-garage-grid { grid-template-columns: 1fr; } }

.mkt-event-card,
.mkt-garage-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-event-card:hover,
.mkt-garage-card:hover { transform: translateY(-2px); border-color: var(--mkt-orange); box-shadow: var(--mkt-shadow); }

.mkt-event-photo,
.mkt-garage-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--mkt-cream-2) center/cover no-repeat;
}

/* Market / community tag in the photo corner */
.mkt-event-tag {
  position: absolute;
  right: 10px; bottom: 10px;
  background: rgba(31, 41, 55, .82);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: var(--mkt-radius-pill);
}

.mkt-event-body,
.mkt-garage-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.mkt-event-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mkt-ink);
  line-height: 1.32;
}
.mkt-event-meta {
  margin: 0;
  font-size: 12px;
  color: var(--mkt-muted);
  display: flex;
  align-items: center;
}
.mkt-event-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mkt-event-price { font-size: 13px; font-weight: 800; color: var(--mkt-ink); }

.mkt-garage-type {
  align-self: flex-start;
  background: var(--mkt-cream-2);
  color: var(--mkt-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--mkt-radius-pill);
}
.mkt-garage-distance { color: var(--mkt-orange); font-weight: 700; }

/* ---------- Lokal Spotlight ---------- */
.mkt-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 840px) { .mkt-spotlight-grid { grid-template-columns: 1fr; } }

.mkt-spotlight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mkt-spotlight-card:hover { transform: translateY(-2px); border-color: var(--mkt-gold); box-shadow: var(--mkt-shadow); }

.mkt-spotlight-media {
  position: relative;
  height: 132px;
  background: var(--mkt-cream-2) center/cover no-repeat;
}
.mkt-spotlight-avatar {
  position: absolute;
  left: 20px; bottom: -32px;
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--mkt-paper);
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-spotlight-fav { top: 12px; right: 12px; }

.mkt-spotlight-body { padding: 44px 20px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mkt-spotlight-name { margin: 0; font-size: 17px; font-weight: 800; color: var(--mkt-ink); }
.mkt-spotlight-role { margin: 0; font-size: 12.5px; color: var(--mkt-muted); }
.mkt-spotlight-quote {
  margin: 4px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--mkt-gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--mkt-ink);
  line-height: 1.5;
}
.mkt-spotlight-bio { margin: 0; font-size: 13px; color: var(--mkt-muted); line-height: 1.55; }
.mkt-spotlight-body .mkt-btn { align-self: flex-start; margin-top: 8px; }
.mkt-spotlight-more { display: flex; justify-content: center; margin-top: 18px; }

/* ---------- Garage sale detail page ---------- */
.mkt-gs-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .mkt-gs-detail { grid-template-columns: 1fr; } }

.mkt-gs-hero {
  position: relative;
  aspect-ratio: 16 / 7;
  background: var(--mkt-cream-2) center/cover no-repeat;
  border-radius: var(--mkt-radius-lg);
  margin-bottom: 18px;
}
.mkt-gs-hero .mkt-garage-type { position: absolute; top: 14px; left: 14px; background: var(--mkt-paper); }
.mkt-gs-title { margin: 0 0 10px; font-size: 28px; font-weight: 800; color: var(--mkt-ink); }
.mkt-gs-desc { font-size: 14.5px; color: var(--mkt-muted); line-height: 1.65; }

.mkt-gs-box {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 20px;
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-gs-box-title { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--mkt-ink); }
.mkt-gs-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--mkt-border-soft); }
.mkt-gs-row:first-of-type { border-top: 0; }
.mkt-gs-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mkt-soft); }
.mkt-gs-value { font-size: 14px; color: var(--mkt-ink); }
.mkt-gs-map { width: 100%; justify-content: center; margin-top: 16px; }

/* Empty-state line shared by the hub pages */
.mkt-empty { padding: 40px 0; text-align: center; color: var(--mkt-muted); font-size: 14.5px; }

/* ============================================================
   GLOBAL MARKET — cross-market discovery hub (layout: global)
   ============================================================ */
.mkt-global-hero {
  background-size: cover;
  background-position: center;
  padding: 46px 0 54px;
  color: #fff;
}
.mkt-crumbs--onphoto, .mkt-crumbs--onphoto a { color: rgba(255,255,255,.85); }
.mkt-crumbs--onphoto strong { color: #fff; }

.mkt-global-hero-inner { max-width: 760px; }
.mkt-global-hero-title {
  margin: 14px 0 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 46px;
  font-weight: 700;
  color: #fff;
}
@media (max-width: 640px) { .mkt-global-hero-title { font-size: 34px; } }
.mkt-global-hero-sub { font-size: 16px; color: rgba(255,255,255,.9); line-height: 1.6; margin-bottom: 20px; }

.mkt-global-search { display: flex; gap: 8px; max-width: 560px; }
.mkt-global-search input {
  flex: 1;
  border: 0;
  border-radius: var(--mkt-radius-pill);
  padding: 12px 20px;
  font-size: 14px;
  background: #fff;
  color: var(--mkt-ink);
}
.mkt-global-search input:focus { outline: 2px solid var(--mkt-gold); }

.mkt-global-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; font-size: 13.5px; color: rgba(255,255,255,.88); }
.mkt-global-stats strong { font-size: 18px; color: #fff; display: block; }

.mkt-global-chip-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.mkt-global-chips .mkt-category-chip { flex-direction: row; align-items: center; }

/* ---- body grid: content + sidebar ---- */
.mkt-global-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .mkt-global-body { grid-template-columns: 1fr; } }

/* ---- Featured Global Sellers rail ----
   Two cards to a view; anything beyond that scrolls sideways under the
   arrows. grid-auto-columns is sized off the viewport rather than 1fr so a
   short list still lays out as halves instead of stretching to full width. */
.mkt-seller-rail { position: relative; }
.mkt-seller-rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 9px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.mkt-seller-rail-track::-webkit-scrollbar { display: none; }
.mkt-seller-rail-track > .mkt-empty { grid-column: 1 / -1; }
@media (max-width: 720px) { .mkt-seller-rail-track { grid-auto-columns: calc(100% - 4px); } }

.mkt-seller-rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--mkt-border-soft);
  border-radius: 50%;
  background: var(--mkt-paper);
  color: var(--mkt-ink);
  box-shadow: 0 2px 8px rgba(31, 41, 55, .12);
  cursor: pointer; z-index: 3;
  transition: color .15s ease, border-color .15s ease;
}
.mkt-seller-rail-nav:hover { color: var(--mkt-orange); border-color: var(--mkt-orange); }
.mkt-seller-rail-nav[hidden] { display: none; }
.mkt-seller-rail-nav--prev { left: -15px; }
.mkt-seller-rail-nav--next { right: -15px; }

.mkt-global-seller-card {
  position: relative;
  scroll-snap-align: start;
  display: flex; gap: 16px; padding: 18px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mkt-global-seller-card:hover { border-color: var(--mkt-orange); box-shadow: var(--mkt-shadow); }

/* Logos are merchant uploads of every shape, so the tile contains rather than
   crops — a cropped wordmark is unreadable at this size. */
.mkt-global-seller-logo {
  width: 86px; height: 86px; flex: 0 0 86px;
  border-radius: 10px;
  background-color: var(--mkt-cream-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
  display: grid; place-items: center;
  text-decoration: none;
}
.mkt-global-seller-initial { font-size: 30px; font-weight: 800; color: var(--mkt-orange); }

.mkt-global-seller-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mkt-global-seller-name { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.mkt-global-seller-name a { color: var(--mkt-ink); text-decoration: none; }
.mkt-global-seller-name a:hover { color: var(--mkt-orange); }

/* Room for the heart so a long store name never runs under it. */
.mkt-global-seller-info > *:first-child { padding-right: 26px; }

.mkt-global-seller-meta { margin: 0; font-size: 12.5px; color: var(--mkt-muted); line-height: 1.5; }
.mkt-global-seller-market {
  color: var(--mkt-orange);
  font-weight: 800; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
}
.mkt-global-seller-market:hover { color: var(--mkt-orange); text-decoration: underline; }
.mkt-global-seller-dot { color: var(--mkt-soft); margin: 0 3px; }

.mkt-global-seller-rating { margin: 0; font-size: 12.5px; color: var(--mkt-ink); }
.mkt-global-seller-rating span { color: var(--mkt-muted); }
.mkt-global-seller-star { vertical-align: -2px; margin-right: 2px; }

.mkt-global-seller-cta {
  align-self: flex-start; margin-top: 9px;
  padding: 8px 18px;
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-paper);
  color: var(--mkt-ink);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.mkt-global-seller-cta:hover { color: var(--mkt-orange); border-color: var(--mkt-orange); }

.mkt-global-seller-fav {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--mkt-soft);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.mkt-global-seller-fav:hover { color: var(--mkt-orange); transform: scale(1.08); }
.mkt-global-seller-fav.is-following { color: var(--mkt-orange); }
.mkt-global-seller-fav.is-following path { fill: currentColor; }
.mkt-global-seller-fav.is-busy { opacity: .5; pointer-events: none; }

/* Market tag chip used on product + seller cards */
.mkt-market-tag {
  display: inline-block;
  background: var(--mkt-cream-2);
  color: var(--mkt-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--mkt-radius-pill);
  text-decoration: none;
}
.mkt-global-product { position: relative; }
.mkt-market-tag--card { margin-top: 6px; }
.mkt-global-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mkt-global-product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .mkt-global-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- sidebar ---- */
.mkt-global-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.mkt-global-side-box {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 18px;
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-global-side-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--mkt-ink); }
.mkt-global-market-list { list-style: none; margin: 0; padding: 0; }
.mkt-global-market-list li { border-top: 1px solid var(--mkt-border-soft); }
.mkt-global-market-list li:first-child { border-top: 0; }
.mkt-global-market-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; font-size: 13.5px; color: var(--mkt-ink); text-decoration: none;
}
.mkt-global-market-list a:hover { color: var(--mkt-orange); }
.mkt-global-market-name { display: flex; align-items: center; }
.mkt-global-market-count {
  background: var(--mkt-cream-2); color: var(--mkt-muted);
  font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: var(--mkt-radius-pill);
}
.mkt-global-props { margin: 0 0 14px; padding-left: 18px; font-size: 13px; color: var(--mkt-muted); line-height: 1.8; }

/* ---- trending banner ---- */
.mkt-global-trending-banner {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: center;
  background: linear-gradient(135deg, var(--mkt-cream-2), var(--mkt-paper));
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 22px;
}
@media (max-width: 900px) { .mkt-global-trending-banner { grid-template-columns: 1fr; } }
.mkt-global-trending-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--mkt-ink); }
.mkt-global-trending-head p { font-size: 13.5px; color: var(--mkt-muted); margin-bottom: 12px; }
.mkt-global-trending-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.mkt-global-trending-item { flex: 0 0 128px; text-decoration: none; }
.mkt-global-trending-photo {
  display: block; width: 128px; height: 128px;
  border-radius: var(--mkt-radius);
  background: var(--mkt-cream-2) center/cover no-repeat;
  margin-bottom: 7px;
}
.mkt-global-trending-name { display: block; font-size: 12.5px; color: var(--mkt-ink); line-height: 1.35; }
.mkt-global-trending-price { display: block; font-size: 13px; font-weight: 800; color: var(--mkt-orange); }

/* ---- footer CTA ---- */
.mkt-global-cta {
  text-align: center;
  background: linear-gradient(135deg, #0F1B33, #1E3A5F);
  border-radius: var(--mkt-radius-lg);
  padding: 44px 24px;
  color: #fff;
}
.mkt-global-cta h2 { margin: 0 0 8px; font-family: 'Playfair Display', Georgia, serif; font-size: 32px; color: #fff; }
.mkt-global-cta p { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 18px; }

/* ============================================================
   MARKET FILTER BAR — search + facets on each market page
   ============================================================ */
/* Contained card instead of a flat full-width band. */
.mkt-filters { background: transparent; border: 0; padding: 10px 0 24px; }
.mkt-filters > .container {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-sm);
  padding-top: 18px;
  padding-bottom: 18px;
}

.mkt-filter-search { display: flex; gap: 8px; max-width: 520px; margin-bottom: 14px; }
.mkt-filter-search input {
  flex: 1;
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  padding: 9px 16px;
  font-size: 13.5px;
  background: var(--mkt-cream);
  color: var(--mkt-ink);
}
.mkt-filter-search input:focus { outline: none; border-color: var(--mkt-orange); }

.mkt-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mkt-filter-spacer { flex: 1 1 auto; }

.mkt-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mkt-cream);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mkt-ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.mkt-filter-btn:hover { border-color: var(--mkt-orange); color: var(--mkt-orange); text-decoration: none; }
.mkt-filter-btn.is-on { background: var(--mkt-orange); border-color: var(--mkt-orange); color: #fff; }
.mkt-filter-caret { font-size: 10px; opacity: .7; }

.mkt-filter-drop { position: relative; }
.mkt-filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 200px; max-height: 320px; overflow-y: auto;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 6px;
  z-index: 40;
}
.mkt-filter-drop--right .mkt-filter-menu { left: auto; right: 0; }
.mkt-filter-drop.is-open .mkt-filter-menu { display: block; }
.mkt-filter-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--mkt-radius-sm);
  font-size: 13px;
  color: var(--mkt-ink);
  text-decoration: none;
}
.mkt-filter-menu a:hover { background: var(--mkt-cream-2); color: var(--mkt-orange); }
.mkt-filter-menu a.is-on { background: var(--mkt-cream-2); color: var(--mkt-orange); font-weight: 700; }
.mkt-filter-menu img { width: 18px; border-radius: 2px; }

.mkt-filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mkt-border-soft); }
.mkt-filter-count { font-size: 13px; font-weight: 700; color: var(--mkt-muted); margin-right: 4px; }
.mkt-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mkt-cream-2);
  border-radius: var(--mkt-radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mkt-ink);
  text-decoration: none;
}
.mkt-filter-chip:hover { background: var(--mkt-orange); color: #fff; text-decoration: none; }
.mkt-filter-chip span { opacity: .6; font-weight: 800; }
.mkt-filter-clear { font-size: 12.5px; font-weight: 700; color: var(--mkt-orange); text-decoration: underline; }

/* Selected state for the hero country chips + category chips */
.mkt-flag-chip.is-on { background: var(--mkt-orange); border-color: var(--mkt-orange); color: #fff; }
.mkt-flag-chip.is-on span { color: #fff; }
.mkt-category-chip.is-on { border-color: var(--mkt-orange); background: var(--mkt-cream-2); }
.mkt-category-chip.is-on .mkt-category-name { color: var(--mkt-orange); font-weight: 700; }

/* ============================================================
   SELLER LISTING FORM — /marketplace/sell/list-item
   ============================================================ */
.mkt-listing-head { max-width: 720px; margin-bottom: 22px; }
.mkt-listing-title { margin: 12px 0 6px; font-family: 'Playfair Display', Georgia, serif; font-size: 36px; font-weight: 700; color: var(--mkt-ink); }
.mkt-listing-sub { font-size: 15px; color: var(--mkt-muted); line-height: 1.6; }

.mkt-alert { border-radius: var(--mkt-radius); padding: 13px 16px; font-size: 14px; margin-bottom: 18px; }
.mkt-alert--ok  { background: #DCFCE7; border: 1px solid #86EFAC; color: #166534; }
.mkt-alert--err { background: #FEE2E2; border: 1px solid #FCA5A5; color: #991B1B; }
.mkt-alert ul { margin: 6px 0 0; padding-left: 18px; }

.mkt-listing-form { max-width: 860px; }
.mkt-lf-block {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  padding: 22px 24px 24px;
  margin-bottom: 18px;
}
.mkt-lf-block legend {
  width: auto; float: none;
  font-size: 15px; font-weight: 800; color: var(--mkt-ink);
  padding: 0 8px; margin-bottom: 6px;
}

.mkt-lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mkt-lf-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .mkt-lf-grid { grid-template-columns: 1fr; } }

.mkt-lf-grid label { display: block; font-size: 12.5px; font-weight: 700; color: var(--mkt-ink); margin-bottom: 5px; }
.mkt-lf-grid .req { color: var(--mkt-orange); }
.mkt-lf-grid .opt { color: var(--mkt-soft); font-weight: 500; }

.mkt-lf-grid input[type=text], .mkt-lf-grid input[type=number], .mkt-lf-grid input[type=file],
.mkt-lf-grid select, .mkt-lf-grid textarea {
  width: 100%;
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  background: var(--mkt-cream);
  color: var(--mkt-ink);
  font-family: inherit;
}
.mkt-lf-grid input:focus, .mkt-lf-grid select:focus, .mkt-lf-grid textarea:focus {
  outline: none; border-color: var(--mkt-orange); background: var(--mkt-paper);
}
.mkt-lf-grid textarea { resize: vertical; min-height: 84px; }
.mkt-lf-hint { font-size: 11.5px; color: var(--mkt-soft); margin: 4px 0 0; }

.mkt-lf-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mkt-lf-check {
  display: inline-flex !important; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500 !important; color: var(--mkt-ink);
  margin-bottom: 0 !important; cursor: pointer;
}
.mkt-lf-check input { width: auto !important; }
.mkt-lf-check--all { font-weight: 800 !important; color: var(--mkt-orange); }

.mkt-lf-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mkt-lf-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: var(--mkt-radius-sm); border: 1px solid var(--mkt-border); }
.mkt-lf-thumb.is-main { border: 2px solid var(--mkt-orange); }

.mkt-lf-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Seller story — shop-level (ecommerce_stores.about) with an optional
   per-item override on the product (ecommerce_products.seller_story). */
.mkt-pd-seller-story,
.mkt-store-story {
  margin: 12px 0 0;
  padding-left: 13px;
  border-left: 3px solid var(--mkt-gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mkt-ink);
}
.mkt-store-story { margin: 0 0 12px; font-size: 15px; max-width: 620px; }

/* ============================================================
   Empty states + the shared sign-in confirmation dialog.

   Every marketplace grid renders an .mkt-empty line instead of a
   blank void when its table has no rows yet, and every action that
   needs an account routes through .mkt-modal rather than the
   browser's native confirm().
   ============================================================ */

.mkt-empty {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  font-size: 15px;
  color: var(--mkt-muted);
  background: var(--mkt-paper);
  border: 1px dashed var(--mkt-border);
  border-radius: var(--mkt-radius);
}
/* Links inside an empty state were falling through to the browser's default
   blue, which was the one blue thing on an otherwise cream/orange page. */
.mkt-empty a {
  color: var(--mkt-orange);
  font-weight: 700;
  text-decoration: underline;
}
.mkt-empty a:hover { color: var(--mkt-orange); text-decoration: none; }

.mkt-modal-open { overflow: hidden; }

.mkt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(31, 41, 55, .55);
}
.mkt-modal-backdrop[hidden] { display: none; }

.mkt-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 26px 22px;
  background: var(--mkt-paper);
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-lg);
  text-align: center;
}
.mkt-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--mkt-soft);
  cursor: pointer;
}
.mkt-modal-close:hover { color: var(--mkt-ink); }
.mkt-modal-title  { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--mkt-ink); }
.mkt-modal-body   { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--mkt-muted); }
.mkt-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.mkt-modal-actions .mkt-btn { min-width: 130px; justify-content: center; }

@media (max-width: 480px) {
  .mkt-modal { padding: 24px 18px 18px; }
  .mkt-modal-actions .mkt-btn { width: 100%; }
}

/* ============================================================
   Wishlist heart — outline by default, filled coral once saved.
   The icon is inline SVG so `currentColor` and `fill` can carry
   the state; the previous Icons8 PNG could not.
   ============================================================ */

.mkt-fav .mkt-fav-icon {
  display: block;
  transition: transform .15s ease, fill .15s ease;
}
.mkt-fav:hover .mkt-fav-icon { transform: scale(1.1); }

/* Saved: filled heart in the marketplace coral. */
.mkt-fav.is-saved { color: var(--mkt-orange); }
.mkt-fav.is-saved .mkt-fav-icon path { fill: currentColor; }
.mkt-fav.is-saved:hover { color: var(--mkt-orange-2); }

/* In flight — dim it and swallow further clicks. */
.mkt-fav.is-busy { opacity: .55; pointer-events: none; }

/* A saved heart gets a brief pop so the toggle is legible. */
.mkt-fav.is-saved .mkt-fav-icon { animation: mktFavPop .22s ease; }
@keyframes mktFavPop {
  0%   { transform: scale(.8); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ============================================================
   "Load More" button — paginated results grids (search, etc.)
   ============================================================ */
.mkt-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.mkt-loadmore .mkt-btn[disabled] {
    opacity: .6;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   Section toolbar — filters (left) + count / sort / view (right)
   ============================================================ */
.mkt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mkt-toolbar .mkt-explore-filters { flex: 1 1 auto; }

.mkt-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.mkt-toolbar-count {
  font-size: 14px;
  color: var(--mkt-ink);
  white-space: nowrap;
}
.mkt-toolbar-count strong { color: var(--mkt-orange); font-weight: 800; }

/* Sort dropdown */
.mkt-sort { position: relative; }
.mkt-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mkt-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mkt-sort-btn:hover { border-color: var(--mkt-soft); }
.mkt-sort-current { color: var(--mkt-orange); }
.mkt-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 6px;
  z-index: 20;
}
.mkt-sort-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--mkt-text);
  text-decoration: none;
  border-radius: var(--mkt-radius-sm);
  white-space: nowrap;
}
.mkt-sort-item:hover { background: var(--mkt-cream-2); color: var(--mkt-ink); }
.mkt-sort-item.is-active { color: var(--mkt-orange); font-weight: 700; }

/* List view — one product per row.

   The section-page grid/list toggle was removed, but the store page
   (website/marketplace/store.blade.php) has its own ?view=list switch and puts
   .is-list on this same grid, so these rules stay. */
.mkt-product-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mkt-product-grid.is-list .mkt-pcard {
  flex-direction: row;
  align-items: stretch;
}
.mkt-product-grid.is-list .mkt-pcard-photo {
  flex: 0 0 220px;
  aspect-ratio: auto;
}
.mkt-product-grid.is-list .mkt-pcard-body {
  flex: 1 1 auto;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 560px) {
  .mkt-toolbar-controls { width: 100%; justify-content: space-between; }
  .mkt-toolbar-count { display: none; }
  .mkt-product-grid.is-list .mkt-pcard-photo { flex-basis: 130px; }
}

/* ============================================================
   Explore — "More Filters" button + dropdown
   ============================================================ */
.mkt-morefilters { position: relative; }
.mkt-filter-tab--more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
}
.mkt-morefilters-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 8px;
  z-index: 30;
}
.mkt-morefilters-label {
  display: block;
  padding: 4px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mkt-soft);
}
.mkt-morefilters-menu a {
  display: block;
  padding: 9px 10px;
  font-size: 13.5px;
  color: var(--mkt-text);
  text-decoration: none;
  border-radius: var(--mkt-radius-sm);
}
.mkt-morefilters-menu a:hover { background: var(--mkt-cream-2); color: var(--mkt-orange); }

/* ============================================================
   ALL REGIONS page
   ============================================================ */
.mkt-regions-head-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
}
.mkt-regions-head .mkt-explore-search { margin-bottom: 0; }
.mkt-regions-head-map {
  min-height: 200px;
  background: radial-gradient(circle, rgba(233,78,27,.16) 1.4px, transparent 1.4px) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 55%, transparent 78%);
  opacity: .8;
}
@media (max-width: 900px) { .mkt-regions-head-grid { grid-template-columns: 1fr; } .mkt-regions-head-map { display: none; } }

.mkt-rcard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1080px) { .mkt-rcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mkt-rcard-grid { grid-template-columns: 1fr; } }

.mkt-rcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 190px;
  padding: 22px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-sm);
  text-decoration: none;
  color: var(--mkt-text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mkt-rcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--mkt-shadow);
  border-color: var(--mkt-border);
  text-decoration: none;
}
.mkt-rcard-top { display: flex; align-items: flex-start; gap: 14px; }
.mkt-rcard-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}
.mkt-rcard-name { margin: 2px 0 6px; font-size: 17px; font-weight: 800; color: var(--mkt-ink); }
.mkt-rcard-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--mkt-muted); }
.mkt-rcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--mkt-border-soft);
}
.mkt-rcard-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mkt-ink);
}
.mkt-rcard-count svg { color: var(--mkt-soft); }
.mkt-rcard-arrow { color: var(--mkt-muted); display: inline-flex; transition: transform .15s ease, color .15s ease; }
.mkt-rcard:hover .mkt-rcard-arrow { color: var(--mkt-orange); transform: translateX(3px); }

/* Value props strip */
.mkt-regions-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 22px;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-sm);
}
@media (max-width: 900px) { .mkt-regions-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mkt-regions-values { grid-template-columns: 1fr; } }
.mkt-rvalue { display: flex; align-items: flex-start; gap: 12px; }
.mkt-rvalue-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.mkt-rvalue-icon--orange { background: rgba(233, 78, 27, .10); }
.mkt-rvalue-icon--green  { background: rgba(22, 163, 74, .12); }
.mkt-rvalue-icon--purple { background: rgba(124, 92, 214, .12); }
.mkt-rvalue strong { display: block; font-size: 14px; color: var(--mkt-ink); margin-bottom: 2px; }
.mkt-rvalue small  { font-size: 12.5px; color: var(--mkt-muted); line-height: 1.4; }

/* ============================================================
   ALL COUNTRIES page
   ============================================================ */
.mkt-countries-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mkt-countries-controls .mkt-explore-search { margin-bottom: 0; flex: 1 1 320px; }

.mkt-countries-split {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .mkt-countries-split { grid-template-columns: 1fr; } }

.mkt-countries-side {
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-sm);
  padding: 14px;
  position: sticky;
  top: 16px;
}
.mkt-countries-side-title {
  font-size: 13px; font-weight: 700; color: var(--mkt-muted);
  padding: 6px 10px 10px; margin: 0;
}
.mkt-countries-regions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mkt-creg {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--mkt-radius);
  text-decoration: none; color: var(--mkt-text); transition: background .15s ease, color .15s ease;
}
.mkt-creg:hover { background: var(--mkt-cream-2); }
.mkt-creg.is-active { background: var(--mkt-ink); color: #fff; }
.mkt-creg-emoji { font-size: 17px; line-height: 1; flex: 0 0 auto; }
.mkt-creg-name { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; }
.mkt-creg-count {
  font-size: 12px; font-weight: 700; color: var(--mkt-muted);
  background: var(--mkt-cream-2); padding: 2px 9px; border-radius: 999px;
}
.mkt-creg.is-active .mkt-creg-count { background: rgba(255,255,255,.16); color: #fff; }

.mkt-countries-count { font-size: 15px; font-weight: 700; color: var(--mkt-ink); margin: 4px 0 16px; }

.mkt-cgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .mkt-cgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .mkt-cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .mkt-cgrid { grid-template-columns: 1fr; } }

.mkt-ccard {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft); border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow-sm); text-decoration: none; color: var(--mkt-text);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mkt-ccard:hover { transform: translateY(-2px); box-shadow: var(--mkt-shadow); border-color: var(--mkt-border); text-decoration: none; }
.mkt-ccard-flag {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  overflow: hidden; background: var(--mkt-cream-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mkt-border-soft);
}
.mkt-ccard-flag img { width: 100%; height: 100%; object-fit: cover; }
.mkt-ccard-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mkt-ccard-name { font-size: 14px; font-weight: 700; color: var(--mkt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-ccard-region { font-size: 12px; color: var(--mkt-muted); }
.mkt-ccard-arrow { color: var(--mkt-soft); flex: 0 0 auto; transition: transform .15s ease, color .15s ease; }
.mkt-ccard:hover .mkt-ccard-arrow { color: var(--mkt-orange); transform: translateX(2px); }

/* Pagination */
.mkt-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.mkt-pager-btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mkt-border); border-radius: var(--mkt-radius-sm);
  background: var(--mkt-paper); color: var(--mkt-text);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mkt-pager-btn:hover { border-color: var(--mkt-soft); }
.mkt-pager-btn.is-active { background: var(--mkt-ink); color: #fff; border-color: var(--mkt-ink); }
.mkt-pager-btn.is-disabled { opacity: .45; pointer-events: none; }
.mkt-pager-gap { padding: 0 4px; color: var(--mkt-soft); }

/* Trending-market card review count */
.mkt-trending-reviews { color: var(--mkt-muted); font-weight: 500; font-size: 11px; margin-left: 1px; }

/* Market hero "More" flag toggle button */
.mkt-market-hero button.mkt-flag-chip--more {
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

/* Market hero country "More" dropdown */
.mkt-flag-more { position: relative; display: inline-flex; }
.mkt-market-hero button.mkt-flag-chip--more {
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center;
}
.mkt-flag-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 210px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--mkt-paper);
  border: 1px solid var(--mkt-border-soft);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-shadow);
  padding: 6px;
}
.mkt-flag-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--mkt-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mkt-text);
  text-decoration: none;
  white-space: nowrap;
}
.mkt-flag-menu-item:hover { background: var(--mkt-cream-2); color: var(--mkt-orange); }
.mkt-flag-menu-item.is-on { color: var(--mkt-orange); }
.mkt-flag-menu-item .mkt-flag-img { width: 22px; height: 16px; border-radius: 3px; flex: 0 0 auto; }