/* --- UNIVERSAL BEAD WRAPPER --- */
/* Keeps all beads centered in a uniform box so text aligns perfectly */
.menu-bead-wrapper {
    width: 60px;  /* Fixed width to fit the largest 46px bead comfortably */
    height: 60px; /* Fixed height to keep all rows consistent */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 8px auto; /* Centers the wrapper itself and adds space below */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =========================================
   BEAD STYLES (ALWAYS LOADED)
   ========================================= */

/* --- RED AGATE --- */
.redagate-base {
    background-image: url('image/redagate.png') !important; 
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
    /* Shadow removed from here so the menu beads stay clean */
}

/* NEW: Premium shadow ONLY activates when the bead is on the bracelet string! */
#bracelet-container .redagate-base {
    box-shadow: 
        inset 4px 4px 10px rgba(255, 255, 255, 0.5),  
        inset -5px -5px 15px rgba(0, 0, 0, 0.45),     
        0 6px 12px rgba(0, 0, 0, 0.2),                
        0 15px 35px rgba(0, 0, 0, 0.15) !important;   
}

.style-redagate-12mm { width: 46px !important; height: 46px !important; }
.style-redagate-10mm { width: 38px !important; height: 38px !important; }
.style-redagate-8mm  { width: 30px !important; height: 30px !important; }
.style-redagate-6mm  { width: 23px !important; height: 23px !important; }

/* --- RED JASPER --- */
.redjasper-base {
    background-image: url('image/redjasper.png') !important; 
    background-size: 240% 240% !important; /* Scaled to fix transparent halo */
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
}

#bracelet-container .redjasper-base {
    box-shadow: 
        inset 4px 4px 10px rgba(255, 255, 255, 0.5),  
        inset -5px -5px 15px rgba(0, 0, 0, 0.45),     
        0 6px 12px rgba(0, 0, 0, 0.2),                
        0 15px 35px rgba(0, 0, 0, 0.15) !important;   
}

.style-redjasper-12mm { width: 46px !important; height: 46px !important; }
.style-redjasper-10mm { width: 38px !important; height: 38px !important; }
.style-redjasper-8mm  { width: 30px !important; height: 30px !important; }
.style-redjasper-6mm  { width: 23px !important; height: 23px !important; }

/* --- RED AGATE (RONDELLE) --- */
.redagate1-base {
    background-image: url('image/redagate1.png') !important; 
    background-size: 150% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    
    /* FIXED: Forces the bead to have pill/rondelle shape corners instead of a perfect circle! */
    border-radius: 5px !important; 
    
    /* The Magic 3D Effect */
    box-shadow: 
        inset -10px -10px 12px rgba(0, 0, 0, 0.4), 
        inset 3px 3px 8px rgba(255, 255, 255, 0.4),
        2px 4px 8px rgba(0, 0, 0, 0.3) !important;
    filter: contrast(1.05);
}

/* FIXED: We must define the specific width and height for 5x8mm! */
.style-redagate1-5x8mm { 
    width: 15px !important; 
    height: 30px !important; 
}

/* --- ROSE QUARTZ --- */
.rosequartz-base {
    background-image: url('image/rosequartz.png') !important; 
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
}

#bracelet-container .rosequartz-base, 
#bracelet-container .rosequartz-base:hover {
    box-shadow: none !important;
}

.style-rosequartz-12mm { width: 46px !important; height: 46px !important; }
.style-rosequartz-10mm { width: 38px !important; height: 38px !important; }
.style-rosequartz-8mm  { width: 30px !important; height: 30px !important; }
.style-rosequartz-6mm  { width: 23px !important; height: 23px !important; }

/* --- YELLOW TIGER EYE --- */
.yellowtigereye-base {
    background-image: url('image/yellowtigereye.png') !important; 
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
}

#bracelet-container .yellowtigereye-base {
    box-shadow: 
        inset 4px 4px 10px rgba(255, 255, 255, 0.5),  
        inset -5px -5px 15px rgba(0, 0, 0, 0.45),     
        0 6px 12px rgba(0, 0, 0, 0.2),                
        0 15px 35px rgba(0, 0, 0, 0.15) !important;   
}

.style-yellowtigereye-12mm { width: 46px !important; height: 46px !important; }
.style-yellowtigereye-10mm { width: 38px !important; height: 38px !important; }
.style-yellowtigereye-8mm  { width: 30px !important; height: 30px !important; }
.style-yellowtigereye-6mm  { width: 23px !important; height: 23px !important; }

/* --- LIGHT GREEN AVENTURINE --- */
.lightgreenaventurine-base {
    background-image: url('image/lightgreenaventurine.png') !important; 
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    /* FIXED: The green saturation is now locked into your main global CSS! */
    filter: contrast(1.1) saturate(1.6) !important;
}

#bracelet-container .lightgreenaventurine-base {
    box-shadow: 
        inset 4px 4px 10px rgba(255, 255, 255, 0.5),  
        inset -5px -5px 15px rgba(0, 0, 0, 0.45),     
        0 6px 12px rgba(0, 0, 0, 0.2),                
        0 15px 35px rgba(0, 0, 0, 0.15) !important;   
}

.style-lightgreenaventurine-12mm { width: 46px !important; height: 46px !important; }
.style-lightgreenaventurine-10mm { width: 38px !important; height: 38px !important; }
.style-lightgreenaventurine-8mm  { width: 30px !important; height: 30px !important; }
.style-lightgreenaventurine-6mm  { width: 23px !important; height: 23px !important; }

/* --- AQUAMARINE --- */
.aquamarine-base {
    background-image: url('image/aquamarine.png') !important; 
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
}

#bracelet-container .aquamarine-base,
#bracelet-container .aquamarine-base:hover {
    box-shadow: none !important;   
}

.style-aquamarine-12mm { width: 46px !important; height: 46px !important; }
.style-aquamarine-10mm { width: 38px !important; height: 38px !important; }
.style-aquamarine-8mm  { width: 30px !important; height: 30px !important; }
.style-aquamarine-6mm  { width: 23px !important; height: 23px !important; }

/* --- CLEAR QUARTZ --- */
.clearquartz-base {
    background-image: url('image/clearquartz.png') !important; 
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
}

/* Hyper-specific rule to guarantee the shadow stays dead everywhere */
div#bracelet-container div.bead-on-string.clearquartz-base,
div#bracelet-container div.bead-on-string.clearquartz-base:hover {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

.style-clearquartz-12mm { width: 46px !important; height: 46px !important; }
.style-clearquartz-10mm { width: 38px !important; height: 38px !important; }
.style-clearquartz-8mm  { width: 30px !important; height: 30px !important; }
.style-clearquartz-6mm  { width: 23px !important; height: 23px !important; }

/* --- CITRINE --- */
/* --- CITRINE BASES --- */
.citrine-base { background-image: url('image/citrine.png') !important; }
.citrine1-base { background-image: url('image/citrine1.png') !important; }
.citrine2-base { background-image: url('image/citrine2.png') !important; }
.citrine3-base { background-image: url('image/citrine3.png') !important; }

/* Apply universal styling to all 4 variations */
.citrine-base, .citrine1-base, .citrine2-base, .citrine3-base {
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    filter: contrast(1.05);
}

/* Premium shadow ONLY activates when the bead is on the bracelet string */
#bracelet-container .citrine-base,
#bracelet-container .citrine1-base,
#bracelet-container .citrine2-base,
#bracelet-container .citrine3-base {
    box-shadow: 
        inset 4px 4px 10px rgba(255, 255, 255, 0.5),  
        inset -5px -5px 15px rgba(0, 0, 0, 0.45),     
        0 6px 12px rgba(0, 0, 0, 0.2),                
        0 15px 35px rgba(0, 0, 0, 0.15) !important;   
}

.style-citrine-12mm { width: 46px !important; height: 46px !important; }
.style-citrine-10mm { width: 38px !important; height: 38px !important; }
.style-citrine-8mm  { width: 30px !important; height: 30px !important; }
.style-citrine-6mm  { width: 23px !important; height: 23px !important; }

#bracelet-container .citrine-base {
    box-shadow: 
        inset 4px 4px 10px rgba(255, 255, 255, 0.5),  
        inset -5px -5px 15px rgba(0, 0, 0, 0.45),     
        0 6px 12px rgba(0, 0, 0, 0.2),                
        0 15px 35px rgba(0, 0, 0, 0.15) !important;   
}

.style-citrine-12mm { width: 46px !important; height: 46px !important; }
.style-citrine-10mm { width: 38px !important; height: 38px !important; }
.style-citrine-8mm  { width: 30px !important; height: 30px !important; }
.style-citrine-6mm  { width: 23px !important; height: 23px !important; }