/* ===========================================================================
   LockeArms - site styles
   Layered on top of Bootstrap 5.3 + bootstrap-icons. Uses CSS variables
   for the brand palette so the theme can be tweaked from one place.
   =========================================================================== */

:root {
  --la-red: #CC0000;           /* primary brand red - nav, buttons, CTAs */
  --la-red-hover: #a30000;     /* darker red for hover states */
  --la-red-light: #fef2f2;     /* tinted background for red sections */
  --la-navy: #0F1B33;          /* dark navy - footer, dark cards */
  --la-navy-soft: #1B2A4A;     /* slightly lighter navy for hover/panels */
  --la-black: #0F1B33;         /* alias → navy (so existing refs work) */
  --la-black-soft: #1B2A4A;
  --la-ink: #0F1B33;
  --la-accent: #CC0000;        /* alias → red (so existing accent refs work) */
  --la-accent-bright: #e63333;
  --la-text: #1c1c28;
  --la-muted: #6b6b76;
  --la-border: #e3e3ea;
  --la-bg: #ffffff;
  --la-bg-alt: #f5f5f7;
}

html, body {
  font-family: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--la-text);
  background: var(--la-bg);
}

a {
  color: var(--la-black);
  text-decoration: none;
}
a:hover {
  color: var(--la-red);
}

.text-la-accent { color: var(--la-red) !important; }
.bg-la-black { background: var(--la-navy) !important; }
.bg-la-ink { background: var(--la-navy) !important; }
.bg-la-bg-alt { background: var(--la-bg-alt) !important; }

/* ---------- Buttons ---------- */

.btn-la-primary {
  display: inline-block;
  background: var(--la-red);
  color: #fff;
  border: 1px solid var(--la-red);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-la-primary:hover {
  background: var(--la-red-hover);
  border-color: var(--la-red-hover);
  color: #fff;
}
/* Brief "added" flash after a successful htmx add from the PDP (mirrors the
   tile .la-card-add.is-added). Declared after :hover, same specificity, so it
   wins whether or not the cursor is still over the button. */
.btn-la-primary.is-added,
.btn-la-primary.is-added:hover {
  background: #1f8a46;
  border-color: #1f8a46;
  color: #fff;
}

/* Account dashboard stat tiles. They're links, so give them an obvious
   clickable affordance: the border tracks the brand red, the card lifts, and a
   "View/Manage" cue fades in on hover/focus. */
.account-tile {
  display: block;
  height: 100%;
}
.account-tile-inner {
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.account-tile:hover .account-tile-inner,
.account-tile:focus-visible .account-tile-inner {
  border-color: var(--la-red) !important;
  box-shadow: 0 4px 14px rgba(15, 27, 51, 0.10);
  transform: translateY(-2px);
}
.account-tile-cta {
  margin-top: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--la-red);
  opacity: 0;
  transition: opacity 120ms ease;
}
.account-tile:hover .account-tile-cta,
.account-tile:focus-visible .account-tile-cta {
  opacity: 1;
}
/* Touch devices have no hover, so keep the cue permanently visible there. */
@media (hover: none) {
  .account-tile-cta { opacity: 1; }
}

.btn-la-outline {
  display: inline-block;
  background: transparent;
  color: var(--la-navy);
  border: 1px solid var(--la-navy);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
}
.btn-la-outline:hover {
  background: var(--la-navy);
  color: #fff;
}

/* ---------- Utility bar (top informational links) ---------- */

.la-utilitybar {
  background: var(--la-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.la-utilitybar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.15rem;
}
.la-utilitybar-list a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
}
.la-utilitybar-list a:hover {
  color: #fff;
}
.la-utilitybar-list a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--la-red);
}

/* Staff Dashboard entry point, which replaced the full-width cockpit bar (see
   _partials/utility_nav.html). Declared AFTER `.la-utilitybar-list a` on
   purpose: both selectors are (0,1,1), so the tie is broken by source order
   and moving this above would silently lose `display` and `color`. */
.la-utilitybar-staff {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  margin-left: 0.3rem;
}
.la-utilitybar-staff a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-weight: 700;
}
.la-utilitybar-badge {
  background: var(--la-red);
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
}

@media (max-width: 991.98px) {
  .la-utilitybar-list {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  /* Five items rather than four now that Dashboard is here, and at the desktop
     padding they need ~375px inside a 351px container - so they are tightened
     to fit one row on a 375px phone WITH the badge showing. wrap is kept as the
     safety net for a narrower device or a longer label: this strip must never
     be what pushes a page into horizontal scroll, which is the failure the
     cockpit bar was removed for. */
  .la-utilitybar-list {
    flex-wrap: wrap;
  }
  .la-utilitybar-list a {
    padding: 0.35rem;
  }
  /* The word carries it at this size; the glyph is ~18px of the budget. */
  .la-utilitybar-staff .bi-speedometer2 {
    display: none;
  }
}

/* ---------- Informational content pages ---------- */

.la-page {
  max-width: 820px;
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}
.la-page-title {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--la-navy);
  margin-bottom: 1.25rem;
}
.la-page-body {
  color: var(--la-black);
  line-height: 1.7;
}
.la-page-body h2 {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--la-navy);
  margin: 0 0 1.25rem;
}
.la-page-body h3 {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--la-navy);
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--la-border);
  scroll-margin-top: 1rem;
}
.la-page-body h4 {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--la-navy);
  margin: 1.6rem 0 0.6rem;
  scroll-margin-top: 1rem;
}
.la-page-section {
  margin-bottom: 3rem;
}
.la-page-section:last-child {
  margin-bottom: 0;
}
.la-section-narrow {
  max-width: 820px;
}
.la-page-body .la-lead {
  font-size: 1.15rem;
  color: var(--la-navy);
}
.la-subhead {
  margin-top: -0.4rem;
  margin-bottom: 1rem;
  color: var(--la-muted);
  font-style: italic;
  font-size: 1.05rem;
}
/* Contact form honeypot: off-screen, never shown to real users */
.la-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reviews page */
.la-review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--la-border);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  background: #fafafb;
}
.la-review-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.la-score-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--la-navy);
  line-height: 1;
}
.la-stars {
  color: #f5a623;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
}
.la-score-count {
  width: 100%;
  color: var(--la-muted);
  font-size: 0.95rem;
}
.la-review-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.la-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.la-review-card {
  margin: 0;
  border: 1px solid var(--la-border);
  border-radius: 6px;
  padding: 1.25rem 1.35rem;
  background: #fff;
}
.la-review-card .la-stars {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.la-review-text {
  color: var(--la-black);
  margin-bottom: 0.9rem;
}
.la-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.la-review-author {
  font-weight: 700;
  color: var(--la-navy);
}
.la-review-author a {
  color: inherit;
}
.la-review-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.la-review-source {
  color: var(--la-muted);
  text-align: right;
}
.la-review-bottom {
  text-align: center;
  border-top: 1px solid var(--la-border);
  padding-top: 2rem;
}
.la-page-body p {
  margin-bottom: 0.9rem;
}
.la-page-body ul {
  margin-bottom: 1.1rem;
  padding-left: 1.25rem;
}
.la-page-body li {
  margin-bottom: 0.45rem;
}
.la-page-body li:last-child {
  margin-bottom: 0;
}

/* Wider container for the policies page so the sticky TOC sidebar fits */
.la-page-wide {
  max-width: 1120px;
}

/* Store-policies two-column layout: sticky TOC sidebar + content */
.la-policy-content {
  min-width: 0;
}
.la-policy-content > p:first-child {
  margin-top: 0;
}
@media (min-width: 992px) {
  .la-policy-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .la-toc-sticky {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    margin-bottom: 0;
  }
}

/* Table of contents (store policies) - grouped */
.la-toc {
  border: 1px solid var(--la-border);
  border-radius: 4px;
  background: #fafafb;
  padding: 1.1rem 1.35rem;
  margin-bottom: 2.5rem;
}
.la-toc-title {
  font-weight: 700;
  color: var(--la-navy);
  margin-bottom: 0.6rem;
}
.la-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.la-toc li {
  margin-bottom: 0;
  break-inside: avoid;
}
.la-toc-group {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--la-navy);
  text-decoration: none;
  margin: 0.9rem 0 0.35rem;
}
.la-toc-groups > li:first-child .la-toc-group {
  margin-top: 0;
}
.la-toc-group:hover {
  color: var(--la-red);
}
.la-toc-sublist a {
  display: block;
  color: var(--la-muted);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.12rem 0;
}
.la-toc-sublist a:hover {
  color: var(--la-red);
}

/* Floating back-to-top button (all viewports; shown after scrolling down) */
.la-totop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--la-navy);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.la-totop[hidden] {
  display: none;
}
.la-totop:hover {
  background: var(--la-red);
  color: #fff;
}

/* FAQ accordion (native <details>) */
.la-faq-intro {
  color: var(--la-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.la-faq-item {
  border-bottom: 1px solid var(--la-border);
}
.la-faq-item:first-child {
  border-top: 1px solid var(--la-border);
}
.la-faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 700;
  color: var(--la-navy);
}
.la-faq-item > summary::-webkit-details-marker {
  display: none;
}
.la-faq-caret {
  flex: none;
  font-size: 0.9rem;
  color: var(--la-muted);
  transition: transform 0.2s ease;
}
.la-faq-item[open] > summary .la-faq-caret {
  transform: rotate(180deg);
}
.la-faq-answer {
  padding: 0 0 1.1rem;
}
.la-faq-answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Announcement bar ---------- */

.la-announcement {
  background: var(--la-red);
  color: #fff;
  font-size: 0.82rem;
  padding: 0.45rem 0;
  text-align: center;
}

/* ---------- Header / nav ---------- */

.la-topbar {
  background: #fff;
  border-bottom: 1px solid var(--la-border);
  padding: 0.4rem 0;
}
.la-topbar .row > .col {
  min-width: 0;
}
.la-topbar .la-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.la-topbar .la-brand .la-brand-lockup {
  max-width: 100%;
  height: auto;
}
@media (min-width: 992px) {
  .la-topbar .la-brand .la-brand-lockup {
    height: 3.9375rem;
    width: auto;
  }
}

.la-topbar .la-search input {
  border: 1px solid var(--la-border);
  border-right: none;
  border-radius: 2px 0 0 2px;
  height: 42px;
}
.la-topbar .la-search button {
  background: var(--la-red);
  color: #fff;
  border: 1px solid var(--la-red);
  border-radius: 0 2px 2px 0;
  height: 42px;
  padding: 0 1rem;
}
.la-topbar .la-search button:hover {
  background: var(--la-red-hover);
  border-color: var(--la-red-hover);
  color: #fff;
}
/* Clear (X) button, overlaid on the input's right edge, left of the red submit
   button (which is ~3rem wide). Shown by JS only when the field has text - the
   native type=search clear is unreliable on mobile, so we suppress it and use
   this on every viewport. The extra `.la-search` in the selector outranks the
   generic red `.la-topbar .la-search button` rule so the X stays subtle (a
   muted glyph over the input, no red block, no border). */
.la-topbar .la-search .la-search-clear {
  position: absolute;
  top: 50%;
  right: 3.1rem;
  transform: translateY(-50%);
  z-index: 5;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--la-muted);
  padding: 0.35rem 0.45rem;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}
.la-topbar .la-search .la-search-clear:hover {
  /* Re-assert transparent bg/border: the generic `.la-search button:hover`
     rule (red block) also matches this <button>, and this selector only
     outranks it for properties it declares - so name them explicitly. */
  background: transparent;
  border-color: transparent;
  color: var(--la-black);
  opacity: 1;
}
.la-topbar .la-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Top-bar utility actions. A single non-wrapping row so the cart can never
   drop to a second line; each action is an icon over a short label so
   customers know what it does. Its column is `col-auto`, so it is exactly as
   wide as its icons and the search column absorbs the difference - a
   signed-in row (5 links, ~253px) outgrew the old fixed col-lg-3 (222px at
   the 960px container) and spilled left under the search button. */
.la-topbar-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 1.35rem;
}
/* Mobile: icons ride up on the brand row (see nav column order), so keep them
   tight - smaller glyph + label and a slimmer gap. */
@media (max-width: 991.98px) {
  .la-topbar-actions { gap: 0.9rem; }
  .la-icon-link i { font-size: 1.1rem; }
  .la-icon-label { font-size: 0.6rem; }
  /* The search field drops to its own full-width line below the brand/icons
     row here (col-12 order-3) - replace the row-gap the removed g-3 gutter
     used to supply, scoped to just this wrap instead of the whole row. */
  .la-search { margin-top: 0.75rem; }
}
/* Phones: a signed-in (especially staff) user has 5 icons in this column -
   FFL, Account (+ staff badge), Wishlist, Sign out, Cart - which never fit
   next to the brand lockup with labels attached. Drop to icon-only; the
   title/aria-label on each .la-icon-link still names it for touch and
   screen readers. */
@media (max-width: 575.98px) {
  .la-topbar-actions { gap: 0.6rem; }
  .la-icon-label { display: none; }
}

.la-icon-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--la-black);
  text-decoration: none;
  line-height: 1;
}
.la-icon-link i { font-size: 1.3rem; }
.la-icon-link:hover { color: var(--la-red); }
.la-icon-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--la-muted);
  white-space: nowrap;
}
.la-icon-link:hover .la-icon-label { color: var(--la-red); }

/* Icon carrying a corner badge (cart count / staff marker). */
.la-icon-ic { position: relative; display: inline-flex; }
#la-cart-badge {
  position: absolute;
  top: -7px;
  right: -11px;
  background: var(--la-red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  border-radius: 999px;
  padding: 0.08rem 0.3rem;
}
.la-staff-badge {
  position: absolute;
  top: -8px;
  right: -17px;
  background: var(--la-navy);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  border-radius: 3px;
  padding: 0.05rem 0.25rem;
}

.la-mainnav {
  background: var(--la-navy);
  border-top: 3px solid var(--la-red);
}
.la-mainnav-inner {
  position: relative;   /* anchor for the full-width mega panel */
}
.la-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.la-nav-link {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.84rem;
  padding: 1rem 1.1rem;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.la-nav-link:hover,
.la-mega-item:hover > .la-nav-row > .la-nav-link {
  color: #fff;
  border-bottom-color: var(--la-red);
  background: rgba(204, 0, 0, 0.25);
}
/* Empty top-level department: muted, but ALWAYS clickable (navigates). */
.la-dept-empty > .la-nav-row > .la-nav-link {
  color: #b9bcc6;
}

/* The mega panel itself */
.la-mega-menu {
  display: none;
  background: var(--la-navy-soft);
  border-top: 1px solid var(--la-red);
  padding: 1.25rem 1.5rem;
}
.la-mega-item.is-open > .la-mega-menu {
  display: block;
}
.la-mega-shopall {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-decoration: none;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}
.la-mega-shopall i {
  color: var(--la-red);
}
.la-mega-shopall:hover {
  color: var(--la-red);
}
.la-mega-grid {
  display: grid;
  gap: 0.75rem 2rem;
}
.la-mega-col {
  break-inside: avoid;
}
.la-mega-grouphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.la-mega-head {
  display: block;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(204, 0, 0, 0.5);
  text-decoration: none;
  flex: 1 1 auto;
}
a.la-mega-head:hover {
  color: var(--la-red);
}
.la-mega-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
}
.la-mega-link {
  display: block;
  color: #cdd0d8;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 0.25rem 0;
  text-decoration: none;
}
a.la-mega-link:hover {
  color: #fff;
}
/* Empty subcategories: muted, non-interactive (rendered as <span>, so they
   are already non-clickable and non-focusable; this is the visual cue). */
.la-cat-empty {
  color: #6b6f7a !important;
  opacity: 0.55;
  cursor: default;
}

/* Chevron expand buttons - mobile only (hidden on desktop). */
.la-nav-toggle,
.la-nav-expand,
.la-mega-expand {
  display: none;
}

/* ---------- Desktop (>=992px): hover mega panel ---------- */
@media (min-width: 992px) {
  .la-nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .la-mega-item {
    position: static;   /* so the panel can span the whole container */
  }
  .la-mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1050;
    max-height: 80vh;
    overflow-y: auto;
  }
  .la-mega-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Level-3 lists are always visible on desktop. */
  .la-mega-list {
    display: block;
  }
  /* An oversized group (flagged in the template when its leaf list runs long)
     spans extra tracks and flows its links into columns, so a 25+ item list
     fills the width instead of running down one narrow column. */
  .la-mega-col-wide {
    grid-column: span 3;
  }
  .la-mega-col-wide .la-mega-list {
    column-count: 3;
    column-gap: 2rem;
  }
  .la-mega-col-wide .la-mega-list > li {
    break-inside: avoid;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .la-mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .la-mega-col-wide {
    grid-column: span 2;
  }
  .la-mega-col-wide .la-mega-list {
    column-count: 2;
  }
}

/* ---------- Mobile (<992px): drill-down accordion ---------- */
@media (max-width: 991.98px) {
  .la-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.84rem;
    padding: 0.85rem 1.1rem;
  }
  .la-nav-list {
    display: none;
    flex-direction: column;
  }
  .la-nav-list.is-open {
    display: flex;
  }
  .la-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .la-nav-link {
    flex: 1 1 auto;
  }
  .la-nav-expand,
  .la-mega-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0.5rem 1rem;
    min-width: 44px;
    min-height: 44px;
  }
  .la-mega-menu {
    position: static;
    padding: 0.5rem 1.25rem 1rem;
  }
  .la-mega-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Level-3 lists collapsed until the group is tapped open. */
  .la-mega-list {
    display: none;
  }
  .la-mega-col.is-open .la-mega-list {
    display: block;
  }
  .la-mega-link {
    padding: 0.5rem 0;
  }
  .la-nav-expand[aria-expanded="true"] i,
  .la-mega-expand[aria-expanded="true"] i {
    transform: rotate(180deg);
  }
}

/* ---------- MSRP strikethrough ---------- */

.la-msrp-strike {
  text-decoration: line-through;
  color: #9aa0ab;
  font-size: 0.85em;
  margin-right: 0.4rem;
}

/* "Save $X (Y%)" callout, inline after the struck MSRP on the compare line. */
.la-pdp-savings {
  font-weight: 700;
  color: #1f8a46;
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.la-hero {
  background:
    linear-gradient(135deg, rgba(15, 27, 51, 0.92), rgba(15, 27, 51, 0.65)),
    url("../img/home/hero.4e3de6cdf69d.jpg") center 12% / cover;
  color: #fff;
  padding: 6rem 0;
}
.la-hero h1 {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 2.8rem;
  line-height: 1.15;
}
/* Phones: the full sentence at desktop size wraps to five lines and the
   hero swallows the first screen before Shop by Department appears. */
@media (max-width: 575.98px) {
  .la-hero {
    padding: 3.5rem 0;
  }
  .la-hero h1 {
    font-size: 1.9rem;
    letter-spacing: 0.02em;
  }
}

/* ---------- Reviews / trust band under the hero ---------- */

.la-trust {
  background: var(--la-bg-alt);
  border-bottom: 1px solid var(--la-border);
  padding: 1.25rem 0;
}
.la-trust-tile {
  display: block;
  text-align: center;
  color: inherit;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  border-radius: 4px;
}
.la-trust-tile:hover {
  background: #fff;
  color: inherit;
}
.la-trust-score {
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.2;
}
.la-trust-score .bi {
  color: var(--la-red);
  font-size: 1.2rem;
  vertical-align: -0.05em;
}
.la-trust-label {
  font-size: 0.8rem;
  color: var(--la-muted);
  line-height: 1.3;
  margin-top: 0.15rem;
}

/* ---------- Section headings ---------- */

.la-section {
  padding: 3.5rem 0;
}
.la-section.la-section-alt {
  background: var(--la-bg-alt);
}
.la-section-title {
  text-align: center;
  margin-bottom: 2.2rem;
}
.la-section-title h2 {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}
.la-section-title .la-section-rule {
  width: 60px;
  height: 3px;
  background: var(--la-red);
  margin: 0.5rem auto 0;
}
.la-section-title p {
  color: var(--la-muted);
  font-size: 0.95rem;
}

/* ---------- Featured categories grid ---------- */

.la-cat-tile {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--la-border);
  border-radius: 2px;
  background: var(--la-black);
  color: #fff;
  height: 200px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.la-cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(3, 3, 15, 0.18);
  color: #fff;
}
.la-cat-tile .la-cat-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  transition: opacity 200ms ease, transform 200ms ease;
}
.la-cat-tile:hover .la-cat-tile-bg {
  opacity: 0.75;
  transform: scale(1.04);
}
.la-cat-tile .la-cat-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(3,3,15,0.0) 0%, rgba(3,3,15,0.85) 100%);
}
.la-cat-tile .la-cat-tile-icon {
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 0.4rem;
}
.la-cat-tile .la-cat-tile-title {
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.5rem;
  text-align: center;
}

/* Phones: six 200px department tiles ran ~825px, and 56px section padding
   plus a 1.8rem heading spent another ~150px per section on chrome. */
@media (max-width: 575.98px) {
  .la-section { padding: 2rem 0; }
  .la-section-title { margin-bottom: 1.25rem; }
  .la-section-title h2 { font-size: 1.4rem; }
  .la-cat-tile { height: 110px; }
  .la-cat-tile .la-cat-tile-title {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    padding: 0 0.4rem;
  }
  .la-trust { padding: 0.75rem 0; }
  .la-trust-score { font-size: 1.25rem; }
}

/* ---------- Horizontal scroll product strip ---------- */

.la-scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  /* overflow-x: auto computes overflow-y to auto too (CSS Overflow spec), so
     this row clips vertically even though only horizontal scrolling is
     wanted. With zero top clearance that clipped the top border - and a
     couple pixels of the thumbnail - off every card on :hover, where
     .la-product-card lifts via translateY(-2px). */
  padding-top: 0.5rem;
}
/* Cards are sized so the last visible one is cut off at the right edge: a
   partial card is the cue that the row scrolls. An exact fit (2 on a phone,
   4 on desktop) read as a finished grid, and iOS and macOS hide the
   scrollbar, so nothing else says "more this way". */
.la-scroll-row > .la-scroll-item {
  flex: 0 0 calc((100% - 1rem) / 2.4);
  /* A flex item's default min-width is its content, so one nowrap chip or
     unbroken title would stretch the card past its column and shove the
     rest of the row off-screen. */
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .la-scroll-row > .la-scroll-item {
    flex-basis: calc((100% - 4rem) / 4.4);
  }
}
/* Phones: bleed the row to the screen edge and fade the cut-off card so it
   reads as intentional rather than a layout bug. The fade is a sticky flex
   child, so it stays pinned to the right edge while the cards scroll under
   it and needs no wrapper element. */
@media (max-width: 767.98px) {
  .la-scroll-row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    scroll-padding-left: 0.75rem;
  }
  .la-scroll-row::after {
    content: "";
    position: sticky;
    right: 0;
    flex: 0 0 2rem;
    margin-left: -2rem;
    align-self: stretch;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
  }
  .la-section-alt .la-scroll-row::after {
    background: linear-gradient(to right, rgba(245, 245, 247, 0), var(--la-bg-alt) 85%);
  }
}

/* ---------- Product card ---------- */

.la-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--la-border);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  height: 100%;
}
.la-product-card:hover {
  border-color: var(--la-black);
  box-shadow: 0 6px 18px rgba(3, 3, 15, 0.10);
  transform: translateY(-2px);
}
.la-product-card .la-product-thumb {
  position: relative;
  /* White well, not gray: distributor product photos are shot on pure white,
     so a gray well makes those photos read as a white box floating in gray.
     Matching the card white lets the product sit flush on the card; the
     hairline keeps the image/text seam the gray tray used to provide. */
  background: #fff;
  border-bottom: 1px solid var(--la-border);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.la-product-card .la-product-thumb img {
  /* Fit the whole product inside the square card without cropping -
     stocks, long guns, and other non-square shapes get cut off badly
     with object-fit: cover. `contain` shows the full product with
     letterboxing where needed; the `padding` softens the edges so
     nothing looks tight against the card border. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 0.6rem;
}
.la-product-card .la-product-thumb .la-product-class-icon {
  font-size: 3rem;
  color: var(--la-muted);
}
.la-product-card .la-stock-pill {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
}
.la-stock-in_stock { background: #1f8a46; color: #fff; }
.la-stock-low { background: #d6892f; color: #fff; }
.la-stock-out { background: #6b6b76; color: #fff; }
/* Manufacturer rebate badge: the stock pill's shape, top right, navy. */
.la-product-card .la-rebate-pill {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--la-navy);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
}
/* Manufacturer rebates block: product page, the Rebates page, the order page. */
.la-rebates {
  border: 1px solid var(--la-border, #e3e3ea);
  border-radius: 2px;
  padding: 0.65rem 0.8rem;
}
.la-rebates .la-rebates-head {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--la-navy);
}
.la-rebates .la-rebate-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid #f0f0f4;
  font-size: 0.9rem;
}
.la-rebates .la-rebate-row:first-of-type { border-top: none; }
.la-rebates .la-rebate-row strong { color: var(--la-navy); }
.la-rebates .la-rebate-row small {
  display: block;
  color: var(--la-muted);
  font-size: 0.78rem;
}
.la-rebates .la-rebate-row > a {
  color: var(--la-red);
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  text-decoration: none;
}
.la-rebates .la-rebates-foot {
  color: var(--la-muted);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}
.la-rebates .la-rebates-foot a { color: inherit; text-decoration: underline; }
/* Cart line: "Rebate available: ..." under the savings line. */
.la-cl-rebate { font-size: 0.75rem; color: var(--la-navy); margin-top: 0.15rem; }
.la-cl-rebate a { color: var(--la-red); font-weight: 700; text-decoration: none; }

.la-product-card .la-product-body {
  padding: 0.85rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Quick add-to-cart button on a product tile. Outline that fills on hover,
   with a brief green "added" flash driven by htmx after the POST. */
.la-product-card .la-card-add-form { margin-top: 0.6rem; }
.la-product-card .la-card-add {
  display: block;
  width: 100%;
  border: 1px solid var(--la-red);
  background: #fff;
  color: var(--la-red);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.la-product-card .la-card-add:hover { background: var(--la-red); color: #fff; }
/* The MAP add button promises a price the tile does not show, so it is filled,
   not outline, and a line above says where the price is. */
.la-product-card .la-card-map-hint {
  font-size: 0.72rem;
  color: var(--la-muted);
  text-align: center;
  margin-bottom: 0.25rem;
}
.la-product-card .la-card-add.la-card-add-map { background: var(--la-red); color: #fff; }
.la-product-card .la-card-add.la-card-add-map:hover {
  background: var(--la-red-hover);
  border-color: var(--la-red-hover);
}
/* "View Your Price" waits hidden beside the MAP add form and takes its place
   after the add. The display above would otherwise beat the hidden attribute
   and show both. Same top gap as the form it replaces. */
.la-product-card .la-card-add[hidden] { display: none; }
.la-product-card .la-card-view-price { margin-top: 0.6rem; }
.la-product-card .la-card-add.is-added {
  background: #1f8a46;
  border-color: #1f8a46;
  color: #fff;
}
/* Email-for-price (MAP) CTA: a quieter navy outline, distinct from the red add. */
.la-product-card .la-card-quote {
  border-color: var(--la-black);
  color: var(--la-black);
}
.la-product-card .la-card-quote:hover { background: var(--la-black); color: #fff; }
.la-product-card .la-product-mfr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--la-muted);
  margin-bottom: 0.25rem;
}
.la-product-card .la-product-name {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--la-black);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.6rem;
  min-height: 2.6em;
}
.la-product-card .la-product-name:hover { color: var(--la-accent); }
.la-product-card .la-product-price {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--la-black);
  margin-top: auto;
}
/* Sits in the price row, so it would otherwise inherit the 900 weight and
   outweigh the product name. */
.la-product-card .la-product-price .la-price-unavailable {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--la-muted);
}
/* Savings note in the card price row, beside the price. Content follows the
   "rule of 100" (dollars off high-priced items, percent off low-priced ones)
   via the savings_label filter; green to read as a value cue. */
.la-product-card .la-save-note {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1f8a46;
  white-space: nowrap;
}

/* Ammo cost-per-round, shown beside the price on cards and the PDP. */
.la-price-per-round {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--la-red);
  white-space: nowrap;
}
.la-product-card .la-price-per-round {
  /* Own line under the price, flush left - avoids the slight indent that an
     inline-block produced when it wrapped on narrow (mobile) cards. */
  display: block;
  margin-left: 0;
  margin-top: 0.1rem;
}
/* Ammo price rows (see _product_card_inner): pair $/round with the price line
   (no MSRP) or the savings line (with MSRP). $/round goes inline here, not on
   its own block line. */
.la-product-card .la-price-line { line-height: 1.25; }
.la-product-card .la-price-sub { margin-top: 0.12rem; }
.la-product-card .la-price-line .la-price-per-round {
  display: inline;
  margin-top: 0;
  margin-left: 0.45rem;
  vertical-align: baseline;
}
.la-product-card .la-price-sub .la-save-note { margin-left: 0; }
.la-pdp .la-pdp-price .la-price-per-round {
  font-size: 1rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ---------- Product cards on mobile (2-up grid, < md / 768px) ---------- */
@media (max-width: 767.98px) {
  /* Shorter thumbnail + tighter body so more products fit per screen.
     object-fit: contain keeps the whole image visible in the shorter frame. */
  .la-product-card .la-product-thumb { aspect-ratio: 4 / 3; }
  .la-product-card .la-product-thumb img { padding: 0.45rem; }
  .la-product-card .la-product-body { padding: 0.65rem 0.7rem 0.8rem; }
  /* Give long ammo names a third line so they don't truncate mid-value
     ("... 50rd/box, 10..."). Keeps the 2-line min so short names still align. */
  .la-product-card .la-product-name {
    -webkit-line-clamp: 3;
    margin-bottom: 0.45rem;
  }
}

/* ---------- Add-to-cart confirmation: toast + badge pulse ----------
   The tile add posts via htmx; the response updates the cart badge (which
   pulses - Option B) and rides an out-of-band toast into the tray (Option C).
   Desktop: bottom-right, out of the way and clear of the top-right cart icon.
   Mobile: top-center (see the media query) - the bottom edge collides with the
   thumb zone / gesture bar, and top-center sits nearer the cart. */
.la-toast-tray {
  position: fixed;
  z-index: 1080;              /* above the nav, below Bootstrap modals (1055+ handled case-by-case) */
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  max-width: min(92vw, 340px);
  pointer-events: none;       /* let clicks pass through the empty tray... */
}
.la-toast {
  pointer-events: auto;       /* ...but the toasts themselves are interactive */
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 240px;
  background: var(--la-navy);
  color: #fff;
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 6px 20px rgba(3, 3, 15, 0.22);
  animation: la-toast-in 0.22s ease;
}
.la-toast.la-toast-out { animation: la-toast-out 0.26s ease forwards; }
.la-toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1f8a46;        /* success green, matches the tile "added" flash */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.la-toast-body { flex: 1; line-height: 1.35; }
.la-toast-title { font-size: 0.82rem; font-weight: 700; }
.la-toast-name { font-size: 0.78rem; color: #c3c8d4; }
.la-toast-link {
  align-self: center;
  color: #ff6b6b;             /* lightened red for contrast on the navy toast */
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.la-toast-link:hover { color: #ff8f8f; }
.la-toast-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: #8a90a0;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0 0 0.15rem;
  cursor: pointer;
}
.la-toast-close:hover { color: #fff; }

@keyframes la-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes la-toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* Option B: the cart badge bumps when an item is added (class toggled by the
   toast controller so it retriggers on every add). */
.la-badge-bump { animation: la-badge-bump 0.38s ease; }
@keyframes la-badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

@media (max-width: 767.98px) {
  .la-toast-tray {
    right: 50%;
    left: auto;
    bottom: auto;
    top: 0.75rem;
    transform: translateX(50%);
    align-items: center;
    max-width: 92vw;
  }
}

/* Respect reduced-motion: keep the confirmation, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .la-toast,
  .la-toast.la-toast-out,
  .la-badge-bump { animation: none; }
}

/* ---------- Pagination (browse / search / brand / collection) ----------
   Bootstrap's default pager renders in its blue --bs-primary; rebrand to the
   navy palette. Prev/Next are the actionable elements - navy outline that
   fills on hover, matching the card CTA "outline -> fill" idiom - while the
   "Page X of Y" active item is status text, so it drops the fill and reads as
   a quiet label rather than the boldest thing in the row. Navy, not red, keeps
   the pager from competing with the red Add-to-Cart buttons above it. */
.pagination { gap: 0.4rem; }
.pagination .page-item .page-link { margin-left: 0; }
.pagination .page-link {
  color: var(--la-navy);
  background: #fff;
  border: 1px solid var(--la-border);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pagination .page-link:hover {
  background: var(--la-navy);
  border-color: var(--la-navy);
  color: #fff;
}
.pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 27, 51, 0.15);
}
.pagination .page-item.active .page-link {
  background: transparent;
  border-color: transparent;
  color: var(--la-muted);
  cursor: default;
}

/* ---------- Filters sidebar ---------- */

.la-filter-card {
  border: 1px solid var(--la-border);
  border-radius: 2px;
  padding: 1.1rem 1rem;
  margin-bottom: 1rem;
  background: #fff;
}
/* Price and cost-per-round sliders (_partials/_range_facets.html). */
.la-range-facet .la-range-hist { display: flex; align-items: flex-end; gap: 1px; height: 48px; margin-top: 0.4rem; }
.la-range-facet .la-range-hist div { flex: 1; background: #d9d9e0; min-height: 1px; }
.la-range-facet .la-range-hist div.on { background: var(--la-red); }
.la-range-facet .la-range-dual { position: relative; height: 22px; margin-top: -2px; }
.la-range-facet .la-range-track { position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: var(--la-border); border-radius: 2px; }
.la-range-facet .la-range-fill { position: absolute; top: 9px; height: 4px; background: var(--la-red); border-radius: 2px; }
.la-range-facet .la-range-dual input {
  position: absolute; left: -2px; width: calc(100% + 4px); top: 0; height: 22px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none; border: none; box-shadow: none;
}
.la-range-facet .la-range-dual input:focus-visible { outline: none; }
.la-range-facet .la-range-dual input::-webkit-slider-runnable-track { background: none; border: none; height: 22px; }
.la-range-facet .la-range-dual input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 2px;
  border-radius: 50%; background: #fff; border: 2px solid var(--la-red); cursor: grab;
}
.la-range-facet .la-range-dual input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.25); }
.la-range-facet .la-range-dual input::-moz-range-track { background: none; border: none; }
.la-range-facet .la-range-dual input::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--la-red); cursor: grab;
}
.la-range-facet .la-range-ticks { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--la-muted); margin: 2px 0 8px; }
.la-range-facet .la-range-boxes { display: flex; align-items: center; gap: 8px; }
.la-range-facet .la-range-boxes label { flex: 1; position: relative; display: block; margin: 0; }
.la-range-facet .la-range-boxes label i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.8rem; color: var(--la-muted); }
.la-range-facet .la-range-boxes label i.la-range-suffix { left: auto; right: 8px; }
.la-range-facet .la-range-boxes input {
  width: 100%; height: 32px; border: 1px solid #cfcfd8; border-radius: 2px; padding: 0 8px 0 20px;
  font: inherit; font-size: 0.875rem; color: var(--la-black); background: #fff; box-sizing: border-box;
}
.la-range-facet .la-range-boxes label i.la-range-suffix + input,
.la-range-facet .la-range-boxes label:has(.la-range-suffix) input { padding-right: 30px; }
.la-range-facet .la-range-boxes span { font-size: 0.8rem; color: var(--la-muted); }
.la-range-facet .la-range-count { margin-top: 0.4rem; }
.la-filter-card h6 {
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--la-black);
  padding-bottom: 0.5rem;
  margin-bottom: 0.7rem;
}
.la-filter-card .form-check-label {
  font-size: 0.88rem;
}
/* Folded filter groups in the phone/tablet drawer
   (_partials/_filter_card_collapse.html marks them; lg+ never folds). */
.la-filter-card.la-foldable { padding: 0.8rem 1rem; margin-bottom: 0.6rem; }
.la-filter-card.la-foldable > :first-child { cursor: pointer; }
.la-filter-card.la-foldable h6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.la-filter-card.la-foldable h6::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  font-weight: normal;
  font-size: 0.8rem;
  transition: transform 0.15s;
}
.la-filter-card.la-foldable.is-folded h6::after { transform: rotate(-90deg); }
.la-filter-card.la-foldable.is-folded > :not(:first-child),
.la-filter-card.la-foldable.is-folded .la-facet-sort { display: none; }
.la-filter-card.la-foldable.is-folded h6 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Category intro on a phone: 3 lines and "Read more" (browse.html). */
.la-intro-more {
  display: none;
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: var(--la-red);
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 767.98px) {
  .la-intro-lead.is-clamped {
    max-height: 4.5em;
    overflow: hidden;
    position: relative;
    margin-bottom: 0 !important;
  }
  .la-intro-lead.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5em;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--la-bg, #fff));
  }
  .la-intro-more:not([hidden]) { display: inline-block; }
}
/* Per-facet value sort (Common / A–Z / Z–A) - compact, unobtrusive. */
.la-facet-sort {
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--la-border);
  border-radius: 2px;
  background: #fff;
  color: #6c757d;
  max-width: 8rem;
}

/* Responsive filter drawer: at lg+ the offcanvas renders as a static sidebar,
   so strip the offcanvas-body padding to keep the desktop layout identical to
   the pre-drawer design. Below lg it behaves as a normal slide-in offcanvas. */
@media (min-width: 992px) {
  .la-filter-offcanvas .offcanvas-body { padding: 0; }
}

/* ---------- Product detail page ---------- */

.la-pdp-gallery {
  /* White hero to match the tile thumb: photos on white blend into the
     gallery instead of showing a white box on gray. The thumb strip below
     keeps its gray + border-top so it still reads as a selector row. */
  background: #fff;
  border: 1px solid var(--la-border);
}
.la-pdp-main-img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.la-pdp-main-img { overflow: hidden; }
.la-pdp-main-img img {
  /* Fill the frame and let contain letterbox. max-height: 100% alone does not
     resolve against a height that comes only from aspect-ratio, so the frame
     grew to the photo's natural size (tall box shots ran ~460px on a phone). */
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.la-pdp-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--la-border);
}
.la-pdp-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--la-bg-alt);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.15s, border-color 0.15s;
}
.la-pdp-thumb:hover,
.la-pdp-thumb.active {
  border-color: var(--la-black);
  opacity: 1;
}

.la-pdp h1 {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 1.85rem;
}
.la-pdp .la-pdp-mfr {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--la-muted);
}
.la-pdp .la-pdp-price {
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--la-black);
}
/* Notes under the price live inside the 2.2rem/900 block; reset them to body
   text or their .small renders as a ~31px headline. */
.la-pdp .la-pdp-price .la-map-note {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}
/* "See price in cart" is the only cue that a lower price exists, so it
   reads a step above body text, not as fine print. */
.la-pdp .la-pdp-price .la-map-note > span {
  font-size: 1.1rem;
  font-weight: 700;
}
.la-pdp .la-pdp-price .la-map-note .la-map-why { font-size: .9rem; }
/* Compare line above the PDP price: struck MSRP + "Save $X" callout, on their
   own row so the big price line (and its inline /round metric) is unaffected. */
.la-pdp .la-pdp-price .la-pdp-compare {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1px;
}
.la-pdp .la-pdp-price .la-pdp-compare .la-msrp-strike {
  font-size: inherit;
  margin-right: 0.25rem;
}
/* "ARFCOM price" beside the member's price: a small label, not a second
   headline. A Bootstrap .badge sizes in em, so inside the 2.2rem price line it
   rendered as tall as the price itself. */
.la-pdp .la-pdp-price .la-member-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.6rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f8a46;
  background: #e6f4ec;
  border: 1px solid #b7dfc6;
  vertical-align: middle;
  white-space: nowrap;
}
.la-pdp .la-pdp-msrp {
  font-size: 1rem;
  color: var(--la-muted);
  text-decoration: line-through;
  margin-left: 0.6rem;
}
.la-pdp .la-spec-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--la-muted);
  font-weight: 700;
  width: 38%;
}
.la-pdp .la-spec-table td {
  font-size: 0.92rem;
}

/* ---------- Cart line items (desktop grid row -> mobile card) ---------- */

.la-cart-head,
.la-cart-line {
  display: grid;
  grid-template-columns: 1fr 150px 120px 34px;
  gap: 12px;
  align-items: center;
}
.la-cart-head {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--la-border);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--la-muted);
}
.la-cart-head .h-qty { text-align: center; }
.la-cart-head .h-price { text-align: right; }
.la-cart-line {
  padding: 16px 0;
  border-bottom: 1px solid var(--la-border);
}
.la-cl-product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.la-cl-thumb { flex: 0 0 auto; line-height: 0; }
.la-cl-thumb img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--la-border); }
.la-cl-info { min-width: 0; }
.la-cl-brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--la-muted);
}
.la-cl-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  color: var(--la-black);
  line-height: 1.3;
  margin: 2px 0;
}
.la-cl-upc { font-size: 0.75rem; color: var(--la-muted); }
.la-cl-qty { justify-self: center; }
.la-cl-price { text-align: right; }
.la-cl-total { font-weight: 700; font-size: 1.05rem; }
.la-cl-strike {
  color: var(--la-muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.85rem;
  margin-right: 0.25rem;
}
.la-cl-perround { font-size: 0.75rem; font-weight: 600; color: var(--la-red); }
.la-cl-each { font-size: 0.75rem; color: var(--la-muted); }
/* Why a line's price moved since the customer last saw it. Sits under the
   figure it explains, and is deliberately quiet - it reassures rather than
   alarms. The "up" variant is the one worth noticing, so only it takes the
   accent colour. */
.la-cl-price-note {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--la-muted);
  margin-top: 4px;
  max-width: 22ch;
  margin-left: auto;
  text-align: right;
}
.la-cl-price-note .bi { margin-right: 2px; }
.la-cl-price-note.la-cl-price-up { color: var(--la-red); }
.la-cl-remove { justify-self: end; }
/* Secondary "save for later" action under the product details (roomy 1fr
   column), not crammed into the 34px remove column. */
.la-cl-save { margin-top: 8px; }
.la-cl-save button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--la-muted);
  cursor: pointer;
}
.la-cl-save button:hover { color: var(--la-red); text-decoration: underline; }

/* Saved for later: its own shaded panel, visually distinct from the active
   cart list above it - a plain heading over identically-styled rows read as
   more cart items rather than a separate, parked-aside area. */
.la-saved-section {
  background: var(--la-bg-alt);
  border-radius: 6px;
  padding: 14px 16px 2px;
}
.la-saved-section-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--la-muted);
}
.la-saved-item .la-cl-thumb img { filter: grayscale(40%); opacity: 0.85; }
.la-saved-item .la-cl-name { color: var(--la-muted); }

@media (max-width: 991.98px) {
  .la-cart-head { display: none; }
  .la-cart-line {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product remove"
      "qty     price";
    gap: 10px 12px;
    align-items: start;
  }
  .la-cl-product { grid-area: product; }
  .la-cl-qty { grid-area: qty; justify-self: start; align-self: center; }
  .la-cl-price { grid-area: price; align-self: center; }
  .la-cl-remove { grid-area: remove; align-self: start; }
}
/* The PDP stepper takes its height from the Add to Cart button beside it; the
   cart one stands alone and collapsed to the input's ~24px. */
.la-cart-qty-form .la-qty { height: 40px; }

/* Cart page: lines, summary, saved in source order (the phone order); at lg+
   saved sits under the lines with the summary alongside. */
.la-cart-layout { display: grid; gap: 1.5rem; }
.la-cart-layout > * { min-width: 0; }
@media (min-width: 992px) {
  .la-cart-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .la-cart-main,
  .la-cart-saved { grid-column: 1; }
  .la-cart-summary { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* Wishlist tile overlays. They share the thumbnail's corners with the card's
   own pills (stock top-left, rebate top-right), so each steps down below the
   pill when that corner is taken. */
.la-wish-item .la-wish-drop,
.la-wish-item .la-wish-remove {
  position: absolute;
  top: 0.6rem;
  z-index: 1;
}
.la-wish-item .la-wish-drop { left: 0.6rem; }
.la-wish-item .la-wish-remove { top: 0.25rem; right: 0.25rem; }
.la-wish-item:has(.la-stock-pill) .la-wish-drop { top: 2.35rem; }
.la-wish-item:has(.la-rebate-pill) .la-wish-remove { top: 2.35rem; }

/* Small text controls (remove, save for later, Change): an invisible ~44px
   tap area around the visible label, so layout and look stay put. */
.la-tap { position: relative; }
.la-tap::after {
  content: "";
  position: absolute;
  inset: -12px -10px;
}

/* Outline button inside a Bootstrap input-group (promo apply, FFL finder
   search): the group pulls the button -1px over the input, hiding its left
   border. Lift it so its border reads as the divider. */
.input-group .btn-la-outline { position: relative; z-index: 2; }

/* ---------- PDP buy-box actions (two-tier) ---------- */

/* Tier 2: secondary outline actions split into equal columns. One child
   (wishlist only) spans full width; two children (email-for-price + wishlist)
   share it 50/50. Children may be an <a> or a wishlist <form>. */
.la-pdp-actions-secondary {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.la-pdp-actions-secondary > * {
  flex: 1 1 0;
  min-width: 0;
}
.la-pdp-actions-secondary form {
  display: flex;
}
.la-pdp-actions-secondary .btn-la-outline {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* On narrow phones the two halves stack so uppercase labels never truncate. */
@media (max-width: 575.98px) {
  .la-pdp-actions-secondary {
    flex-direction: column;
  }
}

/* ---------- PDP quantity stepper ---------- */

.la-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--la-border);
  border-radius: 2px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff;
}
.la-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--la-bg-alt);
  border: 0;
  width: 2.75rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--la-navy);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.la-qty-btn:hover { background: var(--la-navy); color: #fff; }
.la-qty-btn:disabled,
.la-qty-btn:disabled:hover {
  background: var(--la-bg-alt);
  color: var(--la-muted);
  opacity: 0.5;
  cursor: not-allowed;
}
.la-qty-input {
  width: 3.25rem;
  border: 0;
  border-left: 1px solid var(--la-border);
  border-right: 1px solid var(--la-border);
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--la-black);
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.la-qty-input::-webkit-outer-spin-button,
.la-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.la-qty-input:focus { outline: none; }

/* ---------- PDP low-stock scarcity tag ---------- */

.la-stock-count {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--la-red);
  vertical-align: middle;
}

/* ---------- PDP sticky mobile add-to-cart ---------- */

.la-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: #fff;
  border-top: 1px solid var(--la-border);
  box-shadow: 0 -4px 18px rgba(15, 27, 51, 0.12);
  /* Hidden until the inline buy-box CTA scrolls out of view (JS adds
     .is-visible via an IntersectionObserver), so the two never duplicate. */
  transform: translateY(100%);
  transition: transform 200ms ease;
}
.la-sticky-buy.is-visible {
  transform: translateY(0);
}
.la-sticky-buy-info { flex: 1 1 auto; min-width: 0; }
.la-sticky-buy-name {
  font-size: 0.72rem;
  color: var(--la-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.la-sticky-buy-price {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--la-black);
}
.la-sticky-per-round {
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--la-red);
  margin-left: 0.4rem;
  white-space: nowrap;
  vertical-align: middle;
}
.la-sticky-buy .btn-la-primary { flex: 0 0 auto; }

/* Email-for-price variant: two equal-width buttons fill the bar (Add to Cart +
   Email for price). Higher specificity so these override the flex above. */
.la-sticky-buy .btn-la-primary.la-sticky-half,
.la-sticky-buy .btn-la-outline.la-sticky-half {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Keep each label on one line in the narrow half-width buttons. */
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* Keep the sticky bar from covering page content on mobile. Padding lives
   here, not in a py-* utility, because utilities are !important and would
   win over this. */
.la-pdp { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (max-width: 991.98px) {
  .la-pdp { padding-top: 1rem; padding-bottom: 5.5rem; }
}

/* PDP on a phone: get the title and price nearer the first screen. The
   gallery stacks above the buy box below lg, so a square hero alone is
   ~350px tall on a 375px phone. */
@media (max-width: 991.98px) {
  .la-pdp-main-img { aspect-ratio: 4 / 3; max-height: min(55vh, 340px); }
  .la-pdp-thumbs { padding: 6px; }
  .la-pdp-thumb { width: 52px; height: 52px; }
  /* One line: the current product's name is the H1 right below. */
  .la-breadcrumb .container {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .la-breadcrumb { padding: 0.5rem 0; }
}
@media (max-width: 575.98px) {
  .la-pdp h1 { font-size: 1.5rem; }
  /* Fits "Usually ships in 5 to 7 business days from our store" plus the
     (i) on one line at 375px; longer FFL/SOT sentences take two. */
  .la-pdp .la-ship-window { font-size: .85rem; }
}

/* ---------- Footer ---------- */

.la-footer {
  background: var(--la-navy);
  color: #c8c8d4;
  padding: 3rem 0 1rem;
  margin-top: 4rem;
  border-top: 4px solid var(--la-red);
}
.la-footer h6 {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.la-footer a {
  color: #c8c8d4;
  display: block;
  padding: 0.18rem 0;
  font-size: 0.88rem;
}
.la-footer a:hover { color: var(--la-red); }
.la-footer a.la-footer-inline { display: inline; padding: 0; }
.la-footer .la-footer-brand img { display: block; height: 2.5rem; width: auto; }
.la-footer .la-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.la-footer .la-footer-badge {
  background: var(--la-navy-soft);
  border: 1px solid #2c3a5a;
  color: #c8c8d4;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.la-footer .la-copyright {
  border-top: 1px solid #2c3a5a;
  padding-top: 1rem;
  margin-top: 2rem;
  font-size: 0.78rem;
  color: #6b6b76;
}

/* ---------- Search dropdown (HTMX) ---------- */

.la-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--la-border);
  border-top: none;
  z-index: 1000;
  max-height: 460px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(3, 3, 15, 0.12);
}
.la-search-results .la-search-hit {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--la-border);
  color: var(--la-text);
}
.la-search-results .la-search-hit:hover {
  background: var(--la-bg-alt);
  color: var(--la-black);
}
.la-search-results .la-search-hit img {
  width: 44px; height: 44px; object-fit: cover;
  border: 1px solid var(--la-border);
}
.la-search-results .la-search-hit-name {
  font-weight: 700;
  font-size: 0.88rem;
}
.la-search-results .la-search-hit-mfr {
  font-size: 0.72rem;
  color: var(--la-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.la-search-results .la-search-hit:focus,
.la-search-results .la-search-hit.is-active {
  background: var(--la-bg-alt);
  color: var(--la-black);
  outline: none;
}
.la-search-results .la-search-group {
  padding: 0.45rem 0.8rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--la-muted);
  background: var(--la-bg-alt);
  border-bottom: 1px solid var(--la-border);
}
.la-search-results .la-search-hit.la-search-term {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-size: 0.9rem;
}
.la-search-results .la-search-term > i {
  width: 1.1rem;
  text-align: center;
  color: var(--la-muted);
}
.la-search-results .la-search-term .la-search-context {
  color: var(--la-muted);
  font-size: 0.8rem;
}
.la-search-results .la-search-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--la-muted);
}
.la-search-results .la-search-empty {
  padding: 1rem;
  color: var(--la-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* ---------- Staff inline edits ---------- */

.la-staff-editable {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  padding: 0 0.1rem;
  transition: border-color 120ms ease, background 120ms ease;
}
.la-staff-editable:hover {
  border-bottom-color: var(--la-red);
  background: rgba(204, 0, 0, 0.06);
}

.la-staff-edit-form {
  vertical-align: middle;
}
.la-staff-edit-form .form-control,
.la-staff-edit-form .form-select {
  border: 1px solid var(--la-red);
}

.card.border-warning {
  border-width: 2px;
  border-radius: 0;
}
.card.border-warning .card-header {
  border-radius: 0;
  border-bottom: 2px solid var(--la-red);
}

/* ---------- Cart page ---------- */

.la-pdp .table.la-spec-table th {
  width: 38%;
}

table.table tbody tr:hover {
  background: var(--la-bg-alt);
}

/* ---------- Auth forms ---------- */

input.form-control,
select.form-select,
textarea.form-control {
  border-radius: 0;
}
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
  border-color: var(--la-red);
  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.1);
}

/* ---------- Saved-card confirmation tile (checkout picker + account "Add
   card" form both use this - a chosen/just-tokenized card gets the same
   green checkmark tile in both places) ---------- */

.saved-card-selected {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  border: 2px solid #13795b;
  background: #eafaf3;
  border-radius: 6px;
  padding: .7rem .8rem;
  margin-bottom: .6rem;
}
.saved-card-selected-check { color: #13795b; font-size: 1.2rem; flex: 0 0 auto; margin-top: .05rem; }
.saved-card-selected-body { flex: 1 1 auto; min-width: 0; }
.saved-card-selected-name { font-weight: 800; color: var(--la-navy); }

/* ---------- Breadcrumbs ---------- */

.la-breadcrumb {
  background: var(--la-bg-alt);
  padding: 0.7rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--la-border);
}
.la-breadcrumb a { color: var(--la-muted); }
.la-breadcrumb a:hover { color: var(--la-black); }
.la-breadcrumb .sep { color: var(--la-muted); margin: 0 0.4rem; }
.la-breadcrumb .current { color: var(--la-black); font-weight: 700; }

/* ---------- FFL license status pill ---------- */

.ffl-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}
.ffl-status--on { color: #13795b; border: 1px solid #9fe1cb; background: #eafaf3; }
.ffl-status--off { color: #8a5a00; border: 1px solid #ffe0b2; background: #fff8ef; }

/* ---------------------------------------------------------------------------
   First-visit age gate (templates/_partials/age_gate.html)
   --------------------------------------------------------------------------- */
.age-gate-open { overflow: hidden; }

.la-agegate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(9, 15, 28, 0.72);
}

.la-agegate-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px;
  padding: 2.1rem 2.1rem 1.4rem;
  text-align: center;
  color: var(--la-text);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  animation: la-agegate-pop 0.28s ease both;
}
@keyframes la-agegate-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .la-agegate-card { animation: none; }
}

.la-agegate-brand {
  height: 2.6rem;
  width: auto;
  margin-bottom: 1.1rem;
}

.la-agegate-title {
  margin: 0 0 0.6rem;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--la-navy);
}
.la-agegate-sub {
  margin: 0 auto 1.4rem;
  max-width: 34ch;
  color: #4b4b56;
}

.la-agegate-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.la-agegate-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.05s ease;
}
.la-agegate-btn:active { transform: translateY(1px); }
.la-agegate-btn:disabled { opacity: 0.6; cursor: default; }
.la-agegate-btn:focus-visible { outline: 3px solid var(--la-red); outline-offset: 2px; }

.la-agegate-yes { background: var(--la-navy); color: #fff; }
.la-agegate-yes:hover:not(:disabled) { background: var(--la-navy-soft); }
.la-agegate-no { background: #e7e8ec; color: #55555f; }
.la-agegate-no:hover:not(:disabled) { background: #dcdde2; }

.la-agegate-err {
  margin: 1rem 0 0;
  color: var(--la-red);
  font-size: 0.85rem;
  font-weight: 700;
}

.la-agegate-fine {
  margin: 1.4rem -2.1rem 0;
  padding: 1rem 1.9rem 0.2rem;
  border-top: 1px solid var(--la-border);
  color: var(--la-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.la-agegate-fine a { color: var(--la-red); font-weight: 700; }

.la-agegate-count { font-weight: 800; color: var(--la-navy); }

@media (max-width: 480px) {
  .la-agegate-card { padding: 1.6rem 1.4rem 1.1rem; }
  .la-agegate-fine { margin-left: -1.4rem; margin-right: -1.4rem; padding: 1rem 1.3rem 0.2rem; }
}

/* ---- Ship window (PDP): the estimated ship time line ---------------- */
.la-ship-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
}
.la-ship-window .bi-truck { color: var(--la-navy); font-size: 1.15rem; }
.la-ship-window-text { font-weight: 600; }
.la-ship-window-info {
  border: 0;
  background: none;
  padding: 0 .15rem;
  color: var(--la-navy);
  line-height: 1;
  font-size: 1rem;
}
/* "Why?" beside the MAP hint under the PDP price: a text button that opens
   the same note box as the ship estimate's (i). */
.la-map-why {
  border: 0;
  background: none;
  padding: 0 .15rem;
  color: var(--la-navy);
  font-size: .8rem;
  text-decoration: underline;
}
.la-ship-window-note {
  font-size: .8rem;
  color: #5f5f5b;
  background: #fafaf8;
  border: 1px solid #e3e3df;
  border-radius: .5rem;
  padding: .5rem .75rem;
  margin-top: .25rem;
}

/* Order-level variant (cart, checkout, order page): icon and sentences on
   one row; the text flexes and wraps inside its own span, never under the
   icon. */
.la-ship-window-order {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.la-ship-window-order .bi-truck { margin-top: .15rem; }
/* compact=True in the summary panels: .la-ship-window's .95rem otherwise beats
   Bootstrap's .small (same specificity, later file). */
.la-ship-window.small { font-size: .875rem; }
.la-ship-window-order > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Subcategory tiles on the browse page (category pages plan, PR 1).
   .la-subcats is the row under the H1 / intro lead; --lg is the department
   variant (bigger tiles, the whole page). Below lg the mid-level row turns
   into a horizontally scrolling, snap-aligned rail; the department variant
   stays a two-column grid. The grey well + multiply blend sits white
   product shots flat on the tile instead of as a white box on grey.
   --------------------------------------------------------------------------- */
.la-h1-count {
  margin-left: .5rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--la-muted);
  white-space: nowrap;
}
.la-subcats { margin: 0 0 1.5rem; }
.la-subcats-title,
.la-chiprow-title {
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--la-navy);
}
.la-subcats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.la-subcats--lg .la-subcats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.la-subcat-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--la-border);
  background: #fff;
  color: var(--la-navy);
  text-decoration: none;
}
.la-subcat-tile:hover,
.la-subcat-tile:focus-visible {
  border-color: var(--la-navy);
  color: var(--la-red);
}
.la-subcat-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  overflow: hidden;
  background: var(--la-bg-alt);
}
.la-subcats--lg .la-subcat-pic { height: 200px; }
.la-subcat-pic img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.la-subcat-pic .bi { font-size: 2rem; color: #9aa0ab; }
.la-subcat-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .75rem;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
}
.la-subcats--lg .la-subcat-lbl { padding: .75rem .9rem; font-size: 1.05rem; }
.la-subcat-count {
  font-size: .78rem;
  font-weight: 600;
  color: var(--la-muted);
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .la-subcats-grid {
    display: flex;
    gap: .6rem;
    margin: 0 -16px;
    padding: 0 16px .25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .la-subcats-grid::-webkit-scrollbar { display: none; }
  .la-subcat-tile { flex: 0 0 120px; scroll-snap-align: start; }
  .la-subcat-pic { height: 84px; }
  .la-subcat-lbl { flex-direction: column; gap: .1rem; font-size: .82rem; }
  .la-subcats--lg .la-subcats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .la-subcats--lg .la-subcat-tile { flex: none; }
  .la-subcats--lg .la-subcat-pic { height: 120px; }
  .la-subcats--lg .la-subcat-lbl { flex-direction: row; font-size: .9rem; }
}

/* ---------------------------------------------------------------------------
   Tile groups and chip rows on the browse page (category pages plan, PR 2).
   .la-subcats-group puts a heading over each group of tiles (Parts).
   .la-chips is one row of pill links: caliber chips, platform chips, sibling
   chips, and the applied filters above the grid (.la-applied). Flex-wrap on
   desktop, a horizontally scrolling rail below lg like the tile rail.
   An active chip is navy with an x; its link removes it. Chips past a row's
   cap carry .la-chip--extra and stay hidden until the "More" chip opens the
   row in place. Selectors carry two classes so Bootstrap utilities on the
   same elements cannot outrank them.
   --------------------------------------------------------------------------- */
.la-subcats .la-subcats-group + .la-subcats-group { margin-top: 1.1rem; }
.la-subcats .la-subcats-group-title {
  margin: 0 0 .5rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--la-navy);
}
.la-chiprow { margin: 0 0 1.25rem; }
.la-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.la-chips .la-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .3rem .85rem;
  border: 1px solid var(--la-border);
  border-radius: 999px;
  background: #fff;
  color: var(--la-navy);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}
.la-chips .la-chip:hover,
.la-chips .la-chip:focus-visible {
  border-color: var(--la-navy);
  color: var(--la-red);
}
.la-chips .la-chip-count {
  font-size: .76rem;
  font-weight: 600;
  color: var(--la-muted);
}
.la-chips .la-chip.is-active {
  border-color: var(--la-navy);
  background: var(--la-navy);
  color: #fff;
}
.la-chips .la-chip.is-active:hover,
.la-chips .la-chip.is-active:focus-visible {
  background: var(--la-navy-soft);
  color: #fff;
}
.la-chips .la-chip.is-active .la-chip-count { color: rgba(255, 255, 255, .7); }
.la-chips .la-chip-x { font-size: 1.05rem; font-weight: 400; line-height: 1; }
.la-chips .la-chip--extra { display: none; }
.la-chips.is-open .la-chip--extra { display: inline-flex; }
.la-chips .la-chip-more {
  border-style: dashed;
  cursor: pointer;
  font-family: inherit;
}
.la-chips .la-chip-clear {
  border-color: transparent;
  background: transparent;
  color: var(--la-muted);
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  .la-chips {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px .25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .la-chips::-webkit-scrollbar { display: none; }
  .la-chips .la-chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* "Popular in <category>" row on the browse page (category pages plan, PR 3):
   the homepage's .la-scroll-row strip under the tile and chip rows. */
.la-popular-row { margin: 0 0 1.75rem; }

/* ---------- Graded grades on the PDP and cards (open box, blem, used) ---------- */
/* The deal line under the price. A real button: a click picks the grade. */
.la-pdp .la-graded-deal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: #f0f8f3;
  border: 1px solid #b7dcc4;
  border-radius: 4px;
  color: var(--la-text);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.la-pdp .la-graded-deal:hover { background: #e6f4ec; }
.la-pdp .la-graded-deal .bi-tag { color: #1a7a3e; }
.la-pdp .la-graded-deal[hidden] { display: none; }

.la-pdp .la-cond { border: 0; margin: 0; padding: 0; min-width: 0; }
.la-pdp .la-cond .la-cond-legend {
  float: none;
  width: auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--la-navy);
  margin-bottom: 0.6rem;
}
.la-pdp .la-cond .la-cond-legend span { font-weight: 600; color: var(--la-text); }
.la-pdp .la-cond-tiles { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.la-pdp .la-cond-tiles .la-cond-tile {
  flex: 1 1 9.5rem;
  min-height: 5.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  text-align: left;
  background: #fff;
  border: 1px solid #c9c9d3;
  border-radius: 4px;
  cursor: pointer;
}
.la-pdp .la-cond-tiles .la-cond-tile:hover { border-color: var(--la-navy); }
.la-pdp .la-cond-tiles .la-cond-tile.is-selected {
  background: var(--la-red-light);
  border-color: var(--la-red);
  box-shadow: inset 0 0 0 1px var(--la-red);
}
.la-pdp .la-cond-tile .la-cond-tile-label { font-size: 0.85rem; font-weight: 700; color: var(--la-navy); }
.la-pdp .la-cond-tile .la-cond-tile-price { font-size: 1.15rem; font-weight: 800; color: var(--la-navy); }
.la-pdp .la-cond-tile .la-cond-tile-sub { font-size: 0.8rem; font-weight: 600; color: #44444f; }
.la-pdp .la-cond-tile .la-cond-tile-sub.is-deal { color: #1a7a3e; }

.la-pdp .la-cond-panel {
  background: var(--la-bg-alt);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}
.la-pdp .la-cond-panel[hidden] { display: none; }
.la-pdp .la-cond-panel .la-cond-panel-title { font-weight: 700; color: var(--la-navy); margin-bottom: 0.35rem; }
.la-pdp .la-cond-panel .la-cond-photos-label { font-size: 0.85rem; font-weight: 700; color: var(--la-navy); margin-bottom: 0.35rem; }
.la-pdp .la-cond-panel .la-cond-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.la-pdp .la-cond-photos img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border: 1px solid #d4d4dc;
  background: #fff;
}
.la-pdp .la-cond-panel .la-cond-defs { font-size: 0.9rem; }
.la-pdp .la-cond-defs summary { font-weight: 600; color: var(--la-navy); cursor: pointer; }
.la-pdp .la-cond-defs dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.6rem 0 0;
}
.la-pdp .la-cond-defs dd { margin: 0; }

/* The card's "Open Box from $X" line, under the price. */
.la-product-card .la-card-graded {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a7a3e;
  text-decoration: none;
}
.la-product-card .la-card-graded:hover { text-decoration: underline; }