/* ----------------------------------------------------
THEME VARIABLES
---------------------------------------------------- */
:root{
--bg:#0a0a0b;        /* page background (near black) */
--surface:#111215;   /* cards/surfaces */
--border:#1f2024;    /* subtle borders */
--text:#f1f1f1;      /* main text */
--muted:#a3a6ad;     /* secondary text */
--red:#e41320;       /* primary red */
--red-700:#b80f19;   /* darker red (hover) */
}

.bg-danger{ background-color:var(--red) !important; }
/* ----------------------------------------------------
BASE
---------------------------------------------------- */
html,body{ height:100%; background:var(--bg); color:var(--text); }
a{ color:var(--red); text-decoration:none; }
a:hover:not(.btn):not(.navbar a:hover){ color:var(--red); text-decoration:none; }
.muted{ color:var(--muted); }
.shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.35); }

.navbar{
background: linear-gradient(90deg, #6b0f1a 0%, #b9131a 50%, #e41320 100%);
border-bottom: none;
box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.navbar .navbar-brand{ font-weight:800; letter-spacing:.5px; color:#fff; }
.navbar .nav-link{ color:#fff; }
.navbar .nav-link:hover,
.navbar .nav-item.active .nav-link{
background: rgba(255,255,255,.15);
border-radius:.25rem;
color:#fff;
}
.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, .8);
}

/* Cart button (black for contrast on red navbar) */
.navbar .btn-cart{
background:#000; border:1px solid #000; color:#fff;
}
.navbar .btn-cart:hover{
background:#1a1a1a; border-color:var(--red); color:#fff;
}




/* Sidebar card */
.sidebar .card-surface{
background:var(--surface);
border:1px solid var(--border);
border-radius:.6rem;
box-shadow:0 .25rem .75rem rgba(0,0,0,.15);
}

/* Section title */
.sidebar .section-title{
color:#fff; font:800 .9rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
text-transform:uppercase; letter-spacing:.06em;
margin-bottom:.75rem; padding-left:.5rem; border-left:4px solid var(--red);
}

/* Category trigger */
.sidebar a[data-bs-toggle="collapse"]{
display:flex; justify-content:space-between; align-items:center; gap:.5rem;
padding:.6rem .6rem; border-radius:.5rem; min-height:44px;
color:#dfe1e6; text-decoration:none; cursor:pointer;
transition:background-color .15s ease, color .15s ease;
}
.sidebar a[data-bs-toggle="collapse"]:hover{ background:rgba(227,27,35,.10); color:#fff; }
.sidebar a[data-bs-toggle="collapse"]:focus-visible{ outline:0; box-shadow:0 0 0 .2rem rgba(227,27,35,.35); }

/* Expanded state */
.sidebar a[aria-expanded="true"]{ background:rgba(227,27,35,.14); color:#fff; font-weight:600; }

/* Caret (use <i class="fa fa-angle-down"> on the right) */
.sidebar a[data-bs-toggle="collapse"] .fa-angle-down{
font-size:14px; margin-inline-start:.35rem; transition:transform .2s ease;
}
.sidebar a[aria-expanded="true"] .fa-angle-down{ transform:rotate(180deg); }

/* Submenu */
.sidebar .list-group{ margin:.25rem 0 .5rem; }
.sidebar .list-group-item{ background:transparent; border:0; padding:.15rem .45rem; }
.sidebar .list-group-item a{
display:block; color:#cfcfcf; font-size:.92rem; padding:.2rem 0 .2rem .4rem; text-decoration:none;
border-radius:.35rem; transition:color .15s ease, background-color .15s ease;
}
.sidebar .list-group-item a:hover,
.sidebar .list-group-item a:focus{ color:#fff; background:rgba(255,255,255,.04); }
.sidebar .list-group-item a.active{ color:#fff; font-weight:600; background:rgba(227,27,35,.18); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.sidebar a[data-bs-toggle="collapse"],
.sidebar a[data-bs-toggle="collapse"] .fa-angle-down{ transition:none; }
}


/* ----------------------------------------------------
FOOTER (variation B reddish/maroon)
---------------------------------------------------- */
.site-footer.footer-b{
background: linear-gradient(180deg, #1a0b0c 0%, #0b0c0f 100%);
border-top: 4px solid var(--red);
color: #e5e5e5;
}
.footer-b h5, .footer-b h6{ color: var(--red); letter-spacing:.03em; }
.footer-b a{ color:#f2f2f2; transition: color .2s; }
.footer-b a:hover{ color:#ff4d4d; text-decoration:none; }

.footer-b .footer-sub{
background:#1a0b0c;
border-top:1px solid #2a2a2d;
color:#d8d8d8;
}

/* Newsletter input */
.footer-b input.form-control{
background:#111215; border:1px solid #2a2a2d; color:#eee;
}
.footer-b input.form-control::placeholder{ color:#888; }
.footer-b input.form-control:focus{
border-color: var(--red);
box-shadow: none;
}

/* Divider in footer quick links row */
.footer-b hr{ border-color: var(--border); }

/* Mobile sticky CTA bar (global) */
.sticky-cta{
position: fixed; left:0; right:0; bottom:0; z-index:1030;
background:#000; border-top:1px solid var(--border); padding:.5rem 2.25rem;
display:none; align-items:center; justify-content:space-between;
}
.sticky-cta .text{ color:#ddd; font-size:.95rem; }
@media (max-width: 575.98px){ .sticky-cta{ display:flex; } }

/* ====== Legacy banner vibes (No.1 + Factory Seal) ====== */
.hero-badges .ribbon-badge{
display:inline-block;
background: linear-gradient(180deg, #2a2a2d 0%, #1a1b1f 100%);
border:1px solid var(--border);
border-left:6px solid var(--red);
padding:.4rem .75rem;
border-radius:.35rem;
color:#fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.3);
}
.ribbon-badge .line-1{
font-size:1.05rem; font-weight:800; letter-spacing:.02em; display:block;
}
.ribbon-badge .line-1 strong{ color:var(--red); }
.ribbon-badge .line-2{
display:block; font-size:.8rem; color:#ffdbdb; letter-spacing:.08em;
}

/* factory seal image (optional) */
.factory-seal{
height:72px; width:auto;
filter: drop-shadow(0 3px 10px rgba(0,0,0,.45));
image-rendering: -webkit-optimize-contrast;
}

/* ====== “Made in the U.S.A.” tag anchored in hero ====== */
.usa-mark{
position: absolute;
right: .5rem; bottom: .5rem;
display: inline-flex; align-items: center;
background: rgba(0,0,0,.75);
border: 1px solid var(--border);
padding: .35rem .55rem;
border-radius: 999px;
backdrop-filter: saturate(120%) blur(2px);
}
.usa-flag{
width:22px; height:14px; margin-right:.45rem;
background:
	linear-gradient(#b22234 0 0) top/100% 100%,
	repeating-linear-gradient(#b22234 0 14.285%, #fff 14.285% 28.57%) top/100% 100%;
/* blue canton */
position: relative; display:inline-block; border-radius:2px; overflow:hidden;
}
.usa-flag::before{
content:""; position:absolute; left:0; top:0; width:40%; height:50%;
background:#3c3b6e;
}
.usa-label{
font-size:.8rem; letter-spacing:.06em; color:#f1f1f1;
}

/* responsive placement so tags never clash with content */
@media (max-width: 991.98px){
.factory-seal{ height:48px; }
.usa-mark{ right:.25rem; bottom:.25rem; transform: scale(.95); }
}
@media (max-width: 575.98px){
.hero-badges .ribbon-badge{
	padding:.3rem .55rem;
}
.ribbon-badge .line-1{ font-size:.95rem; }
.ribbon-badge .line-2{ font-size:.72rem; }
/*.factory-seal{ display:none !important; }*/  /* keep hero clean on phones */
.usa-mark{ transform: scale(.9); }
}


.products-wrap{ background: var(--bg); color: var(--text); }
.products-wrap .page-intro{ border-bottom: 1px solid var(--border); }
.products-grid .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.products-grid .card:hover{ transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.35); border-color: #22242a; }
.products-grid .card-title a{ color: var(--text); }
.products-grid .card-text{ color: var(--muted); }

/* Bigger, more premium imagery with fixed-height box + contain (no crop) */
.product-img-wrap{
  position: relative; height: 260px; overflow: hidden;
  border-bottom: 1px solid var(--border); background: #000;
  display: flex; align-items: center; justify-content: center;
}
.product-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit: contain; display:block; }

/* Badge with brand red */
.product-badge{
  position: absolute; top: .75rem; left: .75rem;
  background: var(--red); color: #fff; padding: .35rem .6rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-radius: .5rem;
}
.product-card-body{ padding: 1.1rem 1.1rem 1rem 1.1rem; }
.product-price{ color: #fff; font-weight: 600; font-size: 1.00rem; }

/* Brand buttons */
.btn-brand{ --btn-bg: var(--red); --btn-bg-hover: var(--red-700); background: var(--btn-bg); border-color: var(--btn-bg); color:#fff; }
.btn-brand:hover, .btn-brand:focus{ background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color:#fff; }
.btn-outline-ghost{ border: 1px solid var(--border); color: var(--text); background: transparent; }
.btn-outline-ghost:hover{ border-color: #2b2d33; background: #15171b; color: #fff; }

/* ===== Dark theme alert overrides ===== */

.alert-success {
  background-color: color-mix(in srgb, var(--surface) 90%, #28a745);
  border: 1px solid color-mix(in srgb, #28a745 60%, var(--border));
  color: #b6f0c1;
}

.alert-danger,
.alert-error {
  background-color: color-mix(in srgb, var(--surface) 90%, var(--red));
  border: 1px solid color-mix(in srgb, var(--red) 70%, var(--border));
  color: #ffb3b8;
}

.alert-warning {
  background-color: color-mix(in srgb, var(--surface) 90%, #ffc107);
  border: 1px solid color-mix(in srgb, #ffc107 60%, var(--border));
  color: #ffeeb2;
}

.alert-info {
  background-color: color-mix(in srgb, var(--surface) 90%, #0dcaf0);
  border: 1px solid color-mix(in srgb, #0dcaf0 60%, var(--border));
  color: #b8ebff;
}

/* Slight transparency and rounded corners for subtle depth */
.alert {
  border-radius: .5rem;
  backdrop-filter: blur(6px);
}

/* Make placeholders readable on dark background */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--muted);           /* lighter gray tone */
  opacity: 0.85;                 /* make it more visible */
}

/* Vendor-prefixed fallbacks */
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder {
  color: var(--muted);
  opacity: 0.85;
}
.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.form-control, .form-select {
  background-color: rgba(255,255,255,0.04) !important; /* subtle dark fill */
  background: rgba(255,255,255,0.04) !important; /* subtle dark fill */
  color: var(--muted);
  border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: var(--red);
  box-shadow: 0 0 0 .2rem rgba(228,19,32,.25);
  color: var(--text);
}

/* Dark theme for select menus */
.form-select {
  background-color: rgba(255,255,255,0.04); /* subtle dark fill */
  color: var(--muted);
  border-color: var(--border);
}

/* Ensure focus uses your red accent */
.form-select:focus {
  background-color: rgba(255,255,255,0.06);
  border-color: var(--red);
  box-shadow: 0 0 0 .2rem rgba(228,19,32,.25);
  color: var(--text);
  outline: none; box-shadow: 0 0 0 .25rem rgba(228, 19, 32, .25); border-color: var(--red);
}

/* Darken the dropdown list (for browsers that support styling <option>) */
.form-select option {
  background-color: var(--surface);
  color: var(--text);
}

/* When an option is hovered or selected */
.form-select option:checked,
.form-select option:hover {
  background-color: var(--red);
  color: #fff;
}




/* Section heading that fits your theme */
.section-title {
  color: var(--text);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.15;
}

/* Subtle red accent bar under the title */
.section-title--underline {
  position: relative;
  display: inline-block;
}
.section-title--underline::after {
  content: "";
  display: block;
  height: 3px;
  width: 72px;              /* tweak if you want longer/shorter */
  margin: .5rem auto 0;     /* centers under the text */
  background: var(--red);
  border-radius: 999px;
}

/* Optional small kicker line above the title */
.kicker {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .8rem;
  margin-bottom: .25rem;
}

.backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 11, 0.6);
    backdrop-filter: blur(6px);
}

.btn-danger{
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
}
.btn-danger:hover{
  background: var(--red-700);
  border-color: var(--red-700);
  color: #fff;
}