/* ===========================================================
   Spacivo — Header & Footer styles
   Redesigned to a single persistent header (announcement bar + main row +
   always-visible category row) per a supplied mockup, replacing the
   earlier 3-bar system (site-header + JS-toggled compact-nav + an
   independently-sticky sticky-nav) that caused an overlap bug. There is
   now only one `position: sticky` element in this whole area, so that bug
   class can't recur. Colors use var(--color-accent) (falls back to the
   original hardcoded #72192D) so Customizer changes apply.
   =========================================================== */

.announcement-bar-simple {
  background: #1a1a1a; color: #fff; text-align: center;
  font-size: .8rem; letter-spacing: .02em; padding: .5rem 1rem;
}

/* --- Header: main row + category row, sticky as one unit --- */
.site-header {
  background-color: var(--color-accent, #72192D);
  position: sticky; top: 0; z-index: 100;
  width: 100%; overflow-x: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.site-header__inner { position: relative; display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .65rem 0; }
.site-header__mobile-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: .5rem; }
.site-header__logo { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.site-header__brand-icon { width: clamp(32px, 5vw, 40px); height: clamp(32px, 5vw, 40px); flex-shrink: 0; object-fit: contain; }
.logo-text { color: #fff; font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.site-header__search { flex: 1; max-width: 500px; display: flex; align-items: center; background: #fff; border-radius: 4px; overflow: hidden; }
.search-input { flex: 1; border: none; padding: .4rem .75rem; font-size: .9rem; color: #2A211D; outline: none; }
.search-input::placeholder { color: #4A4640; }
.search-btn { background: none; border: none; padding: .4rem .75rem; cursor: pointer; color: var(--color-accent, #72192D); display: flex; align-items: center; justify-content: center; }
.site-header__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Search icon-only toggle + in-panel close button — both desktop-hidden;
   the search bar itself stays always-visible on desktop/tablet, this pair
   only comes into play at the mobile breakpoint below. */
.site-header__search-toggle { display: none; }
.site-header__search-close { display: none; background: none; border: none; color: #2A211D; cursor: pointer; padding: .4rem .6rem; align-items: center; justify-content: center; flex-shrink: 0; }
.site-header__icon-btn {
  background: none; border: none; color: #fff; cursor: pointer; padding: .3rem;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
  transition: background .2s ease, opacity .2s ease; position: relative;
}
.site-header__icon-btn:hover { background: rgba(255,255,255,.12); }

@media (max-width: 1024px) {
  .site-header__search { max-width: 320px; }
}

@media (max-width: 750px) {
  .site-header__inner { gap: .25rem; flex-wrap: nowrap; }
  .site-header__mobile-toggle { display: flex; order: 1; flex-shrink: 0; padding: .35rem; margin-right: -.1rem; }
  .site-header__logo { order: 3; flex-shrink: 0; margin-left: 0; }
  .logo-text { display: inline; font-size: clamp(.85rem, 4vw, 1.1rem); white-space: nowrap; }

  /* Search collapses to just the icon button; tapping it expands
     .site-header__search into a full-width overlay covering the row
     (assets/js/header.js toggles .is-search-active on .site-header and
     focuses the input) instead of the input sitting inline and cramping
     everything else, matching the reference request. Ordered right after
     the hamburger (order: 2, before the logo at order: 3) rather than
     after it, per request — desktop visibility is unaffected, it's still
     display:none outside this mobile breakpoint (rule above). */
  .site-header__search-toggle { display: flex; order: 2; flex-shrink: 0; }
  .site-header__search {
    display: none; order: 5;
    position: absolute; inset: 0; z-index: 10; max-width: none;
    padding: 0 .5rem 0 1rem;
  }
  .site-header.is-search-active .site-header__search { display: flex; }
  .site-header.is-search-active .site-header__mobile-toggle,
  .site-header.is-search-active .site-header__logo,
  .site-header.is-search-active .site-header__search-toggle,
  .site-header.is-search-active .site-header__actions { visibility: hidden; }
  .site-header__search-close { display: flex; }

  .search-input { font-size: .85rem; padding: .4rem .6rem; }
  .site-header__actions { order: 4; flex-shrink: 0; gap: .1rem; }
  .site-header__icon-btn { padding: .25rem; }
  /* Drop the Call icon on mobile — matches the mockup's 4-icon mobile row
     (Become Dealer, Bulk Orders, Cart, Account) vs 5 on web/tablet. */
  .site-header__icon-btn--call { display: none; }
}

/* --- Mobile drawer (side nav overlay) --- */
.mobile-drawer { position: fixed; inset: 0; z-index: 1000; display: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; backdrop-filter: blur(0); }
.mobile-drawer.is-active { display: flex; opacity: 1; visibility: visible; backdrop-filter: blur(4px); }
.mobile-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); cursor: pointer; transition: background .3s ease; }
.mobile-drawer.is-active .mobile-drawer__overlay { background: rgba(0,0,0,.7); }
.mobile-drawer__content {
  position: relative; width: var(--drawer-width, 85%); max-width: var(--drawer-max-width, 400px); height: 100%;
  background: var(--drawer-bg, #fff); display: flex; flex-direction: column; overflow-y: auto; will-change: transform;
  box-shadow: 4px 0 20px rgba(0,0,0,.3);
}
.mobile-drawer__content::-webkit-scrollbar { width: 2px; }
.mobile-drawer__content::-webkit-scrollbar-track { background: transparent; }
.mobile-drawer__content::-webkit-scrollbar-thumb { background: #D6CFC5; border-radius: 1px; }
.mobile-drawer.is-active .mobile-drawer__content { animation: sidenav-slide-in var(--drawer-duration, .4s) cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes sidenav-slide-in {
  0% { transform: translateX(-100%); opacity: 0; }
  1% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
.mobile-drawer__account { padding: .75rem 1rem; border-bottom: 1px solid #f0f0f0; position: relative; }
.mobile-drawer__close { display: none; }
.account-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-right: 1rem; }
.account-item, .location-item { display: flex; flex-direction: column; gap: .25rem; }
.account-icon { width: 32px; height: 32px; min-width: 32px; }
.location-icon { width: 24px; height: 24px; min-width: 24px; }
.location-info { display: flex; flex-direction: column; gap: .1rem; }
.account-info h3, .location-info h3 { margin: 0; font-size: .9rem; color: var(--drawer-text-color, #2A211D); font-weight: 600; }
.account-link { color: var(--drawer-accent-color, #72192D); text-decoration: none; font-weight: 600; font-size: .85rem; }
.location-code { margin: 0; font-size: .8rem; color: var(--drawer-accent-color, #72192D); font-weight: 500; }
.mobile-drawer__quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 1rem; border-bottom: 1px solid #f0f0f0; }
.quick-link { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none; color: #2A211D; padding: .75rem .5rem; background: #f5f5f5; border-radius: 8px; font-size: .8rem; font-weight: 600; transition: background .2s; }
.quick-link:active { background: #e8e8e8; }
.quick-link-icon { width: 24px; height: 24px; }
/* position:relative so .cart-count (position:absolute, theme.css) anchors
   to the icon itself rather than the whole column-stacked .quick-link. */
.quick-link-icon-wrap { position: relative; display: inline-flex; }
.mobile-drawer__menu { flex: 1; display: flex; flex-direction: column; }
.mobile-menu-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; color: var(--drawer-text-color, #2A211D); text-decoration: none; border: none; border-bottom: 1px solid #f5f5f5; font-weight: 500; font-size: .95rem; transition: background .2s; background: transparent; cursor: pointer; text-align: left; font-family: inherit; }
.mobile-menu-item:active { background: #f5f5f5; }
.menu-icon { width: 20px; height: 20px; min-width: 24px; }
.mobile-menu-item span:not(.menu-icon) { flex: 1; }
.new-badge { background: #E85D5D; color: #fff; padding: .25rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; }

/* WhatsApp floating button now lives in footer.php as .whatsapp-chat,
   styled to match .ivo-chat__toggle and stacked directly above it
   (assets/css/homepage-sections.css) — see that file for the current
   implementation. */

/* Footer styles now live entirely in the spacivo-footer plugin
   (assets/css/footer.css) — removed from here to avoid duplicate/
   conflicting rules for the same elements. */