/* ================================================================
   HENNIG INC — LOCATIONS PAGE STYLESHEET
   locator.css
   ----------------------------------------------------------------
   Version:    2.0
   DS Source:  Hennig Design System V45
   Updated:    2026-03-26
   ----------------------------------------------------------------
   Scoped to the Locations page. Filter bar shell is scoped to
   .locations-page to avoid collision with blog.css §B10 .filter-bar.

   LOADING ORDER:
     1. FOUC prevention <script> (inline)
     2. main.css
     3. locator.css (this file)

   DOCUMENT STRUCTURE — PER COMPONENT BUILD ORDER:
     Base Rules → States → Dark Mode → Reduced Motion → Touch →
     Responsive → Print

   SECTION MAP:
     §L1  Category Tokens
     §L2  Filter Bar (scoped .locations-page)
     §L3  Map & Markers
     §L4  Map Legend
     §L5  Map Popups (scoped .map-section)
     §L6  Find Your Rep
     §L7  Product Directory
     §L8  CTA Band
     §L9  Responsive
     §L10 Print
   ================================================================ */


/* ================================================================
   §L1 CATEGORY TOKENS
   Single source for all category colors used across
   filter chips, map markers, legend dots, and popup badges.
   ================================================================ */
:root {
  --cat-hq: #21466b;
  --cat-plant: #E68924;
  --cat-service: #15803d;
  --cat-trade: #7c3aed;
  --cat-partner: #fdc114;
  --cat-showroom: #2563eb;
  --cat-hq-pulse: rgba(33, 70, 107, 0.3);
  --cat-plant-pulse: rgba(230, 137, 36, 0.3);
  --cat-service-pulse: rgba(21, 128, 61, 0.3);
  --cat-trade-pulse: rgba(124, 58, 237, 0.3);
  --cat-partner-pulse: rgba(190, 24, 93, 0.3);
  --cat-showroom-pulse: rgba(37, 99, 235, 0.3);
}


/* ================================================================
   §L2 CONTROLS BAR
   Search bar + category/product dropdowns.
   ================================================================ */

  /* §L2.1 Controls Shell */
	.loc-controls {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		padding: var(--space-lg) 0;
	}

  /* §L2.2 Search Bar */
	.loc-search {
		display: flex;
		align-items: center;
		background: var(--surface-primary);
		border: 2px solid var(--border-primary);
		border-radius: var(--radius-sm);
		overflow: hidden;
		transition: border-color var(--t-150), box-shadow var(--t-150);
	}
	.loc-search-icon {
		width: 18px; height: 18px;
		margin-left: 14px;
		flex-shrink: 0;
		color: var(--text-tertiary);
	}
	.loc-search-input {
		flex: 1;
		border: none;
		background: transparent;
		padding: 12px 14px;
		font-family: var(--font-body);
		font-size: 0.9375rem;
		color: var(--text-primary);
		outline: none;
		min-width: 0;
	}
	.loc-search-input::placeholder { color: var(--text-tertiary); }
	.loc-search-btn {
		padding: 12px 20px;
		background: var(--gradient-cta);
		border: none;
		font-family: var(--font-heading);
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--cta-text);
		cursor: pointer;
		transition: filter var(--t-150);
		flex-shrink: 0;
	}

  /* §L2.3 Filter Row */
	.loc-filters {
		display: flex;
		gap: var(--space-sm);
	}

  /* §L2.4 Dropdown Base */
	.loc-dropdown-wrap { position: relative; flex: 1; }
	.loc-dropdown-btn {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 14px;
		font-family: var(--font-body);
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--text-secondary);
		background: var(--surface-primary);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition: border-color var(--t-150), background var(--t-150), color var(--t-150);
	}
	.loc-dropdown-icon {
		width: 16px; height: 16px;
		flex-shrink: 0;
		opacity: 0.5;
	}
	.loc-dropdown-text { flex: 1; text-align: left; }
	.loc-dropdown-chev {
		width: 10px; height: 10px;
		flex-shrink: 0;
		transition: transform var(--t-150);
	}
	.loc-dropdown-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 0; right: 0;
		background: var(--surface-primary);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-dropdown);
		z-index: var(--z-100);
		padding: 4px;
		max-height: 320px;
		overflow-y: auto;
	}
	.loc-dropdown-opt {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 10px 12px;
		text-align: left;
		font-family: var(--font-body);
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--text-primary);
		background: none;
		border: none;
		border-radius: var(--radius-xs);
		cursor: pointer;
		transition: background var(--t-150);
	}
	.loc-dropdown-opt .dot {
		width: 8px; height: 8px;
		border-radius: 50%;
		flex-shrink: 0;
	}

  /* §L2.5 States */
	.loc-search:focus-within {
		border-color: var(--orange);
		box-shadow: 0 0 0 3px rgba(230, 137, 36, 0.15);
	}
	.loc-search-btn:hover { filter: brightness(1.1); }
	.loc-search-btn:focus-visible {
		outline: var(--focus-ring);
		outline-offset: -2px;
	}
	.loc-dropdown-btn:hover {
		border-color: var(--orange);
		color: var(--text-primary);
	}
	.loc-dropdown-btn.filtered {
		background: var(--hennig-blue);
		color: var(--white);
		border-color: var(--hennig-blue);
	}
	.loc-dropdown-btn.filtered .loc-dropdown-icon { opacity: 1; }
	.loc-dropdown-btn[aria-expanded="true"] .loc-dropdown-chev {
		transform: rotate(180deg);
	}
	.loc-dropdown-btn:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}
	.loc-dropdown-opt:hover { background: var(--surface-hover); }
	.loc-dropdown-opt.active {
		color: var(--orange);
		font-weight: 700;
		background: var(--surface-secondary);
	}
	.loc-dropdown-opt:focus-visible {
		outline: var(--focus-ring);
		outline-offset: -2px;
	}

  /* §L2.6 Dark Mode */
	:root[data-theme="dark"] .loc-search:focus-within {
		box-shadow: 0 0 0 3px rgba(230, 137, 36, 0.25);
	}
	:root[data-theme="dark"] .loc-dropdown-btn.filtered {
		background: var(--orange);
		color: var(--dark-blue);
		border-color: var(--orange);
	}

  /* §L2.7 Touch */
	html.touch-only .loc-dropdown-btn:hover {
		border-color: var(--border-primary);
		color: var(--text-secondary);
	}
	html.touch-only .loc-dropdown-btn.filtered:hover {
		background: var(--hennig-blue);
		color: var(--white);
	}
	html.touch-only .loc-dropdown-opt:hover { background: transparent; }
	html.touch-only .loc-search-btn:hover { filter: none; }


/* ================================================================
   §L3 MAP & MARKERS
   ================================================================ */

  /* §L3.1 Map Shell */
	.map-section {
		position: relative;
		background: var(--surface-secondary);
		isolation: isolate;
	}
	#map { width: 100%; height: 520px; }

  /* §L3.2 Category Colors */
	.dot.hq,          .legend-dot.hq,          .marker-pin.hq,          .popup-badge.hq          { background: var(--cat-hq); }
	.dot.plant,        .legend-dot.plant,        .marker-pin.plant,        .popup-badge.plant        { background: var(--cat-plant); }
	.dot.service,      .legend-dot.service,      .marker-pin.service,      .popup-badge.service      { background: var(--cat-service); }
	.dot.trade,        .legend-dot.trade,        .marker-pin.trade,        .popup-badge.trade        { background: var(--cat-trade); }
	.dot.partner,  .legend-dot.partner,  .marker-pin.partner,  .popup-badge.partner  { background: var(--cat-partner); }
	.dot.showroom,     .legend-dot.showroom,     .marker-pin.showroom,     .popup-badge.showroom     { background: var(--cat-showroom); }

	.marker-pulse.hq          { background: var(--cat-hq-pulse); }
	.marker-pulse.plant        { background: var(--cat-plant-pulse); }
	.marker-pulse.service      { background: var(--cat-service-pulse); }
	.marker-pulse.trade        { background: var(--cat-trade-pulse); }
	.marker-pulse.partner  { background: var(--cat-partner-pulse); }
	.marker-pulse.showroom     { background: var(--cat-showroom-pulse); }

  /* §L3.3 Marker Pin */
	.marker-pin {
		width: 35px; height: 35px;
		border-radius: 50% 50% 50% 0;
		transform: rotate(-45deg);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
		border: 2px solid var(--white);
	}
	.marker-pin svg {
		transform: rotate(45deg);
		width: 20px; height: 20px;
		stroke: var(--white)
	}

  /* §L3.4 Marker Pulse */
	.marker-pulse {
		position: absolute;
		width: 30px; height: 30px;
		border-radius: 50%;
		animation: pulse-ring 2s ease-out infinite;
		top: 0; left: 0;
		pointer-events: none;
	}
	@keyframes pulse-ring {
		0%   { transform: scale(1); opacity: 0.6; }
		100% { transform: scale(2.5); opacity: 0; }
	}

  /* §L3.5 Dark Mode */
	:root[data-theme="dark"] .leaflet-tile-pane {
		filter: brightness(0.7) saturate(0.5) hue-rotate(180deg) invert(1);
	}
	:root[data-theme="dark"] .leaflet-container {
		background: var(--dark-blue);
	}
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .leaflet-tile-pane {
			filter: brightness(0.7) saturate(0.5) hue-rotate(180deg) invert(1);
		}
		:root:not([data-theme="light"]) .leaflet-container {
			background: var(--dark-blue);
		}
	}

  /* §L3.6 Reduced Motion */
	@media (prefers-reduced-motion: reduce) {
		.marker-pulse { animation: none; }
	}


/* ================================================================
   §L4 MAP LEGEND
   ================================================================ */
	.map-legend {
		position: absolute;
		bottom: var(--space-lg);
		left: var(--space-lg);
		z-index: var(--z-400);
		background: var(--surface-primary);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-card);
		padding: 12px 14px;
		box-shadow: var(--shadow-card-base);
		min-width: 170px;
	}
	.map-legend h4 {
		font-family: var(--font-heading);
		font-size: 0.625rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--text-secondary);
		margin-bottom: 6px;
	}
	.legend-row {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 2px 0;
		font-size: 0.75rem;
		color: var(--text-primary);
	}
	.legend-dot {
		width: 9px; height: 9px;
		border-radius: 50%;
		flex-shrink: 0;
		border: 1.5px solid var(--surface-primary);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	}


/* ================================================================
   §L5 MAP POPUPS — Scoped to .map-section
   ================================================================ */

  /* §L5.1 Leaflet Overrides */
	.map-section .leaflet-popup-content-wrapper {
		background: var(--surface-primary);
		color: var(--text-primary);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-dropdown);
		padding: 0;
		border: 1px solid var(--border-primary);
		overflow: hidden;
	}
	.map-section .leaflet-popup-content {
		margin: 0;
		font-family: var(--font-body);
		width: 300px;
		font-size: inherit;
		line-height: inherit;
	}
	.map-section .leaflet-popup-tip {
		background: var(--surface-primary);
		border: 1px solid var(--border-primary);
		border-top: none;
		border-left: none;
		box-shadow: none;
	}
	.map-section .leaflet-container a {
		color: inherit !important;
	}
	.map-section .leaflet-container a.leaflet-popup-close-button {
		color: var(--text-secondary);
		font-size: 20px;
		top: 8px;
		right: 10px;
	}

  /* §L5.2 Popup Header */
	.popup-header {
		padding: 14px 16px 10px;
		border-bottom: 1px solid var(--border-primary);
	}
	.popup-badge {
		display: inline-block;
		font-family: var(--font-heading);
		font-size: 0.625rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		padding: 2px 8px;
		border-radius: 100px;
		color: var(--white);
		margin-bottom: 4px;
	}
	.popup-name {
		font-family: var(--font-heading);
		font-size: 1rem;
		font-weight: 600;
		color: var(--header-accent);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		line-height: 1.25;
	}

  /* §L5.3 Popup Body */
	.popup-body { padding: 10px 16px 0; }
	.popup-addr {
		font-size: 0.8125rem;
		color: var(--text-secondary);
		line-height: 1.5;
		margin-bottom: 6px;
	}
	.popup-contact-row {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 8px;
	}
	.popup-link {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 0.6875rem;
		font-weight: 600;
		color: var(--text-primary);
		padding: 3px 8px;
		border-radius: 100px;
		border: 1px solid var(--border-primary);
		background: var(--surface-secondary);
		text-decoration: none;
		transition: background var(--t-150), border-color var(--t-150);
	}
	.popup-link svg { width: 11px; height: 11px; flex-shrink: 0; }
	.popup-desc {
		font-size: 0.8125rem;
		color: var(--text-secondary);
		line-height: 1.5;
		margin-bottom: 8px;
	}
	.popup-contact-person {
		font-size: 0.75rem;
		color: var(--text-secondary);
		margin-bottom: 8px;
	}
	.popup-contact-person strong {
		color: var(--text-primary);
		font-weight: 600;
	}
	.popup-products {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin-bottom: 10px;
	}
	.popup-product-tag {
		font-size: 0.625rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding: 2px 7px;
		border-radius: 100px;
		background: var(--surface-secondary);
		color: var(--text-secondary);
		border: 1px solid var(--border-primary);
	}
	.popup-event-meta {
		font-size: 0.8125rem;
		color: var(--text-primary);
		margin-bottom: 6px;
		font-weight: 600;
	}
	.popup-booth {
		font-size: 0.75rem;
		color: var(--text-secondary);
		margin-bottom: 8px;
	}
	.popup-dist-note {
		font-size: 0.8125rem;
		color: var(--text-secondary);
		font-style: italic;
		margin-bottom: 8px;
		padding-left: 10px;
		border-left: 2px solid var(--border-primary);
	}
	.map-section .leaflet-popup-content p { margin: 0; }

  /* §L5.4 Popup Footer */
	.popup-footer {
		padding: 10px 16px 14px;
		border-top: 1px solid var(--border-primary);
		background: var(--surface-secondary);
	}
	.popup-rep {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}
	.popup-rep-avatar {
		width: 28px; height: 28px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--border-primary), var(--surface-hover-strong));
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-heading);
		font-size: 0.625rem;
		font-weight: 600;
		color: var(--text-secondary);
		border: 1.5px solid var(--border-primary);
		flex-shrink: 0;
	}
	.popup-rep-photo {
		width: 48px; height: 48px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
		border: 2px solid var(--border-primary);
	}
	.popup-rep-info { flex: 1; min-width: 0; }
	.popup-rep-name {
		font-family: var(--font-heading);
		font-size: 0.6875rem;
		font-weight: 600;
		color: var(--header-accent);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		line-height: 1.2;
	}
	.popup-rep-label {
		font-size: 0.625rem;
		color: var(--text-secondary);
	}
	.popup-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 100%;
		padding: 8px 14px;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		background: var(--gradient-cta);
		color: var(--cta-text);
		border-radius: var(--radius-xs);
		text-decoration: none;
		transition: filter var(--t-150);
	}

  /* §L5.5 States */
	.map-section .leaflet-container a.leaflet-popup-close-button:hover,
	.map-section .leaflet-container a.leaflet-popup-close-button:focus {
		color: var(--text-primary);
	}
	.popup-link:hover {
		background: var(--surface-hover-strong);
		border-color: var(--header-accent);
	}
	.popup-link:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}
	.popup-cta:hover { filter: brightness(1.1); }
	.popup-cta:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}


/* ================================================================
   §L6 FIND YOUR REP
   US territory selector + international region cards.
   ================================================================ */

  /* §L6.1 Shell */
	.rep-finder { padding: var(--space-2xl) 0; }

  /* §L6.2 Search Bar */
	.rep-search-bar {
		display: flex;
		gap: var(--space-sm);
		margin-bottom: var(--space-xl);
		max-width: 480px;
		position: relative;
	}
	.rep-search-bar input {
		flex: 1;
		font-family: var(--font-body);
		font-size: 0.9375rem;
		padding: 12px 16px 12px 42px;
		border: 2px solid var(--border-primary);
		border-radius: var(--radius-sm);
		background: var(--surface-primary);
		color: var(--text-primary);
		transition: border-color var(--t-150);
	}
	.rep-search-bar input::placeholder { color: var(--text-tertiary); }
	.rep-search-bar .search-icon {
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
		width: 18px; height: 18px;
		color: var(--text-tertiary);
		pointer-events: none;
	}

  /* §L6.3 Territory Map */
	.territory-map-wrap {
		display: grid;
		grid-template-columns: 1fr 320px;
		gap: var(--space-xl);
		align-items: start;
	}
	.svg-map-container { position: relative; }
	.svg-map-container svg { width: 100%; height: auto; display: block; }
	.region-group { cursor: pointer; }
	.region-group path,
	.region-group polygon {
		transition: fill var(--t-150);
		stroke: var(--surface-primary);
		stroke-width: 1.5;
	}
	.region-label {
		font-family: var(--font-heading);
		font-size: 0.625rem;
		font-weight: 600;
		fill: rgba(0, 0, 0, 0.6);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		pointer-events: none;
		text-anchor: middle;
	}

  /* §L6.4 Inline Legend */
	.map-legend-inline {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-md);
		margin-top: var(--space-md);
		padding-top: var(--space-md);
		border-top: 1px solid var(--border-primary);
	}
	.legend-chip {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.75rem;
		color: var(--text-secondary);
		cursor: pointer;
		transition: color var(--t-150);
	}
	.legend-chip .ldot {
		width: 10px; height: 10px;
		border-radius: 50%;
		flex-shrink: 0;
	}

  /* §L6.5 International Region Cards */
	.intl-regions {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}
	.intl-card {
		background: var(--surface-primary);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-card);
		padding: var(--space-lg);
		box-shadow: var(--shadow-card-base);
		cursor: pointer;
		transition: box-shadow var(--t-250), transform var(--t-250);
		position: relative;
		overflow: hidden;
	}
	.intl-card::before {
		content: '';
		position: absolute;
		top: 0; left: 0;
		width: 4px; height: 100%;
		border-radius: var(--radius-card) 0 0 var(--radius-card);
	}
	.intl-card.emea::before { background: var(--orange); }
	.intl-card.apac::before { background: var(--success); }
	.intl-card.sa::before   { background: var(--cat-trade); }
	.intl-card-overline {
		font-family: var(--font-heading);
		font-size: 0.625rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		margin-bottom: 4px;
	}
	.intl-card.emea .intl-card-overline { color: var(--orange); }
	.intl-card.apac .intl-card-overline { color: var(--success); }
	.intl-card.sa .intl-card-overline   { color: var(--cat-trade); }
	.intl-card-name {
		font-family: var(--font-heading);
		font-size: 1rem;
		font-weight: 600;
		color: var(--header-accent);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		line-height: 1.25;
		margin-bottom: 4px;
	}
	.intl-card-desc {
		font-size: 0.8125rem;
		color: var(--text-secondary);
		line-height: 1.5;
	}
	.intl-card-arrow {
		position: absolute;
		top: var(--space-lg);
		right: var(--space-lg);
		color: var(--orange);
		font-weight: 700;
		transition: transform var(--t-150);
	}

  /* §L6.6 States */
	.rep-search-bar input:focus-visible {
		border-color: var(--hennig-blue);
		outline: var(--focus-ring);
		outline-offset: 1px;
	}
	.region-group:hover path,
	.region-group:hover polygon {
		filter: brightness(1.15);
	}
	.region-group.active path,
	.region-group.active polygon {
		stroke: var(--dark-blue);
		stroke-width: 2.5;
		filter: brightness(1.15);
	}
	.region-group:focus-visible path,
	.region-group:focus-visible polygon {
		stroke: var(--orange);
		stroke-width: 2.5;
		filter: brightness(1.15);
	}
	.legend-chip:hover { color: var(--text-primary); }
	.legend-chip:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}
	.intl-card:hover {
		box-shadow: var(--shadow-card-hover);
		transform: translateY(-2px);
	}
	.intl-card:hover .intl-card-arrow { transform: translateX(3px); }
	.intl-card:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

  /* §L6.7 Dark Mode */
	:root[data-theme="dark"] .rep-search-bar input:focus-visible {
		border-color: var(--orange);
	}
	:root[data-theme="dark"] .region-group path,
	:root[data-theme="dark"] .region-group polygon {
		stroke: var(--dark-blue);
	}
	:root[data-theme="dark"] .region-group.active path,
	:root[data-theme="dark"] .region-group.active polygon {
		stroke: var(--white);
		stroke-width: 2.5;
	}
	:root[data-theme="dark"] .region-label {
		fill: rgba(255, 255, 255, 0.5);
	}
	:root[data-theme="dark"] .intl-card.apac::before {
		background: var(--success-on-dark);
	}
	:root[data-theme="dark"] .intl-card.apac .intl-card-overline {
		color: var(--success-on-dark);
	}
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .rep-search-bar input:focus-visible {
			border-color: var(--orange);
		}
		:root:not([data-theme="light"]) .region-group path,
		:root:not([data-theme="light"]) .region-group polygon {
			stroke: var(--dark-blue);
		}
		:root:not([data-theme="light"]) .region-group.active path,
		:root:not([data-theme="light"]) .region-group.active polygon {
			stroke: var(--white);
			stroke-width: 2.5;
		}
		:root:not([data-theme="light"]) .region-label {
			fill: rgba(255, 255, 255, 0.5);
		}
		:root:not([data-theme="light"]) .intl-card.apac::before {
			background: var(--success-on-dark);
		}
		:root:not([data-theme="light"]) .intl-card.apac .intl-card-overline {
			color: var(--success-on-dark);
		}
	}

  /* §L6.8 Reduced Motion */
	@media (prefers-reduced-motion: reduce) {
		.intl-card:hover { transform: none; }
		.intl-card:hover .intl-card-arrow { transform: none; }
	}

  /* §L6.9 Touch */
	html.touch-only .intl-card:hover {
		box-shadow: var(--shadow-card-base);
		transform: none;
	}
	html.touch-only .intl-card:hover .intl-card-arrow { transform: none; }
	html.touch-only .legend-chip:hover { color: var(--text-secondary); }
	html.touch-only .region-group:hover path,
	html.touch-only .region-group:hover polygon { filter: none; }


/* ================================================================
   §L7 PRODUCT DIRECTORY
   ================================================================ */

  /* §L7.1 Shell */
	.product-directory { padding: var(--space-2xl) 0; }

  /* §L7.2 Product Teams Grid */
	.product-teams {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}
	.product-team {
		background: var(--surface-primary);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-card-base);
		overflow: hidden;
	}
	.product-team-header {
		padding: 14px var(--space-lg);
		border-bottom: 1px solid var(--border-primary);
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}
	.product-team-flag {
		width: 24px; height: 16px;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.625rem;
		font-weight: 700;
		color: var(--white);
		text-transform: uppercase;
	}
	.product-team-flag.na { background: var(--hennig-blue); }
	.product-team-flag.eu { background: var(--orange); }
	.product-team-label {
		font-family: var(--font-heading);
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--header-accent);
	}

  /* §L7.3 Rep Rows */
	.rep-row {
		display: flex;
		align-items: center;
		gap: var(--space-md);
		padding: 10px var(--space-lg);
		transition: background var(--t-150);
	}
	.rep-row-avatar {
		width: 40px; height: 40px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--border-primary), var(--surface-secondary));
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-heading);
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--text-secondary);
		border: 1.5px solid var(--border-primary);
	}
	.rep-row-info { flex: 1; min-width: 0; }
	.rep-row-name {
		font-family: var(--font-heading);
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--header-accent);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		line-height: 1.2;
	}
	.rep-row-role {
		font-size: 0.6875rem;
		color: var(--text-secondary);
		margin-top: 1px;
	}
	.rep-row-actions {
		display: flex;
		gap: var(--space-xs);
		flex-shrink: 0;
	}
	.rep-row-btn {
		width: 32px; height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--surface-secondary);
		border: 1px solid var(--border-primary);
		color: var(--text-secondary);
		text-decoration: none;
		transition: background var(--t-150), color var(--t-150), border-color var(--t-150);
	}
	.rep-row-btn svg { width: 14px; height: 14px; }

  /* §L7.4 States */
	.rep-row:hover { background: var(--surface-hover); }
	.rep-row-btn:hover {
		background: var(--surface-hover-strong);
		color: var(--header-accent);
		border-color: var(--header-accent);
	}
	.rep-row-btn:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

  /* §L7.5 Touch */
	html.touch-only .rep-row:hover { background: transparent; }
	html.touch-only .rep-row-btn:hover {
		background: var(--surface-secondary);
		color: var(--text-secondary);
		border-color: var(--border-primary);
	}


/* ================================================================
   §L8 CTA BAND
   ================================================================ */
	.cta-band {
		background: var(--gradient-cta);
		padding: var(--space-2xl) var(--space-lg);
		text-align: center;
	}
	.cta-band h2 {
		font-family: var(--font-heading);
		font-size: clamp(1.25rem, 3vw, 1.75rem);
		font-weight: 700;
		color: var(--dark-blue);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-bottom: var(--space-sm);
	}
	.cta-band p {
		font-size: 1rem;
		color: rgba(13, 27, 42, 0.75);
		margin-bottom: var(--space-lg);
	}
	.cta-band-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 14px 32px;
		background: var(--dark-blue);
		color: var(--white);
		font-size: 0.875rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		border-radius: var(--radius-xs);
		text-decoration: none;
		transition: background var(--t-150);
	}

  /* §L8.1 States */
	.cta-band-btn:hover { background: var(--mid-blue); }
	.cta-band-btn:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

  /* §L8.2 Touch */
	html.touch-only .cta-band-btn:hover { background: var(--dark-blue); }


/* ================================================================
   §L9 RESPONSIVE
   ================================================================ */
	@media (max-width: 768px) {
		.container { padding: 0 var(--space-md); }
		.loc-controls { padding: var(--space-md) 0; gap: var(--space-sm); }
		.loc-search-input { font-size: 0.875rem; padding: 10px 12px; }
		.loc-search-btn { padding: 10px 16px; }
		.loc-filters { flex-direction: column; }
		.map-legend { display: none; }
		
		#map { height: 350px; }
		.map-legend { display: none; }
		.rep-finder { padding: var(--space-xl) 0; }
		.territory-map-wrap {
			grid-template-columns: 1fr;
			gap: var(--space-lg);
		}
		.intl-regions {
			flex-direction: row;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
		}
		.intl-regions::-webkit-scrollbar { display: none; }
		.intl-card {
			min-width: 260px;
			flex-shrink: 0;
		}
		.rep-search-bar { max-width: 100%; }
		.product-directory { padding: var(--space-xl) 0; }
		.product-teams { grid-template-columns: 1fr; }
		.cta-band { padding: var(--space-xl) var(--space-md); }
		.cta-band-btn { width: 100%; justify-content: center; }
		.leaflet-popup-content { width: 270px !important; }
	}

	@media (max-width: 480px) {
		#map { height: 280px; }
	}

	@media (pointer: coarse) {
		.theme-toggle { width: 44px; height: 44px; }
		.rep-row-btn { width: 44px; height: 44px; }
		.legend-chip { min-height: 44px; }
	}


/* ================================================================
   §L10 PRINT
   ================================================================ */
	@media print {
		.loc-controls,
		.map-section,
		.theme-toggle,
		.cta-band {
			display: none;
		}
		.intl-card,
		.product-team {
			box-shadow: none;
			border: 1px solid #ccc;
			break-inside: avoid;
		}
	}
	/* §L3.5 Dark Mode — zoom controls */
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--surface-primary);
    color: var(--text-primary);
    border-bottom-color: var(--border-primary);
}
:root[data-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--surface-hover);
}
	:root[data-theme="dark"] .leaflet-bar {
		border-color: var(--border-primary);
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
	}
	/* §L3.7 Custom Zoom Icons */
	.leaflet-control-zoom-in,
	.leaflet-control-zoom-out {
		font-size: 0 !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 16px 16px !important;
	}
	.leaflet-control-zoom-in {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/><line x1='11' x2='11' y1='8' y2='14'/><line x1='8' x2='14' y1='11' y2='11'/></svg>");
	}
	.leaflet-control-zoom-out {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/><line x1='8' x2='14' y1='11' y2='11'/></svg>");
	}

  /* Dark mode — white strokes */
	:root[data-theme="dark"] .leaflet-control-zoom-in {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/><line x1='11' x2='11' y1='8' y2='14'/><line x1='8' x2='14' y1='11' y2='11'/></svg>");
	}
	:root[data-theme="dark"] .leaflet-control-zoom-out {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/><line x1='8' x2='14' y1='11' y2='11'/></svg>");
	}
	@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-control-zoom-in {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/><line x1='11' x2='11' y1='8' y2='14'/><line x1='8' x2='14' y1='11' y2='11'/></svg>");
    }
    :root:not([data-theme="light"]) .leaflet-control-zoom-out {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/><line x1='8' x2='14' y1='11' y2='11'/></svg>");
    }
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-bar a,
    :root:not([data-theme="light"]) .leaflet-bar a:hover {
        background-color: var(--surface-primary);
        color: var(--text-primary);
        border-bottom-color: var(--border-primary);
    }
    :root:not([data-theme="light"]) .leaflet-bar a:hover {
        background-color: var(--surface-hover);
    }
    :root:not([data-theme="light"]) .leaflet-bar {
        border-color: var(--border-primary);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    }
}