@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap');

    /* Global Mobile Layout & Overflow Rules */
    html, body {
      overflow-x: clip;
      max-width: 100vw;
    }

    .glass-effect {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .glass-dark {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .hero-gradient {
      background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
    }
    .pill-nav {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 9999px;
    }

    /* Glassy Mega Menu Panel (drops out from below the pill bar) */
    .mega-glass {
      background:
        linear-gradient(180deg, rgba(38, 34, 30, 0.82) 0%, rgba(12, 11, 10, 0.92) 100%);
      backdrop-filter: blur(24px) saturate(150%);
      -webkit-backdrop-filter: blur(24px) saturate(150%);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow:
        0 32px 80px -24px rgba(0, 0, 0, 0.75),
        0 8px 24px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
      will-change: transform, opacity;
    }
    /* While the panel is animating, drop the expensive backdrop-filter so the
       transform composites on the GPU without re-rasterizing the blur each frame.
       The gradient background is opaque enough to still read as glass mid-motion;
       the real blur snaps back in the instant it comes to rest. */
    .mega-glass.mega-animating {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    /* Soft top highlight so the panel reads like glass catching light */
    .mega-glass::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%);
      pointer-events: none;
      z-index: 0;
    }
    .mega-glass > * { position: relative; z-index: 1; }

    /* Solid Light Header Mode for Non-Front Pages (Shop, Single Product, Cart, Checkout, Pages) */
    .lglglo-header--solid {
      background: rgba(245, 242, 237, 0.94) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      border-bottom: 1px solid rgba(27, 24, 21, 0.1) !important;
      box-shadow: 0 4px 20px -5px rgba(27, 24, 21, 0.06) !important;
      position: relative !important;
      opacity: 1 !important;
    }
    .lglglo-header--solid a,
    .lglglo-header--solid button {
      color: #1A1C1C !important;
    }
    .lglglo-header--solid img {
      filter: brightness(0) !important;
    }
    .lglglo-header--solid .pill-nav-light {
      background: rgba(27, 24, 21, 0.05) !important;
      border: 1px solid rgba(27, 24, 21, 0.12) !important;
    }
    .lglglo-header--solid .pill-nav-light a,
    .lglglo-header--solid .pill-nav-light button {
      color: #1A1C1C !important;
      font-weight: 600 !important;
    }
    .lglglo-header--solid .pill-nav-light a:hover,
    .lglglo-header--solid .pill-nav-light button:hover {
      color: #D4AF37 !important;
    }
    .lglglo-header--solid #search-btn,
    .lglglo-header--solid #cart-btn,
    .lglglo-header--solid #mega-menu-hamburger {
      background: rgba(27, 24, 21, 0.05) !important;
      border: 1px solid rgba(27, 24, 21, 0.12) !important;
      color: #1A1C1C !important;
    }
    .lglglo-header--solid #search-btn:hover,
    .lglglo-header--solid #cart-btn:hover,
    .lglglo-header--solid #mega-menu-hamburger:hover {
      background: rgba(27, 24, 21, 0.12) !important;
      border-color: rgba(27, 24, 21, 0.25) !important;
    }

    /* Hide scrollbars & scrollbar buttons on product slider everywhere */
    #wc-product-slider,
    #wc-product-slider *,
    .scrollbar-none {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }
    #wc-product-slider::-webkit-scrollbar,
    #wc-product-slider *::-webkit-scrollbar,
    #wc-product-slider::-webkit-scrollbar-button,
    #wc-product-slider *::-webkit-scrollbar-button,
    #wc-product-slider::-webkit-scrollbar-thumb,
    #wc-product-slider::-webkit-scrollbar-track,
    #wc-product-slider::-webkit-scrollbar-corner,
    .scrollbar-none::-webkit-scrollbar,
    .scrollbar-none::-webkit-scrollbar-button {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
      -webkit-appearance: none !important;
    }

    @media (max-width: 767px) {
      #pill-expanded-panel {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
      }

      /* Touch target size optimization (minimum 44px for accessibility on small viewports) */
      #search-btn,
      #cart-btn,
      #mega-menu-hamburger,
      .mega-close-trigger,
      .quick-tag-btn {
        min-width: 44px;
        min-height: 44px;
      }
    }

    /* Live WooCommerce Product Search Modal Overlay */
    #search-modal-overlay {
      position: fixed !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      background: rgba(10, 10, 10, 0.94) !important;
      backdrop-filter: blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
      z-index: 999999 !important;
      padding: 1.5rem !important;
      box-sizing: border-box !important;
      overflow-y: auto !important;
    }
    #search-modal-overlay.hidden {
      display: none !important;
    }
    #search-modal-overlay:not(.hidden) {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    #lglglo-search-input {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: #ffffff !important;
      border-radius: 9999px !important;
      padding: 1rem 3.25rem 1rem 3.5rem !important;
      font-size: 1.125rem !important;
      width: 100% !important;
      box-sizing: border-box !important;
      outline: none !important;
    }
    #lglglo-search-input:focus {
      border-color: #D4AF37 !important;
      box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3) !important;
      background: rgba(255, 255, 255, 0.14) !important;
    }

    .quick-tag-btn {
      background: rgba(255, 255, 255, 0.06) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: rgba(255, 255, 255, 0.85) !important;
      padding: 0.35rem 0.85rem !important;
      border-radius: 9999px !important;
      font-size: 0.75rem !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }
    .quick-tag-btn:hover {
      background: rgba(255, 255, 255, 0.15) !important;
      border-color: #D4AF37 !important;
      color: #ffffff !important;
    }



    /* Hotspot Pulsing Keyframes */
    @keyframes pulse-ring {
      0% { transform: scale(0.6); opacity: 0; }
      50% { opacity: 0.5; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    .pulse-ring-effect {
      animation: pulse-ring 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
    }

    /* Tactile Grain Overlay */
    body::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.015; /* Extremely subtle organic texture */
      pointer-events: none;
      z-index: 9999;
    }

    /* Luxury Soft Ambient Shadows */
    .shadow-md {
      box-shadow: 
        0 4px 12px -2px rgba(27, 24, 21, 0.03),
        0 10px 25px -8px rgba(27, 24, 21, 0.06) !important;
    }
    .shadow-lg {
      box-shadow: 
        0 10px 20px -5px rgba(27, 24, 21, 0.04),
        0 20px 40px -15px rgba(27, 24, 21, 0.08),
        0 0 40px 0 rgba(27, 24, 21, 0.02) !important;
    }
    .shadow-2xl {
      box-shadow: 
        0 25px 50px -12px rgba(27, 24, 21, 0.12),
        0 15px 30px -10px rgba(27, 24, 21, 0.08),
        0 0 50px 0 rgba(27, 24, 21, 0.03) !important;
    }

    /* Refined Material borders */
    .border-outline-variant {
      border-color: rgba(27, 24, 21, 0.12) !important;
    }


/* ==========================================================================
   WordPress host-theme compatibility (added for the plugin build)
   Neutralises theme / Elementor / WooCommerce base styles that would
   otherwise leak into the redesign. All rules are scoped to .lglglo-scope.
   ========================================================================== */

/* Host reset.css puts a 1px solid border on every <button>. Our nav trigger
   has no border utility, so strip it here. Buttons that DO opt into a Tailwind
   border (search / cart / hamburger) keep theirs — Tailwind wins on specificity.
   :where() keeps this at low specificity so those utilities still take over. */
.lglglo-scope :where(button) {
  border-width: 0;
  outline: none;
  background-image: none;
}

/* Brand logo: the host theme's `.elementor img{height:auto}` overrides the
   Tailwind height utilities. Re-assert the intended logo sizes. */
.lglglo-scope--header img {
  height: 1.5rem !important;   /* h-6 */
  width: auto !important;
  max-width: none !important;
}
@media (min-width: 768px) {
  .lglglo-scope--header img {
    height: 2.25rem !important; /* md:h-9 */
  }
}
.lglglo-scope--footer img {
  height: 2rem !important;      /* h-8 */
  width: auto !important;
  max-width: none !important;
}

/* Host reset.css also flips <button> to a pink fill (#cc3366) on
   hover / focus / active. Neutralise it ONLY for buttons that don't opt into a
   Tailwind bg-* utility (the mega-menu trigger + the in-panel category button);
   search / cart / hamburger / close keep their translucent Tailwind fills.
   Background only — text colours are left to the Tailwind hover:* utilities. */
.lglglo-scope button:not([class*="bg-"]),
.lglglo-scope button:not([class*="bg-"]):hover,
.lglglo-scope button:not([class*="bg-"]):focus,
.lglglo-scope button:not([class*="bg-"]):active,
.lglglo-scope button:not([class*="bg-"]):focus-visible {
  background-color: transparent;
}

/* ==========================================================================
   WordPress Admin Bar Compatibility
   Pushes the fixed/absolute hero header down when logged into WP Admin.
   ========================================================================== */
body.admin-bar .lglglo-header--hero {
  top: 32px !important;
}
body.admin-bar #pill-expanded-panel {
  top: 120px !important;
}

@media (max-width: 782px) {
  body.admin-bar .lglglo-header--hero {
    top: 46px !important;
  }
}