/*
Theme Name: Beyond Gaming (Woodmart Child)
Theme URI: https://beyondgaming.in
Description: Beyond Gaming brand customization layer on top of Woodmart. Brings the look-and-feel of the Next.js storefront to the WooCommerce theme: deep purple + gold palette, gradient text utilities, custom buttons, product card hover treatments, dark header, and supporting animations.
Author: Beyond Gaming
Template: woodmart
Version: 0.1.0
Text Domain: beyondgaming
*/

/* ============================================================
   1. BRAND TOKENS
   Defined as CSS custom properties so they can be reused
   anywhere and easily tweaked from one place.
   ============================================================ */
:root {
  --bg-purple-900: #350361;
  --bg-purple-800: #4a0e7a;
  --bg-purple-700: #6b11a1;
  --bg-purple-600: #9215ad;
  --bg-purple-500: #a855f7;
  --bg-purple-400: #c084fc;
  --bg-purple-300: #d8b4fe;
  --bg-purple-200: #e9d5ff;
  --bg-purple-100: #f3e8ff;
  --bg-purple-50:  #faf5ff;

  --bg-gold-500: #f59e0b;
  --bg-gold-400: #fbbf24;
  --bg-gold-300: #fcd34d;

  --bg-ink: #1a1a2e;
  --bg-ink-deep: #1a0030;

  --bg-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg-radius-lg: 16px;
  --bg-radius-xl: 24px;
  --bg-radius-2xl: 32px;

  --bg-shadow-soft: 0 4px 24px rgba(53, 3, 97, 0.08);
  --bg-shadow-purple: 0 12px 32px rgba(107, 17, 161, 0.18);
  --bg-shadow-gold: 0 12px 32px rgba(245, 158, 11, 0.25);
}

/* ============================================================
   2. GLOBAL TYPOGRAPHY + BACKGROUND
   Force Geist as the brand font on everything that renders
   text. The aggressive selector list catches Woodmart's many
   typography overrides without touching icon fonts (Font
   Awesome, dashicons, etc.).
   ============================================================ */
body,
body.woodmart-theme,
body p,
body span,
body a,
body div,
body li,
body label,
body input,
body button,
body select,
body textarea,
body .menu-item,
body .menu-item-title,
body .wd-menu-item,
body .wd-menu-item-title,
body .product_title,
body .product-title,
body .price,
body .entry-title,
body .widget-title,
body .elementor-widget-text-editor,
body .elementor-widget-heading,
body .wd-button,
body .btn {
  font-family: var(--bg-font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Keep icon fonts on their own families — never override */
body .fa, body .fas, body .far, body .fab, body .fal, body .fad,
body [class^="fa-"], body [class*=" fa-"],
body .dashicons, body [class^="dashicons-"],
body .wd-icon, body [class^="wd-icon-"],
body .woodmart-icon, body [class^="woodmart-icon-"] {
  font-family: inherit !important;
}
/* Re-set FontAwesome to its own family */
body .fa, body .fas, body [class^="fas "], body [class*=" fas "],
body [class^="fa-"], body [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}
body .fab, body [class^="fab "], body [class*=" fab "] {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

body {
  background-color: var(--bg-purple-50);
  color: var(--bg-ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title,
.widget-title {
  font-family: var(--bg-font-sans), -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--bg-ink-deep);
  font-weight: 800;
  letter-spacing: -0.01em;
}

a { color: var(--bg-purple-700); }
a:hover { color: var(--bg-purple-900); }

/* ============================================================
   3. UTILITY CLASSES (ported from Next.js globals.css)
   Use these in custom HTML blocks, page builder rich-text,
   or any code snippet you embed in pages.
   ============================================================ */

.text-gradient-gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d, #f59e0b);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #9215ad, #6b11a1, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-bg-gradient-dark {
  background: linear-gradient(135deg, #1a0030 0%, #350361 50%, #6b11a1 100%);
}

.bg-bg-gradient-gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(53, 3, 97, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.noise { position: relative; }
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ============================================================
   4. ANIMATIONS
   ============================================================ */
@keyframes bg-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(2deg); }
}
@keyframes bg-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes bg-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bg-gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.animate-float    { animation: bg-float 6s ease-in-out infinite; }
.animate-slide-up { animation: bg-slide-up 0.6s ease-out forwards; }
.animate-shimmer  {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: bg-shimmer 2s infinite;
}

@keyframes bg-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: bg-marquee 30s linear infinite; }

@keyframes bg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.animate-pulse { animation: bg-pulse 2s ease-in-out infinite; }

/* ============================================================
   5. WOODMART BUTTON OVERRIDES
   Targets Woodmart's primary button classes and gives them the
   purple-to-gold treatment from the Next.js design.
   ============================================================ */
.btn,
.button,
.wd-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  font-family: var(--bg-font-sans) !important;
  font-weight: 700 !important;
  border-radius: var(--bg-radius-lg) !important;
  padding: 14px 28px !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  border: none !important;
}

.btn-color-primary,
.wd-btn-color-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
button[type="submit"].single_add_to_cart_button {
  background: linear-gradient(135deg, var(--bg-purple-700), var(--bg-purple-600)) !important;
  color: #ffffff !important;
  box-shadow: var(--bg-shadow-purple) !important;
}

.btn-color-primary:hover,
.wd-btn-color-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
button[type="submit"].single_add_to_cart_button:hover {
  background: linear-gradient(135deg, var(--bg-purple-800), var(--bg-purple-700)) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(107, 17, 161, 0.32) !important;
}

/* "Gold" button variant — apply class .btn-gold to any element
   you want in the gold-gradient style (use it on the hero CTA,
   the order confirmation button, etc.) */
.btn-gold {
  background: linear-gradient(135deg, var(--bg-gold-400), var(--bg-gold-500)) !important;
  color: var(--bg-ink-deep) !important;
  box-shadow: var(--bg-shadow-gold) !important;
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--bg-gold-300), var(--bg-gold-400)) !important;
  transform: translateY(-2px);
  color: var(--bg-ink-deep) !important;
}

/* ============================================================
   6. PRODUCT CARDS
   Target Woodmart's product card and bring the rounded,
   shadowed treatment from the Next.js design.
   ============================================================ */
.product-grid-item,
.wd-product,
.woocommerce ul.products li.product {
  border-radius: var(--bg-radius-xl) !important;
  background: #ffffff;
  box-shadow: var(--bg-shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.product-grid-item:hover,
.wd-product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--bg-shadow-purple);
}

.product-grid-item .product-image-link,
.wd-product .product-image-link,
.woocommerce ul.products li.product a img {
  border-radius: var(--bg-radius-xl) var(--bg-radius-xl) 0 0;
}

.product-grid-item .price,
.wd-product .price,
.woocommerce ul.products li.product .price {
  color: var(--bg-purple-700) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

.product-grid-item .product-title,
.wd-product .product-title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-weight: 700 !important;
  color: var(--bg-ink-deep) !important;
  font-size: 15px !important;
  line-height: 1.4;
}

/* ============================================================
   7. SITE HEADER (DARK GRADIENT)
   Matches the Next.js Navbar exactly:
     bg-gradient-to-r from-[#1a0030] via-purple-900 to-purple-800
   = linear-gradient(to right, #1a0030, #350361, #4a0e7a)
   Applied ONLY to the outermost .whb-header wrapper. All inner
   rows are forced transparent so the gradient flows continuously
   across the entire header instead of restarting per row (which
   caused the horizontal banding in the previous version).
   ============================================================ */

/* Outer wrapper — gets the gradient */
body .whb-header,
body .site-header {
  background: linear-gradient(
    to right,
    #1a0030 0%,
    #350361 50%,
    #4a0e7a 100%
  ) !important;
  background-color: #1a0030 !important;
  border-top: 0 !important;
  border-bottom: 2px solid var(--bg-gold-400) !important;
  box-shadow: none !important;
}

/* Inner rows — transparent so the outer gradient shows through.
   IMPORTANT exclusions:
     - .whb-sticky-row → has its own background (detaches on scroll)
     - .whb-header-bottom → the white menu row, has its own bg */
body .whb-header > *:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-main-header:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-main-header > *:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-main-header .whb-row:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-main-header .whb-flex,
body .whb-main-header .whb-flex-row,
body .whb-header .whb-row:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-row.whb-general-header:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-row.whb-general-header-mobile:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-color-light:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-color-dark:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-color-light .whb-main-header:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-color-dark .whb-main-header:not(.whb-sticky-row):not(.whb-header-bottom),
body .whb-top-bar:not(.whb-sticky-row):not(.whb-header-bottom) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ─── The sticky row ───
   Confirmed class set from Woodmart's HTML inspection:
     .whb-row.whb-header-bottom.whb-sticky-row.whb-with-bg
        .whb-border-fullwidth.whb-color-dark...
   This row goes position:fixed on scroll, detaches from the
   parent, and needs its own dark gradient (the parent's
   gradient is no longer behind it). */
body .whb-sticky-row,
body .whb-row.whb-sticky-row,
body .whb-row.whb-header-bottom.whb-sticky-row,
body .whb-row.whb-sticky-row.whb-with-bg {
  background: linear-gradient(
    to right,
    #1a0030 0%,
    #350361 50%,
    #4a0e7a 100%
  ) !important;
  background-color: #1a0030 !important;
  background-image: linear-gradient(
    to right,
    #1a0030 0%,
    #350361 50%,
    #4a0e7a 100%
  ) !important;
  border-bottom: 2px solid var(--bg-gold-400) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Inner content of the sticky row — transparent so the row's
   own gradient shows through. */
body .whb-sticky-row .whb-flex-row,
body .whb-sticky-row .container,
body .whb-sticky-row .whb-flex,
body .whb-sticky-row .whb-column,
body .whb-sticky-row .whb-header-bottom-inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Hairline separator between rows so they're still visually
   distinguishable, without screaming gold dividers. */
body .whb-main-header > .whb-row + .whb-row,
body .whb-header .whb-row + .whb-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─── Sticky / cloned header on scroll ───
   Woodmart spawns a `.whb-clone` (or applies `.whb-sticked` to a row)
   when the user scrolls past the original header. The exact class
   varies between Woodmart versions, so use BOTH explicit selectors
   AND attribute substring matchers to catch every variant. */
body .whb-clone,
body .whb-sticked,
body .whb-scroll-slide-up,
body .whb-scroll-stick,
body .whb-fixed-row,
body .whb-sticky-prepared,
body .whb-sticky-shown,
body [class*="whb-clone"],
body [class*="whb-sticked"],
body [class*="whb-fixed"],
body [class*="whb-sticky"],
body [class*="wd-header-sticked"],
body [class*="wd-header-clone"],
body [class*="wd-header-fixed"],
body .whb-header.whb-sticked,
body .whb-main-header.whb-sticked {
  background: linear-gradient(
    to right,
    #1a0030 0%,
    #350361 50%,
    #4a0e7a 100%
  ) !important;
  background-color: #1a0030 !important;
  background-image: linear-gradient(
    to right,
    #1a0030 0%,
    #350361 50%,
    #4a0e7a 100%
  ) !important;
  border-bottom: 2px solid var(--bg-gold-400) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Inner rows / containers inside the sticky clone — transparent so
   the wrapper gradient shows through (same logic as the static
   header in section 7). */
body .whb-clone .whb-row,
body .whb-clone .whb-flex-row,
body .whb-clone .whb-flex,
body .whb-clone .whb-main-header,
body .whb-clone .whb-top-bar,
body .whb-clone .whb-color-light,
body .whb-clone .whb-color-dark,
body .whb-sticked .whb-row,
body .whb-sticked .whb-flex-row,
body .whb-sticked .whb-flex,
body .whb-sticked .whb-main-header,
body .whb-sticked .whb-top-bar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Force all sticky-header text + icons + nav links to white,
   gold on hover — matches the static header treatment. */
body .whb-clone,
body .whb-clone a,
body .whb-clone .wd-tools-text,
body .whb-clone .wd-tools-icon,
body .whb-clone .menu-item > a,
body .whb-clone .item-level-0 > a,
body .whb-sticked a,
body .whb-sticked .wd-tools-text,
body .whb-sticked .wd-tools-icon,
body .whb-sticked .menu-item > a,
body .whb-sticked .item-level-0 > a {
  color: #ffffff !important;
}
body .whb-clone a:hover,
body .whb-clone .menu-item > a:hover,
body .whb-clone .item-level-0:hover > a,
body .whb-sticked a:hover {
  color: var(--bg-gold-400) !important;
}

/* Search field inside the sticky clone — keep light/readable */
body .whb-clone .wd-search-form input[type="search"],
body .whb-clone .wd-search-form input.s {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--bg-ink-deep) !important;
  border-radius: 12px !important;
}

/* All header text + nav links → white, hover → gold */
body .whb-header,
body .whb-main-header,
body .whb-header a,
body .whb-main-header a,
body .whb-header .wd-tools-text,
body .whb-header .wd-tools-icon,
body .whb-main-header .wd-tools-text,
body .whb-main-header .wd-tools-icon,
body .whb-header .menu-item > a,
body .whb-header .menu-item-title,
body .whb-header .item-level-0 > a,
body .site-header a {
  color: #ffffff !important;
}

body .whb-header a:hover,
body .whb-main-header a:hover,
body .whb-header .menu-item > a:hover,
body .whb-header .item-level-0:hover > a {
  color: var(--bg-gold-400) !important;
}

/* ─── App-style search bar ───
   Approach: leave Woodmart's natural HTML structure alone.
   The OUTER .wd-search-form wrapper is made transparent/empty.
   The INNER element (the actual <form> Woodmart renders) is
   the visible pill and gets all the styling. */

/* Outer wrapper — invisible, just provides positioning context */
body [class*="whb"] .wd-search-form {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 0 !important;
  height: auto !important;
}

/* The parent column the form lives in — make it span properly */
body [class*="whb"] .wd-header-search-form,
body [class*="whb"] .wd-search-form-element,
body [class*="whb"] .whb-column.whb-col-center {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* The INNER form is the visible pill. This is whatever
   wrapper Woodmart renders inside .wd-search-form (could be
   <form>, .wd-form-search, etc.).

   Math: 52px pill height - 5px top - 5px bottom = 42px button.
   Right padding 5px so the button has equal breathing room
   on top, right, and bottom. */
body [class*="whb"] .wd-search-form > form,
body [class*="whb"] .wd-search-form .wd-form-search,
body [class*="whb"] .wd-search-form form[role="search"],
body [class*="whb"] .wd-search-form .searchform {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  padding: 5px 5px 5px 22px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  position: relative !important;
}

/* AJAX live search results dropdown — let Woodmart handle the
   layout, position, and visibility. We only override TEXT COLORS
   so the results aren't invisible against the header's "all
   anchors white" rule. */
body [class*="whb"] .wd-search-form .wd-dropdown-results,
body [class*="whb"] .wd-search-form .wd-dropdown-results *,
body [class*="whb"] .wd-search-form .wd-dropdown-results a,
body [class*="whb"] .wd-search-form .wd-search-results,
body [class*="whb"] .wd-search-form .wd-search-results *,
body [class*="whb"] .wd-search-form .wd-search-results a,
body [class*="whb"] .wd-search-form .wd-dropdown *,
body [class*="whb"] .wd-search-form .wd-dropdown a {
  color: var(--bg-ink-deep) !important;
}

body [class*="whb"] .wd-search-form .wd-dropdown-results .price,
body [class*="whb"] .wd-search-form .wd-dropdown-results .amount,
body [class*="whb"] .wd-search-form .wd-dropdown-results bdi,
body [class*="whb"] .wd-search-form .wd-search-results .price {
  color: var(--bg-purple-700) !important;
  font-weight: 700 !important;
}

body [class*="whb"] .wd-search-form .wd-dropdown-results del,
body [class*="whb"] .wd-search-form .wd-dropdown-results del * {
  color: #9ca3af !important;
}

/* Hide Woodmart's "Select Category" dropdown inside the search.
   The app-style search is a single clean text field. */
body [class*="whb"] .wd-search-form .wd-search-cat,
body [class*="whb"] .wd-search-form .select-wrapper,
body [class*="whb"] .wd-search-form select,
body [class*="whb"] .wd-search-form .wd-cat-select,
body [class*="whb"] .wd-search-form .product_cat,
body [class*="whb"] .searchform .wd-search-cat,
body [class*="whb"] .searchform select {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}

body [class*="whb"] .wd-search-form input[type="search"],
body [class*="whb"] .wd-search-form input.s,
body [class*="whb"] .searchform input[type="search"],
body [class*="whb"] form[role="search"] input[type="search"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  font-family: var(--bg-font-sans) !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  outline: none !important;
  box-shadow: none !important;
  order: 1 !important;
}
body [class*="whb"] .wd-search-form input::placeholder,
body [class*="whb"] .searchform input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Search button — absolutely positioned inside the pill,
   pinned to right: 5px. More reliable than flexbox because
   Woodmart's button placement was overriding my flex order. */
body [class*="whb"] .wd-search-form button[type="submit"],
body [class*="whb"] .searchform button[type="submit"],
body [class*="whb"] form[role="search"] button[type="submit"] {
  background: var(--bg-purple-600) !important;
  border: 0 !important;
  border-radius: 10px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}
body [class*="whb"] .wd-search-form button[type="submit"]:hover {
  transform: translateY(-50%) scale(1.05) !important;
}

/* Reserve space on the right of the input so text doesn't
   slide under the absolutely-positioned button. */
body [class*="whb"] .wd-search-form input[type="search"] {
  padding-right: 56px !important;
}
body [class*="whb"] .wd-search-form button[type="submit"]:hover {
  background: var(--bg-purple-500) !important;
  transform: scale(1.05);
}

/* ─── App-style icon buttons (account / cart) ───
   Rounded square buttons with subtle border + transparent
   background, matching the iOS app top bar. */
body [class*="whb"] .wd-header-account .wd-tools-icon,
body [class*="whb"] .wd-header-cart .wd-tools-icon,
body [class*="whb"] .wd-tools-element .wd-tools-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Hover state — target hover on the parent link / container
   too, so the effect triggers regardless of which element
   actually receives the hover event. The account icon's
   <a> tag was eating the hover before it reached the inner
   .wd-tools-icon. */
body [class*="whb"] .wd-header-account .wd-tools-icon:hover,
body [class*="whb"] .wd-header-account:hover .wd-tools-icon,
body [class*="whb"] .wd-header-account > a:hover .wd-tools-icon,
body [class*="whb"] .wd-tools-element.wd-account:hover .wd-tools-icon,
body [class*="whb"] .wd-header-cart .wd-tools-icon:hover,
body [class*="whb"] .wd-header-cart:hover .wd-tools-icon,
body [class*="whb"] .wd-header-cart > a:hover .wd-tools-icon,
body [class*="whb"] .wd-tools-element.wd-header-cart:hover .wd-tools-icon {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px);
}
body [class*="whb"] .wd-header-account .wd-tools-icon::before,
body [class*="whb"] .wd-header-cart .wd-tools-icon::before {
  font-size: 18px !important;
}

/* Hide the "LOGIN / REGISTER" text label so only the icon
   shows in the top bar (matches the app). Targets every
   plausible Woodmart class name for the account label. */
body [class*="whb"] .wd-header-account .wd-tools-text,
body [class*="whb"] .wd-header-account .wd-tools-title,
body [class*="whb"] .wd-header-account .wd-tools-label,
body [class*="whb"] .wd-header-account .wd-header-account-title,
body [class*="whb"] .wd-header-account .account-page-title,
body [class*="whb"] .wd-header-account .wd-account-text,
body [class*="whb"] .wd-header-account a > span:not([class*="icon"]):not(.wd-tools-icon),
body [class*="whb"] .wd-tools-element.wd-account .wd-tools-text,
body [class*="whb"] .wd-tools-element.wd-account .wd-tools-title,
body [class*="whb"] .wd-account-text,
body [class*="whb"] .wd-tools-account .wd-tools-text {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  font-size: 0 !important;
}

/* Hide cart text labels (price, subtotal, "Cart" word) so only
   the icon + count badge show — matches the app's clean cart
   button. Keeps .wd-cart-number (the count badge) visible. */
body [class*="whb"] .wd-header-cart .wd-tools-text,
body [class*="whb"] .wd-header-cart .wd-tools-title,
body [class*="whb"] .wd-header-cart .wd-tools-label,
body [class*="whb"] .wd-header-cart .wd-cart-subtotal,
body [class*="whb"] .wd-header-cart .wd-cart-totals,
body [class*="whb"] .wd-header-cart .amount,
body [class*="whb"] .wd-header-cart > a > span:not([class*="icon"]):not(.wd-cart-number):not(.wd-tools-icon),
body [class*="whb"] .wd-tools-cart .wd-tools-text,
body [class*="whb"] .wd-tools-element.wd-header-cart .wd-tools-text,
body [class*="whb"] .wd-tools-element.wd-header-cart .wd-cart-subtotal {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  font-size: 0 !important;
}

/* Cart count badge — proper circle pinned to the top-right
   corner of the cart icon button, peeking just outside it.
   Need overflow: visible on the parent so the badge isn't
   clipped by the button's rounded corners. */
body [class*="whb"] .wd-header-cart,
body [class*="whb"] .wd-header-cart > a,
body [class*="whb"] .wd-tools-element.wd-header-cart {
  position: relative !important;
  overflow: visible !important;
}
body [class*="whb"] .wd-header-cart .wd-tools-icon {
  overflow: visible !important;
}
body [class*="whb"] .wd-cart-number {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--bg-gold-400), var(--bg-gold-500)) !important;
  color: var(--bg-purple-900) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  font-family: var(--bg-font-sans), -apple-system, sans-serif !important;
}

/* ─── Menu row (header bottom) ───
   White row that sits below the dark main header. Dark purple
   text on white, with a purple underline indicator on hover
   and on the active page. Matches the iOS app style. */

/* The row itself — white background, NOT transparent, override
   the section-7 transparent rule via :not(.whb-sticky-row)
   which already excluded it; we need to also explicitly set
   white here. */
body [class*="whb"] .whb-header-bottom,
body [class*="whb"] .whb-row.whb-header-bottom,
body .whb-header .whb-row.whb-header-bottom,
body .whb-header > .whb-header-bottom {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body [class*="whb"] .whb-header-bottom .wd-header-nav-element,
body [class*="whb"] .whb-header-bottom .wd-header-main-nav {
  width: 100% !important;
}

/* Menu items inside the bottom row — dark gray text, normal
   weight, title case (the JS in bg-custom.js converts the
   uppercase WP menu titles to title case). */
body [class*="whb"] .whb-header-bottom .menu-item > a,
body [class*="whb"] .whb-header-bottom .item-level-0 > a,
body [class*="whb"] .whb-header-bottom .menu-item > a *,
body [class*="whb"] .whb-header-bottom .menu-item-title,
body [class*="whb"] .whb-header-bottom .nav-link-text {
  position: relative;
  color: #4b5563 !important; /* gray-600 */
  font-weight: 500 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--bg-font-sans), -apple-system, sans-serif !important;
}

body [class*="whb"] .whb-header-bottom .menu-item > a {
  padding: 16px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s ease;
}

/* Hover underline indicator — slides in from center, purple */
body [class*="whb"] .whb-header-bottom .menu-item > a::after,
body [class*="whb"] .whb-header-bottom .item-level-0 > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--bg-purple-700);
  border-radius: 3px 3px 0 0;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

body [class*="whb"] .whb-header-bottom .menu-item:hover > a,
body [class*="whb"] .whb-header-bottom .menu-item:hover > a * {
  color: var(--bg-purple-700) !important;
}

body [class*="whb"] .whb-header-bottom .menu-item:hover > a::after,
body [class*="whb"] .whb-header-bottom .item-level-0:hover > a::after,
body [class*="whb"] .whb-header-bottom .menu-item.current-menu-item > a::after,
body [class*="whb"] .whb-header-bottom .menu-item.current-menu-ancestor > a::after {
  width: calc(100% - 40px);
}

/* Active menu item — purple text + permanent purple underline */
body [class*="whb"] .whb-header-bottom .menu-item.current-menu-item > a,
body [class*="whb"] .whb-header-bottom .menu-item.current-menu-item > a *,
body [class*="whb"] .whb-header-bottom .menu-item.current-menu-ancestor > a,
body [class*="whb"] .whb-header-bottom .menu-item.current-menu-ancestor > a * {
  color: var(--bg-purple-700) !important;
  font-weight: 600 !important;
}

/* ─── Dropdown submenus ───
   The header's white-text rule above makes ALL anchors inside
   the header white, including dropdown submenu items that
   open on a light background. We re-style the dropdown panel
   with a white background + dark text + tight padding.

   Selectors use [class*="whb"] attribute matching so the rules
   apply to BOTH the static header AND the sticky header (which
   spawns under different wrapper classes), AND to nested
   third-level submenus (.sub-menu .sub-menu). */

/* Dropdown panel — white box, rounded, tight padding. Targets
   .sub-menu, .wd-dropdown-menu and any nested .sub-menu inside. */
body [class*="whb"] .sub-menu,
body [class*="whb"] ul.sub-menu,
body [class*="whb"] .wd-dropdown-menu,
body [class*="whb"] .wd-sub-menu,
body [class*="whb"] .wd-dropdown,
body [class*="wd-header"] .sub-menu,
body [class*="wd-header"] .wd-dropdown-menu,
body [class*="whb"] .sub-menu .sub-menu,
body [class*="wd-header"] .sub-menu .sub-menu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(53, 3, 97, 0.18) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  /* Tight, symmetric 4px padding — overrides the UL browser
     default of padding-inline-start: 40px AND any left-padding
     Woodmart was adding via wrapper classes. */
  padding: 4px !important;
  padding-top: 4px !important;
  padding-right: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 4px !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  min-width: 220px !important;
  width: auto !important;
}

/* Reset Woodmart's default <li> padding/margin so my padding
   is the only one that takes effect. Also force each item to
   fill the full width of the dropdown. */
body [class*="whb"] .sub-menu .menu-item,
body [class*="whb"] .sub-menu li,
body [class*="whb"] .wd-dropdown-menu .menu-item,
body [class*="whb"] .wd-dropdown-menu li,
body [class*="wd-header"] .sub-menu .menu-item,
body [class*="wd-header"] .sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Item anchor — flexbox so the chevron arrow gets pushed to
   the far right edge instead of merging with the text. */
body [class*="whb"] .sub-menu a,
body [class*="whb"] .sub-menu .menu-item > a,
body [class*="whb"] .sub-menu li > a,
body [class*="whb"] .wd-dropdown-menu a,
body [class*="whb"] .wd-sub-menu a,
body [class*="whb"] .wd-dropdown a,
body [class*="wd-header"] .sub-menu a,
body [class*="wd-header"] .wd-dropdown-menu a {
  color: var(--bg-ink-deep) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  padding: 7px 12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin: 1px 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  border: 0 !important;
  text-decoration: none !important;
}

/* Inner span/title — Woodmart wraps menu text in a span and
   applies uppercase + bold there. The anchor's styles don't
   reach the inner text, so target it explicitly. */
body [class*="whb"] .sub-menu a *,
body [class*="whb"] .sub-menu .menu-item-title,
body [class*="whb"] .sub-menu .nav-link-text,
body [class*="whb"] .wd-dropdown-menu a *,
body [class*="whb"] .wd-dropdown-menu .menu-item-title,
body [class*="whb"] .wd-dropdown-menu .nav-link-text,
body [class*="wd-header"] .sub-menu a *,
body [class*="wd-header"] .sub-menu .menu-item-title {
  color: var(--bg-ink-deep) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--bg-font-sans), -apple-system, sans-serif !important;
}

/* Hover — purple text + light lavender background. NO
   padding-left shift this time (was causing layout jitter). */
body [class*="whb"] .sub-menu a:hover,
body [class*="whb"] .sub-menu .menu-item > a:hover,
body [class*="whb"] .wd-dropdown-menu a:hover,
body [class*="whb"] .wd-sub-menu a:hover,
body [class*="wd-header"] .sub-menu a:hover {
  color: var(--bg-purple-700) !important;
  background: var(--bg-purple-50) !important;
}
body [class*="whb"] .sub-menu a:hover *,
body [class*="whb"] .sub-menu a:hover .menu-item-title,
body [class*="whb"] .wd-dropdown-menu a:hover *,
body [class*="wd-header"] .sub-menu a:hover * {
  color: var(--bg-purple-700) !important;
}

/* Chevron for "menu-item-has-children" — flexbox above already
   pushes it to the far right via justify-content: space-between.
   Just style it: purple, with a small left margin so it never
   touches the text. */
body [class*="whb"] .sub-menu .menu-item-has-children > a::after,
body [class*="whb"] .wd-dropdown-menu .menu-item-has-children > a::after,
body [class*="whb"] .sub-menu .menu-item-has-children > a > .menu-item-arrow,
body [class*="wd-header"] .sub-menu .menu-item-has-children > a::after {
  color: var(--bg-purple-400) !important;
  margin-left: 12px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   8. SITE FOOTER (DARK) — legacy Woodmart footer styling.
   The custom footer in section 8b takes precedence on pages
   where footer.php loads it. These rules only apply on pages
   that fall back to Woodmart's footer (e.g. admin previews).
   ============================================================ */
.site-footer,
.footer-container {
  background: linear-gradient(180deg, var(--bg-ink-deep) 0%, #0d0018 100%) !important;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}
.site-footer a,
.footer-container a {
  color: var(--bg-purple-200);
}
.site-footer a:hover,
.footer-container a:hover {
  color: var(--bg-gold-400);
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer .widget-title,
.footer-container .widget-title {
  color: #ffffff !important;
}

/* ============================================================
   8b. CUSTOM FOOTER (rendered by child theme footer.php)
   Mirrors the Next.js Footer component: dark gradient, glow,
   4-column grid (Brand / Shop / Company / Stay Updated),
   social icons, payment trust badges, copyright bar.
   ============================================================ */
.bg-custom-footer {
  position: relative;
  background: linear-gradient(180deg, #1a0030 0%, #0d0018 100%);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--bg-font-sans), -apple-system, sans-serif;
}

.bg-custom-footer__glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 200px;
  background: rgba(146, 21, 173, 0.10);
  border-radius: 999px;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.bg-custom-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 32px 24px;
}

.bg-custom-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .bg-custom-footer__grid {
    grid-template-columns: 4fr 2fr 2fr 4fr;
    gap: 40px;
  }
}

.bg-custom-footer__col {
  min-width: 0;
}

/* Brand column */
.bg-custom-footer__logo img {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}
.bg-custom-footer__tagline {
  color: rgba(216, 180, 254, 0.6);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 0 24px 0;
}
.bg-custom-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.bg-custom-footer__social-link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--bg-purple-300);
}
.bg-custom-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(192, 132, 252, 0.30);
  transform: scale(1.10);
  color: var(--bg-purple-200);
}
.bg-custom-footer__social-link svg {
  width: 16px;
  height: 16px;
}

/* Link list columns */
.bg-custom-footer__heading {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(192, 132, 252, 0.80);
  margin: 0 0 20px 0;
  font-family: var(--bg-font-sans), -apple-system, sans-serif;
}
.bg-custom-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bg-custom-footer__list a {
  color: rgba(216, 180, 254, 0.50);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bg-custom-footer__list a:hover {
  color: #ffffff;
}

/* CTA column */
.bg-custom-footer__cta-text {
  color: rgba(216, 180, 254, 0.50);
  font-size: 14px;
  margin: 0 0 16px 0;
  line-height: 1.6;
}
.bg-custom-footer__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to right, #9215ad, #c026d3);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(146, 21, 173, 0.20);
  transition: opacity 0.2s ease;
}
.bg-custom-footer__cta-button:hover {
  opacity: 0.9;
  color: #ffffff;
}
.bg-custom-footer__cta-button svg {
  width: 16px;
  height: 16px;
}

.bg-custom-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.bg-custom-footer__badges span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(192, 132, 252, 0.40);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 8px;
}

/* Bottom copyright bar */
.bg-custom-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 768px) {
  .bg-custom-footer__bottom {
    flex-direction: row;
  }
}
.bg-custom-footer__bottom p {
  font-size: 12px;
  color: rgba(192, 132, 252, 0.40);
  margin: 0;
}

/* ============================================================
   9. CART DRAWER (Woodmart side cart)
   Restyles the slide-out mini cart to match the look.
   ============================================================ */
.wd-side-hidden.wd-cart-drawer,
.wd-cart-drawer {
  background: #ffffff;
}
.wd-cart-drawer .wd-heading,
.wd-cart-drawer .widget-title {
  color: var(--bg-ink-deep) !important;
  font-weight: 800 !important;
}
.wd-cart-drawer .price {
  color: var(--bg-purple-700) !important;
  font-weight: 800 !important;
}
.wd-cart-drawer .checkout {
  background: linear-gradient(135deg, var(--bg-purple-700), var(--bg-purple-600)) !important;
  color: #ffffff !important;
}

/* ============================================================
   10. FORMS (inputs, selects, textareas)
   The :not(.qty) exclusion keeps WooCommerce quantity inputs
   out of this rule — they get dedicated styling in section 10b.
   ============================================================ */
input[type="text"]:not(.qty),
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"]:not(.qty),
input[type="search"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border-radius: 12px !important;
  border: 1px solid #e5e5e5 !important;
  padding: 12px 16px !important;
  font-family: var(--bg-font-sans) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:not(.qty):focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:not(.qty):focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--bg-purple-500) !important;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15) !important;
  outline: none !important;
}

/* ============================================================
   10b. WOOCOMMERCE QUANTITY SELECTOR
   Restyles the - / qty / + control on product pages and cart.
   Targets both Woodmart's wrapper and the standard WC markup.
   ============================================================ */
.quantity,
.woocommerce .quantity,
.wd-qty,
.wd-style-default .quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
}

.quantity input.qty,
.woocommerce .quantity input.qty,
.wd-qty input.qty {
  width: 56px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--bg-ink-deep) !important;
  font-family: var(--bg-font-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.quantity input.qty:focus {
  border-color: var(--bg-purple-500) !important;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15) !important;
  outline: none !important;
}

/* The - and + buttons */
.quantity .minus,
.quantity .plus,
.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.wd-qty .minus,
.wd-qty .plus,
.wd-buttons .minus,
.wd-buttons .plus {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--bg-purple-700) !important;
  font-family: var(--bg-font-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  padding: 0 !important;
}

.quantity .minus:hover,
.quantity .plus:hover,
.woocommerce .quantity .minus:hover,
.woocommerce .quantity .plus:hover,
.wd-qty .minus:hover,
.wd-qty .plus:hover {
  background: var(--bg-purple-700) !important;
  color: #ffffff !important;
  border-color: var(--bg-purple-700) !important;
}

/* ============================================================
   11. FLOATING WHATSAPP BUTTON
   Add this to the body via functions.php (already wired) so
   it's available on every page like in the Next.js site.
   ============================================================ */
.bg-whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease;
  text-decoration: none;
}
.bg-whatsapp-fab:hover {
  transform: scale(1.1);
}
.bg-whatsapp-fab svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
}

/* ============================================================
   12. PAGE-LEVEL HELPERS
   Generic section padding & max-widths matching the Next.js
   layout so any custom page content is consistent.
   ============================================================ */
.bg-section { padding: 64px 16px; }
.bg-container { max-width: 1280px; margin: 0 auto; }

@media (min-width: 768px) {
  .bg-section { padding: 80px 24px; }
}

/* ─── Remove the white gap between the dark header and the
   first hero on the homepage. Woodmart/Elementor add a default
   top padding to the page wrapper which leaves a visible
   white strip. Force it to zero on .home and on any page where
   the first child of <main> is our hero section. */
body.home .main-page-wrapper,
body.home .site-content,
body.home #main,
body.home main,
body.home #content,
body.home .page-wrapper,
body.home .container > .main-page-wrapper,
body.home .elementor-location-header + *,
body.home .site-content > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Belt-and-braces: zero the top spacing on the very first
   Elementor section / container of the homepage so even if
   another wrapper was injected we still butt up against the
   header cleanly. */
body.home main > *:first-child,
body.home #main > *:first-child,
body.home .main-page-wrapper > *:first-child,
body.home .elementor-location-single > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   12b. HERO BANNER
   Self-contained block users paste into an Elementor HTML
   widget (or Gutenberg Custom HTML block). Mirrors the
   Next.js HeroBanner component.
   ============================================================ */
.bg-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a0030 0%, #350361 50%, #4a0e7a 100%);
  min-height: 560px;
  isolation: isolate;
  /* Break out of any parent container's max-width / padding so the
     hero spans the full viewport width even when wrapped in an
     Elementor container with default page padding. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bg-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.bg-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #1a0030 0%, rgba(26, 0, 48, 0.85) 40%, transparent 80%);
  z-index: 1;
}
.bg-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px;
}
.bg-hero__content {
  max-width: 600px;
  color: #ffffff;
}
.bg-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(53, 3, 97, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
}
.bg-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}
.bg-hero__badge-text {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e9d5ff;
}
.bg-hero__title {
  font-size: clamp(36px, 6vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
}
.bg-hero__title .text-gradient-gold {
  display: inline-block;
}
.bg-hero__tagline {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px 0;
}
.bg-hero__desc {
  font-size: 15px;
  color: rgba(216, 180, 254, 0.8);
  max-width: 520px;
  line-height: 1.6;
  margin: 0 0 32px 0;
}
.bg-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.bg-hero__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 16px 32px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 16px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bg-hero__cta--gold {
  background: linear-gradient(to right, #f59e0b, #fbbf24) !important;
  color: #350361 !important;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.3);
}
.bg-hero__cta--gold:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.4);
  color: #1a0030 !important;
}
.bg-hero__cta--glass {
  background: rgba(53, 3, 97, 0.6) !important;
  color: #ffffff !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bg-hero__cta--glass:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}
.bg-hero__cta svg {
  width: 18px;
  height: 18px;
}
.bg-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media (min-width: 768px) {
  .bg-hero__stats { gap: 48px; }
}
.bg-hero__stat-value {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}
.bg-hero__stat-label {
  font-size: 10px;
  color: rgba(216, 180, 254, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
.bg-hero__sparkle {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.bg-hero__sparkle--1 { top: 20%; left: 10%; width: 8px; height: 8px; background: #fbbf24; opacity: 0.6; }
.bg-hero__sparkle--2 { top: 32%; left: 25%; width: 6px; height: 6px; background: #d8b4fe; opacity: 0.5; }
.bg-hero__sparkle--3 { bottom: 24%; left: 15%; width: 10px; height: 10px; background: #fcd34d; opacity: 0.4; }

/* ─── Hero ticker (gold marquee bar) ─── */
.bg-hero-ticker {
  position: relative;
  z-index: 3; /* sit above .bg-hero__overlay (z-index 1) and .bg-hero__bg */
  background: linear-gradient(to right, #f59e0b, #fbbf24, #f59e0b);
  padding: 12px 0;
  overflow: hidden;
}
.bg-hero-ticker__track {
  display: inline-flex;
  white-space: nowrap;
  animation: bg-marquee 30s linear infinite;
}
.bg-hero-ticker__group {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  font-size: 14px;
  font-weight: 700;
  color: #350361;
}
.bg-hero-ticker__group span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   13. STAGGERED LIST ANIMATION
   Apply to a parent of cards/grid items to fade them in
   sequentially.
   ============================================================ */
.stagger-children > * {
  opacity: 0;
  animation: bg-slide-up 0.5s ease-out forwards;
}
.stagger-children > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-children > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger-children > *:nth-child(9)  { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.50s; }