/* ═══════════════════════════════════════════════════
   PUQX THEME OVERRIDES
   Loaded after theme.css via layout.phtml
   Brand: Navy #0a1628 · Red #c8102e · Font: Barlow
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ── Root vars ── */
:root {
  --puqx-navy:    #0a1628;
  --puqx-navy2:   #112240;
  --puqx-red:     #c8102e;
  --puqx-red-h:   #a50d25;
  --puqx-silver:  #c8cdd6;
  --puqx-ice:     #e8f4fc;
  --puqx-border:  #1e3455;
}

/* ── Global font ── */
body, .form-control, .form-select, .btn, .nav-link, p, td, th, li {
  font-family: 'Barlow', sans-serif !important;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.card-title, .listing-title,
.navbar-brand, .site-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════
   HEADER
   ══════════════════════════════════ */
header {
  background: var(--puqx-navy) !important;
  border-bottom: 3px solid var(--puqx-red) !important;
}

/* Top utility bar */
header .desktop-navbar .top-navbar {
  background: #060e1a !important;
  height: 38px;
  border-bottom: 1px solid var(--puqx-border) !important;
}

header .desktop-navbar .top-navbar .nav-link {
  color: #8a9bb8 !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 16px !important;
  transition: color 0.15s;
}
header .desktop-navbar .top-navbar .nav-link:hover { color: #fff !important; }
header .desktop-navbar .top-navbar .nav-item + .nav-item {
  border-left: 1px solid var(--puqx-border) !important;
}

/* Main navbar (logo + search + account) */
header .desktop-navbar .main-navbar {
  background: var(--puqx-navy) !important;
  border-bottom: 1px solid var(--puqx-border) !important;
  padding: 16px 0 !important;
}

/* Logo sizing */
header .desktop-navbar .main-navbar .logo {
  max-width: 200px !important;
}

/* Search bar */
header .desktop-navbar .main-navbar .search input.form-control {
  background: #112240 !important;
  border: 1px solid var(--puqx-border) !important;
  color: #fff !important;
  border-radius: 4px 0 0 4px !important;
}
header .desktop-navbar .main-navbar .search input.form-control::placeholder { color: #6b7f9e !important; }
header .desktop-navbar .main-navbar .search input.form-control:focus {
  background: #1a3055 !important;
  border-color: var(--puqx-red) !important;
  box-shadow: none !important;
}
header .desktop-navbar .main-navbar .search select.form-select {
  background: #112240 !important;
  border: 1px solid var(--puqx-border) !important;
  border-left: 1px solid #1e3a5f !important;
  color: #8a9bb8 !important;
}
header .desktop-navbar .main-navbar .search .btn-primary {
  background: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 0 16px !important;
}
header .desktop-navbar .main-navbar .search .btn-primary:hover {
  background: var(--puqx-red-h) !important;
  border-color: var(--puqx-red-h) !important;
}

/* My Account area */
header .desktop-navbar .main-navbar .my-account small,
header .desktop-navbar .main-navbar .my-account .btn-dropdown {
  color: #c8d8ea !important;
}
header .desktop-navbar .main-navbar .my-account::before,
header .desktop-navbar .main-navbar .cart-dropdown::before {
  background-color: var(--puqx-border) !important;
}
header .desktop-navbar .main-navbar .my-account .dropdown-menu,
header .desktop-navbar .main-navbar .cart-dropdown .dropdown-menu {
  background: var(--puqx-navy2) !important;
  border: 1px solid var(--puqx-border) !important;
}
header .desktop-navbar .main-navbar .my-account .dropdown-menu .dropdown-item,
header .desktop-navbar .main-navbar .cart-dropdown .dropdown-menu .dropdown-item {
  color: #c8d8ea !important;
}
header .desktop-navbar .main-navbar .my-account .dropdown-menu .dropdown-item:hover {
  background: rgba(200,16,46,0.15) !important;
  color: #fff !important;
}

/* Wish list / cart buttons */
header .btn-wishlist,
header .desktop-navbar .main-navbar .au-cart-dropdown .btn {
  background: transparent !important;
  color: #8a9bb8 !important;
  border: 1px solid var(--puqx-border) !important;
  border-radius: 4px !important;
  transition: all 0.15s;
}
header .btn-wishlist:hover,
header .desktop-navbar .main-navbar .au-cart-dropdown .btn:hover {
  background: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
  color: #fff !important;
}

/* Category / links navbar */
header .desktop-navbar .links-navbar {
  background: var(--puqx-navy2) !important;
  border-bottom: 1px solid var(--puqx-border) !important;
  padding: 0 !important;
}
header .desktop-navbar .links-navbar .nav-link {
  color: #a8b8d0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-right: 1px solid var(--puqx-border);
  transition: background 0.15s, color 0.15s;
}
header .desktop-navbar .links-navbar .nav-link:hover,
header .desktop-navbar .links-navbar .nav-link.active {
  background: var(--puqx-red) !important;
  color: #fff !important;
}
/* Category dropdown menus */
header .desktop-navbar .links-navbar .dropdown-menu {
  background: var(--puqx-navy2) !important;
  border: 1px solid var(--puqx-border) !important;
  border-top: 2px solid var(--puqx-red) !important;
}
header .desktop-navbar .links-navbar .dropdown-menu .dropdown-item {
  color: #c8d8ea !important;
  font-size: 13px;
}
header .desktop-navbar .links-navbar .dropdown-menu .dropdown-item:hover {
  background: rgba(200,16,46,0.2) !important;
  color: #fff !important;
}

/* ── Mobile navbar ── */
header .mobile-navbar {
  background: var(--puqx-navy) !important;
  border-bottom: 3px solid var(--puqx-red) !important;
}
header .mobile-navbar .navbar {
  background: var(--puqx-navy) !important;
}
header .mobile-navbar .navbar button {
  color: #fff !important;
  border: none !important;
  background: transparent !important;
  font-size: 26px;
}
header .mobile-navbar .search-field input {
  background: #112240 !important;
  border-color: var(--puqx-border) !important;
  color: #fff !important;
}
header .mobile-navbar #mobileHeaderMenu {
  background: #060e1a !important;
  border-top: 1px solid var(--puqx-border);
}
header .mobile-navbar #mobileHeaderMenu .nav-link {
  color: #a8b8d0 !important;
  border-bottom: 1px solid var(--puqx-border);
  padding: 10px 0 !important;
}
header .mobile-navbar #mobileHeaderMenu .nav-link:hover { color: var(--puqx-red) !important; }

/* ══════════════════════════════════
   ANNOUNCEMENTS BAR
   ══════════════════════════════════ */
header .desktop-navbar .top-navbar .announcements p {
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
header .desktop-navbar .top-navbar .announcements a { color: var(--puqx-red) !important; }

/* ══════════════════════════════════
   BUTTONS
   ══════════════════════════════════ */
.btn-primary {
  background-color: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--puqx-red-h) !important;
  border-color: var(--puqx-red-h) !important;
}
.btn-outline-primary {
  color: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
}
.btn-outline-primary:hover {
  background-color: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
  color: #fff !important;
}

/* ══════════════════════════════════
   CARDS (listing cards)
   ══════════════════════════════════ */
.card {
  border-radius: 6px !important;
  border-color: #dde3ec !important;
  transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover {
  box-shadow: 0 4px 20px rgba(10,22,40,0.12) !important;
  transform: translateY(-2px);
}
.card-title a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--puqx-navy) !important;
}
.card-title a:hover { color: var(--puqx-red) !important; }

/* Price styling */
.listing-price, .price, [class*="price"] {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  color: var(--puqx-red) !important;
  font-size: 18px !important;
}

/* ══════════════════════════════════
   PAGE HEADINGS
   ══════════════════════════════════ */
h1 { font-size: clamp(24px, 4vw, 40px) !important; }
h2 { font-size: clamp(20px, 3vw, 30px) !important; }
h3 { font-size: clamp(16px, 2.5vw, 22px) !important; }

.section-title, .headline h1, .headline h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--puqx-navy) !important;
}

/* ══════════════════════════════════
   SIDEBAR
   ══════════════════════════════════ */
.sidebar-menu .sidebar-heading a { color: var(--puqx-navy) !important; }
.sidebar-menu .nav-link.active { color: var(--puqx-red) !important; }
.sidebar-menu .nav-item > a:hover { color: var(--puqx-red) !important; }

/* ══════════════════════════════════
   LINKS
   ══════════════════════════════════ */
a { color: var(--puqx-navy); transition: color 0.15s; }
a:hover { color: var(--puqx-red); }
.nav-link { color: var(--puqx-navy) !important; }

/* ══════════════════════════════════
   FOOTER
   ══════════════════════════════════ */
footer {
  background: var(--puqx-navy) !important;
  border-top: 3px solid var(--puqx-red) !important;
  color: #a8b8d0 !important;
  margin-top: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 24px !important;
}

footer .footer-links h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--puqx-border) !important;
}

footer .footer-links a:not(.btn) {
  color: #8a9bb8 !important;
  font-size: 13px !important;
  transition: color 0.15s;
}
footer .footer-links a:not(.btn):hover { color: var(--puqx-red) !important; }

footer .second-row {
  border-top: 1px solid var(--puqx-border) !important;
}
footer .footer-links.footer-links-horizontal .nav-link {
  color: #6b7f9e !important;
  font-size: 12px !important;
}
footer .footer-links.footer-links-horizontal .nav-link:hover { color: var(--puqx-red) !important; }

footer .copyright-message {
  border-top: 1px solid var(--puqx-border) !important;
  color: #4a5a72 !important;
}
footer .copyright-message a { color: #6b7f9e !important; }

footer .newsletter-subscription-box {
  background: #112240 !important;
  border: 1px solid var(--puqx-border) !important;
  border-radius: 6px !important;
}
footer .newsletter-subscription-box label,
footer .newsletter-subscription-box h4 { color: #fff !important; }
footer .newsletter-subscription-box input.form-control {
  background: #0a1628 !important;
  border-color: var(--puqx-border) !important;
  color: #fff !important;
}

/* ══════════════════════════════════
   BODY / BACKGROUND
   ══════════════════════════════════ */
body.light, body.dark {
  background-color: #f4f7fb !important;
}

/* ══════════════════════════════════
   HOME PAGE LISTING SECTION HEADERS
   ══════════════════════════════════ */
.home-page .section-headline,
.home-page h2.headline {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--puqx-navy) !important;
  border-left: 4px solid var(--puqx-red);
  padding-left: 12px;
  margin-bottom: 20px !important;
}

/* ══════════════════════════════════
   BADGES & LABELS
   ══════════════════════════════════ */
.badge.bg-primary { background-color: var(--puqx-red) !important; }
.badge.bg-secondary { background-color: var(--puqx-navy) !important; }

/* Featured badge */
.badge-featured, .listing-featured {
  background: var(--puqx-red) !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* ══════════════════════════════════
   PAGINATION
   ══════════════════════════════════ */
.page-link { color: var(--puqx-navy) !important; }
.page-item.active .page-link {
  background-color: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
  color: #fff !important;
}

/* ══════════════════════════════════
   FORMS
   ══════════════════════════════════ */
.form-control:focus, .form-select:focus {
  border-color: var(--puqx-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(200,16,46,.15) !important;
}

/* ══════════════════════════════════
   SIGN-IN DROPDOWN — readability fixes
   ══════════════════════════════════ */

/* "Sign In" heading */
header .my-account .dropdown-menu .headline,
header .my-account .dropdown-menu h4,
header .my-account .dropdown-menu h5,
header .my-account .dropdown-menu .form-sign-in h4,
header .my-account .dropdown-menu .form-sign-in h5 {
  color: #fff !important;
  border-bottom-color: var(--puqx-border) !important;
}

/* Input labels inside dropdown */
header .my-account .dropdown-menu label,
header .my-account .dropdown-menu .form-label {
  color: #a8b8d0 !important;
}

/* Inputs inside dropdown */
header .my-account .dropdown-menu .form-control,
header .my-account .dropdown-menu .form-sign-in input {
  background: #0a1628 !important;
  border-color: var(--puqx-border) !important;
  color: #fff !important;
}
header .my-account .dropdown-menu .form-control:focus {
  border-color: var(--puqx-red) !important;
  box-shadow: 0 0 0 0.15rem rgba(200,16,46,.2) !important;
}
header .my-account .dropdown-menu .form-control::placeholder { color: #4a5a72 !important; }

/* "Forgot username or forgot password?" links */
header .my-account .dropdown-menu a,
header .my-account .dropdown-menu .form-sign-in a,
header .my-account .dropdown-menu small a {
  color: #6a9fd8 !important;
}
header .my-account .dropdown-menu a:hover,
header .my-account .dropdown-menu .form-sign-in a:hover {
  color: var(--puqx-red) !important;
  text-decoration: underline !important;
}

/* Muted/small text ("No Account? Create one") */
header .my-account .dropdown-menu small,
header .my-account .dropdown-menu .text-muted {
  color: #6b7f9e !important;
}
header .my-account .dropdown-menu small a { color: #6a9fd8 !important; }

/* "Remember me" checkbox label */
header .my-account .dropdown-menu .form-check-label { color: #a8b8d0 !important; }
header .my-account .dropdown-menu .form-check-input {
  background-color: #112240 !important;
  border-color: var(--puqx-border) !important;
}
header .my-account .dropdown-menu .form-check-input:checked {
  background-color: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
}

/* ══════════════════════════════════
   "No Account? Create one." button fix
   ══════════════════════════════════ */
header .my-account .dropdown-menu .btn,
header .my-account .dropdown-menu .btn-primary,
header .my-account .dropdown-menu .btn-secondary,
header .my-account .dropdown-menu a.btn {
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* Sign In submit button - red */
header .my-account .dropdown-menu .btn-primary,
header .my-account .dropdown-menu input[type="submit"],
header .my-account .dropdown-menu button[type="submit"] {
  background: var(--puqx-red) !important;
  border-color: var(--puqx-red) !important;
  color: #fff !important;
}
header .my-account .dropdown-menu .btn-primary:hover {
  background: var(--puqx-red-h) !important;
  border-color: var(--puqx-red-h) !important;
}

/* "No Account? Create one." - outline style so it's clearly secondary */
header .my-account .dropdown-menu .btn:not(.btn-primary),
header .my-account .dropdown-menu a.btn:not(.btn-primary) {
  background: transparent !important;
  border: 1.5px solid var(--puqx-border) !important;
  color: #a8b8d0 !important;
}
header .my-account .dropdown-menu .btn:not(.btn-primary):hover,
header .my-account .dropdown-menu a.btn:not(.btn-primary):hover {
  border-color: var(--puqx-red) !important;
  color: #fff !important;
  background: rgba(200,16,46,0.15) !important;
}