/* ==========================================
   VICKIE MILLER – MASTER CUSTOM STYLESHEET
   Cleaned + Structured (Divi 4 → Divi 5 Ready)
========================================== */

/* ==========================================
   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;
}

/* 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
========================================== */

.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:"FontAwesome";
  position:absolute;
  left:0;
  top:0;
}

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

/* ==========================================
   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%;
  }
}

/* Product Gallery */
.woocommerce-product-gallery__image:first-child{
  height:520px;
  overflow:hidden;
}

.woocommerce-product-gallery__image:first-child img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Thumbnails */
.flex-control-thumbs{
  display:flex!important;
  gap:10px;
  justify-content:center;
}

/* ==========================================
   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;
}

/* ==========================================
   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;}
}

/* ==========================================
   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;
}

.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;
}

.variable-item.button-variable-item-purple-amethyst {
    background-image: url('/wp-content/uploads/2026/02/swatch-purple-amethyst-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;
}

/* Hide product header initially */
.pa-product-hide-header {
    transform: translateY(-120%);
    transition: transform 0.35s ease-in-out;
}

/* Show on scroll */
.pa-product-hide-header.pa-show-header {
    transform: translateY(0);
}

/* ===================================
   WooCommerce Product Gallery Control
   =================================== */

/* ===== Featured Image (All Screens) ===== */
.woocommerce div.product 
.woocommerce-product-gallery__image:first-child {
    height: 520px;
    overflow: hidden;
}

.woocommerce div.product 
.woocommerce-product-gallery__image:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ===== Mobile Adjustment ===== */
@media (max-width: 767px) {
  .woocommerce div.product 
  .woocommerce-product-gallery__image:first-child {
      height: 380px;
  }
}

/* ===== Ensure Thumbnails Always Visible ===== */
.woocommerce div.product .woocommerce-product-gallery {
    overflow: visible !important;
}

.woocommerce div.product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: 15px !important;
    overflow-x: auto;
    padding-bottom: 5px;
}

.woocommerce div.product .flex-control-thumbs li {
    width: 70px !important;
    float: none !important;
}

.woocommerce div.product .flex-control-thumbs img {
    width: 100%;
    height: 70px !important;
    object-fit: cover;
    border-radius: 14px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
    opacity: 1;
}

/* ===================================
   WooCommerce Thumbnail Reset
   Prevent stretching from main image rules
   =================================== */

.woocommerce div.product .flex-control-thumbs img {
    width: 100% !important;
    height: auto !important;     /* THIS prevents vertical stretching */
    max-height: 70px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
}

.woocommerce div.product .flex-control-thumbs li {
    width: 70px !important;
    float: none !important;
}

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

.prod-icon-list ul li {
    color: #ffffff;
    font-weight: 600; /* keep text semi-bold */
    margin-bottom: 6px;
}

.prod-icon-list ul li::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: normal !important;   /* critical */
    font-style: normal !important;    /* critical */
    display: inline-block;
    width: 20px;
    margin-right: 10px;
    color: #ffffff;
}

.prod-icon-list ul li:nth-child(1)::before { content: "\f004"; }
.prod-icon-list ul li:nth-child(2)::before { content: "\f186"; }
.prod-icon-list ul li:nth-child(3)::before { content: "\f005"; }

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