/*
 * Smoke Wagon Firearms — skin over the Trinity theme.
 * Built from the client-approved mockups (2026-08-05): white/light ground,
 * black nav, red accent, western slab wordmark, tan/wood secondary.
 * Loads AFTER theme.min.css and only overrides — never edit the theme itself,
 * or template pulls will conflict.
 */

:root {
  --sw-black: #121212;
  --sw-red: #c8102e;
  --sw-cream: #f8f6f2;
  --sw-tan: #b08d57;
  --sw-ink: #1d1d1b;
}

/* ---------- wordmark (replaces the logo image) ---------- */
.logo a { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; }
.sw-wordmark {
  font-family: 'Rye', 'Rockwell', serif;
  font-size: 34px;
  letter-spacing: 1px;
  color: var(--sw-ink);
  white-space: nowrap;
}
.sw-star { color: var(--sw-red); font-size: 22px; vertical-align: 6px; padding: 0 4px; }
.sw-tagline {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 4.5px;
  color: var(--sw-tan);
  margin-top: 4px;
  text-align: center;
}
@media (max-width: 768px) {
  .sw-wordmark { font-size: 24px; }
  .sw-tagline { letter-spacing: 3px; font-size: 9px; }
}

/* ---------- palette: black nav, red accents, light ground ---------- */
.site-header { background: #fff; border-bottom: 1px solid #e7e2d9; }
.main-nav, nav.main-navigation, .nav-bar { background: var(--sw-black) !important; }
.main-nav a, .main-navigation a { color: #fff; font-family: 'Oswald', sans-serif; letter-spacing: 1px; }
.main-nav a:hover, .main-navigation a:hover { color: var(--sw-tan); }

body { background: var(--sw-cream); }

/* buttons and price accents go red */
.btn-primary, .add-to-cart, button.buy, .cta-button {
  background: var(--sw-red) !important;
  border-color: var(--sw-red) !important;
}
.btn-primary:hover, .add-to-cart:hover { background: #a30d26 !important; }
/* prices are ink, not red (Brad 2026-08-12) */
.price, .product-price, .sale-price { color: var(--sw-ink); }

/* top utility bar goes black like the mockup */
.top-bar, .utility-bar, .announcement-bar { background: var(--sw-black); color: #eee; }
.top-bar a { color: #eee; }

/* section headings pick up the western voice */
h1, h2.section-title, .section-heading {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sw-ink);
}

/* trust band / badges tint */
.trust-bar, .badges-bar { background: #efe9df; }

/* ---------- hero: badge over the desert scene, per the approved mockup ------ */
.sw-hero {
  /* generated to match the approved mockup scene: bright daylight, hat +
     revolver foreground, SMOKE WAGON storefront right, open left third.
     NO scrim — the mockup hero is bright. !important: a theme rule paints
     generic sections white */
  background:
    url('/assets/images/sw-hero-bg.jpg') center 55% / cover no-repeat,
    #c9b591 !important;
  padding: 0 !important;
  border-bottom: 0;
  /* 50vw ≈ a 2:1 window — backed off (Brad 2026-08-06) so the hanging
     SMOKE WAGON sign is never clipped at the top of the band */
  min-height: clamp(380px, 50vw, 640px);
  display: flex; align-items: center;
}
.sw-hero-inner {
  padding: 40px 24px 44px;
  display: flex; flex-direction: column; align-items: center;
  /* mockup places the badge left of centre over the open desert */
  margin-left: max(24px, calc(50% - 500px));
  width: min(340px, 88vw);
}
.sw-hero-emblem {
  width: clamp(160px, 18vw, 250px); height: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(40,26,12,.28));
}
.sw-hero-rule {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin: 16px auto 18px; width: 100%;
}
/* mockup: dark-brown dotted rules flanking dark text on the bright scene */
.sw-hero-rule::before, .sw-hero-rule::after {
  content: ""; flex: 1; height: 0;
  border-top: 2px solid #4a2a1c; opacity: .75;
}
.sw-hero-rule span {
  font-family: 'Oswald', sans-serif; letter-spacing: 4px; font-size: 13.5px;
  color: #3c2415; white-space: nowrap; font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,248,235,.6);
}
.sw-hero-cta {
  display: inline-block; background: #2b2118; color: #f6f0e6 !important;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 3px;
  padding: 12px 44px; text-decoration: none; font-size: 14px;
}
.sw-hero-cta:hover { background: var(--sw-red); }

/* full-art hero (Brad 2026-08-11): badge baked into the image, so only the
   CTA overlays. Image is ~2.33:1 — the window matches so nothing crops. */
.sw-hero--full {
  background:
    url('/assets/images/sw-hero-full.jpg') center center / cover no-repeat,
    #c9b591 !important;
  min-height: clamp(340px, 42.9vw, 680px);
}
/* CTA: right-justified, sitting below the badge line (Brad 2026-08-11).
   Absolute so it can't be pushed around by the flex centering the composed
   hero uses. */
.sw-hero--full { position: relative; display: block !important; }
.sw-hero--full .sw-hero-inner {
  /* the badge in the art sits upper-left and ends ~46% down; the button tucks
     under it, left-aligned to the badge's left edge */
  position: absolute; left: calc(7.2% + 50px); top: 52%;
  right: auto; bottom: auto; margin: 0; padding: 0; width: auto; align-items: flex-start;
}
@media (max-width: 700px) { .sw-hero--full .sw-hero-inner { left: calc(6% + 25px); top: 56%; } }
.sw-hero--full .sw-hero-cta {
  background: rgba(28, 22, 16, .92); border: 1px solid rgba(246, 240, 230, .35);
  box-shadow: 0 3px 14px rgba(30, 20, 10, .35);
}
.sw-hero--full .sw-hero-cta:hover { background: var(--sw-red); border-color: var(--sw-red); }
@media (max-width: 640px) { .sw-hero--full .sw-hero-inner { margin-bottom: 14px; padding-right: 14px; } }

/* trust bar under the hero (mockup) — !important: theme paints sections white */
/* trust bar matches the header's light tone (Brad 2026-08-12) — the lighter
   colour is the dominant one. Text darkened to suit: contrast rises 6.1 -> 14.3 */
.sw-trustbar { background: #f3ece0 !important; border-top: 1px solid #ddd0ba; border-bottom: 1px solid #ddd0ba; }
.sw-trustbar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 11px 20px; text-align: center;
}
.sw-trustbar span {
  font-family: 'Oswald', sans-serif; font-size: 12.5px; letter-spacing: 1.4px;
  color: #241c12; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.sw-trustbar b { font-size: 15px; font-weight: 400; opacity: .85; }
@media (max-width: 820px) {
  .sw-trustbar-grid { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
}
@media (max-width: 640px) {
  .sw-hero-inner { margin-left: auto; margin-right: auto; padding: 26px 16px 30px; }
  .sw-trustbar span { font-size: 11px; letter-spacing: .8px; }
}

/* keep the wordmark clear of the search bar — the theme sizes .logo for a
   fixed-width image and clips anything wider (real containers: .header-main > .logo) */
.header-main .logo, .site-header .logo, .logo {
  width: auto !important; max-width: none !important;
  margin-right: 22px; overflow: visible !important; flex: 0 0 auto !important;
}
/* min-width only where there's room — on phones it forces horizontal overflow */
@media (min-width: 769px) {
  .header-main .logo, .site-header .logo, .logo { min-width: max-content; }
}
/* header lockup (GPT consult 2026-08-06): badge + wordmark, true vertical
   centring, hairline divider before the search bar. Clipping solved by letting
   the logo box size to content and letting the search bar SHRINK (min-width 0),
   not by dropping the wordmark. */
.header-main .container { display: flex; align-items: center; }
.header-main .search-bar { flex: 1 1 auto; min-width: 0; }
.logo a { display: inline-flex !important; flex-direction: row !important; align-items: center;
  white-space: nowrap; gap: 14px; text-decoration: none; }
.sw-header-badge { width: 76px; height: 76px; display: block; }
/* 2026-09-01: the Trinity release shipped the master header.php, which renders a single
   plain <img src="logo.png" width="1024"> instead of smokewagon's badge+wordmark lockup.
   smokewagon.css had removed the theme's width cap (for the old lockup), so the SQUARE
   logo.png ballooned to ~1024px. Cap the header logo by HEIGHT regardless of markup. This
   lives in the brand overlay so it survives releases. */
.header-main .logo img, .site-header .logo img, .logo img {
  max-height: 72px !important; width: auto !important; max-width: none !important;
}
.header-main .logo {
  border-right: 1px solid #ddd0ba; padding-right: 24px; margin-right: 24px;
  display: flex; align-items: center;
}
/* badge-faithful lockup: dark-brown ink, three small arc stars, both text
   lines sized up (GPT consult #2 per Brad) */
.sw-lockup { display: flex; flex-direction: column; line-height: 1; align-items: center; }
/* three arc stars, centre star larger — exactly as on the badge */
.sw-lockup-stars { color: #55493b; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.sw-lockup-stars i { font-style: normal; font-size: 8px; }
.sw-lockup-stars b { font-weight: 400; font-size: 11px; }
/* badge lettering: bold slab caps with a soft drop shadow, charcoal ink */
.sw-lockup-name { font-family: 'Graduate', 'Rockwell', 'Rye', serif; font-size: 26px;
  color: #332b24; letter-spacing: 1.5px; text-shadow: 2px 2px 0 rgba(51,43,36,.16); }
.sw-lockup-est { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 3.4px;
  color: #55493b; margin-top: 7px; font-weight: 600; }
@media (max-width: 1080px) { .sw-lockup { display: none; } .header-main .logo { border-right: 0; padding-right: 0; margin-right: 12px; } }
@media (max-width: 768px) { .sw-header-badge { width: 52px; height: 52px; } }
/* sized to clear the theme's fixed logo box — the container clips anything wider */
.sw-wordmark { font-size: 17px; letter-spacing: 0; }
.sw-tagline { letter-spacing: 2.5px; font-size: 8.5px; }

/* nav + utility bar: near-black brown per the comp */
nav.main-nav, .main-nav { background: #241c15 !important; }
.header-top { background: #1c1610 !important; }
.header-top, .header-top a, .header-top .contact-info span { color: #e8dcc8 !important;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.2px; }
.header-top a:hover { color: #fff !important; }
.sw-tagline-top { letter-spacing: 2px !important; font-weight: 600; }
.sw-topbar-perks { display: flex; gap: 26px; align-items: center; }
.sw-topbar-perks span, .sw-topbar-perks a {
  color: #e8dcc8 !important; font-family: 'Oswald', sans-serif; font-size: 11.5px;
  letter-spacing: 1.4px; text-decoration: none; white-space: nowrap;
}
@media (max-width: 900px) { .sw-topbar-perks span:not(:last-child) { display: none; } }
.main-nav .nav-link, .main-nav a { color: #f2e9db !important;
  font-family: 'Oswald', sans-serif; letter-spacing: 1.6px; }
.main-nav .nav-link:hover, .main-nav a:hover { color: var(--sw-tan) !important; }

/* header sits on parchment, not white (comp) */
.site-header, .header-main { background: #f3ece0 !important; }
.header-main { border-bottom: 1px solid #e0d5c2; }

/* ---------- mockup sections ---------- */
/* mobile: hard stop on horizontal scroll — one theme element still reports
   wider than the viewport; until it's found, clip instead of shifting layout */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
}
/* mobile: everything below the hero stacks cleanly (Brad 2026-08-05) */
@media (max-width: 640px) {
  .sw-hero { padding: 48px 10px 56px; overflow: hidden; }
  .sw-hero-badge { font-size: clamp(24px, 8.6vw, 40px); letter-spacing: 1px; }
  .sw-hero-badge .sw-star { padding: 0 5px; }
  .sw-hero-rule span { letter-spacing: 4px; font-size: 12px; }
  .sw-hero-sub { font-size: 14.5px; }
  .sw-rule-h span { font-size: 17px; letter-spacing: 2.5px; }
  .sw-corral-h em { font-size: 34px; }
  .sw-corral-price { font-size: 28px; }
  .sw-brands-row { gap: 8px 18px; }
  .sw-brand { font-size: 15px; }
  .sw-stats-pitch h2 { font-size: 23px; }
  .sw-stat strong { font-size: 21px; }
  .sw-newsletter h2 { font-size: 19px; }
  .sw-news-form { flex-direction: column; gap: 10px; }
  .sw-news-form button { padding: 14px; }
  .sw-perks { padding: 18px 0; }
  .sw-tile { height: 110px; }
}
.sw-rule-h { display: flex; align-items: center; gap: 18px; text-align: center; margin: 0 0 28px; }
.sw-rule-h::before, .sw-rule-h::after { content: "\2605"; color: var(--sw-red); font-size: 14px; }
.sw-rule-h::before { margin-left: auto; }
.sw-rule-h::after { margin-right: auto; }
.sw-rule-h span { font-family: 'Oswald', sans-serif; letter-spacing: 4px; font-size: 22px; }

/* corral */
.sw-corral { background: #fff; padding: 42px 0; border-bottom: 1px solid #e7e2d9; }
.sw-corral-grid { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: center; }
@media (max-width: 900px) {
  .sw-corral { padding: 28px 0; }
  .sw-corral-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .sw-corral-card { grid-template-columns: 1fr; text-align: center; }
  .sw-corral-card img { max-height: 200px; margin: 0 auto; }
  .sw-corral-info { display: flex; flex-direction: column; align-items: center; }
}
.sw-corral-h span { display: block; font-family: 'Oswald', sans-serif; font-size: 30px; letter-spacing: 3px; }
.sw-corral-h em { font-family: 'Rye', serif; font-style: normal; color: var(--sw-red); font-size: 44px; line-height: 1; }
.sw-corral-pitch p { color: #666; margin: 14px 0 20px; }
.sw-btn-outline { display: inline-block; border: 2px solid var(--sw-ink); padding: 10px 22px; color: var(--sw-ink);
  font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 13px; text-decoration: none; }
.sw-btn-outline:hover { background: var(--sw-ink); color: #fff; }
/* mockup: [name+brand | photo w/ countdown | regular price / SW price / shield] */
.sw-corral-card { display: grid; grid-template-columns: 1fr 1.25fr 200px; gap: 26px; background: #fff;
  border: 1px solid #e7e2d9; padding: 22px 26px; text-decoration: none; color: var(--sw-ink); align-items: center; }
.sw-corral-brand { font-family: 'Oswald', sans-serif; letter-spacing: 2px; color: #888; font-size: 13px; }
.sw-corral-title { font-family: 'Oswald', sans-serif; font-size: 24px; margin: 4px 0 0; line-height: 1.2; }
/* ==========================================================================
   DAILY DEAL CORRAL — Brad's v2 board (assets/daily_corral_placeholders_v2.png).
   ALL chrome is baked into the art: wood, the DAILY DEAL CORRAL lockup, the
   blurb, VIEW ALL DEALS plate, the countdown chassis with HRS/MIN/SEC, and the
   DEAL PRICE / YOU SAVE frames. Only live data is drawn over it.
   Slot rectangles were detected off the 1983x793 art and expressed as
   percentages, so they stay locked to the board at any width.
   ========================================================================== */
/* v3 art is a full desert scene that bleeds to its own edges — no white frame.
   Height reduced 25% (Brad 2026-08-14): at full width that would mean squashing
   or clipping the artwork, so the board is scaled DOWN proportionally instead —
   every element keeps its true shape, the board is just smaller. */
.sw-corral { background: #fff; padding: 0; border-bottom: 0; }
.sw-corral > .sw-corral-card { max-width: none !important; width: 100% !important; margin: 0 !important; }
.sw-corral-card {
  position: relative;
  /* full-bleed variant (Brad 2026-08-14): height cut 25% by widening the
     ratio. background-size is 100% 100%, so the art squashes vertically by a
     quarter rather than cropping — nothing is lost, but circles/roundels read
     slightly oval. */
  aspect-ratio: 1692 / 414;
  background: url('/assets/images/corral/board.jpg') center / 100% 100% no-repeat;
  border-radius: 0; overflow: hidden; box-shadow: none;
  container-type: inline-size;       /* type scales with the board, not the viewport */
  gap: 0 !important; padding: 0 !important;   /* element also carries .container */
}
.sw-corral-card > * { box-sizing: border-box; }
.swc-slot {
  position: absolute; display: flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; overflow: hidden;
}

/* whole board links to the deal; the VIEW ALL DEALS plate is its own hit area */
.swc-hit { position: absolute; inset: 0; z-index: 2; }
.swc-deals { position: absolute; left: 9.9%; top: 71%; width: 20.5%; height: 17%; z-index: 3; }

/* --- product name (upper white card) ------------------------------------- */
.swc-name {
  left: 33.33%; top: 8.70%; width: 16.90%; height: 29.71%;
  padding: 0.60cqw 0.75cqw; flex-direction: column; gap: 0.26cqw;
  font-family: 'Graduate','Oswald',sans-serif; color: #1a1209;
  font-size: 1.22cqw; line-height: 1.2; letter-spacing: .2px; text-transform: uppercase;
}
.swc-name .swc-brand {
  font-family: 'Oswald', sans-serif; font-weight: 600; color: #7a6a55;
  font-size: .72em; letter-spacing: 1.6px;
}
.swc-name .swc-cal {
  font-family: 'Oswald', sans-serif; font-weight: 600; color: #a4222a;
  font-size: .74em; letter-spacing: 1.2px;
}

/* --- detail card (lower white card): specs we actually hold --------------- */
.swc-detail {
  left: 33.33%; top: 41.30%; width: 16.90%; height: 26.09%;
  padding: 0.83cqw 0.98cqw; flex-direction: column; justify-content: center; gap: 0.41cqw;
}
.swc-detail dl { margin: 0; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 0.41cqw 0.60cqw; align-content: center; }
.swc-detail dt {
  font-family: 'Oswald', sans-serif; font-weight: 500; color: #7a6a55;
  font-size: 0.71cqw; letter-spacing: .9px; text-transform: uppercase; text-align: left;
}
.swc-detail dd {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600; color: #1a1209;
  font-size: 0.77cqw; letter-spacing: .3px; text-transform: uppercase; text-align: right;
}

/* --- product photo (big white card) -------------------------------------- */
.swc-shot-slot { left: 51.54%; top: 5.43%; width: 23.52%; height: 92.39%; padding: 0.90cqw; }
.swc-shot { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* --- countdown digits (chassis + labels are in the art) ------------------ */
.swc-h { left: 77.66%; top: 10.14%; width: 2.72%; height: 10.87%; }
.swc-m { left: 81.80%; top: 10.14%; width: 2.72%; height: 10.87%; }
.swc-s { left: 85.82%; top: 10.14%; width: 2.72%; height: 10.87%; }
.swc-dig {
  font-family: 'Oswald', sans-serif; font-weight: 700; color: #1a1209;
  font-size: 1.61cqw; line-height: 1;
}

/* --- price + savings (frames are in the art; values are ink) ------------- */
.swc-price { left: 76.71%; top: 37.32%; width: 13.00%; height: 16.67%;
  flex-direction: column; gap: 0.08cqw; padding: 0.22cqw; }
.swc-was {
  font-family: 'Oswald', sans-serif; font-size: 0.79cqw; color: #6b5c48;
  position: relative; display: inline-block;
}
.swc-was::after {
  content: ""; position: absolute; left: -5%; right: -5%; top: 52%;
  height: 0.08cqw; background: #a4222a; transform: rotate(-7deg);
}
.swc-now {
  font-family: 'Graduate','Oswald',sans-serif; color: #1a1209;
  font-size: 1.76cqw; line-height: 1; display: flex; align-items: flex-start;
}
.swc-now sup { font-size: .46em; line-height: 1.6; vertical-align: baseline; top: 0; }
/* the YOU SAVE shield tapers to a point, so the value sits in its upper half */
.swc-save-slot { left: 77.66%; top: 69.57%; width: 11.23%; height: 24.28%; align-items: center; padding-bottom: 1.20cqw; }
.swc-save {
  font-family: 'Graduate','Oswald',sans-serif; color: #1a1209; font-size: 1.80cqw; line-height: 1;
}

/* --- narrow screens: a fixed-ratio board is unreadable, so stack ---------- */
@media (max-width: 820px) {
  .sw-corral-card {
    aspect-ratio: auto; background-image: none; background: #f0e5d3;
    border: 1px solid #cbbba0; padding: 18px !important;
    display: grid; grid-template-columns: 1fr; gap: 12px !important; text-align: center;
  }
  .sw-corral-card .swc-slot { position: static; width: auto !important; height: auto !important;
    left: auto; top: auto; padding: 0; }
  .swc-hit { display: none; }
  .swc-name { font-size: 20px; }
  .swc-name .swc-brand, .swc-name .swc-cal { font-size: 13px; }
  .swc-detail dt, .swc-detail dd { font-size: 12px; }
  .swc-dig  { font-size: 22px; }
  .swc-now  { font-size: 30px; justify-content: center; }
  .swc-save { font-size: 26px; }
  .swc-was  { font-size: 14px; }
  .swc-shot { max-height: 210px; }
  .swc-clockrow { display: flex; justify-content: center; gap: 14px; }
  .swc-mob-lbl { display: block; font-family: 'Oswald',sans-serif; font-size: 11px;
    letter-spacing: 1.4px; color: #6d6353; text-transform: uppercase; }
  .swc-deals { position: static; display: inline-block; background: #a4222a; color: #fff !important;
    font-family: 'Oswald',sans-serif; letter-spacing: 1.6px; padding: 11px 22px; border-radius: 6px;
    text-decoration: none; justify-self: center; }
}
@media (min-width: 821px) { .swc-mob-lbl { display: none; } }

/* category tiles: Brad's finished art (2026-08-11) has the label + star baked
   in, so the CSS caption stands down and the card shows uncropped on cream */
.sw-tiles-grid .sw-tile span { display: none; }
.sw-tile.sw-tile-img {
  background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat !important; background-color: transparent !important;
  height: auto !important; aspect-ratio: 341 / 356; border-radius: 6px; overflow: hidden;
}
.sw-tiles-grid { gap: 10px !important; }
.sw-tile.sw-tile-img::after { content: none !important; }

/* category tiles */
.sw-tiles { padding: 34px 0; }
.sw-tiles-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sw-tile { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 150px;
  background: linear-gradient(160deg, #3a2f26 0%, #191410 80%); text-decoration: none;
  border: 1px solid #2a221b; }
.sw-tile::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(176,141,87,.28), transparent 65%); }
/* tiles wearing a real product photo: white product-shot ground, gentle vignette */
.sw-tile-img { background-color: #fff !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  background-position: center 40% !important; border: 1px solid #e0d8c8; }
.sw-tile-img::before { background: linear-gradient(rgba(255,255,255,0) 55%, rgba(20,15,10,.18)); }
.sw-tile span { position: relative; background: rgba(10,8,6,.85); color: #fff; width: 100%; text-align: center;
  padding: 9px 4px; font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 13px; }
.sw-tile:hover span { background: var(--sw-red); }
@media (max-width: 900px) { .sw-tiles-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .sw-tiles-grid { grid-template-columns: repeat(2, 1fr); } }

/* perks */
.sw-perks { background: #efeae1; padding: 26px 0; }
.sw-perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sw-perk { display: flex; gap: 14px; align-items: center; }
.sw-perk-ic { font-size: 30px; filter: grayscale(1); opacity: .75; }
.sw-perk strong { display: block; font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 14px; }
.sw-perk span { color: #6d675d; font-size: 13.5px; }
@media (max-width: 800px) { .sw-perks-grid { grid-template-columns: 1fr; } }

/* --- featured listings grid (Brad 2026-08-12) ---------------------------- */
.sw-featured { background: #fff; padding: 44px 0 50px; border-top: 1px solid #e7e2d9; }
/* 24 picks is a lot of page, so the grid shows 2 rows and reveals the rest on
   demand (Brad 2026-08-12). Row height is pinned so the clip lands on a row
   boundary rather than slicing a card in half. */
.sw-feat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; margin-top: 24px;
  grid-auto-rows: 322px;           /* every card the same height, so rows align */
  max-height: 1656px;              /* 5 rows ~= the first 24; the rest reveal */
  overflow: hidden; transition: max-height .4s ease;
}
.sw-featured.is-open .sw-feat-grid { max-height: 6000px; }
.sw-feat-more { text-align: center; margin-top: 18px; }
.sw-feat-more button {
  background: none; border: 1.5px solid var(--sw-ink); color: var(--sw-ink);
  font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 12.5px;
  padding: 10px 26px; cursor: pointer; border-radius: 3px; transition: background .14s, color .14s;
}
.sw-feat-more button:hover { background: var(--sw-ink); color: #fff; }
.sw-feat {
  display: flex; flex-direction: column; text-decoration: none; color: var(--sw-ink);
  border: 1px solid #e2d8c4; background: #fff; border-radius: 4px; overflow: hidden;
  transition: transform .12s, box-shadow .14s, border-color .14s;
}
.sw-feat:hover { transform: translateY(-2px); border-color: #c9b48c; box-shadow: 0 6px 16px rgba(60,42,24,.16); }
.sw-feat-img {
  position: relative; background: #fff; padding: 12px;
  height: 158px; display: flex; align-items: center; justify-content: center;
}
/* contain + full box means a long gun scales to the WIDTH and a pistol to the
   height — neither is cropped and both sit centred */
.sw-feat-img img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; margin: auto; }
.sw-feat-flag {
  position: absolute; top: 8px; left: 8px; background: var(--sw-red); color: #fff;
  font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 1.2px;
  padding: 3px 8px; border-radius: 2px;
}
.sw-feat-brand {
  font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 1.4px;
  color: #6d6353; text-transform: uppercase; padding: 0 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-feat-name {
  font-family: 'Oswald', sans-serif; font-size: 14px; line-height: 1.32; color: var(--sw-ink);
  padding: 4px 12px 0;
  min-height: calc(2 * 1.3em);      /* reserve both lines so titles never clip mid-row */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-feat-price { padding: 8px 11px 11px; margin-top: auto; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sw-feat-price s { color: #9a9184; font-size: 13px; }
.sw-feat-price b { font-family: 'Oswald', sans-serif; font-size: 19px; color: var(--sw-ink); }
@media (max-width: 1200px) { .sw-feat-grid { grid-template-columns: repeat(4, 1fr); max-height: 2010px; } }
@media (max-width: 860px)  { .sw-feat-grid { grid-template-columns: repeat(3, 1fr); max-height: 2680px; } }
@media (max-width: 620px)  {
  .sw-feat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 300px; max-height: 3744px; }
  .sw-feat-img { height: 140px; }
  /* mobile type stays large enough to read comfortably */
  .sw-feat-name { font-size: 14.5px; }
  .sw-feat-brand { font-size: 11.5px; }
  .sw-feat-price b { font-size: 19px; }
}

/* brands */
.sw-brands { background: #fff; padding: 40px 0; border-top: 1px solid #e7e2d9; border-bottom: 1px solid #e7e2d9; }
.sw-brands-row { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: center; }

/* --- brand marquee: continuous right-to-left scroll (Brad 2026-08-12) -----
   The set is duplicated in the markup and the track shifts exactly -50%, so
   the second copy arrives where the first began and the loop never jumps.
   Edges fade into the page instead of cutting off mid-logo. */
.sw-brands-marquee {
  position: relative; overflow: hidden; margin-top: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sw-brands-track {
  display: flex; width: max-content;
  animation: sw-marquee 34s linear infinite;
}
.sw-brands-set { display: flex; align-items: center; gap: clamp(28px, 4vw, 62px); padding-right: clamp(28px, 4vw, 62px); }
@keyframes sw-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* let people stop it to read a mark, and respect reduced-motion outright */
.sw-brands-marquee:hover .sw-brands-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sw-brands-track { animation: none; transform: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .sw-brands-set { flex-wrap: wrap; justify-content: center; }
  .sw-brands-set[aria-hidden="true"] { display: none; }
  .sw-brands-marquee { -webkit-mask-image: none; mask-image: none; }
}
.sw-brands-cta-row { text-align: center; margin-top: 26px; }
.sw-brand { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 1px;
  color: #2b2b2b; text-decoration: none; opacity: .82; }
.sw-brand:hover { color: var(--sw-red); opacity: 1; }
.sw-brand-cta { font-size: 12px; padding: 8px 16px; }
/* comp: real brand logos; emblem marks pair with the name lockup */
.sw-brand-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; opacity: .92; }
.sw-brand-logo:hover { opacity: 1; }
.sw-brand-logo img { height: 34px !important; width: auto !important; max-width: 120px !important;
  max-height: 34px !important; object-fit: contain; display: block; }
.sw-brand-logo span { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: 1px; color: #2b2b2b; white-space: nowrap; }
@media (max-width: 700px) { .sw-brand-logo img { height: 26px !important; max-height: 26px !important; } .sw-brand-logo span { font-size: 14px; } }

/* stats band (!important: theme paints generic sections white) */
/* BEST SELLERS (mockup): five compact cards, VIEW PRODUCT outline buttons */
.sw-best { padding: 40px 0 48px; background: #fff; }
.sw-best-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 26px; }
.sw-best-card { border: 1px solid #e7e2d9; background: #fff; padding: 16px 14px;
  display: flex; flex-direction: column; text-align: center; }
.sw-best-card > a:first-child { text-decoration: none; color: var(--sw-ink); flex: 1; }
.sw-best-card > .sw-best-btn { flex: 0 0 auto; }
.sw-best-card img { width: 100%; height: 150px; object-fit: contain; margin-bottom: 12px; }
.sw-best-name { font-family: 'Oswald', sans-serif; font-size: 13px; line-height: 1.35;
  letter-spacing: .4px; min-height: 36px; }
.sw-best-price { color: var(--sw-ink); font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 18px; margin: 8px 0 12px; }
.sw-best-btn { font-size: 11.5px; padding: 8px 10px; border-width: 1px; }
.sw-best-more { text-align: center; margin-top: 26px; }
@media (max-width: 1000px) { .sw-best-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .sw-best-grid { grid-template-columns: repeat(2, 1fr); } }

/* AMERICA'S TRUSTED band on Brad's weathered plank (2026-08-11). The board is
   light, so the whole band flips to dark ink. */
.sw-stats {
  background: url('/assets/images/sw-plank.jpg') center center / cover no-repeat, #efe4cf !important;
  color: #2f2418 !important; padding: 34px 0;
  border-top: 3px solid #b9a37c; border-bottom: 3px solid #b9a37c;
}
/* three burns in a row; the MOS insignia on its own line beneath, centred
   under the middle mark (Brad 2026-08-11) */
.sw-stats .sw-stats-cells {
  display: grid !important; grid-template-columns: repeat(3, 1fr);
  align-items: center; justify-items: center; gap: clamp(6px, 1.2vw, 18px) clamp(8px, 1.6vw, 24px);
}
.sw-stats .sw-stat-mos { grid-column: 2; }   /* centre column = under 50 STATES */
.sw-stats-grid { align-items: center; gap: clamp(14px, 2.5vw, 36px) !important; }
@media (max-width: 900px) {
  .sw-stats .sw-stats-cells { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sw-stats .sw-stats-cells { grid-template-columns: 1fr 1fr; }
  .sw-stats .sw-stat-mos { grid-column: 1 / -1; }
}
.sw-stats h2 { color: #14100a !important; text-shadow: 0 1px 0 rgba(255,252,244,.5); }
.sw-stats p  { color: #4a3c2a !important; }
.sw-stats .sw-stat {
  background: rgba(255, 252, 245, .72) !important; border: 1px solid #b9a37c !important;
  border-radius: 3px; backdrop-filter: blur(1px);
}
.sw-stats .sw-stat strong { color: #7a3b20 !important; }
.sw-stats .sw-stat span   { color: #4a3c2a !important; }
/* MOS insignia card: the artwork is on white, so it wears a white card */
/* branded-iron marks sit bare on the plank, no card */
.sw-stat-burn, .sw-stats .sw-stat.sw-stat-burn {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; display: flex; align-items: center; justify-content: center;
}
.sw-stat-burn img { width: clamp(96px, 11vw, 150px); height: auto; display: block;
  mix-blend-mode: multiply; opacity: 1; }

/* MOS insignia rides bare on the plank — no card, no border (Brad 2026-08-11) */
.sw-stat-mos, .sw-stats .sw-stat.sw-stat-mos {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; display: flex; align-items: center; justify-content: center;
}
.sw-stat-mos img {
  width: clamp(104px, 12vw, 164px); height: auto; object-fit: contain; display: block;
  mix-blend-mode: multiply;   /* the artwork's light ground melts into the wood */
}
.sw-stats-pitch h2, .sw-stats .sw-stats-pitch h2 { color: #14100a !important; text-shadow: 0 1px 0 rgba(255,252,244,.6); }
.sw-stats-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; }
.sw-stats-pitch h2 { font-family: 'Oswald', sans-serif; letter-spacing: 2px; color: #14100a; font-size: 30px; margin: 0 0 12px; }
.sw-stats-pitch p { color: #b7ad9c; }
.sw-stats-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sw-stat { border: 1px solid #4a3f33; padding: 22px 14px; text-align: center; }
.sw-stat strong { display: block; font-family: 'Oswald', sans-serif; font-size: 26px; color: var(--sw-tan); }
.sw-stat span { font-size: 11.5px; letter-spacing: 1.5px; color: #b7ad9c; font-family: 'Oswald', sans-serif; }
@media (max-width: 900px) { .sw-stats-grid, .sw-stats-cells { grid-template-columns: 1fr; } }

/* newsletter */
.sw-newsletter { background: #efeae1; padding: 38px 0; }
.sw-news-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.sw-newsletter h2 { font-family: 'Oswald', sans-serif; letter-spacing: 2.5px; font-size: 24px; margin: 0 0 6px; }
.sw-newsletter p { color: #6d675d; margin: 0; }
.sw-news-ok { color: #1c7a3a !important; font-weight: 600; }
.sw-news-err { color: var(--sw-red) !important; font-weight: 600; }
.sw-news-form { display: flex; gap: 0; }
.sw-news-form input { flex: 1; padding: 15px 16px; border: 1px solid #cfc8bb; font-size: 15px; background: #fff; }
.sw-news-form button { background: var(--sw-black); color: #fff; border: 0; padding: 15px 30px;
  font-family: 'Oswald', sans-serif; letter-spacing: 2.5px; cursor: pointer; }
.sw-news-form button:hover { background: var(--sw-red); }
@media (max-width: 800px) { .sw-news-grid { grid-template-columns: 1fr; } }

/* ---------- header controls: kill the theme blue, match the scheme ---------- */
.search-bar button[type="submit"], .mobile-search-form button[type="submit"] {
  background: var(--sw-black) !important;
  border-color: var(--sw-black) !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1.5px;
}
.search-bar button[type="submit"]:hover, .mobile-search-form button[type="submit"]:hover {
  background: var(--sw-red) !important;
  border-color: var(--sw-red) !important;
}
/* the theme's mobile rule is `.search-bar button` (specificity 0,1,1) which
   outranks a bare `.search-clear` (0,1,0) no matter the source order — so the
   clear button has to be matched at equal-or-higher specificity to win */
.search-bar button.search-clear, .search-bar .search-clear,
.close-search, .mobile-search-clear, .search-bar .clear-btn {
  background: #e7e2d9 !important;
  border: 1px solid #cfc8bb !important;
  color: var(--sw-ink) !important;
}
.search-bar button.search-clear:hover { background: #ddd4c4 !important; }
.search-bar input[type="text"] { border-color: #cfc8bb !important; }
.search-bar input[type="text"]:focus { border-color: var(--sw-tan) !important; box-shadow: 0 0 0 2px rgba(176,141,87,.25) !important; }

/* cart: black pill, red count badge — mockup's black icon treatment */
.cart-link, .cart-widget a {
  background: var(--sw-black) !important;
  border-color: var(--sw-black) !important;
  color: #fff !important;
}
.cart-link:hover { background: #2a2a2a !important; }
.cart-count {
  background: var(--sw-red) !important;
  color: #fff !important;
}

/* stray theme-blue links pick up the scheme */
a { color: inherit; }
.content a:not(.sw-btn-outline):not(.sw-hero-cta), .product-tab-btn.active {
  color: var(--sw-red) !important;
  border-color: var(--sw-red) !important;
}

/* ---------- product page: rebuilt to the approved comp ---------- */
/* parchment ground across the whole page, not just one band */
body.product-page, .product-page-wrapper, .product-main, .product-container,
.product-detail-page { background: var(--sw-cream) !important; }
.product-details-section { background: var(--sw-cream) !important; }

/* image column: one framed card, filmstrip beneath (comp) */
.product-images-section { display: block !important; }
.main-product-image, .product-gallery, .product-image-panel {
  background: #fff !important; border: 1px solid #e2d8c4 !important;
  border-radius: 2px; padding: 18px; position: relative;
}
/* the theme frames each thumbnail as a second full-size card; the filmstrip
   rule below reclaims it as a strip */
.thumbnail-gallery { border: 0 !important; background: none !important; padding: 0 !important; }
.thumbnail-gallery > * { flex: 0 0 auto; }
.thumbnail-gallery img, .thumbnail-gallery a, .thumbnail-gallery div {
  max-width: 92px !important; max-height: 92px !important; box-sizing: border-box;
}

/* thumbnail filmstrip */
.thumbnail-gallery { display: flex !important; gap: 10px; margin-top: 14px; flex-wrap: nowrap; overflow-x: auto; }
.thumbnail-gallery img { width: 92px; height: 92px; object-fit: contain;
  border: 1px solid #e2d8c4 !important; background: #fff; padding: 6px; border-radius: 2px; }
.thumbnail-gallery img:hover, .thumbnail-gallery img.active { border-color: var(--sw-tan) !important; }

/* brand line above the title, uppercase — comp puts COLT above the name */
/* the real parent is .stock-sku-row — a nowrap flex row that pushed the SKU
   chips off the right edge once the spec list joined it */
.stock-sku-row {
  display: flex !important; flex-wrap: wrap !important; gap: 10px;
  max-width: 100%; overflow: visible;
}
.stock-sku-row > * { min-width: 0; }

.product-info-codes {
  width: 100%; flex: 0 0 100%; margin-top: 4px;
  display: flex !important; flex-wrap: wrap !important; gap: 8px;
  max-width: 100%; overflow: hidden;
}
.product-info-codes > * { flex: 0 0 auto; }
/* chips: pill styling, wrapping inside the column (comp) */
.product-sku, .product-code {
  background: #fbf8f2; border: 1px solid #e2d8c4; border-radius: 3px;
  padding: 7px 12px; font-size: 12.5px; color: #5a5044; white-space: nowrap;
}

.product-brand-line, .product-details-section .brand-link {
  display: block; font-family: 'Oswald', sans-serif; letter-spacing: 2px;
  font-size: 12.5px; color: #6d6353 !important; text-transform: uppercase;
  margin-bottom: 6px; text-decoration: none;
}

/* buy box: qty and cart stacked full width, per the comp */
.qty-cart-row { display: flex !important; gap: 14px; align-items: stretch; }
.qty-cart-row .add-to-cart-btn { flex: 1; min-height: 54px; font-size: 15px; }
.qty-input-group { border: 1px solid #d8ccb6; background: #fff; }

/* FFL + shipping as twin icon blocks, not one warning box */
.ffl-required-notice, .ffl-notice {
  background: #fbf8f2 !important; border: 1px solid #e2d8c4 !important;
  color: #4a4034 !important; border-radius: 2px;
}
.ffl-required-notice h4, .ffl-notice h4 {
  font-family: 'Oswald', sans-serif; letter-spacing: 1px; color: var(--sw-ink) !important;
  font-size: 14px; text-transform: uppercase;
}

/* icon spec list (comp) — must clear the flex row it is emitted into, or the
   SKU/UPC chips wrap alongside it */
.sw-spec-list {
  list-style: none; margin: 18px 0 22px; padding: 0;
  width: 100%; flex: 0 0 100%; display: block;
}
.sw-spec-list li {
  display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  font-size: 14.5px; color: #4a4034; white-space: nowrap;
}
.sw-spec-list strong { color: var(--sw-ink); font-weight: 600; }
.sw-spec-ic { color: #6d6353; font-size: 14px; width: 18px; flex: 0 0 18px; }

/* FFL + shipping assurance blocks (comp) */
.sw-assurances {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 22px 0 6px; padding-top: 20px; border-top: 1px solid #e2d8c4;
}
.sw-assure { display: flex; gap: 12px; align-items: flex-start; }
.sw-assure-ic { font-size: 21px; color: #6d6353; line-height: 1; }
.sw-assure strong {
  display: block; font-family: 'Oswald', sans-serif; font-size: 13.5px;
  letter-spacing: .6px; color: var(--sw-ink); margin-bottom: 2px;
}
.sw-assure span { font-size: 12.5px; color: #6d6353; }
@media (max-width: 560px) { .sw-assurances { grid-template-columns: 1fr; gap: 14px; } }

/* category sidebar: theme-blue controls take the skin's ink/red */
.btn-apply-filters { background: var(--sw-ink) !important; border-color: var(--sw-ink) !important;
  color: #fff !important; font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; }
.btn-apply-filters:hover { background: var(--sw-red) !important; border-color: var(--sw-red) !important; }
.filters-sidebar h3, .filter-title { border-color: var(--sw-tan) !important; }

/* space between the marketing band and the breadcrumb trail (Brad 2026-08-06) */
.product-breadcrumb, .breadcrumb, nav[aria-label="Breadcrumb"] {
  margin-top: 18px !important;
}

/* -------- comp column order: brand / title / stars / price / stock+SKU /
   excerpt / specs / qty+cart / wishlist / assurances. Flex order beats
   restructuring a 3,000-line template. -------- */
.product-info-section { display: flex; flex-direction: column; }
.product-info-section > * { order: 20; }
.product-info-section > .sw-brand-eyebrow { order: 1; }
.product-info-section > .product-title    { order: 2; }
.product-info-section > .product-rating   { order: 3; }
.product-info-section > .price-section    { order: 4; }
.product-info-section > .sw-stock-line    { order: 5; }
.product-info-section > .sw-excerpt       { order: 6; }
.product-info-section > .stock-sku-row    { order: 7; }
.product-info-section > form              { order: 8; }
.product-info-section > .sw-wishlist-btn  { order: 9; }
.product-info-section > .sw-assurances    { order: 10; }
/* comp has no share row, no SKU/UPC pill chips, no FREE SHIPPING chip
   (free shipping lives in the assurance block) */
.product-info-section .product-share,
.stock-sku-row .product-info-codes,
.stock-sku-row .free-shipping-badge { display: none !important; }

/* comp: brand eyebrow above the title */
.sw-brand-eyebrow {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 2.5px;
  text-transform: uppercase; color: #6d6353 !important; text-decoration: none;
  margin-bottom: 6px;
}
.sw-brand-eyebrow:hover { color: var(--sw-red) !important; }

/* comp: the price is dark ink, not red */
.price-section .current-price { color: var(--sw-ink) !important; font-family: 'Oswald', sans-serif; }

.sw-sku-inline { margin-left: 10px; color: #6d6353; font-size: 14px; }

/* comp: red TOP SELLER chip pinned top-left of the image card (demo-gated) */
.sw-topseller {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: var(--sw-red); color: #fff; font-family: 'Oswald', sans-serif;
  font-size: 12px; letter-spacing: 1.6px; padding: 6px 12px; border-radius: 2px;
}

/* comp: circular zoom chip pinned top-right of the image card */
.main-product-image { position: relative; }
.main-product-image .zoom-indicator {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid #d9cfbc; box-shadow: 0 1px 4px rgba(40,26,12,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; opacity: 1 !important; cursor: pointer;
}
.sw-excerpt { color: #5a5044; font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; }

/* full-width outline wishlist button (comp) */
.sw-wishlist-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin: 12px 0 6px; padding: 15px 20px;
  background: #fff; border: 1px solid #cbbfa8; color: var(--sw-ink);
  font-family: 'Oswald', sans-serif; letter-spacing: 2.5px; font-size: 13.5px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sw-wishlist-btn:hover { background: #f6f1e7; border-color: var(--sw-tan); }
.product-actions { margin-top: 6px; }

/* comp layout: description tabs left, YOU MAY ALSO LIKE sidebar right.
   Achieved by floating the related wrapper into the details band rather than
   moving markup inside a 3,000-line template. */
@media (min-width: 1000px) {
  /* the related markup ships inside its own .container/.section, so the float
     has to be applied to those inner elements, not just the wrapper */
  .sw-related-wrap { float: right; width: 34%; margin: -2px 0 30px 34px; position: relative; z-index: 2; }
  .sw-related-wrap .related-products-section { padding: 0 !important; margin: 0 !important; background: none !important; }
  .sw-related-wrap .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .product-details-section .container { overflow: visible; }
  /* constrain the tabs column ONLY when the sidebar has cards — otherwise the
     description card must run the full width of its panel (Brad 2026-08-06) */
  .product-details-section .container:has(.sw-related-wrap .related-block) .details-tabs,
  .product-details-section .container:has(.sw-related-wrap .related-block) .details-content { max-width: 62%; }
}
.related-block { background: #f0e9dc !important; border: 1px solid #e2d8c4;
  padding: 22px; border-radius: 2px; }
.related-header { font-family: 'Oswald', sans-serif !important; letter-spacing: 3px;
  text-transform: uppercase; font-size: 15px; margin-bottom: 16px; }
.sw-related-wrap .related-products-grid {
  grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important;
}
.sw-related-wrap .related-product-card { background: #fff !important; overflow: hidden; }
/* the theme's card is built for a wide row; constrain it for the sidebar */
.sw-related-wrap .related-product-card * { max-width: 100%; }
.sw-related-wrap .related-product-pricing {
  display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.sw-related-wrap .related-product-price { font-size: 17px !important; }
.sw-related-wrap .related-product-msrp { font-size: 12px !important; }
.sw-related-wrap .related-product-specs,
.sw-related-wrap .related-product-brand,
.sw-related-wrap .stock-indicator { display: none; }   /* comp shows title + price only */
/* comp: single cream panel titled YOU MAY ALSO LIKE — first block only,
   heading swapped in CSS so the shared include stays untouched */
.sw-related-wrap .related-block:nth-of-type(n+2) { display: none; }
.sw-related-wrap .related-header h2 { font-size: 0 !important; }
.sw-related-wrap .related-header h2::before {
  content: "YOU MAY ALSO LIKE"; font-size: 15px; letter-spacing: 3px;
  font-family: 'Oswald', sans-serif; color: var(--sw-ink);
}
.sw-related-wrap .related-product-title { text-transform: uppercase; }
/* comp: VIEW DETAILS outline button on each sidebar card (card is the link) */
.sw-related-wrap .related-product-card::after {
  content: "VIEW DETAILS"; display: block; margin: 10px 12px 12px; padding: 8px 0;
  border: 1px solid var(--sw-ink); text-align: center; font-family: 'Oswald', sans-serif;
  font-size: 11.5px; letter-spacing: 2px; color: var(--sw-ink);
}
.sw-related-wrap .related-product-card:hover::after { background: var(--sw-ink); color: #fff; }

/* full-width upsell rows below the details (same manufacturer, similar price) */
.sw-related-below .related-products-section { background: #f8f6f2 !important; padding: 44px 0 !important; }
.sw-related-below .related-block { margin-bottom: 34px; }
.sw-related-below .related-header h2 {
  font-family: 'Oswald', sans-serif !important; letter-spacing: 3px;
  text-transform: uppercase; font-size: 18px;
}
.sw-related-below .related-header p { color: #6d6353; font-size: 13.5px; }
.sw-related-below .related-product-card { background: #fff !important; border: 1px solid #e7e2d9; }
.sw-related-wrap .related-product-title { font-size: 13px !important; line-height: 1.35; }
/* (duplicate h2 font-size rule removed — it resurrected the hidden heading
   text next to the YOU MAY ALSO LIKE ::before replacement) */
.sw-related-wrap .related-header p { display: none; }
@media (max-width: 999px) {
  .sw-related-wrap { float: none; width: auto; margin: 0; }
}
.product-breadcrumb, .product-breadcrumb a { font-family: 'Oswald', sans-serif; font-size: 13px;
  letter-spacing: 1px; color: #6d6353; text-decoration: none; }
.breadcrumb-current { color: var(--sw-ink); }

.product-details-section h1 {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--sw-ink); line-height: 1.15;
}
.main-product-image { background: #fff; border: 1px solid #e7dfd0; }
.thumbnail-gallery img { border: 1px solid #e7dfd0; background: #fff; }
.thumbnail-gallery img:hover { border-color: var(--sw-tan); }

.current-price { color: var(--sw-ink) !important; font-family: 'Oswald', sans-serif; font-weight: 700; }
.original-price { color: #9a9184 !important; }
.savings-badge { background: var(--sw-red) !important; color: #fff !important;
  font-family: 'Oswald', sans-serif; letter-spacing: 1px; }

/* the mockup's saddle-brown ADD TO CART */
.add-to-cart-btn {
  background: #6b4a2b !important; border-color: #6b4a2b !important; color: #fff !important;
  font-family: 'Oswald', sans-serif; letter-spacing: 3px; text-transform: uppercase;
}
.add-to-cart-btn:hover { background: #543a21 !important; }

/* (old FFL/shipping callout rules removed 2026-08-06: superseded by
   .sw-assurances, and their generic .badge-* class names collided with the
   fixed "Your Data is Protected" security badge, painting its text box cream) */

/* tabs: uppercase, red active underline, single line (comp) */
.details-tabs { border-bottom: 2px solid #e7dfd0; flex-wrap: nowrap; }
.details-tab { white-space: nowrap; }
.details-tab { font-family: 'Oswald', sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: #6d6353; }
.details-tab.active { color: var(--sw-ink); border-bottom: 3px solid var(--sw-red); background: transparent; }

/* You May Also Like — cream cards, red price, outline buttons */
.related-header { font-family: 'Oswald', sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.related-product-card { background: #fbf8f2 !important; border: 1px solid #e7dfd0 !important; }
.related-product-brand { font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; color: #6d6353; }
.related-product-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: var(--sw-ink); }
/* prices are INK, not red (Brad 2026-08-12). The theme's default green is the
   platform's, so these still need to be forced. */
.related-product-price, .product-card .price, .product-price, .card-price,
.related-product-card .price { color: var(--sw-ink) !important; font-family: 'Oswald', sans-serif; font-weight: 700; }
.related-product-msrp { color: #9a9184; }
.related-product-card .btn, .related-product-card a.view-details {
  border: 2px solid var(--sw-ink); background: transparent; color: var(--sw-ink);
  font-family: 'Oswald', sans-serif; letter-spacing: 2px;
}
.related-product-card .btn:hover { background: var(--sw-ink); color: #fff; }

/* footer: parchment with a brown rule on top (comp), not the dark navy default */
.site-footer, footer.main-footer, .footer-clean, .main-footer {
  background: #f0e7d8 !important; color: #5a5044 !important;
  border-top: 4px solid #6b4a2b;
}
.site-footer a, footer.main-footer a, .main-footer a { color: #4a4034 !important; }
.site-footer a:hover, .main-footer a:hover { color: var(--sw-red) !important; }
.footer-heading, .footer-subheading, .site-footer h3, .site-footer h4, .main-footer h3 {
  color: var(--sw-ink) !important; font-family: 'Oswald', sans-serif !important;
  letter-spacing: 2.5px; text-transform: uppercase; font-size: 13px;
}
.site-footer .footer-bottom, .main-footer .footer-bottom {
  border-top: 1px solid #ddd0ba; color: #6d6353 !important;
}
/* mockup footer layout: brand / SHOP / CUSTOMER CARE / INFORMATION / JOIN */
.sw-footer-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
  gap: 34px; padding: 44px 0 30px;
}
.sw-f-brand img { display: block; margin-bottom: 14px; }
/* theme footer text is white-on-navy — repaint everything for parchment */
.sw-f-brand p { font-size: 13.5px; line-height: 1.7; color: #6d6353 !important; }
.sw-f-social a { color: #4a4034 !important; }
.sw-f-bottom p, .sw-f-bottom .legal-notice { color: #6d6353 !important; }
.site-footer .footer-powered-by p { color: #6d6353 !important; }
.site-footer .footer-powered-by a { color: #6b4a2b !important; }
.sw-f-contact { list-style: none; margin: 12px 0 0; padding: 0; }
.sw-f-contact li { margin: 0 0 6px; font-size: 13.5px; }
.sw-f-contact a { text-decoration: none; color: #4a4034 !important; }
.sw-f-mos { display: block; margin: 14px 0 0; background: #fff; border: 1px solid #d8cbb2;
  border-radius: 4px; padding: 8px; height: auto; }
.sw-f-social { display: flex; gap: 10px; margin-top: 14px; }
.sw-f-social a {
  width: 32px; height: 32px; border: 1px solid #b9a98d; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 14px;
}
.sw-f-social a:hover { background: var(--sw-ink); color: #fff !important; }
.sw-f-col ul { list-style: none; margin: 0; padding: 0; }
.sw-f-col li { margin: 0 0 9px; }
.sw-f-col a { font-size: 13.5px; text-decoration: none; }
.sw-f-col h3 { margin-bottom: 14px; }
.sw-f-join p { font-size: 13px; line-height: 1.65; color: #14100a !important; margin-bottom: 12px; }
.sw-f-news { display: flex; flex-direction: column; gap: 10px; }
.sw-f-news input {
  padding: 11px 14px; border: 1px solid #c8b998; background: #fbf7ef;
  font-size: 13.5px; border-radius: 2px;
}
.sw-f-news button {
  background: #6b4a2b; color: #fff; border: 0; padding: 11px;
  font-family: 'Oswald', sans-serif; letter-spacing: 2.5px; font-size: 13px; cursor: pointer;
}
.sw-f-news button:hover { background: var(--sw-ink); }
.sw-f-bottom { display: flex; align-items: center; gap: 20px; padding: 18px 0; }
.sw-f-bottom .footer-bottom-left { flex: 1; }
.sw-f-bottom p { margin: 0; font-size: 12.5px; }
.sw-f-bottom .legal-notice { font-size: 11px; opacity: .75; margin-top: 3px; }
.sw-f-star { color: #b9a98d; font-size: 18px; }
.sw-f-cards { display: flex; gap: 7px; }
.sw-f-cards span {
  background: #fff; border: 1px solid #d8cbb2; border-radius: 3px;
  font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1px;
  padding: 5px 9px; color: #4a4034;
}
/* headings promoted from h3 to h2 for a contiguous outline (SEO audit
   2026-08-12) keep their original visual weight */
.filter-heading, .search-tips-heading, .search-browse-heading, .search-help-heading {
  font-size: 17px !important; font-family: 'Oswald', sans-serif; letter-spacing: 1px;
  text-transform: uppercase; color: var(--sw-ink);
}
.product-title, h2.product-title, h2.deal-title { font-size: inherit; }
.filter-group-heading { font-size: 14px !important; font-family: 'Oswald', sans-serif;
  letter-spacing: .8px; color: #3a2f22; margin: 0 0 8px; }

/* --- theme consistency sweep (audit 2026-08-12) --------------------------
   The audit walked 10 page types and found 68 computed colours still on the
   platform theme's blue (#0066cc / #2563eb) — breadcrumb links on product and
   category pages were the bulk of them, plus the skip link and the contact
   captcha. These force the whole site onto the Smoke Wagon palette. */
.skip-link { background: var(--sw-ink) !important; color: #fff !important; }
.skip-link:focus { background: var(--sw-red) !important; outline: 2px solid #fff; }

/* breadcrumbs everywhere (theme paints them blue) */
.breadcrumb a, .breadcrumbs a, .product-breadcrumb a, nav[aria-label="Breadcrumb"] a,
.breadcrumb-list a, .category-breadcrumb a {
  color: #6b4a2b !important; border-color: #cbbba0 !important;
}
.breadcrumb a:hover, .breadcrumbs a:hover, .product-breadcrumb a:hover,
nav[aria-label="Breadcrumb"] a:hover, .category-breadcrumb a:hover {
  color: var(--sw-red) !important;
}
.breadcrumb, .breadcrumbs, .product-breadcrumb { color: #6d6353 !important; }

.related-product-brand, .related-product-card .brand { color: #6d6353 !important; border-color: #e2d8c4 !important; }

.deal-price, .deals-grid .price { color: var(--sw-ink) !important; }
/* the tab's TOP border is a separate declaration from its bottom accent */
.details-tab.active, button.details-tab.active {
  border-top-color: transparent !important; border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* mobile nav + tab controls (theme paints these blue at <=820px) */
@media (max-width: 820px) {
  .main-nav li.dropdown.mobile-only-nav, .mobile-only-nav,
  .main-nav .mobile-only-nav > a { background: #241c15 !important; }
  .details-tab.active, .product-tab-btn.active, button.details-tab.active {
    background: #f3ece0 !important; color: var(--sw-ink) !important;
    border-bottom-color: var(--sw-red) !important;
  }
  .details-tabs { background: transparent !important; }
}

/* remaining product-page controls the theme paints blue */
.action-link, .product-actions a, .qa-link, .spec-link {
  color: #6b4a2b !important; border-color: #cbbba0 !important;
}
.action-link:hover { color: var(--sw-red) !important; }
.details-tab.active, .details-tab[aria-selected="true"] {
  color: var(--sw-ink) !important; border-bottom-color: var(--sw-red) !important;
}
.details-tab:hover { color: var(--sw-red) !important; }

/* review widgets on the product page (links, stars, tab counts) */
.review-count, .review-link, .reviews-summary a, .review-item a, .write-review-btn,
.review-stars a, .rating-link, .see-all-reviews {
  color: #6b4a2b !important; border-color: #cbbba0 !important;
}
.review-count:hover, .review-link:hover, .see-all-reviews:hover { color: var(--sw-red) !important; }
.review-bar-fill, .rating-bar-fill { background: var(--sw-tan) !important; }

/* product gallery thumbnails: active state was theme blue */
.thumbnail.active, .thumbnail-gallery .thumbnail.active, .thumbnail:hover {
  border-color: var(--sw-red) !important; outline-color: var(--sw-red) !important;
}
/* any residual financing teaser keeps the palette if a tenant enables it */
.financing-teaser { color: #6b4a2b !important; border-color: var(--sw-tan) !important; }

/* contact captcha + any generic info panel the theme accents in blue */
.captcha-question, .info-box, .notice-box, .alert-info {
  border-color: var(--sw-tan) !important; background: #fbf8f2 !important; color: var(--sw-ink) !important;
}
/* generic in-content links inherit the brand, not the theme */
.content a:not(.btn):not(.sw-btn-outline):not(.sw-hero-cta):not(.swc-plate),
.content-article a:not(.btn) { color: #6b4a2b !important; }
.content a:hover:not(.btn), .content-article a:hover:not(.btn) { color: var(--sw-red) !important; }

/* --- mobile legibility floor (audit 2026-08-12) --------------------------
   Google's mobile usability check and plain readability both suffer below
   ~12px. These are the only sub-12px strings the audit found rendering on a
   390px viewport; the rest of the type was already 12px+. */
@media (max-width: 820px) {
  .account-text, .cart-text-mobile, .logout-text { font-size: 12px !important; }
  .sw-f-cards span { font-size: 11.5px !important; letter-spacing: .8px; }
  .legal-notice { font-size: 12px !important; }
  .swc-mob-lbl { font-size: 12px !important; }
  .sw-feat-flag { font-size: 12px !important; }
  .sw-feat-brand { font-size: 12px !important; }
  .sw-best-btn { font-size: 12.5px !important; }
  .sw-trustbar span { font-size: 12px !important; }
  .sw-topbar-perks span, .sw-topbar-perks a { font-size: 12px !important; }
}

/* tap targets: Google wants ~48px of touchable height on mobile. Padding is
   used rather than fixed heights so nothing reflows. (audit 2026-08-12) */
@media (max-width: 820px) {
  .mobile-account-link, .mobile-cart-link, .mobile-logout-link, .mobile-menu-toggle {
    min-height: 44px !important; display: inline-flex !important;
    align-items: center; justify-content: center;
  }
  .sw-btn-outline, .sw-best-btn, .sw-brand-cta { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  .sw-topbar-perks a, .sw-f-contact a, .footer-bottom a { display: inline-block; padding: 6px 0; }
  .sw-brand-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .swc-deals { min-height: 44px; display: inline-flex; align-items: center; }
  .sw-f-col a, .sw-f-social a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* --- contact page: western hero + themed form (Brad 2026-08-12) ---------- */
.sw-contact-hero {
  background: url('/assets/images/sw-plank.jpg') center / cover, #efe4cf;
  border-top: 3px solid #b9a37c; border-bottom: 3px solid #b9a37c;
  padding: clamp(26px, 4vw, 52px) 20px; text-align: center; margin-bottom: 32px;
}
.sw-contact-hero h1 {
  font-family: 'Graduate','Oswald',sans-serif; color: #14100a !important;
  font-size: clamp(26px, 4vw, 46px); letter-spacing: 2px; margin: 0;
  text-shadow: 0 1px 0 rgba(255,252,244,.55);
}
.sw-contact-rule { display: flex; align-items: center; gap: 12px; max-width: 340px; margin: 14px auto; }
.sw-contact-rule::before, .sw-contact-rule::after { content: ""; flex: 1; height: 1px; background: rgba(90,66,40,.45); }
.sw-contact-rule span { color: var(--sw-red); font-size: 13px; }
.sw-contact-hero p {
  max-width: 620px; margin: 0 auto; color: #2f2418 !important;
  font-size: clamp(14px, 1.3vw, 17px); line-height: 1.6;
}
.sw-contact-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.sw-contact-quick a {
  background: rgba(255,252,245,.85); border: 1px solid #b9a37c; border-radius: 4px;
  padding: 12px 22px; text-decoration: none; min-width: 190px;
  transition: transform .12s, box-shadow .14s, background .14s;
}
.sw-contact-quick a:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(60,42,24,.2); }
.sw-contact-quick b {
  display: block; font-family: 'Oswald', sans-serif; font-size: 15px; color: #14100a; letter-spacing: .4px;
}
.sw-contact-quick span {
  display: block; font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 2px;
  color: #6b4a2b; margin-top: 3px;
}
.sw-contact-h2, .contact-sidebar h3, .contact-card h3 {
  font-family: 'Oswald', sans-serif !important; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sw-ink) !important;
}
/* form controls in the site palette, not the theme's blue */
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid #cfc8bb !important; border-radius: 3px !important;
  background: #fbf8f2 !important; color: var(--sw-ink) !important;
  font-size: 15px !important;                 /* 16px-ish keeps iOS from zooming */
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--sw-tan) !important; box-shadow: 0 0 0 2px rgba(176,141,87,.25) !important; outline: none;
}
.contact-form label { font-family: 'Oswald', sans-serif; letter-spacing: 1px; color: #3a2f22 !important; }
.contact-form button[type="submit"], .contact-form .btn-primary {
  background: linear-gradient(180deg, #b5262f 0%, #8f1c24 100%) !important;
  border: 1px solid #8a1a22 !important; color: #fff !important;
  font-family: 'Oswald', sans-serif !important; letter-spacing: 2px; border-radius: 4px !important;
}
.contact-card {
  background: #fbf8f2 !important; border: 1px solid #e2d8c4 !important; border-radius: 4px;
}
/* the theme accents these list items in blue — swap to the brand red */
.contact-card li, .contact-card .topic, .contact-sidebar li {
  border-left-color: var(--sw-red) !important; background: #fdfbf6 !important;
}
.contact-card a, .contact-sidebar a { color: var(--sw-ink) !important; }
.contact-card a:hover, .contact-sidebar a:hover { color: var(--sw-red) !important; }
.contact-card strong, .contact-sidebar strong { color: var(--sw-ink) !important; }
@media (max-width: 620px) { .sw-contact-quick a { min-width: 100%; } }

/* built-by / powered-by badge, bottom centre of every page */
.sw-powered { text-align: center; padding: 20px 0 24px; border-top: 1px solid #ddd0ba; margin-top: 8px; }
.sw-powered img { width: min(300px, 62vw); height: auto; display: inline-block;
  opacity: .95; transition: opacity .15s, transform .15s; }
.sw-powered a:hover img { opacity: 1; transform: translateY(-1px); }
.sw-powered-ver { display: block; margin-top: 8px; font-size: 11px; color: #8a8172; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) { .sw-footer-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .sw-footer-row { grid-template-columns: 1fr; } .sw-f-bottom { flex-direction: column; text-align: center; } }

/* ---------- 2026-09-17: mobile footer + contact polish (Brad: "footer all jacked up on mobile") ---------- */
@media (max-width: 640px) {
  /* Trust badges: tidy 2-up compact cards instead of tall full-width column blocks */
  .footer-trust-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 22px 0 !important;
    margin: 10px 0 !important;
  }
  .footer-trust-row .trust-badge {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    font-size: 12.5px !important;
    line-height: 1.15;
    text-align: left;
  }
  .footer-trust-row .trust-badge svg { width: 20px !important; height: 20px !important; }
  /* the Authorize.Net seal (when present) spans the full row so it isn't squeezed */
  .footer-trust-row .authorizenet-seal { grid-column: 1 / -1; background: transparent; border: 0; }
}

/* 2026-09-17: mobile hero — the composed full-art (2.33:1, badge baked upper-left) was
   center-cropped by `cover` on phones, losing the badge + storefront. Show the WHOLE art,
   sized to its own ratio so there's no crop and no empty band; CTA centered near the base. */
@media (max-width: 640px) {
  .sw-hero--full {
    background-size: contain !important;
    background-position: center top !important;
    background-color: #c9b591 !important;
    min-height: 0 !important;
    aspect-ratio: 2.33 / 1;
    display: block !important;
  }
  .sw-hero--full .sw-hero-inner {
    position: absolute !important;
    left: 50% !important; right: auto !important; top: auto !important; bottom: 7% !important;
    transform: translateX(-50%);
    margin: 0 !important; padding: 0 !important; width: auto !important; align-items: center !important;
  }
  .sw-hero--full .sw-hero-cta { padding: 9px 26px; font-size: 12.5px; letter-spacing: 2px; }
}

/* 2026-10-01 (Brad): lock the hero frame. The height stopped at 680px while the width kept
   growing, so `cover` cropped the top of the art on wide screens (the baked-in badge drifted
   off the top at 1920px, half of it gone at 2560px). Now the frame always has the art's own
   ratio (1896x830) and stops at the art's native width, centered, so nothing is ever cropped
   or upscaled. The side gutters on very wide screens are painted in the nav black. Phones keep
   the max-width:640px rule above. */
@media (min-width: 641px) {
  .sw-hero--full {
    max-width: 1896px;
    margin-left: auto !important; margin-right: auto !important;
    aspect-ratio: 1896 / 830;
    min-height: 0 !important;
    height: auto !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: 0 0 0 100vmax var(--sw-black);
    clip-path: inset(0 -100vmax);
  }
}

/* ===== 2026-10-01 tightening pass (Brad: "like TheGunDock on Creation Station") ===== */

/* Phone header: the theme stacked Login and Shopping Cart as two full rows (~180px before
   search). One row instead: logo left, the two buttons right, search full width beneath. */
@media (max-width: 900px) {
  .header-main .container {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    justify-content: flex-start !important; gap: 10px !important;
  }
  .header-main .logo { order: 1; flex: 0 0 auto !important; margin: 0 !important; }
  .header-main .mobile-account-link { order: 2; margin: 0 0 0 auto !important; }
  .header-main .cart-widget { order: 3; margin: 0 !important; width: auto !important; flex: 0 0 auto !important; }
  .header-main .search-bar { order: 4; flex: 1 0 100% !important; max-width: 100% !important; margin: 0 !important; }
  .mobile-account-link, .mobile-cart-link { padding: 8px 12px !important; }
  .mobile-account-link .account-text, .mobile-cart-link .cart-text-mobile { font-size: 12px !important; letter-spacing: .3px !important; }
  .mobile-account-link { background: var(--sw-black) !important; }
  .mobile-cart-link { background: var(--sw-red) !important; }
}

/* Daily Deal, desktop: the name card holds ~83px of text, the brand line + 4 name lines + caliber
   needed ~115px, so both ends were cut. The name already starts with the brand: drop the duplicate
   brand line here and cap the name at 3 lines. */
@media (min-width: 821px) {
  .swc-name .swc-brand { display: none !important; }
  .swc-name > span:not(.swc-brand):not(.swc-cal) {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.15;
  }
}
/* Daily Deal, phone: the label inherited grey (#6d6353) on the red plate and wrapped to three
   lines; and the plate sat at the TOP of the card. White, one line, at the bottom. */
@media (max-width: 820px) {
  .swc-deals { order: 99; }
  .swc-deals .swc-mob-lbl { color: #fff !important; white-space: nowrap; font-size: 13px !important; }
}

/* Featured listings, phone: the collapsed grid allowed ~24 products (about 4,500px of scrolling)
   before SHOW MORE. Four rows of two. */
@media (max-width: 640px) {
  .sw-featured:not(.is-open) .sw-feat-grid { max-height: 1236px !important; }
}

/* Best sellers: every card is the same column - image, name (3 lines max), price pinned above
   the button - so images, names and prices line up across the row. */
.sw-best-card > a:first-child { display: flex; flex-direction: column; }
.sw-best-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(3 * 1.35em); }
.sw-best-price { margin-top: auto; padding-top: 6px; }
/* five cards in two columns left one alone; show four on phones */
@media (max-width: 640px) { .sw-best-grid .sw-best-card:nth-child(n+5) { display: none; } }

/* Phone: the perks strip repeated the trust bar under the hero (shipping / secure / support). */
@media (max-width: 640px) { .sw-perks { display: none !important; } }
/* the header image is a 1024x208 strip with the badge centred: min-width:max-content made it
   claim ~230px and push the buttons onto their own rows. On phones show just the badge. */
@media (max-width: 900px) {
  .header-main .logo, .header-main .logo a { min-width: 0 !important; width: auto !important; }
  .header-main .logo img { width: 56px !important; height: 48px !important; max-height: 48px !important;
    object-fit: cover !important; object-position: center !important; }
}
/* the desktop plate geometry (width 20.5%, height 17%) still applied to the phone button */
@media (max-width: 820px) {
  .swc-deals { width: auto !important; height: auto !important; }
}
/* the theme reserves 70px for the floating menu button, leaving ~308px; logo + "LOGIN TO MY
   ACCOUNT" + "SHOPPING CART" need ~346px and wrapped. Short labels keep them on the logo's row. */
@media (max-width: 900px) {
  .mobile-account-link .account-text, .mobile-cart-link .cart-text-mobile { font-size: 0 !important; letter-spacing: 0 !important; }
  .mobile-account-link .account-text::after { content: "Account"; font-size: 12px; letter-spacing: .4px; }
  .mobile-cart-link .cart-text-mobile::after { content: "Cart"; font-size: 12px; letter-spacing: .4px; }
}
/* the theme's header <style> loads AFTER this file and wins ties, so the one-row phone header
   needs selectors that out-rank it outright */
@media (max-width: 900px) {
  html body .site-header .header-main > .container {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    justify-content: flex-start !important; gap: 8px !important;
  }
  html body .site-header .header-main > .container > .logo {
    order: 1 !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
    max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    text-align: left !important; justify-content: flex-start !important;
  }
  html body .site-header .header-main > .container > .logo img {
    width: 56px !important; height: 48px !important; max-height: 48px !important;
    object-fit: cover !important; object-position: center !important;
  }
  html body .site-header .header-main > .container > .mobile-account-link,
  html body .site-header .header-main > .container > .mobile-logout-link {
    order: 2 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 0 0 auto !important;
  }
  html body .site-header .header-main > .container > .cart-widget {
    order: 3 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important;
  }
  html body .site-header .header-main > .container > .search-bar {
    order: 4 !important; flex: 1 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important;
  }
  html body .site-header .mobile-account-link .account-text,
  html body .site-header .mobile-cart-link .cart-text-mobile { font-size: 0 !important; letter-spacing: 0 !important; }
  html body .site-header .mobile-account-link .account-text::after { content: "Account"; font-size: 12px; letter-spacing: .4px; }
  html body .site-header .mobile-cart-link .cart-text-mobile::after { content: "Cart"; font-size: 12px; letter-spacing: .4px; }
}
/* ...and at <=768px the theme turns the header into a COLUMN (logo centred, Account pushed right
   by its auto margin, Cart centred: the stacked look). Force the row back. */
@media (max-width: 900px) {
  html body .site-header .header-main > .container { flex-direction: row !important; }
}
/* the theme's 381-500px rule drops the 70px reserve for the floating menu button; Cart then
   slid under it at 390px. Keep the reserve at every phone width. */
@media (max-width: 900px) {
  html body .site-header .header-main > .container { padding-right: 68px !important; }
}

/* Featured cards with ADD TO CART (Brad 2026-10-01). The card was one <a>; a button cannot live
   inside a link, so the card is now a box holding the link plus a small cart form. Rows grow
   50px for the button, and every collapsed max-height is recomputed to land on a row edge. */
.sw-feat-link { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  color: inherit; text-decoration: none; }
.sw-feat-cart { margin: 0; padding: 0 11px 11px; }
.sw-feat-add { width: 100%; min-height: 40px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--sw-ink); color: #fff; font-family: 'Oswald', sans-serif; font-size: 12.5px;
  letter-spacing: 1.6px; transition: background .14s; }
.sw-feat-add:hover, .sw-feat-add:focus-visible { background: var(--sw-red); }
.sw-feat-add[disabled] { opacity: .75; cursor: default; }
.sw-feat-add.is-added { background: #2f6b3a; }
.sw-feat-msg { font-size: 12px; color: var(--sw-red); padding-top: 6px; line-height: 1.3; }
.sw-feat-grid { grid-auto-rows: 372px; max-height: 1924px; }                       /* 5 rows */
.sw-featured.is-open .sw-feat-grid { max-height: none; }   /* was 6000px: clipped the opened list on phones */
@media (max-width: 1200px) { .sw-feat-grid { max-height: 2312px; } }              /* 6 rows of 4 */
@media (max-width: 860px)  { .sw-feat-grid { max-height: 3088px; } }              /* 8 rows of 3 */
@media (max-width: 620px)  { .sw-feat-grid { grid-auto-rows: 350px; max-height: 1436px; }
  .sw-featured:not(.is-open) .sw-feat-grid { max-height: 1436px !important; } }   /* 4 rows of 2 */
/* Brad: the first cart button looked bolted on. Match the site's own outline buttons
   (SHOW MORE / VIEW PRODUCT): thin ink border, Oswald caps, fills on hover. */
.sw-feat-add { background: #fff; color: var(--sw-ink); border: 1.5px solid var(--sw-ink);
  font-size: 12px; letter-spacing: 2px; min-height: 38px; }
.sw-feat-add:hover, .sw-feat-add:focus-visible { background: var(--sw-ink); color: #fff; }
.sw-feat-add.is-added { background: #2f6b3a; border-color: #2f6b3a; color: #fff; }
/* a tall product photo (bore brush) overflowed its card: clamp the picture to the image box */
.sw-feat-img { overflow: hidden; }
.sw-feat-img picture { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; }
.sw-feat-img picture img { max-width: 100%; max-height: 100%; }
/* Brad: white blended in. Solid brand red, white text: the one thing on the card that asks for a click. */
.sw-feat-add { background: var(--sw-red); color: #fff; border: 1.5px solid var(--sw-red); font-weight: 600; }
.sw-feat-add:hover, .sw-feat-add:focus-visible { background: #9e0c24; border-color: #9e0c24; color: #fff; }
/* Brad 2026-10-01: prices need a more inviting color, the way TheGunDock does it: TheGunDock's
   price green (--color-price-green #27ae60) on every sell price, replacing the flat ink. Struck-through
   was-prices stay grey. Cart button: the deal board's own western red, so it belongs to the theme. */
.product-price, .sale-price, .sw-feat-price b, .sw-best-price { color: #27ae60 !important; }
.sw-feat-add { background: #a4222a; border-color: #a4222a; color: #fff; }
.sw-feat-add:hover, .sw-feat-add:focus-visible { background: #7f1a20; border-color: #7f1a20; color: #fff; }

/* Brad 2026-10-01: SHOP NOW drifted off the badge on narrower screens. It sat at 7.2% + 50px with a
   fixed-size button, while the art (now ratio-locked) scales: the fixed parts did not, so it slid right.
   Measured in the art: badge centre 15.2% across, badge bottom ~44% down. Centre the button on that
   point and size it from the hero's own width, so it stays tucked under the badge at every size.
   Phones keep their own centred-at-the-base rule (<=640px). */
@media (min-width: 641px) {
  .sw-hero--full { container-type: inline-size; }
  html body .sw-hero--full .sw-hero-inner {
    left: 15.2% !important; top: 47.5% !important; transform: translateX(-50%) !important;
    align-items: center !important;
  }
  html body .sw-hero--full .sw-hero-cta {
    font-size: clamp(11px, 0.95cqw, 15px) !important; letter-spacing: .2em !important;
    padding: clamp(7px, 0.75cqw, 13px) clamp(16px, 2.4cqw, 46px) !important; white-space: nowrap;
  }
}
/* 901-1200px: the seven menu items wrapped REBATES onto a second line (seen at 970px). */
@media (min-width: 901px) and (max-width: 1200px) {
  html body .main-nav ul[role="menubar"] { flex-wrap: nowrap !important; justify-content: center !important; }
  html body .main-nav ul[role="menubar"] > li > a, html body .main-nav .nav-link {
    padding-left: 12px !important; padding-right: 12px !important; letter-spacing: .8px !important; font-size: 13px !important; white-space: nowrap; }
}

/* 2026-10-01 (Brad): header logo is now the badge's own lettering only (three stars + SMOKE WAGON,
   cut from sw-badge.png, rings removed; assets/images/logo-header.webp, source sw-header-wordmark.png).
   A wide wordmark reads far better than the shrunken round badge, so it gets real size. */
html body .site-header .header-main .logo img {
  width: auto !important; height: 64px !important; max-height: 64px !important; max-width: none !important;
  object-fit: contain !important;
}
@media (max-width: 1080px) { html body .site-header .header-main .logo img { height: 52px !important; max-height: 52px !important; } }
/* phones: undo the badge crop (object-fit:cover on a 56px box would now cut the lettering) */
@media (max-width: 900px) {
  html body .site-header .header-main > .container > .logo img {
    width: auto !important; height: 40px !important; max-height: 40px !important; object-fit: contain !important;
  }
}
@media (max-width: 380px) {
  html body .site-header .header-main > .container > .logo img { height: 34px !important; max-height: 34px !important; }
}

/* 2026-10-01 (Brad): show UPC / SKU / Model / MPN right under the price, the way TheGunDock does.
   The original comp hid these chips; dealers and customers search by UPC, so they are back.
   The free-shipping chip in the same row stays hidden (it lives in the assurance block). */
html body .product-info-section > .stock-sku-row { order: 5 !important; margin: 6px 0 10px; }
html body .product-info-section > .sw-stock-line { order: 6 !important; }
html body .product-info-section > .sw-excerpt    { order: 7 !important; }
html body .stock-sku-row .product-info-codes { display: flex !important; }
html body .stock-sku-row .free-shipping-badge { display: none !important; }
html body .product-info-codes .product-sku, html body .product-info-codes .product-code {
  user-select: all;   /* one click selects the whole code for copying */
}
/* Prices: TheGunDock's price green on the product page too (the card prices already use it). */
html body .price-section .current-price, html body .current-price { color: #27ae60 !important; }