/* Celtic Ridge Firearms storefront. Slate header, serif headlines, brass used only for the main call to action. */
:root {
  --bg:#f6f7f7; --panel:#fff; --ink:#14202a; --muted:#5a6a75; --line:#e1e6e9; --line-strong:#cdd5da;
  --accent:#1d4d5e; --accent-hover:#163d4b; --accent-ink:#fff; --soft:#e3eef2;
  --brass:#b4893a; --brass-ink:#1a1405;
  --sale:#b03a2a; --warn:#fbf1d8; --bad:#b03a2a; --badsoft:#f9e4e0; --ok:#1f6b4f;
  --head:#121c24; --head-ink:#e9eef1; --head-muted:#9fb0ba; --head-line:#243541;
  --r:12px; --rs:8px;
  --shadow:0 1px 2px rgba(18,28,36,.05); --shadow-up:0 8px 24px rgba(18,28,36,.10);
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --serif:ui-serif,"New York",Charter,"Iowan Old Style",Georgia,serif;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#0e151b; --panel:#151f27; --ink:#e6ecf0; --muted:#93a4af; --line:#25323c; --line-strong:#324350;
  --accent:#6cb3cc; --accent-hover:#86c3d8; --accent-ink:#0c1419; --soft:#1a2f39;
  --sale:#ee8575; --warn:#34290e; --bad:#ee8575; --badsoft:#3b1f1a; --ok:#67c39d;
  --head:#0a1015; --head-line:#1b2a34; --shadow:none; --shadow-up:0 8px 24px rgba(0,0,0,.4); } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:2px; }
img { max-width:100%; }
h1,h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.015em; text-wrap:balance; }
h1 { font-size:clamp(1.7rem,3vw,2.3rem); margin:.2em 0 .45em; line-height:1.15; }
h2 { font-size:1.5rem; margin:1.6em 0 .6em; line-height:1.2; }
h3 { font-size:1rem; }
.wrap { max-width:1240px; margin:0 auto; padding-inline:clamp(16px,3vw,32px); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.muted { color:var(--muted); } .small { font-size:.85rem; }

/* ---------- header ---------- */
.top { background:var(--head); color:var(--head-ink); }
.bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding-block:14px; }
.logo { display:flex; align-items:center; gap:10px; font:600 1.3rem/1 var(--serif); letter-spacing:-.01em; color:#fff; text-decoration:none; }
.mark { width:30px; height:30px; border-radius:8px; background:linear-gradient(160deg,#2c6a80,#173846); position:relative; overflow:hidden; flex:none; }
.mark::before { content:""; position:absolute; left:-2px; right:-2px; bottom:0; height:16px; background:var(--brass); clip-path:polygon(0 100%,28% 22%,48% 62%,70% 8%,100% 100%); }
.logo-img { height:38px; width:auto; max-width:220px; object-fit:contain; display:block; }
.tagline { display:block; font:400 .72rem/1.2 var(--sans); color:var(--head-muted); letter-spacing:.02em; margin-left:2px; }
.find { flex:1 1 300px; display:flex; max-width:640px; margin-left:auto; }
.find input[type=search] { flex:1; border-radius:99px 0 0 99px; border:1px solid var(--head-line); border-right:0; background:#1b2a35; color:#fff; padding:10px 18px; }
.find input[type=search]::placeholder { color:var(--head-muted); }
.find button { border-radius:0 99px 99px 0; background:var(--brass); border-color:var(--brass); color:var(--brass-ink); padding-inline:20px; }
.find button:hover { filter:brightness(1.08); background:var(--brass); border-color:var(--brass); }
.cartlink { display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; padding:9px 16px; border-radius:99px; color:#fff; border:1px solid var(--head-line); }
.cartlink:hover { background:#1b2a35; }
.count { background:var(--brass); color:var(--brass-ink); border-radius:99px; padding:0 8px; font-size:.8rem; font-weight:700; }
.cats { display:flex; gap:4px; padding-block:0 12px; font-size:.92rem; overflow-x:auto; scrollbar-width:none; }
.cats::-webkit-scrollbar { display:none; }
.cats a { text-decoration:none; color:var(--head-muted); padding:6px 12px; border-radius:99px; white-space:nowrap; }
.cats a:hover { color:#fff; background:#1b2a35; }
main { padding-block:26px 64px; min-height:60vh; }
.foot { background:var(--head); color:var(--head-muted); padding-block:26px 34px; }
.foot b { color:#fff; } .foot p { margin:0 0 8px; }

/* ---------- controls ---------- */
input[type=text], input[type=search], input[type=number], select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--rs); background:var(--panel); color:var(--ink); font:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }
.find input[type=search]:focus { border-color:var(--brass); box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 35%,transparent); }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.top a:focus-visible, .top button:focus-visible, .foot a:focus-visible { outline-color:var(--brass); }
label { display:block; font-weight:600; font-size:.9rem; margin-bottom:4px; }
button, .btn { display:inline-block; padding:10px 20px; border-radius:var(--rs); border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; line-height:1.4; transition:background .12s; }
button:hover, .btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.ghost, .btn.ghost { background:transparent; color:var(--accent); border-color:var(--line-strong); }
button.ghost:hover, .btn.ghost:hover { background:var(--soft); border-color:var(--accent); }
button.link { background:none; border:0; color:var(--accent); padding:4px 6px; font-weight:500; }
button.link:hover { background:none; text-decoration:underline; }
.btn.cta { background:var(--brass); border-color:var(--brass); color:var(--brass-ink); padding:12px 26px; font-size:1.02rem; }
.btn.cta:hover { filter:brightness(1.07); background:var(--brass); border-color:var(--brass); }
.small-btn { padding:4px 10px; margin-left:8px; }
.check { display:flex; gap:8px; align-items:flex-start; } .check input { width:auto; margin-top:5px; accent-color:var(--accent); } .check label { font-weight:500; margin:0; }
.flash { padding:11px 16px; border-radius:var(--rs); margin-bottom:14px; background:var(--soft); color:var(--accent); font-weight:500; }
.flash.err { background:var(--badsoft); color:var(--bad); } .flash.warn { background:var(--warn); color:inherit; }
.notice { background:var(--warn); border-radius:var(--rs); padding:12px 16px; margin:14px 0; } .notice.ok { background:var(--soft); }

/* ---------- home hero: a ridge line drawn in CSS ---------- */
.hero { position:relative; overflow:hidden; border-radius:var(--r); padding:clamp(34px,6vw,72px) clamp(22px,4vw,56px); margin-bottom:8px; color:#fff;
  background:linear-gradient(180deg,#16303c 0%,#1d4d5e 100%); }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background:#0f1d26;
  clip-path:polygon(0 100%,0 62%,12% 38%,22% 58%,35% 20%,47% 52%,60% 28%,72% 56%,84% 30%,100% 60%,100% 100%); opacity:.85; }
.hero > * { position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); margin:0 0 .3em; max-width:22ch; }
.hero p { color:#cfdde4; margin:0 0 1.2em; max-width:46ch; font-size:1.05rem; }
.hero .btn.cta { margin-top:4px; }

/* ---------- product grid and cards ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 10px 14px; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s; box-shadow:var(--shadow); }
.card:hover { box-shadow:var(--shadow-up); transform:translateY(-2px); }
.card h3 { font-size:.96rem; margin:12px 6px 2px; line-height:1.35; font-weight:600; } .card h3 a { color:var(--ink); text-decoration:none; } .card h3 a:hover { color:var(--accent); }
.card .meta { margin:0 6px; color:var(--muted); font-size:.84rem; }
.card .pic { position:relative; display:block; aspect-ratio:1; background:#fff; border-radius:8px; overflow:hidden; }
.card .pic img { width:100%; height:100%; object-fit:contain; }
.card .price { margin:8px 6px 2px; font-size:1.2rem; } .price s, .bigprice s { color:var(--muted); font-size:.9rem; font-weight:400; } .price b { font-variant-numeric:tabular-nums; }
.stock { font-size:.84rem; margin:0 6px; color:var(--ok); } .stock.none { color:var(--bad); } .stock.distributor { color:var(--muted); }
.ffl { display:inline-block; font-weight:600; font-size:.74rem; color:var(--ink); background:var(--soft); border-radius:99px; padding:1px 9px; }
.tag { position:absolute; top:8px; left:8px; background:var(--sale); color:#fff; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:99px; }
.bigprice .tag { position:static; margin-left:8px; } .bigprice b { font-size:2rem; font-variant-numeric:tabular-nums; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:2px; transition:border-color .15s; }
.tile:hover { border-color:var(--accent); }
.tile b { font-family:var(--serif); font-size:1.05rem; font-weight:600; } .tile span { color:var(--muted); font-size:.85rem; }
.filters { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:6px 0 10px; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.filters label { margin:0; } .filters select { width:auto; } .filters input[type=hidden] { display:none; }
.pager { display:flex; gap:14px; align-items:center; justify-content:center; margin-top:26px; }

/* ---------- product page ---------- */
.detail { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px; }
.gallery .main { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .thumbs img { width:68px; height:68px; object-fit:cover; border:1px solid var(--line); border-radius:8px; background:#fff; }
.buy { display:flex; gap:12px; align-items:flex-end; margin:18px 0; } .buy input { width:84px; } .buy label { margin:0 0 4px; }
.desc { white-space:pre-line; }

/* ---------- cart, checkout ---------- */
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { font-size:.82rem; color:var(--muted); font-weight:600; }
.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } table.cart input[type=number] { width:74px; } .sale { color:var(--sale); }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; margin-top:18px; }
.sum { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow); }
.sum p { display:flex; justify-content:space-between; gap:12px; margin:8px 0; } .sum .total { font-size:1.25rem; font-weight:650; border-top:1px solid var(--line); padding-top:12px; margin-top:12px; } .sum .small { display:block; }
.row { display:flex; gap:12px; align-items:flex-end; } .row.wrapr { flex-wrap:wrap; } .row > div { flex:1 1 120px; } .row > button { flex:0 0 auto; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; max-width:900px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; margin:18px 0; box-shadow:var(--shadow); }
.dealers { list-style:none; padding:0; margin:12px 0 0; } .dealers li { display:flex; justify-content:space-between; gap:14px; align-items:center; border-top:1px solid var(--line); padding:12px 0; } .bad { color:var(--bad); }
.agegate { max-width:480px; margin:7vh auto 0; }
.agegate.panel, .agegate .panel { padding:28px; box-shadow:0 12px 40px rgba(18,28,36,.10); }
.empty { text-align:center; padding:48px 10px; color:var(--muted); }
details summary { cursor:pointer; font-weight:600; }

@media (max-width:640px) {
  .bar { gap:10px; } .find { order:3; flex-basis:100%; max-width:none; margin-left:0; } .cartlink { margin-left:auto; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .card { padding:8px 8px 12px; }
  .card h3, .card .meta, .card .price, .stock { margin-inline:4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } .card:hover { transform:none; } }

/* ---------- product options (family chooser) ---------- */
.variants { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; align-items:stretch; }
.variants > p { flex-basis:100%; margin:0; }
.vopt { display:flex; flex-direction:column; gap:2px; padding:9px 14px; border:1px solid var(--line-strong); border-radius:var(--rs); background:var(--panel); color:var(--ink); text-decoration:none; min-width:96px; }
.vopt b { font-weight:600; } .vopt span { font-size:.82rem; color:var(--muted); }
.vopt:hover { border-color:var(--accent); }
.vopt.on { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); background:var(--soft); }
.vopt.out { opacity:.65; }

/* ---------- two-level category menu ---------- */
.cats .cat { position:relative; display:inline-block; }
.cats .cat > a::after { content:""; display:inline-block; margin-left:6px; border:4px solid transparent; border-top-color:currentColor; border-bottom:0; vertical-align:middle; opacity:.7; }
.cats .sub { display:none; position:absolute; left:0; top:100%; z-index:20; min-width:220px; padding:8px; background:var(--panel); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--rs); box-shadow:var(--shadow-up); }
.cats .cat:hover .sub, .cats .cat:focus-within .sub { display:block; }
.cats .sub a { display:block; padding:7px 10px; border-radius:6px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.cats .sub a:hover, .cats .sub a:focus-visible { background:var(--soft); color:var(--accent); }
.subcats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.chip { display:inline-flex; gap:6px; align-items:center; padding:6px 12px; border:1px solid var(--line-strong); border-radius:99px; background:var(--panel); color:var(--ink); text-decoration:none; font-size:.92rem; }
.chip span { color:var(--muted); font-size:.82rem; } .chip:hover { border-color:var(--accent); color:var(--accent); }

/* ---------- main navigation: Shop (drop-down), About, Services, Contact Us ---------- */
.mainnav { display:flex; gap:4px; padding-block:0 12px; font-size:.98rem; position:relative; }
.mainnav > a, .mainnav .shoplink { text-decoration:none; color:var(--head-muted); padding:7px 14px; border-radius:99px; white-space:nowrap; }
.mainnav > a:hover, .mainnav .shoplink:hover, .has-menu:focus-within .shoplink, .has-menu:hover .shoplink { color:#fff; background:#1b2a35; }
.mainnav .shoplink::after { content:""; display:inline-block; margin-left:7px; border:4px solid transparent; border-top-color:currentColor; border-bottom:0; vertical-align:middle; opacity:.7; }
.mega { display:none; position:absolute; left:0; right:0; top:100%; z-index:30; padding:18px 20px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--rs); box-shadow:var(--shadow-up); columns:3 190px; column-gap:24px; }
.has-menu:hover .mega, .has-menu:focus-within .mega { display:block; }
.mega .col { break-inside:avoid; margin:0 0 14px; }
.mega a { display:block; padding:4px 8px; border-radius:6px; color:var(--ink); text-decoration:none; }
.mega a:hover, .mega a:focus-visible { background:var(--soft); color:var(--accent); }
.mega a.head { font-weight:700; }
.prose { max-width:720px; } .prose p { line-height:1.6; }
.svc { display:grid; gap:14px; margin:0 0 18px; }
.contact { display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:0; } .contact dt { font-weight:700; } .contact dd { margin:0; }
@media (max-width:640px) { .mainnav { flex-wrap:wrap; } .mega { columns:2 140px; } }

/* ---------- design pass: cards, footer, home, mobile nav ---------- */
.card h3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.9em; font-size:.95rem; }
.card .meta { text-transform:uppercase; letter-spacing:.04em; font-size:.74rem; margin-top:2px; }
.card .price { margin-top:auto; padding-top:8px; font-size:1.25rem; }
.stock { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.stock .dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.card .pic { background:var(--soft); }
.card .pic img { padding:6px; }
.card .pic img[src$="placeholder.svg"] { padding:22%; opacity:.5; }
.foot { padding-block:36px 30px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:26px; }
.foot-title { color:#fff; font-weight:700; margin:0 0 10px; letter-spacing:.01em; }
.foot a { color:#cfe0e8; text-decoration:none; } .foot a:hover { color:#fff; text-decoration:underline; }
.foot-note { margin-top:26px; padding-top:18px; border-top:1px solid var(--head-line); max-width:80ch; }
.values { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:18px 0 6px; }
.values a { display:flex; flex-direction:column; gap:3px; padding:16px 18px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--brass); border-radius:var(--r); text-decoration:none; color:var(--ink); }
.values a:hover { border-color:var(--accent); border-left-color:var(--brass); }
.values b { font-family:var(--serif); font-size:1.05rem; } .values span { color:var(--muted); font-size:.9rem; }
.tile { box-shadow:var(--shadow); } .tile:hover { box-shadow:var(--shadow-up); }
.detail h1 { font-size:clamp(1.5rem,2.6vw,2rem); }
.mega { max-height:70vh; overflow-y:auto; }
@media (max-width:760px) { .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) {
  .mainnav { gap:0; justify-content:space-between; } .mainnav > a, .mainnav .shoplink { padding:7px 9px; font-size:.92rem; }
  .mega { columns:1; }
}
.card h3 { overflow-wrap:anywhere; } .stock { min-height:1.4em; }
.help { margin-top:18px; padding:14px 16px; background:var(--soft); border-radius:var(--rs); font-size:.92rem; }
.mega a.sub2 { padding-left: 14px; font-size: .88em; opacity: .85; }

/* filters by item details */
.facets{margin:.75rem 0;border:1px solid var(--line,#ddd);border-radius:8px;padding:.5rem .75rem;background:var(--card,#fff)}
.facets>summary{cursor:pointer;font-weight:600}
.facet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem 1.25rem;margin-top:.75rem}
.facet-grid fieldset{border:0;padding:0;margin:0;min-width:0}
.facet-grid legend{font-weight:600;margin-bottom:.25rem;padding:0}
.facet-grid .check{display:block;margin:.15rem 0}
.facet-grid details summary{cursor:pointer;font-size:.9rem}
.specs{border-collapse:collapse;margin:.5rem 0 1rem}
.specs th{text-align:left;font-weight:600;padding:.25rem 1rem .25rem 0}
.specs td{padding:.25rem 0}