/* ===================================================================
   ZionGearBuilder — Zion scenery, readability & attention layer
   Loaded after each page's inline <style>, so it wins on ties.
   =================================================================== */

:root{
  --cotton:#5f9e6b;      /* cottonwood green   */
  --pine:#2f5f4a;        /* pinyon / juniper   */
  --virgin:#3fb6a8;      /* Virgin River teal  */
  --sunset:#f0913f;      /* canyon sunset      */
  --ember:#ff6b3d;       /* lit sandstone      */
  --sky:#7fd3e8;         /* desert sky         */
}

/* ---------- 1. READABILITY: hierarchy that grabs before the scroll ---------- */
.hero h1,.gb-intro h1,.kits-intro h1,.introfit h1,.introtown h1{
  letter-spacing:-.025em;line-height:1.02;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero p,.gb-intro p,.kits-intro p,.introfit p,.introtown p{
  font-size:1.06rem;line-height:1.62;max-width:60ch;opacity:.94;
}
h2{letter-spacing:-.02em;line-height:1.08}
h3{letter-spacing:-.01em}

/* eyebrows: brighter, wider, with a lit rule after them */
.eyebrow{color:var(--sunset) !important;letter-spacing:.19em !important;font-size:.7rem !important;
  display:inline-flex;align-items:center}
.eyebrow::after{content:"";width:clamp(18px,4vw,54px);height:1px;margin-left:.7rem;
  background:linear-gradient(90deg,var(--sunset),transparent)}

/* body copy: lift muted text so it stays legible on the dark rock */
.prod-card p,.kit-card .kit-sub,.gb-item p{opacity:.86;line-height:1.5}

/* ---------- 2. KIT ROWS: stop the name+description running together ---------- */
.kit-list li{
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"name btn" "why btn";
  column-gap:1.1rem;row-gap:.18rem;align-items:center;
  padding:.8rem .6rem;margin-inline:-.6rem;border-radius:10px;
  transition:background .18s ease,box-shadow .18s ease;
}
.kit-list li:hover{background:rgba(233,217,188,.045);box-shadow:inset 2px 0 0 var(--virgin)}
.kit-item-name{grid-area:name;font-size:1rem;line-height:1.25}
.kit-item-why{grid-area:why;flex:none !important;font-size:.85rem;opacity:.72;line-height:1.4}
.kit-list .amz{grid-area:btn}
@media (max-width:560px){
  .kit-list li{grid-template-columns:1fr;grid-template-areas:"name" "why" "btn";row-gap:.4rem}
  .kit-list .amz{justify-self:start}
}

/* ---------- 3. CARDS: sandstone slabs that respond ---------- */
.prod-card,.kit-card{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.prod-card:hover,.kit-card:hover{
  transform:translateY(-5px);
  border-color:rgba(63,182,168,.42);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9),0 0 30px -18px var(--virgin);
}
.prod-card:hover .prod-media{filter:brightness(1.08) saturate(1.06)}
.prod-media{transition:filter .22s}

/* buy buttons: comfortable tap target + a lit edge */
.amz{min-height:40px;display:inline-flex !important;align-items:center;justify-content:center}

/* ---------- 4. CTA: a slow light sweep so the eye returns to it ---------- */
.btn--primary,.btn-fit,.gb-restart{position:relative;overflow:hidden}
.btn--primary::after,.btn-fit::after,.gb-restart::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:zgbSweep 4.6s ease-in-out infinite;
}
@keyframes zgbSweep{0%,68%{left:-60%}100%{left:130%}}

/* ---------- 5. SCROLL PROGRESS: canyon-strata bar ---------- */
#zgbProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--rock),var(--sunset) 42%,var(--virgin) 78%,var(--cotton));
  box-shadow:0 0 12px -2px var(--virgin)}
body.zgb-sidewin #zgbProgress{right:var(--zgb-reserve)}

/* ---------- 6. SCROLL REVEAL (class added by JS, so no-JS stays visible) ---------- */
.zgb-reveal{opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.zgb-reveal.zgb-in{opacity:1;transform:none}

/* ---------- 7. THE SCENE: living canyon at the foot of each hero ---------- */
.canyon-band{height:210px;height:clamp(150px,22vw,320px) !important;opacity:1 !important}
.canyon-band--sm{height:150px;height:clamp(112px,15vw,210px) !important}
.hero{padding-bottom:190px;padding-bottom:clamp(150px,20vw,290px) !important}
.gb-intro,.kits-intro,.introfit,.introtown{padding-bottom:130px;padding-bottom:clamp(104px,14vw,190px) !important}

.zgb-river{stroke-dasharray:26 16;animation:zgbFlow 9s linear infinite}
@keyframes zgbFlow{to{stroke-dashoffset:-84}}
.zgb-sun{transform-origin:center;animation:zgbGlow 7s ease-in-out infinite}
@keyframes zgbGlow{0%,100%{opacity:.55}50%{opacity:.95}}
.zgb-ram,.zgb-deer{animation:zgbBreathe 6.5s ease-in-out infinite}
.zgb-deer{animation-delay:1.4s}
@keyframes zgbBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}

/* ---------- 8. Respect motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .zgb-reveal{opacity:1 !important;transform:none !important;transition:none}
  .btn--primary::after,.btn-fit::after,.gb-restart::after,
  .zgb-river,.zgb-sun,.zgb-ram,.zgb-deer{animation:none !important}
  .prod-card,.kit-card{transition:none}
}

/* ---------- 9. WOVEN CANYON PANELS (the framed CTA-band language, sitewide) ---------- */
.zgb-panel,.zgb-panel--top{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='22' viewBox='0 0 168 22'%3E%3Cg fill='none' stroke='%23c0562f' stroke-opacity='.42' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='11' r='3'/%3E%3Ccircle cx='16' cy='11' r='6.5'/%3E%3Cpath d='M46 8h13M47 8v6M51 8v6M55 8v6M58 8v6M59 8q4-1 4-4.5'/%3E%3Cpath d='M92 4v8M92 7l-4-3M92 7l4-3M92 12l-3 6M92 12l3 6'/%3E%3Ccircle cx='92' cy='2.2' r='1.6' fill='%23c0562f' fill-opacity='.42'/%3E%3Cpath d='M124 14c0-2 3.4-2 3.4.7 0 3.4-5.2 3.4-5.2-.7 0-4.8 7-4.8 7 1.4'/%3E%3Cpath d='M150 16q4-4 8 0t8 0'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='22' viewBox='0 0 168 22'%3E%3Cg fill='none' stroke='%23c0562f' stroke-opacity='.42' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='11' r='3'/%3E%3Ccircle cx='16' cy='11' r='6.5'/%3E%3Cpath d='M46 8h13M47 8v6M51 8v6M55 8v6M58 8v6M59 8q4-1 4-4.5'/%3E%3Cpath d='M92 4v8M92 7l-4-3M92 7l4-3M92 12l-3 6M92 12l3 6'/%3E%3Ccircle cx='92' cy='2.2' r='1.6' fill='%23c0562f' fill-opacity='.42'/%3E%3Cpath d='M124 14c0-2 3.4-2 3.4.7 0 3.4-5.2 3.4-5.2-.7 0-4.8 7-4.8 7 1.4'/%3E%3Cpath d='M150 16q4-4 8 0t8 0'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 3 L43 23 L23 43 L3 23 Z' fill='none' stroke='%23e9d9bc' stroke-opacity='.06' stroke-width='1'/%3E%3Cpath d='M23 15 L31 23 L23 31 L15 23 Z' fill='none' stroke='%23c0562f' stroke-opacity='.07' stroke-width='.9'/%3E%3C/svg%3E"),
    radial-gradient(120% 92% at 14% 0%,rgba(96,55,31,.45) 0%,rgba(34,20,16,0) 62%);
  background-position:top center,bottom center,center,top center;
  background-repeat:repeat-x,repeat-x,repeat,no-repeat;
  background-size:auto 22px,auto 22px,46px 46px,100% 100%;
}
/* intro sections keep the canyon scene at the foot, so no bottom frieze */
.zgb-panel--top{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='22' viewBox='0 0 168 22'%3E%3Cg fill='none' stroke='%23c0562f' stroke-opacity='.42' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='11' r='3'/%3E%3Ccircle cx='16' cy='11' r='6.5'/%3E%3Cpath d='M46 8h13M47 8v6M51 8v6M55 8v6M58 8v6M59 8q4-1 4-4.5'/%3E%3Cpath d='M92 4v8M92 7l-4-3M92 7l4-3M92 12l-3 6M92 12l3 6'/%3E%3Ccircle cx='92' cy='2.2' r='1.6' fill='%23c0562f' fill-opacity='.42'/%3E%3Cpath d='M124 14c0-2 3.4-2 3.4.7 0 3.4-5.2 3.4-5.2-.7 0-4.8 7-4.8 7 1.4'/%3E%3Cpath d='M150 16q4-4 8 0t8 0'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 3 L43 23 L23 43 L3 23 Z' fill='none' stroke='%23e9d9bc' stroke-opacity='.06' stroke-width='1'/%3E%3Cpath d='M23 15 L31 23 L23 31 L15 23 Z' fill='none' stroke='%23c0562f' stroke-opacity='.07' stroke-width='.9'/%3E%3C/svg%3E"),
    radial-gradient(120% 92% at 14% 0%,rgba(96,55,31,.45) 0%,rgba(34,20,16,0) 62%);
  background-position:top center,center,top center;
  background-repeat:repeat-x,repeat,no-repeat;
  background-size:auto 22px,46px 46px,100% 100%;
}
.zgb-panel > .wrap,.zgb-panel--top > .wrap{position:relative;z-index:1}

/* carved sun medallion in the corner of every card */
.prod-card,.kit-card,.cond,.store{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23e9d9bc' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3.6v2M12 18.4v2M3.6 12h2M18.4 12h2M6.2 6.2l1.5 1.5M16.3 16.3l1.5 1.5M17.8 6.2l-1.5 1.5M7.7 16.3l-1.5 1.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(61,39,24,.5),rgba(24,15,10,.5)) !important;
  background-position:right 12px top 12px,center !important;
  background-repeat:no-repeat,no-repeat !important;
  background-size:26px 26px,auto !important;
}

/* footer gets the weave too */
footer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 3 L43 23 L23 43 L3 23 Z' fill='none' stroke='%23e9d9bc' stroke-opacity='.06' stroke-width='1'/%3E%3Cpath d='M23 15 L31 23 L23 31 L15 23 Z' fill='none' stroke='%23c0562f' stroke-opacity='.07' stroke-width='.9'/%3E%3C/svg%3E") !important;background-size:46px 46px !important}

/* the vibrant band, pushed a little richer */
.final{background:linear-gradient(120deg,var(--river) 0%,#2f6f59 62%,#276352 100%) !important;
  box-shadow:inset 0 22px 40px -34px rgba(0,0,0,.75),inset 0 -22px 40px -34px rgba(0,0,0,.75)}
.final h2{text-shadow:0 3px 22px rgba(0,0,0,.32)}
.zgb-cta{padding-block:clamp(3rem,7vw,5rem)}

/* ---------- 10. TRAVELLING CYAN GLOW ALONG THE CARVED FRIEZE ---------- */
.zgb-panel,.zgb-panel--top{position:relative}

/* the lit carvings: sharp leading edge, long dissipating tail */
.zgb-frieze-glow,.zgb-frieze-dust{
  display:none;   /* only shown where CSS masks work, else it would glow solid */
  position:absolute;left:0;right:0;pointer-events:none;z-index:2;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  animation:zgbFriezeSweep 9s linear infinite;
}
.zgb-frieze-glow{
  mix-blend-mode:screen;
  top:0;height:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='22' viewBox='0 0 168 22'%3E%3Cg fill='none' stroke='%232ff3e0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='11' r='3'/%3E%3Ccircle cx='16' cy='11' r='6.5'/%3E%3Cpath d='M46 8h13M47 8v6M51 8v6M55 8v6M58 8v6M59 8q4-1 4-4.5'/%3E%3Cpath d='M92 4v8M92 7l-4-3M92 7l4-3M92 12l-3 6M92 12l3 6'/%3E%3Ccircle cx='92' cy='2.2' r='1.6' fill='%232ff3e0'/%3E%3Cpath d='M124 14c0-2 3.4-2 3.4.7 0 3.4-5.2 3.4-5.2-.7 0-4.8 7-4.8 7 1.4'/%3E%3Cpath d='M150 16q4-4 8 0t8 0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:auto 22px;background-position:top center;
  filter:drop-shadow(0 0 5px rgba(47,243,224,.95)) drop-shadow(0 0 13px rgba(47,243,224,.55));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.07) 16%,rgba(0,0,0,.22) 32%,rgba(0,0,0,.55) 44%,#000 51%,#000 55%,transparent 60%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.07) 16%,rgba(0,0,0,.22) 32%,rgba(0,0,0,.55) 44%,#000 51%,#000 55%,transparent 60%);
}
/* the powder it kicks up, drifting off the carvings */
.zgb-frieze-dust{
  top:-7px;height:30px;
  background-image:
    radial-gradient(circle,rgba(47,243,224,.85) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(159,247,238,.6) 0 .8px,transparent 1.4px);
  background-size:17px 11px,29px 15px;
  background-position:0 4px,7px 0;
  filter:blur(.5px) drop-shadow(0 0 4px rgba(47,243,224,.6));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 22%,rgba(0,0,0,.4) 36%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 52%,transparent 57%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 22%,rgba(0,0,0,.4) 36%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 52%,transparent 57%);
  animation:zgbFriezeSweep 9s linear infinite,zgbDustDrift 3.1s ease-in-out infinite alternate;
}

/* only enable the sweep where masking is supported */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .zgb-frieze-glow,.zgb-frieze-dust{display:block}
}

@keyframes zgbFriezeSweep{
  from{-webkit-mask-position:-100% 0;mask-position:-100% 0}
  to{-webkit-mask-position:200% 0;mask-position:200% 0}
}
@keyframes zgbDustDrift{from{transform:translateY(0)}to{transform:translateY(-4px)}}

@media (prefers-reduced-motion:reduce){
  .zgb-frieze-glow,.zgb-frieze-dust{display:none}
}

/* ---------- 11. TOUCH DEVICES: no sticky hover, no phantom selection ---------- */
/* On a phone the browser leaves :hover stuck on whatever was last tapped. When the
   next question renders a button in that same spot it inherits the cyan hover glow
   and looks pre-selected. Only aria-pressed should ever look chosen. */
@media (hover:none){
  .gb-opt:not([aria-pressed="true"]):hover,
  .gb-opt:not([aria-pressed="true"]):active,
  .gb-opt:not([aria-pressed="true"]):focus,
  .hike-tabs button:not([aria-pressed="true"]):hover,
  .trip-tabs button:not([aria-pressed="true"]):hover,
  .filters button:not([aria-pressed="true"]):hover{
    border-color:rgba(233,217,188,.16) !important;
    background:var(--shadow-2) !important;
    color:var(--sand) !important;
    transform:none !important;
    box-shadow:none !important;
  }
  .prod-card:hover,.kit-card:hover{transform:none !important;box-shadow:none !important;
    border-color:rgba(233,217,188,.12) !important}
  .kit-list li:hover{background:none !important;box-shadow:none !important}
  .nav-fret:hover .fret-art{filter:none !important}
  .amz:hover,.btn:hover{transform:none !important}
}
.gb-opt,.btn,.amz,.hike-tabs button,.trip-tabs button,.filters button{
  -webkit-tap-highlight-color:transparent}

/* keep the floating Amazon View toggle from covering the last card on small screens */
@media (max-width:700px){
  body{padding-bottom:64px}
  .gb-opt{padding:1.05rem 1rem}
}

/* ---------- 12. GLOW DIRECTION + EVERY TRIM BAND ---------- */
/* bottom-edge variants */
.zgb-frieze-glow.is-bottom{top:auto;bottom:0}
.zgb-frieze-dust.is-bottom{top:auto;bottom:-7px}
/* thin divider strips host the glow across their full height */
.fret{position:relative}
.fret .zgb-frieze-glow{height:100%}
.fret .zgb-frieze-dust{top:-6px;height:28px}
footer{position:relative}

/* Reversed bands travel right-to-left. Do NOT mirror the element: scaleX(-1)
   flips the glyph artwork inside every tile (the carving at x=16 lands at x=152),
   so the lit glyphs sat up to 16px off the carvings on every other band.
   Instead keep the artwork untouched and reverse only the LIGHT:
     - run the mask sweep backwards (animation ... reverse)
     - mirror the mask gradient to 270deg so the sharp leading edge still leads
       and the dissipating tail still trails. */
.is-rev.zgb-frieze-glow{
  transform:none;
  animation:zgbFriezeSweep 9s linear infinite reverse;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.07) 16%,rgba(0,0,0,.22) 32%,rgba(0,0,0,.55) 44%,#000 51%,#000 55%,transparent 60%);
  mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.07) 16%,rgba(0,0,0,.22) 32%,rgba(0,0,0,.55) 44%,#000 51%,#000 55%,transparent 60%);
}
.is-rev.zgb-frieze-dust{
  transform:none;
  animation:zgbFriezeSweep 9s linear infinite reverse,zgbDustDrift 3.1s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.16) 22%,rgba(0,0,0,.4) 36%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 52%,transparent 57%);
  mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.16) 22%,rgba(0,0,0,.4) 36%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 52%,transparent 57%);
}

/* Every trim band must render the frieze at the same tile size AND from the same
   origin, or the lit glyphs drift out of phase with the carved ones.
   The woven panels anchor their frieze at 'top center', so the glow matches that.
   The .fret divider strips have no background-position of their own, so they use
   the CSS default of 0 0 (left) — the glow was centering itself over them, which
   put it up to 46px out of phase. Both are now pinned explicitly. */
.zgb-frieze-glow{background-size:auto 22px !important;background-position:top center !important}
.fret{background-position:0 0 !important}
.fret .zgb-frieze-glow{height:100% !important;background-position:0 0 !important}
/* The footer's carvings are drawn by footer::before, which — exactly like .fret —
   has no background-position of its own and therefore tiles from 0 0 (left).
   The glow was inheriting the panels' 'top center', so it sat out of phase on
   every footer band. Both pinned to the same origin. */
footer::before{background-position:0 0 !important}
footer > .zgb-frieze-glow{height:22px !important;background-position:0 0 !important}

/* ---------- 13. DESKTOP SCALE: fill a big monitor without needing browser zoom ----------
   The layout was capped at 1180px, so on a wide screen everything sat small in the
   middle — which is why zooming in looked better. Type and container now scale up
   with the screen instead. */
@media (min-width:1500px){
  html{font-size:17.5px}
  :root{--maxw:1320px}
}
@media (min-width:1750px){
  html{font-size:18.5px}
  :root{--maxw:1420px}
}
@media (min-width:2100px){
  html{font-size:19.5px}
  :root{--maxw:1540px}
}
/* keep long paragraphs readable even as everything grows */
.hero p,.gb-intro p,.kits-intro p,.introfit p,.introtown p{max-width:62ch}

/* ---------- 14. ANGELS LANDING PERMIT CALLOUT ---------- */
.permit-note{margin-top:.85rem;padding:.8rem .95rem;border-radius:10px;
  background:linear-gradient(180deg,rgba(192,86,47,.16),rgba(192,86,47,.06));
  border:1px solid rgba(240,145,63,.32);border-left:3px solid var(--sunset);
  font-size:.86rem;line-height:1.5;opacity:.95}
.permit-note strong{color:var(--sunset)}
.permit-link{display:inline-block;margin-top:.5rem;padding:.42em .85em;border-radius:8px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:#08201d;background:linear-gradient(135deg,var(--neon),#12c9bd);
  box-shadow:0 0 16px -6px var(--neon);transition:filter .18s,box-shadow .18s}
.permit-link:hover{filter:brightness(1.08);box-shadow:0 0 24px -4px var(--neon)}
.gb-note .permit-link{margin-top:.6rem}

.permit-note--slim{font-size:.8rem;padding:.65rem .8rem;margin-top:.7rem}
.permit-note--slim .permit-link{font-size:.68rem;padding:.36em .7em}