/* ===========================================================
   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);
}
/* justify-content: space-between removed — with 5 children (mobile-toggle,
   logo, search-toggle, search, actions) it spread every one of them apart
   equally, which is what was pushing the hamburger and logo far apart on
   wide screens even though nothing else asked it to. .site-header__actions'
   own margin-left: auto below now does the "push everything after this to
   the far right" job instead, so the hamburger+logo pair can sit flush
   together on the left with nothing forcing space between them. */
.site-header__inner { position: relative; display: flex; align-items: center; gap: 1rem; padding: .65rem 0; }

/* .site-header__icon-btn is the shared base look for every icon button in
   this row (mobile-toggle, search-toggle, the account/cart/etc. icons in
   .site-header__actions) — it MUST be declared before any rule that needs
   to override its `display: flex` for a specific button (mobile-toggle,
   search-toggle below), since both selectors are equal specificity
   (single class) and CSS resolves ties by source order. Having the
   override rules earlier in the file than this one meant .icon-btn's
   `display: flex` silently won everywhere, at every screen width — the
   two "desktop-hidden" buttons were never actually hidden. */
.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); }

.site-header__mobile-toggle { display: flex; background: none; border: none; color: #fff; cursor: pointer; padding: .5rem; }
/* margin-left cancels .site-header__inner's own 1rem gap for just this one
   pair, so the hamburger and logo sit flush with zero space between them
   while every other gap in the row stays at the normal 1rem. */
.site-header__logo { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; text-decoration: none; margin-left: -1rem; }
.site-header__brand-icon { width: clamp(32px, 5vw, 40px); height: clamp(32px, 5vw, 40px); flex-shrink: 0; object-fit: contain; }
/* Custom logo (Customize -> Site Identity), e.g. a wide combined icon+
   wordmark image — constrained by height only, width auto, so it renders
   at its own real aspect ratio instead of being squeezed into the square
   box .site-header__brand-icon uses for the theme's bundled icon-only
   fallback above. */
.site-header__logo .custom-logo-link { display: flex; align-items: center; }
.site-header__logo .custom-logo { height: clamp(32px, 5vw, 40px); width: auto; max-width: 220px; object-fit: contain; }
.logo-text { color: #fff; font-size: 1.1rem; font-weight: 700; text-decoration: none; }

/* Desktop/tablet: the search bar itself stays visible and is centered in
   the header (independent of the hamburger+logo group's width on the left
   and the actions group's width on the right) via absolute positioning,
   same technique as the hamburger/logo flush-fix above. The icon-only
   toggle + collapse-to-overlay behavior below is mobile-only (media
   query) — this is NOT "search collapses to icon at every width", that
   was a misread of "center the search icon" as "collapse the search bar",
   which broke the always-visible desktop bar entirely. */
.site-header__search {
  display: flex; align-items: center; background: #fff; border-radius: 4px; overflow: hidden;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(500px, 40vw); z-index: 5;
}
.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__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; }

/* margin-left: auto pushes this — and everything after it, there's nothing
   after it — flush to the right edge, filling whatever space the
   hamburger+logo group on the left doesn't use. */
.site-header__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: auto; }

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

  /* On mobile the always-visible centered bar above has no room to sit
     inline, so it reverts to the original collapse-to-icon behavior: a
     small centered toggle button that expands the bar into a full-width
     overlay across the row (assets/js/header.js toggles .is-search-active
     on .site-header) instead of squeezing a fixed-width bar in. */
  .site-header__search-toggle { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .site-header__search {
    display: none; width: auto;
    position: absolute; inset: 0; z-index: 10;
    padding: 0 .5rem 0 1rem;
    /* The desktop rule above centers this box with left:50%;top:50% plus
       transform:translate(-50%,-50%) — transform isn't part of the inset
       shorthand, so without resetting it here it still applied on top of
       inset:0's full-width fill, shifting the whole box up and to the
       left by half its own (now much larger) size and pushing it mostly
       off-screen instead of filling the header row. */
    transform: none;
  }
  .site-header.is-search-active .site-header__search { display: flex; }
  .site-header__search-close { display: none; }
  .site-header.is-search-active .site-header__search-close { 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; }

  .search-input { font-size: .85rem; padding: .4rem .6rem; }
  /* order: 3 — must be higher than the hamburger's (1) and logo's (2)
     above. Without an explicit order here this defaulted to 0, the
     initial value, which put the wishlist/cart/account icons BEFORE the
     hamburger and logo instead of after them. */
  .site-header__actions { order: 3; 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. */