/*
 Theme Name:   Fans
 Theme URI:    https://route62.fans
 Description:  Fans Child Theme for Shoptimizer
 Author:       Fans
 Author URI:   https://route62.fans
 Template:     shoptimizer
 Version:      1.0.9
 Text Domain:  fans-child
*/

/* ============================================================
   SECTION 1: BRAND COLOUR VARIABLES
   Source: Extracted directly from site logo assets
   ============================================================ */

:root {
  /* Core brand colours — from logo */
  --fans-rust:       #C4521A;   /* "ROUTE 62" lettering — primary CTA colour */
  --fans-sage:       #6B7F5E;   /* Heart illustration — secondary accent */
  --fans-dark:       #1A0E08;   /* Deep dark — body text, nav links, headings */
  --fans-light:      #FAF6F0;   /* Warm white — page background, header, card bg */

  /* Derived supporting palette */
  --fans-rust-hover: #A3420E;   /* Darkened rust for button hover states */
  --fans-rust-light: #F0D5C4;   /* Very light rust for sale badges, highlights */
  --fans-sage-dark:  #4E5E46;   /* Darker sage for hover, verified vendor tick */
  --fans-sage-light: #D4DDCF;   /* Light sage for category tag backgrounds */
  --fans-sand:       #C8955A;   /* Warm sandstone — vendor name, subtext accents */
  --fans-clay:       #E8DDD0;   /* Borders, dividers, input field backgrounds */
  --fans-mid:        #7A6055;   /* Mid-tone for secondary body text */

  /* Semantic / functional aliases */
  --fans-primary:    var(--fans-rust);
  --fans-secondary:  var(--fans-sage);
  --fans-text:       var(--fans-dark);
  --fans-bg:         var(--fans-light);
  --fans-border:     var(--fans-clay);
  --fans-success:    var(--fans-sage-dark);
  --fans-warning:    #D4860A;
  --fans-error:      #C0392B;

  /* Typography scale — mobile first */
  --fans-font-heading: 'Playfair Display', Georgia, serif;
  --fans-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fans-text-xs:    13px;
  --fans-text-sm:    15px;
  --fans-text-base:  16px;
  --fans-text-lg:    18px;
  --fans-text-xl:    22px;
  --fans-text-2xl:   28px;
  --fans-text-3xl:   34px;

  /* Spacing */
  --fans-radius:     8px;
  --fans-radius-lg:  14px;
  --fans-shadow:     0 2px 8px rgba(26,14,8,0.10);
  --fans-shadow-lg:  0 4px 20px rgba(26,14,8,0.15);
}


/* ============================================================
   SECTION 2: GOOGLE FONTS
   Loaded via wp_enqueue_style in inc/branding.php with preconnect
   hints. This is faster than @import because the browser can
   discover and fetch the font stylesheet in parallel with style.css
   rather than waiting for style.css to finish parsing first.
   ============================================================ */


/* ============================================================
   SECTION 3: BASE TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-base);
  color: var(--fans-text);
  background-color: var(--fans-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fans-font-heading);
  color: var(--fans-dark);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: var(--fans-text-2xl); }
h2 { font-size: var(--fans-text-xl); }
h3 { font-size: var(--fans-text-lg); }
h4 { font-size: var(--fans-text-base); }

p {
  font-size: var(--fans-text-base);
  line-height: 1.6;
  color: var(--fans-text);
}

a {
  color: var(--fans-rust);
  text-decoration: none;
}

a:hover {
  color: var(--fans-rust-hover);
  text-decoration: underline;
}

small, .small-text {
  font-size: var(--fans-text-xs);
  line-height: 1.5;
}


/* ============================================================
   SECTION 4: SHOPTIMIZER COLOUR OVERRIDES
   Maps brand variables to Shoptimizer's CSS selectors
   Note: Base colours now set via Customizer (fans-export.dat)
   ============================================================ */

/* --- Primary buttons (Add to Cart, Checkout, etc.) --- */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.comgurus-stickybar__button,
.single_add_to_cart_button {
  background-color: var(--fans-rust) !important;
  color: var(--fans-light) !important;
  border-color: var(--fans-rust) !important;
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--fans-radius);
  padding: 14px 24px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover {
  background-color: var(--fans-rust-hover) !important;
  border-color: var(--fans-rust-hover) !important;
  transform: translateY(-1px);
}

/* Active/press state */
.button:active,
.single_add_to_cart_button:active {
  transform: translateY(0);
}

/* --- Secondary / outline buttons --- */
.button.secondary,
.woocommerce .button.secondary,
.woocommerce a.button.outlined {
  background-color: transparent !important;
  color: var(--fans-rust) !important;
  border: 2px solid var(--fans-rust) !important;
}

.button.secondary:hover {
  background-color: var(--fans-rust) !important;
  color: var(--fans-light) !important;
}

/* --- Site header background & shadow (no border — border is on inner rows) --- */
.site-header,
#masthead,
.comgurus-header {
  background-color: var(--fans-light) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(196,82,26,0.08);
}

/* 3px dashed sage — full-width separator below logo row.
   Uses ::after with 100vw to break out of col-full's max-width container. */
#masthead .col-full,
.site-header .col-full,
.comgurus-header .col-full {
  position: relative;
  border-bottom: none;
}

#masthead .col-full::after,
.site-header .col-full::after,
.comgurus-header .col-full::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  border-bottom: 3px dashed var(--fans-sage);
  pointer-events: none;
}

.site-header a,
#masthead a,
.site-header .site-title a {
  color: var(--fans-dark) !important;
}

.site-header a:hover {
  color: var(--fans-rust) !important;
}

/* --- Logo: mobile fallback (centred) — overridden on desktop in Section 10 --- */
.site-header .site-branding,
#masthead .site-branding,
.site-header .shoptimizer-logo-mark,
.shoptimizer-logo-mark,
.site-header .site-logo,
#masthead .site-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.site-header .site-title,
#masthead .site-title,
.site-header .custom-logo-link,
#masthead .custom-logo-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.site-header .custom-logo,
#masthead .custom-logo,
.custom-logo {
  margin: 0 auto !important;
}

/* Site description (tagline) hidden globally — shown on desktop only in Section 10 */
.site-description {
  display: none;
}

/* --- Navigation background (all wrappers) --- */
#site-navigation,
#shoptimizer-navigation,
.shoptimizer-primary-navigation,
.navigation-wrapper,
.header-navigation,
.nav-wrapper,
.main-navigation,
.primary-navigation,
nav.main-navigation,
header nav,
.site-header nav,
#masthead nav {
  background-color: var(--fans-light) !important;
}

/* --- Nav bottom border — desktop only (width override breaks Shoptimizer's mobile
   off-screen hiding which uses a fixed pixel offset, not a percentage).
   Excluded on checkout: distraction-free checkout hides .col-full-nav's only
   child, leaving an empty row whose border duplicated the header's dashed
   separator right above it. --- */
@media (min-width: 992px) {
  body:not(.woocommerce-checkout) .col-full-nav {
    border-bottom: 2px dashed var(--fans-sage) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Primary nav links — dark text on light background */
#site-navigation a,
#shoptimizer-navigation a,
.shoptimizer-primary-navigation a,
.navigation-wrapper a,
.main-navigation a,
.primary-navigation a {
  color: var(--fans-dark) !important;
  font-family: var(--fans-font-body) !important;
  font-size: var(--fans-text-sm) !important;
  font-weight: 500 !important;
}

/* Active + hover states */
#site-navigation a:hover,
#shoptimizer-navigation a:hover,
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--fans-rust) !important;
}

/* Active page underline indicator */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  border-bottom: 2px solid var(--fans-rust) !important;
}

/* --- Top utility / secondary nav bar --- */
.shoptimizer-header-top,
.header-top,
.secondary-navigation,
.top-navigation,
.comgurus-header-top,
#secondary-navigation {
  background-color: var(--fans-clay) !important;
  border-bottom: 1px solid rgba(196,82,26,0.15) !important;
}

.shoptimizer-header-top a,
.header-top a,
.secondary-navigation a,
.top-navigation a,
.comgurus-header-top a,
#secondary-navigation a {
  color: var(--fans-dark) !important;
  font-family: var(--fans-font-body) !important;
  font-size: var(--fans-text-xs) !important;
  font-weight: 500 !important;
}

.shoptimizer-header-top a:hover,
.header-top a:hover,
.secondary-navigation a:hover,
.comgurus-header-top a:hover {
  color: var(--fans-rust) !important;
}

/* Dropdown menus — keep dark for strong contrast when open */
.main-navigation .sub-menu,
#site-navigation .sub-menu {
  background-color: var(--fans-dark) !important;
  border-top: 2px solid var(--fans-rust) !important;
  box-shadow: var(--fans-shadow-lg) !important;
}

.main-navigation .sub-menu a,
#site-navigation .sub-menu a {
  color: var(--fans-light) !important;
  border-bottom: 1px solid rgba(232,221,208,0.1) !important;
}

.main-navigation .sub-menu a:hover,
#site-navigation .sub-menu a:hover {
  color: var(--fans-sand) !important;
  background-color: rgba(196,82,26,0.2) !important;
}

/* --- Promo / announcement bar (CommerceKit) --- */
.comgurus-promo-bar,
.ck-promo-bar {
  background-color: var(--fans-rust);
  color: var(--fans-light);
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-xs);
  font-weight: 500;
}

/* --- Product cards ---
   Ported from wp-content/themes/kambron12/style.css Section 9 — the
   proven card/grid treatment from that child theme (lift-on-hover,
   flush rounded image, fixed-height CTA, responsive CSS grid).
   Values mapped from --kb-* to --fans-* equivalents. */
.product,
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--fans-clay);
  border-radius: var(--fans-radius-lg);
  overflow: hidden;
  box-shadow: var(--fans-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.product:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: var(--fans-shadow-lg);
  transform: translateY(-5px);
}

/* Product image — flush to card top with rounded corners */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: block;
  overflow: hidden;
  border-radius: var(--fans-radius-lg) var(--fans-radius-lg) 0 0;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-sm);
  font-weight: 600;
  color: var(--fans-dark);
  line-height: 1.4;
  padding: 1.4rem 1.4rem 0.5rem;
}

.woocommerce ul.products li.product .price {
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-lg);
  color: var(--fans-rust);
  font-weight: 700;
  padding: 0 1.4rem 0.75rem;
}

.woocommerce ul.products li.product .price del {
  color: var(--fans-mid);
  font-size: var(--fans-text-sm);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1.4rem 1.4rem;
  width: calc(100% - 2.8rem);
  height: 40px;
  padding: 0 22px !important;
  line-height: normal;
  text-align: center;
  box-sizing: border-box;
}

/* --- Sale / badge labels --- */
.onsale,
.woocommerce span.onsale {
  background-color: var(--fans-sage);
  color: var(--fans-light);
  border-radius: 4px;
  font-size: var(--fans-text-xs);
  font-weight: 600;
  font-family: var(--fans-font-body);
}

/* Responsive product grid: 4 col desktop / 3 col tablet / 2 col mobile
   (mirrors kambron12's grid — CSS grid instead of Shoptimizer's floats) */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

@media (max-width: 991px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }
}

/* --- Star ratings --- */
.star-rating span::before,
.woocommerce .star-rating span::before {
  color: var(--fans-rust);
}

/* --- Sticky product bar (Shoptimizer feature) --- */
.comgurus-stickybar {
  background-color: var(--fans-light);
  border-top: 3px solid var(--fans-rust);
  border-bottom: 1px solid var(--fans-clay);
  box-shadow: 0 -2px 12px rgba(26,14,8,0.08);
}

.comgurus-stickybar .comgurus-stickybar__title {
  color: var(--fans-dark);
  font-family: var(--fans-font-body);
  font-weight: 500;
}

.comgurus-stickybar .price {
  color: var(--fans-rust);
  font-family: var(--fans-font-heading);
  font-weight: 700;
}

/* --- Trust badges area (below Add to Cart) --- */
.comgurus-trust-badges,
.ck-trust-badges {
  border-top: 1px solid var(--fans-clay);
  padding-top: 12px;
  margin-top: 16px;
}

.comgurus-trust-badges img {
  filter: saturate(0.7) sepia(0.2);
  opacity: 0.85;
}

/* --- Breadcrumbs --- */
.woocommerce-breadcrumb {
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-xs);
  color: var(--fans-mid);
}

.woocommerce-breadcrumb a {
  color: var(--fans-rust);
}

/* --- Product tabs --- */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-sm);
  color: var(--fans-mid);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  color: var(--fans-rust);
  border-color: var(--fans-rust);
}

/* --- Input fields --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1.5px solid var(--fans-clay);
  border-radius: var(--fans-radius);
  background-color: #fff;
  color: var(--fans-dark);
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-base);
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--fans-rust);
  outline: none;
  box-shadow: 0 0 0 3px rgba(196,82,26,0.12);
}

/* --- Checkout page --- */
.woocommerce-checkout .woocommerce-checkout-payment {
  background-color: var(--fans-light);
  border: 1px solid var(--fans-clay);
  border-radius: var(--fans-radius-lg);
}

#place_order {
  background-color: var(--fans-rust) !important;
  font-size: var(--fans-text-lg);
  padding: 18px;
  width: 100%;
  border-radius: var(--fans-radius);
}

/* --- Escrow / trust notice on checkout --- */
.fans-escrow-notice {
  background-color: var(--fans-sage-light);
  border-left: 4px solid var(--fans-sage-dark);
  border-radius: var(--fans-radius);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: var(--fans-text-sm);
  color: var(--fans-sage-dark);
  font-weight: 500;
}

/* --- Footer widget area --- */
.site-footer,
#colophon,
footer.site-footer,
.footer-widgets,
.shoptimizer-footer-widgets,
.comgurus-footer-widgets {
  background-color: var(--fans-clay) !important;
  color: var(--fans-dark) !important;
  border-top: 2px dashed var(--fans-sage) !important;
}

.site-footer {
    padding: 10px !important;
    margin: 0px !important;
}

.site-footer a,
#colophon a {
  color: var(--fans-rust) !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--fans-rust-hover) !important;
  text-decoration: underline;
}

.site-footer p,
.site-footer li,
#colophon p,
#colophon li {
  color: var(--fans-dark) !important;
}

.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
#colophon .widget-title {
  color: var(--fans-dark) !important;
  font-size: var(--fans-text-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-family: var(--fans-font-body) !important;
  border-bottom: 1px solid rgba(196,82,26,0.25);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
footer.copyright {
    padding: 0px !important;
}
/* --- Copyright / bottom bar --- */
.site-info,
#colophon .site-info,
footer .site-info,
.footer-bottom,
.footer-credit,
.shoptimizer-footer-bottom,
.comgurus-footer-bottom,
.copyright-bar,
div.site-info {
  background-color: var(--fans-rust) !important;
  color: var(--fans-light) !important;
  font-family: var(--fans-font-body) !important;
  font-size: var(--fans-text-xs) !important;
  padding: 12px 20px !important;
  text-align: center !important;
  border-top: none !important;
}

.site-info a,
#colophon .site-info a,
footer .site-info a,
.footer-credit a,
.shoptimizer-footer-bottom a,
div.site-info a {
  color: var(--fans-light) !important;
  text-decoration: underline;
  opacity: 0.9;
}

.site-info a:hover,
#colophon .site-info a:hover {
  opacity: 1;
}


/* ============================================================
   SECTION 5: MOBILE-FIRST RESPONSIVE OVERRIDES
   Breakpoints: <380px (small mobile), <992px (mobile/tablet), ≥992px (desktop)
   ============================================================ */

/* --- Mobile header height & spacing --- */
@media (max-width: 991px) {

  .site-header,
  #masthead {
    padding: 0 12px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
    background-color: var(--fans-light) !important;
  }

  /* Mobile header layout: Home icon left | Logo center | Cart right */
  .site-header .col-full,
  #masthead .col-full,
  .site-header .shoptimizer-header-outer,
  .site-header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 60px !important;
  }

  /* Reset any grid layouts */
  .site-header .col-full-narrow,
  .site-header .header-widget-region {
    display: none !important;
  }

 /* Home icon - left side */
.fans-header-home-link {
  display: flex !important;
  position: relative !important;
  flex: 0 0 44px !important;  /* Same as cart touch target */
  height: 44px !important;     /* Same as cart touch target */
  width: 44px !important;      /* Same as cart touch target */
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  text-decoration: none !important;
  color: var(--fans-rust) !important;  /* --fans-rust colour */
  transition: color 0.15s ease !important;
  order: 1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.fans-header-home-link svg {
  width: 35px !important;
  height: 35px !important;
  fill: none !important;
  stroke: var(--fans-rust) !important;
  stroke-width: 1.8 !important;
  transition: fill 0.15s ease, stroke 0.15s ease !important;
}

/* Hover / active state - solid filled */
.fans-header-home-link:hover svg {
  fill: var(--fans-rust) !important;
  stroke: var(--fans-rust) !important;
}

  /* Logo container - center */
  .site-header .site-branding,
  #masthead .site-branding,
  .site-header .shoptimizer-logo-mark,
  .shoptimizer-logo-mark {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 5 !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  /* Logo link */
  .site-header .site-title,
  #masthead .site-title,
  .site-header .custom-logo-link,
  #masthead .custom-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
  }

  .site-header .site-title a,
  #masthead .site-title a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header .custom-logo,
  #masthead .custom-logo,
  .custom-logo {
    max-height: 36px !important;
    width: auto !important;
  }

  /* Per-site mobile logo (fans_logo_use_site_meta on) — fills the
     centred flex column between the 44px home icon and 44px cart
     icon at max width, capped to the 60px mobile header row height.
     Desktop-only .fans-logo-pc image is hidden here. */
  .fans-site-logo-link {
    display: flex !important;
    width: 100% !important;
    height: 56px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .fans-site-logo-link .fans-logo-mobile {
    display: block !important;
    max-width: 100% !important;
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }

  /* ⚠️ The real conflict here was our OWN earlier rule (line ~796,
     `.custom-logo { max-height: 36px !important }`), which the injected
     logo <img> also carries (it has BOTH the custom-logo class, for
     Shoptimizer/Kirki compatibility, AND fans-logo-mobile). Two
     equally-!important, single-class selectors resolve by source
     order — since the 36px rule appears first in the file it was
     losing to nothing; it was actually WINNING over a same-specificity
     later rule only when source order ties, which doesn't apply once
     we add real ancestor specificity here. */
  .fans-site-logo-link img.fans-logo-mobile {
    height: auto !important;
    max-height: 56px !important;
  }

  .fans-site-logo-link .fans-logo-pc {
    display: none !important;
  }

  /* Cart icon - right side */
  .site-header .comgurus-header-cart,
  #masthead .comgurus-header-cart,
  .site-header .site-header-cart,
  #masthead .site-header-cart,
  .header-cart {
    order: 3 !important;
    flex: 0 0 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Cart icon styling */
  .site-header .comgurus-header-cart a,
  #masthead .comgurus-header-cart a,
  .site-header .site-header-cart a,
  #masthead .site-header-cart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    color: var(--fans-dark) !important;
  }

  .site-header .comgurus-header-cart svg,
  #masthead .comgurus-header-cart svg {
    width: 22px !important;
    height: 22px !important;
  }

  .site-title {
    font-size: 16px !important;
  }

  /* Hide hamburger toggle — replaced by home icon on mobile */
  .site-header .menu-toggle,
  #masthead .menu-toggle,
  button.menu-toggle,
  .shoptimizer-primary-navigation .menu-toggle {
    display: none !important;
  }

  /* Tighten body padding */
  body {
    padding-bottom: 72px; /* Space for mobile bottom nav */
  }

  /* Full-width buttons on mobile */
  .single_add_to_cart_button,
  .woocommerce a.button.checkout-button {
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: var(--fans-text-base);
  }

  /* 2-column product grid on mobile */
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px;
  }

  /* Tighter product card padding on mobile */
  .woocommerce ul.products li.product {
    margin: 0 !important;
    padding-bottom: 12px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    padding: 8px 10px 4px;
  }

  .woocommerce ul.products li.product .price {
    font-size: 15px;
    padding: 0 10px 8px;
  }

  /* Larger touch targets for Add to Cart on cards */
  .woocommerce ul.products li.product .button {
    margin: 0 10px 10px;
    width: calc(100% - 20px);
    padding: 11px 8px;
    font-size: 12px;
  }

  /* Section headings tighter on mobile */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 17px; }

  /* Hide desktop-only sidebar on mobile product archive */
  .shoptimizer-left-sidebar,
  .shoptimizer-right-sidebar {
    display: none;
  }

  /* Full-width content on mobile */
  .shoptimizer-content-area,
  #primary {
    width: 100% !important;
    margin: 0 !important;
  }

}

/* Small phones */
@media (max-width: 380px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 8px;
  }
}


/* ============================================================
   SECTION 6: MOBILE BOTTOM NAVIGATION BAR
   Fixed 5-tab nav replacing hamburger menu on mobile
   Tabs: Home | Browse | Auctions | Pickup | Account
   ============================================================ */

.fans-bottom-nav,
.fans-header-home-link {
  display: none; /* Hidden on desktop */
}


@media (max-width: 991px) {

  body {
    padding-bottom: 72px; /* Space for bottom nav bar */
  }

  .fans-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #7A4520;
    border-top: 2px solid var(--fans-rust);
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom); /* Notch / home bar support */
    justify-content: space-around;
    align-items: center;
  }

  .fans-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--fans-clay);
    font-family: var(--fans-font-body);
    font-size: 10px;
    font-weight: 500;
    gap: 3px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .fans-bottom-nav__item svg,
  .fans-bottom-nav__item .nav-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  .fans-bottom-nav__item:hover,
  .fans-bottom-nav__item.active,
  .fans-bottom-nav__item[aria-current="page"] {
    color: var(--fans-rust);
  }

  .fans-bottom-nav__item .nav-label {
    line-height: 1;
    text-align: center;
    display: block;
    width: 100%;
  }

  /* Auction tab — sage accent to stand out */
  .fans-bottom-nav__item--auction.active,
  .fans-bottom-nav__item--auction:hover {
    color: var(--fans-sage);
  }

  /* Hide all hamburger/menu-toggle triggers on mobile */
  .comgurus-header-hamburger,
  .header-hamburger,
  .site-header .menu-toggle,
  #masthead .menu-toggle,
  button.menu-toggle,
  .site-branding button.menu-toggle,
  .shoptimizer-primary-navigation .menu-toggle {
    display: none !important;
  }

  /* col-full-nav is allowed to work as Shoptimizer's slide-out drawer on mobile.
     Width override is scoped to desktop only (Section 4) so the pixel-based
     off-screen offset works correctly at page load. */

}


/* Match Shoptimizer's exact 992px breakpoint to catch the 1px gap */
@media (max-width: 992px) {
  .site-branding button.menu-toggle,
  .main-navigation ul.menu li.menu-item-has-children span.caret,
  .col-full-nav,
  .mobile-menu.close-drawer,
  .mobile-overlay {
    display: none !important;
  }
}

/* ============================================================
   SECTION 7: ROUTE 62 CUSTOM COMPONENTS
   Reusable UI components for the marketplace
   ============================================================ */

/* --- Vendor badge / name on product cards --- */
.fans-vendor-name {
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-xs);
  color: var(--fans-sand);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 4px;
}

.fans-vendor-name .verified-tick {
  color: var(--fans-sage-dark);
  font-size: 11px;
}

/* --- Pickup / shipping availability pills --- */
.fans-avail-pills {
  display: flex;
  gap: 6px;
  padding: 0 10px 10px;
  flex-wrap: wrap;
}

.fans-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fans-font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  line-height: 1;
}

.fans-pill--pickup {
  background-color: var(--fans-sage-light);
  color: var(--fans-sage-dark);
}

.fans-pill--ship {
  background-color: var(--fans-rust-light);
  color: var(--fans-rust-hover);
}

.fans-pill--auction {
  background-color: #FEF3C7;
  color: #92400E;
}

/* --- Auction countdown timer --- */
.fans-auction-timer {
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-xs);
  font-weight: 600;
  color: var(--fans-warning);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
}

/* --- Vendor storefront header card --- */
.fans-vendor-card {
  background: #fff;
  border: 1px solid var(--fans-clay);
  border-radius: var(--fans-radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--fans-shadow);
  margin-bottom: 24px;
}

.fans-vendor-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--fans-rust);
  flex-shrink: 0;
}

.fans-vendor-card__name {
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-lg);
  color: var(--fans-dark);
  margin: 0 0 2px;
}

.fans-vendor-card__location {
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-xs);
  color: var(--fans-sand);
  font-weight: 500;
  margin: 0 0 6px;
}

.fans-vendor-card__meta {
  font-size: var(--fans-text-xs);
  color: var(--fans-mid);
}

.fans-vendor-card__meta .verified {
  color: var(--fans-sage-dark);
  font-weight: 600;
}

/* --- Section title treatment --- */
.fans-section-title {
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-xl);
  color: var(--fans-dark);
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.fans-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--fans-rust);
  border-radius: 2px;
}

/* --- WhatsApp CTA button --- */
.fans-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #25D366;
  color: #fff !important;
  padding: 12px 20px;
  border-radius: var(--fans-radius);
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.fans-whatsapp-btn:hover {
  background-color: #1DA851;
  color: #fff !important;
}

/* --- Newsletter signup block --- */
.fans-newsletter {
  background: linear-gradient(135deg, var(--fans-dark) 0%, #2C1A0E 100%);
  border-radius: var(--fans-radius-lg);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--fans-rust);
}

.fans-newsletter h3 {
  color: var(--fans-light);
  font-size: var(--fans-text-xl);
  margin-bottom: 8px;
}

.fans-newsletter p {
  color: var(--fans-clay);
  font-size: var(--fans-text-sm);
  margin-bottom: 20px;
}

.fans-newsletter .newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .fans-newsletter .newsletter-form {
    flex-direction: column;
  }
}

.fans-newsletter input[type="email"] {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid var(--fans-sand);
  color: var(--fans-light);
  border-radius: var(--fans-radius);
}

.fans-newsletter input[type="email"]::placeholder {
  color: var(--fans-clay);
}

.fans-newsletter .button {
  background-color: var(--fans-rust) !important;
  white-space: nowrap;
}


/* ============================================================
   SECTION 8: WOOCOMMERCE CHECKOUT TRUST OVERRIDES
   ============================================================ */

/* Escrow notice injected above Place Order button */
.fans-checkout-escrow {
  background: var(--fans-sage-light);
  border: 1px solid var(--fans-sage);
  border-radius: var(--fans-radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--fans-font-body);
  font-size: var(--fans-text-sm);
  color: var(--fans-sage-dark);
  font-weight: 500;
  line-height: 1.4;
}

.fans-checkout-escrow .escrow-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Distraction-free checkout (Shoptimizer feature) — maintain light header */
.comgurus-distraction-free .site-header {
  background-color: var(--fans-light);
  border-bottom: 3px solid var(--fans-rust);
}

.comgurus-checkout-logo img {
  max-height: 40px;
}


/* ============================================================
   SECTION 9: PRINT / ACCESSIBILITY
   ============================================================ */

/* Focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--fans-rust);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --fans-clay: #C0B0A0;
  }
}


/* ============================================================
   SECTION 10: DESKTOP LOGO + TAGLINE LAYOUT
   Desktop only (≥ 992px):
   - Branding block left-aligned in header
   - Logo on left, tagline text to the right of logo
   - Tagline bottom-aligns with logo (sits "below" logo centre)
   - Tagline text left-aligned
   ============================================================ */

@media (min-width: 992px) {

  /* Branding block: column layout, left-aligned — logo on top, tagline below */
  .site-header .site-branding,
  #masthead .site-branding,
  .site-header .shoptimizer-logo-mark,
  .shoptimizer-logo-mark,
  .site-header .site-logo,
  #masthead .site-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    margin: 0 !important;
    gap: 4px;
  }

  /* Logo link: left-aligned, no stretching */
  .site-header .custom-logo-link,
  #masthead .custom-logo-link {
    display: block !important;
    flex-shrink: 0;
    justify-content: flex-start !important;
  }

  /* Logo image: desktop height.
     52px default cap for the standard theme_mod Customizer logo
     (fans_logo_use_site_meta off — untouched network default). */
  .site-header .custom-logo,
  #masthead .custom-logo,
  .custom-logo {
    max-height: 52px !important;
    width: auto !important;
    margin: 0 !important;
    display: block;
  }

  /* Per-site PC logo (fans_logo_use_site_meta on) — no height cap,
     renders at natural size (source is a known 470x211 landscape
     file); the header row isn't height-locked on desktop so it
     grows to fit instead of clipping/shrinking the logo.
     ⚠️ Must beat Shoptimizer's own Customizer "Logo height" slider,
     which prints an inline <style> block targeting
     .site-header .custom-logo-link img { height: 38px !important; }
     (see inc/customizer/fields/general.php:35-41) — that selector
     has higher specificity/comes later than a plain class rule, so
     we match its exact selector chain here to win. */
  .site-header .custom-logo-link.fans-site-logo-link img.fans-logo-pc,
  #masthead .custom-logo-link.fans-site-logo-link img.fans-logo-pc {
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
  }

  /* Mobile-only logo image never shows on desktop */
  .fans-site-logo-link .fans-logo-mobile {
    display: none !important;
  }

  /* Sticky-header logo (.logo-mark, shown when nav row is scrolled/is_stuck).
     Shoptimizer starts .logo-mark at width:0 + overflow:hidden and only
     opens it via the Customizer "Sticky logo width" slider (default 60px),
     inline-styled as .is_stuck .logo-mark { width: 60px; } — see
     inc/customizer/fields/general.php:112-148. That clips our per-site
     sticky logo (fans_logo_pc_sticky) to the slider's px value.
     Overriding both the wrapper (so it isn't clipped) and the image
     (natural size, capped to the row) lets the uploaded 500x500 logo
     show in full instead of a Customizer-driven sliver. */
  .is_stuck .logo-mark {
    width: auto !important;
    overflow: visible !important;
    position: relative !important;
    padding-right: 16px !important;
  }

  .logo-mark img {
    position: static !important;
    width: auto !important;
    max-height: 52px !important;
    max-width: 100% !important;
  }

  /* Nav container was pushed right by a fixed Kirki margin-left tied to
     the old 60px sticky-logo slider — that no longer matches our
     natural-width logo, so let the float clear it in normal flow instead
     of relying on a hardcoded margin. */
  .is_stuck .primary-navigation.with-logo .menu-primary-menu-container {
    margin-left: 0 !important;
  }

  /* Tagline: below logo, left-aligned with logo's left edge */
  .site-description {
    display: block !important;
    font-family: var(--fans-font-body) !important;
    font-size: 11px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--fans-mid) !important;
    line-height: 1.3 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal;
  }

}


/* ============================================================
   SECTION 12: MOBILE PERFORMANCE COMPONENTS
   New components added per Gemini mobile-first framework.
   All use --fans-* CSS variables — never hardcode hex values here.
   ============================================================ */

/* --- Product image: force 1:1 aspect ratio ---
   Telling the browser the image dimensions BEFORE it downloads
   eliminates Cumulative Layout Shift (CLS) — one of the biggest
   mobile PageSpeed killers. The layout never "jumps" as images load. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

/* --- Sale badge with % saved ---
   Replaces WooCommerce default "Sale!" via fans_sale_badge_percent()
   in inc/ui-hooks.php. Absolute-positioned over the product image. */
.fans-sale-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: var(--fans-rust);
  color: var(--fans-light);
  padding: 4px 8px;
  font-family: var(--fans-font-body);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  pointer-events: none;
}

/* --- Stock status indicator ---
   "Only X left!" and "Sold Out" labels injected above product title
   via fans_grid_stock_status() in inc/ui-hooks.php. */
.fans-stock-status {
  display: block;
  font-family: var(--fans-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 10px 0;
  margin: 0;
  line-height: 1.4;
}

.fans-stock-status--low {
  color: var(--fans-warning);
}

.fans-stock-status--out {
  color: var(--fans-error);
  opacity: 0.85;
}

/* --- Custom empty cart ---
   Injected via fans_empty_cart_message() in inc/ui-hooks.php.
   Replaces WooCommerce's plain "Your cart is currently empty." */
.fans-empty-cart {
  text-align: center;
  padding: 60px 24px 40px;
  max-width: 480px;
  margin: 0 auto;
}

.fans-empty-cart__icon {
  font-size: 56px;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}

.fans-empty-cart h2 {
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-xl);
  color: var(--fans-dark);
  margin: 0 0 10px;
}

.fans-empty-cart p {
  color: var(--fans-mid);
  font-size: var(--fans-text-sm);
  margin: 0 0 28px;
  line-height: 1.6;
}

.fans-empty-cart__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 480px) {
  .fans-empty-cart__actions {
    flex-direction: row;
    justify-content: center;
  }
}

.fans-empty-cart__actions .button {
  min-width: 180px;
  text-align: center;
}

.fans-empty-cart__actions .button.secondary {
  background: transparent !important;
  color: var(--fans-rust) !important;
  border: 2px solid var(--fans-rust) !important;
}

.fans-empty-cart__actions .button.secondary:hover {
  background: var(--fans-rust) !important;
  color: var(--fans-light) !important;
}


/* ============================================================
   SECTION 11: DESKTOP HEADER — MY ACCOUNT ICON
   Sits to the right of the cart icon on PC (≥ 992px).
   Hidden on mobile — account is handled by the bottom nav bar.
   Rust outline SVG at rest → rust filled SVG on hover / active page.
   Also appears in the Shoptimizer sticky header on scroll.
   ============================================================ */

/* Hidden on mobile/tablet — bottom nav already has Account tab */
.fans-account-header-link {
  display: none;
}

@media (min-width: 992px) {

  /* Hide cart in header row (next to search) - keep only nav row cart */
  #masthead > .col-full > .comgurus-header-cart,
  #masthead > .col-full > .site-header-cart,
  .site-header > .col-full > .comgurus-header-cart,
  .site-header > .col-full > .site-header-cart,
  #masthead .col-full:not(.col-full-nav) .comgurus-header-cart,
  #masthead .col-full:not(.col-full-nav) .site-header-cart,
  .site-header .col-full:not(.col-full-nav) .comgurus-header-cart,
  .site-header .col-full:not(.col-full-nav) .site-header-cart,
  #masthead .header-row .comgurus-header-cart,
  #masthead .header-row .site-header-cart,
  .site-header .header-row .comgurus-header-cart,
  .site-header .header-row .site-header-cart {
    display: none !important;
  }

  /* Menu row layout: menu left, cart/account right */
  .col-full-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--fans-light) !important; /* full-bleed row was showing Shoptimizer's default dark background at edges */
  }

  /* Main navigation menu - left align */
  .col-full-nav .main-navigation,
  .col-full-nav #site-navigation,
  .col-full-nav .primary-navigation {
    flex: 1 !important;
    justify-content: flex-start !important;
  }

  /* Cart and account icons container - right align */
  .col-full-nav .comgurus-header-cart,
  .col-full-nav .site-header-cart,
  .col-full-nav a.cart-contents,
  .col-full-nav .header-cart-wrap,
  .col-full-nav .cart-contents,
  .col-full-nav .fans-account-header-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Container for cart + account - push to right */
  .col-full-nav > .comgurus-header-cart,
  .col-full-nav > .site-header-cart,
  .col-full-nav > a.cart-contents {
    margin-left: auto !important;
  }

  .fans-account-header-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    /* Rust colour — matches cart icon */
    color: var(--fans-rust) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    margin-left: 8px;
    vertical-align: middle !important;
    line-height: 1 !important;
    box-sizing: border-box;
  }

  /* Cart icon styling in nav row */
  .col-full-nav .comgurus-header-cart,
  .col-full-nav .site-header-cart,
  .col-full-nav a.cart-contents,
  .col-full-nav .header-cart-wrap,
  .col-full-nav .cart-contents {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    color: var(--fans-rust) !important;
  }

  .col-full-nav .comgurus-header-cart + .fans-account-header-link,
  .col-full-nav .site-header-cart + .fans-account-header-link,
  .col-full-nav a.cart-contents + .fans-account-header-link {
    margin-left: 8px !important;
  }

  /* Align account icon vertical centre with cart icon */
  .col-full-nav .comgurus-header-cart,
  .col-full-nav .site-header-cart,
  .col-full-nav a.cart-contents,
  .col-full-nav .fans-account-header-link {
    align-self: center !important;
  }

  /* Outline state — stroke only, no fill */
  .fans-account-header-link svg {
    width: 24px;
    height: 24px;
    fill: none !important;
    stroke: var(--fans-rust) !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: fill 0.15s ease, stroke 0.15s ease;
  }

  /* Filled state on hover and when on the My Account page */
  .fans-account-header-link:hover,
  .fans-account-header-link.active {
    color: var(--fans-rust-hover) !important;
    text-decoration: none !important;
  }

  .fans-account-header-link:hover svg,
  .fans-account-header-link.active svg {
    fill: var(--fans-rust-hover) !important;
    stroke: var(--fans-rust-hover) !important;
  }

}


/* ============================================================
   SECTION 13: HUB LOGISTICS — CHECKOUT & ORDER DISPLAY
   Pickup type selection, pickup details, order status indicators
   ============================================================ */

/* Pickup type select field styling */
.fans-pickup-type-select select {
  background-color: white;
  border: 2px solid var(--fans-clay);
  border-radius: var(--fans-radius);
  padding: 12px;
  font-size: var(--fans-text-base);
  color: var(--fans-text);
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fans-pickup-type-select select:focus {
  border-color: var(--fans-rust);
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(196, 82, 26, 0.1);
}

.fans-pickup-type-select select:hover {
  border-color: var(--fans-rust-hover);
}


/* Hub pickup name input — shown conditionally */
.fans-hub-pickup-name-input {
  display: none !important;
}

.woocommerce-checkout input[name="fans_pickup_type"][value="hub-pickup"]:checked ~ .fans-hub-pickup-name-input {
  display: block !important;
}

/* Pickup details section in order confirmation & emails */
.fans-pickup-details {
  background-color: var(--fans-light);
  border: 2px dashed var(--fans-sage);
  border-radius: var(--fans-radius-lg);
  padding: 20px;
  margin: 20px 0;
}

.fans-pickup-details h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: var(--fans-text-lg);
  color: var(--fans-dark);
}

.fans-pickup-block {
  background-color: white;
  border-left: 4px solid var(--fans-sage);
  padding: 15px;
  margin: 15px 0;
  border-radius: 4px;
}

.fans-pickup-block p {
  margin: 10px 0;
  font-size: var(--fans-text-sm);
}

.fans-pickup-block strong {
  color: var(--fans-dark);
  font-weight: 600;
}

.fans-pickup-code {
  background-color: var(--fans-rust-light);
  padding: 10px 12px;
  border-radius: 4px;
  font-weight: 600;
}

.fans-pickup-code .code {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  background-color: white;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 2px;
  color: var(--fans-rust);
}

.fans-locker-name {
  font-size: var(--fans-text-base);
}

.fans-hub-hours,
.fans-hub-address,
.fans-friend-phone-reminder {
  font-size: var(--fans-text-sm);
  color: var(--fans-mid);
}

.fans-hub-address a {
  color: var(--fans-rust);
  text-decoration: none;
  font-weight: 500;
}

.fans-hub-address a:hover {
  text-decoration: underline;
}

/* Order status colors for hub workflow */
.order-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--fans-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.order-status.status-shipped-hub {
  background-color: #FFF3CD;
  color: #856404;
}

.order-status.status-arrived-hub {
  background-color: #D1ECF1;
  color: #0C5460;
}

.order-status.status-ready-pickup {
  background-color: var(--fans-sage-light);
  color: var(--fans-sage-dark);
}

.order-status.status-collected {
  background-color: #D4EDDA;
  color: #155724;
}

/* Pickup method pills in product cards */
.fans-pickup-pill-hub {
  background-color: var(--fans-light);
  border: 1px solid var(--fans-sage);
  color: var(--fans-sage-dark);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  margin-right: 4px;
}

.fans-pickup-pill-hub:before {
  content: '🏢 ';
}

/* My Account → Orders page: hub order highlighting */
.woocommerce-orders-table__cell-order.fans-hub-order {
  background-color: rgba(107, 127, 94, 0.05);
  border-left: 3px solid var(--fans-sage);
  padding-left: 12px;
}

/* Responsive adjustments for checkout fields */
@media (max-width: 991px) {
  .fans-pickup-type-select select {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .fans-pickup-details {
    margin: 15px -15px;
    border-radius: 0;
  }
}
/* Full-width background wrapper */
.col-full-nav {
    width: 100% !important;
}

/* Constrained content inside */
.col-full-nav .shoptimizer-primary-navigation.col-full {
    max-width: 1170px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 2.617924em !important;
    padding-left: 2.617924em !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
body:not(.sticky-atc-open) .product-details-wrapper {
    padding-top: 15px !important; /* your desired value */
}

/* ============================================================
   SECTION 17: HOMEPAGE MODULE ROWS
   Used by fans_render_homepage_modules() in functions/site-meta.php.
   Card look matches the WooCommerce product-card treatment in
   Section 4 (ported from kambron12) so modules and shop grids read
   as one system regardless of which plugin/type backs the row.
   ============================================================ */

.fans-homepage-row {
  max-width: 1170px;
  margin: 0 auto;
  padding: 48px 20px;
}

.fans-homepage-row .fans-row-header {
  font-size: var(--fans-text-2xl);
  margin-bottom: 24px;
}

.fans-module-grid {
  display: grid;
  gap: 1.5rem;
}

@media (max-width: 991px) {
  .fans-module-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 600px) {
  .fans-module-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

.fans-module-card {
  display: block;
  background: #fff;
  border: 1px solid var(--fans-clay);
  border-radius: var(--fans-radius-lg);
  overflow: hidden;
  box-shadow: var(--fans-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.fans-module-card:hover {
  box-shadow: var(--fans-shadow-lg);
  transform: translateY(-5px);
  text-decoration: none;
}

.fans-module-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--fans-radius-lg) var(--fans-radius-lg) 0 0;
}

.fans-module-card__title {
  display: block;
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-sm);
  font-weight: 600;
  color: var(--fans-dark);
  line-height: 1.4;
  padding: 1.4rem 1.4rem 0.5rem;
}

.fans-module-card__price {
  display: block;
  font-family: var(--fans-font-heading);
  font-size: var(--fans-text-lg);
  color: var(--fans-rust);
  font-weight: 700;
  padding: 0 1.4rem 1.4rem;
}

@media (max-width: 600px) {
  .fans-module-card__title {
    font-size: 13px;
    padding: 1rem 1rem 0.4rem;
  }
  .fans-module-card__price {
    font-size: 15px;
    padding: 0 1rem 1rem;
  }
}


/* ============================================================
   SECTION 16: HOMEPAGE HERO
   Used by front-page.php — background image set inline via
   fans_hero_image_url site meta (see functions/site-meta.php)
   ============================================================ */
body.home .site-content,
body.home .shoptimizer-archive,
body.home .col-full {
  padding-top: 0 !important;
}
#main.fans-home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.fans-hero {
  color: var(--fans-light);
  text-align: center;
  padding: 100px 20px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
}
.fans-hero h1 { color: var(--fans-light); font-size: var(--fans-text-3xl); margin-bottom: 12px; text-shadow: 1px 1px 4px rgba(0,0,0,0.4); }
.fans-hero p { color: var(--fans-light); font-size: var(--fans-text-lg); max-width: 640px; margin: 0 auto 28px; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }
.fans-hero .fans-btn-primary,
.fans-hero .fans-btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--fans-radius);
  text-decoration: none;
  font-weight: 600;
  margin: 0 8px 8px;
  border: 2px solid var(--fans-rust);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fans-hero .fans-btn-primary,
.fans-hero .fans-btn-secondary { background: var(--fans-rust); color: var(--fans-light); }
.fans-hero .fans-btn-primary:hover,
.fans-hero .fans-btn-secondary:hover { background: var(--fans-light); color: var(--fans-rust); }
@media (max-width: 767px) {
  .fans-hero { padding: 60px 16px; }
  .fans-hero h1 { font-size: 1.9rem; }
  .fans-hero p { font-size: 1rem; }
  .fans-hero .fans-btn-primary,
  .fans-hero .fans-btn-secondary { display: block; width: 100%; max-width: 320px; margin: 0 auto 12px; }
}

/* --- Hero overlap card ---
   Ported from kambron12/style.css .kb-booking-bar: the first homepage
   module (whatever type it is — product row, trust bar, custom HTML)
   renders inside this wrapper when the hero is showing, pulled up over
   the hero's bottom edge with a negative top margin. White rounded
   card + shadow is what creates the "floating over the hero" look —
   there is no separate fade/gradient element on the hero itself
   (confirmed against kambron12's actual CSS, not assumed).
   max-width matches .fans-homepage-row (1170px) — "equal / just wider
   than the content width of the row after hero" per the original ask. */
.fans-hero-overlap {
  max-width: 1170px;
  margin: -3rem auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}
.fans-hero-overlap > * {
  background: #fff;
  border-radius: var(--fans-radius-lg);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  overflow: hidden;
}
@media (max-width: 767px) {
  .fans-hero-overlap {
    margin-top: -1.5rem;
    padding: 0 16px;
  }
}

/* --- Vendor shop banner (homepage, vendor sites only) ---
   Etsy-shop-style header: full-bleed banner image (same edge-to-edge
   treatment as .fans-hero above — 100vw trick, same padding scale), with
   the identity bar as a rounded white card pulled up over its bottom
   edge, same mechanism as .fans-hero-overlap. See
   template-parts/vendor-shop-banner.php. */
.fans-vendor-banner {
  position: relative;
}
.fans-vendor-banner__image {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  aspect-ratio: 3.2 / 1;
  background: var(--fans-clay) center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fans-vendor-banner__image:has(.fans-vendor-banner__hero-copy)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20,30,48,0.12) 0%, rgba(40,28,18,0.35) 100%);
}
.fans-vendor-banner__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border-radius: var(--fans-radius-lg);
  box-shadow: var(--fans-shadow-lg);
  padding: 20px 24px;
  flex-wrap: wrap;
  max-width: 1170px;
  margin: -3rem auto 0;
  position: relative;
  z-index: 10;
}
.fans-vendor-banner__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.fans-vendor-banner__logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: var(--fans-shadow);
  background: var(--fans-sage-light);
  flex-shrink: 0;
}
.fans-vendor-banner__logo--placeholder { background: var(--fans-clay); }
.fans-vendor-banner__text { min-width: 0; }
.fans-vendor-banner__name {
  font-size: var(--fans-text-lg);
  margin: 0 0 2px;
  color: var(--fans-dark);
}
.fans-vendor-banner__town {
  color: var(--fans-mid);
  font-size: var(--fans-text-sm);
  margin: 0 0 6px;
}
.fans-vendor-banner__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--fans-mid);
  font-size: var(--fans-text-sm);
}
.fans-vendor-banner__stats strong { color: var(--fans-dark); }
.fans-vendor-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.fans-vendor-banner__icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--fans-clay);
  border-radius: 999px;
  background: #fff;
  color: var(--fans-dark);
  font-size: var(--fans-text-sm);
  cursor: pointer;
  text-decoration: none;
}
.fans-vendor-banner__icon-btn:hover { border-color: var(--fans-rust); color: var(--fans-rust); }
.fans-vendor-banner__follow { padding: 10px; color: var(--fans-mid); }
.fans-vendor-banner__follow.is-following { color: var(--fans-rust); border-color: var(--fans-rust); }
.fans-vendor-banner__follow.is-following svg { fill: var(--fans-rust); }
.fans-vendor-banner__hero-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
}
.fans-vendor-banner__hero-heading {
  font-size: var(--fans-text-2xl);
  color: var(--fans-light);
  margin-bottom: 8px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
.fans-vendor-banner__hero-subtext {
  color: var(--fans-light);
  font-size: var(--fans-text-lg);
  margin: 0 auto 20px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.fans-vendor-banner__hero-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.fans-vendor-banner__hero-buttons .fans-btn-primary,
.fans-vendor-banner__hero-buttons .fans-btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  background: var(--fans-rust);
  color: var(--fans-light);
}
.fans-vendor-banner__hero-buttons .fans-btn-primary:hover,
.fans-vendor-banner__hero-buttons .fans-btn-secondary:hover {
  background: var(--fans-rust-hover, var(--fans-dark));
}
@media (max-width: 767px) {
  .fans-vendor-banner__hero-buttons .fans-btn-primary,
  .fans-vendor-banner__hero-buttons .fans-btn-secondary {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 10px;
  }
}
@media (max-width: 767px) {
  .fans-vendor-banner__image { aspect-ratio: 16 / 9; }
  .fans-vendor-banner__bar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    margin: -2rem 12px 0;
  }
  .fans-vendor-banner__actions { justify-content: flex-end; }
}

/* ============================================================
   SECTION 14: CART COUNT BUBBLE — ALL WIDTHS
   Shoptimizer only styles .mini-count above 993px; below that it
   falls back to an unstyled dot with no visible number. Applied
   outside any media query so the rust-outline badge is consistent
   from mobile through desktop.
   Positioned absolute against the icon so it overlaps the bag's
   top-right corner identically at every width, instead of relying
   on Shoptimizer's inline relative offset (which only visually
   overlapped on mobile, thanks to a separate mobile-only icon
   shift in header-mobile.css — desktop had no such shift, so the
   badge sat beside the icon instead of on it).
   ============================================================ */
.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  vertical-align: middle !important;
}
.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon svg {
  position: static !important;
  top: auto !important;
}
.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon .mini-count {
  position: absolute !important;
  top: 60% !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--fans-rust) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ============================================================
   SECTION 15: HEADER ICON SIZE — BAG + ACCOUNT
   Matches the home icon (.fans-header-home-link, 35px) so all
   three header icons are a consistent size, all widths.
   Badge number scales to match the bag icon.
   ============================================================ */
.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon {
  width: 35px !important;
  height: 35px !important;
}
.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon svg {
  width: 35px !important;
  height: 35px !important;
}
.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon .mini-count {
  font-size: 13px !important;
}
.fans-account-header-link svg,
.shoptimizer-myaccount svg {
  width: 35px !important;
  height: 35px !important;
}