/* ==========================================================================
   HTX GUNS / American Patriot Outdoors — browse layer

   Palette is taken from the actual logo seal, not invented:
     navy  #181060   red #D82010   white #F8F8F8
   Navy carries the page, red is the ONLY accent and is spent sparingly —
   on calls to action and one rule under each section head. Everything else
   is navy, white and the greys between them, so the red still means
   something when it appears.

   The site must work with JavaScript disabled: the mobile drawer is a CSS
   checkbox, and the intro overlay is inert without JS (it starts hidden and
   is only ever shown by script, so no-JS and crawlers see the page directly).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette, revised 2026-08-15 on operator feedback: "more depth and darkness,
   easier to read."

   Two changes carry it. First, the neutrals are no longer flat navy tints --
   they run cool slate with a blue bias, so surfaces separate from the ground
   by luminance rather than by hue, which is what makes a dense catalogue page
   readable. Second, EVERY secondary text token was lifted: --ink-2 and
   --ink-3 were failing at small sizes, which is the "grey text" complaint.
   Both now clear 4.5:1 on their own surface in both themes.

   Navy stays the brand ground for hero, footer and megamenu; red stays the
   single accent.
   -------------------------------------------------------------------------- */

:root{
  /* light */
  --bg:#EFF1F6;
  --surface:#FFFFFF;
  --surface-2:#E4E7F0;
  --surface-3:#D4D9E8;
  --ink:#0D0C22;
  --ink-2:#3D3C5C;          /* was #4B4A6B -- darker for body copy */
  --ink-3:#5D5C7E;          /* was #7C7B9A -- the main readability fix */
  --rule:#CFD4E4;
  --rule-strong:#A2A8C2;
  --navy:#181060;
  --navy-mid:#120C4A;
  --navy-deep:#0B0733;
  --on-navy:#F7F8FC;
  --on-navy-2:#C9CBE4;      /* readable secondary ON navy */
  --accent:#C4190B;
  --accent-hi:#9E1408;
  --accent-soft:#FBE9E7;
  --shadow:0 1px 2px rgba(13,12,34,.07), 0 14px 36px -20px rgba(13,12,34,.4);
  --maxw:1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070615;
    --surface:#0E0D26;
    --surface-2:#151332;
    --surface-3:#1E1B44;
    --ink:#F4F5FB;
    --ink-2:#C3C4DE;        /* was #A9A8CB */
    --ink-3:#9695B8;        /* was #76759D -- was the worst offender */
    --rule:#221E4E;
    --rule-strong:#3A3475;
    --navy:#1A1268;
    --navy-mid:#120C4A;
    --navy-deep:#05041A;
    --on-navy:#F7F8FC;
    --on-navy-2:#C9CBE4;
    --accent:#FF4A34;
    --accent-hi:#FF7A66;
    --accent-soft:#2E1015;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 14px 36px -20px rgba(0,0,0,.95);
  }
}

:root[data-theme="dark"]{
  --bg:#070615;
  --surface:#0E0D26;
  --surface-2:#151332;
  --surface-3:#1E1B44;
  --ink:#F4F5FB;
  --ink-2:#C3C4DE;
  --ink-3:#9695B8;
  --rule:#221E4E;
  --rule-strong:#3A3475;
  --navy:#1A1268;
  --navy-mid:#120C4A;
  --navy-deep:#05041A;
  --on-navy:#F7F8FC;
  --on-navy-2:#C9CBE4;
  --accent:#FF4A34;
  --accent-hi:#FF7A66;
  --accent-soft:#2E1015;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 14px 36px -20px rgba(0,0,0,.95);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono,.eyebrow,.flabel,.chip,.chiplink,.tcount,.cbrand,.count,.crumbs,
.fine,.fineprint,.tlabel,.snum,.plate-mark{
  font-family:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hi);text-decoration:underline;text-underline-offset:2px;}
a:focus-visible,summary:focus-visible,button:focus-visible,
.navtoggle-cb:focus-visible + .navtoggle{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}
/* The checkbox now sits outside .bar so it can be a sibling of .mainnav (see
   build.nav), which puts it out of reach of the `+` adjacent-sibling rule
   above. :has() re-attaches the focus ring to the label wherever it lives. */
header.site:has(.navtoggle-cb:focus-visible) .navtoggle{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

h1,h2,h3{text-wrap:balance;margin:0;}
p{margin:0 0 1em;}
img{max-width:100%;height:auto;display:block;}

main{max-width:var(--maxw);margin:0 auto;padding:0 20px 80px;}

/* The landing page runs edge-to-edge so the hero and trust strip can bleed.
   Its inner sections are re-constrained here rather than with a 100vw
   breakout, which would overflow by the scrollbar width and trip the
   overflow assertion in verify.py. */
main.wide{max-width:none;padding:0 0 80px;}
main.wide > .block{
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px;
}
main.wide > .cta{
  max-width:calc(var(--maxw) - 40px);margin-left:auto;margin-right:auto;
}
.hero.wide,.trust.wide{max-width:none;padding:0;}

/* ==========================================================================
   Intro overlay
   Starts display:none. Script shows it once per session, then fades it.
   No JS, reduced motion, or a repeat visit => never seen, and the page
   underneath is fully rendered the whole time, so it cannot affect LCP text
   or hide anything from a crawler.
   ========================================================================== */

.intro{
  display:none;
  position:fixed;inset:0;z-index:999;
  background:var(--navy-deep);
  align-items:center;justify-content:center;
  flex-direction:column;gap:22px;
}
.intro.run{display:flex;}
.intro.done{opacity:0;pointer-events:none;transition:opacity .5s ease;}
.intro-seal{
  width:132px;height:132px;
  animation:sealin .9s cubic-bezier(.2,.8,.25,1) both;
}
.intro-word{
  font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(245,246,251,.62);
  font-family:ui-monospace,Consolas,monospace;
  animation:wordin .6s .35s ease both;
  padding-left:.42em;
}
.intro-bar{
  width:180px;height:2px;background:rgba(245,246,251,.16);overflow:hidden;
}
.intro-bar i{
  display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left;animation:barin 1.1s .1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes sealin{
  from{opacity:0;transform:scale(.72) rotate(-32deg);}
  to{opacity:1;transform:scale(1) rotate(0);}
}
@keyframes wordin{from{opacity:0;letter-spacing:.62em;}to{opacity:1;}}
@keyframes barin{from{transform:scaleX(0);}to{transform:scaleX(1);}}

@media (prefers-reduced-motion: reduce){
  .intro{display:none !important;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Header
   ========================================================================== */

header.site{
  border-bottom:1px solid var(--rule);
  background:var(--surface);
  position:sticky;top:0;z-index:60;
}
.bar{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:18px;min-height:70px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand img{width:38px;height:38px;flex:none;}
.bstack{display:flex;flex-direction:column;line-height:1.05;}
.bname{font-weight:800;letter-spacing:-.02em;font-size:19px;}
.bname i{font-style:normal;color:var(--accent);}
.bsub{
  font-family:ui-monospace,Consolas,monospace;
  font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  margin-top:3px;
}

.nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.nav a{color:var(--ink-2);font-size:14.5px;font-weight:550;padding:6px 0;white-space:nowrap;}
.nav a:hover{color:var(--ink);text-decoration:none;}
.navbuy{
  color:#fff !important;background:var(--accent);
  font-weight:650 !important;border-radius:3px;padding:9px 15px !important;
}
.navbuy:hover{background:var(--accent-hi);}

.navtoggle-cb{position:absolute;opacity:0;width:0;height:0;}
.navtoggle{display:none;width:40px;height:34px;cursor:pointer;
  align-items:center;justify-content:center;
  border:1px solid var(--rule-strong);border-radius:3px;}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{
  display:block;width:17px;height:1.5px;background:var(--ink);content:"";position:relative;
}
.navtoggle span::before{position:absolute;top:-5.5px;}
.navtoggle span::after{position:absolute;top:5.5px;}

@media (max-width:940px){
  .navtoggle{display:flex;}
  /* There is no `.nav` element on this site -- the mobile drawer is
     `.mainnav` (see the rules near the megamenu). The `.nav` rules that used
     to live here were vestigial from an earlier header and, because they LOOK
     like the drawer implementation, they masked the fact that the real one
     was broken. Deleted deliberately; do not reinstate. */
  .navbuy{margin-top:12px;text-align:center;border-bottom:none !important;}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(216,32,16,.16) 0%, transparent 52%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 78%);
  color:var(--on-navy);
  border-bottom:3px solid var(--accent);
}

/* ---- hero photo slideshow --------------------------------------------
   The operator's own shop and product photos, crossfading behind the
   headline. Frames are pre-darkened at build time; this scrim only has to
   finish the job, so the photograph still reads as a photograph while white
   text stays comfortably legible over any frame. */
.hbg{position:absolute;inset:0;z-index:-2;}
.hbg-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease-in-out;
}
.hbg-img.on{opacity:1;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,6,32,.94) 0%, rgba(7,6,32,.80) 46%,
                    rgba(7,6,32,.55) 100%),
    linear-gradient(180deg, rgba(7,6,32,.55) 0%, transparent 30%,
                    rgba(7,6,32,.70) 100%);
}
@media (max-width:900px){
  /* on a phone the text sits over the middle of the frame, so it needs an
     even ground rather than a left-weighted one */
  .hero::after{background:linear-gradient(180deg,
    rgba(7,6,32,.86) 0%, rgba(7,6,32,.78) 55%, rgba(7,6,32,.92) 100%);}
}

.hero-in{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;padding:64px 20px 56px;
  display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
}

/* ---- two-layer seal: ring holds still, mortar turns inside ------------ */
.seal{
  position:relative;display:block;width:min(230px,58vw);aspect-ratio:1/1;
  margin:0 auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));
}
.seal img{position:absolute;inset:0;width:100%;height:100%;}
.seal-inner{animation:sealspin 9s ease-in-out infinite;transform-origin:50% 50%;}

/* A SWAY, not a full revolution. A cannon is strongly orientation-dependent
   -- spun 360 it spends half the cycle standing on its muzzle, which reads
   as a broken image rather than an animation. Rocking a few degrees keeps
   the piece upright while the ring stays fixed, which is the effect asked
   for. For a full rotation instead, swap the keyframes below for
   `from{rotate(0)} to{rotate(360deg)}` and use a linear 26s timing. */
@keyframes sealspin{
  0%   {transform:rotate(-7deg);}
  50%  {transform:rotate(7deg);}
  100% {transform:rotate(-7deg);}
}
.seal:hover .seal-inner{animation-play-state:paused;}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;padding:44px 20px 40px;gap:30px;}
  .hero-seal{order:-1;}
}
.hero .eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,246,251,.66);margin:0 0 18px;
}
.hero h1{
  font-size:clamp(38px,6.4vw,66px);line-height:1;letter-spacing:-.035em;
  font-weight:800;margin:0 0 20px;color:#fff;
}
.hero h1 em{font-style:normal;color:var(--accent-hi);}
.hero .lede{
  font-size:18.5px;line-height:1.52;color:rgba(245,246,251,.8);
  max-width:52ch;margin:0 0 28px;
}
.hero-seal img{width:min(230px,58vw);margin:0 auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));}
.herobtns{display:flex;flex-wrap:wrap;gap:12px;}

/* trust strip */
.trust{background:var(--navy-deep);border-bottom:1px solid rgba(245,246,251,.1);}
.trust-in{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
  /* 155px keeps this two-up on a 390px phone instead of four stacked rows
     pushing the first real section below two screens of scroll. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(155px,100%),1fr));
}
.tcell{padding:15px 18px 15px 0;color:var(--on-navy);}
.tcell b{display:block;font-size:14px;font-weight:650;}
.tlabel{
  display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(245,246,251,.5);margin-top:3px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-block;padding:13px 22px;border:1px solid var(--rule-strong);
  border-radius:3px;font-size:14.5px;font-weight:650;color:var(--ink);
  background:var(--surface);
}
.btn:hover{border-color:var(--ink);text-decoration:none;}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:#fff;}
.btn.ghost{background:transparent;border-color:rgba(245,246,251,.32);color:#fff;}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);}

/* ==========================================================================
   Sections
   ========================================================================== */

.block{padding:56px 0;}
.shead{margin-bottom:26px;}
.shead h2{
  font-size:clamp(23px,3.2vw,32px);letter-spacing:-.025em;font-weight:780;
  margin:0 0 10px;
}
.shead h2::after{
  content:"";display:block;width:44px;height:3px;background:var(--accent);
  margin-top:12px;
}
.blurb{color:var(--ink-2);max-width:62ch;margin:0;}

.crumbs{
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;
}
.crumbs a{color:var(--ink-3);}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{color:var(--rule-strong);}

.head{padding:34px 0 28px;border-bottom:1px solid var(--rule);margin-bottom:34px;}
.head h1{
  font-size:clamp(31px,5vw,48px);line-height:1.05;letter-spacing:-.03em;
  font-weight:800;margin:0 0 14px;
}
.lede{font-size:18.5px;line-height:1.5;color:var(--ink-2);max-width:62ch;margin:0 0 22px;}
.count{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.count strong{color:var(--ink);font-size:15px;}

/* ==========================================================================
   Showcase tiles (marketplace rail)
   ========================================================================== */

.showcase{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.scard{
  position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--on-navy);padding:24px 22px 20px;min-height:150px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--rule);
}
.scard:hover{text-decoration:none;}
.scard::before{
  content:attr(data-mark);
  position:absolute;right:14px;bottom:6px;
  font-family:ui-monospace,Consolas,monospace;font-weight:700;
  font-size:58px;line-height:1;letter-spacing:-.05em;
  color:rgba(245,246,251,.06);
  pointer-events:none;
}
.scard::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .28s ease;
}
.scard:hover::after{transform:scaleY(1);}
.scard b{font-size:19px;font-weight:750;letter-spacing:-.015em;display:block;color:#fff;}
.scard span{font-size:13.5px;color:rgba(245,246,251,.66);margin-top:5px;display:block;}
.scard .go{
  margin-top:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-family:ui-monospace,Consolas,monospace;color:var(--accent-hi);
}

/* ==========================================================================
   Story
   ========================================================================== */

.story{
  display:grid;gap:44px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start;
}
.story p{color:var(--ink-2);max-width:60ch;}
.story .eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.story h2{
  font-size:clamp(25px,3.6vw,36px);letter-spacing:-.028em;font-weight:790;
  margin:0 0 20px;line-height:1.12;
}
.storyside{
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--accent);
  padding:26px;box-shadow:var(--shadow);
}
.sstats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-bottom:22px;}
.sstat{background:var(--surface);padding:16px 14px;}
.snum{display:block;font-size:26px;font-weight:750;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
.sstat span:last-child{display:block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:7px;
  font-family:ui-monospace,Consolas,monospace;}
.storyside .addr{font-size:14.5px;color:var(--ink-2);margin:0 0 6px;}
.storyside .addr strong{color:var(--ink);}

/* ==========================================================================
   Product cards
   ========================================================================== */

.grid{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr));
}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--rule-strong);transform:translateY(-2px);}

/* image slot. `plate` is the designed fallback used until a licensed image
   feed exists -- see README. When p.image is present the <img> replaces it
   with no other change to the card. */
.cimg{
  aspect-ratio:5/4;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1px solid var(--rule);position:relative;
}
.cimg img{width:100%;height:100%;object-fit:contain;padding:10px;}

/* Branded specimen plate -- the fallback shown until a licensed product-image
   feed exists. The seal sits behind at low opacity and the brand initials in
   front, so an imageless card reads as a designed plate rather than as a
   missing photo. Swapping in real images changes nothing else about the card. */
.plate{
  width:100%;height:100%;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.plate::before{
  content:"";position:absolute;inset:0;
  background:url("/assets/apo-logo.png") center/58% no-repeat;
  opacity:.10;pointer-events:none;
}
.plate::after{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(245,246,251,.14);border-radius:2px;pointer-events:none;
}
.plate-mark{
  position:relative;
  font-size:27px;font-weight:700;letter-spacing:.14em;
  color:rgba(245,246,251,.94);
  text-shadow:0 2px 10px rgba(7,6,32,.7);
}
.cbody{padding:15px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1;}

/* Compact listing card: a small brand medallion instead of a full image slot. */
.card.compact .cbody{padding:16px;gap:10px;}
.crow{display:flex;align-items:flex-start;gap:12px;}
.cmeta{display:flex;flex-direction:column;gap:4px;min-width:0;}
.medal{
  width:52px;height:52px;flex:none;border-radius:3px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Consolas,monospace;font-weight:700;
  font-size:13px;letter-spacing:.07em;color:rgba(245,246,251,.95);
  position:relative;overflow:hidden;
}
.medal::before{
  content:"";position:absolute;inset:0;
  background:url("/assets/apo-logo.png") center/74% no-repeat;
  opacity:.14;pointer-events:none;
}
img.medal{object-fit:contain;background:var(--surface-2);padding:3px;}
img.medal::before{content:none;}
.cbrand{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.cmodel{font-size:16px;font-weight:690;letter-spacing:-.012em;line-height:1.25;
  margin:0;overflow-wrap:anywhere;}
.chips{display:flex;flex-wrap:wrap;gap:5px;}
.chip{font-size:10.5px;letter-spacing:.04em;padding:2px 7px;
  background:var(--surface-2);color:var(--ink-2);border-radius:2px;}
.chip.vcount{background:transparent;color:var(--ink-3);border:1px solid var(--rule);}
.cbuy{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:650;
  border-top:1px solid var(--rule);}
.gridmore{margin:20px 0 0;font-size:14px;color:var(--ink-3);}

/* ==========================================================================
   Facets, tiles, why-cards
   ========================================================================== */

.facets{padding:24px 0 0;}
.flabel{display:block;font-family:ui-monospace,Consolas,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:11px;}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;}
.chiplink{border:1px solid var(--rule-strong);border-radius:3px;padding:7px 12px;
  font-size:12.5px;color:var(--ink-2);background:var(--surface);}
.chiplink span{color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums;}
.chiplink:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}

.tiles{display:grid;gap:1px;background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr));}
.tile{background:var(--surface);padding:18px;display:flex;
  justify-content:space-between;align-items:baseline;gap:10px;color:var(--ink);
  box-shadow:0 0 0 1px var(--rule);}
.tile:hover{background:var(--surface-2);text-decoration:none;}
.tname{font-weight:650;font-size:15px;letter-spacing:-.008em;}
.tcount{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

.wgrid{display:grid;gap:1px;background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr));}
.wcard{background:var(--surface);padding:22px;box-shadow:0 0 0 1px var(--rule);}
.wcard h3{font-size:15.5px;font-weight:720;margin:0 0 8px;letter-spacing:-.01em;}
.wcard h3::before{
  content:"";display:inline-block;width:14px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:8px;
}
.wcard p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.5;}

.stampflag{
  background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:15px 18px;font-size:15px;max-width:66ch;margin:0;color:var(--ink-2);
}
.stampflag strong{color:var(--ink);}
.note{border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--surface);padding:17px 19px;max-width:66ch;
  color:var(--ink-2);font-size:15px;}

.twocol{display:grid;gap:36px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.twocol h2{font-size:24px;letter-spacing:-.02em;margin:0 0 12px;}
.twocol p{max-width:60ch;color:var(--ink-2);}
.infocard{background:var(--surface);border:1px solid var(--rule);
  border-top:3px solid var(--accent);padding:24px;align-self:start;box-shadow:var(--shadow);}

/* ==========================================================================
   Category / brand prose, and the state shipping tier
   ========================================================================== */

/* Written copy that sits BELOW the products, so the page leads with what the
   visitor came for and the prose supports it rather than blocking it. */
.guidecopy{border-top:1px solid var(--rule);}
.guidecopy h2{font-size:22px;letter-spacing:-.02em;margin:0 0 12px;}
.guidecopy p{max-width:68ch;color:var(--ink-2);margin:0 0 14px;}
.guidecopy p:last-child{margin-bottom:0;}

/* Any wide block gets its own scroller -- the 51-row state table is far wider
   than a phone and must never push the page body sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);background:var(--surface);}
.statetable{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px;}
.statetable th,.statetable td{padding:11px 16px;text-align:left;
  border-bottom:1px solid var(--rule);white-space:nowrap;}
.statetable thead th{position:sticky;top:0;background:var(--surface-2);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;}
.statetable tbody th{font-weight:650;color:var(--ink);}
.statetable tbody tr:hover{background:var(--surface-2);}
.statetable td.ok{color:var(--ink-2);}
.statetable td.warn{color:var(--ink);font-weight:600;}
.statetable td.no{color:var(--accent);font-weight:650;}
.statetable td.warn::before,.statetable td.no::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:middle;}
.statetable td.warn::before{background:#C98A00;}
.statetable td.no::before{background:var(--accent);}

.statefacts{margin:0 0 18px;}
.statefacts > div{display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--rule);}
.statefacts dt{color:var(--ink-2);font-size:13.5px;}
.statefacts dd{margin:0;font-weight:620;font-size:13.5px;text-align:right;}

.flist.inline{display:flex;flex-wrap:wrap;gap:8px 10px;}
.flist.inline li{list-style:none;}
.flist.inline a{display:block;padding:8px 14px;border:1px solid var(--rule);
  background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);}
.flist.inline a:hover{border-color:var(--accent);color:var(--accent);
  text-decoration:none;}

/* The cluster's outbound links -- what carries authority from a guide into
   the category, brand and state pages it supports. */
.relbox{border-top:1px solid var(--rule);}
.relbox h2{font-size:19px;letter-spacing:-.015em;margin:0 0 14px;}
.eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 8px;}
.lede.sm{font-size:15.5px;max-width:68ch;margin:0 0 16px;}

/* ==========================================================================
   Guides / FAQ / fees
   ========================================================================== */

.guide{padding-bottom:16px;}
.gsec{padding:28px 0;border-bottom:1px solid var(--rule);}
.gsec h2{font-size:20.5px;font-weight:720;letter-spacing:-.015em;margin:0 0 10px;}
.gsec p{max-width:68ch;color:var(--ink-2);margin:0;}

.guides{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.guides li{border-bottom:1px solid var(--rule);}
.guides a{display:block;padding:22px 0;color:var(--ink);}
.guides a:hover{text-decoration:none;}
.guides a:hover .gh{color:var(--accent);}
.gh{display:block;font-size:18.5px;font-weight:720;letter-spacing:-.015em;margin-bottom:5px;}
.gd{display:block;font-size:14.5px;color:var(--ink-2);max-width:68ch;line-height:1.5;}

.faqs{padding:36px 0 0;}
.faqs h2{font-size:24px;letter-spacing:-.02em;font-weight:770;margin:0 0 16px;}
.faq{border-bottom:1px solid var(--rule);}
.faq:first-of-type{border-top:1px solid var(--rule);}
.faq summary{cursor:pointer;padding:16px 0;font-weight:650;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:21px;line-height:1;}
.faq[open] summary::after{content:"\2212";}
.faq p{padding:0 0 17px;margin:0;color:var(--ink-2);max-width:68ch;}

.fees{border-collapse:collapse;width:100%;max-width:660px;font-size:15px;
  border:1px solid var(--rule);background:var(--surface);margin-bottom:14px;}
.fees th,.fees td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--rule);}
.fees thead th{background:var(--surface-2);font-family:ui-monospace,Consolas,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.fees td:last-child{text-align:right;font-family:ui-monospace,Consolas,monospace;
  font-variant-numeric:tabular-nums;font-weight:680;white-space:nowrap;}
.fees tbody tr:last-child td{border-bottom:none;}
.fineprint{font-size:12.5px;color:var(--ink-3);max-width:66ch;line-height:1.55;}

/* ==========================================================================
   CTA + footer
   ========================================================================== */

.cta{
  margin:52px 0 0;padding:38px;border-radius:4px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--on-navy);border-bottom:3px solid var(--accent);
  display:grid;gap:26px;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
}
.cta h2{font-size:25px;letter-spacing:-.022em;font-weight:770;margin:0 0 8px;color:#fff;}
.cta p{color:rgba(245,246,251,.72);margin:0;max-width:50ch;font-size:15px;}
.ctabtns{display:flex;flex-wrap:wrap;gap:12px;}

footer.site{border-top:1px solid var(--rule);background:var(--surface);padding:48px 20px 34px;}
.fgrid{max-width:var(--maxw);margin:0 auto;display:grid;gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
.fgrid p{font-size:14px;color:var(--ink-2);margin:0 0 8px;line-height:1.55;}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.fbrand img{width:42px;height:42px;}
.fbig{font-weight:680;color:var(--ink) !important;}
.frate{font-size:12.5px !important;color:var(--ink-3) !important;
  font-family:ui-monospace,Consolas,monospace;}
.flist{list-style:none;margin:0;padding:0;}
.flist li{margin-bottom:8px;}
.flist a{font-size:14px;color:var(--ink-2);}
.flist a:hover{color:var(--accent);}
.fhours{margin:0;font-size:14px;color:var(--ink-2);}
.fhours div{display:flex;justify-content:space-between;gap:14px;padding:3px 0;}
.fhours dt{color:var(--ink-3);}
.fhours dd{margin:0;font-variant-numeric:tabular-nums;}
.hnote{font-size:12px !important;color:var(--accent) !important;
  margin-top:9px !important;font-weight:600;}
.reviewlink{font-size:13px;font-weight:650;}

.reviews{
  margin:52px 0 0;padding:30px 32px;border-radius:4px;
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  display:grid;gap:22px;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
}
.rstars{display:block;color:var(--accent);font-size:19px;letter-spacing:.14em;
  margin-bottom:8px;}
.reviews h2{font-size:22px;letter-spacing:-.02em;font-weight:760;margin:0 0 8px;}
.reviews p{color:var(--ink-2);margin:0;max-width:52ch;font-size:15px;}
.policies{
  max-width:var(--maxw);margin:34px auto 0;padding-top:20px;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 22px;
}
.policies a{font-size:12.5px;color:var(--ink-2);}
.policies a:hover{color:var(--accent);}
.fine{max-width:var(--maxw);margin:18px auto 0;padding-top:16px;
  font-size:11.5px;line-height:1.65;color:var(--ink-3);}

/* ==========================================================================
   Marketplace chrome — top bar, megamenu, search
   ========================================================================== */

.topbar{background:var(--navy-deep);color:var(--on-navy);}
.topin{
  max-width:var(--maxw);margin:0 auto;padding:7px 20px;
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  justify-content:space-between;
  font-size:12px;
}
.tmsg{color:rgba(245,246,251,.72);}
.tlinks{display:flex;flex-wrap:wrap;gap:16px;}
.tlinks a{color:rgba(245,246,251,.8);font-size:12px;}
.tlinks a:hover{color:#fff;}
/* The phone number, top right. The topbar is dark in BOTH themes, so this
   takes the dark-theme accent rather than var(--accent) -- #C4190B on navy is
   too dark to read. Slightly heavier than its neighbours because it is the
   one item here anyone hunts for. */
.tphone{color:#FF4A34 !important;font-weight:700;letter-spacing:.01em;}
.tphone:hover{color:#FF7A68 !important;}
@media (max-width:700px){
  /* Keep the number when everything else in the strip goes -- on a phone it
     is the most useful link on the page. */
  .tlinks{display:flex;gap:0;}
  .tlinks a:not(.tphone){display:none;}
}

.bar{min-height:76px;gap:14px;}
/* min-width:0 is load-bearing: without it the form refuses to shrink below
   its content's min-content width and pushes 6px past the viewport at 320px,
   which was overflowing every page on the site. */
.search{position:relative;flex:1 1 340px;min-width:0;max-width:560px;display:flex;}
.search input[type=search]{
  flex:1;min-width:0;padding:11px 14px;font-size:15px;
  border:1px solid var(--rule-strong);border-right:none;border-radius:3px 0 0 3px;
  background:var(--surface);color:var(--ink);
}
.search input[type=search]:focus{outline:none;border-color:var(--accent);}
.search button{
  padding:11px 18px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;font-weight:650;font-size:14px;cursor:pointer;
  border-radius:0 3px 3px 0;
}
.search button:hover{background:var(--accent-hi);border-color:var(--accent-hi);}

.srpanel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--shadow);max-height:70vh;overflow:auto;
}
.srlist{list-style:none;margin:0;padding:0;}
.srlist li{border-bottom:1px solid var(--rule);}
.srlist a{display:flex;gap:12px;align-items:center;padding:10px 14px;color:var(--ink);}
.srlist a:hover{background:var(--surface-2);text-decoration:none;}
.srimg{width:52px;height:42px;object-fit:contain;background:#fff;
  border-radius:3px;flex:none;padding:3px;}
.srtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.srlist strong{font-size:14.5px;font-weight:650;line-height:1.25;}
.srbrand{font-size:10.5px;color:var(--accent);
  font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.1em;}
.srcat{font-size:11.5px;color:var(--ink-3);}
.srprice{font-size:13.5px;font-weight:700;white-space:nowrap;flex:none;
  font-variant-numeric:tabular-nums;color:var(--ink);}
.srshortcut{display:block;padding:11px 14px;background:var(--accent-soft);
  border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--accent);
  font-weight:600;}
.srshortcut:hover{background:var(--surface-2);text-decoration:none;}
.srfoot,.srnone{padding:11px 14px;margin:0;font-size:13px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;}
.srfoot a{font-weight:600;}
.srall{font-weight:700 !important;color:var(--accent);}

.searchresults{margin-top:26px;}
.srhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding-bottom:14px;border-bottom:1px solid var(--rule);
  margin-bottom:4px;}
.srhead h2{font-size:20px;font-weight:730;letter-spacing:-.02em;margin:0;}
.bigsearch{position:relative;display:flex;max-width:640px;}
.bigsearch input{flex:1;min-width:0;padding:15px 16px;font-size:17px;
  border:1px solid var(--rule-strong);border-right:none;border-radius:3px 0 0 3px;
  background:var(--surface);color:var(--ink);}
.bigsearch button{padding:15px 24px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;font-weight:650;cursor:pointer;
  border-radius:0 3px 3px 0;}

.mainnav{border-top:1px solid var(--rule);background:var(--surface);}
.navlist{
  list-style:none;margin:0 auto;padding:0 20px;max-width:var(--maxw);
  display:flex;flex-wrap:wrap;gap:2px;
}
.navitem{position:relative;}
/* Bigger hit area on the primary tabs -- these are the main way around the
   site and were a thin strip. */
/* Nine tabs have to fit one row inside a container that is capped at
   --maxw (1180px) NO MATTER how wide the viewport gets. That cap is why the
   sizing here is driven by the container, not the screen: a viewport-width
   media query alone left the biggest font running in the narrowest effective
   space and wrapped the bar to two rows at 1440px. Measured with
   scratchpad/navcheck.py -- change these numbers, re-run it. */
.navitem > a{
  display:block;padding:19px 10px;font-size:15.5px;font-weight:650;
  color:var(--ink);white-space:nowrap;border-bottom:3px solid transparent;
}
/* Below the cap the container tracks the viewport and keeps shrinking, so
   tighten again before the megamenu gives way to the mobile drawer at 941.
   Ten tabs make this band genuinely tight -- at 960px the gaps close to a few
   pixels -- so the font steps down twice rather than once. */
@media (min-width:1001px) and (max-width:1120px){
  .navitem > a{padding:18px 7px;font-size:14px;}
}
@media (min-width:941px) and (max-width:1000px){
  .navitem > a{padding:18px 5px;font-size:13px;}
}
.navitem > a:hover{color:var(--accent);text-decoration:none;
  background:var(--surface-2);border-bottom-color:var(--accent);}
.navitem.has:hover > a{background:var(--surface-2);border-bottom-color:var(--accent);}
/* Spread the nine tabs across the full bar instead of packing them left and
   leaving dead space on the right. Tabs keep their natural width -- "Gear &
   Accessories" is 18 characters and will not fit in a 1/9 column -- so it is
   the GAPS that are equal, which is what reads as evenly spaced. Sized to
   stay on one row at 1180px; the 941-1180 rule below tightens it, and under
   941px the whole bar becomes the mobile drawer. */
.navlist{gap:0;justify-content:space-between;}
.navitem.has > a::after{content:" ▾";color:var(--ink-3);font-size:11px;}
.mpanel{
  display:none;position:absolute;top:100%;left:0;z-index:70;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--shadow);padding:22px;min-width:min(560px,88vw);
}
.navitem.has:hover .mpanel,
.navitem.has:focus-within .mpanel{display:block;}
.mgrid{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));}
.mcol{display:flex;flex-direction:column;gap:5px;}
.mhead{font-weight:720;font-size:14px;color:var(--ink);margin-bottom:3px;}
.mcol a{font-size:13.5px;color:var(--ink-2);}
.mcol a:hover{color:var(--accent);}
.mall{margin-top:5px;font-size:12.5px;color:var(--accent) !important;
  font-family:ui-monospace,Consolas,monospace;}

@media (max-width:940px){
  .mainnav{display:none;}
  .navtoggle-cb:checked ~ .mainnav{display:block;}
  /* The desktop bar's space-between must not follow the list into its
     vertical form, or the stacked links spread to fill the drawer. */
  .navlist{flex-direction:column;justify-content:flex-start;
    padding:6px 20px 14px;}
  .navitem > a{padding:15px 2px;border-bottom:1px solid var(--rule);
    font-size:16px;}
  /* Megamenu panels stay COLLAPSED on mobile. Rendering them inline made the
     open drawer 5,087px tall -- 6.5 phone screens and 157 links -- so
     reaching "Guides" or "About Us" meant scrolling past every subcategory of
     every category. Ten top-level links fit one screen; each category page
     lists its own subcategories on arrival, which is where that navigation
     belongs on a phone. */
  .mpanel{display:none;}
  .navitem.has > a::after{content:"";}
  .search{order:3;flex:1 1 100%;max-width:none;min-width:0;width:100%;}
  .search button{padding:11px 14px;}
}

/* ==========================================================================
   Browse layout — filter rail + results
   ========================================================================== */

.browse{display:grid;gap:28px;grid-template-columns:250px minmax(0,1fr);
  align-items:start;padding-top:8px;}
@media (max-width:900px){ .browse{grid-template-columns:1fr;} }

.rail{
  background:var(--surface);border:1px solid var(--rule);
  padding:18px;position:sticky;top:92px;max-height:calc(100vh - 110px);
  overflow:auto;
}
@media (max-width:900px){ .rail{position:static;max-height:none;} }
.railhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule);}
.railhead h2{font-size:14px;font-weight:750;letter-spacing:.01em;margin:0;}
.flink{background:none;border:none;color:var(--accent);font-size:12.5px;
  cursor:pointer;padding:0;font-family:inherit;}
.flink:hover{text-decoration:underline;}
.fgroup{border-bottom:1px solid var(--rule);padding:12px 0;}
.fgroup:last-of-type{border-bottom:none;}
.fgroup h3{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 9px;cursor:pointer;display:flex;justify-content:space-between;
  font-family:ui-monospace,Consolas,monospace;
}
.fgroup h3::after{content:"−";color:var(--ink-3);}
.fgroup.collapsed h3::after{content:"+";}
.fgroup.collapsed .fopts{display:none;}
.fopts{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto;}
.fopt{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--ink-2);cursor:pointer;padding:3px 0;}
.fopt input{accent-color:var(--accent);flex:none;}
.fopt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fopt b{font-weight:400;color:var(--ink-3);font-size:12px;
  font-variant-numeric:tabular-nums;}
.railnote{font-size:11.5px;color:var(--ink-3);line-height:1.5;
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);}

.results{min-width:0;}
.gridfoot{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.empty{color:var(--ink-2);padding:26px 0;}
.noresults{grid-column:1/-1;text-align:center;padding:40px 20px;
  background:var(--surface);box-shadow:0 0 0 1px var(--rule);}
.noresults p{color:var(--ink-2);}

/* card price row + whole-card click target */
.card{position:relative;}
.cfoot{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--rule);}
.cprice{font-weight:750;font-size:16px;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;}
.cmodel a{color:var(--ink);}
.card:hover .cmodel a{color:var(--accent);}
.cmodel a:hover{text-decoration:none;}

/* Stretched link: one anchor covers the whole card, so clicking anywhere on
   the tile opens the product. Keeps a single labelled link in the a11y tree
   instead of three anchors to the same URL. */
.cstretch::after{content:"";position:absolute;inset:0;z-index:1;}
.card:focus-within{border-color:var(--accent);}
.cstretch:focus-visible::after{outline:2px solid var(--accent);outline-offset:-3px;}

/* Real button. Sits above the stretched link so it is separately clickable,
   and it is the visible call to action. */
.cbuy{
  position:relative;z-index:2;display:block;margin-top:12px;text-align:center;
  padding:9px 12px;border-radius:3px;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;background:var(--accent);color:#fff;
  border:1px solid var(--accent);
}
.cbuy:hover{background:var(--accent-hi);border-color:var(--accent-hi);
  color:#fff;text-decoration:none;}
.card:hover .cbuy{background:var(--accent-hi);border-color:var(--accent-hi);}
.cimg{display:flex;align-items:center;justify-content:center;background:#fff;}
:root[data-theme="dark"] .cimg{background:#f5f5f7;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cimg{background:#f5f5f7;}
}

/* ==========================================================================
   Home sections
   ========================================================================== */

.carry{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:1px;
  background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
.carry li{background:var(--surface);padding:20px;box-shadow:0 0 0 1px var(--rule);}
.carry b{display:block;font-size:15.5px;font-weight:700;margin-bottom:6px;}
.carry b::before{content:"";display:inline-block;width:14px;height:2px;
  background:var(--accent);vertical-align:middle;margin-right:8px;}
.carry span{font-size:14px;color:var(--ink-2);line-height:1.5;}
.brandline{color:var(--ink-2);max-width:66ch;}
.bchips{display:flex;flex-wrap:wrap;gap:8px;}
.bchip{border:1px solid var(--rule-strong);border-radius:3px;padding:8px 13px;
  font-size:13px;color:var(--ink-2);background:var(--surface);font-weight:600;}
.bchip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}
.bchip.off{color:var(--ink-3);border-style:dashed;cursor:default;}

.ordering{background:var(--surface-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);}
.oin{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.ogrid{display:grid;gap:1px;background:transparent;margin-bottom:24px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.ocard{background:var(--surface);padding:22px;box-shadow:0 0 0 1px var(--rule);
  position:relative;}
.ocard h3{font-size:15px;font-weight:730;margin:0 0 8px;}
.ocard p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55;}
.onum{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:700;
  margin-bottom:11px;
}
.ocard.alt{border-top:3px solid var(--accent);background:var(--surface-3);}
.ocard.alt h3{color:var(--ink);}

.brands{display:grid;gap:1px;background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));}
.brow{background:var(--surface);padding:15px 18px;display:flex;
  justify-content:space-between;align-items:baseline;gap:10px;color:var(--ink);
  box-shadow:0 0 0 1px var(--rule);}
.brow:hover{background:var(--surface-2);text-decoration:none;}
.brow b{font-weight:650;font-size:14.5px;}
.brow span{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* ==========================================================================
   Rifle builder
   ========================================================================== */

.builder{display:grid;gap:26px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;}
@media (max-width:900px){ .builder{grid-template-columns:1fr;} }
.bsteps{display:grid;gap:1px;background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
.bstep{background:var(--surface);padding:18px;box-shadow:0 0 0 1px var(--rule);}
.bstep h3{font-size:14px;font-weight:730;margin:0 0 10px;}
.bstep select{width:100%;padding:9px 10px;font-size:13.5px;
  border:1px solid var(--rule-strong);border-radius:3px;
  background:var(--surface);color:var(--ink);}
.bcount{display:block;margin-top:7px;font-size:11.5px;color:var(--ink-3);
  font-family:ui-monospace,Consolas,monospace;}
.bsummary{background:var(--surface);border:1px solid var(--rule);
  border-top:3px solid var(--accent);padding:22px;position:sticky;top:92px;}
.bsummary h2{font-size:17px;font-weight:750;margin:0 0 12px;}
.blist{list-style:none;margin:0 0 12px;padding:0;}
.blist li{padding:9px 0;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:3px;}
.blabel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-family:ui-monospace,Consolas,monospace;}
.blist a{font-size:14px;font-weight:600;}
.bempty,.bnote{font-size:13px;color:var(--ink-2);margin:0;}

/* ==========================================================================
   Megamenu — dark panel, white text
   The panel used to inherit page surface + --ink-2 links, which read as grey
   on grey. It is now an explicit navy panel with white links.
   ========================================================================== */

.mpanel{
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid var(--rule-strong);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.65);
  padding:24px 26px;
}
.mpanel .mhead{color:#fff;font-weight:750;font-size:14.5px;}
.mpanel .mhead:hover{color:var(--accent-hi);text-decoration:none;}
.mhead-plain{color:var(--on-navy-2) !important;font-size:11px !important;
  letter-spacing:.14em;text-transform:uppercase;cursor:default;
  font-family:ui-monospace,Consolas,monospace;}
.mpanel .mcol a{color:rgba(255,255,255,.86);font-size:13.5px;padding:2px 0;}
.mpanel .mcol a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.mpanel .mall{color:var(--accent-hi) !important;font-weight:650;}
.mgrid{gap:26px 30px;}

@media (max-width:940px){
  .mpanel{background:transparent;border:none;box-shadow:none;padding:4px 0 12px 12px;}
  .mpanel .mhead{color:var(--ink);}
  .mpanel .mcol a{color:var(--ink-2);}
  .mpanel .mcol a:hover{color:var(--accent);}
}

/* ==========================================================================
   Filter rail readability
   ========================================================================== */

.rail{background:var(--surface);border-color:var(--rule-strong);}
.railhead h2{font-size:14.5px;color:var(--ink);}
.fgroup h3{color:var(--ink-2);font-size:11.5px;}
.fopt{color:var(--ink);font-size:13.5px;}
.fopt b{color:var(--ink-3);font-weight:600;font-size:12px;}
.fopt:hover{color:var(--accent);}
/* the scrollbar used to sit on top of the counts */
.fopts{max-height:250px;overflow-y:auto;padding-right:10px;
  scrollbar-gutter:stable;}
.fopts::-webkit-scrollbar{width:8px;}
.fopts::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:4px;}
.fopts::-webkit-scrollbar-track{background:transparent;}
.railnote{color:var(--ink-3);}

/* results column must not keep an empty rail track */
.browse.norail{grid-template-columns:minmax(0,1fr);}

/* ==========================================================================
   Spacing helpers
   ========================================================================== */

.head.tight{padding-bottom:20px;margin-bottom:20px;}
.block.pt0{padding-top:16px;}
.prose p{max-width:70ch;color:var(--ink-2);font-size:16px;line-height:1.65;}
.founders .story h2{font-size:clamp(23px,3.2vw,31px);}

/* ==========================================================================
   Hero ticker — the one moving element
   ========================================================================== */

/* Sits directly under the nav, full bleed. It was previously inside the hero,
   where the hero's own grid clipped it mid-word. Three identical copies of
   the line, translated by exactly one third, so the loop is seamless at any
   viewport width. */
.ticker{
  background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy) 50%,var(--navy-deep) 100%);
  border-bottom:2px solid var(--accent);
  overflow:hidden;position:relative;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;
  pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent);}
.ticker::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent);}
.ticker-track{
  display:flex;width:max-content;
  animation:tickmove 60s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
.tick{
  color:var(--on-navy);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 0;white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace;
  display:inline-flex;align-items:center;
}
.tick::after{
  content:"◆";color:var(--accent-hi);font-size:6px;
  margin:0 20px;vertical-align:middle;
}
@keyframes tickmove{
  from{transform:translateX(0);}
  to{transform:translateX(-33.3333%);}
}

/* The reduced-motion exception for this one element lives at the very end of
   the file -- see the note there. It has to come AFTER the global
   reduced-motion block or source order kills it. */

/* ==========================================================================
   Brand cards
   ========================================================================== */

.bcards{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));
}
.bcard{
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  padding:20px 18px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:4px;color:var(--ink);overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.brandsearch{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px;}
.brandsearch input{
  flex:1 1 380px;min-width:0;max-width:520px;padding:12px 15px;font-size:15px;
  border:1px solid var(--rule-strong);border-radius:3px;
  background:var(--surface);color:var(--ink);
}
.brandsearch input:focus{outline:none;border-color:var(--accent);}
.brandsearch .bcount{
  font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
}
/* The [hidden] attribute only sets display:none from the UA stylesheet, so
   any class that sets display wins on specificity. Without this, filtered-out
   brand cards stayed on screen while the counter read "0 matching". */
.bcard[hidden],.bmini[hidden],.slide[hidden],.card[hidden]{display:none !important;}

.bnone{
  margin-top:24px;background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--accent);padding:26px 28px;max-width:640px;
}
.bnone h3{font-size:18px;font-weight:730;margin:0 0 8px;}
.bnone p{color:var(--ink-2);margin:0 0 16px;max-width:58ch;}

.bminis{display:flex;flex-wrap:wrap;gap:7px;}
.bmini{
  font-size:12.5px;padding:5px 10px;border-radius:3px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--rule);
  white-space:nowrap;
}
.bmini:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}
.bcard:hover{border-color:var(--accent);transform:translateY(-2px);
  text-decoration:none;}
/* Logo plate: white and flush to the card edges so a real logo fills it,
   instead of a small white rectangle floating on a navy panel. Falls back to
   the navy monogram plate only when there is no logo. */
.bcard-art{
  width:100%;height:112px;margin:-20px -18px 12px;
  width:calc(100% + 36px);
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;border-radius:4px 4px 0 0;
}
.bcard-art:has(img){background:#fff;}
.bcard-art img{
  width:100%;height:100%;object-fit:contain;padding:14px 18px;
}
/* Stand-in product shot when a brand has no licensed logo. Slightly more
   inset than a logo so it reads as an illustration, not a mark. */
.bcard-art img.brep{padding:8px 14px;}
.bcard-art:has(img.brep){background:#fff;}
.bcard .bmark{
  font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:22px;
  letter-spacing:.12em;color:#fff;position:relative;
}
.bcard-name{font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  line-height:1.25;}
.bcard-meta{font-size:11.5px;color:var(--ink-3);
  font-family:ui-monospace,Consolas,monospace;}

/* ==========================================================================
   Build a Rifle — chooser + staged flow
   ========================================================================== */

.bchooser{padding:40px 0 20px;}
.bchoose-in{max-width:900px;}
.bchoose-in h1{font-size:clamp(27px,4.4vw,40px);letter-spacing:-.03em;
  font-weight:800;margin:0 0 12px;}
.bchoose-grid{display:grid;gap:16px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.bchoose{
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid var(--rule-strong);border-radius:6px;
  padding:30px 26px;display:flex;flex-direction:column;gap:9px;
  align-items:flex-start;text-align:left;cursor:pointer;color:var(--on-navy);
  font:inherit;transition:border-color .18s ease,transform .18s ease;
}
.bchoose:hover{border-color:var(--accent);transform:translateY(-3px);}
.bchoose-ic{font-size:32px;color:var(--accent-hi);line-height:1;}
.bchoose b{font-size:19px;font-weight:760;color:#fff;letter-spacing:-.015em;}
.bchoose > span:not(.bchoose-ic):not(.btn){font-size:14px;
  color:var(--on-navy-2);line-height:1.5;}
.bchoose .btn{margin-top:12px;pointer-events:none;}

.builder2{padding:12px 0 0;}
.btabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;
  border-bottom:1px solid var(--rule);margin-bottom:26px;}
.btab{
  display:flex;align-items:center;gap:8px;flex:none;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  padding:10px 15px;font:inherit;font-size:13.5px;font-weight:620;
  color:var(--ink-2);white-space:nowrap;
}
.btab:hover{border-color:var(--rule-strong);color:var(--ink);}
.btab.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.btab.done{border-color:var(--accent);color:var(--accent);}
.bicon{font-size:15px;}

.bmain{display:grid;gap:26px;
  grid-template-columns:minmax(0,1fr) 320px;align-items:start;}
@media (max-width:1000px){ .bmain{grid-template-columns:1fr;} }

.bstage-head{margin-bottom:18px;}
.bstage-n{font-family:ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.bstage-head h2{font-size:clamp(22px,3vw,29px);letter-spacing:-.025em;
  font-weight:770;margin:6px 0 6px;}
.bstage-head p{color:var(--ink-2);margin:0;max-width:62ch;}

.bfilters{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;
  padding:16px 18px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:5px;}
.bfilter{display:flex;flex-direction:column;gap:5px;min-width:150px;flex:1 1 150px;}
.bfilter label{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.bfilter select{padding:9px 10px;font-size:13.5px;border-radius:4px;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);}
.bfilter-count{flex:0 0 auto;min-width:80px;}
.bfilter-count span{font-family:ui-monospace,Consolas,monospace;
  font-size:19px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;}

.bresults{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));
  max-height:660px;overflow-y:auto;padding-right:6px;scrollbar-gutter:stable;}
.bpick{
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  overflow:hidden;cursor:pointer;text-align:left;font:inherit;padding:0;
  display:flex;flex-direction:column;color:var(--ink);
}
.bpick:hover{border-color:var(--accent);}
.bpick.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;}
.bpick-img{aspect-ratio:5/4;background:#fff;display:flex;align-items:center;
  justify-content:center;overflow:hidden;}
.bpick-img img{width:100%;height:100%;object-fit:contain;padding:8px;}
.bpick-b{padding:11px 12px 0;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
  font-family:ui-monospace,Consolas,monospace;}
.bpick-m{padding:3px 12px;font-size:14px;font-weight:650;line-height:1.25;}
.bpick-p{padding:0 12px 12px;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-2);}

.bnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--rule);}
.bnav .btn[disabled]{opacity:.4;cursor:not-allowed;}
.bempty2{color:var(--ink-3);padding:24px 0;grid-column:1/-1;}

.bsummary{position:sticky;top:92px;}
@media (max-width:1000px){ .bsummary{position:static;} }

/* ==========================================================================
   Megamenu height — the Guns and Gear & Accessories panels were taller than the
   viewport with no way to reach the bottom. Cap them and scroll INSIDE.
   ========================================================================== */

.mpanel{
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
  padding:20px 22px;
}
.mpanel::-webkit-scrollbar{width:9px;}
.mpanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:5px;}
.mpanel::-webkit-scrollbar-track{background:rgba(0,0,0,.25);}
.mgrid{gap:18px 26px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));}
.mcol a{font-size:13px;line-height:1.35;}
.mpanel .mhead{font-size:13.5px;}
@media (max-width:940px){ .mpanel{max-height:none;overflow:visible;} }

/* ==========================================================================
   Stock notice
   ========================================================================== */

.notice{background:var(--accent-soft);border-bottom:1px solid var(--rule);}
.notice-in{
  max-width:var(--maxw);margin:0 auto;padding:9px 20px;
  display:flex;gap:11px;align-items:center;
}
.notice-ic{
  flex:none;width:19px;height:19px;border-radius:50%;background:var(--accent);
  color:#fff;font-weight:800;font-size:12px;display:flex;
  align-items:center;justify-content:center;
}
.notice p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45;}
.notice strong{color:var(--ink);}
.notice a{font-weight:650;}

/* ==========================================================================
   Category tiles — artwork with the caption underneath
   ========================================================================== */

.tcards{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));
}
.tcard{display:flex;flex-direction:column;gap:9px;color:var(--ink);}
.tcard:hover{text-decoration:none;}
.tcard-img{
  display:block;overflow:hidden;border-radius:4px;background:#fff;
  border:1px solid var(--rule);aspect-ratio:1/1;
}
.tcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;}
.tcard:hover .tcard-img{border-color:var(--accent);}
.tcard:hover .tcard-img img{transform:scale(1.045);}
.tcard-cap{
  text-align:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-family:ui-monospace,Consolas,monospace;
}
.tcard-cap b{color:var(--accent);font-weight:700;}
.tcard:hover .tcard-cap b{color:var(--accent-hi);}
.tcard-blurb{font-size:13px;color:var(--ink-2);line-height:1.5;text-align:center;}
.tcard.wide .tcard-img{aspect-ratio:4/3;}

/* ==========================================================================
   Featured slider
   ========================================================================== */

.slider{position:relative;}
.slides{
  list-style:none;margin:0;padding:4px 2px 10px;display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;
}
.slides::-webkit-scrollbar{height:8px;}
.slides::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:4px;}
.slide{flex:0 0 clamp(210px,24%,260px);scroll-snap-align:start;display:flex;}
.slide .card{width:100%;}
.sarrow{
  position:absolute;top:38%;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--surface);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  box-shadow:var(--shadow);
}
.sarrow:hover{border-color:var(--accent);color:var(--accent);}
.sarrow.prev{left:-16px;}
.sarrow.next{right:-16px;}
@media (max-width:900px){ .sarrow{display:none;} }

/* ==========================================================================
   What We Carry — interactive accordion
   ========================================================================== */

.carry2{border-top:1px solid var(--rule);margin-bottom:22px;}
.crow{border-bottom:1px solid var(--rule);}
.crow summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;padding:17px 4px;
  list-style:none;
}
.crow summary::-webkit-details-marker{display:none;}
.cnum{
  font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--accent);
  font-weight:700;flex:none;
}
.ctitle{font-size:17px;font-weight:680;letter-spacing:-.012em;flex:1;}
.cmark{color:var(--ink-3);font-size:20px;font-weight:300;flex:none;}
.crow[open] .cmark{transform:rotate(45deg);color:var(--accent);}
.crow[open] summary{padding-bottom:8px;}
.cbodyx{padding:0 4px 20px 44px;}
.cbodyx p{color:var(--ink-2);max-width:62ch;margin:0 0 14px;}
.cbodyx .btn{max-width:100%;overflow-wrap:anywhere;}

/* 320px: the 44px indent plus a long button pushed this block 24px past the
   viewport and made the whole page scroll sideways. */
@media (max-width:480px){
  .cbodyx{padding-left:4px;}
  .crow summary{gap:10px;}
  .ctitle{font-size:15.5px;}
  .cbodyx .btn{display:block;text-align:center;padding:11px 10px;font-size:13.5px;}
}

/* the carousel scrolls inside itself and must never widen the page */
.slides{max-width:100%;}
.slide{min-width:0;}
.slide .card{min-width:0;}

/* ==========================================================================
   Empty state
   ========================================================================== */

.emptystate{
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--accent);padding:28px 30px;margin-top:22px;
}
.emptystate h3{font-size:18px;font-weight:730;margin:0 0 8px;}
.emptystate p{color:var(--ink-2);max-width:60ch;margin:0 0 16px;}

/* ==========================================================================
   About Us
   ========================================================================== */

.abouthero{
  display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.abouthero.rev > .prose{order:2;}
.abouthero.rev > .aphoto{order:1;}
@media (max-width:860px){
  .abouthero{grid-template-columns:1fr;}
  .abouthero.rev > .prose,.abouthero.rev > .aphoto{order:0;}
}
.aphoto{width:100%;height:auto;border-radius:5px;border:1px solid var(--rule);
  box-shadow:var(--shadow);}
.prose h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.025em;font-weight:770;
  margin:0 0 14px;}
.prose .lead{font-size:17.5px;line-height:1.6;color:var(--ink);}
.gbsec{background:var(--surface-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:44px 22px;border-radius:5px;}

/* ==========================================================================
   Builder — decorative glyphs removed, tabs and chooser centred
   ========================================================================== */

.bicon,.bchoose-ic{display:none !important;}
.btabs{justify-content:center;}
.btab{justify-content:center;}
.bchoose-grid{max-width:820px;margin-left:auto;margin-right:auto;}
.bchoose{align-items:center;text-align:center;}
.bchoose > span:not(.btn){text-align:center;}
.bchoose-in{margin:0 auto;text-align:center;}
.bchoose-in .lede{margin-left:auto;margin-right:auto;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }

  /* ⚠️ ONE deliberate exception, at the operator's explicit request -- the
     same call he made on htxgunservices.com. His Windows disables animation
     globally, so without this he sees a frozen banner and reads it as broken.
     Kept as gentle as a marquee can be: 60s per cycle, horizontal only, no
     flashing, and it pauses on hover. This block MUST stay after the blanket
     rule above; when it sat earlier in the file the wildcard won on source
     order and the ticker stayed still. */
  .ticker .ticker-track{
    animation:tickmove 60s linear infinite !important;
    animation-iteration-count:infinite !important;
  }
  /* Same exception, same reason: the operator's machine reports
     reduced-motion globally, so without this the seal and the hero
     slideshow both sit frozen and read as broken. Both are slow, silent
     and non-flashing. */
  .seal .seal-inner{
    animation:sealspin 9s ease-in-out infinite !important;
    animation-iteration-count:infinite !important;
  }
  .hbg-img{transition:opacity 1.6s ease-in-out !important;}
}