/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Override Bootstrap's default font stack with Onest */
:root {
  --bs-body-font-family: "Retail", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-weight: 400;
  --accent-rgb: 255, 68, 90;
  --accent-hex: #FF445A;
  --accent-hsl: hsl(353, 100%, 60%);;
  --grey-rgb: 89, 89, 89;
  --grey-hex: #595959;
  --bs-dark-rgb: var(--accent-rgb);
  text-rendering: geometricPrecision;
  font-variant-numeric: oldstyle-nums;
}

.turbo-progress-bar {
  height: 5px;
  background-color: #fff;
}

/* Bootstrap resets .popover and .tooltip to its own system font stack; bring
   them back in line with the body font. */
.popover,
.tooltip {
  font-family: var(--bs-body-font-family);
}

.pagination {
  --bs-pagination-active-bg: var(--accent-hex);
  --bs-pagination-active-border-color: var(--accent-hex);
}

.btn {
  --bs-btn-disabled-bg: hsl(from var(--accent-hsl) h s calc(l + 10));
  --bs-btn-disabled-border-color: hsl(from var(--accent-hsl) h s calc(l + 10));
  white-space: nowrap;
}

a:not(.btn):link {
  color: var(--accent-hex);
}

a:not(.btn):visited {
  color: hsl(from var(--accent-hsl) h s calc(l + 17));
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-hex);
  --bs-btn-border-color: var(--accent-hex);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--grey-hex);
  --bs-btn-hover-border-color: var(--grey-hex);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-hex);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--accent-hex);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--grey-hex);
  --bs-btn-hover-border-color: var(--grey-hex);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-hex);
  --bs-btn-active-border-color: var(--accent-hex);
}

.tw-balance {
  text-wrap: balance;
}

.tw-pretty {
  text-wrap: pretty;
}

.fw-semibold {
  font-weight: 600;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Fix btn-group border radius when button_to wraps buttons in forms */
.btn-group > form:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > form:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > form + .btn,
.btn-group > form + button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Force a line break within a flex-wrap container */
.flex-break {
  flex-basis: 100%;
  height: 0;
}

.navbar a:link, .navbar a:visited {
  color: #fff;
  font-weight: 600;
}

.navbar a.navbar-brand {
  font-weight: 800;
  text-transform: lowercase;
  font-size: 2.5rem;
  letter-spacing: -0.04ch;
}

.navbar-toggler {
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.8);
  --bs-border-width: 2px;
}

.dropdown-item {
  --bs-dropdown-link-hover-bg: hsl(from var(--accent-hsl) h s calc(l + 10));
}

/* Ensure map container has defined dimensions */
#map {
  height: 400px;
  width: 100%;
}

.store-summary p:last-child {
  margin-bottom: 0;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  text-transform: lowercase;
  letter-spacing: -0.04ch;
  font-weight: 700;
  text-wrap: balance;
  font-feature-settings: "ss02", "ss03", "ss06";
}

h1, .h1 {
  font-weight: 800;
}

h6, .h6 {
  font-weight: 600;
}

b, strong {
  font-weight: 600;
}

/* Collapse chevron rotation */
[data-bs-toggle="collapse"] .bi-chevron-down {
  transition: transform 0.3s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.store-attribute:not(:last-child)::after {
  content: " •";
}

.store-visit-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  max-width: 100%;
}

/* ----------------------------------------------------------------
   Stores index — active-state conversational search
   ---------------------------------------------------------------- */

.conv-search {
  margin-bottom: 1rem;
}

.conv-search__form {
  display: flex;
  align-items: stretch;
  border: 1px solid #d8d8d8;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.conv-search__form:focus-within {
  border-color: var(--accent-hex);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.conv-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 0.9rem;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  color: #1a1a1a;
}

.conv-search__input::placeholder {
  color: #9a9a9a;
  font-weight: 400;
}

.conv-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: none;
  border-radius: 0;
  background: var(--accent-hex);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.conv-search__submit:hover:not(:disabled),
.conv-search__submit:focus:not(:disabled) {
  background: var(--grey-hex);
  outline: none;
}

.conv-search__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.conv-search__thread {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.conv-search__empty {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.45;
  padding: 0.5rem 0 0;
}

.conv-search__loading,
.conv-search__error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.conv-search__error {
  color: #c92a2a;
}

.conv-search__loading.d-flex,
.conv-search__error.d-flex {
  display: flex !important;
}

/* User turn — right-aligned pill in accent red. */
.conv-search__turn--user {
  display: flex;
  justify-content: flex-end;
}

.conv-search__user-msg {
  background: var(--accent-hex);
  color: #fff;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.95rem;
  max-width: 90%;
  word-wrap: break-word;
}

/* Assistant turn — typeset prose with a small "findie" label and a stat
   line for the count. No bubble, no card. */
.conv-search__turn--assistant {
  padding: 0;
  border-left: 2px solid var(--accent-hex);
  padding-left: 0.85rem;
}

.conv-search__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.06ch;
  color: #6b7280;
  margin-bottom: 0.2rem;
}

.conv-search__assistant-msg {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #1a1a1a;
  text-wrap: pretty;
}

.conv-search__count {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.conv-search__count strong {
  color: #1a1a1a;
  font-weight: 700;
}

.conv-search__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.conv-search__suggestion {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: transparent;
  color: var(--accent-hex);
  border: 1px solid var(--accent-hex);
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.conv-search__suggestion:hover:not(:disabled),
.conv-search__suggestion:focus:not(:disabled) {
  background: var(--accent-hex);
  color: #fff;
  outline: none;
}

.conv-search__suggestion:disabled,
.conv-search__suggestion.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.conv-search__action {
  margin-top: 0.5rem;
}

.conv-search__action-link {
  font-size: 0.85rem;
  color: var(--accent-hex);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.conv-search__action-link:hover {
  border-bottom-color: var(--accent-hex);
}

.conv-search__debug {
  background: #fafafa;
  border: 1px dashed #d8d8d8;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  margin-top: 0.4rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

@keyframes convSearchFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.conv-search-fade-in {
  animation: convSearchFadeIn 0.25s ease-out;
}

/* On larger screens the conv-search panel becomes a viewport-tall side
   panel: the thread takes the remaining height with overflow scroll,
   and the input form (and any trailing "start over" link) stay docked
   at the bottom. `position: sticky` keeps it pinned as the results
   column scrolls past it; it un-pins naturally when its parent column
   ends, so the saved-searches column that wraps below isn't covered.

   Height subtracts the section's actual distance from the document
   top (--conv-search-offset-top, measured in JS) so the input always
   sits above the viewport's bottom edge on initial render, regardless
   of navbar size or whether a banner above it is present. The fallback
   value covers navbar (~5.5rem) + container mt-4 (1.5rem) for the
   first paint before JS runs. */
@media (min-width: 992px) {
  .conv-search {
    position: sticky;
    top: 1rem;
    height: calc(100vh - var(--conv-search-offset-top, 7rem) - 1rem);
    display: flex;
    flex-direction: column;
  }

  .conv-search__thread {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* lets the flex child shrink below content height */
    margin-bottom: 0.75rem;
  }

  .conv-search__form {
    flex: 0 0 auto;
  }
}

/* Turbo Stream Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

.fade-out {
  animation: fadeOut 0.5s ease-out;
}

/* Toast-style Flash Messages */
#flash {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: 400px;
  pointer-events: none;
}

#flash .alert {
  pointer-events: auto;
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#flash .alert.dismissing {
  animation: slideOutRight 0.3s ease-out forwards;
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Mobile responsive adjustments for flash messages */
@media (max-width: 576px) {
  #flash {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }
}

.popover {
  max-width: min(600px, 95vw);
}

.search-results-header {
  h3 {
    flex-shrink: 1;
  }

  p {
    flex-shrink: 0;
  }
}

/* Insights map styles */
.insights-map {
  height: 400px;
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
}

.map-popup-card {
  font-family: var(--font-primary), sans-serif;
  font-size: 13px;
  line-height: 1.4;
  min-width: 200px;
}

.map-popup-card strong {
  font-size: 14px;
}

.leaflet-popup-content {
  margin: 10px 12px;
}

.insights-legend {
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  font-size: 13px;
  line-height: 1.8;
}

.insights-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.insights-legend-item:hover {
  opacity: 0.7;
}

.dot-marker {
  background: none !important;
  border: none !important;
}

/* Homepage hero */
.hero {
  /* Approximate height of the homepage's dark navbar:
     navbar-brand 2.5rem * 1.5 line-height + brand py 0.3125rem*2 + navbar py 0.5rem*2 */
  --hero-navbar-height: 3rem;
}

.hero .screenshot {
  max-height: 35vh;
}

@media (min-width: 768px) {
  .hero {
    /* 100vh minus navbar above and the my-md-5 vertical margin (3rem top + 3rem bottom) */
    height: calc(100vh - var(--hero-navbar-height) - 6rem);
    display: flex;
    flex-direction: column;
  }

  .hero .proposition {
    flex: 0 0 auto;
  }

  .hero .screenshot {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* ----------------------------------------------------------------
   Stores index — idle (search-first) landing
   ---------------------------------------------------------------- */

.search-hero {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 10vh, 7rem) 1.5rem 4rem;
  min-height: calc(100vh - 4rem);
}

.search-hero__inner {
  width: 100%;
  max-width: 720px;
}

.search-hero__title {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.045ch;
  line-height: 1.02;
  margin: 0 0 1.75rem;
  text-transform: lowercase;
}

.search-hero__form {
  display: flex;
  align-items: stretch;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.search-hero__form:focus-within {
  border-color: var(--accent-hex);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.search-hero__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 64px;
  padding: 0 1.25rem;
  border: 0;
  outline: none;
  background: transparent;
  font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
  font-family: inherit;
  font-weight: 500;
  color: #1a1a1a;
}

.search-hero__input::placeholder {
  color: #9a9a9a;
  font-weight: 400;
}

.search-hero__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 0;
  font-size: 1.25rem;
  border: none;
}

.search-hero__submit i {
  display: inline-block;
  transition: transform 160ms ease;
}

.search-hero__submit:hover i,
.search-hero__submit:focus i {
  transform: translateX(3px);
}

.search-hero__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  font-size: 0.95rem;
  color: #6b7280;
}

.search-hero__status--error {
  color: #c92a2a;
}

.search-hero__status.d-flex {
  display: flex !important;
}

.prompt-chips {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prompt-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  background: #f5f5f5;
  color: #2a2a2a;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.prompt-chip:hover,
.prompt-chip:focus {
  background: #fff;
  border-color: var(--accent-hex);
  color: var(--accent-hex);
  outline: none;
}

.saved-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ececec;
}

.saved-search-row__label {
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.04ch;
  font-weight: 600;
  color: #6b7280;
  margin-right: 0.25rem;
}

.saved-search-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  font-size: 0.875rem;
  color: #2a2a2a;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.saved-search-chip:link,
.saved-search-chip:visited {
  color: #2a2a2a;
}

.saved-search-chip:hover {
  border-color: var(--accent-hex);
  color: var(--accent-hex);
}

.search-hero__footer {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
}

.search-hero__footer-sep {
  color: #c8c8c8;
  user-select: none;
}

.browse-all-link {
  font-size: 0.9rem;
  color: #6b7280 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}

.browse-all-link i {
  font-size: 0.85em;
  margin-left: 0.15rem;
  transition: transform 160ms ease;
  display: inline-block;
}

.browse-all-link:hover {
  color: var(--accent-hex) !important;
  border-bottom-color: var(--accent-hex);
}

.browse-all-link:hover i {
  transform: translateX(3px);
}

.findie-lookup {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.findie-lookup__label {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

.findie-lookup__input {
  width: 6.5rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fafafa;
  font-family: inherit;
  font-size: 0.85rem;
  color: #2a2a2a;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.findie-lookup__input:focus {
  outline: none;
  border-color: var(--accent-hex);
  background: #fff;
}

.findie-lookup__input::placeholder {
  color: #b0b0b0;
}

@media (max-width: 576px) {
  .search-hero {
    padding-top: 3.5rem;
  }

  .search-hero__input {
    height: 56px;
  }

  .search-hero__submit {
    width: 56px;
    height: 56px;
  }
}

/* ----------------------------------------------------------------
   Stores index — active state filter chips
   ---------------------------------------------------------------- */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 1rem;
}

.filter-chip {
  display: inline-flex;
  align-items: stretch;
  background: #f5f5f5;
  border: 1px solid #ececec;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.2;
  overflow: hidden;
  transition: border-color 120ms ease;
}

.filter-chip:hover {
  border-color: #d8d8d8;
}

.filter-chip__label {
  padding: 0.4rem 0.25rem 0.4rem 0.85rem;
  color: #2a2a2a;
  white-space: nowrap;
}

.filter-chip__remove-form {
  display: contents;
}

.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.65rem 0 0.35rem;
  background: transparent;
  border: 0;
  color: #6b7280 !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.filter-chip__remove:hover,
.filter-chip__remove:focus {
  background: var(--accent-hex);
  color: #fff !important;
  outline: none;
}

.filter-chip__remove i {
  font-size: 0.95em;
}

.filter-chips__clear-form {
  display: contents;
}

.filter-chips__clear {
  background: none;
  border: 0;
  padding: 0 0 1px;
  margin-left: 0.25rem;
  font-family: inherit;
  font-size: 0.8rem;
  color: #6b7280 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.filter-chips__clear:hover,
.filter-chips__clear:focus {
  color: var(--accent-hex) !important;
  border-bottom-color: var(--accent-hex);
  outline: none;
}

.filter-chips__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.filter-chips__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  background: transparent;
  color: #2a2a2a;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.filter-chips__action:hover,
.filter-chips__action:focus {
  border-color: var(--accent-hex);
  color: var(--accent-hex);
  outline: none;
}

.filter-chips__action i {
  font-size: 0.95em;
}

/* Destructive variant — start over. Same shape and weight as the
   neutral actions so it sits naturally in the group, but its hover
   shifts to a muted background instead of borrowing the accent
   (which would imply "engage" rather than "reset"). */
.filter-chips__action--destructive {
  color: #6b7280;
}

.filter-chips__action--destructive:hover,
.filter-chips__action--destructive:focus {
  background: #f5f5f5;
  border-color: #c8c8c8;
  color: #2a2a2a;
}

.filter-chips__action-form {
  display: contents;
}

.refine-drawer .offcanvas-title,
.save-drawer .offcanvas-title {
  text-transform: lowercase;
  letter-spacing: -0.04ch;
}

.save-drawer__section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.06ch;
  color: #6b7280;
  margin-bottom: 0.4rem;
}

/* ----------------------------------------------------------------
   Stores index — list/map toggle
   ---------------------------------------------------------------- */

.stores-view {
  margin-bottom: 1rem;
}

.stores-view__toggle {
  display: inline-flex;
  margin-bottom: 1rem;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  padding: 3px;
  background: #fafafa;
}

.stores-view__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.95rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.stores-view__btn.is-active {
  background: #fff;
  color: var(--accent-hex);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stores-view__btn:hover:not(.is-active),
.stores-view__btn:focus:not(.is-active) {
  color: #2a2a2a;
  outline: none;
}

.stores-view__map {
  margin-bottom: 1rem;
  border: 1px solid #ececec;
}

/* ----------------------------------------------------------------
   Brand show / stockists — left context panel + right section list
   ---------------------------------------------------------------- */

.brand-context {
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  .brand-context {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.25rem;
  }
}

.brand-context__name {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 0.5rem;
  line-height: 1.05;
}

.brand-context__lede {
  color: #4a4a4a;
  text-wrap: balance;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.brand-context__negative {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.brand-context__profile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.brand-context__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  background: #f5f5f5;
  border: 1px solid #ececec;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #2a2a2a;
}

.brand-context__pill--accent {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-hex);
  font-weight: 600;
}

.brand-context__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  margin-bottom: 1rem;
}

.brand-context__stats > div {
  margin: 0;
}

.brand-context__stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02ch;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 0;
  text-transform: lowercase;
}

.brand-context__stat-label {
  font-size: 0.7rem;
  text-transform: lowercase;
  color: #6b7280;
  letter-spacing: 0.06ch;
  margin: 0;
}

.brand-context__primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-hex);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  transition: color 120ms ease;
}

.brand-context__primary-cta:hover {
  color: var(--grey-hex);
}

.brand-context__primary-cta i {
  transition: transform 160ms ease;
}

.brand-context__primary-cta:hover i {
  transform: translateX(3px);
}

.brand-context__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.brand-context__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  background: transparent;
  color: #2a2a2a;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.brand-context__action:hover,
.brand-context__action:focus {
  border-color: var(--accent-hex);
  color: var(--accent-hex);
  outline: none;
}

.brand-context__action--destructive {
  color: #6b7280;
}

.brand-context__action--destructive:hover,
.brand-context__action--destructive:focus {
  background: #f5f5f5;
  border-color: #c8c8c8;
  color: #2a2a2a;
}

.brand-context__meta {
  font-size: 0.85rem;
  color: #6b7280;
}

.brand-context__meta a {
  color: var(--accent-hex);
}

.brand-section {
  margin-bottom: 2.25rem;
}

.brand-section[id] {
  scroll-margin-top: 1rem;
}

.brand-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 2rem;
  padding: 0.75rem 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}

.brand-toc__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.06ch;
  color: #6b7280;
  margin-right: 0.25rem;
}

.brand-toc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  background: transparent;
  color: #2a2a2a;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.brand-toc__link:hover,
.brand-toc__link:focus {
  border-color: var(--accent-hex);
  color: var(--accent-hex);
  outline: none;
}

.brand-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.brand-section__header h2,
.brand-section__header h3,
.brand-section__title {
  font-size: 1.2rem;
  margin: 0;
}

.brand-section__hint {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  max-width: 60ch;
}

.brand-section__view-all {
  color: var(--accent-hex);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: color 120ms ease;
}

.brand-section__view-all:hover {
  color: var(--grey-hex);
}

.brand-section__view-all i {
  transition: transform 160ms ease;
}

.brand-section__view-all:hover i {
  transform: translateX(3px);
}

.brand-map {
  margin-bottom: 1rem;
  border: 1px solid #ececec;
  height: 480px;
}

.brand-map--tall {
  height: 560px;
}

/* Leaflet legend (insights-map-controller renders this into the map) */
.insights-legend {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #ececec;
  border-radius: 0.4rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #2a2a2a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.insights-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  padding: 0.1rem 0;
  transition: opacity 120ms ease;
}

.insights-legend-item:hover {
  color: var(--accent-hex);
}