/* =========================================================
   SPCA BRAND CSS (COMPLETE)
   - Put this in: public/assets/customer/css/spca.css
   - Ensure it loads on ALL customer pages
   ========================================================= */


/* ===== Header base guarantee (prevents “disappearing”) ===== */
.menu-style-4,
.menu-style-4 header,
.menu-style-4 .navbar-container,
.menu-style-4 .navbar-sidebar-4,
.menu-style-4 .main-navbar,
.menu-style-4 .menu-top-area{
  display:block;
  visibility: visible;
  opacity: 1;
}

.menu-style-4{
  position: relative;
  z-index: 1200; /* header above page content */
  background: #fff;
}

.menu-style-4 .navbar-search{
  position: relative;
}

#search-results.search-results-container{
  position: absolute;
  z-index: 2000 !important;
}


/* ===== SPCA brand ===== */
:root{
  --spca-red: #8C1A1D;        /* main brand red */
  --spca-red-700:#741417;     /* hover/darker */
  --spca-charcoal:#2E2E30;    /* headings/nav text */
  --spca-ink:#111214;         /* super dark accents */
  --spca-gray:#6E6F73;        /* secondary text */
  --spca-border:#E7E7EA;      /* subtle borders */
  --spca-soft:#F6F7F8;        /* soft backgrounds */

  /* If Bootstrap exists, set its primary tokens */
  --bs-primary: #8C1A1D;
  --bs-primary-rgb: 140,26,29;
  --bs-link-color: #8C1A1D;
  --bs-link-hover-color: #741417;
}


/* ========== Base and header ========== */
body{ color:var(--spca-charcoal); }
a{ color:var(--spca-charcoal); }
a:hover{ color:var(--spca-red); }

.menu-top-area{
  border-bottom:1px solid var(--spca-border);
  padding:6px 0;
}

.menu-top-link li a{
  color:var(--spca-gray) !important;
  font-weight:500;
}
.menu-top-link li a:hover{ color:var(--spca-red) !important; }

.menu-style-4 .main-navbar{
  border-top:none;
  border-bottom:1px solid var(--spca-border);
  background:#fff;
}

/* Desktop horizontal nav */
.main-menu-horizontal > li > a{
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.02em;
  padding:18px 16px;
  border-radius:12px;
  transition:all .18s ease;
}
.main-menu-horizontal > li > a:hover,
.main-menu-horizontal > li > a:focus{
  color:#fff !important;
  background:var(--spca-red);
}
.main-menu-horizontal > li > a.is-active,
.main-menu-horizontal > li > a.active,
.main-menu-horizontal > li > a[aria-current="page"]{
  background:var(--spca-red) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(140,26,29,.25);
}
.main-menu-horizontal > li > a:focus-visible{
  outline:3px solid rgba(140,26,29,.35);
  outline-offset:2px;
}
.menu-style-4 .main-navbar .main-menu-horizontal li:hover > a {
  background-color: var(--spca-red);
  color: #fff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32);
}

/* Burger bars */
.menu-toggle .toggle-icon{ background:var(--spca-charcoal) !important; }

/* Dropdowns */
.dropdown-menu{
  border:1px solid var(--spca-border);
  border-top:3px solid var(--spca-red);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* ========== Brand logo visibility (fix) ========== */
.brand-logo img{ display:block; line-height:0; }

/* Hide round mark on desktop/tablet, show only on phones */
.brand-logo .brand-logo-full{ display:inline-block !important; height:66px; }
.brand-logo .brand-logo-mark{ display:none !important; height:34px; }

@media (max-width: 991.98px){
  .brand-logo .brand-logo-full{ height:56px; }
}
@media (max-width: 575.98px){
  .brand-logo .brand-logo-full{ display:none !important; }
  .brand-logo .brand-logo-mark{ display:inline-block !important; }
}

/* Optional tiny mark next to hamburger (if present) */
.brand-mobile img{ height:28px; display:block; }


/* ========== Search (and live-search colors to brand) ========== */
.navbar-search .search-input input{
  height:42px;
  border:1px solid var(--spca-border);
  border-radius:12px 0 0 12px;
  padding:10px 12px;
}
.navbar-search .search-input input:focus{
  outline:none;
  border-color:var(--spca-red);
  box-shadow:0 0 0 3px rgba(140,26,29,.12);
}
.navbar-search .search-btn button{
  height:42px; min-width:46px;
  border-radius:0 12px 12px 0;
  border:1px solid var(--spca-red);
  background:var(--spca-red); color:#fff;
}
.navbar-search .search-btn button:hover{ background:var(--spca-red-700); }

.search-results-container{
  width: 100%;
  left: 0;
  top: 100%;
  background:#fff;
  border:1px solid var(--spca-border);
  border-top: none;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  max-height: 380px;
  overflow-y: auto;
  border-radius: 0 0 12px 12px;
}

/* Override header inline greens/blues */
.navbar-search .search-results-container .search-result-details .price{
  color:var(--spca-red) !important;
}

/* ========== Live search row styling (clickable + branded) ========== */
html body .navbar-search .search-results-container{
  pointer-events: auto !important;   /* in case theme disabled it */
  z-index: 2000;                     /* sit above other UI */
}

html body .navbar-search .search-results-container .search-result-item{
  padding: 10px 12px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-left: 3px solid transparent;
  transition: background-color .15s ease, box-shadow .15s ease,
              transform .12s ease, border-left-color .15s ease;
}

html body .navbar-search .search-results-container .search-result-item:hover,
html body .navbar-search .search-results-container .search-result-item:focus,
html body .navbar-search .search-results-container .search-result-item:focus-visible,
html body .navbar-search .search-results-container .search-result-item:focus-within{
  background: var(--spca-soft) !important;
  border-left-color: var(--spca-red) !important;
  box-shadow: 0 6px 16px rgba(17,18,20,.10);
  transform: translateX(2px);
}

/* brand the product name on hover/focus */
html body .navbar-search .search-results-container .search-result-item:hover .search-result-details .name,
html body .navbar-search .search-results-container .search-result-item:focus-within .search-result-details .name{
  color: var(--spca-red) !important;
}

/* Enforce scroll + layering */
html body #search-results.search-results-container{
  max-height: 380px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: 2000 !important;
}


/* Cart badge bubble */
.navbar-cart .icon, .navbar-cart i{ color:var(--spca-charcoal); }
.cart-badge,.badge-cart,.cart-count{
  background:var(--spca-red)!important; color:#fff!important; box-shadow:0 2px 6px rgba(140,26,29,.3);
}


/* ========== Buttons / utilities ========== */
.text-primary   { color:#8C1A1D !important; }
.bg-primary     { background-color:#8C1A1D !important; }
.border-primary { border-color:#8C1A1D !important; }
.badge.bg-primary,
.badge.text-bg-primary{ background-color:#8C1A1D !important; color:#fff !important; }

html body .btn.btn-primary,
html body a.btn.btn-primary,
html body button.btn.btn-primary,
html body .main-btn.primary-btn,
html body a.main-btn.primary-btn,
html body button.main-btn.primary-btn {
  background:#8C1A1D !important;
  background-image:none !important;
  border-color:#8C1A1D !important;
  color:#fff !important;
}
html body .btn.btn-primary:hover,
html body a.btn.btn-primary:hover,
html body button.btn.btn-primary:hover,
html body .main-btn.primary-btn:hover,
html body a.main-btn.primary-btn:hover,
html body button.main-btn.primary-btn:hover {
  background:#741417 !important;
  border-color:#741417 !important;
}
html body .btn.btn-primary:focus,
html body .main-btn.primary-btn:focus {
  box-shadow:0 0 0 .25rem rgba(140,26,29,.25) !important;
}
.btn-outline-primary{
  color:var(--spca-red);
  border-color:var(--spca-red);
}
.btn-outline-primary:hover{
  background:var(--spca-red);
  color:#fff;
}

/* Promo modal primary */
#promo-popup .btn.btn-primary{
  background:var(--spca-red);
  border-color:var(--spca-red);
}
#promo-popup h3{ color:var(--spca-charcoal); }

/* Preloader */
.spinner-circle{ background:var(--spca-red) !important; }

/* Utilities */
.brand-red{ color:var(--spca-red) !important; }
.bg-soft{ background:var(--spca-soft) !important; }
.border-soft{ border-color:var(--spca-border) !important; }


/* ========== Product grid branding ========== */
#product-grid .price,
#product-grid .product-price,
#product-grid [data-role="price"]{
  color: var(--spca-red) !important;
  font-weight: 800;
}

html body .add-to-cart,
html body .add-to-cart.btn,
html body .product-card .add-to-cart,
html body #product-grid .add-to-cart,
html body .product-actions .add-to-cart,
#product-grid .btn-primary,
#product-grid .main-btn.primary-btn {
  background: var(--spca-red) !important;
  border-color: var(--spca-red) !important;
  color: #fff !important;
}
html body .add-to-cart:hover,
#product-grid .btn-primary:hover,
#product-grid .main-btn.primary-btn:hover{
  background: var(--spca-red-700) !important;
  border-color: var(--spca-red-700) !important;
}
#product-grid .btn i,
#product-grid .main-btn i,
.add-to-cart i { color:#fff !important; }


/* Filters */
#filters-wrapper .platform-check input[type="checkbox"],
#filters-wrapper .brand-checkbox { accent-color: var(--spca-red); }
#filters-wrapper input[type="checkbox"]:checked + label {
  color: var(--spca-red) !important;
  font-weight: 700;
}
#filters-wrapper .main-count{
  background: var(--spca-soft);
  border: 1px solid var(--spca-border);
  color: var(--spca-charcoal);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .82rem;
  font-weight: 700;
}
#filters-wrapper input[type="checkbox"]:checked ~ .main-count{
  background: var(--spca-red);
  border-color: var(--spca-red);
  color: #fff;
}

/* Infinite loader ring */
#infinite-scroll-trigger #loader::before{
  border-color: var(--spca-red) !important;
  border-top-color: transparent !important;
}


/* ========== Category / Mega menu (color overrides) ========== */

/* Close (X) toggle button when menu is open */
html body .menu-style-4 .main-navbar .navbar-menu .navbar-menu-toggle .menu-toggle.active{
  background-color: var(--spca-red) !important;
  border-color: var(--spca-red) !important;
  background-image: none !important;
  box-shadow: 0 6px 14px rgba(140,26,29,.25) !important;
}
html body .menu-style-4 .main-navbar .navbar-menu .navbar-menu-toggle .menu-toggle.active:hover{
  background-color: var(--spca-red-700) !important;
  border-color: var(--spca-red-700) !important;
}
html body .menu-style-4 .main-navbar .navbar-menu .navbar-menu-toggle .menu-toggle.active .toggle-icon{
  background:#fff !important; /* make the "X" bars white */
}

/* Left column list hover/active */
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li:hover > a,
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li > a:hover,
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li:focus-within > a,
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li > a:focus,
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li > a.active,
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li > a[aria-current="page"],
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li.active > a {
  background-color: var(--spca-red) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--spca-red) !important;
  box-shadow: 0 8px 16px rgba(140,26,29,.20) !important;
}
/* Neutral resting state */
html body .menu-style-4 .main-navbar .navbar-menu .main-menu li > a {
  color: var(--spca-charcoal) !important;
}

/* Collapse triggers (closed vs open) */
html body .menu-style-4 #menuVertical4-1 a[data-bs-toggle="collapse"].collapsed{
  background: transparent !important;
  background-image: none !important;
  color: var(--spca-charcoal) !important;
  border-color: transparent !important;
}
html body .menu-style-4 #menuVertical4-1 a[data-bs-toggle="collapse"]:not(.collapsed),
html body .menu-style-4 #menuVertical4-1 a[data-bs-toggle="collapse"][aria-expanded="true"]{
  background: var(--spca-red) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--spca-red) !important;
  box-shadow: 0 8px 16px rgba(140,26,29,.20) !important;
}

/* Chevron/icon color */
html body .menu-style-4 #menuVertical4-1 a[data-bs-toggle="collapse"].collapsed i{
  color: var(--spca-red) !important;
}
html body .menu-style-4 #menuVertical4-1 a[data-bs-toggle="collapse"]:not(.collapsed) i,
html body .menu-style-4 #menuVertical4-1 a[data-bs-toggle="collapse"][aria-expanded="true"] i{
  color: #fff !important;
}

/* Right column title chip */
html body .menu-style-4 #menuVertical4-1 .submenu-title,
html body .menu-style-4 #menuVertical4-1 .category-title,
html body .menu-style-4 #menuVertical4-1 .menu-title,
html body .menu-style-4 #menuVertical4-1 .title-badge,
html body .menu-style-4 #menuVertical4-1 .title-chip{
  background: var(--spca-red) !important;
  background-image: none !important;
  border-color: var(--spca-red) !important;
  color:#fff !important;
}

/* Right-side arrows */
html body .menu-style-4 #menuVertical4-1 .menu-arrow,
html body .menu-style-4 #menuVertical4-1 .mdi-chevron-right,
html body .menu-style-4 #menuVertical4-1 .lni-chevron-right,
html body .menu-style-4 #menuVertical4-1 li.has-children > a::after{
  color: var(--spca-red) !important;
  border-color: var(--spca-red) !important;
}
html body .menu-style-4 #menuVertical4-1 li.active > a .menu-arrow,
html body .menu-style-4 #menuVertical4-1 li > a:hover .menu-arrow{
  color:#fff !important; border-color:#fff !important;
}

/* Close/X inside panel (if there is a separate control inside) */
html body #menuVertical4-1 .btn-close,
html body #menuVertical4-1 .close,
html body #menuVertical4-1 .close-menu,
html body .navbar-sidebar-4 .btn-close,
html body .navbar-sidebar-4 .close-menu{
  background: var(--spca-red) !important;
  border-color: var(--spca-red) !important;
  color:#fff !important;
  box-shadow: 0 6px 14px rgba(140,26,29,.25) !important;
}
html body #menuVertical4-1 .btn-close i,
html body #menuVertical4-1 .close i,
html body .navbar-sidebar-4 .close-menu i { color:#fff !important; }


/* ========== Breadcrumb ========== */
.breadcrumb-wrapper {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-left:30px;
}

.breadcrumb {
  margin-bottom: 0;
  --bs-breadcrumb-divider: '›';
  font-size: 0.95rem;
}

.breadcrumb a {
  color: #6c757d;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}


/* =========================================================
   SPCA Header Enhancements (scoped)
   - apply only when header has class "spca-nav"
   ========================================================= */

.spca-nav .menu-top-area{
  position: relative;
  background: linear-gradient(180deg, rgba(46,46,48,.06), rgba(46,46,48,0));
  overflow:hidden;
}

/* slim red accent like the email header */
.spca-nav .menu-top-area::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background: var(--spca-red);
}

/* angled dark block like email header */
.spca-nav .menu-top-area::before{
  content:"";
  position:absolute;
  top:-30px; right:-120px;
  width: 380px; height: 120px;
  background: linear-gradient(135deg, #2E2E30, #1f2022);
  transform: skewX(-20deg);
  opacity: .95;
  pointer-events:none;
}

/* keep content above the angled background */
.spca-nav .menu-top-area *{
  position: relative;
  z-index: 2;
}

/* modern logo sizing */
.spca-nav .brand-logo-full{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.08));
}

/* Make Products toggle a primary pill control */
.spca-nav .navbar-menu-toggle .menu-toggle{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.spca-nav .navbar-menu-toggle .menu-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  border-color: rgba(140,26,29,.28);
}

/* When open */
.spca-nav .navbar-menu-toggle .menu-toggle[aria-expanded="true"]{
  background: var(--spca-red) !important;
  border-color: var(--spca-red) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(140,26,29,.20);
}
.spca-nav .navbar-menu-toggle .menu-toggle[aria-expanded="true"] i{
  color:#fff !important;
}
.spca-nav .navbar-menu-toggle .menu-toggle[aria-expanded="true"] .toggle-icon{
  background:#fff !important;
}

/* Search: soften into pill ends */
.spca-nav .navbar-search .search-input input{
  border-radius: 999px 0 0 999px;
}
.spca-nav .navbar-search .search-btn button{
  border-radius: 0 999px 999px 0;
}

/* Better spacing on large screens */
@media (min-width: 992px){
  .spca-nav .navbar-search-cart{
    gap: 10px;
  }
}

/* =========================================================
   SPCA Modern Branding Add-on (paste at END of spca.css)
   Requires: <header class="menu-style-4 ... spca-nav">
   ========================================================= */

/* 1) Give the whole header a modern “floating card” feel */
.spca-nav{
  box-shadow: 0 14px 34px rgba(17,18,20,.08);
}

/* Keep content above page sections */
.spca-nav{
  position: relative;
  z-index: 1500;
}

/* 2) Make the top area feel like the email header: more height + clean spacing */
.spca-nav .menu-top-area{
  padding: 14px 0; /* bigger top bar */
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Red accent line (stronger & cleaner) */
.spca-nav .menu-top-area::after{
  height: 4px;
  opacity: 1;
}

/* 3) Bigger logo + responsive sizing */
.spca-nav .brand-logo{
  padding: 4px 0;
}

/* Increase logo size on desktop */
.spca-nav .brand-logo .brand-logo-full{
  height: 78px !important;   /* bigger logo */
  width: auto;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 991.98px){
  .spca-nav .brand-logo .brand-logo-full{
    height: 62px !important;
  }
}

/* Phone */
@media (max-width: 575.98px){
  .spca-nav .brand-logo .brand-logo-full{
    height: 54px !important;
  }
}

/* 4) Add a branded separator line “under the logo zone” (looks premium) */
.spca-nav .logo{
  position: relative;
  padding-bottom: 10px;
}
.spca-nav .logo::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--spca-red), transparent);
  opacity: .9;
}

/* On desktop align the line slightly left with logo (optional) */
@media (min-width: 992px){
  .spca-nav .logo::after{
    left: 0;
    transform: none;
    width: 260px;
  }
}

/* 5) Make the top links look more “premium” */
.spca-nav .menu-top-link li a{
  font-weight: 700;
  letter-spacing: .01em;
}

/* 6) Make the Products button feel like a real primary control */
.spca-nav .navbar-menu-toggle .menu-toggle{
  padding: 12px 16px;
  border-radius: 999px;
}

/* 7) Slightly tighten the main navbar spacing to match the bigger top area */
.spca-nav .main-navbar{
  padding: 10px 0;
}

/* 8) Optional: modernize desktop menu pills a bit (no behavior changes) */
.spca-nav .main-menu-horizontal > li > a{
  border-radius: 999px;
  padding: 14px 16px;
}

/* =========================================================
   FIX TOP RIGHT GREY BLOCK + USER DROPDOWN (paste LAST)
   ========================================================= */

/* 1) REMOVE the angled grey branding block completely */
header.menu-style-4.spca-nav .menu-top-area::before{
  content: none !important;
  display: none !important;
}

/* Keep only a clean top bar background */
header.menu-style-4.spca-nav .menu-top-area{
  background: #fff !important;
  overflow: visible !important;
}

/* Keep the red accent line (optional) */
header.menu-style-4.spca-nav .menu-top-area::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-1px !important;
  height:4px !important;
  background: var(--spca-red) !important;
  opacity: 1 !important;
}

/* 2) FIX top right area text/icon colors (no “washed out” look) */
header.menu-style-4.spca-nav .menu-top-right .menu-top-link a,
header.menu-style-4.spca-nav .menu-top-right .nav-link{
  color: var(--spca-charcoal) !important;
  font-weight: 700 !important;
}
header.menu-style-4.spca-nav .menu-top-right .menu-top-link a:hover,
header.menu-style-4.spca-nav .menu-top-right .nav-link:hover{
  color: var(--spca-red) !important;
}

/* 3) MAKE dropdown appear under user, with correct z-index and clean styling */
header.menu-style-4.spca-nav .menu-top-right{
  position: relative !important;
  z-index: 3001 !important; /* above the header background and lines */
}

header.menu-style-4.spca-nav .menu-top-right .dropdown-menu{
  z-index: 4000 !important;
  border: 1px solid var(--spca-border) !important;
  border-top: 3px solid var(--spca-red) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.14) !important;
  border-radius: 14px !important;
  overflow: hidden;
  min-width: 220px;
  margin-top: 10px !important; /* spacing under the user */
}

/* Dropdown items clean + brand hover */
header.menu-style-4.spca-nav .menu-top-right .dropdown-menu .dropdown-item{
  font-weight: 700;
  color: var(--spca-charcoal) !important;
  padding: 10px 14px;
}
header.menu-style-4.spca-nav .menu-top-right .dropdown-menu .dropdown-item:hover,
header.menu-style-4.spca-nav .menu-top-right .dropdown-menu .dropdown-item:focus{
  background: rgba(140,26,29,.10) !important;
  color: var(--spca-red) !important;
}

/* Divider softer */
header.menu-style-4.spca-nav .menu-top-right .dropdown-divider{
  margin: 6px 0;
  opacity: .15;
}

/* 4) Ensure nothing in header overlaps dropdown */
header.menu-style-4.spca-nav,
header.menu-style-4.spca-nav .navbar-container{
  overflow: visible !important;
}

/* 5) Optional: remove the faint center line under logo if you don't want it */
header.menu-style-4.spca-nav .logo::after{
  opacity: .35; /* or set to 0 to hide completely */
}
/* --- Topbar only (no other header parts affected) --- */
.spca-nav .spca-topbar{
  justify-content: flex-start;   /* stop centering logo */
  gap: 18px;
  padding: 10px 0;
}

.spca-nav .spca-logo{
  flex: 0 0 auto;
}

.spca-nav .spca-logo .brand-logo-full{
  display: block;
  height: 56px;                 /* bigger on desktop */
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

/* Mobile: keep logo visible and avoid wrapping weird */
@media (max-width: 991.98px){
  .spca-nav .spca-topbar{
    gap: 10px;
  }
  .spca-nav .spca-logo .brand-logo-full{
    height: 46px;               /* still big on portrait */
    max-width: 210px;
  }

  /* keep right links from pushing logo away */
  .spca-nav .menu-top-right .menu-top-link{
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
/* =========================================================
   FINAL MOBILE NAV FIX (paste LAST in spca.css)
   - ensures: logo visible + Products button visible + categories collapse shows
   ========================================================= */

@media (max-width: 991.98px){

  /* 1) Hide desktop topbar on mobile */
  .spca-nav .menu-top-area{ display:none !important; }

  /* 2) Mobile logo must always show (your spca.css was hiding it on phones) */
  .spca-nav .spca-mobile-logo{ display:inline-flex !important; align-items:center; }
  .spca-nav .spca-mobile-logo-img{
    display:block !important;
    height:42px !important;
    width:auto !important;
    max-width:180px !important;
    object-fit:contain !important;
  }

  /* ALSO: stop the theme rule that hides full logo on phones (in case it affects other places) */
  .spca-nav .brand-logo .brand-logo-full{ display:inline-block !important; }
  .spca-nav .brand-logo .brand-logo-mark{ display:none !important; }

  /* 3) The toggle row must be ONE line */
  .spca-nav .navbar-menu-toggle{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin:10px 0 8px !important;
    flex-wrap:nowrap !important;
  }

  /* right-side actions */
  .spca-nav .spca-mobile-actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex:0 0 auto !important;
  }

  /* 4) FORCE Products button visible (theme often sets .menu-toggle{display:none} on mobile) */
  .spca-nav #toggle-menu-4.menu-toggle{
    display:inline-flex !important;
    align-items:center !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* make Products + Menu look like buttons */
  .spca-nav #toggle-menu-4.menu-toggle,
  .spca-nav .navbar-menu-toggle .btn{
    border-radius:12px !important;
    padding:10px 12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.14) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.06) !important;
  }

  /* 5) Categories UL: force it to appear when opened */
  .spca-nav #menuVertical4-1{ display:none !important; }
  .spca-nav #menuVertical4-1.show{
    display:block !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:12px !important;
    padding:10px !important;
    margin:8px 0 0 !important;
    box-shadow:0 10px 30px rgba(0,0,0,.08) !important;
  }

  /* Ensure inner collapses render */
  .spca-nav #menuVertical4-1 .collapse.show{ display:block !important; }

  /* mobile-friendly list look */
  .spca-nav #menuVertical4-1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 12px !important;
    border-radius:10px !important;
    font-weight:800 !important;
    color:rgba(33,37,41,.92) !important;
    text-decoration:none !important;
  }
  .spca-nav #menuVertical4-1 > li > a:hover{ background:rgba(0,0,0,.04) !important; }

  /* remove menu image on mobile */
  .spca-nav #menuVertical4-1 .menu-image{ display:none !important; }

  /* 6) Search row stays full width */
  .spca-nav .navbar-search-cart{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-top:10px !important;
    padding-bottom:8px !important;
  }
  .spca-nav .navbar-search{ flex:1 1 auto !important; min-width:0 !important; }
}
/* =========================================================
   MOBILE: FIX Products button going out of screen (paste LAST)
   ========================================================= */
@media (max-width: 991.98px){

  /* make sure header containers don't clip / shift children */
  .spca-nav,
  .spca-nav .navbar-container,
  .spca-nav .navbar-sidebar-4,
  .spca-nav .main-navbar,
  .spca-nav .navbar-menu{
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* kill any absolute/negative positioning from theme */
  .spca-nav .navbar-menu-toggle,
  .spca-nav .navbar-menu-toggle *{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* force the toggle row to be the FIRST visible row */
  .spca-nav .navbar-menu-toggle{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 10px 0 8px !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  /* ensure the actions sit inside the row (not offscreen) */
  .spca-nav .spca-mobile-actions{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  /* Products button MUST be visible and not shifted */
  .spca-nav #toggle-menu-4.menu-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* optional: reduce height so it always fits */
  .spca-nav #toggle-menu-4.menu-toggle,
  .spca-nav .navbar-menu-toggle .btn{
    padding: 9px 12px !important;
  }
}
/* ===== End SPCA CSS ===== */