@charset "utf-8";
/*
 * IRUNGUNS storefront shell v1 - shared design system additions on top of
 * irg_tune.css's existing black/#c51d12 header polish. Visual direction:
 * Avery's dark IRUNGUNS concept (docs/451, reggie-command-center-v2's
 * irunguns-ca-upgrade prototype) + the admin Dashboard's red/black brand
 * identity. Borderview is NOT a source for anything in this file - only
 * the Import/Export process/FAQ presentation draws from it, built
 * separately. New, additive component classes only - nothing here
 * overrides irg_tune.css's existing rules.
 */

:root {
  --irg-sf-bg: #0a0a0a;
  --irg-sf-panel: #14181f;
  --irg-sf-panel2: #1b212b;
  --irg-sf-line: #2a323e;
  --irg-sf-text: #eef1f6;
  --irg-sf-muted: #9aa5b5;
  --irg-sf-red: #c51d12;
  --irg-sf-red2: #e11d2a;
  --irg-sf-ca: #ef4444;
  --irg-sf-us: #3b82f6;
  --irg-sf-reggie: #8b5cf6;
  --irg-sf-radius: 12px;
}

/* ---- New utility band inside <header>, above the existing logo/nav row.
   Purely additive - does not touch .container-fluid/.navigation/.cartview
   internals below it, so the existing header structure/JS is untouched. ---- */
.irg-sf-headerbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 20px;
  background: #000;
  border-bottom: 1px solid var(--irg-sf-line);
}
@media (max-width: 767px) {
  .irg-sf-headerbar { justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
}

/* ---- Persistent header search (replaces the "Search" text trigger for
   the old full-page advanced-search overlay with a real, always-visible
   box). The advanced overlay (search_bar.php) stays reachable via
   "Advanced" for anyone who wants the old facet form - not deleted. ---- */
.irg-sf-searchbox {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 460px;
  margin: 0 16px;
  background: #14181f;
  border: 1px solid var(--irg-sf-line);
  border-radius: 999px;
  overflow: hidden;
}
.irg-sf-searchbox input[type="text"] {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--irg-sf-text);
  padding: 9px 14px;
  font-size: 13px;
  outline: none;
}
.irg-sf-searchbox input[type="text"]::placeholder { color: var(--irg-sf-muted); }
.irg-sf-searchbox button {
  border: 0;
  background: var(--irg-sf-red);
  color: #fff;
  padding: 0 16px;
  height: 38px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.irg-sf-searchbox button:hover { background: var(--irg-sf-red2); }
@media (max-width: 991px) { .irg-sf-searchbox { display: none; } }

/* ---- CA/US store toggle - reuses the existing Canadian Store/US Store
   nav links (same hrefs, same active-state PHP), just presented as a
   pill toggle instead of two ordinary nav items. ---- */
.irg-sf-storetoggle {
  display: inline-flex;
  border: 1px solid var(--irg-sf-line);
  border-radius: 999px;
  overflow: hidden;
  margin-right: 10px;
}
.irg-sf-storetoggle a {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--irg-sf-muted) !important;
  text-decoration: none !important;
  display: inline-block;
}
.irg-sf-storetoggle a.irg-sf-ca.on { background: rgba(239,68,68,.18); color: #fca5a5 !important; }
.irg-sf-storetoggle a.irg-sf-us.on { background: rgba(59,130,246,.18); color: #93c5fd !important; }
@media (max-width: 767px) { .irg-sf-storetoggle { display: none; } }

/* ---- Reggie header chip - placeholder until the customer-scoped Reggie
   capability + model backend exist (roadmap, not this wave). Clicking it
   is honest about that instead of pretending to be a working assistant. ---- */
.irg-sf-reggie-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--irg-sf-reggie), #5b21b6);
  color: #fff !important;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  margin-right: 10px;
}
.irg-sf-reggie-chip:hover { filter: brightness(1.1); }
@media (max-width: 767px) { .irg-sf-reggie-chip span.irg-sf-reggie-label { display: none; } }

/* ---- Homepage hero: three shopping modes, matching Avery's concept
   (irunguns-ca-upgrade prototype's #home wireframe) - real hrefs into the
   existing site, not placeholder links. ---- */
.irg-sf-hero {
  background:
    radial-gradient(1000px 360px at 8% -20%, rgba(197,29,18,.25), transparent),
    radial-gradient(700px 280px at 92% 0%, rgba(59,130,246,.10), transparent),
    var(--irg-sf-panel);
  border: 1px solid var(--irg-sf-line);
  border-radius: 16px;
  padding: 22px 24px 20px;
  margin: 18px auto 0;
  max-width: 1400px;
}
.irg-sf-hero .irg-sf-eyebrow {
  color: var(--irg-sf-red2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.irg-sf-hero h1 {
  color: var(--irg-sf-text);
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
}
.irg-sf-hero p {
  color: var(--irg-sf-muted);
  max-width: 68ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.irg-sf-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 900px) { .irg-sf-modes { grid-template-columns: 1fr; } }
.irg-sf-mode {
  display: block;
  background: var(--irg-sf-panel2);
  border: 1px solid var(--irg-sf-line);
  border-top: 3px solid var(--irg-sf-line);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none !important;
  transition: transform .12s ease, border-color .12s ease;
}
.irg-sf-mode:hover { transform: translateY(-2px); border-color: #47536a; }
.irg-sf-mode.irg-sf-ca { border-top-color: var(--irg-sf-ca); }
.irg-sf-mode.irg-sf-us { border-top-color: var(--irg-sf-us); }
.irg-sf-mode.irg-sf-import { border-top-color: var(--irg-sf-reggie); }
.irg-sf-mode strong {
  display: block;
  color: var(--irg-sf-text);
  font-size: 15px;
  margin-bottom: 4px;
}
.irg-sf-mode span {
  display: block;
  color: var(--irg-sf-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---- Home department panel slides: graceful fallback tile when a
   panel's uploaded image is missing (this lab has none on disk at all -
   see docs/465), instead of a broken image with a caption floating over
   nothing. Real uploaded images still display normally when present -
   this only fills the gap, it doesn't replace working images. ---- */
.irg-sf-panel-fallback {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(160deg, #171c26, #0d1016);
  border: 1px solid var(--irg-sf-line);
}
.irg-sf-panel-fallback .irg-sf-panel-ico { font-size: 34px; line-height: 1; opacity: .9; }
.irg-sf-panel-fallback .irg-sf-panel-label {
  color: var(--irg-sf-text);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
}

/* ---- Product/category cards - representative catalog surface ---- */
.irg-sf-prodgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.irg-sf-prodcard {
  background: var(--irg-sf-panel);
  border: 1px solid var(--irg-sf-line);
  border-radius: var(--irg-sf-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .12s ease, transform .12s ease;
}
.irg-sf-prodcard:hover { border-color: #47536a; transform: translateY(-2px); }
.irg-sf-prodcard .irg-sf-prod-ph {
  height: 160px;
  background: linear-gradient(160deg, #1b212b, #12151b);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.irg-sf-prodcard .irg-sf-prod-ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.irg-sf-prodcard .irg-sf-prod-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.irg-sf-prodcard .irg-sf-prod-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.irg-sf-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .02em;
}
.irg-sf-badge.irg-sf-nr { background: rgba(52,211,153,.15); color: #6ee7b7; }
.irg-sf-badge.irg-sf-r { background: rgba(251,191,36,.15); color: #fcd34d; }
.irg-sf-badge.irg-sf-ca { background: rgba(239,68,68,.15); color: #fca5a5; }
.irg-sf-badge.irg-sf-us { background: rgba(59,130,246,.15); color: #93c5fd; }
.irg-sf-prodcard .irg-sf-prod-title {
  color: var(--irg-sf-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  flex: 1;
}
.irg-sf-prodcard .irg-sf-prod-price { color: var(--irg-sf-text); font-weight: 800; font-size: 15px; }
.irg-sf-prodcard .irg-sf-prod-price small { color: var(--irg-sf-muted); font-weight: 500; font-size: 11px; }

/* ---- Product listing cards (product.php, category.php) - representative
   catalog surface. Restyles the EXISTING .show_effectv/.primg/.prcnt_area/
   .product_btns classes in place - no markup changes, so add_cart_item()/
   add_wishlist_item()/compare-checkbox JS bindings are untouched. ---- */
.show_effectv {
  background: var(--irg-sf-panel);
  border: 1px solid var(--irg-sf-line);
  border-radius: var(--irg-sf-radius);
  margin-bottom: 20px;
  transition: border-color .12s ease, transform .12s ease;
}
.show_effectv:hover { border-color: #47536a; transform: translateY(-2px); }
.primg { background: linear-gradient(160deg, #1b212b, #12151b); border-radius: var(--irg-sf-radius) var(--irg-sf-radius) 0 0; }
.featured_text {
  background: var(--irg-sf-red) !important;
  border-radius: 4px;
  top: 8px !important;
  left: 8px !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px !important;
}
.prcnt_area { padding: 12px 14px 14px !important; }
.prcnt_area h4 a { color: var(--irg-sf-text) !important; }
.price_our.line_through { color: var(--irg-sf-muted); opacity: .8; }
.price_sale.right_main_price { color: var(--irg-sf-text); font-size: 15px; }
.product_btns .red_btn {
  background: var(--irg-sf-red);
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .02em;
}
.product_btns .red_btn:hover { background: var(--irg-sf-red2); }
.showing_result { color: var(--irg-sf-muted); font-weight: 600; }

/* ---- Catalog toolbar (result count + sort) - representative surface ---- */
.irg-sf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto 14px;
  padding: 0 20px;
}
.irg-sf-toolbar .irg-sf-count { color: var(--irg-sf-muted); font-size: 13px; font-weight: 600; }