/* ============================================================
   CAMO — Find CAMO page (Style 02 Retail Bold only).
   Every rule is scoped to html[data-style="2"], so Styles 01/03/04/05 are unaffected.
   Compact dark hero (EDGE green / GLOW gold accents), then the locator on the shared champagne-stone surface:
   search + results left, Leaflet map right; stacked with a Map / List toggle on narrow screens.
   ============================================================ */
html[data-style="2"] #findCamo [hidden], html[data-style="2"] .fc-hero [hidden]{display:none !important}
html[data-style="2"] .fc-wrap{width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(16px, 4vw, 44px)}
html[data-style="2"] .fc-din{font-family:"DIN Alternate", Bahnschrift, "Roboto Condensed", "Arial Narrow", system-ui, sans-serif}

/* ---------- hero (compact) ---------- */
html[data-style="2"] .fc-hero{position:relative; isolation:isolate; overflow:hidden; color:#F3EFE7; padding:clamp(32px, 4.2vw, 60px) 0 clamp(30px, 3.8vw, 50px);
  background:radial-gradient(ellipse 55% 120% at 0% 50%, rgba(57,255,20,.10), transparent 65%),
             radial-gradient(ellipse 55% 120% at 100% 50%, rgba(210,174,110,.14), transparent 65%),
             linear-gradient(180deg, #121316 0%, #0b0c0e 100%)}
html[data-style="2"] .fc-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.14; mix-blend-mode:soft-light;
  background:url(/assets/img/camo-pattern-nav.svg) 0 0 / 2600px 174px repeat}
html[data-style="2"] .fc-hero h1{margin:0; font:var(--font-display); font-size:clamp(44px, 7.4vw, 108px); line-height:.95; letter-spacing:var(--dspace); text-transform:uppercase; color:#fff}
/* headline: "FIND YOUR" + the official white CAMO ENERGY logo (assets/logos/camo-white.webp, original file, natural ratio 842:461).
   The logo's CAMO letters (to the green bar) sit on the text's cap band; ENERGY hangs below the baseline like a descender. */
html[data-style="2"] .fc-hero h1{display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:.3em; row-gap:.12em}
html[data-style="2"] .fc-h1-txt{display:block; padding-top:.09em}
html[data-style="2"] .fc-h1-logo{display:block; flex:none; width:auto; height:1.6em; max-width:none; margin-top:-.08em; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
@media (max-width:560px){ html[data-style="2"] .fc-h1-logo{height:2.05em; margin-top:.04em} }   /* logo wraps under FIND YOUR on phones: more presence */
html[data-style="2"] .fc-hero h1::after{content:""; display:block; flex:0 0 100%; height:4px; background-size:clamp(64px, 7vw, 110px) 100% !important; background-repeat:no-repeat !important; margin-top:clamp(12px, 1.3vw, 18px); border-radius:4px;
  background:linear-gradient(90deg, #39FF14 0 58%, transparent 58% 64%, #D2AE6E 64% 100%)}
html[data-style="2"] .fc-sub{display:flex; flex-wrap:wrap; gap:.2em .5em; margin:clamp(12px, 1.4vw, 18px) 0 0; font-weight:700; font-size:clamp(17px, 1.9vw, 25px); line-height:1.2;
  letter-spacing:.12em; text-transform:uppercase}
html[data-style="2"] .fc-sub .e{color:#39FF14; text-shadow:0 0 18px rgba(57,255,20,.22)}
html[data-style="2"] .fc-sub .g{color:#D2AE6E}
html[data-style="2"] .fc-lede{margin:clamp(10px, 1.2vw, 14px) 0 0; max-width:52ch; font-size:clamp(15px, 1.25vw, 18px); line-height:1.55; color:#D3CEC5}
html[data-style="2"] .fc-rule{display:none}
html[data-style="2"] .fc-rule i{display:block; height:3px; width:56px; border-radius:3px; background:#39FF14; box-shadow:0 0 10px rgba(57,255,20,.4)}
html[data-style="2"] .fc-rule i + i{width:34px; background:#D2AE6E; box-shadow:none}

/* ===== FIND HERO NETWORK (removable with assets/js/find-hero-bg.js) =====
   Animated EDGE / GLOW energy filaments behind the hero copy; fades in once ready. Hero size and content are unchanged. */
html[data-style="2"] .fc-net{position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 1.2s ease}
html[data-style="2"] .fc-net.is-on{opacity:1}
html:not([data-style="2"]) .fc-net{display:none}
/* ===== END FIND HERO NETWORK ===== */

/* ---------- locator surface ---------- */
html[data-style="2"] #findCamo{position:relative; isolation:isolate; color:#1d1f1c; padding:clamp(28px, 3.4vw, 48px) 0 clamp(48px, 6vw, 84px);
  background:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,250,240,.30), transparent 70%), linear-gradient(180deg, #d6cfc3 0%, #cdc4b6 100%)}
html[data-style="2"] #findCamo::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background:url(/assets/img/camo-pattern-nav.svg) 0 0 / 2600px 174px repeat}
html[data-style="2"] .fc-grid{display:grid; grid-template-columns:minmax(320px, 420px) minmax(0, 1fr); gap:clamp(18px, 2.2vw, 28px); align-items:stretch}
html[data-style="2"] .fc-panel{display:flex; flex-direction:column; min-height:0; height:clamp(560px, 70vh, 720px); padding:clamp(16px, 1.6vw, 22px);
  background:rgba(250,247,241,.82); border:1px solid rgba(40,32,20,.10); border-radius:18px; box-shadow:0 22px 50px -30px rgba(40,30,16,.5)}
html[data-style="2"] .fc-preview{margin:0 0 12px; padding:8px 12px; border-radius:10px; background:#0d0f0e; color:#39FF14; font:700 11.5px/1.3 system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase}

/* ===== FIND ENERGY STAGE (continuous background; removable: unwrap .fc-stage in retailers.html, delete this block and the tall crops) =====
   One dark foundation + one canvas behind BOTH the hero and the locator, so there is no seam. The hero part is pixel-for-pixel the
   approved composition; below it the same artwork continues and the shader dims / calms it. The camouflage texture and the
   topographic contours are shared overlays; the ivory panel and the map sit on top, untouched. */
html[data-style="2"] .fc-stage{position:relative; isolation:isolate;
  /* the hero's original foundation, expressed in hero-height units (--fc-hh) so it is identical inside the hero and simply continues below */
  background:radial-gradient(ellipse 55% calc(var(--fc-hh, 397px) * 1.2) at 0% calc(var(--fc-hh, 397px) * .5), rgba(57,255,20,.10), transparent 65%),
             radial-gradient(ellipse 55% calc(var(--fc-hh, 397px) * 1.2) at 100% calc(var(--fc-hh, 397px) * .5), rgba(210,174,110,.14), transparent 65%),
             linear-gradient(180deg, #121316 0, #0b0c0e var(--fc-hh, 397px), #0a0b0d 100%)}
html[data-style="2"] .fc-stage > .fc-net{z-index:0}
html[data-style="2"] .fc-stage::before{content:""; position:absolute; inset:0; z-index:0;   /* under the canvas, as in the approved hero */ pointer-events:none; opacity:.14; mix-blend-mode:soft-light;
  background:url(/assets/img/camo-pattern-nav.svg) 0 0 / 2600px 174px repeat}
html[data-style="2"] .fc-stage > .fc-hero, html[data-style="2"] .fc-stage > #findCamo{position:relative; z-index:2; background:none}
html[data-style="2"] .fc-stage > .fc-hero{isolation:auto}
html[data-style="2"] .fc-stage > .fc-hero::before, html[data-style="2"] .fc-stage > #findCamo::before{content:none}
/* topographic contours: faint light lines, fading in below the hero (no boundary), only behind the locator */
html[data-style="2"] .fc-stage > #findCamo{isolation:auto}
html[data-style="2"] .fc-stage > #findCamo::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(/assets/img/find/fc-terrain-contours.svg) center / cover no-repeat; filter:invert(1); opacity:.075;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 40px), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 40px), transparent 100%)}
/* the panel was a translucent ivory over stone: keep that exact look, now opaque, so the dark energy doesn't tint it */
html[data-style="2"] .fc-stage .fc-panel{background:#f3efe8}
/* ===== END FIND ENERGY STAGE ===== */

/* search */
html[data-style="2"] .fc-search label{display:block; margin:2px 0 12px; font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#3b3d37}
html[data-style="2"] .fc-field{position:relative; display:flex; gap:10px}
html[data-style="2"] .fc-input{position:relative; flex:1; min-width:0}
html[data-style="2"] .fc-input svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#5b5d56; pointer-events:none}
html[data-style="2"] .fc-input input{width:100%; height:58px; padding:0 44px 0 46px; border:2px solid rgba(29,31,28,.34); border-radius:14px; background:#fff; color:#141513;
  box-shadow:0 1px 0 rgba(255,255,255,.8), 0 8px 18px -12px rgba(30,24,14,.45); font:600 17px/1 system-ui, -apple-system, "Segoe UI", sans-serif; transition:border-color .2s, box-shadow .2s}
html[data-style="2"] .fc-input input::placeholder{color:#6d6f68}
html[data-style="2"] .fc-input input:focus{outline:none; border-color:#1d1f1c; box-shadow:0 0 0 3px rgba(57,255,20,.45)}
html[data-style="2"] .fc-input input:disabled{background:#f1ede5; cursor:not-allowed}
html[data-style="2"] .fc-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:#3b3d37; font-size:20px; line-height:1; cursor:pointer}
html[data-style="2"] .fc-clear:hover{background:rgba(29,31,28,.07)}
html[data-style="2"] .fc-btn{height:58px; padding:0 22px; border:0; border-radius:14px; background:#39FF14; color:#0b0c0e; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), 0 8px 20px -10px rgba(44,122,18,.7); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:background .2s, box-shadow .2s}
html[data-style="2"] .fc-btn:hover{background:#5dff3d; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), 0 10px 24px -10px rgba(44,122,18,.85)}
html[data-style="2"] .fc-geo{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 12px 8px 10px; border:1.5px solid rgba(29,31,28,.25); border-radius:999px; background:transparent; color:#1d1f1c;
  font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer}
html[data-style="2"] .fc-geo:hover{border-color:#1d1f1c; background:rgba(255,255,255,.5)}
html[data-style="2"] .fc-geo[aria-pressed="true"]{border-color:#2c7a12; color:#1f5e0b; background:rgba(57,255,20,.10)}
html[data-style="2"] .fc-geo:disabled, html[data-style="2"] .fc-btn:disabled{opacity:.5; cursor:not-allowed}
html[data-style="2"] #findCamo :is(button, a):focus{outline:none}
html[data-style="2"] #findCamo :is(button, a):focus-visible{outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 5px #1d1f1c}
html[data-style="2"] .fc-status{min-height:1.4em; margin:14px 0 8px; font-size:14px; line-height:1.4; color:#3b3d37}

/* results */
html[data-style="2"] .fc-results{flex:1; min-height:0; overflow:auto; margin:0 -6px; padding:2px 6px 6px; list-style:none; overscroll-behavior:contain}
html[data-style="2"] .fc-card{position:relative; display:flex; flex-direction:column; margin:0 0 10px; border:1px solid rgba(40,32,20,.12); border-radius:14px; background:#fff;
  transition:border-color .2s, box-shadow .2s}
html[data-style="2"] .fc-card.is-selected{border-color:#1d1f1c; box-shadow:inset 4px 0 0 #39FF14, 0 10px 24px -16px rgba(30,24,14,.55)}
html[data-style="2"] .fc-card-main{display:flex; flex-direction:column; gap:4px; padding:14px 16px 8px; border:0; border-radius:14px 14px 0 0; background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit}
html[data-style="2"] .fc-card-name{font-weight:800; font-size:16px; line-height:1.25; letter-spacing:.01em; color:#141513}
html[data-style="2"] .fc-card-addr{font-size:14.5px; line-height:1.45; color:#3b3d37}
html[data-style="2"] .fc-card-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
html[data-style="2"] .fc-chip{padding:3px 8px; border-radius:999px; background:#0d0f0e; font-weight:800; font-size:10.5px; letter-spacing:.14em}
html[data-style="2"] .fc-chip--edge{color:#39FF14}
html[data-style="2"] .fc-chip--glow{color:#E3C58F}
html[data-style="2"] .fc-dist{padding:3px 8px; border-radius:999px; background:rgba(44,122,18,.12); color:#1f5e0b; font-weight:700; font-size:12px}
html[data-style="2"] .fc-dist--na, html[data-style="2"] .fc-nomap{padding:3px 8px; border-radius:999px; background:rgba(29,31,28,.07); color:#55574f; font-weight:600; font-size:12px}
html[data-style="2"] .fc-dir{align-self:flex-start; margin:0 16px 14px; padding:6px 0 2px; color:#1d1f1c; font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  border-bottom:2px solid #39FF14}
html[data-style="2"] .fc-dir:hover{color:#000}

/* empty / no-results */
html[data-style="2"] .fc-empty, html[data-style="2"] .fc-none{margin:8px 0 0; padding:clamp(18px, 2vw, 26px); border:1px dashed rgba(29,31,28,.28); border-radius:14px; background:rgba(255,255,255,.55)}
html[data-style="2"] .fc-empty-title, html[data-style="2"] .fc-none-title{margin:0; font-weight:800; font-size:18px; line-height:1.3; color:#141513}
html[data-style="2"] .fc-empty p, html[data-style="2"] .fc-none p{margin:8px 0 0; font-size:15px; line-height:1.55; color:#3b3d37}
html[data-style="2"] .fc-empty-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
html[data-style="2"] .fc-pill{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:#0d0f0e; color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none}
html[data-style="2"] .fc-pill-ico{display:block; flex:none; width:22px; height:22px; margin:-2px 0 -2px -4px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}   /* approved EDGE / GLOW power buttons (scaled copies) */
html[data-style="2"] .fc-pill--ghost{background:transparent; color:#1d1f1c; border:1.5px solid rgba(29,31,28,.3)}
html[data-style="2"] .fc-none-clear{margin-top:12px; padding:0; border:0; background:none; color:#1d1f1c; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; border-bottom:2px solid #39FF14; cursor:pointer}

/* map */
html[data-style="2"] .fc-mapcol{position:relative; min-height:0; height:clamp(560px, 70vh, 720px); border-radius:18px; overflow:hidden; background:#0b0c0e;
  box-shadow:0 22px 50px -30px rgba(20,16,10,.6), 0 0 0 1px rgba(40,32,20,.12)}
html[data-style="2"] .fc-map{position:absolute; inset:0; z-index:0; font:inherit}
html[data-style="2"] .fc-map-ph{position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:#D3CEC5;
  background:radial-gradient(ellipse 60% 55% at 40% 45%, rgba(57,255,20,.10), transparent 70%), radial-gradient(ellipse 50% 50% at 70% 60%, rgba(210,174,110,.12), transparent 70%), linear-gradient(180deg, #15171b, #0b0c0e)}
html[data-style="2"] .fc-map-ph::before{content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:soft-light; background:url(/assets/img/camo-pattern-nav.svg) 0 0 / 2200px 147px repeat}
html[data-style="2"] .fc-map-ph > div{position:relative; max-width:34ch}
html[data-style="2"] .fc-map-ph .fc-ph-pin{display:block; width:46px; height:46px; margin:0 auto 14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#0d0f0e; box-shadow:inset 0 0 0 3px #39FF14, 0 0 22px rgba(57,255,20,.35)}
html[data-style="2"] .fc-map-ph p{margin:0; font-size:15px; line-height:1.55}
html[data-style="2"] .fc-map .leaflet-tile-pane{filter:saturate(.72) sepia(.12) brightness(1.02) contrast(.98)}   /* warm, quieter tiles that sit with the stone palette */
html[data-style="2"] .fc-map .leaflet-control-zoom a{color:#1d1f1c}
html[data-style="2"] .fc-map .leaflet-control-attribution{background:rgba(250,247,241,.85); font-size:11px}
html[data-style="2"] .fc-map-note{position:absolute; left:14px; bottom:30px; z-index:500; max-width:calc(100% - 28px); margin:0; padding:9px 14px; border-radius:999px; pointer-events:none;
  background:rgba(13,15,14,.86); color:#F3EFE7; font-size:13px; line-height:1.35; box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
html[data-style="2"] .fc-map-note::before{content:""; display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:#39FF14; box-shadow:0 0 8px #39FF14; vertical-align:1px}
/* markers and popup */
html[data-style="2"] .fc-pin-wrap{background:none; border:0}
/* retailer marker = the approved EDGE power button (scaled copy); selected: slightly larger with a soft green halo, no animation loop */
html[data-style="2"] .fc-pin{display:block; width:30px; height:30px; border-radius:50%; background:url(/assets/img/find/fc-edge-power-96.webp) center / contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)); transition:transform .2s, filter .2s}
html[data-style="2"] .fc-pin.is-selected{transform:scale(1.18); filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(57,255,20,.75))}
html[data-style="2"] .leaflet-marker-icon.fc-pin-wrap:focus-visible{outline:none}
html[data-style="2"] .leaflet-marker-icon.fc-pin-wrap:focus-visible .fc-pin{box-shadow:0 0 0 3px #fff, 0 0 0 5px #0d0f0e}
html[data-style="2"] .fc-map .leaflet-popup-content-wrapper{border-radius:12px; box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
html[data-style="2"] .fc-pop{display:flex; flex-direction:column; gap:4px; min-width:180px; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:#1d1f1c}
html[data-style="2"] .fc-pop-name{font-weight:800; font-size:15px; color:#141513}
html[data-style="2"] .fc-pop-dir{align-self:flex-start; margin-top:6px; color:#1d1f1c !important; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid #39FF14}

/* clusters (dense areas): CAMO-dark disc with a green ring and the count; splits apart as you zoom in */
html[data-style="2"] .fc-cluster-wrap{background:none; border:0}
html[data-style="2"] .fc-cluster{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#0d0f0e; color:#fff;
  box-shadow:inset 0 0 0 3px #39FF14, 0 0 0 4px rgba(243,239,232,.85), 0 3px 10px rgba(0,0,0,.45); font:800 14px/1 system-ui, sans-serif}
/* LOCAL REVIEW MODE only (localhost + ?review=1): status chip and source notes on each card; never rendered for consumers */
html[data-style="2"] .fc-reviewing .fc-preview{background:#3a1f00; color:#ffd27a}
html[data-style="2"] .fc-rv{align-self:flex-start; margin-top:6px; padding:2px 8px; border-radius:6px; font:700 10.5px/1.4 system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase}
html[data-style="2"] .fc-rv--ready_for_approval{background:#d9f7cc; color:#1f5e0b}
html[data-style="2"] .fc-rv--check_position, html[data-style="2"] .fc-rv--check_details{background:#fff0c2; color:#6b4a00}
html[data-style="2"] .fc-rv--unresolved{background:#fbd5d0; color:#8a1c0f}
html[data-style="2"] .fc-rv-notes{margin-top:4px; font-size:12px; line-height:1.4; color:#6d5f4b}

/* mobile: Map / List toggle */
html[data-style="2"] .fc-toggle{display:none}
@media (max-width:860px){
  html[data-style="2"] .fc-grid{grid-template-columns:minmax(0, 1fr)}
  html[data-style="2"] .fc-panel{height:auto}
  html[data-style="2"] .fc-results{overflow:visible; margin:0; padding:0}
  html[data-style="2"] .fc-toggle:not([hidden]){display:inline-flex; margin:4px 0 12px; padding:4px; border-radius:999px; background:rgba(29,31,28,.08); align-self:flex-start}
  html[data-style="2"] .fc-toggle button{min-width:88px; min-height:40px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:#1d1f1c; font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
  html[data-style="2"] .fc-toggle button[aria-pressed="true"]{background:#0d0f0e; color:#fff}
  html[data-style="2"] .fc-mapcol{height:min(70vh, 560px)}
  html[data-style="2"] #findCamo[data-state="ready"][data-view="list"] .fc-mapcol{display:none}
  html[data-style="2"] #findCamo[data-state="ready"][data-view="map"] .fc-results, html[data-style="2"] #findCamo[data-state="ready"][data-view="map"] .fc-none{display:none}
  html[data-style="2"] #findCamo[data-state="loading"] .fc-mapcol{display:none}
  html[data-style="2"] #findCamo:not([data-state="ready"]) .fc-mapcol{height:min(56vh, 420px)}
  html[data-style="2"] .fc-field{flex-wrap:nowrap}
  html[data-style="2"] .fc-btn{padding:0 16px}
  html[data-style="2"] .fc-input input{padding:0 34px 0 38px; font-size:16px}   /* 16px keeps iOS from zooming on focus */
  html[data-style="2"] .fc-input svg{left:13px}
}
@media (max-width:400px){   /* smallest phones: full-width input, Search as a full-width primary bar beneath it */
  html[data-style="2"] .fc-field{flex-wrap:wrap}
  html[data-style="2"] .fc-input{flex-basis:100%}
  html[data-style="2"] .fc-btn{width:100%; height:52px}
}
@media (prefers-reduced-motion:reduce){ html[data-style="2"] #findCamo *{transition:none !important} }