/* ========================================== 
   VICKIE MILLER – MASTER CUSTOM STYLESHEET
   Cleaned + Structured (Divi 4 → Divi 5 Ready)
   Copied from STAGING/TESTING - 2/23/2026
========================================== */

/* ==========================================
   1. GLOBAL UTILITIES
========================================== */

.fullwidth-mega {
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}

body.et-fb {
  scroll-behavior:auto!important;
}

.et-fb .et_pb_section {
  transform:none!important;
}

/* ==========================================
   2. NAVIGATION
========================================== */

/* Hide cart + search */
#et-top-navigation .et-cart-info,
#et_top_search {
  display:none!important;
}

.mmm-nav-menu .mmm-label {
  background: none;
  color: #FD26BB!important; // hot pink
  font-weight: 700;
  font-size: 0.65em;
  margin-left: 6px;
  vertical-align: super;
  letter-spacing: 0.3px;
}

.wavwatch-nav-menu .new-label {
  background: none;
  color: #FD26BB!important; // hot pink
  font-weight: 700;
  font-size: 0.65em;
  margin-left: 6px;
  vertical-align: super;
  letter-spacing: 0.3px;
}

/* ShiftNav cleanup */
.shiftnav-inner .shiftnav-menu li,
.shiftnav-inner .shiftnav-menu li a {
  border-bottom:none!important;
  box-shadow:none!important;
}

/* ==========================================
   3. DIVI LAYOUT ADJUSTMENTS
========================================== */

@media (min-width:1280px){
  #page-container{
    top:0!important;
    padding-top:0!important;
  }
}

@media (max-width:1279px){
  #page-container{
    top:35px!important;
    padding-top:35px!important;
  }
}

/* ==========================================
   4. HOMEPAGE
========================================== */

/* REMOVE THIS - TESTING ONLY 
.home_hero{
  min-height:100vh;
  padding:10vh 0;
  overflow:hidden;
}
*/

/* ==========================================
   5. ICON SYSTEM (FA4 – via ShiftNav)
========================================== */

.icon-list ul{
  list-style:none;
  padding:0;
  margin:0;
}

.icon-list ul li{
  position:relative;
  padding-left:28px;
  margin-bottom:6px;
}


.icon-list ul li::before {
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:0;
}

/* =====================================
   ICON BASE FONT ENFORCEMENT
===================================== */

.icon-list ul li::before,
.icon-inline::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: inline-block;
}

/* =====================================
   FIX – FLEX VARIANTS RESET POSITIONING
===================================== */

.icon-list.icon-center ul li::before,
.icon-list.icon-left ul li::before,
.icon-list.icon-right ul li::before {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* ICON TYPES */
.icon-circle ul li::before{content:"\f111";}
.icon-hand ul li::before{content:"\f0a4";}
.icon-heart ul li::before{content:"\f004";}
.icon-horse ul li::before{content:"\f6f0";}
.icon-lotus ul li::before{content:"\f5bb";}
.icon-moon ul li::before{content:"\f186";}
.icon-paw ul li::before{content:"\f1b0";}
.icon-square ul li::before{content:"\f0c8";}
.icon-star ul li::before{content:"\f005";}

/* =============================================
   INLINE ICON MAPPING – FA6
   ============================================= */

.icon-list li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 8px;
}

/* Individual Icons */

.icon-circle::before{content:"\f111";}
.icon-hand::before{content:"\f0a4";}
.icon-heart::before{content:"\f004";}
.icon-horse::before{content:"\f6f0";}
.icon-lotus::before{content:"\f5bb";}
.icon-moon::before{content:"\f186";}
.icon-paw ul li::before{content:"\f1b0";}
.icon-square::before{content:"\f0c8";}
.icon-star::before{content:"\f005";}

/* ==================================================
   ICON SYSTEM — Right-aligned text (flex solution)
   ================================================== */

.icon-list.icon-right ul {
  text-align: right;
}

.icon-list.icon-right ul li {
  display: flex;
  justify-content: flex-end;   /* push content to right */
  align-items: center;
  gap: 8px;                    /* space between icon & text */
  padding-left: 0 !important;
  padding-right: 0;
}

/* Remove absolute positioning for this variant */
.icon-list.icon-right ul li::before {
  position: static;
  margin: 0;
}

/* ================================
   ICON LIST — LEFT JUSTIFIED
================================ */

.icon-list.icon-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-list.icon-left ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.icon-list.icon-left ul li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* ================================
   ICON LIST — CENTERED TEXT
================================ */

.icon-list.icon-center ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-list.icon-center ul li {
  display: flex;
  align-items: center;
  justify-content: center; /* center whole row */
  gap: 10px;               /* space between icon & text */
  margin-bottom: 10px;
  text-align: center;
}

.icon-list.icon-center ul li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* =====================================
   ICON COLOR MODIFIERS
===================================== */

/* Brand Gold */
.icon-gold ul li::before,
.icon-inline.icon-gold::before {
  color: #CC9D44;
}

/* Teal */
.icon-teal ul li::before,
.icon-inline.icon-teal::before {
  color: #00C3CC;
}

/* White */
.icon-white ul li::before,
.icon-inline.icon-white::before {
  color: #ffffff;
}

/* Soft Rose */
.icon-rose ul li::before,
.icon-inline.icon-rose::before {
  color: #f06292;
}

/* Deep Plum */
.icon-plum ul li::before,
.icon-inline.icon-plum::before {
  color: #6a1b9a;
}

/* Black */
.icon-black ul li::before,
.icon-inline.icon-black::before {
  color: #000000;
}

/* Muted */
.icon-muted ul li::before,
.icon-inline.icon-muted::before {
  color: #777777;
}

/* Orange */
.icon-orange ul li::before,
.icon-inline.icon-orange::before {
  color: #FF5F1F;
}

/* =====================================
   ICON SIZE MODIFIERS
===================================== */

.icon-sm ul li::before,
.icon-inline.icon-sm::before {
  font-size: 0.85em;
}

.icon-md ul li::before,
.icon-inline.icon-md::before {
  font-size: 1.1em;
}

.icon-lg ul li::before,
.icon-inline.icon-lg::before {
  font-size: 1.4em;
}

.icon-xl ul li::before,
.icon-inline.icon-xl::before {
  font-size: 1.8em;
}

/* =====================================
   ICON GLOW EFFECT
===================================== */

.icon-glow ul li::before,
.icon-inline.icon-glow::before {
  text-shadow:
    0 0 6px rgba(255,255,255,0.6),
    0 0 12px rgba(255,215,0,0.6),
    0 0 18px rgba(255,200,100,0.5);
}

.icon-glow-soft ul li::before,
.icon-inline.icon-glow-soft::before {
  text-shadow:
    0 0 5px rgba(255,255,255,0.4),
    0 0 10px rgba(255,255,255,0.3);
}

/* =====================================
   ICON GRADIENT STYLE
===================================== */

.icon-gradient ul li::before,
.icon-inline.icon-gradient::before {
  background: linear-gradient(45deg, #CC9D44, #f06292, #00C3CC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-gradient-goddess ul li::before,
.icon-inline.icon-gradient-goddess::before {
  background: linear-gradient(60deg, #d4af37, #ff69b4, #9c27b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================
   DARK MODE ADAPTIVE ICONS
===================================== */

.section-dark .icon-list ul li::before,
.section-dark .icon-inline::before {
  color: #ffffff;
}

.section-light .icon-list ul li::before,
.section-light .icon-inline::before {
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  .icon-auto ul li::before,
  .icon-inline.icon-auto::before {
    color: #ffffff;
  }
}

/* =====================================
   ICON TYPE MAPPINGS (PER-ITEM)
   Use on individual <li> or inline spans
===================================== */

.icon-heart::before { content: "\f004"; }
.icon-moon::before  { content: "\f186"; }
.icon-star::before  { content: "\f005"; }
.icon-lotus::before { content: "\f5bb"; }
.icon-horse::before { content: "\f6f0"; }
.icon-hand::before  { content: "\f0a4"; }
.icon-paw ::before  { content:"\f1b0";  }

/* =====================================
   LEGACY ICON SYSTEM (DEPRECATED)
   Use only for older modules that relied
   on absolute-position bullet icons.
   Remove after full Divi 5 transition.
===================================== */

.icon-legacy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-legacy ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 6px;
}

.icon-legacy ul li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
}

.icon-hover-lift ul li::before,
.icon-inline.icon-hover-lift::before {
  transition: all .3s ease;
}

.icon-hover-lift ul li:hover::before,
.icon-inline.icon-hover-lift:hover::before {
  transform: translateY(-3px);
}

/* Constellation divider */
.constellation-divider {
    position: relative;
}

.constellation-divider .et_pb_divider_internal {
    background: linear-gradient(
        90deg,
        transparent,
        #D8B36A,
        #F2D28B,
        #D8B36A,
        transparent
    );
    height: 2px;
}

/* star cluster */
.constellation-divider:after{
content:"★ ★ ★";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%) translateY(6px);
color:#E7C77D;
font-size:18px;
letter-spacing:3px;

text-shadow:
0 0 6px rgba(255,215,140,.9),
0 0 12px rgba(255,210,120,.7),
0 0 20px rgba(231,199,125,.5);
}

/* ==========================================
   6. MAGICAL UNIVERSITY
========================================== */

.mu-switcher .dsm-switch-inner{
  background:#83236a!important;
}

.mu-price-text h3{
  font-family:'Montagna LTD',sans-serif;
  font-weight:700;
}

/* ==========================================
   7. WOO COMMERCE
========================================== */

/* Product Grid Flex */
.woocommerce ul.products{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2em;
}

.woocommerce ul.products li.product{
  flex:0 1 calc(25% - 2em);
}

@media(max-width:768px){
  .woocommerce ul.products li.product{
    flex:0 1 calc(50% - 2em);
  }
}

@media(max-width:480px){
  .woocommerce ul.products li.product{
    flex:100%;
  }
}

/* ==========================================
  8. WooCommerce Product Gallery – Divi Optimized
Forces consistent 1:1 product gallery
========================================== */

/* Reset Woo gallery height issues */

.single-product .flex-viewport{
height:auto !important;
max-height:none !important;
}

/* Force square gallery container */

.single-product .woocommerce-product-gallery__image{
aspect-ratio:1 / 1;
width:100%;
overflow:hidden;
position:relative;
}

/* Make images fill square properly */

.single-product .woocommerce-product-gallery__image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* Prevent zoom container from breaking layout */

.single-product .zoomImg{
max-width:none !important;
max-height:none !important;
}

/* Improve thumbnail layout */

.single-product .flex-control-thumbs{
display:flex !important;
gap:10px;
justify-content:center;
margin-top:10px;
}

.single-product .flex-control-thumbs li{
flex:0 0 auto;
}

.single-product .flex-control-thumbs img{
border-radius:6px;
transition:opacity .2s ease;
}

.single-product .flex-control-thumbs img:hover{
opacity:.75;
}

/* ==========================================
  9. WOO COMMERCE STABILITY FIXES (Divi + Woo)
Prevents gallery height glitches and layout shifts
========================================== */

/* Prevent FlexSlider height jump */

.single-product .woocommerce-product-gallery{
height:auto !important;
}

/* Ensure viewport never collapses */

.single-product .flex-viewport{
overflow:hidden;
}

/* Prevent thumbnails wrapping on small screens */

.single-product .flex-control-thumbs{
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:5px;
}

/* Smooth thumbnail scrolling */

.single-product .flex-control-thumbs::-webkit-scrollbar{
height:6px;
}

.single-product .flex-control-thumbs::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:6px;
}

/* Prevent Divi from stretching product columns */

.single-product div.product{
align-items:flex-start;
}

/* Fix occasional zoom container overflow */

.single-product .woocommerce-product-gallery__wrapper{
overflow:hidden;
}

/* ==========================================
   CRYSTAL IMAGE SWATCHES – FINAL VERSION
   ========================================== */

/* Base styling */
.woo-variation-swatches .variable-item {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    font-size: 0 !important;
    color: transparent !important;
    border: 2px solid #e5e5e5 !important;
    transition: all 0.2s ease !important;
}


.woo-variation-swatches .variable-item:hover {
    transform: scale(1.05);
    border-color: #c6a85b !important;
}


.woo-variation-swatches .variable-item.selected {
    border-color: #b59f5b !important;
    box-shadow: 0 0 0 2px rgba(181,159,91,0.25) !important;
}


/* =========================
   INDIVIDUAL COLOR MAPPINGS
   ========================= */

.variable-item.button-variable-item-blue-kyanite {
    background-image: url('/wp-content/uploads/2026/02/swatch-blue-kyanite-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-bronze-smoky-quartz {
    background-image: url('/wp-content/uploads/2026/02/swatch-bronze-smoky-quartz-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-gold-citrine {
    background-image: url('/wp-content/uploads/2026/02/swatch-gold-citrine-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-green-fluorite {
    background-image: url('/wp-content/uploads/2026/02/swatch-green-fluorite-120x120-1.jpg') !important;
}

.button-variable-item-green-chrysoprase {
    background-image: url('/wp-content/uploads/2026/03/swatch-green-chrysoprase-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-orange-orange-calcite {
    background-image: url('/wp-content/uploads/2026/02/swatch-orange-orange-calcite-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-pink-rose-quartz {
    background-image: url('/wp-content/uploads/2026/02/swatch-pink-quartz-120x120-1.jpg') !important;
}

.button-variable-item-purple-amethyst {
    background-image: url('/wp-content/uploads/2026/03/swatch-purple-amethyst-ver2-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-red-amber {
    background-image: url('/wp-content/uploads/2026/02/swatch-red-amber-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-red-carnelian {
    background-image: url('/wp-content/uploads/2026/02/swatch-red-carnelian-120x120-1.jpg') !important;
}

.variable-item.button-variable-item-yellow-citrine {
    background-image: url('/wp-content/uploads/2026/02/swatch-yellow-citrine-120x120-1.jpg') !important;
}

/* Hide WPC radio buttons only for crystal color */
.wpcvrb-wrapper[data-attribute_name="attribute_pa_crystal_color"] {
    display: none !important;
}

/* Selected variation text (Crystal Color) */
body .woo-variation-items-wrapper .woo-selected-variation-item-name {
color: #ffffff !important;
font-weight: 600 !important;
}

/* Variation label (e.g., "Color:", "Size:") */
.label {
    color: #ffffff !important;
}

/* Selected variation text (e.g., "Red", "Medium") */
.woo-selected-variation-item-name {
    color: #ffffff !important;
    font-weight: 600; /* optional, but looks good on transparent backgrounds */
}

et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td.value .reset_variations
 {
    color: #ffffff!important;
    float: left!important;
    margin-top: 1em;
}

/* ==========================================
WooCommerce Variation Price Styling
========================================== */

.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-price span.price,
.single-product .woocommerce-variation-price .woocommerce-Price-amount{
color:#ffffff !important;
font-weight:700;
line-height:1.2;
}

/* Desktop */

@media (min-width:981px){

.single-product .woocommerce-variation-price .woocommerce-Price-amount{
font-size:1.5rem;
}

}

/* Tablet */

@media (max-width:980px){

.single-product .woocommerce-variation-price .woocommerce-Price-amount{
font-size:1.35rem;
}

}

/* Mobile */

@media (max-width:480px){

.single-product .woocommerce-variation-price .woocommerce-Price-amount{
font-size:1.2rem;
}

}

/* ==========================================
   8. FLODESK
========================================== */

#fd-modal{
  position:fixed!important;
  inset:0;
  z-index:999999!important;
  isolation:isolate!important;
}

#fd-modal .fd-modal-content{
  position:fixed!important;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:24px;
  border-radius:12px;
}

/* ================================
   FLODESK MOBILE STABILITY FIX
================================ */

@media (max-width: 980px) {

  .flodesk-popup,
  .fd-modal,
  .fd-overlay .fd-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
  }

  /* Ensure close button stays visible */
  .flodesk-popup .close,
  .fd-modal .fd-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 1000000 !important;
  }

}

/* ==========================================
   9. ANIMATIONS
========================================== */

.dl-shadow-pulse{
  animation:shadow-pulse 3s infinite;
}

@keyframes shadow-pulse{
  0%{box-shadow:0 0 #ff0099;}
  50%{box-shadow:0 0 0 .25em transparent;}
  100%{box-shadow:0 0 transparent;}
}

/* =============================================
   MOBILE HORIZONTAL ICON LIST
   ============================================= */

@media (max-width: 768px) {

  .icon-list {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-left: 0;
  }

  .icon-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
  }

}

/* =============================================
DIVI THEME BUILDER HEADER SCROLL FIX
Applies to:

* Single WooCommerce Product Pages
* WooCommerce Product Category Pages
  Compatible with ShiftNav wrapper
  ============================================= */

/* ---------------------------------------------

1. Remove Layout Compensation (No Top Gap)
   --------------------------------------------- */

body.single-product #page-container,
body.tax-product_cat #page-container {
padding-top: 0 !important;
}

/* ---------------------------------------------
2. Remove Header From Normal Flow
--------------------------------------------- */

body.single-product .et-l--header,
body.tax-product_cat .et-l--header {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}

/* ---------------------------------------------
3. Scroll Animation (Hide Until Scroll)
--------------------------------------------- */

.pa-product-hide-header {
transform: translateY(-100%);
transition: transform 0.4s ease;
}

.pa-product-hide-header.pa-show-header {
transform: translateY(0);
}

/* ---------------------------------------------
4. Safety: Prevent ShiftNav Wrapper Interference
--------------------------------------------- */

body.single-product .shiftnav-wrap,
body.tax-product_cat .shiftnav-wrap {
padding-top: 0 !important;
}

/* =============================================
   RESPONSIVE HEADER + HERO SPACING FIXES
   - Tablet top gap under ShiftNav
   - Mobile/Tablet hero compression
   - Horizontal icon layout on mobile
   ============================================= */


/* =============================================
   1. TABLET – REMOVE TOP GAP UNDER SHIFTNAV
   ============================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  body.tax-product_cat #main-content,
  body.single-product #main-content {
      margin-top: 0px; /* adjust +/- 5px if needed */
  }

}


/* =============================================
   2. MOBILE + TABLET HERO COMPRESSION
   ============================================= */

@media (max-width: 1024px) {

  /* Reduce spacing under subtitle */
  .et_pb_section .et_pb_text p {
      margin-bottom: 6px;
  }

  /* Tighten icon list spacing */
  .icon-list {
      margin-top: 6px;
      margin-bottom: 6px;
  }

  /* Tighten breadcrumb spacing */
  body.tax-product_cat .woocommerce .woocommerce-breadcrumb {
      margin: 5px 0 5px 0 !important;
      padding: 0 !important;
  }
}


/* =============================================
   3. MOBILE ONLY – HORIZONTAL ICON LIST
   ============================================= */

@media (max-width: 767px) {

  .icon-list {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding-left: 0;
  }

  .icon-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
  }

  /* Optional: Slight hero padding reduction */
 .mobile-icon-list-wrapper {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
	
/* =============================================
   VISUAL BUILDER SAFE MODE – SHIFTNAV TABLET
   ============================================= */

@media (min-width: 769px) and (max-width: 1279px) {

  .et-fb #shift-nav-toggle-main {
      top: 120px !important;
  }

}

/* =============================================
   HERO COMPRESSION – PRODUCT CATEGORY
   Mobile + Tablet
   ============================================= */

@media (max-width: 1279px) {

  /* 1. Section spacing */
  body.tax-product_cat .et_pb_section:first-of-type {
      padding-top: 50px !important;
      padding-bottom: 25px !important;
  }

  /* 2. Row spacing */
  body.tax-product_cat .et_pb_section:first-of-type .et_pb_row {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
  }

  /* 3. Column spacing */
  body.tax-product_cat .et_pb_section:first-of-type .et_pb_column {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  /* 4. Heading + paragraph spacing */
  body.tax-product_cat .et_pb_section:first-of-type h1,
  body.tax-product_cat .et_pb_section:first-of-type p {
      margin-bottom: 10px !important;
  }

  /* 5. Icon list spacing */
  body.tax-product_cat .icon-list {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      padding-left: 0 !important;
  }

}

/* =============================================
   HERO TIGHTENING – PRODUCT CATEGORY MOBILE
   ============================================= */

@media (max-width: 768px) {

  /* Reduce spacing under hero text column */
  body.tax-product_cat .et_pb_section:first-of-type .et_pb_column {
      margin-bottom: 5px !important;
  }

  /* Tighten icon list spacing */
  body.tax-product_cat .icon-list {
      margin-top: 5px !important;
      margin-bottom: 5px !important;
  }

  /* Pull product grid upward */
  body.tax-product_cat .woocommerce {
      margin-top: -45px !important;
  }

}

/* =============================================
   REMOVE EXTRA GAP ABOVE BREADCRUMB ROW
   ============================================= */

@media (max-width: 768px) {

  body.tax-product_cat .et_pb_row_1_tb_body {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

}

/* =============================================
   FORCE REMOVE HERO → BREADCRUMB GAP
   ============================================= */

@media (max-width: 768px) {

  body.tax-product_cat .et-db #et-boc .et-l .et_pb_row_1_tb_body.et_pb_row {
      padding-top: 0 !important;
  }

}

/* =============================================
   REMOVE DIVI STACKED COLUMN GAP (PRODUCT CAT)
   ============================================= */

@media (max-width: 980px) {

  body.tax-product_cat .et-db #et-boc .et-l .et_pb_row_1_tb_body .et_pb_column {
      margin-bottom: 0 !important;
  }

}

/* FORCE SQUARE PRODUCT IMAGE AREA – DIVI WOO MODULE */

.et_pb_shop ul.products li.product .shop-image {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  display: block;
}

.et_pb_shop ul.products li.product .shop-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ===== FORCE FLEX ICON SYSTEM ===== */

.icon-list ul li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.icon-list.icon-right ul li {
  justify-content: flex-end !important;
  text-align: right !important;
}

.icon-list.icon-left ul li {
  justify-content: flex-start !important;
}

.icon-list.icon-center ul li {
  justify-content: center !important;
}

@media (max-width: 768px) {

  .icon-list.icon-right ul li {
    justify-content: center !important;
    text-align: center !important;
  }

}

.icon-list ul {
  width: 100%;
}

@media (max-width: 768px) {
  .icon-list ul li {
    justify-content: center !important;
  }
}

/* ==========================================
   FIRE HORSE HOME HERO
========================================== */

.fire-horse-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (max-width: 980px) {
  .fire-horse-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================
   SHIFTNAV – STABLE HEADER SYSTEM (0226)
========================================== */

/* -----------------------------
   DESKTOP / GLOBAL
------------------------------*/

/* Toggle bar height */
.shiftnav-toggle-main {
    height: 60px !important;
}

/* Inner container */
.shiftnav-main-toggle-content {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo container */
.shiftnav-logo-main-block {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    padding: 0 15px !important;
}

/* Logo image */
.shiftnav-logo-main-block img {
    max-height: 40px !important;
    height: auto !important;
    width: auto !important;
}


/* -----------------------------
   MOBILE + TABLET
------------------------------*/

@media (max-width: 980px) {

  /* Hard reset padding from ShiftNav */
  #shiftnav-toggle-main .shiftnav-main-toggle-content,
  #shiftnav-toggle-main .shiftnav-toggle-main-block {
      padding: 0 20px !important;
      height: 52px !important;
      min-height: 52px !important;
  }

  #shiftnav-toggle-main .shiftnav-main-toggle-content {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
  }

  #shiftnav-toggle-main img {
    max-height: 80px !important; /* try 65-85px */
    width: auto !important;
  }

}



/* ==========================================
   HOME 0226 – KILL DIVI MOBILE GAP
========================================== */

@media only screen and (max-width: 768px) {

  body.page-id-16720 .et_pb_section:first-of-type {
      padding-top: 0 !important;
  }

}

/* ==========================================
   Fire Horse Hero Height – FINAL
========================================== */

@media (min-width: 981px) {

  .fire-horse-section {
    min-height: calc(100vh - 155px);
    display: flex;
    flex-direction: column;
  }

  .fire-horse-section > .et_pb_row:first-child {
    flex: 1;
  }

  .fire-horse-section > .et_pb_row:last-child {
    margin-top: auto;
  }

}

/* ==========================================
   SHIFTNAV FIXED HEADER OFFSET – TABLET
   ========================================== */

:root {
  --shift-toggle-height: 60px;
}

@media (min-width: 769px) and (max-width: 1279px) {

  .et-l--body {
      padding-top: var(--shift-toggle-height) !important;
  }

}

/* ==========================================
   SHIFTNAV GLASS PANEL (VM D5)
========================================== */

/* main slide-out panel */

.shiftnav {

    background: rgba(12,12,18,.65) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-left: 1px solid rgba(231,199,125,.25);

}


/* subtle gold glow */

.shiftnav::before {

    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(231,199,125,.18),
            transparent 45%
        );

    pointer-events:none;

}


/* menu links */

.shiftnav-menu li a {

    font-family:"Cinzel", serif;
    font-size:18px;
    letter-spacing:.05em;
    color:#f4e7c2;

}


/* hover glow */

.shiftnav-menu li a:hover {

    color:#ffffff;
    text-shadow:0 0 10px rgba(231,199,125,.7);

}

/* ==========================================
   SHIFTNAV GLASS PANEL OVERRIDE
========================================== */

.shiftnav {

    background-color: rgba(25,18,22,.55) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

}

.shiftnav::after {

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(20,15,18,.25),
        rgba(20,15,18,.55)
    );

    pointer-events:none;

}

.shiftnav .shiftnav-close {

    color:#E7C77D;
    font-size:24px;

}

/* ==========================================
   SHIFTNAV LOGO HEADER
========================================== */

.vm-shiftnav-header {

  position:relative;
  padding:10px 16px;
  text-align:left;

}

.vm-shiftnav-logo {

  max-width:140px;
  width:100%;
  height:auto;
  margin:0 auto;
  display:block;

}


/* ==========================================
   SPARKLE FIELD
========================================== */

.vm-sparkles{

  position:absolute;
  inset:0;
  pointer-events:none;

}

.vm-sparkles::before,
.vm-sparkles::after{

  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(circle, rgba(231,199,125,.8) 1px, transparent 2px);

  background-size:120px 120px;

  animation:vmSparkleMove 14s linear infinite;

  opacity:.35;

}

.vm-sparkles::after{

  background-size:180px 180px;
  animation-duration:22s;
  opacity:.25;

}


/* ==========================================
   SPARKLE MOTION
========================================== */

@keyframes vmSparkleMove{

  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(-200px);
  }

}

.vm-shiftnav-header::before{

  content:"";
  position:absolute;
  inset:0;

  background:radial-gradient(
      circle at center,
      rgba(231,199,125,.18),
      transparent 55%
  );

  pointer-events:none;

}

/* ==========================================
   HIDE DIVI DEFAULT HEADER (NOT MENU MODULE)
========================================== */

/* Hide ONLY the theme header (Divi default) */
#main-header,
#top-header {
    display: none !important;
}

/* Keep Divi Menu module visible */
.et_pb_menu {
    display: flex !important;
}

/* Hide Divi mobile hamburger ONLY if needed */
.et_mobile_nav_menu {
    display: none !important;
}

/* =========================================
   Hide ShiftNav in Divi 5 Builder Interface
========================================= */

/* Hide ShiftNav toggle injected into Divi builder UI */
body.et-fb-admin-bar #shift-nav-toggle-main,
body.et-fb-admin-bar .shift-nav-toggle {
    display: none !important;
}

/* Allow toggle inside the preview iframe */
body.et-fb .shift-nav-toggle {
    display: block !important;
}

/* =========================================
   Hero Text Row Adjustments
========================================= */

/* DESKTOP */
.hero-text-row {
  max-width: 560px !important;
  padding-top: clamp(12px,14vh,52px);
  padding-left: clamp(60px,6vw,160px);
  margin-left: 0;
  margin-right: 0;
}

/* TABLET + MOBILE */
@media (max-width: 980px){
  .hero-text-row {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================
   Hero Text (Glow Effect)
========================================= */

.hero-glow	{

text-shadow:
0 0 10px rgba(255,230,160,0.45),
0 0 22px rgba(255,210,120,0.35),
0 0 40px rgba(255,180,90,0.25);

}

/*
.hero-text-row {
outline: 3px solid red;
}
*/

/* =========================================
   Awaken Your Magic (Soft Glow Pulse)
========================================= */

.vm-magic-glow-text {
  position: relative;
  color: #f5f7f2;
  text-shadow:
    0 0 5px rgba(255, 223, 150, 0.6),
    0 0 10px rgba(255, 200, 100, 0.5),
    0 0 20px rgba(255, 180, 80, 0.4);
  animation: vmGlowPulse 3s ease-in-out infinite;
  white-space: nowrap !important;
}

@keyframes vmGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 223, 150, 0.6),
      0 0 10px rgba(255, 200, 100, 0.5),
      0 0 20px rgba(255, 180, 80, 0.4);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 223, 150, 0.9),
      0 0 20px rgba(255, 200, 100, 0.7),
      0 0 30px rgba(255, 180, 80, 0.6);
  }
}


/* =========================================
   MAGIC PIXIE DUST — REFINED / RIGHT-SHIFTED
   ========================================= */

.vm-magic-fireworks {
  position: relative;
  display: inline-block;
  white-space: nowrap; /* keeps "Magic" on one line */
}

/* Shared base */
.vm-magic-fireworks::before,
.vm-magic-fireworks::after {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}


/* =========================================
   VM MAGIC FIREWORKS (BURST + PAUSE SYSTEM)
   ========================================= */

/* MAIN DUST LAYER (slightly right of center) */
.vm-magic-fireworks::before {
  content: "★ ✦ ★";
  left: 65%;
  transform: translateX(-50%);

  color: #E7C77D;
  font-size: 9px;
  letter-spacing: 5px;
  opacity: 0;

  text-shadow:
    0 0 4px rgba(231, 199, 125, 0.8),
    0 0 8px rgba(231, 199, 125, 0.5),
    -10px -12px #E7C77D,
    12px -18px #fff3c4,
    -16px -28px #E7C77D;

  /* shorter burst, longer pause baked into keyframes */
  animation: vmPixieFloat1 5s ease-out 3 forwards;
}

/* SECONDARY LAYER (offset + more organic timing) */
.vm-magic-fireworks::after {
  content: "✦ ★";
  left: 72%;
  transform: translateX(-50%);

  color: #fff3c4;
  font-size: 6px;
  letter-spacing: 6px;
  opacity: 0;

  text-shadow:
    0 0 3px rgba(255, 243, 196, 0.8),
    0 0 6px rgba(231, 199, 125, 0.5),
    -14px -20px #fff3c4,
    10px -26px #E7C77D,
    4px -36px #fff3c4;

  /* staggered + slightly different duration */
  animation: vmPixieFloat2 6.5s ease-out infinite 1.3s;
}


/* =========================================
   ANIMATIONS (BURST → PAUSE TIMELINE)
   ========================================= */

@keyframes vmPixieFloat1 {

  /* idle */
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.6);
  }

  /* burst begins */
  10% {
    opacity: 1;
  }

  /* active float */
  25% {
    opacity: 0.9;
    transform: translate(-46%, -22px) scale(1.05);
  }

  /* fade out */
  35% {
    opacity: 0;
  }

  /* HOLD (pause for rest of loop) */
  100% {
    opacity: 0;
    transform: translate(-46%, -22px) scale(1.05);
  }
}


@keyframes vmPixieFloat2 {

  /* idle */
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.5);
  }

  /* delayed burst */
  15% {
    opacity: 1;
  }

  /* slightly higher / wider motion */
  30% {
    opacity: 0.85;
    transform: translate(-56%, -30px) scale(1.15);
  }

  /* fade */
  45% {
    opacity: 0;
  }

  /* longer idle window */
  100% {
    opacity: 0;
    transform: translate(-56%, -30px) scale(1.15);
  }
}


/* =========================================
   HERO LOAD BURST (ADD ONLY — DO NOT REPLACE)
   ========================================= */

.vm-magic-fireworks.is-burst::before {
  animation: vmPixieBurst1 1.2s ease-out 1;
}

.vm-magic-fireworks.is-burst::after {
  animation: vmPixieBurst2 1.4s ease-out 1;
}

/* Burst animations (stronger + faster) */

@keyframes vmPixieBurst1 {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.6);
  }
  30% {
    opacity: 1;
    transform: translate(-45%, -25px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-45%, -40px) scale(1.3);
  }
}

@keyframes vmPixieBurst2 {
  0% {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.5);
  }
  35% {
    opacity: 1;
    transform: translate(-55%, -30px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-55%, -50px) scale(1.4);
  }
}

/* =========================================
   MOBILE TUNING
   ========================================= */

@media (max-width: 767px) {
  .vm-magic-fireworks::before {
    font-size: 6px;
    left: 60%;
  }

  .vm-magic-fireworks::after {
    font-size: 5px;
    left: 68%;
  }
}

/* =========================================
   DIVI SAFETY (refined for hero system)
========================================= */

.et_pb_text {
  overflow: visible !important;
}

@media (max-width: 767px){

  /* Keep hero spacing intact */
  .hero-section {
    padding-top: 100px !important;
  }

  /* Prevent column weird offsets WITHOUT killing spacing */
  .hero-section .et_pb_column {
    margin-left: 0 !important;
  }

  .hero-section h1{
    margin-bottom: 8px !important;
  }

  .hero-section h2{
    margin-top: 0 !important;
  }

}

@media (max-width: 980px){
  .hero-section {
    padding-top: 110px;
  }
}

/* MOBILE icon size fix */
@media (max-width: 767px){
.hero-icon .et-pb-icon,
.hero-icon i{
    font-size: 28px !important;
}
}

/* GOLD GLOW EFFECT */
.hero-icon .et-pb-icon,
.hero-icon i{
    color: #F5E6C5;
    filter:
        drop-shadow(0 0 6px rgba(255,215,140,.7))
        drop-shadow(0 0 12px rgba(231,199,125,.5));
    transition: all 0.3s ease;
}

.hero-icon:hover .et-pb-icon,
.hero-icon:hover i{
    filter:
        drop-shadow(0 0 8px rgba(255,215,140,.9))
        drop-shadow(0 0 18px rgba(231,199,125,.7));
}

/* ================================
   VICKIE HERO LIST – FINAL ANIMATION
================================ */

/* Reset clean base */
.icon-list ul{
list-style:none;
margin:0;
padding:0;
}

/* Base list item */
.icon-list ul li{
position:relative;
padding-left:28px;
margin-bottom:10px;
opacity:0;
transform:translateY(12px);
}

/* Star icon */
/* star styling */
.icon-list .star{
color:#E7C77D;
margin-right:8px;
display:inline-block;
}

/* animation */
.icon-list ul li{
opacity:0;
transform:translateY(12px);
animation: vmGlowUp 0.55s ease forwards;
}

/* stagger */
.icon-list ul li:nth-child(1){ animation-delay:1.0s; }
.icon-list ul li:nth-child(2){ animation-delay:1.1s; }
.icon-list ul li:nth-child(3){ animation-delay:1.2s; }
.icon-list ul li:nth-child(4){ animation-delay:1.3s; }

/* glow reveal */
@keyframes vmGlowUp{
0%{
opacity:0;
transform:translateY(12px);
filter:blur(6px);
}
60%{
opacity:1;
transform:translateY(0);
filter:blur(0);
}
100%{
opacity:1;
}
}

/* STAGGER (with hero delay) */
.icon-list ul li:nth-child(1){
animation-delay:1.0s;
}
.icon-list ul li:nth-child(2){
animation-delay:1.1s;
}
.icon-list ul li:nth-child(3){
animation-delay:1.2s;
}
.icon-list ul li:nth-child(4){
animation-delay:1.3s;
}

/* match star timing */
.icon-list ul li:nth-child(1)::before{ animation-delay:1.0s; }
.icon-list ul li:nth-child(2)::before{ animation-delay:1.1s; }
.icon-list ul li:nth-child(3)::before{ animation-delay:1.2s; }
.icon-list ul li:nth-child(4)::before{ animation-delay:1.3s; }

/* KEYFRAMES */

@keyframes vmGlowUp{
0%{
opacity:0;
transform:translateY(12px);
filter:blur(6px);
text-shadow:0 0 0 rgba(231,199,125,0);
}
60%{
opacity:1;
transform:translateY(0);
filter:blur(0);
text-shadow:0 0 12px rgba(231,199,125,.6);
}
100%{
text-shadow:0 0 4px rgba(231,199,125,.25);
}
}

@keyframes vmStarPulse{
0%{
transform:scale(0.6);
filter:brightness(1);
}
50%{
transform:scale(1.25);
filter:brightness(1.8);
}
100%{
transform:scale(1);
filter:brightness(1);
}
}

/* ================================
   MOBILE FIX (CRITICAL)
================================ */

@media (max-width: 767px){

.icon-list ul{
display:block !important;
}

.icon-list ul li{
display:block !important;
font-size:16px;
padding-left:26px;
line-height:1.4em;
}

.icon-list{
max-width:280px;
margin:0 auto;
}

}

/* FIX disappearing animation */
.icon-list ul li{
animation-fill-mode: forwards !important;
animation-iteration-count: 1 !important;
}

/* prevent reflow flicker */
.icon-list ul li{
will-change: opacity, transform;
backface-visibility: hidden;
}

/* ensure final state sticks */
.icon-list ul li.animated{
opacity:1 !important;
transform:none !important;
}

.icon-list ul li,
.icon-list .star{
opacity:1 !important;
transform:none !important;
animation:none !important;
}

/* ================================
   HERO LIST – MOBILE WIDTH FIX
================================ */

@media (max-width: 767px){

/* expand text module width */
.icon-list{
max-width: 90vw !important;
width: 90vw !important;
}

/* prevent wrapping */
.icon-list ul li{
white-space: nowrap;
}

/* spacing between star + text */
.icon-list ul li{
padding-left: 30px;
}

/* star positioning */
.icon-list ul li::before,
.icon-list .star{
left: 0;
margin-right: 10px;
}

/* optional: tighten font slightly for safety */
.icon-list ul li{
font-size: 15px;
}

}

/* ================================
   HERO BOTTOM SPACING – RESPONSIVE
================================ */

/* Small phones (Galaxy S10 etc) */
@media (max-width: 480px){
.hero-bottom-content{
padding-bottom: 60px;
}
}

/* Larger phones (iPhone 12–15, Pro Max, etc) */
@media (min-width: 481px) and (max-width: 767px){
.hero-bottom-content{
padding-bottom: 90px;
}
}

/* Tablets */
@media (min-width: 768px) and (max-width: 980px){
.hero-bottom-content{
padding-bottom: 140px;
}
}

@media (max-width: 980px){

.hero-bottom-content{
padding-bottom: 60px;
}

}

/* =========================================
   HORSE WHISPERER (Hero Min Height)
   ========================================= */

/* Base fallback (mobile first) */
.horse-hero-section {
  min-height: 600px;
}

@media (max-width: 767px) {
  .horse-hero-section {
    min-height: 82vh;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .horse-hero-section {
    min-height: 90vh;
  }
}

/* Desktop (1280+) */
@media (min-width: 1280px) {
  .horse-hero-section {
    min-height: 92vh;
  }
}

/* Large Desktop (1920+) */
@media (min-width: 1920px) {
  .horse-hero-section {
    min-height: 100vh;
  }
}

/* Ultra-wide (2560+) */
@media (min-width: 2560px) {
  .horse-hero-section {
    min-height: 96vh;
  }
}

.horse-hero-section .et_pb_bottom_divider {
  bottom: 0;
}

/* =========================================
   HORSE WHISPERER (Soft Glow Pulse)
========================================= */

.vm-horse-glow-text .et_pb_text_inner h1 {
  position: relative;
  color: #f5f7f2 !important;
  text-shadow:
    0 0 5px rgba(255, 223, 150, 0.6),
    0 0 10px rgba(255, 200, 100, 0.5),
    0 0 20px rgba(255, 180, 80, 0.4);
  animation: vmGlowPulse 3s ease-in-out infinite;
  white-space: nowrap !important;
}

@keyframes vmGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 223, 150, 0.6),
      0 0 10px rgba(255, 200, 100, 0.5),
      0 0 20px rgba(255, 180, 80, 0.4);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 223, 150, 0.9),
      0 0 20px rgba(255, 200, 100, 0.7),
      0 0 30px rgba(255, 180, 80, 0.6);
  }
}

/* =========================================
   HORSE WHISPERER HERO (Horse Icon List Text)
========================================= */

.vm-horse-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .vm-horse-list ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .vm-horse-list ul li::before {
    content: "\f6f0"; /* horse icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    flex-shrink: 0;
  }

@media (max-width: 767px) {

  .vm-horse-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .vm-horse-list ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .vm-horse-list ul li::before {
    content: "\f6f0"; /* horse icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    flex-shrink: 0;
  }

}


/* =========================================
   HORSE WHISPERER TESTIMONIALS (Soft Glow Pulse)
========================================= */

.vm-horse-testimonials-glow-text h2 {
  position: relative;
  color: #f5f7f2 !important;
  text-shadow:
    0 0 5px rgba(255, 223, 150, 0.6),
    0 0 10px rgba(255, 200, 100, 0.5),
    0 0 20px rgba(255, 180, 80, 0.4);
  animation: vmGlowPulse 3s ease-in-out infinite;
  white-space: nowrap !important;
}

@keyframes vmGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 223, 150, 0.6),
      0 0 10px rgba(255, 200, 100, 0.5),
      0 0 20px rgba(255, 180, 80, 0.4);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 223, 150, 0.9),
      0 0 20px rgba(255, 200, 100, 0.7),
      0 0 30px rgba(255, 180, 80, 0.6);
  }
}

/* ================================
  HW PRICING GRID – DESKTOP (3 COL)
   ================================ */

@media (min-width: 981px) {

  /* Kill Divi column constraints */
  .vm-pricing-grid.et_pb_pricing_tables {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto; /* centers grid */
  }

  /* Reset pricing table sizing */
  .vm-pricing-grid .et_pb_pricing_table {
    width: 100% !important;
    margin: 0 !important;
  }

}

/* Tablet */
@media (max-width: 980px) {
  .vm-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .vm-pricing-grid {
    grid-template-columns: 1fr;
  }
}

.vm-pricing-grid {
  align-items: stretch;
}

.vm-pricing-grid .et_pb_pricing_table {
  height: 100%;
}

/* =========================================
   PET COMMM HERO (Horse Icon List Text)
========================================= */

.vm-pet-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .vm-pet-list ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .vm-pet-list ul li::before {
    content: "\f1b0"; /* paw icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    flex-shrink: 0;
  }

@media (max-width: 767px) {

  .vm-pet-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .vm-pet-list ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .vm-pet-list ul li::before {
    content: "\f1b0"; /* paw icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    flex-shrink: 0;
  }

}

/* ================================
  PET COMM PRICING GRID – DESKTOP (2 COL)
   ================================ */

@media (min-width: 981px) {

  /* Kill Divi column constraints */
  .vm-pet-pricing-grid.et_pb_pricing_tables {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;

    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto; /* centers grid */
  }

  /* Reset pricing table sizing */
  .vm-pet-pricing-grid .et_pb_pricing_table {
    width: 100% !important;
    margin: 0 !important;
  }

}

/* Tablet */
@media (max-width: 980px) {
  .vm-pet-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .vm-pet-pricing-grid {
    grid-template-columns: 1fr;
  }
}

.vm-pet-pricing-grid {
  align-items: stretch;
}

.vm-pet-pricing-grid .et_pb_pricing_table {
  height: 100%;
}

/* =========================================
   ABOUT VICKIE HERO (About Icon List Text)
========================================= */

.vm-about-list li::before{
  content: "\f186"; /* moon icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
}

@media (max-width: 767px){

  /* reset list spacing */
  .vm-about-list ul{
    padding-left: 0;
    margin-left: 0;
  }

  /* align icon + text cleanly */
  .vm-about-list li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px; /* improved vertical rhythm */
    font-size: 15px;     /* optional: better mobile scaling */
    line-height: 1.4;
  }

  /* control icon spacing */
  .vm-about-list li::before{
    margin-right: 0; /* gap handles spacing now */
  }

}

/* =========================================
   FINAL FIX: Remove ShiftNav Body Offset
========================================= */

body.shiftnav-disable-shift-body {
    padding-top: 0 !important;
}

/* Hero sections (extra breathing room) */
.hero-section {
    padding-top: 120px;
}

/* Hide ShiftNav on desktop */
@media (min-width: 1100px) {
    #shift-nav-toggle-main {
        display: none !important;
    }
}

/* Hide Divi menu on mobile */
@media (max-width: 1099px) {
    #main-header {
        display: none !important;
    }
}

/* Remove default Divi menu spacing */
.et_pb_menu .et_pb_menu__wrap {
    margin: 0 !important;
}

.et_pb_menu ul {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   FIX: Divi 5 Builder Header Scrollbar
========================================= */

/* Prevent header overflow inside Divi builder */
.et-fb-frame .et-l--header,
.et-fb-frame header {
    overflow: visible !important;
    max-height: none !important;
}

/* Kill tiny scrollbars in builder only */
.et-fb-frame body {
    overflow-y: hidden !important;
}

/* Prevent Divi header from creating scroll container */
.et-l--header {
    height: auto !important;
    max-height: none !important;
}

/* Disable header scroll effects inside Divi builder */
.et-fb-frame .et-l--header {
    transform: none !important;
    position: relative !important;
}

/* =========================================
   HERO OFFSET FOR TRANSPARENT HEADER
========================================= */

.hero-section {
    padding-top: 140px;
}

/* ================================
   HERO SECTION HEIGHT SYSTEM
   (Header-aware)
================================ */

/* Base: Mobile → Small Desktop */
.hero-section {
  min-height: clamp(480px, 80vh, 900px);
  padding-top: 120px; /* offset for header */
}

/* Large Desktop (1440–1919) */
@media (min-width: 1440px) {
  .hero-section {
    min-height: 900px;
    padding-top: 130px;
  }
}

/* XL Desktop (1920–2559) */
@media (min-width: 1920px) {
  .hero-section {
    min-height: 1000px;
    padding-top: 140px;
  }
}

/* Ultra-wide (2560+) */
@media (min-width: 2560px) {
  .hero-section {
    min-height: 1100px;
    padding-top: 160px;
  }
}

/* =========================================
   TIGHTEN HEADER ROW HEIGHT
========================================= */

.et-l--header .et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove internal menu spacing */
.et-l--header .et_pb_menu__wrap {
    margin: 0 !important;
}

.et-l--header .et_pb_menu ul {
    padding: 0 !important;
    margin: 0 !important;
}

.et-l--header .et_pb_menu__menu > nav > ul > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* ================================
   DESKTOP HEADER (DIVI)
================================ */

/* Ensure header behaves predictably */
.et-l--header {
    position: relative;
    z-index: 9999;
}

/* ================================
   GLOBAL CONTENT OFFSET
================================ */

body:not(.home) .et_pb_section:first-of-type {
    padding-top: 100px;
}

/* ================================
   HERO SYSTEM
================================ */

.hero-section,
.vm-hero {
    padding-top: 140px !important;
}

.home .hero-section {
    padding-top: 0 !important;
}

/* =========================================
   HERO HEIGHT FIX — TABLET LANDSCAPE ONLY
========================================= */

@media (min-width: 1024px) and (max-width: 1366px) {

  .vm-hero {
    min-height: 85vh !important;
  }

}

/* ================================
   HERO ICON ROW – FLEX CONTROL
================================ */

.hero-icon-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

/* ================================
   SMALL PHONES → 2 ROW LAYOUT
================================ */

@media (max-width: 380px){

.hero-icon-row{
    flex-wrap: wrap;
    gap: 18px 30px;
}

/* Each icon block */
.hero-icon-row .et_pb_module{
    flex: 0 0 45%;   /* 2 per row */
    text-align: center;
}

}

@media (max-width: 390px){

.hero-icon-row .et_pb_module{
    margin-bottom: 4px;
}

.hero-icon-row .et_pb_text_inner{
    font-size: 12px;
    line-height: 1.2em;
}

.hero-icon-row img,
.hero-icon-row .et-pb-icon{
    font-size: 22px;
}

}

@media (min-width: 400px) and (max-width: 767px){

.hero-icon-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 30px;
}

/* each icon group */
.hero-icon-row .et_pb_module{
    flex: 0 0 45%;
    text-align: center;
}

}

.hero-icon-row .et_pb_text_inner{
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
}

/* ================================
   HERO LIST – MOBILE LEFT OFFSET
================================ */

@media (max-width: 767px){

.icon-list.icon-left ul{
    padding-left: 12px;
}

}

@media (max-width: 767px){

.icon-list.icon-left ul li{
    gap: 6px;
    margin-bottom: 8px;
}

}

@media (max-width: 767px){

.icon-list.icon-left ul li::before{
    margin-right: 6px;
    left: 0;
}

}

/* =========================
   HERO LIST – MOBILE FIX (REAL FIX)
========================= */

@media (max-width: 980px){

  /* 1. Kill column constraint */
  .hero-text-row .et_pb_column{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. Kill Divi auto-centering */
  .hero-text-row .et_pb_text{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3. Reset inner wrapper */
  .hero-text-row .et_pb_text_inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4. Now control your list */
  .hero-text-row .icon-list{
    padding-left: 16px !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

}

/* =========================
   HERO ONLY OVERRIDES
========================= */

@media (max-width: 980px){

  /* Fix container behavior */
  .hero-text-row .et_pb_column{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-text-row .et_pb_text{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Override ONLY hero list */
  .hero-text-row .icon-list{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 16px !important;
  }

}

/* =========================
   HERO LIST – FORCE LEFT (FINAL)
========================= */

@media (max-width: 980px){

  /* target the actual module Divi is rendering */
  .et_pb_text_1.et_pb_module{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* reset inner container */
  .et_pb_text_1 .et_pb_text_inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* now control list position */
  .et_pb_text_1 .icon-list{
    margin-left: 0 !important;
    padding-left: 16px !important;
    width: 100% !important;
  }

}

@media (max-width: 980px){

  .et_pb_row .et_pb_text.et_pb_text_1{
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

}

/* =========================================
   VIP HERO – RESET (SAFE)
========================================= */

.page-id-19323 .vip-hero-section {
  padding-top: 75px !important;
  margin-top: 0 !important;
}


/* =========================================
   SHIFTNAV OFFSET (ONLY MOBILE/TABLET)
========================================= */

/* Mobile */
@media (max-width: 767px) {
  .page-id-19323 .vip-hero-section {
    padding-top: 50px; /* tweak 65–85px */
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-id-19323 .vip-hero-section {
    padding-top: 50px;
  }
}

/* =========================================
   MOBILE STACK STABILIZATION (SAFE)
========================================= */

@media (max-width: 480px) {
  .page-id-19323 .vip-hero-section .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-id-19323 .vip-hero-section .et_pb_column {
    margin-bottom: 10px;
  }
}

/* ==========================================
   DIVI 5 TB MENU
========================================== */

/* =========================================
   DIVI 5 TB MENU (FINAL)
========================================= */

/* Logo vertical positioning */
.et_pb_menu__logo {
  position: relative;
  top: -8px;
  z-index: 10;
  margin-left: 25px; /* optical alignment fix */
}

/* Header padding */
.et_pb_menu {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Align logo + menu */
.et_pb_menu__wrap {
  align-items: center;
}

/* Micro vertical alignment */
.et_pb_menu__logo img {
  transform: translateY(2px);
}

/* Match hero grid */
.et_pb_menu .et_pb_row {
  padding-left: 50px;
  padding-right: 50px;
}

/* --- LEGACY ICON-LIST NEUTRALIZER --- */
.icon-list,
.icon-list ul,
.icon-list li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* =========================================
   VM ICON LIST SYSTEM (CLEAN + FINAL)
   ========================================= */

.vm-icon-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  text-align: left;
}

/* LEFT-ALIGNED (DEFAULT FLEX) */
.vm-icon-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0px !important;
}

/* RIGHT-ALIGNED VARIANT */
.vm-icon-list--right {
  padding-left: 0;
  margin: 0;
}

/* 🔥 CRITICAL OVERRIDE */
.vm-icon-list--right li {
  display: block !important;
  position: relative;
  padding-left: 22px;
  margin-bottom: 0px !important;
}

/* ICON */
.vm-icon-list--right li::before {
  content: "\f186";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  position: absolute;
  left: 0;
  top: 3px;

  font-size: 16px;
  color: #faf3eb;
  text-shadow: 0 0 6px rgba(231, 199, 125, 0.6);
}

/* TEXT */
.vm-icon-list--right li span {
  display: block;
  text-align: right;
}
/* BASE ICON */
.vm-icon-list li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  flex-shrink: 0;
}

/* HERO VARIANT */
.vm-icon-list--hero li {
  font-size: 20px;
  line-height: 1.4;
}

/* CRESCENT MOON ICON */
.vm-icon-list.vm-icon-moon li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid */
  content: "\f186";
  font-size: 20px; /* increase size */
  color: #faf3eb;
  text-shadow: 0 0 6px rgba(231, 199, 125, 0.6);
}

/* STAR ICON */
.vm-icon-list.vm-icon-star li::before {
  content: "\f005";
  color: #faf3eb;
  font-size: 18px;
  text-shadow: 0 0 6px rgba(231, 199, 125, 0.6);
}

/* LOTUS ICON */
.vm-icon-list.vm-icon-lotus li::before {
  content: "\f5bb";
  color: #081C46 !important; /* Dark Blue */
  font-size: 24px!important;
  position: relative;
  top: 1px;
}

.vm-icon-list li::before {
  text-shadow:
    0 0 4px rgba(231, 199, 125, 0.4),
    0 0 8px rgba(231, 199, 125, 0.2);
}

/* MOBILE FIX */
@media (max-width: 767px) {
  .vm-icon-list li {
    align-items: flex-start;
    gap: 10px;
  }
}

/* KILL OLD DIVI ICON SYSTEM */
.icon-list ul li::before {
  content: none !important;
}

/* =========================================
   MAGIC FIREWORKS — DESKTOP ENHANCEMENT
========================================= */
@media (min-width: 1920px) {

  /* MAIN LAYER */
  .vm-magic-fireworks::before {
    font-size: 11px;           /* was 9px */
    letter-spacing: 6px;

    text-shadow:
      0 0 6px rgba(231, 199, 125, 0.9),
      0 0 12px rgba(231, 199, 125, 0.6),
      -12px -16px #E7C77D,
      14px -22px #fff3c4,
      -18px -34px #E7C77D;
  }

  /* SECONDARY LAYER */
  .vm-magic-fireworks::after {
    font-size: 8px;            /* was 6px */
    letter-spacing: 7px;

    text-shadow:
      0 0 5px rgba(255, 243, 196, 0.9),
      0 0 10px rgba(231, 199, 125, 0.6),
      -16px -24px #fff3c4,
      12px -30px #E7C77D,
      6px -42px #fff3c4;
  }

}

@media (min-width: 1920px) {

  @keyframes vmPixieFloat1 {
    0% {
      opacity: 0;
      transform: translate(-50%, 10px) scale(0.6);
    }
    30% { opacity: 1; }
    100% {
      opacity: 0;
      transform: translate(-42%, -55px) scale(1.2); /* was -38px */
    }
  }

  @keyframes vmPixieFloat2 {
    0% {
      opacity: 0;
      transform: translate(-50%, 12px) scale(0.5);
    }
    30% { opacity: 0.9; }
    100% {
      opacity: 0;
      transform: translate(-58%, -65px) scale(1.25); /* was -48px */
    }
  }

}

/* ==========================================
   FORCE SHIFTNAV FONT
========================================== */

#shiftnav-main,
#shiftnav-main ul,
#shiftnav-main li,
#shiftnav-main a {

  font-family: 'Nunito Sans', sans-serif !important;

}

/* =========================================
   ABOUT PAGE HERO – ROW WIDTH CONTROL (ID 10)
   ========================================= */

/* Base (covers 1440 and below desktop) */
body.page-id-10 .et_pb_section:first-of-type .et_pb_row {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* 1680px */
@media (min-width: 1600px) and (max-width: 1919px) {
  body.page-id-10 .et_pb_section:first-of-type .et_pb_row {
    max-width: 1200px;
  }
}

/* 1920px */
@media (min-width: 1920px) and (max-width: 2559px) {
  body.page-id-10 .et_pb_section:first-of-type .et_pb_row {
    max-width: 1280px;
  }
}

/* 2560px+ */
@media (min-width: 2560px) {
  body.page-id-10 .et_pb_section:first-of-type .et_pb_row {
    max-width: 1400px;
  }
}

/* SIMPLE HERO ICONS FIX (NO GRID) */

.hero-4icons-row {
  width: 100%;
  max-width: 900px !important;

  margin-left: auto;
  margin-right: clamp(40px, 8vw, 180px) !important;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* =========================================
   HOME MU PROMO ROW (FINAL)
   ========================================= */

.mu-promo-row {
  width: 100%;
  max-width: 600px; /* controls size of promo card */
  margin: 40px auto 0 auto;
}

/* Desktop alignment (slight right bias to match hero text) */
@media (min-width: 981px) {
  .mu-promo-row {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Mobile center */
@media (max-width: 980px) {
  .mu-promo-row {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
   HOME MU PROMO INNER CONTAINER FIX
   ========================================= */

.mu-promo-row {
  display: flex;
  justify-content: center; /* centers inner content */
}

/* constrain inner columns */
.mu-promo-row .et_pb_column {
  max-width: 900px; /* controls grouping */
  width: 100%;
}

/* force columns to sit next to each other nicely */
.mu-promo-row .et_pb_row_inner,
.mu-promo-row {
  gap: 20px;
}

/* LEFT (logo) tighten */
.mu-promo-row .et_pb_column:first-child {
  max-width: 300px;
}

/* RIGHT (text/button) */
.mu-promo-row .et_pb_column:last-child {
  max-width: 600px;
  text-align: right;
}

/* =====================
   MOBILE
===================== */

@media (max-width: 980px) {
  .mu-promo-row {
    flex-direction: column;
    align-items: center;
  }

  .mu-promo-row .et_pb_column {
    max-width: 100%;
    text-align: center;
  }
}

/* keep promo bar non-sticky */
.mu-promo-bar {
  position: relative;
  z-index: 5;
}

.mu-promo-row,
.mu-promo-row:hover {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== Divi 5 - Orgone Header Layout ===== */

.vm-orgone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Left text */
.vm-orgone-header__text h1 {
  margin-bottom: 0.5rem;
}

.vm-orgone-header__text h3 {
  font-weight: 400;
  line-height: 1.5;
}

/* Right icon list */
.vm-orgone-header__icons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

.vm-orgone-header__icons li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* FA6 icon styling */
.vm-orgone-header__icons i {
  color: #ffffff;
  font-size: 1.2em;
}

/* Mobile stacking */
@media (max-width: 768px) {
  .vm-orgone-header {
    flex-direction: column;
    text-align: center;
  }

  .vm-orgone-header__icons ul {
    text-align: center;
  }

  .vm-orgone-header__icons li {
    justify-content: center;
  }
}

/* ==========================================
   END MASTER STYLESHEET
========================================== */

/* ===== TEMP ICON DEBUG ===== 
.icon-list ul li {
  position: relative;
}

.icon-list ul li::before {
  content: "\f004" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  color: red !important;
  font-size: 22px !important;
}
*/