/*
 * CL-280 GI District Map - home section styles (docs/gimap/DESIGN.md).
 * Every rule is scoped under .gi-map-section; colour lives only in the tokens below. The accent is the
 * storefront's brand maroon (#5B1F2A, .trendingcollection / .btn-danger). Red is not used: a map is not urgent.
 * Layout (porting guide Step 9): map centred on the page's centre line, max 680px; carousel full width beneath.
 */
.gi-map-section {
  --gi-fill: #ece6e1;
  --gi-fill-has: #cf9f8c;
  --gi-hover: #a8604b;
  --gi-active: #5B1F2A;
  --gi-stroke: #ffffff;
  --gi-off: #f6f3f0;
  --gi-ink: #2f231d;
  --gi-muted: #5f544d;
  --gi-line: #e3d8cf;
  --gi-focus: #1a4f8a;
  --gi-paper: #ffffff;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

.gi-map-section *,
.gi-map-section *::before,
.gi-map-section *::after {
  box-sizing: border-box;
}

.gi-map-section .gi-map-inner {
  padding: 24px 0 8px;
  color: var(--gi-ink);
}

.gi-map-section .gi-map-inner[hidden] {
  display: none;
}

/* The site's heading classes give font and colour; centre it so its underline spans only the text (guide Step 9). */
.gi-map-section h2.gi-map-heading.trendingcollection {
  display: table;
  margin: 0 auto !important;
  text-align: center;
}

.gi-map-section p.gi-map-sub.trendingcollection-inner {
  margin: 4px auto 0 !important;
  max-width: 680px;
  text-align: center;
}

.gi-map-section .gi-map-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  max-width: 680px;
}

.gi-map-section .gi-map-label {
  margin: 0;
  font-weight: 700;
  color: var(--gi-ink);
}

.gi-map-section .gi-map-state {
  min-width: 0;
  width: 100%;
  max-width: 320px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--gi-line);
  border-radius: 6px;
  background: var(--gi-paper);
  color: var(--gi-ink);
  font-size: 16px;
}

.gi-map-section .gi-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 12px auto 0;
  font-size: 13px;
  color: var(--gi-muted);
}

.gi-map-section .gi-map-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gi-map-section .gi-map-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gi-muted);
  border-radius: 3px;
  background: var(--gi-fill);
}

.gi-map-section .gi-map-swatch-has {
  background: var(--gi-fill-has);
}

.gi-map-section .gi-map-container {
  width: 100%;
  max-width: 680px;
  margin: 12px auto 0;
}

.gi-map-section .gi-map-container svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gi-map-section .gi-district,
.gi-map-section .gi-district-off {
  stroke: var(--gi-stroke);
  stroke-width: 0.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.gi-map-section .gi-district-off {
  fill: var(--gi-off);
}

.gi-map-section .gi-district {
  fill: var(--gi-fill);
  cursor: pointer;
  transition: fill 0.15s ease-in-out;
  outline: none;
}

.gi-map-section .gi-district.has-products {
  fill: var(--gi-fill-has);
}

.gi-map-section .gi-district:hover {
  fill: var(--gi-hover);
}

.gi-map-section .gi-district.active {
  fill: var(--gi-active);
}

/* An SVG path takes no outline in every browser; the ring is a stroke (and, drawn over the neighbours, the
   overlay's .gi-district-focus copy). */
.gi-map-section .gi-district:focus-visible {
  stroke: var(--gi-focus);
  stroke-width: 3;
}

/* Drawn last, over every neighbour, so the chosen district's border is never covered. Not interactive. */
.gi-map-section .gi-district-outline {
  fill: none;
  stroke: var(--gi-ink);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.gi-map-section .gi-district-focus {
  fill: none;
  stroke: var(--gi-focus);
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.gi-map-section .gi-map-status {
  margin: 8px auto 0;
  min-height: 1.4em;
  text-align: center;
  font-size: 14px;
  color: var(--gi-muted);
}

.gi-map-section .gi-map-panel {
  width: 100%;
  margin: 8px 0 0;
}

.gi-map-section .gi-map-district-heading {
  display: table;
  margin: 8px auto 0;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--gi-active);
  font-size: 20px;
  font-weight: 700;
  color: var(--gi-active);
  text-align: center;
}

.gi-map-section .gi-map-district-heading[hidden] {
  display: none;
}

.gi-map-section .gi-map-panel-msg {
  margin: 12px auto;
  text-align: center;
  font-size: 15px;
  color: var(--gi-muted);
}

.gi-map-section .gi-map-panel-msg.is-error {
  color: var(--gi-ink);
  font-weight: 700;
}

.gi-map-section .gi-map-cards {
  width: 100%;
  margin-top: 12px;
}

.gi-map-section .gi-map-cards .owl-carousel {
  width: 100%;
}

/* A short row (fewer cards than fit) sits centred; a long one starts at the left as Owl lays it out. */
.gi-map-section .gi-map-cards .owl-stage {
  margin: 0 auto;
}

/* The arrows: a centred row beneath the cards (the site-wide .owl-nav is absolute above the carousel, where the
   district heading sits; side arrows at negative offsets would overflow a 320px screen). */
.gi-map-section .gi-map-cards .owl-carousel .owl-nav {
  position: static;
  top: auto;
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 12px 0 0;
}

.gi-map-section .gi-map-cards .owl-carousel .owl-nav.disabled {
  display: none;
}

.gi-map-section .gi-map-cards .owl-carousel .owl-nav button.owl-prev,
.gi-map-section .gi-map-cards .owl-carousel .owl-nav button.owl-next {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gi-active);
  color: var(--gi-paper);
  text-indent: 0;
  transform: none;
}

.gi-map-section .gi-map-cards .owl-carousel .owl-nav button.disabled {
  opacity: 0.35;
  cursor: default;
}

.gi-map-section .gi-map-cards .owl-carousel .owl-nav button:focus-visible {
  outline: 3px solid var(--gi-focus);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .gi-map-section .gi-map-inner {
    padding-top: 16px;
  }

  .gi-map-section .gi-map-district-heading {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-map-section .gi-district {
    transition: none;
  }
}