/* ============================================
   TEMPORARILY DISABLED ELEMENTS
   Uncomment the styles below to re-enable
   ============================================ */
   .preview-container-wrap,
   .selected-products-text {
       display: none !important;
   }
   /* ============================================
      END TEMPORARILY DISABLED ELEMENTS
      ============================================ */
   
   /* Bowl delivery text styling */
   .bowl-delivery-text {
       color: #dc3545 !important; /* Bootstrap red color */
       font-size: 14px !important;
       font-weight: 500 !important;
       margin-bottom: 4px !important;
       line-height: 1.2 !important;
   }
   
   /* Target the exact span elements in the screenshot */
   div[data-product-type="egg_gift"] .buttons-container span.add-same-product-action,
   div[data-product-type="egg_gift"] .buttons-container span.remove-product-action {
       display: none !important;
   }
   
   
   .personalize-div-accordion {
         width: 95%;
         margin: 8px 0px 8px 0px;
   }
   
   
   .personalize-div-accordion .option.color {
       display: flex; /* Aligns the color options horizontally */
       align-items: center; /* Vertically aligns the label and buttons */
   }
   
   .personalize-div-accordion .option {
     margin-top: 8px;
     margin-bottom: 8px;
   }
   
   .option {
       display: flex;
       width: 100%;
       align-items: center;
       flex-direction: row;
       justify-content: space-between;
   }
   
   .label-accordion {
       color: #171715;
       font-size: 16px;
       font-weight: 500;
   }
   
   input.child_name {
     font-size: 16px !important; /* Prevents zooming on iOS */
   }
   
   .color-option-selection {
       width: 24px; /* Circle width */
       height: 24px; /* Circle height to make it a square, will be rounded with border-radius */
       padding: 0; /* No padding */
       border-radius: 50%; /* Fully rounded to make it a circle */
       border: none; /* No border */
       background-color: #f8f8f8; /* Default background color, will be overridden by specific color */
       transition: background-color 0.3s; /* Smooth transition for background color */
       cursor: pointer; /* Indicates the buttons are clickable */
   }
   
   .color-options-selector-wrap {
       display: flex;
       width: 200px;
       justify-content: space-evenly;
   }
   
   /* Color-specific backgrounds */
   .color-option-selection.blue { background-color: #6CCBDD; }
   .color-option-selection.pink { background-color: #FAA2B7; }
   .color-option-selection.yellow { background-color: #FBCF39; }
   .color-option-selection.green { background-color: #4FC59B; }
   
   
   /* For other colors, use their respective background colors for the outer ring */
   .color-option-selection.blue.selected {
       box-shadow: 0 0 0 1px white, 0 0 0 3px #6CCBDD;
   }
   
   .color-option-selection.pink.selected {
       box-shadow: 0 0 0 1px white, 0 0 0 3px #FAA2B7; /* Replace with your red color */
   }
   
   /* For other colors, use their respective background colors for the outer ring */
   .color-option-selection.green.selected {
       box-shadow: 0 0 0 1px white, 0 0 0 3px #4FC59B;
   }
   
   /* For other colors, use their respective background colors for the outer ring */
   .color-option-selection.yellow.selected {
       box-shadow: 0 0 0 1px white, 0 0 0 3px #FBCF39;
   }
   
   /* Repeat for other colors */
   
       .side-cart-trigger {
           position: fixed;
           bottom: 20px;
           right: 20px;
           z-index: 999; /* Ensure it stays above other elements */
           width: 60px;
           height: 60px;
           background-color: #171715;
           border-radius: 999px;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
           cursor: pointer;
       }
       
       .side-cart-trigger img {
           width: 32px;
           height: auto;
       }
   
       .cart-counter-dot {
           position: absolute;
           top: -8px;
           right: -8px;
           width: 25px;
           height: 25px;
           background-color: #fffdf2;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 13px;
           font-weight: bold;
           color: black;
           box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
       }
   
   .child_name {
       border-radius: 4px;
       padding: 16px;
       border-color: #245946;
       border-style: solid;
       border-width: 1px;
       height: 30px;
       width: 200px;
       text-align: center;
       font-family: 'Hero';
       font-weight: 700;
       font-size: 16px;
       color: #171715;
       text-transform: uppercase;
   }
   
   /* Additional styling for when the product options are shown/hidden */
   .product-header + .product-options {
       display: none; /* Hide product options initially */
   }
   
   .product-header.active + .product-options {
       display: block; /* Show product options when header is active */
   }
   
   .product-header {
       width: 95%;
       justify-content: flex-start;
       border-radius: 8px;
   
       width: 100%;
       background-color: #FEF5F7;
       padding-top: 8px;
       padding-bottom: 8px;
       padding-left: 16px;
       padding-right: 16px;
   
       display: flex;
       align-items: center;
       cursor: pointer;
   
   }
   
   /* Add a pointer cursor to all buttons */
   button {
       cursor: pointer;
   }
   
   /* Styles for the toggle arrow */
   .toggle-arrow-custom {
       display: inline-block;
       transition: transform 0.3s ease-in-out;
   }
   
   /* Rotate the arrow when the accordion is active/open */
   .product-header.active .toggle-arrow-custom {
       transform: rotate(180deg);
   }
   
   
   .product-options {
       width: 100%;
       display: none; /* Initially hidden */
       align-items: center;
       padding: 16px;
       box-sizing: border-box;
       justify-content: center; /* Center the items horizontally */
   }
   .product-header.active + .product-options {
       display: flex !important; /* Force display flex when active */
       flex-direction: column;
   }
   
   .add-same-product, .remove-product {
       margin-right: 10px; /* Adjust spacing between buttons */
   }
   /* Place the buttons in a flex container if not already */
   .buttons-container {
       display: flex;
       width: 100%;
       margin-top: 16px;
       justify-content: space-between; /* Adjust if you want them aligned differently */
   }
   
   .font-option, .engraving-option{
       border: 1px solid transparent; /* Default no visible border */
       margin: 5px 5px 0 5px; /* Top, right, bottom, and left */
       cursor: pointer;
       border-radius: 4px;
       padding: 2px;
   }
   
   
   .font-option.selected, .engraving-option.selected {
       border: 1px solid #171715; /* Black border when selected */
       box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   }
   
   .selected-name {
       line-height: 1;
   }
   
   
   .add-same-product-action {
       cursor: pointer;
       color: #28A745; /* Example color */
       display: flex;
   }
   
   .remove-product-action {
       cursor: pointer;
       color: #DC3545; /* Example color */
       display: flex;
   }
   
   .add-same-product-action img, .remove-product-action img {
       margin-right: 8px;
   }
   
   .product-upsell-columns {
       display: flex !important;
       flex-direction: row !important;
       gap: 16px;
       padding: 16px;
       justify-content: space-evenly;
       margin-top: 8px;
   }
   
   .product-upsell-item {
       cursor: pointer;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
       flex: 1;
       max-width: 125px;
       min-width: 100px;
       background: #4EC59A;
       border-radius: 8px;
       border-style: solid;
       border-color: #CEF2F9;
       border-width: 1px;
       overflow: hidden;
   }
   
   .product-upsell-item img {
       width: 100%; /* Fixed width for consistency */
       background-color: #fff;
       padding: 5px;
       height: auto;
   }
   
   .upsell-product-name {
       color: #fff;
       background: #4EC59A;
       width: 100%;
       border-radius: 0px 0px 8px 8px;
       padding: 8px 4px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       flex: 1; /* Take remaining space in the flex column */
       text-align: center;
   }
   
   .selected-products-text {
       font-size: 24px;
       font-weight: 700;
       text-align: center;
       padding: 0px 16px 0px 16px;
   }
   
   
   .productname_price {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       margin-left: 16px;
   }
   
   .product_name {
       color: #171715;
       font-size: 17px;
       font-weight: bold;
       text-align: left;
       margin-bottom: 4px;
   }
   
   .original-price {
       color: rgba(23,23,21,0.59);   
       font-size: 16px;
   }
   .discounted-price {
       font-size: 16px;
       color:#171715;
   }
   
   .toggle-arrow-custom {
       margin-left: auto;
   }
   
   .product_image-acr {
       width: 80px;
   }
   
   
   .preview-container img {
       opacity: 0;
       transition: opacity 0.5s ease-in-out;
   }
   
   .preview-container img.is-loaded {
       opacity: 1;
   }
   
   
   .add-to-cart-final-button {
       width: 100%;
       padding: 16px;
       color: #171715 !important;
       background-color: #F9BBCB;
       border-radius: 8px;
   
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       box-shadow: -3px 3px 0 #DDDDDD;
       border-style: none;
       font-family: 'Hero';
       font-weight: 600;
       min-height: 52px;
       transition: opacity 0.2s ease;
   }
   
   .add-to-cart-final-button:disabled {
       opacity: 0.8;
       cursor: not-allowed;
   }
   
   .add-to-cart-final-button img{
       margin-left: 8px;   
   }
   
   /* Loading Spinner for Add to Cart Button */
   .add-to-cart-final-button .spinner {
       width: 24px;
       height: 24px;
       border: 3px solid rgba(23, 23, 21, 0.2);
       border-top-color: #171715;
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
   }
   
   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }
   
   .original-total {
       opacity: 0.5;
       margin-right: 8px;
   }
   
   .discounted-total {
       font-weight: 700;
   }
   
   
   
   /* style carousell*/
   .reviews-div-sidecart {
       position: relative;
       overflow: hidden;
       height: 110px; 
       width: 100%;   
   }
   
   .carousel-container {
       height: 100%;
       margin: 0 auto; 
       overflow: hidden;
       position: relative;
   }
   
   .carousel-slide {
       display: flex;
       width: calc(200%); 
       animation: slide 20s linear infinite;
   }
   
   .carousel-slide img {
       height: 100px;
       width: auto;
       flex-shrink: 0; 
       margin: 0px 8px 0px 8px;
       border-radius: 8px;
   }
   
   @keyframes slide {
       0% { transform: translateX(0); }
       100% { transform: translateX(-50%); } 
   }
   
   .reviews-div-sidecart::before, .reviews-div-sidecart::after {
       content: "";
       position: absolute;
       top: 0;
       height: 100%;
       width: 50px;  
       z-index: 2;
   }
   
   .reviews-div-sidecart::before {
       left: 0;
       background: linear-gradient(to right, white, transparent);
   }
   
   .reviews-div-sidecart::after {
       right: 0;
       background: linear-gradient(to left, white, transparent);
   }
   
   
   /*end of carosell style*/
   .side-cart-modal {
       overflow: scroll;
       scrollbar-width: none; /* Firefox */
       align-items: center;
   }
   
   /* Hide scrollbar for WebKit browsers */
   .side-cart-modal::-webkit-scrollbar {
       display: none;
   }
   
   
   
   .name_color_selected {
       display: flex !important;
   }
   
   
   
   @media only screen and (max-width: 767px) {
   
   }
   
   
   @keyframes blink {
       0%, 100% {
           border-color: red;
       }
       50% {
           border-color: transparent;
       }
   }
   
   .highlight-animation {
       animation: blink 1s ease-in-out infinite;
   }
   
   .color-option-selection.out-of-stock {
       background-color: #ddd;
       border: 1px solid #aaa;
       cursor: not-allowed;
       opacity: 0.6;
       box-shadow: none !important;
   }
   
   .color-option-selection[data-tooltip] {
       position: relative;
       cursor: not-allowed;
   }
   
   .color-option-selection[data-tooltip]::after {
       content: attr(data-tooltip);
       position: absolute;
       bottom: 120%;
       left: 50%;
       transform: translateX(-50%);
       background-color: rgba(0, 0, 0, 0.75);
       color: #fff;
       padding: 5px 8px;
       border-radius: 4px;
       white-space: nowrap;
       font-size: 12px;
       opacity: 0;
       transition: opacity 0.3s ease, transform 0.3s ease;
       z-index: 1000;
   }
   
   .color-option-selection[data-tooltip]::before {
       content: "";
       position: absolute;
       bottom: 75%;
       left: 50%;
       transform: translateX(-50%);
       border-width: 5px;
       border-style: solid;
       border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
       opacity: 0;
       transition: opacity 0.3s ease, transform 0.3s ease;
       z-index: 1000;
   }
   
   .color-option-selection[data-tooltip]:hover::after,
   .color-option-selection[data-tooltip]:hover::before {
       opacity: 1 !important;
       transform: translateX(-50%) translateY(-5px);
   }
   
   /* Free product styling */
   .personalize-div-accordion[data-is-free="true"] .product-header {
       background-color: #eafaf1; /* Light green background */
       border-left: 4px solid #4FC59B; /* Green accent border */
       position: relative;
       overflow: hidden;
   }
   
   /* Add a subtle pattern to the background */
   .personalize-div-accordion[data-is-free="true"] .product-header::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-image: 
           linear-gradient(45deg, rgba(79, 197, 155, 0.1) 25%, transparent 25%), 
           linear-gradient(-45deg, rgba(79, 197, 155, 0.1) 25%, transparent 25%), 
           linear-gradient(45deg, transparent 75%, rgba(79, 197, 155, 0.1) 75%), 
           linear-gradient(-45deg, transparent 75%, rgba(79, 197, 155, 0.1) 75%);
       background-size: 20px 20px;
       background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
       opacity: 0.3;
       z-index: 0;
   }
   
   /* Make sure content is above the pattern */
   .personalize-div-accordion[data-is-free="true"] .product-header > * {
       position: relative;
       z-index: 1;
   }
   
   /* Style the FREE GIFT text */
   .personalize-div-accordion[data-is-free="true"] .product_name span {
       background-color: #4FC59B; /* Green background */
       color: white !important; /* White text */
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 12px;
       font-weight: bold;
       display: inline-block;
       margin-left: 8px;
       text-transform: uppercase;
       animation: pulse 2s infinite;
   }
   
   /* Free gift label animation */
   @keyframes pulse {
       0% { transform: scale(1); }
       50% { transform: scale(1.05); }
       100% { transform: scale(1); }
   }
   
   /* Style the price display */
   .personalize-div-accordion[data-is-free="true"] .discounted-price {
       color: #4FC59B !important; /* Green text */
       font-weight: bold;
   }
   
   
   /* Special styling for the free product image */
   .personalize-div-accordion[data-is-free="true"] .product_image-acr {
       border: 2px solid #4FC59B;
       border-radius: 8px;
       padding: 2px;
       box-shadow: 0 0 8px rgba(79, 197, 155, 0.3);
   }
   
   /* === Side Cart Modal Styles === */
   
   /* Element 0: Main Modal Container */
   .side-cart-modal {
       width: 550px;
       height: 100dvh;
       background-color: #fff;
       padding-bottom: 200px;
       display: none;
       overflow: scroll;
       scrollbar-width: none; /* Firefox */
       z-index: 99999999;
       position: fixed;
       top: 0;
       right: 0;
       text-align: center;
       box-shadow: 28px 37px 26px 29px rgb(0 0 0 / 0.22);
       flex-direction: column;
   }
   
   /* ============================================
      CART HEADER SECTION
      ============================================ */
   .side-cart-header {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 16px 20px;
       position: relative;
       width: 100%;
   }
   
   .side-cart-header-left {
       display: flex;
       align-items: center;
       gap: 12px;
   }
   
   .side-cart-header-icon-wrap {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .side-cart-header-icon {
       width: 28px;
       height: 28px;
       filter: brightness(0) saturate(100%); /* Make icon black */
   }
   
   .side-cart-header-count {
       position: absolute;
       top: -8px;
       right: -10px;
       min-width: 20px;
       height: 20px;
       background-color: #4FC59B;
       color: #fff;
       font-size: 12px;
       font-weight: 600;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0 4px;
       box-sizing: border-box;
   }
   
   .side-cart-header-title {
       font-size: 16px;
       font-weight: 600;
       color: #171715;
   }
   
   .side-cart-close-btn {
       display: flex;
       width: 24px;
       height: 24px;
       background: transparent;
       position: absolute;
       top: 5px;
       right: 5px;
       cursor: pointer;
       color: #666;
       border: none;
       transition: all 0.2s ease;
   }
   
   .side-cart-close-btn:hover {
       color: #171715;
   }
   
   /* ============================================
      END CART HEADER SECTION
      ============================================ */
   
   /* ============================================
      PROGRESS BAR SECTION
      ============================================ */
   .cart-progress-bar-container {
       width: 100%;
       padding: 20px 20px 16px 20px;
       background: #F4F2FF;
       border-bottom: 1px solid #e8e8e8;
       box-sizing: border-box;
   }
   
   .progress-bar-text {
       font-size: 13px;
       font-weight: 600;
       color: #555555;
       margin-bottom: 12px;
       text-align: center;
   }
   
   .progress-bar-wrapper {
       position: relative;
       width: 100%;
       padding-bottom: 35px;
   }
   
   .progress-bar-track {
       width: 100%;
       height: 8px;
       background-color: #e8e8e8;
       border-radius: 10px;
       overflow: hidden;
       position: relative;
   }
   
   .progress-bar-fill {
       height: 100%;
       background: linear-gradient(90deg, #4fc59b 0%, #3eb889 100%);
       border-radius: 10px;
       transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
   }
   
   .progress-bar-milestones {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
   }
   
   .milestone {
       position: absolute;
       top: -4px;
       transform: translateX(-50%);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
   }
   
   .milestone-marker {
       width: 16px;
       height: 16px;
       background-color: #d0d0d0;
       border: 1px solid #ffffff;
       border-radius: 50%;
       transition: all 0.3s ease;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
   
   .milestone.reached .milestone-marker {
       background-color: #4fc59b;
       border-color: #ffffff;
       box-shadow: 0 2px 8px rgba(79, 197, 155, 0.4);
   }
   
   .milestone-truck {
       width: 18px !important;
       height: 18px !important;
       background-color: transparent !important;
       border: none !important;
       box-shadow: none !important;
       font-size: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       filter: grayscale(100%);
       opacity: 0.6;
       transition: all 0.3s ease;
   }
   
   .milestone.reached .milestone-truck {
       filter: grayscale(0%);
       opacity: 1;
       transform: scale(1.1);
   }
   
   .milestone-label {
       position: absolute;
       top: 22px;
       font-size: 12px;
       font-weight: 600;
       color: #888888;
       white-space: nowrap;
       text-align: center;
       line-height: 1.2;
       transition: color 0.3s ease;
   }
   
   /* Allow free shipping label to wrap to 2 lines */
   .milestone[data-type="shipping"] .milestone-label {
       white-space: normal;
       min-width: 80px;
       left: 50%;
       transform: translateX(-50%);
   }
   
   .milestone.reached .milestone-label {
       color: #4fc59b;
   }
   
   /* Milestone positioning (evenly spaced: 10%, 40%, 55%, 70%, 100%) */
   /* Note: Positions are now set via inline styles in PHP for dynamic calculation */
   
   /* Push the -30% milestone label slightly left to prevent cutoff */
   .milestone[data-value="30"] .milestone-label {
       margin-right: 8px;
   }
   
   /* Mobile Responsiveness */
   @media (max-width: 600px) {
       .cart-progress-bar-container {
           padding: 16px 24px 12px 24px
       }
   
       .product-upsell-columns {
           padding: 8px;
       }
       
       .progress-bar-text {
           font-size: 12px;
           margin-bottom: 10px;
       }
       
       .progress-bar-track {
           height: 6px;
       }
       
       .milestone-marker {
           width: 10px;
           height: 10px;
       }
       
       .milestone-truck {
           width: 14px !important;
           height: 14px !important;
           font-size: 12px;
       }
       
       .milestone-label {
           top: 16px;
       }
   }
   
   /* ============================================
      END PROGRESS BAR SECTION
      ============================================ */
   
   /* Element 1: Preview Container Wrap */
   .preview-container-wrap {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       height: auto;
       background-color: #ffffff;
       padding: 8px;
       box-shadow: 0px 4px 4px rgba(187, 187, 187, 0.13);
       position: relative;
       width: 100%;
   }
   
   .back-btn-side-cart {
       z-index: 9;
       position: absolute;
       top: 50%;
       left: 24px;
       transform: translateY(-50%);
       cursor: pointer;
       width: 2rem;
       height: auto;
   }
   
   .preview-container {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       background-color: #fff;
       height: auto;
       min-height: 90px;
       overflow: visible;
       width: 90%;
       overflow-x: auto;
       gap: 8px;
       padding: 12px;
   }
   
   
   /* Element 2: Selected Products Text */
   .selected-products-text {
       margin-top: 16px;
       color: #000;
   }
   
   /* Element 3: Selected Products for Personalization */
   .selected-products-for-personalization {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
       text-align: center;
       padding-top: 16px;
   }
   
   /* Element 5: Products Upsell Suggestion */
   .products-upsell-suggestion {
       display: flex;
       align-items: center;
       width: 95%;
       background-color: #EAFCFF;
       border-radius: 16px;
       margin-top: 32px;
       text-align: left;
       padding: 16px;
       color: #171715;
       line-height: 120%;
       flex-direction: column;
       border-style: dashed;
       border-color: #6CCBDD;
       border-width: 2px;
   }
   
   .upsell-heading-text {
       font-size: 20px;
       font-weight: 700;
       color: #fff;
       background-color: #6CCBDD;
       padding: 8px 40px;
       border-radius: 6px;
       margin-top: -32px;
   }
   
   
   
   /* Element 6: Finish Buy Now */
   .finish-buy-now {
       display: flex;
       flex-direction: column;
       align-items: center;
       background-color: #1e1e1c;
       padding: 8px 32px;
       position: fixed;
       bottom: 0;
       color: #fff;
       z-index: 99999999;
       width: 100%;
       max-width: 550px;
   }
   
   .total-price-container {
       margin-top: 8px;
       width: 100%;
       max-width: 400px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       font-size: 18px;
   }
   
   .total-amount-text {
       margin-left: 8px;
   }
   
   /* ============================================
      COUPON DISCOUNT DISPLAY
      ============================================ */
.coupon-discount-container {
    width: 100%;
    max-width: 400px;
    margin-top: 6px;
    padding: 6px 12px;
    background: #4EC59A;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 13px;
    gap: 8px;
}

.coupon-code-value {
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.coupon-discount-value {
    font-weight: 600;
    font-size: 13px;
    opacity: 0.9;
}

.coupon-final-value {
    font-weight: 700;
    font-size: 14px;
    margin-left: auto;
}
   /* ============================================
      END COUPON DISCOUNT DISPLAY
      ============================================ */
   
   .buy-now-button {
       margin-top: 16px;
       width: 100%;
       max-width: 400px;
   }
   
   .shipping-info-container {
       margin-top: 16px;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
   }
   
   .free-shipping-text-left {
       font-size: 14px;
       line-height: 120%;
       opacity: 0.6;
   }
   
   /* Element 7: Star Rating */
   .star-rating-image {
       width: 80px;
       max-width: 100%;
       margin-top: 40px;
   }
   
   /* Element 8: Bottom Testimonial Text */
   .bottom-testimonial-text {
       margin-top: 8px;
       max-width: 80%;
       font-size: 15px;
       color: #000;
       letter-spacing: 0.1px;
   }
   
   /* Element 9: Reviews Carousel Wrapper */
   .reviews-carousel-wrapper {
       width: 100%;
       margin-top: 16px;
   }
   
   /* Overlay Background */
   .overlay-bg-blurred {
       width: 100vw;
       height: 100vh;
       display: none;
       z-index: 500;
       position: fixed;
       top: 0;
       left: 0;
       background-color: rgba(0, 0, 0, 0.5);
       -webkit-backdrop-filter: blur(3px); /* For Safari */
       backdrop-filter: blur(3px);
   }
   
   /* Product Page Color Selection Styles */
   .color-selection-product-page > div {
       cursor: pointer;
       transition: all 0.3s ease;
       box-sizing: border-box;
   }
   
   .color-selection-product-page > div:hover {
       transform: scale(1.1);
   }
   
   /* Color-specific ring borders for selected state */
   .color-selection-product-page > div[data-color="blue"].selected {
       outline: 2px solid #6ccbdd;
       outline-offset: 2px;
   }
   
   .color-selection-product-page > div[data-color="pink"].selected {
       outline: 2px solid #faa2b7;
       outline-offset: 2px;
   }
   
   .color-selection-product-page > div[data-color="green"].selected {
       outline: 2px solid #4fc59b;
       outline-offset: 2px;
   }
   
   .color-selection-product-page > div[data-color="yellow"].selected {
       outline: 2px solid #fbcf39;
       outline-offset: 2px;
   }
   /* Accessory Pages - Hide WooCommerce Default Elements */
   .variations_form .single_add_to_cart_button {
       display: none !important;
   }
   
   .variations_form .woocommerce-variation-price {
       display: none !important;
   }
   
   .variations_form .variations .label {
       display: none !important;
   }
   
   .variations_form .quantity {
       display: none !important;
   }
   
   /* Mobile Styles */
   @media (max-width: 479px) {
       .side-cart-modal {
           width: 100dvw;
           padding-left: 0;
           padding-right: 0;
           margin-left: 0;
           margin-right: 0;
       }
   }