.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            

/*---------Font Smoothing---------*/
.woocommerce {
  -webkit-font-smoothing: antialiased;
}

/*------Rating Stars--------*/
.woocommerce .star-rating::before,
.woocommerce .stars:not(.selected) span a,
.woocommerce .stars.selected span a.active ~ a {
  color: #b7b8b9;
}
.woocommerce .star-rating,
.woocommerce .stars.selected span a {
  color: #b64400;
}

/*-----Product Images------*/
.woocommerce div.flex-viewport,
.woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce ul.products li.product a img,
.woocommerce-cart table.cart img {
  min-width: 64px;
  min-height: 64px;
  border: 1px solid #ffffff;
  overflow: hidden;
}

.flex-viewport .woocommerce-product-gallery__wrapper {
  border: none; /* Remove duplicated borders */
  border-radius: 0 !important; /* Fix duplicated radius */
  margin: 0 !important; /* Fix duplicated margin */
}

/*----------Secondary Buttons-------------*/
.woocommerce button.button.alt,
.woocommerce a.button,
.woocommerce ul.products li.product .button,
.woocommerce #review_form #respond .form-submit input,
.woocommerce a.button.alt,
.woocommerce button.button {
  background: #8a8a8a;
  border: 1px solid #8a8a8a;
  font-size: 12px;
  border-radius: 0px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
  text-align: center;
  padding: 16px 24px;
  outline: none;
  font-family: inherit;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/*----------Secondary Hovered-------------*/
.woocommerce button.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce #review_form #respond .form-submit input:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button:hover {
  background: #9a9a9a;
  border: 1px solid #9a9a9a;
  color: #ffffff;
}
/*----------Tertiary Buttons-------------*/
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce .widget_shopping_cart .buttons a,
.woocommerce.widget_shopping_cart .buttons a,
.woocommerce .widget_price_filter .price_slider_amount .button,
.woocommerce a.added_to_cart,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce table.my_account_orders .button,
td a.woocommerce-MyAccount-downloads-file.button.alt {
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #65bec2;
  color: #65bec2;
  padding: 16px 24px;
  outline: none;
  font-family: inherit;
  border-radius: 4px;
}

/*----------Tertiary Buttons Hovered-------------*/
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce .widget_shopping_cart .buttons a:hover,
.woocommerce.widget_shopping_cart .buttons a:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover,
.woocommerce table.my_account_orders .button:hover,
td a.woocommerce-MyAccount-downloads-file.button.alt:hover {
  background: #ffffff;
  border: 1px solid #6799b2;
  color: #6799b2;
}

/*---Disabled Buttons---*/
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled, .woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
  filter: grayscale(100%);
}

/*----------Links-------------*/
.woocommerce a.wcppec-checkout-buttons__button,
.woocommerce ul.product_list_widget li a,
.woocommerce ul.product-categories a,
.woocommerce .widget_layered_nav_filters ul li a,
.woocommerce .woocommerce-widget-layered-nav-list__item a,
.woocommerce .wc-layered-nav-rating a,
.woocommerce div.tagcloud a,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
h2.woocommerce-loop-category__title,
.comment-form-rating a,
.woocommerce .download-product a,
a.woocommerce-remove-coupon,
.woocommerce a.shipping-calculator-button,
.woocommerce a.remove,
.woocommerce a.reset_variations,
.woocommerce .product-name a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-checkout-payment a,
.woocommerce-LostPassword a,
.woocommerce-Address-title a,
.woocommerce-MyAccount-navigation-link a,
.woocommerce-MyAccount-content a,
a.woocommerce-review-link,
.posted_in a,
.tagged_as a,
.woocommerce .woocommerce-breadcrumb a {
  color: ;
  font-weight: 400;
  font-family: inherit;
  text-decoration: none;
}

/*----------Links Hovered-------------*/
.woocommerce a.wcppec-checkout-buttons__button:hover,
.woocommerce ul.product_list_widget li a:hover,
.woocommerce ul.product-categories a:hover,
.woocommerce .widget_layered_nav_filters ul li a:hover,
.woocommerce .woocommerce-widget-layered-nav-list__item a:hover,
.woocommerce div.tagcloud a:hover,
.comment-form-rating a:hover,
.woocommerce .download-product a:hover,
a.woocommerce-remove-coupon:hover,
.woocommerce a.shipping-calculator-button:hover,
.woocommerce a.remove:hover,
a.reset_variations:hover .product-name a:hover,
.woocommerce .product-name a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-message a:hover,
.woocommerce-checkout-payment a:hover,
.woocommerce-LostPassword a:hover,
.woocommerce-Address-title a:hover,
.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-content a:hover,
a.woocommerce-review-link:hover,
.posted_in a:hover,
.tagged_as a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
  color: ;
  text-decoration: underline;
}

/*-----------Labels----------------*/
.woocommerce div.product form.cart .variations label,
.woocommerce form label {
  font-size: 12px;
  color: ;
  margin-top: 8px;
  font-weight: 400;
  font-style: normal;
}

/*---------------Placeholders----------------*/
.woocommerce input[type="search"]::placeholder,
.woocommerce-page table.cart td.actions .input-text::placeholder,
.woocommerce form .form-row .input-text::placeholder,
.woocommerce-page form .form-row .input-text::placeholder {
  color: ;
  font-family: inherit;
}

/*---------------Dropdowns----------------*/
.select2-container--default .select2-selection--single,
.woocommerce div.product form.cart .variations select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: ;
  background: ;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: ;
  color: #ffffff;
  outline: none;
}

.select2-container--default .select2-results__option[data-selected=true] {
  background: ;
  color: #ffffff;
  outline: none;
}

.select2-results__option {
  padding: 8px 12px;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.select2-dropdown {
  border-radius: 0;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.6;
  color: ;
  padding: 0;
  min-height: 20px;
  padding-left: 0;
  outline: none;
}
.select2-container--open .select2-dropdown--below {
  padding: 0;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  background: url(https://makkratom.com/wp-content/plugins/oxygen-woocommerce/elements/assets/chevron-down.svg);
  background-size: 6px;
  background-repeat: no-repeat;
  background-position: 4px center;
  height: 100%;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__clear {
    display: none;
    pointer-events: none;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

/*---------------Headings----------------*/
.woocommerce .oxy-product-info h2,
.woocommerce .widget_recent_reviews h2,
.woocommerce .widget_top_rated_products h2,
.woocommerce .widget_shopping_cart h2,
.woocommerce .widget_products h2,
.woocommerce .widget_product_categories h2,
.woocommerce .widget_layered_nav_filters h2,
.woocommerce .woocommerce-widget-layered-nav h2,
.woocommerce .widget_rating_filter h2,
.woocommerce .widget_price_filter h2,
.woocommerce div.widget_product_tag_cloud h2,
.woocommerce h1.page-title,
.woocommerce h1.product_title,
.woocommerce section.related.products h2,
.oxy-product-upsells > :is(h1, h2, h3, h4, h5, h6),
.woocommerce h2.woocommerce-Reviews-title,
.woocommerce span.comment-reply-title,
.woocommerce-Tabs-panel h2,
h2.woocommerce-order-downloads__title,
.woocommerce-orders article header h1,
.woocommerce-account article header h1,
.woocommerce-downloads article header h1,
.woocommerce-edit-address article header h1,
.woocommerce-account h2,
.woocommerce-Address-title h3,
.woocommerce-MyAccount-content h3,
.woocommerce-EditAccountForm legend,
h1.oxy-woo-archive-title,
h2.woocommerce-column__title,
h2.woocommerce-order-downloads__title,
h2.woocommerce-order-details__title,
.woocommerce-billing-fields h3,
.woocommerce-checkout h3,
.woocommerce .cart_totals h2,
.woocommerce .cross-sells h2 {
  color: ;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

/*--------Prices and Quantity------------*/
.woocommerce .price_label .from,
.woocommerce .price_label .to,
.woocommerce ul.products li.product .price,
.product-quantity,
.woocommerce .price ins,
.woocommerce-Price-amount,
.woocommerce-loop-category__title .count,
.woocommerce .price {
  color: ;
  font-weight: 700;
  font-size: 16px;
  background: transparent;
  text-decoration: none;
}

/*----Sale Price-----*/
.woocommerce .product_list_widget del span.woocommerce-Price-amount,
.woocommerce ul.products li.product .price del,
.woocommerce .price del,
.woocommerce .price del .woocommerce-Price-amount {
  font-size: 12px;
  font-weight: 200;
  color: ;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product span.price ins {
  color: ;
  font-weight: 700;
  font-size: inherit;
}

.woocommerce div.product p.price {
  font-size: 16px;
}

.woocommerce div.product p.price ins,
.woocommerce .oxy-woo-element .price ins {
  text-decoration: none;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce p.price del,
.woocommerce ul.products li.product .price del {
  opacity: 1;
  display: block;
}

/*--------------Table Headings----------------*/
.woocommerce-cart table.cart th,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce table.shop_table th,
.woocommerce table.shop_table tfoot th {
  font-weight: 400;
  color: ;
  font-size: 10px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*-------------------Texts---------------------*/
.woocommerce .woocommerce-mini-cart__total strong,
.woocommerce .woocommerce-mini-cart span.quantity,
.woocommerce .widget_product_categories span.count,
.woocommerce .woocommerce-widget-layered-nav-list__item span,
.woocommerce-product-attributes-item__value p,
.woocommerce-error,
.woocommerce-table--order-downloads,
.woocommerce-Address address,
.woocommerce-orders-table,
.woocommerce-table,
ul.woocommerce-shipping-methods,
p.woocommerce-shipping-destination,
.woocommerce-column--shipping-address address,
.woocommerce-column--billing-address address,
.woocommerce-order p,
.woocommerce .product-name,
.woocommerce .product-total,
.oxy-product-stock p,
.oxy-product-description p,
.woocommerce-Reviews .comment-text p,
.product .summary .product_meta,
.woocommerce-Tabs-panel,
.woocommerce-product-details__short-description p,
.woocommerce-form-track-order p,
.woocommerce-checkout-payment p,
.checkout_coupon p,
.woocommerce-ResetPassword p,
.woocommerce-info,
.woocommerce-error,
.woocommerce-message,
.woocommerce-MyAccount-content p,
.woocommerce-breadcrumb,
p.woocommerce-result-count {
  color: ;
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  font-style: normal;
}

/*------------Bold Texts---------------*/
.woocommerce-product-attributes-item__label,
.woocommerce-error strong,
.woocommerce-MyAccount-content strong,
.woocommerce-shipping-destination strong,
.woocommerce p.order-info mark,
.woocommerce-MyAccount-content mark.order-number,
.woocommerce-MyAccount-content mark.order-date,
.woocommerce-MyAccount-content mark.order-status,
.woocommerce-order-overview strong {
  color: ;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
}

/*--------------------Badges---------------------*/
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: #b64400;
  font-size: 12px;
  padding: 6px 12px;
  line-height: 1.2;
  border-radius: 20px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  top: 12px;
  left: 12px;
  right: auto;
  position: absolute;
}

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


/*-------------Product Tabs(description, addtl info, reviews) - single product--------------*/

.woocommerce div.product .oxy-woo-element .woocommerce-tabs .panel,
.woocommerce .oxy-woo-element div.product .woocommerce-tabs .panel {
  margin-bottom: 0;
  padding: 20px 0;
}
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs,
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs {
  padding-left: 5px;
  display: flex;
  text-align: center;
  margin-bottom: 0;
  flex-shrink: 0;
}

.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li,
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  padding: 0;
  margin: 0 5px;
  display: flex;
  align-items: center;
}
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li::before {
  display: none;
}
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li a {
  width: 100%;
  color: #999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
  padding: 16px 48px;
  z-index: 1000;
  font-weight: 400;
  border-radius: 0;
  word-break: break-word;
}
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li a:hover {
  color: ;
}
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li.active {
  background: white;
  border-bottom-color: white;
}
.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce
  div.product
  .oxy-woo-element
  .woocommerce-tabs
  ul.tabs
  li.active
  a {
  color: ;
}

@media (max-width: 640px) {
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs {
    flex-direction: column;
    padding: 0;
    margin-bottom: 5px;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li {
    margin: 5px 0;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs::before,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs::before {
    border-bottom: none;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li.active,
  .woocommerce
    div.product
    .oxy-woo-element
    .woocommerce-tabs
    ul.tabs
    li.active {
    border-bottom-color: #1d1d1f2e;
  }
}

/* tabs panel content (single product, any tab content) */

.woocommerce .oxy-woo-element table.shop_attributes th,
.woocommerce .oxy-woo-element table.shop_attributes td {
  border-top: 1px solid #1d1d1f2e;
  padding: 8px;
}

/* single product - add to cart */

.woocommerce .oxy-product-cart-button,
.woocommerce .oxy-woo-element div.product form.cart {
  width: 100%;
  max-width: 360px;
}

.woocommerce .oxy-woo-element div.product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
  align-self: stretch;
  flex-grow: 1;
  border-radius: 0;
}

.woocommerce .oxy-woo-element div.product form.cart,
.woocommerce .oxy-product-cart-button form.cart,
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
}

.woocommerce .oxy-woo-element div.product form.variations_form.cart,
.woocommerce .oxy-product-cart-button form.variations_form.cart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.woocommerce .oxy-woo-element div.product form.cart td.value,
.woocommerce .oxy-product-cart-button td.value {
  padding: 0;
}

.woocommerce .oxy-woo-element div.product .woocommerce-variation-add-to-cart,
.woocommerce .woocommerce-variation-add-to-cart {
  display: flex;
  width: 100%;
}

/* Primary Buttons */
.woocommerce .widget_shopping_cart .buttons a.checkout.wc-forward,
.woocommerce button[type=submit],
.woocommerce button[name=woocommerce-form-login__submit],
.woocommerce button[name=save_account_details],
.woocommerce button[name=save_address],
.woocommerce .oxy-woo-element div.product form.cart button.button.alt,
.woocommerce .oxy-product-cart-button button.button.alt,
.woocommerce div.product form.cart .button {
  background-color: #65bec2;
  color: #ffffff;
  border-radius: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 24px;
  font-size: 12px;
  text-align: center;
  border: 1px solid #65bec2;
  border-radius: 4px;
  line-height: 1.2;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.woocommerce button[type=submit]:hover,
.woocommerce button[name=woocommerce-form-login__submit]:hover,
.woocommerce button[name=save_account_details]:hover,
.woocommerce button[name=save_address]:hover,
.woocommerce .oxy-woo-element div.product form.cart button.button.alt:hover,
.woocommerce .oxy-product-cart-button button.button.alt:hover,
.woocommerce div.product form.cart .button:hover {
  background-color: #6799b2;
  border: 1px solid #6799b2;
}

.woocommerce .oxy-woo-element div.product form.cart button.button.alt.disabled,
.woocommerce button.button.alt.disabled {
  background:  !important;
  border: 1px solid  !important;
  opacity: 1;
}

.woocommerce .quantity .qty {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 56px;
  padding: 8px 9px;
  margin-right: 12px;
  background: url(https://makkratom.com/wp-content/plugins/oxygen-woocommerce/elements/assets/chevron-down.svg),
    url(https://makkratom.com/wp-content/plugins/oxygen-woocommerce/elements/assets/chevron-up.svg), ;
  background-size: 6px, 6px;
  background-repeat: no-repeat, no-repeat;
  background-position: right 0.8em bottom calc(50% - 5px), right 0.8em top calc(50% - 5px);
  height: 100%;
}

.woocommerce table.variations tr {
  border-top: none;
}

.woocommerce .oxy-woo-element div.product form.cart .variations,
.woocommerce div.product .oxy-product-cart-button form.cart .variations {
  margin-bottom: 0;
}

.woocommerce .oxy-woo-element div.product form.cart table.variations tr,
.woocommerce table.variations tr {
  display: flex;
  flex-direction: column;
}

.woocommerce
  .oxy-woo-element
  div.product
  form.cart
  table.variations
  tr
  td
  label,
.woocommerce .oxy-product-cart-button table.variations tr td label {
  font-size: 12px;
  margin-right: 12px;
}

.woocommerce .oxy-woo-element div.product form.cart table.variations tr td a,
.woocommerce .oxy-product-cart-button table.variations tr td a {
  font-size: 12px;
}

.woocommerce .oxy-woo-element div.product form.cart a.reset_variations:before,
.woocommerce .oxy-product-cart-button table.variations tr td a:before {
  content: "× ";
}

.woocommerce .oxy-woo-element div.product form.cart .variations,
.woocommerce .oxy-product-cart-button div.product form.cart .variations {
  margin-bottom: 0;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .oxy-woo-element div.product form.cart .variations select,
.woocommerce div.product .oxy-product-cart-button form.cart .variations select,
.woocommerce div.product form.cart .variations select,
.woocommerce form.cart .variations select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  line-height: 1.2;
  cursor: pointer;
  width: 100%;
  position: relative;
  background: url(https://makkratom.com/wp-content/plugins/oxygen-woocommerce/elements/assets/chevron-down.svg), ;
  background-size: 6px;
  padding-right: 24px;
  background-repeat: no-repeat;
  background-position: right 0.8em center;
}

.woocommerce input[type="number"]::-webkit-inner-spin-button,
.woocommerce input[type="number"]::-webkit-outer-spin-button {
  margin-right: -9px;
  opacity: 0.01;
  width: 24px;
  height:48px;
  cursor: pointer;
}

/* single product - rating below title / rating element */

.woocommerce .oxy-woo-element div.product .woocommerce-product-rating,
.woocommerce .oxy-product-rating .woocommerce-product-rating,
.woocommerce div.product .oxy-product-rating .woocommerce-product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.woocommerce
  .oxy-woo-element
  div.product
  .woocommerce-product-rating
  .star-rating::before,
.woocommerce .oxy-product-rating .star-rating::before {
  position: relative;
  color: #b7b8b9;
}

.woocommerce
  .oxy-woo-element
  div.product
  .woocommerce-product-rating
  .star-rating,
.woocommerce .oxy-product-rating .woocommerce-product-rating .star-rating {
  width: auto;
  letter-spacing: 2px;
  margin: 0 0 0 0;
}

.woocommerce
  .oxy-woo-element
  div.product
  .woocommerce-product-rating
  a.woocommerce-review-link,
.woocommerce .oxy-product-rating a.woocommerce-review-link {
  font-size: 12px;
}
.woocommerce
  .oxy-woo-element
  div.product
  .woocommerce-product-rating
  .star-rating
  span,
.woocommerce .oxy-product-rating .woocommerce .star-rating span {
  color: #b64400;
}

/* Transitions */
.woocommerce .flex-control-thumbs li,
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item,
.select2-search--dropdown .select2-search__field,
.woocommerce
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox
  span::before,
.woocommerce ul.tabs li,
.woocommerce .woocommerce-product-gallery__trigger:after,
.woocommerce .woocommerce-product-gallery__trigger:before,
.woocommerce img:not(.zoomImg):not(.pswp__img),
.woocommerce textarea,
.woocommerce .checkbox,
.woocommerce .select2-selection,
.woocommerce input,
.woocommerce button,
.woocommerce select,
.woocommerce a {
  transition: all ease 0.2s;
}
/* End of Transitions */

/* Input Styles */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.select2-container--default .select2-search--dropdown .select2-search__field,
.woocommerce textarea,
.select2-dropdown,
.woocommerce .select2-selection,
.woocommerce input[type="search"],
.woocommerce input[type="text"],
.woocommerce input[type="number"],
.woocommerce input[type="tel"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce select {
  height: auto;
  font-size: 14px;
  border: 1px solid ;
  background: ;
  color: ;
  outline: none;
  font-family: inherit;
  padding: 8px 12px;
  border-radius: px;
  resize: none;
}
/* Focus State */
.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce textarea:focus,
.select2-dropdown:focus,
.woocommerce .select2-selection:focus,
.woocommerce input[type="search"]:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce select:focus {
  border: 1px solid ;
  box-shadow: 0 0 5px ;
}
/* End of Inputs */

/* Custom Checkbox */
.woocommerce-form-login input[type="checkbox"],
.oxy-woo-checkout input[type="checkbox"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.01;
  display: none !important;
}
.woocommerce-form-login
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme,
.oxy-woo-checkout
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox {
  position: relative;
  cursor: pointer;
  padding-left: 16px;
  margin-top: 0;
}
.woocommerce-form-login
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme span,
.oxy-woo-checkout
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox span{
    margin-left: 18px;
}
.woocommerce-form-login
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme
  span::before,
.oxy-woo-checkout
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox
  span::before {
  width: 24px;
  height: 24px;
  border: 1px solid #1d1d1f2e;
  background-color: #ffffff;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-size: 50%;
  border-radius: px;
  background-repeat: no-repeat;
  background-position: center center;
}
input[type="checkbox"]:checked ~ span::before,
input[type="checkbox"]:checked ~ label span::before {
  background: url(https://makkratom.com/wp-content/plugins/oxygen-woocommerce/elements/assets/check-mark.svg), #ffffff;
}
.woocommerce-form-login
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
  margin-top: 34px;
}
.oxy-woo-checkout
  label.woocommerce-form__label.woocommerce-form__label-for-checkbox
  span::before {
  margin-top: -4px;
}
/* End of Custom Checkbox */

/* Product Column Fix */
.woocommerce-page.columns-1 ul.products li.product,
.woocommerce.columns-1 ul.products li.product {
  width: 100%;
}
.woocommerce-page.columns-2 ul.products li.product,
.woocommerce.columns-2 ul.products li.product {
  margin: 0;
  width: 50%;
}
.woocommerce-page.columns-3 ul.products li.product,
.woocommerce.columns-3 ul.products li.product {
  margin: 0;
  width: 33.33%;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px;
}
.woocommerce-page.columns-5 ul.products li.product,
.woocommerce.columns-5 ul.products li.product {
  margin: 0;
  width: 20%;
}
.woocommerce-page.columns-6 ul.products li.product,
.woocommerce.columns-6 ul.products li.product {
  margin: 0;
  width: 16.6%;
}
/* End of Product Column Fix */

/*--- Radio Buttons Style ---*/
.woocommerce input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  background: ;
  border: 1px solid ;
  border-radius: 100%;
  outline: none;
  cursor: pointer;
}

/* WooCommerce Payments plugin compatibility */
.woocommerce input[type=radio].woocommerce-SavedPaymentMethods-tokenInput {
  width: 20px !important;
  height: 20px !important;
  margin: 6px 8px 0 0 !important;
}

.woocommerce input[type=radio]:hover {
  border: 1px solid ;
  box-shadow: 0 0 5px ;
}

.woocommerce input[type=radio]:checked {
  background: ;
  box-shadow: inset 0 0 0 8px #ffffff;
}

/* WooCommerce Payments plugin compatibility */
.woocommerce input[type=radio].woocommerce-SavedPaymentMethods-tokenInput:checked {
  box-shadow: inset 0 0 0 4px #ffffff;
}

.woocommerce input[type=radio]:checked:hover {
  box-shadow: inset 0 0 0 8px #ffffff, 0 0 5px ;
}

/*--------------------Tables and Forms Style-------------------------*/
.oxy-woo-order-tracking form,
.woocommerce form.woocommerce-ResetPassword.lost_reset_password,
.woocommerce .woocommerce-EditAccountForm,
.woocommerce .woocommerce-address-fields,
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce .col2-set,
.woocommerce-form-coupon,
.woocommerce #reviews #comments ol.commentlist li .comment-text,
ul.woocommerce-order-overview,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce table.shop_table {
  border: 1px solid #1d1d1f2e;
  border-top: 3px solid #65bec2;
  border-radius: 0;
  background: #ffffff;
  padding: 20px;
  border-collapse: collapse;
  box-shadow: var(--box-shadow) 0 10px 20px;
}
fieldset {
  background: transparent;
}
.woocommerce table tr {
  border-top: 1px solid #1d1d1f2e;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table th {
  border: none;
  padding: 12px 20px;
  font-weight: 400;
  color: ;
}
/* End of Tables and Forms Styles */



/* Notification Styles */
.woocommerce-info, .woocommerce-error, .woocommerce-message {
  padding-right: 20px;
  border-bottom: 1px solid #1d1d1f2e;
  border-left: 1px solid #1d1d1f2e;
  border-right: 1px solid #1d1d1f2e;
  border-radius: 0;
  background: #ffffff;
  border-collapse: collapse;
  box-shadow: var(--box-shadow) 0 10px 20px;
}
/* Info */
.woocommerce-info::before {
  color: #b64400;
}
.woocommerce-info {
  border-top-color: #b64400;
}
/* Error */
.woocommerce-error::before {
  color: #b64400;
}
.woocommerce-error {
  border-top-color: #b64400;
}
/* Message */
.woocommerce-message::before {
  color: #65bec2;
}
.woocommerce-message {
  border-top-color: #65bec2;
}
/* End of Notification Sytles */


/* Shop, Uppsells, Related Product Shared Styles Styles */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  margin: -10px -20px 20px;
}
.woocommerce ul.products li.product .button {
  margin-top: auto;
}
.woocommerce a.added_to_cart {
  margin-top: 12px;
}
.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
}

/* Product Info Shared Styles */

.woocommerce .oxy-product-info,
.woocommerce .oxy-product-tabs {
  width: 100%;
}

.woocommerce table.shop_attributes {
  border-top: 1px solid #1d1d1f2e;
  border-collapse: collapse;
}

.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
  background: transparent;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border-bottom: 1px solid #1d1d1f2e;
  text-align: left;
}


/* Widgets Headings */
.ct-widget .widget.woocommerce .widgettitle {
  font-size: px;
  font-weight: ;
  font-family: ;
}
/* End of Widgets Headings */


/* Search Products Widget */
.woocommerce form.woocommerce-product-search {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.woocommerce input.search-field {
  flex-grow: 1;
  margin-right: 8px;
  min-width: 120px;
}
/* End of Widget */



/* Product Tags Cloud Widget */
.woocommerce div.tagcloud {
  line-height: 1.2;
}
/* End of Widget */



/* Filter by Price Widget */
.woocommerce .widget_price_filter .ui-slider {
  margin: 20px 0;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: #1d1d1f2e;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  width: 24px;
  height: 24px;
  background-color: #65bec2;
  top: -8px;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background-color: #65bec2;
}
.woocommerce .widget_price_filter .price_slider_amount {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.woocommerce .widget_price_filter .price_slider_amount .button {
  margin-right: 12px;
}
.woocommerce .price_label {
  text-align: left;
  line-height: 1.6;
}
/* End of Widget */



/* Rating Filter Widget */
.woocommerce .widget_rating_filter ul li a {
  display: flex;
  float: left;
  align-items: center;
}
.woocommerce .widget_rating_filter ul li.chosen a::before {
  color: #1d1d1f2e;
  position: relative;
  content: '×';
  margin-right: 4px;
  top: -1px;
}
.woocommerce .widget_rating_filter ul li.chosen:hover a::before {
  color: ;
}
/* End of Widget */



/* Attributes Filter Widget */
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a::before {
  color: #1d1d1f2e;
  position: relative;
  content: '×';
  margin-right: 4px;
  top: -1px;
}
.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen:hover a::before {
  color: ;
}
/* End of Widget */



/* Active Filters Widget */
.woocommerce .widget_layered_nav_filters ul li a::before {
  color: #1d1d1f2e;
  position: relative;
  content: '×';
  margin-right: 4px;
  top: -1px;
}
.woocommerce .widget_layered_nav_filters ul li:hover a::before {
  color: ;
}
.woocommerce .widget_layered_nav_filters ul li:hover span.woocommerce-Price-amount {
  color: ;
}
/* End of Widget */



/* Product Categories Widget */
.woocommerce .widget_product_categories ul {
  padding-left: 20px;
  list-style: none;
}
.woocommerce .widget_product_categories ul li::before {
  color: #1d1d1f2e;
  content: '•';
  position: relative;
  margin-right: 8px;
  margin-left: -20px;
}
.woocommerce .widget_product_categories ul.product-categories {
  margin-top: 0;
}
.woocommerce .widget_product_categories .select2-container .select2-selection--single {
  height: auto;
  border-color: ;
  background: url(https://makkratom.com/wp-content/plugins/oxygen-woocommerce/elements/assets/chevron-down.svg), ;
  background-size: 6px;
  background-repeat: no-repeat;
  background-position: right 0.8em center;
}
.woocommerce .widget_product_categories .select2-container .select2-selection--single:focus {
  border-color: ;
}
.woocommerce .widget_product_categories .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}
.woocommerce .select2-container--open .select2-dropdown--below {
  border-color: 
}
.woocommerce .select2-container--open .select2-dropdown--above {
  padding: 0;
  border-color: ;
}
.woocommerce .select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: ;
}
.woocommerce .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: ;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__clear {
  font-weight: 300;
  color: #1d1d1f2e;
  font-size: 24px;
  line-height: 1;
}
.woocommerce .select2-container--default .select2-selection--single:hover .select2-selection__clear {
  color: ;
}
/* End of Widget */



/* Products, Cart Widgets */
.woocommerce .product_list_widget ins {
  text-decoration: none;
}
.woocommerce .product_list_widget del {
  color: ;
}
.woocommerce ul.product_list_widget li img {
  border: 1px solid #ffffff;
  width: 40px;
  float: left;
  margin-bottom: 16px;
  margin-right: 12px;
  margin-left: 0;
  margin-top: 4px;
}
.woocommerce ul.product_list_widget li {
  border-bottom: 1px solid #1d1d1f2e;
  margin-bottom: 4px;
  padding-bottom: 8px;
}
.woocommerce .product_list_widget .reviewer {
  font-size: 12px;
  color: ;
}
.woocommerce .widget_shopping_cart .cart_list li a.remove, .woocommerce.widget_shopping_cart .cart_list li a.remove {
  right: 0;
  left: auto;
  color: #1d1d1f2e !important;
  font-weight: 300;
}
.woocommerce .widget_shopping_cart .cart_list li a.remove:hover, .woocommerce.widget_shopping_cart .cart_list li a.remove:hover {
  color:  !important;
  background: none;
  text-decoration: none;
}
.woocommerce .widget_shopping_cart .cart_list li, .woocommerce.widget_shopping_cart .cart_list li {
  padding-left: 0;
}
.woocommerce .widget_shopping_cart .buttons a,
.woocommerce.widget_shopping_cart .buttons a {
  margin-right: 0;
}
/* End of Widget */

/*---Safari Row Hotfix---*/
.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before {
  width: 100%;
}

/*---Product Title Hotfix (Must be in product-title.css)---*/
.woocommerce h1.product_title.oxy-product-title {
  margin: 0;
}

/*---Fix for shopping cart duplication issue on AJAX update---*/
.ct-modal .woocommerce-cart-form:not(:nth-child(2)) {
  display: none;
}

.ct-modal .cart-collaterals > .cart_totals:not(:nth-child(1)) {
  display: none;
}

/*---Fix for WooCommerce Payments credit card images on checkout---*/
.woocommerce label[for="payment_method_woocommerce_payments"],
.woocommerce label[for="payment_method_bacs"],
.woocommerce label[for="payment_method_cod"] {
  display: flex;
  flex-direction: row;
}

.woocommerce label[for="payment_method_woocommerce_payments"] img,
.woocommerce label[for="payment_method_bacs"] img,
.woocommerce label[for="payment_method_cod"] img {
  width: 32px;
}
.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1280px;
}
body {font-family: 'Outfit';}body {line-height: 1.6;font-size: 1.6rem;font-weight: 400;color: #1d1d1f;}.oxy-nav-menu-hamburger-line {background-color: #1d1d1f;}h1, h2, h3, h4, h5, h6 {font-family: 'Outfit';font-size: 4.8rem;line-height: 1.3;color: #1d1d1f;}h2, h3, h4, h5, h6{font-size: 3.2rem;line-height: 1.3;color: #1d1d1f;}h3, h4, h5, h6{font-size: 2.4rem;line-height: 1;color: #1d1d1f;}h4, h5, h6{font-size: 2.0rem;color: #1d1d1f;}h5, h6{font-size: 1.8rem;color: #1d1d1f;}h6{font-size: 1.6rem;color: #1d1d1f;}a {text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: px;}.ct-section-inner-wrap {
}.ct-new-columns > .ct-div-block {
}.oxy-header-container {
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.oxel_megamenu_parent:hover{
}
.oxel_megamenu_parent {
 position:relative;
 transition-duration:0.3s;
}
.oxel_megamenu_parent:not(.ct-section):not(.oxy-easy-posts),
.oxel_megamenu_parent.oxy-easy-posts .oxy-posts,
.oxel_megamenu_parent.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_megamenu_parent__title {
}
.oxel_megamenu__wrapper {
transform:; padding-top:2rem;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
 opacity:1;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
 position:relative;
 z-index:1999;
}
.oxel_megamenu__wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_megamenu__wrapper.oxy-easy-posts .oxy-posts,
.oxel_megamenu__wrapper.ct-section .ct-section-inner-wrap{
display:flex;
justify-content:center;
}
@media (max-width: 767px) {
.oxel_megamenu__wrapper {
 margin-top:-6px;
}
}

.oxel_megamenu__wrapper--hidden {
transform:translateY(64px); opacity:0;
pointer-events: none;
}
.oxel_megamenu__close-icon {
color: #333333;}.oxel_megamenu__close-icon 
>svg {width: 0px;height: 0px;}.oxel_megamenu__close-icon {
 margin-right:1rem;
 margin-top:1rem;
}
@media (max-width: 991px) {
.oxel_megamenu__close-icon {
}
}

@media (max-width: 767px) {
.oxel_megamenu__close-icon {
}
}

.oxel_accordion {
 border-right-color:#adb4b9;
 border-left-color:#adb4b9;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-bottom-color:#adb4b9;
}
.oxel_accordion:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion.oxy-easy-posts .oxy-posts,
.oxel_accordion.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
@media (max-width: 767px) {
.oxel_accordion {
}
}

.oxel_accordion__row {
 font-family:Outfit;
 font-weight:600;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
cursor: pointer;
}
.oxel_accordion__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row.oxy-easy-posts .oxy-posts,
.oxel_accordion__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 767px) {
.oxel_accordion__row {
 width:100%;
 text-align:justify;
 padding-top:4px;
}
.oxel_accordion__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row.oxy-easy-posts .oxy-posts,
.oxel_accordion__row.ct-section .ct-section-inner-wrap{
display:flex;
}
}

@media (max-width: 479px) {
.oxel_accordion__row {
 padding-top:2px;
}
}

.oxel_accordion__icon {
color: color(8);}.oxel_accordion__icon 
>svg {width: 40px;height: 40px;}.oxel_accordion__icon {
 transition-duration:0.3s;
 margin-left:3rem;
 margin-bottom:0.6rem;
 margin-right:1rem;
}
.oxel_accordion__icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__icon.oxy-easy-posts .oxy-posts,
.oxel_accordion__icon.ct-section .ct-section-inner-wrap{
display:none;
}
@media (max-width: 767px) {
.oxel_accordion__icon {
 margin-right:0rem;
}
.oxel_accordion__icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__icon.oxy-easy-posts .oxy-posts,
.oxel_accordion__icon.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.oxel_accordion__row_left {
}
.oxel_accordion__row_left:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row_left.oxy-easy-posts .oxy-posts,
.oxel_accordion__row_left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_accordion__content {
 opacity:1;
 transition-duration:3s;
 transition-property:max-height;
 overflow:hidden;
 width:100%;
 max-height:3000px;
 margin-top:0px;
 padding-bottom:1rem;
 padding-top:1rem;
}
.oxel_accordion__content:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content.oxy-easy-posts .oxy-posts,
.oxel_accordion__content.ct-section .ct-section-inner-wrap{
display:none;
}
@media (max-width: 767px) {
.oxel_accordion__content {
 padding-left:1rem;
 padding-right:1rem;
}
.oxel_accordion__content:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content.oxy-easy-posts .oxy-posts,
.oxel_accordion__content.ct-section .ct-section-inner-wrap{
display:flex;
}
}

@media (max-width: 479px) {
.oxel_accordion__content {
}
}

.oxel_accordion__content__hidden {
 max-height:0px;
 padding-left:8px;
 padding-right:8px;
 padding-top:0px;
 z-index:-1;
 padding-bottom:0px;
 transition-duration:0s;
}
.oxel_accordion__content__hidden:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content__hidden.oxy-easy-posts .oxy-posts,
.oxel_accordion__content__hidden.ct-section .ct-section-inner-wrap{
display:flex;
}
.oxel_accordion__row__label {
}
.oxel_dynamicslider {
 width:100%;
}
.swiper-container {
}
.oxel_dynamicslider__container {
 height:400px;
}
.swiper-wrapper {
}
.swiper-slide {
}
.oxel_iconlist {
 max-width:100%;
}
.oxel_iconlist__row {
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 width:100%;
 margin-top:0px;
}
.oxel_iconlist__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_iconlist__row.oxy-easy-posts .oxy-posts,
.oxel_iconlist__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_iconlist__row__icon {
color: #7f8b93;}.oxel_iconlist__row__icon 
>svg {width: 18px;height: 18px;}.oxel_iconlist__row__icon {
 margin-left:32px;
 margin-right:32px;
}
.oxel_iconlist__row__label {
}
.oxel_iconlist__row--dark {
 background-color:#eceeef;
}
.oxel_horizontal_divider {
 margin-top:16px;
 margin-bottom:16px;
 width:100%;
}
.oxel_horizontal_divider:not(.ct-section):not(.oxy-easy-posts),
.oxel_horizontal_divider.oxy-easy-posts .oxy-posts,
.oxel_horizontal_divider.ct-section .ct-section-inner-wrap{
flex-direction:unset;
}
.oxel_horizontal_divider__line {
 height:2px;
 background-color:#98a1a8;
}
.oxel_horizontal_divider__icon {
color: #98a1a8;}.oxel_horizontal_divider__icon 
>svg {width: 16px;height: 16px;}.oxel_horizontal_divider__icon {
flex-shrink: 0;
}
.oxel_horizontal_divider__icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_horizontal_divider__icon.oxy-easy-posts .oxy-posts,
.oxel_horizontal_divider__icon.ct-section .ct-section-inner-wrap{
display:flex;
}
.home-vendors__card {
 overflow:hidden;
}
.home-vendors__card:not(.ct-section):not(.oxy-easy-posts),
.home-vendors__card.oxy-easy-posts .oxy-posts,
.home-vendors__card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.home-vendors__image-wrapper {
 width:100%;
 height:100%;
 overflow:hidden;
 position:relative;
 border-radius:18px;
 min-height:20rem;
 background-position:50% 50%;
}
.home-vendors__image-wrapper:not(.ct-section):not(.oxy-easy-posts),
.home-vendors__image-wrapper.oxy-easy-posts .oxy-posts,
.home-vendors__image-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 1280px) {
.home-vendors__image-wrapper {
 min-height:20rem;
}
}

@media (max-width: 991px) {
.home-vendors__image-wrapper {
 min-height:16rem;
}
}

.home-vendors__columns--2 {
}
.home-vendors__columns--2:not(.ct-section):not(.oxy-easy-posts),
.home-vendors__columns--2.oxy-easy-posts .oxy-posts,
.home-vendors__columns--2.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(1, minmax(0px, 1fr));grid-column-gap: 1.6rem;grid-row-gap: 1.6rem;}
@media (max-width: 991px) {
.home-vendors__columns--2 {
}
.home-vendors__columns--2:not(.ct-section):not(.oxy-easy-posts),
.home-vendors__columns--2.oxy-easy-posts .oxy-posts,
.home-vendors__columns--2.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(1, minmax(200px, 1fr));grid-column-gap: 20px;grid-row-gap: 20px;}
}

.feature-products__grid {
 width:90%;
 margin-bottom:3.2rem;
}
.feature-products__grid:not(.ct-section):not(.oxy-easy-posts),
.feature-products__grid.oxy-easy-posts .oxy-posts,
.feature-products__grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(4, minmax(0px, 1fr));grid-column-gap: 3rem;grid-row-gap: 3rem;}
@media (max-width: 991px) {
.feature-products__grid {
}
.feature-products__grid:not(.ct-section):not(.oxy-easy-posts),
.feature-products__grid.oxy-easy-posts .oxy-posts,
.feature-products__grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(3, minmax(200px, 1fr));grid-column-gap: 20px;grid-row-gap: 20px;}
}

@media (max-width: 767px) {
.feature-products__grid {
}
.feature-products__grid:not(.ct-section):not(.oxy-easy-posts),
.feature-products__grid.oxy-easy-posts .oxy-posts,
.feature-products__grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(2, minmax(200px, 1fr));grid-column-gap: 20px;grid-row-gap: 20px;}
}

@media (max-width: 479px) {
.feature-products__grid {
}
.feature-products__grid:not(.ct-section):not(.oxy-easy-posts),
.feature-products__grid.oxy-easy-posts .oxy-posts,
.feature-products__grid.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(1, minmax(200px, 1fr));grid-column-gap: 20px;grid-row-gap: 20px;}
}

.feature-products__card:hover .feature-products__button-linkwrapper{
 width:80%;
 color:#ffffff;
 transition-duration:0.8s;
 transition-timing-function:ease-out;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; font-weight:600;
 background-color:color(2);
}
.feature-products__card:hover .feature-products__button-text{
 color:rgba(255,255,255,0.95);
 letter-spacing:0.1em;
 transition-duration:0.8s;
 transition-timing-function:ease-out;
}
.feature-products__card:hover .feature-products__button{
 background-color:#1d1f26;
 width:80%;
 transition-duration:0.8s;
 transition-timing-function:ease-out;
}
.feature-products__card:hover .feature-products__image{
transform:scale(1,1); transition-duration:0.8s;
 transition-timing-function:ease-out;
 opacity:0.8;
}
.feature-products__card {
 width:100%;
 height:100%;
}
.feature-products__card:not(.ct-section):not(.oxy-easy-posts),
.feature-products__card.oxy-easy-posts .oxy-posts,
.feature-products__card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
}
.feature-products__image-wrapper {
 border-radius:30px;
 width:100%;
 overflow:hidden;
 background-color:#1d1f26;
}
.feature-products__image-wrapper:not(.ct-section):not(.oxy-easy-posts),
.feature-products__image-wrapper.oxy-easy-posts .oxy-posts,
.feature-products__image-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
justify-content:center;
}
.feature-products__description {
 font-family:'Mulish';
 text-align:center;
 margin-top:0px;
 margin-bottom:0em;
 line-height:1.3;
 font-weight:700;
 color:#262729;
 font-size:1.6rem;
}
.feature-product__eyebrow {
 font-family:Outfit;
 margin-top:0px;
 text-align:center;
 margin-bottom:0em;
 font-size:1.3rem;
 color:#8a8a8a;
}
.feature-products__price {
 font-family:'Mulish';
 margin-top:0px;
 margin-bottom:0.5em;
 font-weight:400;
 color:#8a8a8a;
}
.feature-products__button:hover{
 transition-timing-function:ease-out;
 transition-duration:0.6s;
}
.feature-products__button {
 border-radius:3px;
 padding-top:0.75em;
 padding-right:0.5em;
 padding-left:0.5em;
 transition-timing-function:ease-out;
 transition-duration:0.8s;
 padding-bottom:0.75em;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-color:#404040;
 border-right-color:#404040;
 border-bottom-color:#404040;
 border-left-color:#404040;
 width:100%;
}
.feature-products__button:not(.ct-section):not(.oxy-easy-posts),
.feature-products__button.oxy-easy-posts .oxy-posts,
.feature-products__button.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
@media (max-width: 767px) {
.feature-products__button {
}
}

.feature-products__button-linkwrapper:hover{
}
.feature-products__button-linkwrapper {
 padding-top:0.5em;
 padding-bottom:0.4em;
 padding-right:0.5em;
 padding-left:0.5em;
 transition-timing-function:ease-out;
 transition-duration:0.8s;
 color:#ffffff;
 text-align:center;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-top-color:color(2);
 border-right-color:color(2);
 border-bottom-color:color(2);
 border-left-color:color(2);
 border-radius:4px;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 width:100%;
 font-size:1.6rem;
 font-weight:400;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; background-color:color(2);
 letter-spacing:0.5px;
}
.feature-products__button-text {
 font-family:Outfit;
 margin-top:0px;
 margin-bottom:0px;
 text-align:center;
 line-height:1;
 font-weight:400;
 color:#404040;
}
.feature-products__button-text:not(.ct-section):not(.oxy-easy-posts),
.feature-products__button-text.oxy-easy-posts .oxy-posts,
.feature-products__button-text.ct-section .ct-section-inner-wrap{
display:none;
}
.feature-products__button--reverse {
 border-top-color:#000000;
 border-right-color:#000000;
 border-bottom-color:#000000;
 border-left-color:#000000;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-radius:100px;
 padding-top:1.6rem;
 padding-bottom:1.6rem;
 padding-right:3.2rem;
 padding-left:3.2rem;
 margin-top:0.4em;
 margin-bottom:0.4em;
}
.feature-products__button--reverse:not(.ct-section):not(.oxy-easy-posts),
.feature-products__button--reverse.oxy-easy-posts .oxy-posts,
.feature-products__button--reverse.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.footer__link-wrapper:hover{
}
.footer__link-wrapper {
 font-family:Inherit;
 width:100%;
 font-weight:400;
 text-transform:uppercase;
 text-align:left;
 color:#262729;
 font-size:1.3rem;
 line-height:1;
 margin-top:10px;
 margin-bottom:10px;
}
.footer__link-wrapper:not(.ct-section):not(.oxy-easy-posts),
.footer__link-wrapper.oxy-easy-posts .oxy-posts,
.footer__link-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@media (max-width: 991px) {
.footer__link-wrapper {
}
}

@media (max-width: 767px) {
.footer__link-wrapper {
 text-align:center;
}
.footer__link-wrapper:not(.ct-section):not(.oxy-easy-posts),
.footer__link-wrapper.oxy-easy-posts .oxy-posts,
.footer__link-wrapper.ct-section .ct-section-inner-wrap{
align-items:flex-start;
}
}

@media (max-width: 479px) {
.footer__link-wrapper {
 text-align:left;
}
}

.footer__link-wrapper-text {
}
.feature-products__content-wrapper {
 width:100%;
 background-color:#ffffff;
 padding-top:2em;
 padding-bottom:2em;
}
.feature-products__content-wrapper:not(.ct-section):not(.oxy-easy-posts),
.feature-products__content-wrapper.oxy-easy-posts .oxy-posts,
.feature-products__content-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
}
.feature-products__content-wrapper--bottom {
 width:100%;
}
.feature-products__content-wrapper--bottom:not(.ct-section):not(.oxy-easy-posts),
.feature-products__content-wrapper--bottom.oxy-easy-posts .oxy-posts,
.feature-products__content-wrapper--bottom.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.feature-products__content-wrapper--top {
 width:100%;
 margin-bottom:0.5em;
 padding-right:5%;
 padding-left:5%;
}
.feature-products__content-wrapper--top:not(.ct-section):not(.oxy-easy-posts),
.feature-products__content-wrapper--top.oxy-easy-posts .oxy-posts,
.feature-products__content-wrapper--top.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
.tabs-4683-tab {
}
.tabs-4683-tab-active {
}
.tabs-contents-4683-tab {
}
.home-vendors__image {
}
.home-vendors__logo {
 transition-duration:0.8s;
 transition-timing-function:ease-out;
 opacity:1;
 position:absolute;
 z-index:1;
 width:20rem;
}
.home-vendors__link-wrapper {
 width:100%;
 height:100%;
 border-radius:18px;
 max-height:25rem;
}
.home-vendors__link-wrapper:not(.ct-section):not(.oxy-easy-posts),
.home-vendors__link-wrapper.oxy-easy-posts .oxy-posts,
.home-vendors__link-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 1280px) {
.home-vendors__link-wrapper {
 max-height:20rem;
}
}

@media (max-width: 991px) {
.home-vendors__link-wrapper {
 max-height:16rem;
}
}

.feature-products__image {
transform:scale(1.05,1.05); width:100%;
 height:100%;
 transition-timing-function:ease-out;
 transition-duration:0.8s;
}
.button-generic__link-wrapper {
 font-family:Inherit;
}
@media (max-width: 767px) {
.button-generic__link-wrapper {
 width:80%;
}
}

@media (max-width: 479px) {
.button-generic__link-wrapper {
}
}

.shop__banner {
 width:100%;
}
.shop__banner-image {
}
.vendors__banner {
 background-color:#1d1d1f;
}
.vendors__banner-image {
}
.columns--2 {
}
.columns-gap--m {
}
.columns-gap--xl {
}
.columns--3 {
}
.columns--5 {
}
.columns--m-1 {
}
.button-generic__link-wrapper--reverse:hover{
 width:80%;
 transition-duration:0.6s;
 transition-timing-function:ease-out;
 background-color:color(13);
 color:#ffffff;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-top-color:color(2);
 border-right-color:color(2);
 border-bottom-color:color(2);
 border-left-color:color(2);
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-radius:4px;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; font-weight:500;
}
.button-generic__link-wrapper--reverse {
 font-family:'proxima-nova-extra-wide';
 width:100%;
 border-radius:4px;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 padding-top:0.3rem;
 padding-right:0.5rem;
 padding-bottom:0.3rem;
 padding-left:0.5rem;
 transition-duration:0.6s;
 transition-timing-function:ease-out;
 font-size:1.5rem;
 text-align:center;
 font-weight:500;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 color:#ffffff;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; letter-spacing:0.5px;
}
@media (max-width: 1280px) {
.button-generic__link-wrapper--reverse {
}
}

.footer__week-days {
 font-family:Outfit;
 font-size:1.4rem;
 font-weight:400;
 margin-bottom:0px;
 color:#262729;
 margin-top:0px;
}
@media (max-width: 767px) {
.footer__week-days {
 text-align:left;
}
}

.button-generic__wrapper {
}
.button-generic__wrapper:not(.ct-section):not(.oxy-easy-posts),
.button-generic__wrapper.oxy-easy-posts .oxy-posts,
.button-generic__wrapper.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 1280px) {
.button-generic__wrapper {
}
}

@media (max-width: 767px) {
.button-generic__wrapper:hover .button-generic__link-wrapper{
 width:72px;
}
}

.home-vendors__logo-wrapper {
 width:100%;
 transition-timing-function:ease-out;
 transition-duration:0.8s;
}
.home-vendors__logo-wrapper:not(.ct-section):not(.oxy-easy-posts),
.home-vendors__logo-wrapper.oxy-easy-posts .oxy-posts,
.home-vendors__logo-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.home-vendors__vendor-name {
 color:color(1);
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; text-transform:uppercase;
 font-weight:400;
 margin-bottom:-3rem;
 opacity:0;
 transition-duration:0.8s;
 transition-timing-function:ease-out;
}
.home-vendors__title {
 font-family:Inherit;
 color:color(17);
 font-weight:600;
 font-size:3.2rem;
 text-align:center;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; padding-top:0.75em;
 padding-bottom:0.5em;
}
@media (max-width: 991px) {
.home-vendors__title {
 font-size:2.4rem;
}
}

@media (max-width: 767px) {
.home-vendors__title {
 font-size:2.4rem;
}
}

@media (max-width: 479px) {
.home-vendors__title {
 font-size:2.4rem;
}
}

.background-kratom-kava {
}
.parent_background-kratom-kava {
}
.background-kratom {
}
@media (max-width: 991px) {
.background-kratom {
}
}

.child_test {
}
.parent_test {
}
.header {
}
.header__link:hover{
 border-top-width:1px;
 border-top-color:color(8);
 border-top-style:solid;
}
.header__link {
 font-family:Inherit;
 transition-duration:0.2s;
 color:color(8);
 border-top-color:#ffffff;
 border-top-style:solid;
 border-top-width:1px;
 font-size:1.7rem;
 font-weight:400;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; transition-timing-function:ease;
}
@media (max-width: 991px) {
.header__link {
 margin-left:1.8rem;
 margin-right:1.8rem;
}
}

@media (max-width: 767px) {
.header__link {
 margin-left:0rem;
 margin-right:0rem;
}
}

@media (max-width: 479px) {
.header__link {
 margin-left:0rem;
 margin-right:0rem;
}
}

.header__icon {
color: #333333;}.header__icon 
>svg {width: 55px;height: 55px;}.header__icon {
}
.menu__link:hover{
transform:scale(1.1,1.1) translate(7px); border-bottom-style:solid;
 border-bottom-color:color(13);
 border-bottom-width:1px;
 width:100%;
 text-align:left;
}
.menu__link {
 color:CurrentColor;
 font-size:2.4rem;
 font-weight:500;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 text-align:left;
}
@media (max-width: 767px) {
.menu__link {
 color:color(8);
}
}

.menu-mob__link {
 font-family:Inherit;
 color:color(8);
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; margin-bottom:0px;
 font-weight:500;
 font-size:2rem;
}
@media (max-width: 767px) {
.menu-mob__link {
}
}

.menu-mob__icon--close {
color: #333333;}.menu-mob__icon--close 
>svg {width: 20px;height: 20px;}.menu-mob__icon--close {
 margin-right:2rem;
}
.tabs-8078-tab {
}
.tabs-8078-tab-active {
}
.tabs-contents-8078-tab {
}
.toggle-3603 {
}
.toggle-3603-expanded {
}
.toggle-7501 {
}
.toggle-7501-expanded {
}
.faq-toggle__wrapper {
 width:100%;
 padding-bottom:2rem;
 padding-top:2rem;
 border-bottom-style:solid;
 border-bottom-width:1px;
 border-bottom-color:#1d1d1f2e;
}
.faq-toggle__heading {
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; margin-left:1rem;
 color:color(8);
 font-weight:500;
 font-size:1.7rem;
}
.faq-toggle {
 width:100%;
}

                .faq-toggle .oxy-expand-collapse-icon {
            font-size: 0px;        }
        
        
        .faq-toggle__answer {
 font-size:1.7rem;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale; font-style:italic;
}
.faq-toggle__icon {
color: #1d1d1f;}.faq-toggle__icon 
>svg {width: 26px;height: 26px;}.faq-toggle__icon {
 margin-bottom:-4px;
}
.columns-gap--l {
}
.columns--xl-2 {
}
.columns--l-1 {
}
.columns--xl-only-2 {
}
.mak_sections {
}
.mak_sections:not(.ct-section):not(.oxy-easy-posts),
.mak_sections.oxy-easy-posts .oxy-posts,
.mak_sections.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 991px) {
.mak_sections {
}
}

.link_paragraph {
}
.related_products--heading {
}
.related_products--wrapper {
}
.mak_sections--home {
}
.mak_sections--home:not(.ct-section):not(.oxy-easy-posts),
.mak_sections--home.oxy-easy-posts .oxy-posts,
.mak_sections--home.ct-section .ct-section-inner-wrap{
display:flex;
}
.thumbs-mak-standars__image-wrapper {
}
.thumbs-mak-standars__description {
}
.thumbs-mak-standars__image {
}
.thumbs-mak-standars__description-title {
}
.badge-c {
}
.legal-toggle__answer {
 font-size:1.7rem;
 -webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;}
.header__links-wrapper {
}
@media (max-width: 991px) {
.header__links-wrapper {
}
.header__links-wrapper:not(.ct-section):not(.oxy-easy-posts),
.header__links-wrapper.oxy-easy-posts .oxy-posts,
.header__links-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
}
}

@media (max-width: 767px) {
.header__links-wrapper {
}
}

.mega-dropdown-inner {
}
.mega-dropdown-inner:not(.ct-section):not(.oxy-easy-posts),
.mega-dropdown-inner.oxy-easy-posts .oxy-posts,
.mega-dropdown-inner.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.mega-dropdown-left {
}
.mega-dropdown-right {
}
.mega-dropdown-backdrop {
}
.mega-dropdown-left--shop {
}
.mega-dropdown-right--shop {
}
.mega-dropdown-outer {
}
.mega-dropdown {
}
.mega-dropdown-close-icon {
}
.header__icons-wrapper {
}
.header__wrapper {
}
.mega-menu-container {
}
.mega-dropdown-search {
}
.search-results-grid {
}
.search-results-grid:not(.ct-section):not(.oxy-easy-posts),
.search-results-grid.oxy-easy-posts .oxy-posts,
.search-results-grid.ct-section .ct-section-inner-wrap{
display:none;
}
.search-product-card {
}
.search-product-card__title {
}
.search-product-card__image {
}
.search-product-card__price {
}
.search-product-card__button {
}
.search-modal-backdrop {
}
.hamburger-toggle {
}
.mobile-menu-wrapper {
}
.mobile-menu-inner {
}
.mobile-menu-backdrop {
}
.dropdown-mobile-menu {
}
.mak-footer-newsletter__form {
}
.footer__heading {
}
.footer__contact-heading {
}
.home-cta__sale-product {
 width:100%;
}
.lazy-background {
}
.vendor--mak {
}
.vendor--choice {
}
.vendor--krabot {
}
.vendor--white-rabbit {
}
.vendor--lumenade {
}
.vendor--wave {
}
.home-cta__sale-left-column {
}
.home-cta__sale-right-column {
}
.home-cta__sale-text {
}
.home-cta__sale-button-wrapper {
}
.home-cta__grid {
}
.footer-accordion {
}
.toggle-8986 {
}
.toggle-8986-expanded {
}
.footer-panel {
}
.footer-toggle {
}
.toggle-7329 {
}
.toggle-7329-expanded {
}
.header__icon-wrapper {
}
.mak-banner {
}
.mak-banner__inner {
}
.mak-banner__inner:not(.ct-section):not(.oxy-easy-posts),
.mak-banner__inner.oxy-easy-posts .oxy-posts,
.mak-banner__inner.ct-section .ct-section-inner-wrap{
display:flex;
}
.mak-banner__title {
}
.mak-banner__fg {
}
.mak-banner__logo {
color: #ffffff;}.mak-banner__logo 
>svg {width: 150px;height: 150px;}.mak-banner__logo {
 border-radius:0px;
 opacity:0.5;
}
.mak-banner__inner--left {
}
/* Victoria - Monster Studios */

/*body font conversion*/

html {
  font-size: 62.5%;
}/* Victoria - Monster Studios */

/* Woocommerce Stylesheet */


/* -webkit-transition: all .5s ease 0s; THIS IN THE BOTTOM IMPORTANT!!!!!!!!!!!!!!!!

.woocommerce {
   -webkit-font-smoothing: initial;   
}
*/
/* GLOBAL COLORS

#e8a83a Darker Mustard
#b64400
#b45f05
#a1a1a2
#1d1d1f2e Border Line Color
0px 0px 10px rgba(0,0,0,0.3); (STicky Shadow Header)

*/


/* ===== P Margin Fix? ======================================================== 
p {
  margin: 0;
}

Not sure about this one
p {
  margin-bottom: 1.5em;
  line-height: 1.7;
}

.ct-rich-text p {
  margin-bottom: 1.5em;
}



/* ====================================================== */
/*
.mak_sections--home {
  padding: 6rem 3rem;
  align-items: center;
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
} */
/* ====================================================== */
/*
.mak_sections--home {
  display: flex;
  flex-direction: column;  or row if needed
  padding: 6rem 3rem;
  align-items: center;
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
*/
/*
.mak_sections--home {
  display: block;
  padding: 6rem 3rem;
  align-items: center;
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
*/


/* ===== Link on Paragraphs =====⁉️ Test if ::after works better, maybe adding movement
.link_paragraph {
  color: #b64400;
  font-weight: 400;
  -webkit-font-smoothing: initial;
  transition: 0.35s ease-in-out;
}

.link_paragraph:hover {
  text-decoration: underline;
}*/




/* ===== Product Page Breadcrumb ===== */
 /* 
.mak-breadcrumb {
    margin: 0 0 1em;
    padding: 0;
    font-family: inherit;
    font-weight: 400;
    color: #1d1d1f;
    font-size: 1.5rem;   
}

.mak-breadcrumb a {
    color: #1d1d1f;
    font-weight: 400;
}

.mak-breadcrumb a:last-of-type {
    font-weight: 600;
}

.mak-breadcrumb a:hover {
   color: #e8a83a;
    text-decoration: overline;
    font-weight: 500;
}

.mak-breadcrumb a:last-of-type:hover {
    font-weight: 600;
} */




  









/* Victoria - Monster Studios */

/*** Utility Classes ***/


/*** Columns (Base) ***/

.columns--1 {
  column-count: 1;
}

.columns--2 {
  column-count: 2;
}

.columns--3 {
  column-count: 3;
}

.columns--4 {
  column-count: 4;
}

.columns--5 {
  column-count: 5;
}

/* Xl Brakepoint */
  
  @media (max-width: 1280px) {
  
    .columns--xl-1 {
    column-count: 1;
  }
  
  .columns--xl-2 {
    column-count: 2;
  }
  
  .columns--xl-3 {
    column-count: 3;
  }
  
  .columns--xl-4 {
    column-count: 4;
  }
  
  .columns--xl-5 {
    column-count: 5;
  }
  }
  
  /* L Brakepoint */
  
  @media (max-width: 992px) {
  
    .columns--l-1 {
    column-count: 1;
  }
  
  .columns--l-2 {
    column-count: 2;
  }
  
  .columns--l-3 {
    column-count: 3;
  }
  
  .columns--l-4 {
    column-count: 4;
  }
  
  .columns--l-5 {
    column-count: 5;
  }
  }
  
  /* M Brakepoint */
  
  @media (max-width: 768px) {
  
    .columns--m-1 {
    column-count: 1;
  }
  
  .columns--m-2 {
    column-count: 2;
  }
  
  .columns--m-3 {
    column-count: 3;
  }
  
  .columns--m-4 {
    column-count: 4;
  }
  
  .columns--m-5 {
    column-count: 5;
  }
  }
  
  /* S Brakepoint */
  
  @media (max-width: 480px) {
  
    .columns--s-1 {
    column-count: 1;
  }
  
  .columns--s-2 {
    column-count: 2;
  }
  
  .columns--s-3 {
    column-count: 3;
  }
  
  .columns--s-4 {
    column-count: 4;
  }
  
  .columns--s-5 {
    column-count: 5;
  }
  }
  
/* Columns Gaps */

.columns-gap--xs {
  column-gap: .25em;
}

.columns-gap--s {
  column-gap: .5em;
}

.columns-gap--m {
  column-gap: 1em;
}

.columns-gap--l {
  column-gap: 1.5em;
}

.columns-gap--xl {
  column-gap: 2em;
}/* Victoria - Monster Studios */

/*** Generic Product ***/

/* ========== HIDE FOR JOE TEST ⁉️ check code blocks on template ==========*/


/* ===== Generic Product: Inner Wrap Max Width ===== */
body.single-product .mak_sections .ct-section-inner-wrap {
  max-width: 120rem;    /* Adjust as needed */
  margin-left: auto;
  margin-right: auto;
}

/* ====== LEFT COLUMN IMAGE ====== 

/* Generic Product Main Image Border Radius */
.woocommerce-product-gallery__image {
    overflow: hidden; /* Ensure the image container doesn't cut off the radius */
    border-radius: 18px;
}

/* Zoom Trigger */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    position: absolute;
    top: .5em;
    right: .5em;
    font-size: 2em;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: var(--color-text-primary);
    text-indent: -9999px;
    border-radius: 100%;
    box-sizing: content-box;
    color: #ffffff !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    position: absolute;
    top: 9px;
    left: 9px;
    box-sizing: content-box;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
    content: "";
    display: block;
    width: 2px;
    height: 8px;
    background: #fff;
    border-radius: 6px;
    position: absolute;
    top: 19px;
    left: 22px;
    transform: rotate(-45deg);
    box-sizing: content-box;
}


/* ===== Right Column - Summary ===== NOT YET*/

body.single-product .summary.entry-summary {
  /* Separation with Tabs comes from the Tabs Wrapper */
}

/* ====== H1 Product Title- TOP OF THE STRAIN PICKS //// WITH MEDIA //// */

body.single-product h1.product_title.entry-title{
     font-family: 'Outfit', sans-serif;
     font-weight: 600;
     color: var(--color-text-primary);
     font-size: 3.2rem;
     margin-bottom: 0.5em !important;
    -webkit-font-smoothing: antialiased;  
}

@media (max-width: 768px) { 
   body.single-product h1.product_title.entry-title {
    font-family: 'outfit';
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 3.2rem !important;
    margin-bottom: 0.5em;
    -webkit-font-smoothing: antialiased;  
  }
}

.product_meta, .woocommerce div.product .single_variation_wrap {
    max-width: 360px;
} 


/* ===== Price -BELOW H1 ===== */

/*body.single-product .woocommerce div.product .price {
  margin-bottom: 1em !important;
} */

/* Generic product page price styling */
body.single-product p.price,
body.single-product p.price .woocommerce-Price-amount,
body.single-product p.price bdi {
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1em !important;
}


/* ====== RIGHT COLUMN ====== */

 /* Picks Display None IN USE */   /* == 🅾️ 👀 -Labels == */ 
body.single-product table.variations tr th {
  display: none;
}

/* Target the Whole Variations Form only on Generic Product Pages */
body.single-product form.variations_form.cart {
  max-width: 600px !important;  /* or set width: 100% for full width */
  width: 100%;
/*  margin: 0 auto;  */   /* center it horizontally */
/*  padding: 20px; */
 /* box-sizing: border-box; */
}

 /* Table Variations (Between Earn Point and Add to Cart) IN USE */ 
body.single-product table.variations {
/* Empty because if variations not present top & bottom marging is useless */
  width: 100% !important;           /* Try 100% first, or adjust to 90%, 95%, etc. */
   max-width: 600px !important;
}

/* === WooCommerce Variation Inputs Width Fix === */ /* == 🟩  🟩  🟩  🟩 === */
/* =============== */
/* Variation Width */
/* =============== */

body.woocommerce table.variations .inline-variation-wrapper {
  width: 480px; /* Or 440px, 460px — whatever fits visually */
  max-width: 100%;
}

@media (max-width: 1040px) {
  body.woocommerce table.variations .inline-variation-wrapper {
    width: 460px; /* Or 440px, 460px — whatever fits visually */
    max-width: 100%;
  }
}


@media (max-width: 992px) {
  body.woocommerce table.variations .inline-variation-wrapper {
    width: 360px; /* Or 440px, 460px — whatever fits visually */
    max-width: 100%;
  }  
}

@media (max-width: 768px) {
  body.woocommerce table.variations .inline-variation-wrapper {
    width: 460px; /* Or 440px, 460px — whatever fits visually */
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  body.woocommerce table.variations .inline-variation-wrapper {
    width: 330px; /* Or 440px, 460px — whatever fits visually */
    max-width: 100%;
  }
}

/* @media (max-width: 1040px) {
  body.single-product .inline-variation-wrapper select {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  body.single-product .inline-variation-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.single-product table.variations {
    width: 100% !important;
  }
} 
.inline-variation-wrapper select {
  outline: 2px solid red;
}*/



/* Hide default arrow in most browsers 
.inline-variation-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('/path-to-your-arrow-icon.svg');
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1rem;
  padding-right: 3rem; 
}*/



/* ===== ARROW ===== */ /* == 🟩  🟩  🟩  🟩 === */
/* ===== Variation Dropdown Arrow (Generic Product Pages only) ===== */
body.single-product .inline-variation-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231d1d1f95' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 12px 7px !important;  /* 📌 Fixes mobile arrow scale */
  
  width: 100%;
  height: 100%;
  pointer-events: auto;
  box-sizing: border-box;
}


body.single-product .inline-variation-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0;
  font-family: 'Outfit', sans-serif;
  border: 1px solid var(--color-border-input);
  border-radius: 8px;
  width: 100%;
  max-width: 100%;     /* <--- add */
  overflow: hidden;    /* <--- add */
  box-sizing: border-box;
}

/* Strain Picks */
body.single-product .inline-variation-label {
  flex-shrink: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--color-text-primary) !important;
  padding: 8px 8px 7px 16px !important;
  marging: 8px 8px 7px 8px !important;
}



/* ===== Target Variation Selects only on Generic (single) Product Pages ===== */
/* 2. Select inside the wrapper: flex and width control */   /* == ⚠️‼️👀 -Hack == */
body.single-product .inline-variation-wrapper select {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  width: 100%;           /* <--- add this for good measure */
  box-sizing: border-box;
}

/* 3. (No changes needed to your padding/color styles, keep them as is) */
body.single-product table.variations select {
  padding: 9px 2px 9px 2px !important;
  height: auto;
  min-height: 48px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px !important;
  color: var(--color-text-primary);
  background-color: #fff;
  box-sizing: border-box;
  border: none !important;
  font-style: italic;
}

/* Remove Focus Styles on Variation Selects */   /* == ⚠️‼️👀 -Hack == */
body.single-product table.variations select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: none !important; /* or set a custom color */
}

body.single-product .inline-variation-wrapper:has(select:focus) {
  box-shadow: 0 0 0 1px var(--color-accent-primary) inset;
  border: 1px solid var(--color-accent-primary);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}


/* ====== END OF RIGHT COLUMN VARIATIONS====== */

/* Clear- (Above Count) cursor: pointer; */
.woocommerce a.reset_variations {
    color: var(--color-accent-secondary);
    font-size: 1.5rem !important;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
   -webkit-font-smoothing: initial !important;
}


/* ✅ */ /* ====== QUANTITY ARROWS ====== *//* ==  🔼🔽 👀 == */

/* ===== Whole Quantity + Button + PayPoints ===== NOT IN FEATURED, PayPoints its welded to it */
body.single-product form.cart,
body.single-product .woocommerce-variation-add-to-cart.variations_button {
  margin-top: 2rem;
}

/* ====== Add to Cart Button Disable ====== */   /* == 🅱️ 👀 -Button == */

/* Style Add to Cart button when variation is not selected on generic product pages */
body.single-product .single_add_to_cart_button.disabled.wc-variation-selection-needed {
  width: 100%;
  max-width: 32rem;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px !important;
  border: 2px solid  var(--color-accent-primary) !important;
  text-decoration: none;
  display: inline-block;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-transform: unset !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: background-color 0.3s ease, width 0.8s ease-in-out; 
  margin-top: 0.3rem !important;
   margin-bottom: 0.3rem !important;
}


/* ====== Add to Cart Button Active ====== */   /* == 🅱️ 👀 -Button == */
/* Style Add to Cart button when a variation is selected */

body.single-product .single_add_to_cart_button:not(.disabled) {
  width: 100%;
  max-width: 32rem;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px !important;
  border: 2px solid var(--color-accent-primary) !important;
  text-decoration: none;
  display: inline-block;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-transform: unset !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
}



/* ===== Product Meta -BELOW ADD TO CART BUTTON ============== STYLE */

.woocommerce .product_meta {
    display: flex;
    flex-direction: column;   
}

/* ====== Points Earn Label Styling ======  */
.grPointsEarn {
    display: table;
    position: relative;
    z-index: 0;
    padding: 6px 12px;
   color: #117700 !important; 
 /*   color: #ffd7b3 !important;*/
}

.grPointsEarn:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #eaffea !important; 
    /* background: linear-gradient(90deg, hsl(20, 100%, 66%) 50%, hsl(20, 100%, 80%) 100%)  !important;*/
    z-index: -1;
    opacity: 1 !important;
    border-radius: 4px;
}

/* ====== Points Pay Label Styling ======  */
.grPointsPay {
    display: table;
    position: relative;
    z-index: 0;
    padding: 6px 12px;
    color:  #117700 !important;
    line-height: 1.2;
    margin: 2rem 0px; 
    clear: none; 
}
.grPointsPay:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #eaffea !important; 
    z-index: -1;
    opacity: 1 !important;
    border-radius: 4px; 

}

/* ===== FIX THIS SElECTOR ⁉️ ⁉️ ⁉️ ⁉️ ⁉️ ⁉️ ⁉️ ===== */
div#gr_product_points_buy_lable {
   margin-bottom: 2rem; 
}

/* ====== Parent Container Styling (Flexbox for Desktop) ====== */
/*.woocommerce-variation-add-to-cart {
  /*  display: flex; /* Allow elements to be aligned in a row */
   /* flex-wrap: wrap;  Allow wrapping of items on smaller screens */
  /*  align-items: center; Vertically center the content */
/*}*/

/* Align Add to Cart + Earn Points properly */
.woocommerce-variation-add-to-cart {
/*   display: flex;*/
/*   flex-wrap: wrap;*/
/*   align-items: flex-start; ✅ Don't stretch vertically */
  gap: 1rem; /* Optional: adds spacing between button and label */
  
}
body.single-product .woocommerce-variation-add-to-cart {
   gap: 1rem; /* Optional: adds spacing between button and label */
   margin-bottom: 2rem;
}

/* Horizontal layout for quantity + Add to Cart (non-variation products only) */
body.single-product form.cart {
   display: flex;
   align-items: center;
   gap: 1rem; /* adjust spacing between qty and button */
   flex-wrap: nowrap; /* make sure they stay in one line */
}

/* Prevent full-width button inside form.cart   max-width: 320px;*/
body.single-product form.cart button.single_add_to_cart_button {
   width: auto; /* take up remaining space */
   max-width: 320px !important; /* limit width */
   flex-grow: 1;
   margin-top: 0.3rem !important;
   margin-bottom: 0.3rem !important;  
   flex-shrink: 1;

}

body.single-product .product_meta {
    border-top: 1px solid  var(--color-border-divider) !important;
    border-bottom: 1px solid  var(--color-border-divider) !important;
    padding: 1rem 0rem;
}
/* SKU/NA */
span.sku_wrapper,
span.sku {
    font-family: Inherit;
    font-size: 1.5rem !important;
    color: var(--color-text-primary);
    font-weight: 400; 
    -webkit-font-smoothing: antialiased;
}

/* == Categories == */
span.posted_in {
    font-family: Inherit;
    font-size: 1.5rem !important;
    color: var(--color-text-primary);
    font-weight: 400; 
    -webkit-font-smoothing: antialiased;
}

/* Links Categories - letter-spacing: 0.2px; ? */   /* == 🔗 👀 -link == */
.posted_in a {
    color: var(--color-accent-secondary);
    font-weight: 400; 
    font-family: inherit;
    text-decoration: none;
    -webkit-font-smoothing: initial !important;
}
/* Links Categories - HOVER */
.posted_in a:hover {
    color: var(--color-accent-secondary);
    font-weight: 400;
    font-family: inherit;
    text-decoration-line: underline;
}

/* == Tags == */
span.tagged_as {
    font-family: Inherit;
    font-size: 1.5rem !important;
    color: var(--color-text-primary);
    font-weight: 400; 
    -webkit-font-smoothing: antialiased;
}

/* Links Tags - letter-spacing: 0.2px; ? */   /* == 🔗 👀 -link == */
.tagged_as a {
    color: var(--color-accent-secondary);
    font-weight: 400; 
    font-family: inherit;
    text-decoration: none;
    -webkit-font-smoothing: initial;
}
/* Links Tags - HOVER */
.tagged_as a:hover {
    color: var(--color-accent-secondary);
    font-weight: 400;
    font-family: inherit;
    text-decoration-line: underline;
}

/* ========================================================================= */
/* ====== Headings Description, Adittional Info, Reviews Tabs Wrapper ====== */
/* ========================================================================= */

/* Whole Div */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
  border-top: none;
  border-bottom: none;
  padding-top: 6rem !important;
  font-family: 'Outfit', sans-serif;
}

/* Heading DISPLAY NONE */   /* == ❌ 👀 -H2 == */ 
body.single-product .woocommerce-tabs h2 {
  display: none;
}
/* ==== REMOVES Default WooCommerce Borders around Tab Panels ==== */
body.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important; /* Remove default bg */
}

/* ===== REMOVES THE PERMANENT LINE BEFORE THE TABS ==== */
body.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs::after{
 border: none !important;
}

/*  ===== JUST THE DIV WRAPPING THE PANEL with Desc. Add.Info & Reviews LOOK AFTER EDITING THE HTML ==== */
body.single-product .woocommerce-tabs .panel {
  border-bottom: 1px solid var(--color-border-divider);
/*  border-left: none;*/
/*  border-right: none; */
  box-shadow: none !important;
  padding: 3.2rem  2rem !important;
  border-radius: 0px;
}

/* ===== Remove Tap Highlight from Woo Tabs (Mobile) ===== */
body.single-product ul.woocommerce-tabs li,
body.single-product ul.woocommerce-tabs li a,
body.single-product ul.woocommerce-tabs li a:focus,
body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-tabs,
body.single-product .woocommerce-tabs .panel {
  -webkit-tap-highlight-color: transparent !important;
}

/* ===================================================================================== */
/* ===== Inside Panel links targeting ================================================== */
/* =====    JavaScrip Code Block      ================================================== */
/* ===================================================================================== */

/* ===== Whole Tab Navigation ===== */
body.single-product .woocommerce-tabs ul.tabs {
  display: flex !important;
  justify-content: space-between; /* or space-around / space-evenly */
  padding: 0;
  margin: 0;
  width: 100%;
}

/* ===== Ensures Each <li> Behaves Nicely ==== */
body.single-product .woocommerce-tabs ul.tabs li {
  flex: 1;
  text-align: center;
  margin: 0 !important; /* remove margin if you don't want spacing issues */
  padding: 16px 0; /* adjust as needed */
  border: none;
}

/* WooCommerce Tabs Styling – Generic Product Only */
body.single-product .woocommerce-tabs ul.tabs li a { 
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  font-size: 2.4rem !important;
  text-transform: none !important;
  font-family: 'Outfit', sans-serif; 
  letter-spacing: unset !important;
  padding: 8px 0 12px 0 !important;   /* Only top and bottom, no sides */
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid var(--color-border-divider);
  line-height: 1.3;
  display: inline-block; /* (optional, usually default) */
  text-align: center;
  width: 100%; /* ensures the clickable area fills the flex column */
}

/* WooCommerce Tabs Styling - HOVER */
body.single-product .woocommerce-tabs ul.tabs li a:hover {
  border-bottom: 1px solid var(--color-text-primary);
}

/* Currently Active Tab */
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-text-primary) /* #1d1d1f */ !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--color-text-primary);
}


/* ========================================= */
/* ===== ADDITIONAL INFORMATION LAYOUT ===== */
/* ========================================= */

@media (max-width: 768px) {
  /* Stack each row in Additional Info table */
  .woocommerce-tabs .shop_attributes tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 1.2rem;
  }

  /* Expand both label and value to 100% width */
  .woocommerce-tabs .shop_attributes th,
  .woocommerce-tabs .shop_attributes td {
    display: block;
    width: 100%;
    padding: 0.3rem 0;
  }

  /* Optional: adjust spacing between label and value */
  .woocommerce-tabs .shop_attributes th {
    font-weight: 600;
    margin-bottom: 0.2rem;
  }

  /* Expand both label and value to 100% width */
  .woocommerce-tabs .shop_attributes th {
    border: none !important;
  }

   /* Expand both label and value to 100% width */
  .woocommerce-tabs .shop_attributes td {
    border-top: none !important;
  }

  .woocommerce-tabs .shop_attributes tr {
  border-top: none;
    padding-bottom: 0;
 }
  
  .woocommerce-tabs .shop_attributes tr:first-child {
  border-top: none;
 }
}

/* ===== Whole Tab Navigation ===== */
@media (max-width: 780px) {
  body.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs {
    flex-direction: column;
    padding: 0;
    margin-bottom: 5px;
  }   
}  

/* ===== Whole Tab Navigation
@media (max-width: 768px) {
  body.woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs,
  body.woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs {
    flex-direction: column !important;
    padding: 8px 0 12px;
    margin-bottom: 5px !important;
  } ===== */

/* Links for Description, Adittional Info, Reviews Tabs NEW BUT NOT IN USE 
body.single-product .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a {
  color: var(--color-text-primary);
  font-size: 3.2rem !important;
  font-weight: 500;
  text-transform: none !important;
} */


/* ?????? Description, Adittional Info, Reviews
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background-color: unset;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-radius: 4px 4px 0 0;
    margin: 0 -5px;
    padding: 0 1em; 
  
} */


/* ============================== */
/* ===== STYLE REVIEW PANEL ===== */
/* =============================== */

/* Reviews panel base styling  IT AFFECTS TOP BORDER, === NOT IN USE ===
body.single-product .woocommerce-Tabs-panel--reviews {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border-divider);
} */

/* Reviews heading  === NOT IN USE, Title is DISPLAYED NONE already === */
body.single-product .woocommerce-Reviews-title {
  font-size: 2rem;
  font-weight: 500;
  color: red;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 1rem;
}

/* No reviews text IN USE */
body.single-product .woocommerce-noreviews {
  font-size: 1.7rem;
  color: var(--color-text-muted);
  font-family: 'Outfit', sans-serif;
  font-style: italic;
}

/* ==== Points Box IN USE BUT NEEDS TWEAKING ==== ASK JOE IF STAYS */
body.single-product #gr_product_points_review_lable {
  background: #eaffea;
  color: #117700;
  font-size: 2rem;
  border: none;
  padding: 5px 15px;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-family: 'Outfit', sans-serif;
}

/* Review Form Heading "Be the first to review .." IN USE */
body.single-product #reply-title {
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: 'Outfit', sans-serif;
  margin-bottom: 1rem;
}

/* Text Area IN USE */                           /*===== 🟪 🟪 🟪 🟪 ===== */
body.single-product #commentform textarea#comment {
  width: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  color: var(--color-text-primary);
  padding: 12px;
  border: 1px solid var(--color-border-divider);
  border-radius: 12px;
  background-color: #fff;
  resize: vertical;
  -webkit-font-smoothing: antialiased !important;
}

/* Text Area - FOCUS IN USE */
body.single-product #commentform textarea#comment:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 1.5px var(--color-accent-primary) !important;
}
  

/* ===== Name and Email Layout ===== */
/* ===== Shared Label Styling ===== */
.comment-form .comment-form-author label,
.comment-form .comment-form-email label,
.comment-form .comment-form-rating label,
.comment-form .comment-form-comment label {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-primary);
  font-family: 'Outfit', sans-serif;
}

/* ===== Input Field Styling ===== */
.comment-form .comment-form-author input,
.comment-form .comment-form-email input,
.comment-form .comment-form-comment textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 10px;
  font-size: 1.7rem !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-divider);
  border-radius: 12px;
  margin-top: 0;
  -webkit-font-smoothing: antialiased !important;
}

/* ===== Submit Button ===== */   /* == 🅱️ 👀 -Button == */
/* Match WooCommerce Review Submit Button to Checkout Style on Single Product */
body.single-product #commentform .form-submit,
body.single-product .woocommerce #review_form #respond .form-submit {
  width: 50%;
  margin-left: 0;
  margin-right: auto;
  display: block; /* Not flex! (unless you want left-aligned flex) */
  text-align: left; /* Ensures children align left */
}
/* ===== Mobile (768px and below): Button parent is 100% width ===== */
@media (max-width: 768px) {
  body.single-product #commentform .form-submit,
  body.single-product .woocommerce #review_form #respond .form-submit {
    width: 100%;
  }
}

body.single-product #commentform #submit,
body.single-product .woocommerce #review_form #respond .form-submit input[type="submit"] {
  width: 100%;
  /* max-width: 32rem; */
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px !important;
  border: 2px solid var(--color-accent-primary) !important;
  text-decoration: none;
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-transform: unset !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: all 0.8s ease-in-out;
  box-shadow: none !important;
}

body.single-product #commentform #submit:hover,
body.single-product .woocommerce #review_form #respond .form-submit input[type="submit"]:hover {
  width: 80%;
  background-color: var(--color-accent-primary) !important;
  opacity: 1 !important;
}

/* ===== Center Review Submit Button (Generic Product) ===== */
body.single-product #commentform .form-submit,
body.single-product .woocommerce #review_form #respond .form-submit {
  display: flex;
  justify-content: center;
}


/* ===== Wrap for Flex Layout (Desktop only) ===== */   /* == 🔻👀 -Queries ==*/ 
@media (min-width: 768px) {
  .comment-form .name-email-wrapper {
    display: flex;
    gap: 2%;
  }

  .comment-form .name-email-wrapper .comment-form-author,
  .comment-form .name-email-wrapper .comment-form-email {
    flex: 1 1 48%;
  }
}

/* ===== Mobile: Stack Fields ===== */   /* == 🔻👀 -Queries ==*/ 
@media (max-width: 767px) {
  .comment-form .name-email-wrapper {
    display: block;
  }

  .comment-form .name-email-wrapper .comment-form-author,
  .comment-form .name-email-wrapper .comment-form-email {
    width: 100%;
    margin-right: 0;
  }
}

/* ===== Keep Rating and Review Fields Full Width ===== */
.comment-form .comment-form-rating,
.comment-form .comment-form-comment {
  width: 100%;
  margin-top: 1.5rem;
}
/* =========================== */

/* ===== Text Area - FOCUS IN USE (Applies to Name, Email & Comment text Area too,
DELETE THE PREVIES ONE IF REDUNDANT ====*/   /* == ⁉️👀 == */ 
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 2px solid var(--color-accent-primary) !important;
}

/* ============================================== NOT WORKING ===== */

/* ===== NOT IN USE YET ===== */
/* body.single-product #commentform input#submit:hover {
  background-color: #333;
} */

/* Required Star rating IN USE ==(ITS AFFECTING ALL REQUIRED LABELS)==  */
body.single-product #review_form label {
  font-size: 1.7rem;
  color: var(--color-text-primary);
  font-weight: 400;
  font-family: 'Outfit', sans-serif;
  /*  margin: 8px 0 !important; /* top/bottom and right/left */
}

/* =========== GLOBAL STYLE for "*" Required IN USE =========== */
span.required {
  color: var(--color-accent-secondary); /* Change this to your desired color */
  font-weight: 600 !important;
}

/* 5 Stars Rating Color & Size IN USE */
body.single-product .stars a {
  font-size: 1.6rem;
  color: var(--color-gray-light);
  text-decoration: none;
  margin-right: 4px;
}

/* =========== GLOBAL STYLE for "Checkbox Checked" "sitewide IN USE =========== */

/* ========== GLOBAL CUSTOM CHECKBOX STYLING ========== */   /* == ☑️ 👀 -Checkbox == */ 

/* Base: hide native checkbox appearance */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: white;
  border: 1px solid var(--color-border-divider);
  border-radius: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: all 0.2s ease-in-out;
}

/* Checked state */
input[type="checkbox"]:checked {
  background-color: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary) !important;
}

/* White checkmark */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Optional: focus/hover styling for accessibility
input[type="checkbox"]:focus {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
} */

input[type="checkbox"] + label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem !important;
  color: var(--color-text-primary);
  cursor: pointer;
} 


/* ===========  GLOBAL STYLE for "All Related Products H2" "sitewide IN USE =========== */

/* Div Related Products H2 */
.related_products--wrapper  {
  margin-bottom: 6rem;
}

/* Styles All Related Products H2 */   /* == ❌ 👀 -H2 == */ 
.related_products--wrapper h2 {
  font-size: 3.2rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2em;
  line-height: 1.3;

}


/*☑️ ===== Product Columns: Stack at 767px Instead of 992px ===== */

/* Victoria - Monster Studios */

/*** Cart ***/

/* ===== Debug View for Cart Row Structure
tr.woocommerce-cart-form__cart-item.cart_item {
  outline: 2px dashed magenta;
  background: #c0e0ff88;
}
tr.woocommerce-cart-form__cart-item.cart_item > td {
  outline: 1px solid limegreen;
  background: #fffce080;
  padding: 8px;
} ===== */


/* ========== CART SECTION ========== */
#section-cart {
  max-width: 128rem;
}

/* ========== CART TITLE ========== */
#cart-title {
    margin-top: 6rem;
    margin-bottom: 1em;
    font-family: 'outfit';
    font-weight: 600;
    font-size: 4.8rem;
    color: var(--color-text-primary); 
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  #cart-title {
  font-size: 4rem;
 }
}

@media (max-width: 540px) {
  #cart-title {
   margin-bottom: 0.75em;
 }
}



/* ========== GLOBAL STYLES ========== */
body.woocommerce-cart {
  font-family: 'Outfit', sans-serif;
  color: var(--color-text-primary);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
}

/* ========== REMOVE DEFAULT BOXED LAYOUT ========== */
body.woocommerce-cart .site-main,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart form.woocommerce-cart-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
}

/* ========== CENTER & MAX WIDTH ========== */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals {
  max-width: 900px;
  margin: 0 auto;
}
/*
body.woocommerce-cart table th {
  border: none;
} */

.woocommerce table.shop_table th.product-price {
 padding-left: 60px;
}

/* ========== CART TABLE STYLING ========== */
.woocommerce-cart-form__contents {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
/* Vertical Alignment of All Divs */
.woocommerce-cart tr.cart_item > td {
  vertical-align: top;
  padding: 64px 0px 56px 20px;
}

/* Woo Aqua Border */
body.woocommerce-cart table.shop_table {
  border: none;
  
}

/* Horizontal Lines of All Divs */
body.woocommerce-cart table tr {
    border-bottom: 1px solid var(--color-border-divider);
    border-top: none;
}
/*body.woocommerce-cart table tr:first-child {
  border-bottom: none;
} */

/* Product, Price, Quantiy, Subtotal Bottom Border Removed*/
body.woocommerce-cart table.woocommerce-cart-form__contents thead tr {
  border: none;
  background: transparent; /* optional: remove bg */
  box-shadow: none;         /* optional: remove shadow */
}

/* Horizontal Lines of All Divs Bottom Border Removed*/
body.woocommerce-cart table tr:last-child {
  border-bottom: none;
}


/*
.woocommerce-cart table.cart {
  border-collapse: collapse;
} */
/*
.woocommerce-page .woocommerce-cart-form .product-thumbnail {
    width: 200px !important;
}

.woocommerce-page .woocommerce-cart-form .product-thumbnail a img {
  width: 200px;
  height: auto;
}
*/

.woocommerce-cart tr.cart_item > td.product-thumbnail {
/*  padding-top: 10px; */
}

.woocommerce-cart table.cart img {
    min-width: 140px;
    min-height: 140px;
    border: 1px solid #ffffff;
    overflow: hidden;
}

/* Product, Price, Quantiy, Subtotal DISPALY NONE */
.woocommerce-cart-form__contents th {
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 8px 0;
/*  border-bottom: 1px solid #ddd; */
  border-bottom: none;
  display: none;
}

.woocommerce-cart-form__contents td {
  padding: 24px 0;
  vertical-align: middle;
 /* border-bottom: 1px solid #eee; */
}

/* ==== PRODUCT NAME / LINK (Cart Page Only) ====  max-width: 50%;*/   /* == 🔗 👀 -link == */

.woocommerce-cart tr.cart_item > td.product-name { 
  padding-left: 60px;   /* == ⁉️👀 == */ 

/*  max-width: 180px!important; */
/*  padding-top: 128px; */
}
.woocommerce-cart .product-name {
  font-weight: 400;
  font-size: 16px;
  
}
/* ==== Title Link ====*/   /* == 🔗 👀 -link == */
.woocommerce-cart .product-name a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500 !important;
  font-size: 24px;
  line-height: 1.2;
}
.woocommerce-cart .product-name a:hover {
  text-decoration: underline;
}

/* Style variation details on the cart/product page */
dl.variation {
  margin-top: 32px;
  padding: 8px 0 0 12px;
  font-family: 'Outfit', sans-serif;
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.4em;
  border-top: 1px solid var(--color-border-divider);
  text-align: left;
  font-style: italic;
  -webkit-font-smoothing: antialiased !important;
}

dl.variation p {
  margin: 0;
  display: inline;
}


/* ========== PRICE / SUBTOTAL ========== */
.woocommerce-cart-form__contents .product-price,
.woocommerce-cart-form__contents .product-subtotal {
  color: var(--color-text-primary);
  font-size: 16px;
}
/* Price Amount Span */
body.woocommerce-cart td.product-price .woocommerce-Price-amount.amount {
  font-size: 24px; /* or any size you want */
  font-weight: 500 !important;
  color: var(--color-text-primary);
}

/* Price Subtotal Amount Span */
body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount.amount {
  font-size: 24px; /* or any size you want */
  font-weight: 500 !important;
  color: var(--color-text-primary);
  line-height: 1.2;
}


  
/* ===== PRICE COLUMN DISPALY NONE ===== */
.woocommerce-cart tr.cart_item > td.product-price {
/*  padding-top: 128px; */
/*  padding-left: 60px; */
  display: none;
}

/* I CAN TRY TO REPLACE IT WITH THIS: body.woocommerce-cart tr.cart_item td.product-subtotal */
.woocommerce-cart tr.cart_item > td.product-subtotal {
  text-align: right;
 /* padding-top: 128px; */
}

/* ========== QUANTITY INPUT ========== */
.woocommerce .quantity input[type="number"] {
  width: 50px;
  padding: 4px;
  text-align: center;
  border: none;
/*  border-bottom: 1px solid #ccc; */
  font-size: 24px;
  font-weight: 500 !important;/* was 14px */
  color: var(--color-text-primary);
  background: transparent;
 /* align-items: top; */
  line-height: 1.2;
}

/* ========== QUANTITY INPUT Div ========== */
.woocommerce-cart tr.cart_item > td.product-quantity {
  text-align: center;
  padding-top: 60px;
  
}

/* ========== REMOVE LINK ========== */
.woocommerce .product-remove a {
  color: var(--color-border-divider);
  font-size: 24px;
/*  text-decoration: underline; */
  transition: color 0.2s ease;
  -webkit-font-smoothing: antialiased !important;
}

.woocommerce .product-remove a:hover {
  color: var(--color-text-primary);
}

.woocommerce-cart tr.cart_item > td.product-remove {
  padding-top: 128px;
  padding-left: 64px;
  padding-right: 32px;
}

/* ========== CART TOTALS ========== */
/*.woocommerce table.shop_table {
    border: 1px solid var(--color-border-divider) /* #1d1d1f2e *//*;
    border-top: 3px solid #65bec2;
    border-radius: 0;
    background: #ffffff;
    padding: 20px;
    border-collapse: collapse;
    box-shadow: var(--box-shadow) 0 10px 20px;
} */

/* ========== CART TOTALS ========== */   /* == 🔻 ==*/ 


/* H2 Above Cart Totals DISPALY NONE */   /* == ❌ 👀 -H2 == */  
.oxy-woo-cart .woocommerce .cart_totals h2 {
    margin-bottom: 20px;
    display: none;
}

/* ===== CART TOTALS MAIN POSITION ===== */   /* == 🔻 ==*/ 
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    float: right;
    width: 60%;
}
body.woocommerce-cart .cart-collaterals .cart_totals table {
  border-top: none;
  border: none;
  
}

/**/ /* border: none; */
/* ALL DIV + Text Font*/ 
.cart_totals {
  max-width: 400px;
  margin-left: auto;
  margin-top: 40px;
  padding-top: 24px;
/*  border-top: 1px solid #ccc; */
  font-size: 16px; /* Applies to Remove Only */
  color: var(--color-text-primary);
 /* justify-items: space-between !important; */
}

a.woocommerce-remove-coupon {
    color: var(--color-accent-secondary);
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
}

.cart_totals table {
  border-collapse: collapse;
  width: 100%; 
}

/* All Th, Left of Cart Totals*/ 
.woocommerce-cart .cart-collaterals .cart_totals table th {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: normal;
  font-family: 'Outfit', sans-serif; 
}

.woocommerce-cart .cart-collaterals .cart_totals tr td {
 /* justify-items: right !important; works on Shipping Only */
}

body.woocommerce-cart .cart_totals table td {
  text-align: right;  
}

/* === Cart Totals Price === */
body.woocommerce-cart .cart_totals .woocommerce-Price-amount.amount {
    font-size: 1.7rem;
    font-weight: 600 !important;
    letter-spacing: normal;
    font-family: 'Outfit', sans-serif;
 
}

/* Price on "Flat Rate" Shipping Only */
body.woocommerce-cart ul#shipping_method .amount {
  font-weight: 500;
  font-size: 17px; /* optional */
  color: var(--color-text-primary);     /* optional - match your site */
  font-family: 'Outfit', sans-serif;
  padding-left: 1rem;
}

/* City Avrebiations on "Shipping To" Shipping Only */
body.woocommerce-cart .oxy-woo-cart p.woocommerce-shipping-destination strong {
  display: inline-block;
  padding-left: 1rem; /* or whatever value you prefer */
  font-weight: 500 !important;
  font-size: 17px;
  color: var(--color-text-primary); 
  font-family: 'Outfit', sans-serif;
}
/* Icon on "Change Address" Shipping Only */   /* == 🅱️ 👀 -Button == */   /* == ⁉️👀 == */ 

.woocommerce-cart .cart-collaterals .shipping-calculator-button::after {
  padding-left: 1rem;
}

/* === Order Total Row === */

body.woocommerce-cart .cart_totals .order-total th {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-primary);
  
}
body.woocommerce-cart .cart_totals .order-total td .woocommerce-Price-amount.amount {
    font-size: 24px;
    font-weight: 500 !important;
    color: var(--color-text-primary);
    
}
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
  padding-top: 20px;
}

body.woocommerce-cart .cart_totals td {
  padding-right: 0;
}
/*
.cart_totals th {
  text-align: left;
  padding: 12px 0;
  font-weight: 400;
  border: none;
  text-transform: none !important;
  
}
.cart_totals td {
  text-align: left;
  padding: 12px 0;
  font-weight: 400;
  border: none;
  text-transform: none !important;
}  */

/* All Text Font without Price*/ 
.cart_totals th,
.cart_totals td {
  text-align: left;
  padding: 12px 0;
  font-weight: 400;
  border: none;
  text-transform: none !important;  
}
/* Doesnt Work*/ 
.cart_totals .order-total td {
  font-weight: 600;
  font-size: 18px;
  border-top: 1px solid #ccc;
  padding-top: 16px;  
}
/* ========== DIV COUPON + BUTTON + UPGRADE CART BUTTON ========== */   /* == 🔵🔵⁉️👀  ==*/

/*.woocommerce-cart table.shop_table {
  table-layout: auto;  Allows cells like td.actions to grow 
  width: 100%;
}*/


body.woocommerce-cart td.actions {
 /* display: flex;
 /* flex-direction: column;
 /* align-items: flex-end;  or center, depending on your layout */
 /* gap: 12px;  space between coupon and button */
 /* width: 100%;  Ensures it fills the row */
 /* box-sizing: border-box;*/
  padding-left: 0;
  padding-right: 0;
  
}
/*
body.woocommerce-cart td.actions .coupon {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
} */
@media (min-width: 1024px) {
  .woocommerce-page table.cart td.actions .coupon {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 200px;
    margin-right: 0;
  }

  .woocommerce-page .coupon .button {
    width: auto;
  }
}




/* Coupon Code*/ 
.woocommerce div.product form.cart .variations label, .woocommerce form label {
    font-size: 12px;
    color: var(--color-text-primary);
    margin-top: 8px;
    font-weight: 400;
    font-style: normal;
}

.woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 200px;
    margin-right: .8rem;
    height: 30px;
    font-size: 14px;
    padding: 0 1.1rem;
    line-height: 1;
    margin-right: 34px;
    border-bottom: 1px solid var(--color-border-divider) !important;
    border-top: white !important;
    border-left: white  !important;
    border-right: white  !important;
}

/* Apply Coupon Button  */   /* == 🅱️ 👀 -Button == */
body.woocommerce-cart td.actions .button {
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 2rem !important;
  font-size: 1.7rem !important;
  border-radius: 980px;
  border: 2px solid var(--color-accent-primary) !important;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-transform: unset;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: width 0.8s ease-in-out;
}

 /*body.woocommerce-cart td.actions .button:hover {
    background-color: var(--color-accent-primary) !important;
    color: white;
   width: 20% !important;
    opacity: 1 !important;
} */

body.woocommerce-cart td.actions .button:hover {
  width: 80% !important;
  margin: 0 auto; /* Center the button even when it shrinks */
  color: white !important;
}

/* Update Cart Button*/   /* == 🅱️ 👀 -Button == */
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
  width: 100%;
  max-width: 32rem;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 2rem !important;
  font-size: 1.7rem !important;
  border-radius: 980px;
  border: 2px solid var(--color-accent-primary) !important;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-transform: unset;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: width 0.8s ease-in-out;
  transition: 0.2s ease-in-out;
}

.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]:hover {
    background-color: var(--color-accent-primary) !important;
 /*   width: 20% !important; */
    opacity: 1 !important;
    color: white;
    filter: grayscale(0%);
}


/* ========== PROCEED TO CHECKOUT BUTTON ========== */   /* == 🅱️ 👀 -Button == */
body.woocommerce-cart .wc-proceed-to-checkout {
  padding: 1em 0 1em 20px; /* adjust as needed */
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) /* #e8a83a */ !important;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-transform: unset;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  transition: width 0.8s ease-in-out;
  margin: 0 auto;
}
/* width: max-content !important;   width: 42%;*/

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--color-accent-primary) !important;
    width: 80% !important;
    opacity: 1 !important;
}

/* ================================= */  
/* ========== UPDATE CART ========== */  
/* ================================= */  
/* Base size/behavior for Update Cart (desktop default) */
.woocommerce-page table.cart td.actions button[name="update_cart"]{
  width: 275px;          /* match your ≥993–1280 rule so there’s no jump */
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  float: right;          /* keep your current alignment; remove if not needed */
}

/* Stop the global hover rule from stretching this specific button */
.woocommerce-page table.cart td.actions button[name="update_cart"]:hover,
.woocommerce-page table.cart td.actions button[name="update_cart"]:focus {
  width: 275px !important; /* lock hover/focus width */
  margin: 0 !important;    /* prevent re-centering */
}

/* ========== RESPONSIVE STYLES (desktop → mobile) ========== */

/* ===== 993–1280: Image + Links + Qty + Price ===== */
@media (min-width: 993px) and (max-width: 1280px) {
  .woocommerce-cart tr.cart_item > td.product-remove {
    padding: 128px 32px 56px !important;
  }
  .woocommerce-cart tr.cart_item > td.product-name {
    padding: 64px 0px 56px 16px !important;
  }
  .woocommerce-page table.cart td.product-name {
    width: 45% !important;
  }
  .woocommerce-page table.cart td.product-quantity {
    width: 12.5% !important;
  }
  .woocommerce-page table.cart td.product-subtotal {
    width: 12.5% !important;
  }
  /* Update Cart Button */
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 275px !important;
  }
}

@media (max-width: 992px) {
  .woocommerce-cart td.product-remove {  /* == 🟩 🟩 🟩 🟩 == */
    position: absolute;
    top: 7.2rem; /* == 🟩 🟩 🟩 🟩 == */
    left: 0;
    padding: 8px !important;
    z-index: 10;
  }

  .woocommerce-cart tr.cart_item {
    position: relative;
  }

  .woocommerce-cart table.cart .product-thumbnail  {
    padding-left: 4.8rem !important; /* Add space so the image doesn’t collide with the X */ /* == 🟩 🟩 🟩 🟩 == */
    padding-top: 2rem !important;
  }
}
/*.woocommerce-cart tr.cart_item > td.product-thumbnail*/

/* ===== ≤992: Coupon/Buttons + Image/TD layout ===== */
@media (max-width: 992px) {
  /* Coupon + Update Cart block widths */
  .woocommerce-page table.cart td.actions .coupon,
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 100%;
    max-width: 100%;
  }

  /* Update Cart Button */
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 50% !important;
    margin-top: 3.2rem; /* was 32px */
  }
  .woocommerce-page table.cart td.actions button[name="update_cart"]:hover {
    width: 50% !important; /* match normal state */
    margin-top: 8px !important;      
  }

  /* Coupon input & Apply button */
  .woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 45%;
    margin-right: 5%; /* was 200px */
  }
  .woocommerce-page .oxy-woo-cart table.cart td.actions .coupon .input-text + .button {
    width: 50%;
  }

  /* Cart totals */
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals {
    float: right;
    width: 100%;
  }

  /* Image/TD layout fixes from the other ≤992 block */
  .woocommerce-cart td.product-thumbnail {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 0 0 0 16px !important;
  }
  .woocommerce-cart td.product-thumbnail a,
  .woocommerce-cart td.product-thumbnail img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 160px !important;
  }
  .woocommerce-cart table.cart td.product-name {
    width: auto !important;
    display: block;
    text-align: left !important;
  }
  .woocommerce-cart table.cart td.product-quantity,
  .woocommerce-cart table.cart td.product-subtotal {
    width: auto !important; /* clears 12.5% from 1280 */
    display: block;
  }
  .woocommerce-cart table.cart td.product-quantity {
    padding: 10px 0 8px 24px !important; /* == 🟩 🟩 🟩 🟩  ==  10px 0 8px 20px !important; */
  }
  .woocommerce-cart table.cart td.product-subtotal {
    padding: 10px 0 8px 44px !important; /* == 🟩 🟩 🟩 🟩 ==  10px 0 8px 40px !important; */
    text-align: left !important;
  }
  .woocommerce-cart tr.cart_item > td.product-name {
    padding: 24px 16px 16px !important;
  }
  .woocommerce-cart tr.cart_item > td.product-remove {
    padding: 16px !important;
  }
}

/* ===== ≤780: Stack coupon + button (shared rules) ===== */
@media (max-width: 780px) {
  .woocommerce-page table.cart td.actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px; /* ⬅ shared; overridden at ≤540 */
  }
  .woocommerce-page table.cart td.actions .coupon,
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 100%;
    max-width: 100%;
  }
  /* Update Cart Button */
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 50% !important;      
    margin-top: 8px; /* was 32px */

  }
  .woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 45%;
    margin-right: 5%;
  }
  .woocommerce-page .oxy-woo-cart table.cart td.actions .coupon .input-text + .button {
    width: 50%;
  }
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals {
    /* float: right; */
    width: 100%;
  }
}

/* ===== ≤768: Hide mobile labels + unit price (visual trim only) ===== */
@media (max-width: 768px) {
  body.woocommerce-cart td.product-name::before,
  body.woocommerce-cart td.product-quantity::before,
  body.woocommerce-cart td.product-subtotal::before,
  body.woocommerce-cart td.product-thumbnail::before {
    display: none !important;
  }
  body.woocommerce-cart td.product-price {
    display: none !important;
  }
}

/* ===== Cart: mobile-only tweaks (labels/unit price) ===== */  /* ≤768 */
@media (max-width: 768px) {
  /* Hide WooCommerce's mobile table labels injected via ::before */
  body.woocommerce-cart td.product-name::before,
  body.woocommerce-cart td.product-quantity::before,
  body.woocommerce-cart td.product-subtotal::before,
  body.woocommerce-cart td.product-thumbnail::before {
    display: none !important;
  }

  /* Optional: hide unit price column on mobile to simplify layout */
  body.woocommerce-cart td.product-price {
    display: none !important;
  }


}
/* NOTE 🔁: This block only hides labels/price; it doesn’t touch layout. */


/*  COUPON + BUTTON Stacked */   /* ≤540 */
@media (max-width: 540px) {
  .woocommerce-page table.cart td.actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  .woocommerce-page table.cart td.actions .coupon,
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 100%;
    max-width: 100%;
  }
  /* Update Cart Button */
  .woocommerce-page table.cart td.actions button[name="update_cart"] {
    width: 50% !important;
  }  
  /* Just the Coupon */
  .woocommerce-page .woocommerce-cart-form #coupon_code {
    width: 45%;
    margin-right: 5%;/* was 200px */
  }
  /* Just Apply Button */
  .woocommerce-page .oxy-woo-cart table.cart td.actions .coupon .input-text + .button {
    width: 50%;
  }
  .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    /* float: right; */
    width: 100%;
  }
}
/* NOTE 🔁: Many rules here repeat the ≤780 block with only gap value difference (16px vs 12px). At ≤540 this block wins. */


/* ===================================================== */
/* ================ CART PREVIEW MENU ================== */
/* ===================================================== */


/* Cart uses full viewport; header/footer fixed; body scrolls */


/* ========== 1 HEADER ========== */
.xoo-wsc-header {
    color: var(--color-text-primary);
}

/* ========== 2 MINI CART PRODUCT========== */

.xoo-wsc-product {
  border-bottom: 1px solid var(--color-border-divider) !important; 
}

  /* Shoppers Bought */
.xoo-wsc-sm-sales {
    text-transform: uppercase;
    color:var(--color-text-primary);
    border: 1px solid var(--color-border-input);
    padding: 2px 10px;
    display: block;
    margin-bottom: 5px;
    border-radius: 10px;
    font-size: 10px;
}

span.xoo-wsc-pname {
 line-height: 1.3 !important;
}
span.xoo-wsc-pname a {
  /* Styles for product name link */
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text-primary);  
}
.xoo-wsc-body span.amount  {
    color: var(--color-text-primary) !important;
}
.xoo-wsc-qty-box.xoo-wsc-qtb-square {
  /* Styles for the entire quantity control */
  border: none !important;
  margin-top: 0.4;
}
.xoo-wxc-pprice {
  color: var(--color-accent-primary) !important;
}
.xoo-wsc-qtb-square input {
  /* Style for quantity input number */
  border: none !important;
}
span.xoo-wsc-chng {
  color: var(--color-accent-primary) !important;
  font-size: 2.4rem !important;
}

/* Force visible quantity text color inside side cart */
body .xoo-wsc-qty-box input.xoo-wsc-qty {
  color: var(--color-text-primary) !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
 padding: 0 !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  background: #fff !important;
  position: relative !important;
  z-index: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ========== 3 MINI CART FOOT TOTALS ========== */

.xoo-wsc-ftx-row  {
    border: none !important;
}
.xoo-wsc-ft-totals {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  color: var(--color-text-primary);
}
.xoo-wsc-ft-totals .xoo-wsc-ft-label {
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}
.xoo-wsc-ft-totals .xoo-wsc-ft-price {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}
.xoo-wsc-ft-amt-total {
    border-top: 1px solid var(--color-border-divider);
}

/* ===== Stacked View Cart & Continue Shopping ===== */   /* == 🅱️ 👀 -Button == */
.xoo-wsc-ft-buttons-cont {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px; /* adjust spacing as needed */
  align-items: stretch; /* full-width buttons */
}

/* ===== Mini Cart Footer Buttons ===== */   /* == 🅱️ 👀 -Button == */
.xoo-wsc-ft-buttons-cont a,
.xoo-wsc-ft-buttons-cont button {
  width: 100%; /* Or 48% if you want them side by side */
  min-width: 120px;
  padding: 0.6rem 1.2rem !important;
  border-radius: 999px !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  border: none !important;
  text-align: center;
  text-transform: none !important;
  transition: 0.3s ease;
  letter-spacing: unset !important;
}

/* Optional hover style */
.xoo-wsc-ft-buttons-cont a:hover,
.xoo-wsc-ft-buttons-cont button:hover {
  background-color: var(--color-accent-primary-hover); /* Define this if not already */
  color: white;
}

/* ===== Mini Cart Footer Buttons Add ===== */   /* == 🅱️ 👀 -Button == */
.xoo-wsc-modal a.button.product_type_simple.add_to_cart_button {
  width: 100%; /* Or 48% if you want them side by side */
  min-width: 120px;
  padding: 0.6rem 1.2rem !important;
  border-radius: 999px !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  border: none !important;
  text-align: center;
  text-transform: none !important;
  transition: 0.3s ease;
  letter-spacing: unset !important;
}

/* Optional hover style */
.xoo-wsc-modal a.button.product_type_simple.add_to_cart_button:hover {
  background-color: var(--color-accent-primary-hover); /* Define this if not already */
  color: white;
}


/* ===== Mini Cart Footer ButtonsReturn to Shop ===== */   /* == 🅱️ 👀 -Button == */
.xoo-wsc-empty-cart a.button.btn {
  width: 100%; /* Or 48% if you want them side by side */
  min-width: 120px;
  padding: 0.6rem 1.2rem !important;
  border-radius: 999px !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  border: none !important;
  text-align: center;
  text-transform: none !important;
  transition: 0.3s ease;
  letter-spacing: unset !important;
}

/* Optional hover style */
.xoo-wsc-empty-cart a.button.btn {
  background-color: var(--color-accent-primary-hover); /* Define this if not already */
  color: white;
}

.xoo-wsc-ft-buttons-cont {
  padding-top: 1rem;
  padding-bottom: 1rem;
}


/* ===== Side Cart - Add Button Styling ===== */
span.xoo-wsc-sp-atc a.button.add_to_cart_button {
  background-color: var(--color-primary-accent) !important; /* Replace with your color */
  border-color: var(--color-primary-accent) !important;
  color: #fff !important; /* Ensure text is visible */
  font-size: 1.4rem; /* optional tweak */
  border-radius: 6px; /* optional tweak */
}

/* ===== ACTIVE PRODUCT SLIDE ===== */
/* ===== Side Cart Active Product Slide Styling ===== 
li.xoo-wsc-sp-product.lslide.active {
  background-color: white; 
  border: 1px solid var(--color-border-input)!important;
}*/

/* ===== 4 FOOTER ACTIVE PRODUCT SLIDE ===== */
.xoo-wsc-sp-container {
  border-top: 1px solid var(--color-border-divider)!important;
  border-bottom: 1px solid var(--color-border-divider)!important;
  background-color: white;
  margin: 1.4rem 0;
}

.xoo-wsc-sp-slider {
  background-color: white; 
  margin-top: 1rem;
  max-width: 100vw !important; /* == 👁️‍🗨️‼️👀 == */
  
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.xoo-wsc-sp-slider::-webkit-scrollbar {
  display: none;
}

.xoo-wsc-sp-product {
  flex: 0 0 auto;
  width: 300px; /* Adjust per card width */
  scroll-snap-align: start;
}


 /* == FIX FOR SIZING == */ /* == 👁️‍🗨️‼️👀 == */
.xoo-wsc-sp-slider ul,
.xoo-wsc-sp-slider .lsGrab {
  width: 100% !important;
  max-width: 100vw !important;
}

.xoo-wsc-sp-product.lslide,
.xoo-wsc-sp-product.lslide.active {
  height: 280px; /* ← Try increasing from current 161px to e.g. 190px */
}

/* ==== FOOTER Preview Cart Modal Product Title ==== */   /* == 🔗 👀 -link == */
.xoo-wsc-modal span.xoo-wsc-sp-title a {
  color: var(--color-accent-secondary);
  font-size: 1.4;
  font-weight: 400;
  position: relative;
  display: inline-block; /* ← Important for ::after to appear */
  text-decoration: none;
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
  line-height: 1;
}
.xoo-wsc-modal span.xoo-wsc-sp-title a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
.xoo-wsc-modal span.xoo-wsc-sp-title a:hover::after {
  width: 100%;
}

.xoo-wsc-sp-right-col {
  padding: 0 2rem !important;
}
.xoo-wsc-sp-left-col {
  padding: 0 2rem !important;
}

/* THUMBNAIL FIX 1 */
.xoo-wsc-sp-left-col img.attachment-woocommerce_thumbnail {
  margin-right: 0 !important;
}


/* Reset side cart image constraints */
.xoo-wsc-sp-left-col img.attachment-woocommerce_thumbnail {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin-right: 0 !important;
}

.xoo-wsc-footer .amount {
  color: var(--color-text-primary) !important;
}

/* Remove List & Marker */
.xoo-wsc-sp-product {
  list-style: none !important;
}
/*
li.xoo-wsc-item {
  list-style: none;
}
li.xoo-wsc-item::marker {
  display: none;
}
*/

.xoo-wsc-sp-img img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  max-height: none;
  
}

/* Increase image height */
.xoo-wsc-sp-product.lslide img {
  height: 120px; /* Adjust as needed */
  max-height: 100%;
  object-fit: contain; /* or cover, if you want to crop/fill */
  display: block;
  margin: 0 auto;
}


/* ========================================= */
/* ===== Hide Mini Cart Product Slider ===== */ /* == 🟩 🟩 == *//* == 🟩 🟩 == */
/* ========================================= */
.xoo-wsc-sp-container .xoo-wsc-sp-slider {
  display: none !important;
}



/* ===== ICONS ===== */
span.xoo-wsc-smr-del {
color: var(--color-text-primary);
}

/* ===== REMOVE COUPON SPAN ===== */
.xoo-wsc-remove-coupon span {
    color:  var(--color-accent-secondary);
    margin-left: 8px;
   font-size: 1.7rem;
}

/*========+++++++ NOT WORKING ++++++  ==========*/
/* ===== DROPDOWNS ===== */   /* == 🅾️ 👀 -Labels == */
.xoo-wsc form.woocommerce-cart .form-row input.input-text {
  font-size: 15px;
  font-family: 'Outfit', sans-serif;
  border: 1px solid var(--color-text-primary);
  border-radius: 8px;
  padding: 10px 14px;
  color: #1d1d1f;
}

/* ===== INPUTS ===== */   /* == 🅾️ 👀 -Labels == */
/* Mini Cart Shipping Inputs */
.xoo-wsc .woocommerce form .form-row input.input-text,
.xoo-wsc .woocommerce-page .select2-container .select2-selection {
  font-size: 14px;
  border: 1px solid #1d1d1f90;
  background: #fff;
  color: #1d1d1f;
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
}

/* ===== BUTTON ===== */   /* == 🅱️ 👀 -Button == */
.xoo-wsc button[name="calc_shipping"] {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
}

/* ===== Hover Effect ===== */
.xoo-wsc .woocommerce button[name="calc_shipping"]:hover  {
  width: 80% !important;
  opacity: 1 !important;
}

/* ===== DISCOUNT COLOR ===== */
.xoo-wsc-ft-amt.less {
    color: var(--color-accent-secondary);
}




/* ======================================== */
/* ===  Xoo Side Cart – “+ Add” buttons === */
/* ======================================== */

/* Base style for the add buttons inside the side cart list */
body .xoo-wsc-modal .xoo-wsc-sp-atc a.button,
body .xoo-wsc-modal .xoo-wsc-sp-atc a.wp-element-button,
body .xoo-wsc-modal .xoo-wsc-sp-atc a.button.product_type_simple,
body .xoo-wsc-modal .xoo-wsc-sp-atc a.button.product_type_variable {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.6rem !important;
  border-radius: 999px !important;

  background-color: var(--color-accent-primary) !important; /* your orange */
  border-color: var(--color-accent-primary) !important;
  color: #fff !important;

  font-family: 'Outfit', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;

  border: none !important;
  box-shadow: none !important;
}

/* Hover */
body .xoo-wsc-modal .xoo-wsc-sp-atc a.button:hover {
  background-color: var(--color-accent-primary-hover, #d4942f) !important;
  border-color: var(--color-accent-primary-hover, #d4942f) !important;
  color: #fff !important;
}

/* Make sure plugin’s uppercase/small font doesn’t override */
body .xoo-wsc-modal .xoo-wsc-sp-atc a.button,
body .xoo-wsc-modal .xoo-wsc-sp-atc a.button span {
  text-transform: none !important;
  font-size: 1.5rem !important;
}

/* Optional: center the button within its cell if needed */
body .xoo-wsc-modal .xoo-wsc-sp-atc { text-align: center; }


/* ============================================ */
/* ===== Enable Scroll for Side Cart Body ===== */
/* ============================================ */
/* ==== Make Cart Body Scrollable ==== */
.xoo-wsc-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

}

.xoo-wsc-modal {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;

  flex: 1 1 auto;
}

.xoo-wsc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0; /*  Required fix for Firefox & Safari */

  max-height: none;
}

/* Optional: raise footer too if it gets cut off */
.xoo-wsc-footer {
  z-index: 10002;
}

.xoo-wsc-container,
.xoo-wsc-basket {
  z-index: 10001 !important;
}

.xoo-wsc-bg,
.xoo-wsc-opac {
  z-index: 9999 !important;
}

html.xoo-wsc-cart-active,
body.xoo-wsc-cart-active {
  overflow: hidden !important;
  position: relative !important;
  touch-action: none; /* Prevents iOS bounce */
}

/* ======================================= */
/* ===  XRadio Buttons Cart & Checkout === */
/* ======================================= */
.woocommerce input[type=radio] {
  border: 1px solid var(--color-border-divider);
  box-shadow: none; /*  no glow at all */
  width: 20px;
  height: 20px;
}

/*.woocommerce input[type=radio]:hover {
    border: 1px solid var(--color-accent-secondary);
    box-shadow: var(--color-accent-secondary), 0 0 5px;  no glow at all 
}*/

.woocommerce input[type=radio]:hover {
  border: 1px solid var(--color-accent-secondary);
  box-shadow: 0 0 0 1px var(--color-accent-secondary);
  
}

.woocommerce input[type="radio"]:checked {
  background: #fff;     /* fill the whole circle */
  box-shadow: inset 0 0 0 6px var(--color-accent-secondary);           /* small white dot in center */
  border-color: var(--color-accent-secondary);  /* optional: clean outer ring */
}

.woocommerce ul#shipping_method li input {
  margin: 3px .75em 0 0;  /* margin: 3px .4375em 0 0; */
  vertical-align: top;
}

.woocommerce input[type=radio]:checked:hover {
  border: 1px solid var(--color-accent-secondary);
  box-shadow: 0 0 0 1px var(--color-accent-secondary);
  /*  box-shadow: inset 0 0 0 8px #ffffff !important; no outer shadow *//*  shadow , 0 0 5px*/
}



/* ======================= */
/* ===  Div BORDER FIX === */
/* ======================= */
#text_block-15-66280 {
    font-size: 1.2rem;
    font-weight: 300;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top-style: solid;
    border-top-color: var(--color-border-input) !important;
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--color-border-input) !important;
}/* Victoria - Monster Studios */

/* Woocommerce Extras */


/* Button Generic */

.button-generic__wrapper {
    width: 90%;
    align-items: center;
    margin-top: 3rem;
}

.button-generic__link-wrapper {
  /* width: max-content !important;  */
    width: 49%;
  
    padding-top: 0.2rem;  /* it was 0.3em then 0.25em */
    padding-bottom: 0.2rem;  /* it was 0.3em then 0.25em */
    padding-right: 1.2rem;  /* it was 1.2rem*/
    padding-left: 1.2rem;  /* it was 1.2rem*/
    text-transform: unset;
    font-family: 'outfit';
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: 0px;  /* it was 0.5*/
    text-align: center;
    border-color: #e8a83a;
    border-width: 2px;
    border-radius: 980px;
    color: #ffffff;
    background-color: #e8a83a !important;
    transition: background-color 0.2s ease-out;
    margin: unset;
    /*margin-top: 1.1rem !important;*/
   -webkit-font-smoothing: antialiased;
   transition: width 0.8s ease-in-out;
  
}
.button-generic__link-wrapper:hover {
    width: 42%;
  /*
    font-weight: 600;
    color: #e8a83a !important;
    border-color: #e8a83a!important;
    border-width: 2px; 
    background-color: #ffffff !important;
    transition: background-color 0.2s ease-out;  
   -webkit-font-smoothing: antialiased; 
  */
}
 @media (max-width: 1280px) {
   .button-generic__wrapper {
      width: 100%;
      align-items: center;
      margin-top: 3rem;
}
}

@media (max-width: 992px) {
  .button-generic__link-wrapper {
      /* width: max-content !important;  */
      width: 90%;
    }
  .button-generic__link-wrapper:hover {
      width: 75% !important;
}
}

 @media (max-width: 768px) {
  .button-generic__link-wrapper {
    /* width: max-content !important;  */
      width: 90%;
    }
  .button-generic__link-wrapper:hover {
      width: 85% !important;
}
}   
 @media (max-width: 480px) {
    .button-generic__link-wrapper {
  /* width: max-content !important;  */
      width: 95%;
    }
   .button-generic__link-wrapper:hover {
      width: 85% !important;
}
}







  /* Victoria - Monster Studios */

/* Product Archive */


/* ======================== */
/* ===== PRODUCT LIST ===== */
/* ======================== */

body.post-type-archive-product .mak_sections > .ct-section-inner-wrap {
    max-width: 100%;
    align-items: center;
}

@media (max-width: 1280px) {
    body.post-type-archive-product .mak_sections > .ct-section-inner-wrap {
      padding-right:0rem;
      padding-left: 0rem;
    }
}

@media (max-width: 991px) {
    body.post-type-archive-product .mak_sections > .ct-section-inner-wrap {
      display: flex;
    }  
}

/* ===== Woocommerce Native Product Title - DISPLAY NONE ===== */
#-woo-products-11-431 h1.page-title,#-woo-products-11-431 h2.page-title,#-woo-products-11-431 h3.page-title,#-woo-products-11-431 h4.page-title,#-woo-products-11-431 h5.page-title,#-woo-products-11-431 h6.page-title {
    font-weight: 400;
    font-size: 0px;
    display: none;
}

/* ===== Product Title ===== */
#-woo-archive-title-48-432 {
    margin-top: 6rem;
    margin-bottom: 1em;
    font-family: 'outfit';
    font-weight: 600;
    font-size: 4.8rem;
    color: var(--color-text-primary); 
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  #-woo-archive-title-48-432 {
  font-size: 4rem;
 }
}

@media (max-width: 540px) {
  #-woo-archive-title-48-432 {
   margin-bottom: 0.75em;
 }
}

/* ================================================ */
/* ===== Product Archive: Grid Bottom Spacing ===== */
/* ================================================ */
.woocommerce.woocommerce-page.post-type-archive-product ul.products,
.woocommerce.woocommerce-page.tax-product_cat ul.products {
  margin-bottom: 12rem;
}

@media (max-width: 992px) {
  .woocommerce.woocommerce-page.post-type-archive-product ul.products,
  .woocommerce.woocommerce-page.tax-product_cat ul.products {
      margin-bottom: 9rem;
 }
}
/* Woo Description ON CATEGORY PAGE BELOW BANNER 

<div class="box"></div>  <hr />  <div class="vendors__banner">   
*/
/* .term-description {
  width:100%;
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
} */

.archive .oxy-woo-products {
  width: 100%;
  max-width: 1800px; /* or use 180rem if you're working in rem units */
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.archive .term-description {
/*  max-width: 820px;*/
  margin-left: auto;
  margin-right: auto;
}

.archive .term-description img {     /* IN USE */ 
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  border-radius: 18px;
}

.box {     /* IN USE */ 
  /*  text-align: left; */
    width: 90%;
    max-width: 140rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 9rem;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 0px;
    background-color: #ffffff;
    padding: 2.7rem 0rem 2rem;  
 /* box-shadow: 2px 4px 12px #00000014; */
 /* border-top: 1px solid var(--color-border-divider) /* #1d1d1f2e *//*; */
    border-top: 1px solid var(--color-border-divider); 
    border-bottom: 1px solid var(--color-border-divider);  
}

@media (max-width: 540px) {
  .box {     /* IN USE */    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7.2rem;    
  }
}

.box h3 {     /* IN USE */    
    font-size: 2rem;
    font-weight: 700;
    text-align: left !important;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 0.425em;     /* Adds space below, similar to paragraph spacing */
}

.box p {     /* IN USE */ 
    font-size: 1.7rem;
    font-weight: 400;
    text-align: left !important;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 0.75em;
    margin-top: 0;
}

.box ul li {    /* IN USE */ /* Target li inside ul to keep them inline, and allow wrapping on smaller screens */
    font-size: 1.7rem;
    font-weight: 400;
    text-align: left !important;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 0.235em !important;

    /* width: 80%; */
}

.box-heading {
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center !important;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 1em;
    margin-top: 3em;   
}

@media (max-width: 1040px) {
  .box-heading {
    margin-top: 2em;
  }
}

@media (max-width: 768px) {
  .box-heading {
    margin-top: 2em;
  }
}

@media (max-width: 540px) {
  .box-heading  {
    margin-top: 1.5em;
  }
}

@media (max-width: 540px) {
  .box-heading  {
    font-size: 3rem;
    margin-top: 1.5em;
  }
}

.archive .term-description .box ul li::marker {
  content: none;
}

/*.box b {     == NOT IN USE == 
    font-weight: 600; 
}*/

/* ===== Woocommerce Result Count ===== */

/* #-woo-products-11-431 .woocommerce-result-count {
    
    margin-bottom: 2em;  
} */

 p.woocommerce-result-count {
    font-family: Outfit;
    color: var(--color-text-primary) !important;
    font-weight: 400;
    font-size: 1.7rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
   padding: 8px 0 0 !important;
}

/* ===== WooCommerce Product Archive Sorting Dropdown ===== */
.archive .woocommerce-ordering {
  margin-bottom: 2.4em;
}

.archive .woocommerce-ordering .orderby {
  appearance: none;            /* Reset browser default */
  -webkit-appearance: none;    /* For Safari */
  -moz-appearance: none;       /* For Firefox */
  
  background-color: #fff;
  border: none !important;
  border-radius: 12px;
  padding: 8px 4rem 8px 1.6rem;
  font-size: 1.7rem;
  line-height: 1.6;
  font-family: 'Outfit', sans-serif;
  color: var(--color-text-primary);
  position: relative;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231d1d1f' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 12px 7px;
  cursor: pointer;
  
}

/* Focus & hover states for better accessibility 
.archive .woocommerce-ordering .orderby:hover {
  outline: none;
  border-color: var(--color-accent-primary);
}*/

.woocommerce-ordering .orderby:focus {
  box-shadow: none !important;
  outline: none !important;
}


/* =============================================== */
/* ===== Style current sorting text ============== */  /* == 🔗 👀 -link == */
/* =============================================== */

/* ===== Stack 'Sort by' below result count on ≤540px ===== */
@media (max-width: 540px) {
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering {
    width: 100%;
  }

  .woocommerce .woocommerce-result-count {
    margin-bottom: 0.8rem;
  }

  .woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count,
  .woocommerce .woocommerce-result-count + .woocommerce-ordering {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .archive .woocommerce-ordering .orderby {
    padding: 8px 4rem 8px 0rem;
    width: 50%;
  }
}
/* Woocommerce Ordering Select */
/*
.woocommerce .woocommerce-ordering select { 
    color: var(--color-text-primary) /* #1d1d1f *//*;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 1.8rem;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
} */

/* I WAS USING THIS BELOW!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
.woocommerce .woocommerce-ordering select { 
    color: var(--color-text-primary) /* #1d1d1f *//*;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 1.7rem;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}
*/







/* Victoria - Monster Studios */

/* ===== Main Menu ===== */


/*  cut of of the left panel background color: oxel-megamenu-wrapper var(--color-backdrop-dark); */

/* ===== Hide Mobile Elements on Desktop (min-width: 768px) ===== July 14 */
@media (min-width: 768px) {
  .mobile-header-bar,
  .mobile-menu-wrapper,
  .hamburger-toggle {
    display: none !important;
  }
}

@media (max-width: 540px) {
  .mega-menu-container,
  .mega-dropdown-backdrop {
    display: none !important;
  }
}

/* ===== Link Home Icon ===== */
/* Show on mobile (up to 991px) */
@media (max-width: 991px) {
  #link-home-icon {
    display: inline-flex !important;
  }
}

/* Hide on desktop (768px and up) */
@media (min-width: 992px) {
  #link-home-icon {
    display: none !important;
  }
}

/* Hide on desktop (768px and up) */
@media (max-width: 540px) {
  #link-home-icon {
    display: none !important;
  }
}


/* ===== Home Header-link ===== */
/* Hide on desktop (768px and up) */
@media (max-width: 991px) {
  #home-header-link {
    display: none !important;
  }
}



/* ===== TEMPORARY: Lock Horizontal Scroll for Debugging ===== link-home-icon*/
html, body {
  overflow-x: hidden !important;
}

/* ===== FIX: Remove extra margin-top caused by scroll/animation libraries ===== */
body.oxygen {
  margin-top: 0 !important;
}


/* ===== Force Layout to Stay Within Viewport ===== */
/*.main-menu-wrapper,*/
.header,
.header-wrapper,
.header-row,
.mega-menu-container,
body > .ct-section,
body > .oxy-header,
body > .oxy-header > .ct-div-block {
  max-width: 100vw;
  overflow-x: hidden;
}


/* ================== */
/* ===== Header ===== */
.header {
  width: 100%;
  z-index:1500;  /* ADDED ON FOR SEARCH MODAL */
  background-color: white;  /* ADDED ON FOR SEARCH MODAL */
}

/* ===== Header Bottom Divider Line ===== */
.header::after {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--color-border-divider);
  
  width: calc(100% - 4rem);  /* 2rem left + right */
  max-width: 180rem;
  margin: 0 auto;
}

/* ===== Header Wrapper ===== */
.header__wrapper {
  display: block;  
}

/* ===== Force Row Center Alignment to Bottom ===== */
.oxy-header-center {
  align-items: flex-end !important; /* ⬅️ Force override Oxygen default */
  justify-content: space-between !important; /* Optional: fix spacing */

  width: 100% !important;
  max-width: 140rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  
  margin-inline: auto !important; /* ✅ handles directional bugs - ADDED ON */
  box-sizing: border-box;
  padding: 0 3rem !important;
}

@media (max-width: 767px) {
  .header__icon {
    margin-left: 2rem !important;
  } 
}

/* ===== Force Row Right Alignment to Bottom ===== */
.oxy-header-right {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;

  width: auto !important; /* ✅ Shrinks to fit content */
  max-width: none !important;

  margin-inline: 0 !important;
  padding: 0 0 0 0 !important;

  box-sizing: border-box;
}

.dropdown-right img {
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  .oxy-header-right {
    padding:  0 2rem 0 0 !important;
  } 
}


/* ===== START Media Queries ===== */   /* == 🔻👀 -Queries == */
/* ===== START 1280 ===== */   /* == 🔻👀 -1280 == */  

@media (max-width: 1280px) {
  /* Header Bottom Divider Line */
   .header::after {
     width: calc(100% - 6rem);  /* 2rem left + right */
    }
  .oxy-header-center {
    max-width: 100rem !important;  
  }
}

/* ===== START 1024 ===== */   /* == 🔻👀 -1024 == */  
@media (max-width: 1024px) {
  .oxy-header-center {
    max-width: 84rem !important;  
  }
}

/* ===== START 992 ===== */   /* == 🔻👀 -992 == */ 
@media (max-width: 992px) {
   
  .header__link {
     margin: 0 0.8rem;
  }
}

/* ===== START 992 ===== */   /* == 🔻👀 -768 == */  
/* ===== Header Bottom Divider Line ===== */
@media (max-width: 768px) {
    .header::after {
      width: calc(100% - 4rem);  /* 2rem left + right */
  }
}

/* ===== START 540 ===== */   /* == 🔻👀 -540 == */  
/* ===== Header Bottom Divider Line ===== */
@media (max-width: 540px) {
    .header::after {
      width: calc(100% - 4rem);  /* 2rem left + right */
  }
  #header__logo-link {
  margin: 1rem 1.5rem 0.5rem 0; /*  top/right/bottom/left  */ 
}
  #header__logo-image {
    width: 64px !important;
  }
  .oxy-sticky-header-active #header__logo-link {
    transform: scale(0.65);
    margin-left: 1rem;
    margin-top: 0.5rem;
  }
}

/* ===== START 480 ===== */   /* == 🔻👀 -480 == */  
/* ===== Header Bottom Divider Line ===== */
@media (max-width: 480px) {
  .header::after {
    width: calc(100% - 4rem);  /* 2rem left + right */
  }
  #header__logo-link {
    margin: 1rem 1.5rem 0.5rem 0; /*  top/right/bottom/left  */ 
}
  #header__logo-image {
    width: 56px !important;
  }
  .oxy-sticky-header-active #header__logo-link {
    transform: scale(0.65);

    margin-left: 1rem;
    margin-top: 0.5rem;
  }
}

/* ====================================================== */   /* == 🔵🔵⁉️👀  ==*/
/* Shrink logo on sticky scroll */
/* ===== Sticky Header Logo Shrink & Spacing ===== */
.oxy-sticky-header-active #header__logo-link {
  transform: scale(0.85);
  transition: transform 0.3s ease;

  margin-left: 1rem;
  margin-top: 0.5rem;
}
.oxy-sticky-header-active::after {
  display: none; 
}

/* ===== Base Logo Link Wrapper Spacing ===== */
#header__logo-link {
  transition: transform 0.3s ease-in-out;
  margin: 1rem 1.5rem 0.5rem 0; /*  top/right/bottom/left  */
  
}

#header__logo-image {
  width: 100px;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ================================================= */
/* == Make scaling pivot from the left and smooth == */
#header__logo-link {
  transform-origin: center center;
  will-change: transform;
}

/* Hover (normal header): gentle grow */
#header__logo-link:hover,
#header__logo-link:focus-visible {
  transform: scale(1.04);
}

/* Hover while sticky (base is 0.85 → bump it a bit) */
.oxy-sticky-header-active #header__logo-link:hover,
.oxy-sticky-header-active #header__logo-link:focus-visible {
  transform: scale(0.90);
}


/* ===== Div Wrapper for Links ===== */
.header__links-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center; /* it was space-between */
  margin: 0;
  padding: 0;
 /* gap: 1rem;  */
  width: 100%; 
  /*  max-width: 44rem;  */ 
}

/* ===== Header Links ===== */
.header__link {
  font-size: 1.7rem;
  font-weight: 400;
  font-family: 'Outfit', Sans Serif;
  line-height: 1.6;
  color: var(--color-text-primary);
  padding: 0 0 1.1rem; /* Adjust spacing between links */
  display: inline-flex;
  align-items: center;
  margin: 0 1.4rem;

  /* Prevent jiggle when hover border appears */
  border-top: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
  position: relative;
}

/* animation overlay */
.header__link::after {
  content: "";
  position: absolute;
  top: 0;              /* align with border-top */
  left: 0;
  height: 1px;
  width: 0;            /* start invisible */
  background: var(--color-text-primary);
  transition: width 0.35s ease-in-out;
}

/* expand the line on hover */
.header__link:hover::after {
  width: 100%;
}
/* ===== Header Icon Wrappers - (RIGHT) ===== */
.header__icons-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.7rem;
  padding-bottom: 0rem;
/*  margin-right: 1.5rem; */
}

/* ===== Header Icons ===== */
.header__icon {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 1.8rem;
 /* font-size: 1.2rem;*/
  width: 1.7rem;
  height: 48px;
  color: var(--color-text-primary);   
}
  
/* ===== Header Icon Hover Effect ===== */
.ct-fancy-icon > svg {
  transition: transform 0.2s ease-in-out;
  transform-origin: center;
}

.ct-fancy-icon > svg:hover {
  transform: scale(1.15);
}


/* ===== OXEL MEGA MENU WRAPPER ===== */   /* == ⁉️👀 == */    /* == Change to Own Class-Good for Now == */ 
.oxel_megamenu__wrapper {
  display: flex;
  flex-direction: row;         /* Horizontal */
  justify-content: center;     /* Horizontal alignment: Center */
  align-items: flex-start;     /* Vertical alignment: Top */
  width: 100vw;
  height: 100vh;  /* Full viewport width */
  background-color: var(--color-backdrop-dark); /* Optional: matches 'MAK Brand - secondary' */
}

/* ===== MEGA DROPDOWN OUTER =====*/
.mega-dropdown-outer {
  width: 100%;
  max-width: 180rem;
  margin-left: 2rem;
  margin-right: 2rem;
  background: white;     /* just to help visualize it */
  border-radius: 18px;   /* optional, just for looks */
}

/* ===== MEGA DROPDOWN INNER =====*/
.mega-dropdown-inner {
 /* position: absolute;*/
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 3rem 5.6rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  background: white;
  border-radius: 18px;
 /*   flex-direction: column;     */
}


/* ===== Hide All Dropdowns by Default ===== */   /* == ⁉️👀 == */ 
.mega-dropdown {
  display: flex;
  width: 100%;
  gap: 3rem;
}

/* ===== LINK WRAPPER HOME SHOP VENDORS FAQ ABOUT US ===== */   /* == 🔻👀 -Queries ==*/  
@media (max-width: 992px) {
  .mega-dropdown-inner {
    /* position: absolute;*/
    padding: 4rem 1rem 5.6rem 9rem;  /* == 🟩 == */
  }
  .mega-dropdown {
    display: flex;
    width: 90%;
    gap: 1rem;
  }
}


@media (min-width: 768px) {
  .mega-dropdown-inner {
    /* position: absolute;*/
    width: 100%;
    max-width: 72rem;
  }
}


/* ====================================================== */
/* ===== Mega Menu Close Icon (X Style Replacement) ===== */
/* ====================================================== */

/* Parent must be relative for absolute positioning to work */
.mega-dropdown-outer {
  position: relative;
}

/* ===== Close Icon Wrapper ===== */
.oxel_megamenu__close-icon {
  all: unset;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  position: absolute;
  top: 45px;
  left: calc((100% - 72rem) / 2 - 45px);
  width: 24px;   /* 👈Small clickable area */
  height: 24px;
  z-index: 10;
}

@media (max-width: 992px) {
  .oxel_megamenu__close-icon {
    top: 45px;
    left: 36px;
  }
}


/* Hide Default SVG */
.oxel_megamenu__close-icon svg {
  display: none !important;
}

/* ===== Custom Bars (Smaller X) ===== */
.mega-bar {
  position: absolute;
  width: 20px;   /* ✅ or 20px */
  height: 2px;
  background-color: var(--color-text-muted);
  top: 50%;
  left: 0;
  transition: background-color 0.3s ease;
}

.mega-bar-1 {
  transform: rotate(45deg);
}

.mega-bar-2 {
  transform: rotate(-45deg);
}


/* ================================================================== */
/* ============ Left Column (Shared Across All Dropdowns) =========== */
/* ================================================================== */

/* ===== Left Column: Dropdown Links Section ===== */
.dropdown-left {
  flex: 1;
}

.dropdown-left h4 {
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
  margin-bottom: 8px;
}

.dropdown-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-links li {
  margin-bottom: 0.2rem;
}

.dropdown-links a {
  position: relative;
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.6;
  text-decoration: none;
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  transition: transform 0.3s ease;
}

/* ===== Hover Underline Effect ===== */
.dropdown-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background-color: var(--color-border-divider);
  transition: width 0.3s ease-out;
}

.dropdown-links a:hover::after {
  width: 100%;
}

.dropdown-links a:hover {
  transform: scale(1.1);
}



/* ================================================================== */
/* == Right Column Layout (images, sliders, vendors, social, etc.) == */
/* ================================================================== */

/* ===== Right Column (Shared Across All Dropdowns) ===== */
.dropdown-right {
  width: 260px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  min-height: 100px;
}

.dropdown-right h4 {
  width: 100%;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
}

.dropdown-right img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.dropdown-right .caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}



/* ================================================================== */
/* == Right Column Layout (images, sliders, vendors, social, etc.) == */
/* ================================================================== */

/* ===== Shop Dropdown Links Left Padding (Scoped Styles) ===== */
.mega-dropdown[data-dropdown="shop"] .dropdown-left {
  padding-right: 8rem;
}

/* ===== Featured Product Slider (Shop Menu) ===== */
.featured-slider-wrapper {
  position: relative;
  width: 260px;
  overflow: visible;
  text-align: center;
  padding-top: 1.5rem;
}

.featured-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.featured-slider-track {
  display: flex;
  transition: transform 1s ease;
  width: 100%;
}

.featured-product {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0.5rem 1.6rem;
  box-sizing: border-box;
}

.featured-slider-wrapper .featured-product img {
  width: 100%;
  height: auto;
  border-radius: 1.2rem !important;
  object-fit: contain;
}

.product-title {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-text-primary);
  font-weight: 500;
  transition: width 0.3s ease-out;
}

.product-title:hover {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-accent-secondary);
  font-weight: 500;
}

/* ===== Featured Slider Arrows (SVG) ===== */
.featured-slider-prev,
.featured-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-slider-prev {
  left: -3.4rem;
  top: calc(50% - 30px);
}

.featured-slider-next {
  right: -3.4rem;
  top: calc(50% - 30px);
}

.slider-arrow {
  width: 14px;
  height: 8px;
  display: block;
  transition: transform 0.2s ease;
}

.rotate-left {
  transform: rotate(90deg);
}

.rotate-right {
  transform: rotate(270deg);
}

/* Arrows Color - ADDED ON */
.featured-slider-next .slider-arrow path {
  stroke: var(--color-border-input) !important;
}


/* Disabled arrows */
.featured-slider-prev.disabled,
.featured-slider-next.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

.featured-slider-prev.disabled .slider-arrow path,
.featured-slider-next.disabled .slider-arrow path {
  stroke: white;
}

/* ===== View All Button ===== */
.view-all-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  font-family: 'Outfit', sans-serif;
  line-height: 1.2;
  color: #ffffff;
  background-color: var(--color-accent-primary);
  padding: 0.1rem 1.2rem;
  border: 2px solid var(--color-accent-primary);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  transition: all 0.8s ease-in-out;
  -webkit-font-smoothing: antialiased;
}


/*.view-all-link:hover {
  font-weight: 500;
  color: var(--color-accent-primary);
  background-color: #ffffff;
  text-shadow: 0 0 0.3px currentColor;
}
*/
.view-all-link:hover {
  padding: 0.1rem 3rem;
  transition: all 0.4s ease-in-out;
}

/* ================================================================== */
/* ================== Vendor Images + Caption Swap ================== */
/* ================================================================== */

/* ===== Vendors: Dynamic Image Swap ===== */
.vendors-images {
  position: relative;
  height: auto;
  min-height: 220px;
  display: flex;
  align-items: flex-end;       /* Align children to the bottom */
  justify-content: flex-end;   /* Keep image on the right */
}

/* Image wrapper positioned bottom-right */
.vendors-images .vendor-img-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Active image visible */
.vendors-images .vendor-img-wrapper.active {
  opacity: 1;
  pointer-events: auto;
}

/* Image styling */
.vendors-images .vendor-img {
  width: 100%;
  height: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
  border-radius: 1rem;
  padding-top: 3rem;
}

/* Caption styling */
.vendors-images .caption {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-accent-secondary); /* #b64400 */
  text-align: center;
}



/* ================================================= */
/* ========== Faq Dropdown: Right Column =========== */
/* ================================================= */

/* ----- About - Right Column Layout ----- */
.mega-dropdown[data-dropdown="faq"] .dropdown-right {
  min-height: 0;
  text-align: left;
  align-items: center;
  justify-content: flex-end;
  width: 260px;  
}

/* Caption styling */
.mega-dropdown[data-dropdown="faq"] .dropdown-right .caption {
  margin-top: 1.6rem;
  margin-bottom: 0rem;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text-subtle); /* #b64400 */
  text-align: center;
  letter-spacing: 4px; 
  font-family: 'Proxima Nova Extra Wide', 'Proxima Nova', Outfit, sans-serif;
  text-transform: uppercase;
  padding-left: 7px;
}

/* MAK Logo */
.mega-dropdown[data-dropdown="faq"] .dropdown-right img {
  width: 120px;    /* or your desired size */
  height: auto;
  display: block;
  margin: 0 auto;  /* center if needed */
}



/* ================================================================== */
/* ========== About Dropdown: Contact Info + Social Links =========== */
/* ================================================================== */

/* ===== About: Contact + Social ====== */

/* ----- About: Contact Info Block ----- */
.dropdown-right .contact-info {
  margin-bottom: 1rem;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ----- About: Social Icons Group ----- */
.dropdown-right .social-icons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  font-size: 1.5rem;
}

.dropdown-right .social-icons a {
  text-decoration: none;
  color: var(--color-text-primary);
  transition: opacity 0.2s ease;
}

.dropdown-right .social-icons a:hover {
  opacity: 0.6;
}


/* ======================================================================= */
/* = About Dropdown: Layout, Typography, Hover Effects, and SVG Styling  = */
/* ======================================================================= */

/* ===== Dropdown: About ===== */

/* ----- About - Left Links Styling ----- */
.mega-dropdown[data-dropdown="about"] .dropdown-links a {
  position: relative;
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.6;
  text-decoration: none;
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  transition: transform 0.3s ease;
}

/* ----- About - Underline Hover Effect ----- */
.mega-dropdown[data-dropdown="about"] .dropdown-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background-color: var(--color-border-divider);
  transition: width 0.3s ease-out;
}

.mega-dropdown[data-dropdown="about"] .dropdown-links a:hover::after {
  width: 100%;
}

.mega-dropdown[data-dropdown="about"] .dropdown-links a:hover {
  transform: scale(1.1);
}

/* ----- About - Left Column Text ----- */
.mega-dropdown[data-dropdown="about"] .dropdown-left {
  padding-right: 1rem; /* Optional, adjust as needed */  /* == 🟩 == */
}

.mega-dropdown[data-dropdown="about"] .dropdown-left h4 {
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
  margin-bottom: 8px;
}

.mega-dropdown[data-dropdown="about"] .dropdown-links li {
  margin-bottom: 0.2rem;
}

/* ----- About - Right Column Layout ----- */
.mega-dropdown[data-dropdown="about"] .dropdown-right {
  min-height: 0px;
  text-align: left;
  align-items: flex-start;
  width: 230px;  /* == 🟩 == */
}

/* ----- About - Right Column Heading ----- */
.mega-dropdown[data-dropdown="about"] .dropdown-right h4 {
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
  margin-bottom: 8px;
}

/* ----- About - Social Icon Column Layout ----- */
.mega-dropdown[data-dropdown="about"] .social-icons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.8rem; /* Only if contact info above not present */
}

/* ----- About - Social Icon Links ----- */
.mega-dropdown[data-dropdown="about"] .social-icons a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--color-text-primary);
  font-family: 'Outfit', sans-serif;
  transition: opacity 0.2s ease;
  font-size: 1.5rem;
}

 .mega-dropdown[data-dropdown="about"] .social-icons a:hover {
  opacity: 1;
} 

/* ----- About - Optional SVG Icon Styling ----- */
.mega-dropdown[data-dropdown="about"] .social-icons svg {
  width: 28px;
  height: 28px;
  fill: var(--color-text-primary);
  flex-shrink: 0;

  transition: transform 0.2s ease-in-out;
}

.mega-dropdown[data-dropdown="about"] .social-icons a:hover svg {
  transform: scale(1.1);
}

/* ===== Underline on Hover for Social Text Only ===== */
.mega-dropdown[data-dropdown="about"] .social-icons a span {
  position: relative; /* Required for ::after positioning */
  text-decoration: none; /* Ensure no default underline */
  -webkit-font-smoothing: antialiased;
  color:  var(--color-text-primary);
  line-height: 1.3;

  display: inline-block; /* 👈 Shrinks to fit text only */
}

.mega-dropdown[data-dropdown="about"] .social-icons a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjusts underline position */
  width: 0%;
  height: 1px;
  background-color: var(--color-text-primary);
  transition: width 0.35s ease-in-out;
}

.mega-dropdown[data-dropdown="about"] .social-icons a:hover span::after {
  width: 100%;
}


/* ----- Modal for Mob Menu CSS (USING THIS ONE) ----- */   /* == ⁉️👀 == */ 
 #modal-1667-19-background {
   background-opacity: 0;
   opacity: 0;      
}



/* ========================================================================= */   /* == ⁉️👀 == */ 
/* = Contact Dropdown: Layout, Typography, Hover Effects, and SVG Styling  = */
/* ========================================================================= */ 

/* ===== Dropdown: Contact ===== */

/* ===== Contact - Left Links Styling ===== */
.mega-dropdown[data-dropdown="contact"] .dropdown-links a {
  position: relative;
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.6;
  text-decoration: none;
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  transition: transform 0.3s ease;
}

/* ===== Contact - Underline Hover Effect ===== */
.mega-dropdown[data-dropdown="contact"] .dropdown-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background-color: var(--color-border-divider);
  transition: width 0.3s ease-out;
}

.mega-dropdown[data-dropdown="contact"] .dropdown-links a:hover::after {
  width: 100%;
}

.mega-dropdown[data-dropdown="contact"] .dropdown-links a:hover {
  transform: scale(1.1);
}

/* ===== Contact - Left Column Text ===== */
.mega-dropdown[data-dropdown="contact"] .dropdown-left {
  padding-right: 6rem; /* Optional, adjust as needed */
}

.mega-dropdown[data-dropdown="contact"] .dropdown-left h4 {
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted); /* #a1a1a2 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
  margin-bottom: 8px;
}



.mega-dropdown[data-dropdown="contact"] .dropdown-left .dropdown-links {
  margin-bottom: 1.6rem;
}

/* ===== Contact - Right Column Layout ===== */
.mega-dropdown[data-dropdown="contact"] .dropdown-right {
  min-height: 0px;
  text-align: left;
  align-items: flex-start;
  width: 260px;
}

/* ----- Contact - Right Column Heading ----- */
.mega-dropdown[data-dropdown="contact"] .dropdown-right h4 {
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted); /* #a1a1a2 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
  margin-bottom: 8px;
}

.mega-dropdown[data-dropdown="contact"] .social-icons h4 {
  margin-top: 1.6rem; /* adjust as needed */
  
}

/* ===== Contact - Social Icon Column Layout =====*/
.mega-dropdown[data-dropdown="contact"] .social-icons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.8rem; /* Only if contact info above not present */
}

/* ===== Contact - Social Icon Links ===== */
.mega-dropdown[data-dropdown="contact"] .social-icons a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--color-text-primary); /* #1d1d1f */
  font-family: 'Outfit', sans-serif;
  transition: opacity 0.2s ease;
  font-size: 1.5rem;
}

 .mega-dropdown[data-dropdown="contact"] .social-icons a:hover {
  opacity: 1;
}


/* ===== Contact - Optional SVG Icon Styling ===== */
.mega-dropdown[data-dropdown="contact"] .social-icons svg {
  width: 28px;
  height: 28px;
  fill: var(--color-text-primary);
  flex-shrink: 0;

  transition: transform 0.2s ease-in-out;
}

.mega-dropdown[data-dropdown="contact"] .social-icons a:hover svg {
  transform: scale(1.1);
}

/* ===== Contact - Address ===== */
.mega-dropdown[data-dropdown="contact"] .dropdown-address {
  font-style: normal; /* optional: removes italic default */
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-top: 1.4rem; /* space below */
  margin-bottom: 1.6rem; /* space below */
 /*  white-space: pre-line; ensures <br> behaves properly if needed */
}

/* ===== Underline on Hover for Social Text Only ===== */
.mega-dropdown[data-dropdown="contact"] .social-icons a span {
  position: relative; /* Required for ::after positioning */
  text-decoration: none; /* Ensure no default underline */
  -webkit-font-smoothing: antialiased;
  color:  var(--color-text-primary);
  line-height: 1.3;

  display: inline-block; 

}

.mega-dropdown[data-dropdown="contact"] .social-icons a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjusts underline position */
  width: 0%;
  height: 1px;
  background-color: var(--color-text-primary);
  transition: width 0.35s ease-in-out;
}

.mega-dropdown[data-dropdown="contact"] .social-icons a:hover span::after {
  width: 100%;
}



/* ======================================================================================= */ /* 🟪 */



/* ============================================ */
/* ====== Menu Search Form (AWS) Styling ====== */
/* ============================================ */

/* ===== Custom Modal Styles for Search (No Oxygen Conflicts) ===== */
#modal-3058-19 {
  display: none;
  position: fixed;
  top: 16.8rem;  /* it was 13rem  and 16.2rem after */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
 /* padding: 2rem; */
  background: white;
  border-radius: 14px;
  z-index: 1501; /* Must be above .oxy-modal-backdrop */
/*  box-shadow: 0 10px 40px rgba(0,0,0,0.15); */
  overflow: hidden;
}

/* ===== Modal: Visible When Active ===== */
#modal-3058-19.active {
  display: block;
}
/*@media (max-width: 1024px) {
  #modal-3058-19 {
    width: calc(100% - 6rem); 
    max-width: 60rem;
    margin: 0 auto;            
  }
} */


@media (max-width: 1024px) {
  #modal-3058-19 {
    top: 16rem;     /* 12.4rem BEFORE with the fix */  /* == 🟩 == */        
  }
} 
@media (max-width: 992px) {
  #modal-3058-19 {
    margin-inline: 2rem;
    width: calc(100% - 4rem);
    max-width: none;
    
    top: 15.4rem;     /* 12.4rem BEFORE with the fix */ /* == 🟩 == */ 
    left: 0; /* reset center positioning */
    transform: none; /* cancel translateX(-50%) */
  }
}

@media (max-width: 768px) {
  #modal-3058-19 {
    top: 16.6rem;   /* 12.4rem BEFORE with the fix */ /* == 🟩 == */      
  }
} 

@media (max-width: 540px) {
  #modal-3058-19 {
    top: 11rem;     /* 16rem with the fix */  
  }
} 
@media (max-width: 480px) {
  #modal-3058-19 {
    top: 11rem;      /* 15rem with the fix */         
  }
}


/* ===== Custom Modal Backdrop (Transparent Black) ===== */
.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop-dark);
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.search-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Shift backdrop up 1px ONLY when not sticky */
body.modal-open .header::after {
  display: none;
}

.mega-dropdown-search .aws-container {
  border-radius: 1.4rem;
  border: 0.1rem solid white;
  overflow: hidden;  
}

.mega-dropdown-search .aws-container .aws-search-form  {
    background: #fff;
    /* width: 66px; */
   height: auto;    /* height: 44px; */ 
}

/* ====== Text when Written ====== */
.mega-dropdown-search .aws-container .aws-search-field {
    color: var(--color-text-primary);
    border: none; /*  #d8d8d8 */
 /* border-radius: 8px !important;*/
    font-family: Inherit;
    font-size: 1.7rem;
    font-weight: 400;  /* == it was 500 == */ 
    letter-spacing: normal;
    padding: 1.6rem 4.0rem 1.6rem 1.2rem;  /* == IT WAS 8px 40px 8px 12px == */
    background: #fff;
  
   -webkit-font-smoothing: antialiased;
}

/* ====== Placeholder Search Word ====== */
.mega-dropdown-search .aws-search-field::placeholder {
  color: var(--color-text-subtle);
  font-size: 1.6rem;
  font-weight: 400;  /* == it was 500 == */ 
  opacity: 1;
  padding-left: 2rem;

  -webkit-font-smoothing: antialiased;
}

.woocommerce input.aws-search-field[type="search"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border:  none !important;
}

.mega-dropdown-search .aws-container .aws-search-form .aws-form-btn {
   background: white;  /*  #ededed */
   border: none;  /*  #d8d8d8 */
}

.mega-dropdown-search .aws-container .aws-search-form .aws-search-btn_icon {
    display: inline-block;
    fill: currentColor;
    height: 1.7rem;
    line-height: 1.7rem;
    position: relative;
    width: 4.2rem;
    color: var(--color-text-primary);
}

/* .aws-search-btn_icon    svg-fancy_icon-2911-19   My icon */
/* ===== AWS Search Button Custom Icon Override ===== */
span.aws-search-btn_icon svg {
  display: none !important; /* Hide default icon */
}

.mega-dropdown-search .aws-search-btn_icon {
  display: inline-block;
/*  width: 17px;
  height: 17px; */
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/06/MAK_Search_1.svg'); /* adjust path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*.aws-search-btn_icon svg {
  width: 16px;
  height: 16px;
} */

.mega-dropdown-search .aws-container .aws-search-form .aws-search-clear {
    display: none !important;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    color: var(--color-text-subtle);
    height: 100%;
    width: 3.8rem;
    padding: 0 0 0 0.1rem;
    text-align: left;
}




/* =================================================== */
/* ====== CODE FROM DEV TOOLS - DROPDOWN SEARCH ====== */
/* ========= VERBATUM - MODIFICATIONS MARKED ========= */
/* =================================================== */
.aws-search-result {
    position: absolute;
    text-align: left;
    z-index: 9999999999999;
    background: #fff !important; /* == 🟪  🟪  🟪   == */
    width: 100%;
    margin-top: 3rem; /* == IT WAS -1px == */
    border:none;
    font-size: 1.2rem;
    line-height: 1.6rem;

    margin-top: 1.6rem; /* == ADDED ON == */  /* == 🟪  🟪  🟪   == it was padding */
    margin-bottom: 1.6rem; /* == ADDED ON == */  /* == 🟪  🟪  🟪   == it was padding */
    border-radius: 1.4rem !important; /* == ADDED ON == */  

    overflow: hidden;
}

/* ====== Dropdown Size ====== */
.aws-search-result ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 28rem !important;
    overflow-y: auto;
}

/* ====== 1 aws-result-item - ALL Link "Boxes"====== */
.aws-search-result ul li {
    list-style: none;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    margin: 0 1.6rem !important;  /* == it was 0 == */ /* == 🟪  🟪  🟪   == 0 1.6rem */
    position: relative;  

   background-color: #ffffff;  /* == 🟪  🟪  🟪   == */
}

.aws_result_item.hovered {
  /* Your styles here */
  background-color: #f9f9f9;
/*  color: #000;*/
}
/* .aws_result_item:hover {
  background-color: transparent !important; or your preferred color 
}*/

.aws-search-result .aws_result_item:hover {
  background-color: #fff !important; /* or your preferred color */
}

/* ====== 2 aws_result_link  - Title ====== */
.aws_result_item.hovered .aws_result_title {
  color: var(--color-accent-secondary);
}


/* ====== 2 aws_result_link  - ALL Link "Boxes"====== */
.aws-search-result .aws_result_link {
    display: block;
    cursor: pointer;
    padding: 1rem 0.8rem;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    border: 0;
   padding: 1.6rem 0.8rem 1rem;
}

/* ====== 3 aws_result_link_top ====== */
.aws-search-result .aws_result_item .aws_result_link_top {
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    text-indent: -9999px;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    outline: 0;
    text-decoration: none;
}

/* ====== 3 1/2 aws_result_title - The actual LINK ====== */   /* == ⁉️👀 == */ 
.aws-search-result .aws_result_title {
    display: block;
    font-size: 1.5rem; /* == ADDED ON == */ 
    font-weight: 500; /* == IT WAS 400 == */
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    color: var(--color-text-primary); /* == IT WAS #21759b == */
}
/* ====== 4 aws_result_image - IMAGE ====== */
.aws-search-result .aws_result_image {
    display: block;
    height: 100%;
    float: left;
    padding: 0 1.6rem 0 0;    
}
.aws-search-result .aws_result_image img {
   width: 8rem;
   height: 8rem;
   border-radius: 0px !important;
}

/* ====== 3 1/2 aws_result_excerpt - The actual TEXT ====== */   /* == ⁉️👀 == */ 
.aws-search-result .aws_result_excerpt{
    display: block;
    font-size: 1.3rem; /* == ADDED ON == */ 
    font-weight: 400; /* == IT WAS 400 == */
    color: var(--color-text-muted); /* == IT WAS #222 == */
 /*  -webkit-font-smoothing: antialiased; */
}

/* ====== 3 1/2 aws_result_price - The actual PRICE ====== */   /* == ⁉️👀 == */ 
.aws_result_price .woocommerce-Price-amount {
  display: inline; /* == IT WAS BLOCK == */ 
  align-items: center; /* == ADDED ON == */ 
  gap: 0.4rem; /* Optional spacing between $ and number */
  font-size: 1.6rem !important; /* == ADDED ON == */ 
  font-weight: 400 !important; /* == ADDED ON == */ 
  color: var(--color-text-primary);
  
}

.aws-search-result .aws_result_price {
  display: flex;
  margin: 1rem 0 0;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
  gap: 0.5rem; /* Optional: spacing between prices */
}
/* 
.aws_result_item_price { == ADDED ON CHAT== 
  display: flex;
  align-items: flex-end; 
  gap: 4px;
}
*/ 
/* ====== View All Results ====== */ 
/* .aws-search-result .aws_search_more a {
    line-height: 40px;
    display: block;
    text-decoration: none;
    border: 0;
    text-align: center;
    color: var(--color-accent-secondary); 
  
   font-size: 14px !important;  
} */
 /* LOOKK UP THE CORRECT HOVERED
.aws-search-result ul li:last-child .hovered {
    border-bottom: 0;
  background-color: white;  == ADDED ON == 
}
/* ============================== */
/* ====== View All Results ====== */ /* == ⁉️👀 == */ /* == ⁉️👀 == */ /* == ⁉️👀 == */ /* == ⁉️👀 == */ /* == ⁉️👀 == */ 
/* ============================== */
.aws-search-result .aws_search_more a {
    line-height: 40px;
    display: block;
    text-decoration: none;
    border: 0;
    text-align: center;
    color: #fff;  /* == IT WAS #21759b == var(--color-accent-secondary)*/  
    font-size: 17px !important;  /* == ADDED ON == */ 
    font-weight: 500 !important;
    background-color: var(--color-accent-primary) !important;
    line-height: 1.2;
   -webkit-font-smoothing: antialiased;    
  
    border-radius: 999px;
    margin: 2rem auto;
    padding-top: .3rem; /* 🔧 centered by default */
    padding-bottom: .4rem; 

    transition: all 0.35s ease-in-out;
    width: 70%;         /* or 100%, or a fixed value if needed */
}

.aws-search-result .aws_search_more a:hover {
   width: 80% !important;
   transition: all 0.35s ease-in-out;
}


.aws-search-result ul li:last-child {
    border-bottom: 0;
  background-color: #fff !important; /* == ADDED ON == var(--color-accent-primary)*/ 
}

.aws-search-result ul li:last-child:hover {
  background-color: #fff !important; /* == ADDED ON == var(--color-accent-primary)*/ 
}

/* =========================================== */
/* == BOTTOM BORDER RADIUS - NEW - OPTIONAL == 
.aws-search-result ul > li.aws_result_item:not(.aws_search_more):nth-last-child(2) {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  overflow: hidden;
}*/ 


/* =================================== */
/* ==== Mobile Menu Modal Wrapper ==== */
/* =================================== */
.mobile-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;; /*transparent;*/
  z-index: 1499; /* Matches .search-modal-wrapper */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}

/* ==== When Active (Show Menu) ==== */
.mobile-menu-wrapper.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==== Mobile Menu Inner (Matches Search .modal content)
.mobile-menu-inner {
  width: 100%;
  height: 100%;


  padding: 4rem 2rem;
  margin: 4rem 2rem;
  background-color: white;
} ==== */
 /* margin: 0 auto;*/
/*  max-width: 720px; */

.mobile-menu-inner {
  width: calc(100% - 4rem); /* example: 2rem left + 2rem right */
  margin: 10rem 2rem 2rem;   /* it might need calc !!!!! */
  padding: 4rem 2rem;
  background-color: white;
  border-radius: 18px;
  overflow: hidden;
}


@media (max-width: 540px) {
  .mobile-menu-inner {
    margin: 11rem 2rem 2rem;   /* it might need calc !!!!! */
  } 
}
@media (max-width: 480px) {
  .mobile-menu-inner {
   margin: 11rem 2rem 2rem;   /* it might need calc !!!!! */
  }
}

/* ==== Backdrop ==== */
.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-backdrop-dark);/*rgba(0, 0, 0, 0.6);  Same as search backdrop */
  z-index: 1400; /* One below the menu */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ==== Show Backdrop ==== */
.mobile-menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==== Prevent Scroll When Open ==== */
body.modal-open {
  overflow: hidden;
}

/* ======================================= */
/* ======= Hamburger Toggle Current ====== */
/* ===== Hamburger Toggle (Combined) ===== */
.hamburger-toggle {
  all: unset;
  display: inline-flex;              /* keep bars stacked */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 48px;
  margin-left: 1.5rem;
  cursor: pointer;
  color: var(--color-text-primary);
}


/* ==== Hamburger Toggle Bar ==== */
.hamburger-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0;
  background-color: var(--color-text-primary);
  border-radius: 1px;
  transition: transform 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
  transform-origin: center;
}

/* ==== Toggle animation ==== */
.hamburger-toggle.is-active .bar-1 {
  transform: rotate(45deg) translate(2.5px, 2.5px);
}

.hamburger-toggle.is-active .bar-2 {
  transform: rotate(-45deg) translate(2.5px, -2.5px);
}




/* ================================================= */
/* ===== Reset Header Links for Tablet/Desktop ===== */  /* == ⁉️👀 == */
/* ================================================= */

/* ✅ Keep it hidden on mobile */
@media (max-width: 767px) {
  .header__links-wrapper {
    display: none !important;
  }
}

/* ✅ Show it from 768px and up */
@media (min-width: 768px) {
  .header__links-wrapper {
    display: flex !important;
  }
}

/* Victoria. Monster Studios */


/* =================================================== */
/* ===== MAK KRATOM — MY ACCOUNT PAGE STYLESHEET ===== */
/* =================================================== */

/* ========== SECTION MY ACCOUNT ========== */
#section-my-account {
  max-width: 128rem;
}

/* ========== CART TITLE ========== */
#my-account-title {
    margin-top: 6rem;
    margin-bottom: 1em;
    font-family: 'outfit';
    font-weight: 600;
    font-size: 4.8rem;
    color: var(--color-text-primary); 
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  #my-account-title  {
  font-size: 4rem;
 }
}

@media (max-width: 540px) {
  #my-account-title {
   margin-bottom: 0.75em;
 }
}

 /* ===== WOOCOMMERCE LIKNS MY ACCOUNT GLOBAL ===== */   /* ===== 🌏 🌏 🌏 🌏 ===== */
body.woocommerce-account .woocommerce a {
  color: var(--color-accent-secondary);
  font-weight: 500;
  -webkit-font-smoothing: antialiased !important;
}

.oxy-woo-my-account .woocommerce form.login {
  padding-top: 8px !important;
}
.oxy-woo-my-account .woocommerce form.register {
  padding-top: 8px !important;
}
/* === Mobile First: Full Width === */
.oxy-woo-my-account .woocommerce form.register,
.oxy-woo-my-account .woocommerce form.login {
  width: 100% !important;
}

/* === Desktop: Half Width Side-by-Side === */
@media (min-width: 996px) {
  .oxy-woo-my-account .woocommerce form.register,
  .oxy-woo-my-account .woocommerce form.login {
    width: 60% !important;
  }
}
/* === Desktop: Half Width Side-by-Side === */
@media (min-width: 768px) {
  .oxy-woo-my-account .woocommerce form.register,
  .oxy-woo-my-account .woocommerce form.login {
    width: 80% !important;
    
  }
}

/* === Desktop: Half Width Side-by-Side === */
@media (min-width: 480px) {
  .oxy-woo-my-account .woocommerce form.register,
  .oxy-woo-my-account .woocommerce form.login {
    width: 100% !important;
    padding: 0px !important;
  }
}
/* ========== GLOBAL WRAPPER (My Account Two-Column Layout) ========== */ /* ===== 🌏 🌏 🌏 🌏 ===== */
body.woocommerce-account .woocommerce .col2-set {
  display: block !important;
  border: none;
  border-top: unset;
  border-radius: 0;
  background: white;
  padding: 2rem;
  border-collapse: collapse;
  box-shadow: unset;
  max-width: none;       /* ⬅️ remove width limit */
  margin: 0;             /* ⬅️ remove auto-centering */
  gap: 0 !important;
}

/*@media (min-width: 768px) {
  body.woocommerce-account .woocommerce .col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
  }

  body.woocommerce-account .woocommerce .col2-set .col-1,
  body.woocommerce-account .woocommerce .col2-set .col-2 {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
  }
}*/

body.woocommerce-account .woocommerce .u-column1.col-1,
body.woocommerce-account .woocommerce .u-column2.col-2 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0rem;
  border: none;
  border-radius: 0;
  background: white;
  box-shadow: unset;
}


body.woocommerce-account .woocommerce .u-column1.col-1 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0rem;
  border: none;
  border-radius: 0;
  background: white;
  box-shadow: unset;
}

body.woocommerce-account .woocommerce .u-column2.col-2 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0rem;
  border: none;
  border-radius: 0;
  background: white;
  box-shadow: unset;
}


 
/* ========== LOGIN PANEL STYLES ========== */
.woocommerce form.login {
  border: none;
  border-radius: unset;
  padding: 4.8rem 0rem 3.2rem !important;
}

body.woocommerce-account .woocommerce-notices-wrapper {
 /* max-width: 480px !important;
  margin: 0 auto 2rem auto;*/
}

  /* == 🟪 🟪 🟪 🟪   == */

/* body.woocommerce-account h2 */ body.woocommerce-account .u-columns.col2-set h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 3.2rem !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 1em !important;
}

/* === Login Form Structure === */
body.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 0 !important;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
  display: block;
  margin-bottom: 1rem;
  margin-top: 0.5rem !important;
}

/* === Login Button === */ /* == 🟧  == */ 
body.woocommerce-account .woocommerce-form-login__submit {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
}

body.woocommerce-account .woocommerce-form-login__submit:hover {
  width: 80% !important;
  opacity: 1 !important;
}


/* ========== REGISTER PANEL STYLES ========== */
body.woocommerce-account .oxy-woo-my-account .woocommerce form.register {
  border: unset;
  border-radius: unset;
  padding: 0rem;
  background-color: white;
  margin-top: 2rem;
}


/* ========== 🔴 🔴 ========== */

body.woocommerce-account .woocommerce .u-column1.col-1,
body.woocommerce-account .woocommerce .u-column2.col-2 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0rem;
  border: none;
  border-radius: 0;
  background: white;
  box-shadow: unset;
}


body.woocommerce-account .woocommerce .u-column1.col-1 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0rem;
  border: none;
  border-radius: 0;
  background: white;
  box-shadow: unset;
}

body.woocommerce-account .woocommerce .u-column2.col-2 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 4.8rem 0 0; /* ✅ Add margin-top */;
  border: none;
  border-top: 1px solid var(--color-border-divider); /* ✅ Add border-top */
  border-radius: 0;
  background: white;
  box-shadow: unset;
}

body.woocommerce-account .oxy-woo-my-account form.register p {
  font-size: 1.5rem;
  color: var(--color-text-primary);
  line-height: 1.5 !important;
}

body.woocommerce-account .woocommerce-privacy-policy-text {
  margin-bottom: 4.5rem;
}

/* ========== PRIVACY POLICY LINK (Register Panel) ========== */
body.woocommerce-account .woocommerce-privacy-policy-text a {
  color: #b64400;
  font-weight: 400;
  position: relative; /* Required for ::after */
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
  text-decoration: none; /* Remove default underline */
}

body.woocommerce-account .woocommerce-privacy-policy-text a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* 👈 Moves line slightly below the text baseline */
  width: 0%;
  height: 1px;
  background-color: #b64400;
  transition: width 0.35s ease-in-out;
}

body.woocommerce-account .woocommerce-privacy-policy-text a:hover::after {
  width: 100%;
}

body.woocommerce-account .woocommerce form.register p.woocommerce-form-row.form-row-wide {
  margin-bottom: 2.4rem;
}

  /* ========== REGISTER BUTTON ========== */ /* == 🟧  == */
body.woocommerce-account .woocommerce form.register button.button {
  float: none !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
}

body.woocommerce-account .woocommerce form.register button.button:hover {
  width: 80% !important;
  opacity: 1 !important;
}


/* ========== FLOATING LABEL SYSTEM ========== */
body.woocommerce-account .woocommerce form .form-row {
  position: relative;
  margin-bottom: 2rem;
}


/* ==== Remove Apple-style border ONLY for Country/State rows ==== */
body.woocommerce-account  .form-row#billing_country_field,
body.woocommerce-account  .form-row#billing_state_field,
body.woocommerce-account  .form-row#shipping_country_field,
body.woocommerce-account  .form-row#shipping_state_field {
 /* border: none !important; */
  margin-bottom: 2.4rem;
}

body.woocommerce-account .woocommerce form .form-row label {
  position: absolute;
  left: 12px;
  top: 8px;
  font-size: 1.3rem;
  transition: top 0.2s ease-out;
  pointer-events: none;
  z-index: 2;
  background-color: white;
  padding: 0 4px;
  font-family: 'Outfit', sans-serif;
  color: var(--color-text-primary);
}

body.woocommerce-account .woocommerce form .form-row:focus-within label,
body.woocommerce-account .woocommerce form .form-row .input-text:not(:placeholder-shown) + label {
  top: -20px;
}

body.woocommerce-account .woocommerce form .form-row .input-text {
  padding: 40px 16px 16px !important;
  font-size: 17px;
  width: 100%;
  font-family: 'Outfit', sans-serif;
  border: 1px solid var(--color-border-input);
  border-radius: 12px;
  background-color: #fff;
  color: var(--color-text-primary);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  outline: none;
  box-shadow: none;
}

body.woocommerce-account .woocommerce form .form-row .input-text::placeholder {
  font-size: 17px;
  font-family: 'Outfit', sans-serif;
  color: var(--color-border-input);
}

/* ========== FOCUS PRIMARY ACCENT  ========== *//* == 🟪 🟪 🟪 🟪 🟪 == */
body.woocommerce-account .woocommerce form .form-row .input-text:focus {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 1.5px var(--color-accent-primary);
}

/* ========== PASSWORD VISIBILITY ICON ========== */
.woocommerce-account .password-input {
  position: relative;
  display: flex;
  align-items: center;
}

.woocommerce-account .password-input input[type="password"] {
  padding-right: 2.5rem;
}

.woocommerce-account .password-input .show-password-input {
  position: absolute;
  right: 2em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.woocommerce-account .password-input .show-password-input:hover {
  opacity: 1;
}

/* ========== REMEMBER ME ALIGNMENT ================================================= */
body.woocommerce-account .woocommerce-form-login label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
  line-height: 1 !important;
  
}

/* Align checkbox and "Remember me" text vertically */
body.woocommerce-account .woocommerce-form__label-for-checkbox {
  align-items: center !important;
 /* gap: 0.75rem; */
}

/* ==================================== */
/* ===== Login Checkbox Click Fix ===== */   /* ===== FIX ===== */
body.woocommerce-account form.login label.woocommerce-form__label-for-checkbox {
  pointer-events: auto !important;
}


/* ========== LOST PASSWORD LINK ========== */
body.woocommerce-account p.woocommerce-LostPassword.lost_password a {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative; /* Needed for the pseudo underline */
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
  text-decoration: none;
  font-size: 1.5rem;
}
    
body.woocommerce-account p.woocommerce-LostPassword.lost_password a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
 
body.woocommerce-account p.woocommerce-LostPassword.lost_password a:hover::after {
  width: 100%;
}


/* ========== CHECKBOX FIXES ========== */
body.woocommerce-account p.form-row::before {
  content: none !important;
  display: none !important;
}

body.woocommerce-account label.woocommerce-form__label-for-checkbox span::before {
  width: 18px !important;
  height: 18px !important;
  border: 1px solid var(--color-border-divider);
  background-color: #ffffff;
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  border-radius: 4px;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
}

body.woocommerce-account input[type="checkbox"]:checked + span::before {
  background-color: var(--color-accent-secondary) !important;
  border-color: var(--color-accent-secondary) !important;
  background-image: none !important;
}

body.woocommerce-account input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center !important;
  position: relative;
  padding-left: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}

body.woocommerce-account .woocommerce-form__label-for-checkbox span {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  color: var(--color-text-primary);
  line-height: 1;
  margin-left: 0.8rem;
}


/* ========== AUTOFILL COMPATIBILITY ========== */
body.woocommerce-account input:-webkit-autofill,
body.woocommerce-account input:-webkit-autofill:hover,
body.woocommerce-account input:-webkit-autofill:focus,
body.woocommerce-account input:-webkit-autofill:active {
  background-color: white !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  caret-color: var(--color-text-primary) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

body.woocommerce-account input:-webkit-autofill:focus {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 1px var(--color-accent-primary), 0 0 0px 1000px white inset !important;
}



/* =========================================== */
/* ========== LOST MY PASSWORD PAGE ========== */
/* =========================================== */

/* ===== Password Reset Panel Cleanup (My Account) ===== */
body.woocommerce-account .oxy-woo-my-account .woocommerce form {
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== Reset Password Button (My Account) ===== */   /* == 🟧  == */
body.woocommerce-account .oxy-woo-my-account .woocommerce form.lost_reset_password button.woocommerce-Button {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit';
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none !important;
  letter-spacing: unset !important;
   -webkit-font-smoothing: antialiased !important;
}

body.woocommerce-account .oxy-woo-my-account .woocommerce form.lost_reset_password button.woocommerce-Button:hover {
  width: 80% !important;
  opacity: 1 !important;}

body.woocommerce-account .oxy-woo-my-account .woocommerce form.lost_reset_password .form-row {
  margin-top: 3rem;
}

/* ===== Reset Password Paragraph ===== */
.oxy-woo-my-account form.woocommerce-ResetPassword.lost_reset_password p {
    font-size: 1.5rem;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* ===== Reset Password Confirmation Message Focus Visible (Scoped) ===== */
body.woocommerce-account .oxy-woo-my-account .woocommerce .woocommerce-message:focus-visible {
  outline: none;
  border-color: #4ab866 !important;
  box-shadow: none !important;
}

/* ===== Consistent focus outline for all focusable elements ===== ⁉️👀*/
.wc-block-components-notice-banner.is-success:focus {
  outline-color: #4ab866; /* custom green */
}

body.woocommerce-account .oxy-woo-my-account p:empty + p {  /* == ⁉️👀 ==*/
  font-size: 1.5rem !important;
  color: var(--color-text-primary);
/*  margin-top: 1rem;
  max-width: 75ch; */
  line-height: 1.4 !important;
}

body.woocommerce-account .oxy-woo-my-account p {
  font-size: 1.5rem !important;
  color: var(--color-text-primary);
/*  margin-top: 1rem;
  max-width: 75ch; */
  line-height: 1.4 !important;
}

/* =========================================== */
/* ========== LOST MY PASSWORD PAGE ========== */
/* =========================================== */

/* ===== Account Menu Link Base Styles ===== */
body.woocommerce-account .oxy-woo-my-account li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3 !important;
  text-decoration: none;
  padding: 1rem !important;
  border: none !important;
}

/* Item Icon */
body.woocommerce-account .oxy-woo-my-account li a .item-icon { 
  font-size: 18px !important; 
}

/* ===== Scale only label on hover ===== */
body.woocommerce-account .oxy-woo-my-account li a .item-label {
  transition: transform 0.6s ease;
  transform-origin: left center;
}

/* Hover scale only if not active */
body.woocommerce-account .oxy-woo-my-account li:not(.active) a:hover .item-label {
  transform: scale(1.1);
}

/* Keep active label scaled */
body.woocommerce-account .oxy-woo-my-account li.active a .item-label {
  transform: scale(1.1);
}

/* Prevent re-scaling active label on hover */
body.woocommerce-account .oxy-woo-my-account li.active a:hover .item-label {
  transform: scale(1.1);
}


/* ===== Prevent icon from scaling ===== */
body.woocommerce-account .oxy-woo-my-account li a .item-icon {
  transform: none; 
}

/* ===== Icon Hover Color in Account Menu ===== */
body.woocommerce-account .oxy-woo-my-account li a:hover .item-icon {
  color: var(--color-accent-primary); /* or any color you prefer */
  transition: color 0.3s ease;
}

body.woocommerce-account .oxy-woo-my-account li.active a .item-icon {
  color: var(--color-accent-primary);
}

/* ====================================== */
/* ===== FIRST & LAST CHILD SPACING ===== */   /* == ⁉️👀 ==*/
/* ====================================== */

/* ===== My Account: Add Top Margin to First Menu Item ===== */
body.woocommerce-account .oxy-woo-my-account li:first-child a {
  margin-top: 2.4rem !important;
}

body.woocommerce-account .oxy-woo-my-account li:last-child a {
  margin-bottom: 1rem !important;
}

/* ===== Remove Borders on Li ===== */
body.woocommerce-account .oxy-woo-my-account #my-account-menu.layout-simple .myaccount-menu > li {
  border: none !important;
}

/* ===== Remove Right Border, Add Top Border ===== */
body.woocommerce-account .myaccount-menu::before,
body.woocommerce-account .myaccount-menu::after {
  border-bottom-color: var(--color-border-divider);
  border-right: none !important;  /* ✅ Remove right border */
  display: block;
  content: '';
}


  /* ===== Vertical Divider Between Sidebar and Content ===== */
/*body.woocommerce-account #my-account-menu,
body.woocommerce-account #my-account-menu-tab {
  border-right: 1px solid var(--color-border-divider); /* or use #e0e0e0 */
/*  margin-right: 2rem;  optional spacing */
 /* padding-right: 1.5rem;  optional for visual balance 
}*/

/* Add top border only to ::after (acts like a divider) */
body.woocommerce-account .myaccount-menu::after {
  border-top: 1px solid var(--color-border-divider);  /* ✅ Use your existing border var */
  margin-top: 2rem; /* optional spacing if needed */
}

/* ===== Align Account Content with Profile Image ===== */
#my-account-menu.position-vertical-left ~ .woocommerce-MyAccount-content {
  margin-top: 17rem; /* adjust to match avatar position */
  padding-top: 2.6rem; /* adjust to match avatar position */
  padding-bottom: 2.6;
 padding-left: 3.2rem;
  border-left: 1px solid var(--color-border-divider); 
}

/* ===== Profile Image Icon ===== */
.yith-wcmap .user-profile .user-avatar.avatar-upload::after {
  content: '';
  display: block;
  position: absolute;
  right: -5px;
  bottom: -10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--color-accent-secondary); /* orange background */
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/07/MAK_Account_1-fff.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.woocommerce-account .yith-wcmap .user-profile .user-avatar.avatar-upload img {
  width: 120px;
  height: 120px;
  object-fit: cover;
 /* border-radius: 50%;  keep circular avatar */
  border-radius: 12px;
}

body.woocommerce-account .yith-wcmap .user-profile .user-avatar.avatar-upload {
  width: 120px;
  height: 120px;
  position: relative;
  margin-right: 2.4rem !important;  
}

/* ===== Align Icons Vertically in Account Menu ===== */
body.woocommerce-account .oxy-woo-my-account .item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ensure it matches the line height of the label */
  font-size: 1.6rem; /* Optional: normalize icon size if inconsistent */
  line-height: 1; /* Prevent vertical misalignment from extra line height */
}



/* =========================================== */
/* ============== LEFT CONTENT  ============== */
/* =========================================== */

/* ===== WooCommerce My Account – Scoped Text Links Only ===== */
.woocommerce-MyAccount-content a {
   color: var(--color-accent-secondary);
   font-weight: 400;
   position: relative; /* Needed for the pseudo underline */
   -webkit-font-smoothing: initial;
   transition: color 0.35s ease-in-out;
   text-decoration: none !important;
}

/* Remove underline from <u> inside links */  /* == ⁉️👀 ==*/
/*.woocommerce-MyAccount-content a u {
  text-decoration: none !important;
}*/

.woocommerce-MyAccount-content a::after { 
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
.woocommerce-MyAccount-content a:hover::after {
  width: 100%;
}

/* ===== WooCommerce My Account – Scoped Text Links Only ===== */   /* == 🔗 👀 -link == */
.woocommerce-MyAccount-content a {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative;
  display: inline-block; /* ← Important for ::after to appear */
  text-decoration: none;
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
}

.woocommerce-MyAccount-content a::after { 
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}

.woocommerce-MyAccount-content a:hover::after {
  width: 100%;
}

/* ============================================= */
/* ============== PAYMENT METHODS ============== */
/* ============================================= */

/* ===== Add Payment Method BUTTON (My Account) ===== */  /* == 🟧  == */
body.woocommerce-account .oxy-woo-my-account .woocommerce-MyAccount-content a.button[href*="add-payment-method"]{
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
}

/* ===== Hover Effect ===== */
body.woocommerce-account .oxy-woo-my-account .woocommerce-MyAccount-content a.button[href*="add-payment-method"]:hover  {
  width: 80% !important;
  opacity: 1 !important;
}

/* ===== Disable Underline Effect for Add Payment Method Button ===== */
body.woocommerce-account .woocommerce-MyAccount-content a.button[href*="add-payment-method"]::after  {
  content: none !important;
}

/* ========= CHANGE BILLING ADDRESS ============ */

/* ===== Remove Border on Edit Address Form ===== */
body.woocommerce-account .woocommerce-address-fields {
  border: none !important;
  border-top: none !important;
}

/* ========================================= */
/* ===== Country/Region & State Inputs ===== */  /* == ⁉️👀 ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ == */
/* ========================================== */

/* === My Account: Country/State Dropdown Padding Override === */
body.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single {
  padding: 3rem 1.6rem 1.6rem !important;
  height: auto !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 12px !important;
}

/* ===== Country/State Dropdown Menu Styling ===== */
body.woocommerce-account .select2-container--open .select2-dropdown {
  padding: 1.6rem 1.6rem 2.8rem !important;
  border-top: none !important;
  border-radius: 0px 0px 12px 12px !important;
  border: 1px solid var(--color-border-input);
  box-shadow: unset !important;/* optional for softer dropdown */
  background-color: #fff;
  margin-top: -6px;   
}


  /* Style selected option (when navigating with keyboard or mouse) */
body.woocommerce-account .select2-container .select2-results__option[aria-selected="true"] {
  background-color: white !important;
  color: var(--color-text-primary) !important;
  font-weight: 500;
  transform: scale(1.2);
  transform-origin: left center;
  -webkit-font-smoothing: antialiased !important;
  transition: transform 0.3s ease-out;
}

  
  /* Optional: style hover for options already selected */
  body.woocommerce-account .select2-container--default .select2-results__option[data-selected="true"] {
  background-color: white !important;
  color: var(--color-text-muted) !important;
  font-weight: 400;
  transform: scale(1); /* Reset scale */
  transform-origin: left center;
  -webkit-font-smoothing: antialiased !important;
  transition: transform 0.3s ease-in-out, color 0.2s ease-in-out;
}


/* ===== Remove Native Focus Ring on Select2 Fields - My Account Address Forms ===== */  /* == ⁉️👀 ==*/
body.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single:focus,
body.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single:focus-visible,
body.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single:focus-within {
  outline: none !important;
  box-shadow: none !important;
}


/* Force dropdown to open below for State */
body.woocommerce-account .select2-container--open.select2-container--below {
  top: 100% !important;
  bottom: auto !important;
}
/* StatePlaceholder Font 
body.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: red !important; 
  font-size: 1.6rem !important; 
  font-family: 'Outfit', sans-serif !important;
  font-weight: 400;
}*/

body.woocommerce-account .woocommerce-address-fields .select2-selection__rendered {
  padding-top: 1rem !important; /* fine-tune as needed */
  font-size: 1.7rem !important;  /* match other input text if needed */
  
}
/* State Placeholder Styling */
body.woocommerce-account .woocommerce-address-fields .select2-selection__placeholder {
  color: var(--color-text-muted) !important; /* Example placeholder color */
} 

/* ========== State Placeholder Styling - GLOABAL ========== */ /* ===== 🌏 🌏 🌏 🌏 ===== */
.oxy-woo-my-account .woocommerce form .form-row .required {
  color: #b64400;
  font-weight: 600 !important;
}

/* ========== Placeholder Text (Global Override) ========== */ /* ===== 🌏 🌏 🌏 🌏 ===== */
.oxy-woo-my-account .woocommerce form ::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important; /* Ensure full visibility in Safari */
}

/* ===== My Account: Address Fields – Custom Dropdown Arrow (Same as Checkout) ===== */
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231d1d1f95' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center; /* Matches Checkout/Product Archive */
  background-size: 12px 7px;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  pointer-events: none;
}


/* ===== Save Address BUTTON (My Account) ===== */  /* == 🟧  == */
body.woocommerce-account .woocommerce-address-fields button.button {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
}

/* ===== Hover Effect ===== */
body.woocommerce-account .woocommerce-address-fields button.button:hover  {
  width: 80% !important;
  opacity: 1 !important;
}

/* ===== Disable Underline Effect for Add Payment Method Button ===== */
body.woocommerce-account .woocommerce-address-fields button.button::after  {
  content: none !important;
}

.oxy-woo-my-account .woocommerce-address-fields__field-wrapper {
    margin-bottom: 3.2rem;
}

/* ============================================================================== */
/* ===== My Account: Address Title H3 Styling - Shipping & Billing Address ===== */  /* == ❌ -H3 ==*/   /* == ⁉️👀 ==*/
body.woocommerce-account .woocommerce-Address-title h3 {   /* == 🟪 🟪 🟪 🟪   == */
  color: var(--color-text-primary-primary);
  font-size: 2.4rem; /* Adjust as needed */
  font-weight: 600;
  margin-bottom: 3.2rem;
  -webkit-font-smoothing: antialiased !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
}

/* ===== My Account: Address Columns Wrapper Padding ===== */
body.woocommerce-account .u-columns.woocommerce-Addresses.col2-set.addresses {
  padding: 2rem 0 !important;
}
/* ===== My Account: Scoped Margin Control for Edit Address Links ===== */

/* Adjust only Edit Billing address */
body.woocommerce-account .woocommerce-MyAccount-content .u-column1.col-1.woocommerce-Address .edit {
  margin-bottom: 2.4rem !important; /* Or whatever spacing you want */
}

/* Adjust only Add Shipping address */
body.woocommerce-account .woocommerce-MyAccount-content .u-column2.col-2.woocommerce-Address .edit {
  margin-bottom: 2.4rem !important;  /* Reset if global margin exists */
}

/* ===== My Account: Style "Shipping Address" Message (Missing Address) ===== */
body.woocommerce-account .u-column2.col-2.woocommerce-Address address {
  color: var(--color-text-primary); /* Use your existing muted color */
/* font-style: italic; */              /* Optional: stylistic cue */
  font-size: 1.5rem; 
  line-height: 1.4;/* Optional: adjust as needed */
}

/* ===== My Account: Align Address Headers Vertically Centered ===== */
.oxy-woo-my-account .woocommerce .woocommerce-Address-title {
  display: flex;
  align-items: flex-end; /* or try flex-end if you want to push title and link to the bottom */
  justify-content: space-between;
}

/* ===== My AccountEdit Address - Billing & Shipping===== */   /* == ❌ -H3 ==*/   /* == ⁉️👀 ==*/
body.woocommerce-account.woocommerce-edit-address 
.woocommerce-MyAccount-content form > h3 {   /* == 🟪 🟪 🟪 🟪   == */
  font-family: 'Outfit', sans-serif;
  font-size: 3.2rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--color-text-primary-primary);
  padding-left: 2rem;
}


/* ===== My Account: Address Title H3 Styling - Shipping & Billing Address ===== */
/* ===== My Account: Edit Account Form Legend Styling ===== */

body.woocommerce-account .woocommerce-EditAccountForm fieldset {
  padding-top: 0;
}

body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  color: var(--color-text-primary-primary);
  font-size: 2.4rem; /* Adjust as needed */
  font-weight: 600;
  margin-bottom: 2.4rem !important;
  -webkit-font-smoothing: antialiased !important;
  position: relative !important;  
}

/* ===== My Account: Save Changes Button (Edit Account Form) ===== */     /* == 🅱️ 👀 -Button == */
body.woocommerce-account .woocommerce form.edit-account button[name="save_account_details"] {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
}

/* ===== Hover Effect ===== */
body.woocommerce-account .woocommerce-address-fields button.button:hover  {
  width: 80% !important;
  opacity: 1 !important;
}

/* ===== Disable Underline Effect for Add Payment Method Button ===== */
body.woocommerce-account .woocommerce-address-fields button.button::after  {
  content: none !important;
}

/* ===== My Account: YITH Store Vendor Info Styling ===== */ 
/* body.woocommerce-account .yith-wcmap .user-profile .user-info > span */
.yith-wcmap .user-profile .user-info .logout a {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.1rem 1.2rem 0.3rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
  margin-top: 1.6rem !important;
}

/* ===== Hover Effect ===== */
body.woocommerce-account .woocommerce-address-fields button.button:hover  {
  width: 80% !important;
  opacity: 1 !important;
}

/* ===== Small Note: This will be how your name will be displayed ... ===== */ /* == ⭕️👀 -P == */ /* == ⁉️👀 == */
body.woocommerce-account .oxy-woo-my-account .woocommerce form .form-row em {
  font-size: 1.3rem!important;
  line-height: 0.5 !important;
/*  font-style: normal !important; */
/*  padding-left: 0.8rem !important; */

}


/* =========================================================================================================================== */
/* ===== My Account: Address Title H3 Styling - Shipping & Billing Address ===== */  /* == 🔻👀 -Queries ==*/   /* == ⁉️👀 == */

/* ============================================================== */
/* ===== 992 ===== */  /* == 🔻👀 -Queries ==*/   /* == ⁉️👀 == */
@media (max-width: 992px) {
  .oxy-woo-my-account {
    display: flex;
    flex-direction: column;
  }

  .oxy-woo-my-account #my-account-menu,
  .oxy-woo-my-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* Optional spacing */
  .oxy-woo-my-account #my-account-menu {
    margin-bottom: 2.4rem;
  }

  
/* ===== user-profile ===== 🤩 */
body.woocommerce-account .yith-wcmap .user-profile {
  border-bottom: 1px solid var(--color-border-divider);
  margin-bottom: 2.4rem !important;
  padding-bottom: 5rem !important;
}

  
  /* Add top border only to ::after (acts like a divider) */
body.woocommerce-account .myaccount-menu::after {
 /* border-top: 1px solid var(--color-border-divider);   ✅ Use your existing border var */
  /*  margin-top: 2rem;optional spacing if needed */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: unset !important;
}

  /* Add top border only to ::after (acts like a divider) */
body.woocommerce-account .myaccount-menu::before {
 /* border-top: 1px solid var(--color-border-divider);   ✅ Use your existing border var */
  /*  margin-top: 2rem;optional spacing if needed */
  display: none !important;
}

  /* ===== UL Spacing ===== */  /* == ⁉️👀 ==*/
body.woocommerce-account ul.myaccount-menu {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0rem !important;/* adjust as needed */
  row-gap: 0rem !important;    /* optional: vertical spacing */
}

/* ===== FIRST & LAST CHILD SPACING ===== */   /* == ⁉️👀 ==*/
/* ===== My Account: Add Top Margin to First Menu Item ===== */
body.woocommerce-account .oxy-woo-my-account li:first-child a {
  margin-top: 0rem !important;
}

body.woocommerce-account .oxy-woo-my-account li:last-child a {
  margin-bottom: 0rem !important;
}

a[class^="yith-"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem;
}  

/* ===== My AccountEdit Address - Billing & Shipping===== */   /* == ❌ -H3 ==*/   /* == ⁉️👀 ==*/
body.woocommerce-account.woocommerce-edit-address   /* == 🟪 🟪 🟪 🟪   == */
.woocommerce-MyAccount-content form > h3 {
  padding-left: 0 !important;
}
  
  /* ===== Align Account Content with Profile Image ===== */
#my-account-menu.position-vertical-left ~ .woocommerce-MyAccount-content {
  margin-top: 0rem; /* adjust to match avatar position */
  padding-top: 2.6rem; /* adjust to match avatar position */
  padding-bottom: 2.6;
 padding-left: 0rem;
  border-left: none; 
  width: 100%;
}

  /* ===== Address Fields Padding ===== */
body.woocommerce-account .woocommerce-address-fields {
  border: none !important;
  border-top: none !important;
  padding-left: 0rem;
  padding-right: 0rem;
}
/* ===== My Account Menu: Two-Column Layout (≥ 992px) ===== */

  #my-account-menu ul.myaccount-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px; /* adjust spacing between rows/columns */
    border-bottom: 1px solid var(--color-border-divider);
  }

  #my-account-menu ul.myaccount-menu li {
    margin: 0; /* remove default margins */
  }

  #my-account-menu ul.myaccount-menu li a {
    display: block; /* ensure clickable area fills column */
  }

  /* ===== My Account: Layout for User Profile + Account Menu ===== */

 /* #my-account-menu {
  display: flex;
  flex-direction: row;
  gap: 2.4rem;Optional spacing between profile and menu 
  align-items: flex-start;
} */
  .oxy-woo-my-account .woocommerce-address-fields__field-wrapper  {
    max-width: 80%;
    margin-bottom: 3.2rem;
  }
}



/* ============================================================== */
/* ===== 780 ===== */  /* == 🔻👀 -Queries ==*/   /* == ⁉️👀 == */
@media (max-width: 768px) {
    #my-account-menu .myaccount-menu li .item-icon {
    display: flex;         /* Makes the icon visible and aligns it nicely */
    align-items: center;   /* Optional: vertically center icon */
    margin-right: 0.8rem;  /* Optional: spacing between icon and label */
    }

 body.woocommerce-account .oxy-woo-my-account li a  {  
} 
}

/* ============================================================== */
/* ===== 540 ===== */  /* == 🔻👀 -Queries ==*/   /* == ⁉️👀 == */
@media (max-width: 540px) {
  /* ===== Account Menu Link Base Styles ===== */
  body.woocommerce-account .oxy-woo-my-account li a {
    font-size: 2rem;
    padding: 0.8rem !important;
  } 
  .oxy-woo-my-account .woocommerce-address-fields__field-wrapper  {
    max-width: 90%;
    
  }
}

/* ============================================================== */
/* ===== 480 ===== */  /* == 🔻👀 -Queries ==*/   /* == ⁉️👀 == */
@media (max-width: 480px) {

/* ===== EDIT ADDRESS ===== */
  /* ===== Stack My Account Menu Items ===== */
  body.woocommerce-account ul.myaccount-menu {
    display: block !important;
  }
  .oxy-woo-my-account .woocommerce-address-fields__field-wrapper  {
    max-width: 95%;
  }





/* ===========++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++======== */

  


/* ===========++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++======== */









  
/* ===== My Account Menu: Two-Column Layout (≥ 992px) ===== */

  #my-account-menu ul.myaccount-menu {
    border-bottom: 1px solid var(--color-border-divider) !important;
    padding-bottom: 2rem !important; 
  }
  
  body.woocommerce-account ul.myaccount-menu li {
    width: 100%;
  }

  /* ===== Stack Billing and Shipping Address Columns ===== */
  body.woocommerce-account .woocommerce-MyAccount-content {
    display: block !important; /* Override flex/grid layout */
  }

 body.woocommerce-account .woocommerce .col2-set {
padding: 0 !important;
 }

  /* ===== My Account: Stack Address Title and Edit Link (Mobile 480px and below) ===== */
  body.woocommerce-account .woocommerce-Address-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.8rem; /* Spacing between H3 and link */
  }

  body.woocommerce-account .woocommerce-Address-title h3 {   /* == 🟪 🟪 🟪 🟪   == */
    margin-bottom: 0 !important; /* Prevent double spacing */
  }

  body.woocommerce-account .woocommerce-Address-title .edit {
    margin-left: 0 !important;
  }

  /* (Optional Placeholder) Style Links in Sidebar */
  body.woocommerce-account .oxy-woo-my-account li a {
    /* Add styles here if needed */
  }

  /* ===== My AccountEdit Address - Billing & Shipping===== */   /* == ❌ -H3 ==*/   /* == ⁉️👀 ==*/
body.woocommerce-account.woocommerce-edit-address 
.woocommerce-MyAccount-content form > h3 {
  padding-left: 0 !important;
  font-size: 3rem !important;
}

  /* ===== Login & Register H3 ===== */   /* == ❌ -H3 ==*/   /* == ⁉️👀 ==*/  /* == 🟪 🟪 🟪 🟪   == */
 /* body.woocommerce-account h2 */body.woocommerce-account .u-columns.col2-set h2 {
  font-size: 3rem !important;
  margin-bottom: 1em !important;
}
}

/* ===== Payment Methods Wrapper - My Account ===== */
body.woocommerce-account #payment ul.payment_methods {
  background-color: white;
}
body.woocommerce-account #add_payment_method #payment  {
  background: white !important;
}

/* ===== Payment Methods Box - My Account ===== */
body.woocommerce-account #add_payment_method #payment div.payment_box{
  background-color: white;

}

/* ===== HIDE PAYMENT OPTION METHODS - ASK JOE! ===== */   /* == 🔵🔵⁉️👀  ==*/
body.woocommerce-account input.input-radio[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

body.woocommerce-account #payment div.payment_box::before,
body.woocommerce-account #payment div.payment_box::after {
  all: unset !important;
  content: "";
  display: block;
  position: absolute;
  top: -1em;
  left: 2em;
  border: 1em solid var(--color-text-primary);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

body.woocommerce-account #add_payment_method #payment div.form-row {}

/* ===== CVC Input Field - Full Width ===== */
#acceptbluecard-card-cvc {
  width: 100% !important;
  display: block;
  box-sizing: border-box;
}


/*   color: var(--color-text-primary);
opacity: 1; */
/* border: 1em solid;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important; */
body.woocommerce-account #add_payment_method #place_order {
  float: none !important;
  margin: 0 auto !important;
  display: block;
  width: 100% !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  padding: 0.1rem 1.2rem 0.3rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out;
  text-transform: none;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
  margin-top: 1.6rem !important;
}

/* ===== Hover Effect ===== */
body.woocommerce-account #add_payment_method #place_order:hover  {
  width: 80% !important;
  opacity: 1 !important;
}



/* Victoria - Monster Studios */

/* ===== SHOP PAGE ===== */


/* ===== Hide Auto Archive Title Only on Shop Page and Only in Oxygen's Inner Content ===== */
body.woocommerce-shop #inner_content-5-66520 h1.oxy-woo-archive-title,
body.woocommerce-shop #inner_content-5-66520 h1.page-title {
  display: none;
}

#Shop-Woo-Elements-Wrapper {
  width: 100%;
  max-width: 1800px; /* or use 180rem if you're working in rem units */
  margin-left: auto;
  margin-right: auto;
  display: block;
}








/* Victoria - Monster Studios */

/* ===== Home Page ===== */


/* ===== Large Screens (≤1440px) ===== tested-banner*/
@media (max-width: 1440px) {
  #Mak-Hero-Section  {
    padding: 6rem 0rem;
  /*  align-items: center; */
    max-width: 180rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1280px) {
  #Mak-Hero-Section  {
    padding: 6rem 3rem;
  /*  align-items: center; */
    max-width: 180rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 992px) {
  #Mak-Hero-Section  {
    padding: 4rem 3rem;
  /*  align-items: center; */
    max-width: 180rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  #Mak-Hero-Section  {
    padding: 4rem 2rem;
  /*  align-items: center; */
    max-width: 180rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 480px) {
  #Mak-Hero-Section  {
    padding: 4rem 2rem;
  /*  align-items: center; */
    max-width: 180rem;
    margin-left: auto;
    margin-right: auto;
  }
}  



/* ================================     MAK 2     ================================= */
/* ================================================================================= */

/* ============================================================ */
/* ===== Hero Banner Background Setup (Default / Desktop) ===== */
/* ============================================================ */
#Mak-Hero-2 {
  /* ===== Background Image + Gradient ===== */
  background: 
  /* linear-gradient(270deg, rgba(0, 0, 0, 0.4) 30%, transparent 70%),*/
    url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Bckg-1-1800x1029-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  /* ===== Image Overlay Color (Handled via Gradient above) ===== */
  /* If needed separately, you can layer a ::before element instead */

  /* ===== Size and Radius ===== */
  width: 100%;
  min-height: 50rem;
  border-radius: 1.8rem;

  /* ===== Padding & Spacing ===== */
  padding-right: 3%;
  padding-left: 3%;

  /* ===== Flex Layout ===== */
  display: flex;
  flex-direction: column; /* Matches “Vertical” layout in Oxygen */
  justify-content: center; /* Vertical middle alignment */
  align-items: center;     /* Horizontal center alignment */
  overflow: hidden;

  /* ===== Optional Blur (off by default) ===== */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}
/* ===== Optional: Enable Blur Overlay ===== */
/* Uncomment if using semi-transparent backgrounds with blur effect */
/*
#div_block-545-66367::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
#div_block-545-66367 {
  position: relative;
  z-index: 1;
}
*/

/* ===== Large Screens (≤1440px) ===== */
@media (max-width: 1440px) {
  #Mak-Hero-2  {
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-bottom: 1rem;
  }
}

/* ===== Medium Screens (≤1280px) ===== */
@media (max-width: 1280px) {
  #Mak-Hero-2 {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3rem;
    background: 
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 10%, transparent 90%),
    url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Bckg-1-1800x1029-1.jpg');
    background-size: cover;
    background-position: center 90%;
    min-height: 60rem;
    position: relative;
    overflow: hidden;
    border-radius: 1.8rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 1024px) {
  #Mak-Hero-2 {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3rem;
    background: 
     linear-gradient(180deg, rgba(0, 0, 0, 0.2) 10%, transparent 90%),
      url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Bckg-1-1800x1029-1.jpg');
    background-size: cover;
    background-position: 30% bottom;
    min-height: 64rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
  }
}

/* ===== Tablet (≤980px) ===== */
@media (max-width: 992px) {
  #Mak-Hero-2 {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3rem;
    background: 
    /*  linear-gradient(180deg, rgba(0, 0, 0, 0.6) 20%, transparent 90%), */
      url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Bckg-1-1800x1029-1.jpg');
    background-size: cover;
    background-position:10% bottomm;
    min-height: 60rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
  }
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px) {
  #Mak-Hero-2 {
    background: 
   /*   linear-gradient(180deg, rgba(0, 0, 0, 0.7) 20%, transparent 90%), */
      url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Bckg-1-1800x1029-1.jpg');
    background-size: cover;
    background-position: 30% bottom;
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 0rem;
    min-height: 58rem;
    margin-bottom: 0;
  }
}

/* ===== Mobile (≤540px) ===== */
@media (max-width: 540px) {
   #Mak-Hero-2 {
     border-radius: 1.4rem;
     padding-left: 4rem;
    padding-right: 4rem;
   }
}

/* ===== Small Mobile (≤480px) ===== */
@media (max-width: 480px) {
  #Mak-Hero-2 {
    background: 
   /*   linear-gradient(180deg, rgba(0, 0, 0, 0.8) 10%, transparent 95%),*/
      url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Bckg-1-1800x1029-1.jpg');
    background-size: cover;
    background-position: 40% top;
    min-height: 58rem;
    max-width: 48rem;
    border-radius: 14px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


/* ======================================================== */
/* ===== Hero Foreground Overlay Image (Bottom Left) ===== */
/* ======================================================== */
#Mak-Hero-2 {
  position: relative; /* Required for child absolute positioning */
}

#Image-Foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  width: 100%;
  height: 390px;
  z-index: 3;
  background: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Hero_dynamic-Front-1-942x400-1.png') no-repeat left bottom;
  background-size: contain; /* or 'cover' depending on effect */
  /* aspect-ratio: 1800 / 597; Helps if you use height instead of width */
/*  min-height: 20rem;  Optional: adjust to force size */
  pointer-events: none; /* Prevents it from blocking interaction */
}


/* ================================================================================= */
/* ================================================================================= */

/* ======================= */
/* ===== KRATOM GRID ===== */
/* ======================= */

#Kratom-Grid {
  padding: 4rem 6rem 5.6rem;
}

@media (max-width: 1440px) {
  .background-kratom {  
  }
}

@media (max-width: 1280px) {
  #Kratom-Grid {
  padding: 4rem 6rem 5.6rem;
  }
}

@media (max-width: 1040px) {
  #Kratom-Grid {
  padding: 4rem 6rem 5.6rem;
  }
}

/* ===== Tablet (up to 980px) ===== */
@media (max-width: 980px) {
  #Kratom-Grid {
  padding: 4rem 4.8rem 5.6rem;
  }
}

/* ===== Mobile (up to 768px) ===== */
@media (max-width: 768px) {
  #Kratom-Grid {
  padding: 4rem 4.8rem 5.6rem;
  }
}

/* ===== Mobile (up to 540px) ===== */
@media (max-width: 540px) {
  #Kratom-Grid {
    padding: 4rem 4.8rem 5.6rem;
  } 
}

/* ===== Mobile (up to 480px) ===== */
@media (max-width: 480px) {
  #Kratom-Grid {
    padding: 4rem 3rem 5rem;
  } 
}

/* ======================= */
/* ===== KAVA GRID ===== */
/* ======================= */

#Kava-Grid {
  padding: 4rem 6rem 5.6rem;
}

@media (max-width: 1440px) {
  .background-kratom {  
  }
}

@media (max-width: 1280px) {
  #Kava-Grid {
  padding: 4rem 6rem 5.6rem;
  }
}

@media (max-width: 1040px) {
  #Kava-Grid {
  padding: 4rem 6rem 5.6rem;
  }
}

/* ===== Tablet (up to 980px) ===== */
@media (max-width: 980px) {
  #Kava-Grid {
  padding: 4rem 4.8rem 5.6rem;
  }
}

/* ===== Mobile (up to 768px) ===== */
@media (max-width: 768px) {
  #Kava-Grid {
  padding: 4rem 4.8rem 5.6rem;
  }
}

/* ===== Mobile (up to 540px) ===== */
@media (max-width: 540px) {
  #Kava-Grid {
    padding: 4rem 4.8rem  5.6rem;
  } 
}

/* ===== Mobile (up to 480px) ===== */
@media (max-width: 480px) {
  #Kava-Grid {
    padding: 4rem 3rem;
  } 
}
/* ORIGINAL KRATOM 'https://staging3.makkratom.com/wp-content/uploads/2025/01/AdobeStock_1140451223-scaled.jpeg' */

/* ==================================================== */
/* ===== NEW CSS FOR KAVA-KRATOM (USING THIS ONE) ===== */  /* == 🌿 == */
/* ==================================================== */

.background-kratom {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Kratom-v3-1800x446-1.jpg'); /* replace with your image */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transform: scale(1.05);
  transition: opacity 0.8s ease, transform 0.8s ease-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  
}

.background-kratom-kava {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Kava-1800x446-1.jpg'); /* replace with your image */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transform: scale(1.05);
  transition: opacity 0.8s ease, transform 0.8s ease-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; 
  background-position: center 80%;
}

/* ===== PARENT KRATOM & KAVA - Container should have position relative to anchor the absolute child ===== */
.parent_background-kratom-kava {
  position: relative;
  overflow: hidden;
  background-color: #1d1f26; /*#1d1f26  */ 
  border-radius: 1.8rem;
}

/* On parent hover, affect only the background */
.parent_background-kratom-kava:hover .background-kratom {
  opacity: 0.6;
  transform: scale(1);
}

/* On parent hover, affect only the background */
.parent_background-kratom-kava:hover .background-kratom-kava {
  opacity: 0.6;
  transform: scale(1);
}


/* ===== KRATOM MAP ===== */  /* == 🌿 == */
#Kratom-Map-Indonesia {
  opacity: 0.5; 
  transition: opacity 0.8s ease, transform 0.8s ease-out;
}

/* On parent hover, affect only the background */
.parent_background-kratom-kava:hover #Kava-Map-Fiji  {
  opacity: 0.6;
 /* transform: scale(1);*/
}

/* ===== Kava MAP ===== */  /* == 🌿 == */
#Kava-Map-Fiji {
  opacity: 0.5;
  transition: opacity 0.8s ease, transform 0.8s ease-out;
}

/* On parent hover, affect only the background */
.parent_background-kratom-kava:hover #Kava-Map-Fiji  {
  opacity: 0.6;
 /* transform: scale(1);*/
}


/* ===== Background Kratom Media Query ===== background-position: 40% 45%; /* Move left and slightly up 🟢 */
/* ===== Large Screen Adjustments (up to 1280px) ===== *//* ===== Banner Background Position – Widescreen (≤1280px) ===== */

@media (max-width: 1440px) {
  .background-kratom {  
  }
}

@media (max-width: 1280px) {
  .background-kratom {
    background-position: 1% center;
  }
}

/* ===== Tablet (up to 980px) ===== */
@media (max-width: 980px) {
  .background-kratom {
    background-position: 15% center; /* Moves image slightly to the left */
  }
}

/* ===== Mobile (up to 768px) ===== */
@media (max-width: 768px) {
  .background-kratom {
    background-position: 40% center; 
  } 
}

/* ===== Mobile (up to 540px) ===== */
@media (max-width: 540px) {
.parent_background-kratom-kava {
    border-radius: 1.4rem;
  } 
}
/* ===== Small Mobile (up to 480px) ===== */
@media (max-width: 480px) {
  .background-kratom  {
    background-position: 40% center; 
  }
}


/* ===== Background Kava Media Query ===== background-position: 40% 45%; /* Move left and slightly up */
/* ===== Large Screen Adjustments (up to 1280px) ===== *//* ===== Banner Background Position – Widescreen (≤1280px) ===== */

@media (max-width: 1440px) {
  .background-kratom-kava {
  background-position: 50% top; /* tweak if needed */ 
  }
}

@media (max-width: 1280px) {
  .background-kratom-kava {
    background-position: 60% 5%;
  }
}

/* ===== Tablet (up to 980px) ===== */
@media (max-width: 980px) {
  .background-kratom-kava {
    background-position: 80% 80%; /* Moves image slightly to the left */
  }
}

/* ===== Mobile (up to 768px) ===== */
@media (max-width: 768px) {
  .background-kratom-kava {
    background-position: 80% center; 
  }
}

/* ===== Small Mobile (up to 480px) ===== */
@media (max-width: 480px) {
  .background-kratom-kava {
    background-position: 80% center; 
  }
}

/* ===== Kava Mobile (up to Air Pad Layout Fix) ===== */
@media (min-width: 740px) and (max-width: 991px) {
  #div_block-581-66367 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== Kratom Mobile (up to Air Pad Layout Fix) ===== */
@media (min-width: 740px) and (max-width: 991px) {
  #div_block-569-66367 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== Kratom Map AdjustmentMobile (up to Air Pad Layout Fix) ===== */
@media (min-width: 740px) and (max-width: 991px) {
  #div_block-575-66367 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes map content to the bottom */
  }
}

/* =================================================================== */
/* ===== KRATOM MAP Adjustmen tMobile (up to Air Pad Layout Fix) ===== */
/* =================================================================== */

@media (min-width: 740px) and (max-width: 991px) {
      #headline-572-66367 {
        font-size: 3.6rem; /* Kratom h2 */
    }
  #headline-588-66367 {
        font-size: 3.6rem; /* Kava h2 */
    }
} 

@media (min-width: 740px) and (max-width: 991px) {
  #div_block-582-66367 {
   /*  margin-left: -8%; */
    margin-left: 0;
    margin-right: auto;
} 
  
 #div_block-583-66367 {
        max-width: 300px; /* Main Map Div */
  }  
 #Kava-Map-Fiji  {
        max-width: 180px; 
  } 
 #text_block-585-66367 {
    max-width: 300px; /*  Main Map Div Text */
    font-size: 1.5rem;
  } 
  #text_block-578-66367 {
        font-size: 1.5rem;
    }
} 

@media (min-width: 740px) and (max-width: 991px) {
  #div_block-587-66367 {
    width: 114%;           /* Expand beyond normal bounds */
    max-width: 114%;       /* Ensure it's not restricted */
  /*  margin-left: -5%;       Re-center visually */
    margin-right: 1rem;
  }  
}

@media (min-width: 540px) and (max-width: 991px) {
  #Kava-Map-Fiji  {
        max-width: 150px; 
  }   
}

/* ===== Kava Section: Flip Map and Text (≤768px) ===== */
@media (max-width: 540px) {
  #div_block-582-66367 { /* Map Wrapper */
    order: 2;
  }

  #div_block-586-66367 { /* Text Wrapper */
    order: 1;
  }
}

@media (max-width: 480px) {
  #Kava-Map-Fiji  {
        max-width: 140px;
    padding-bottom: 10px;
  } 

  #Kratom-Map-Indonesia {
    padding-bottom: 20px;
  } 
}

/* ============================================= */
/* ===== Home Vendors CSS (USING THIS ONE) ===== */
/* ============================================= */


/* ===== Vendors Grid (Base Layout – ???) ===== */
.home-vendors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  column-gap: 2rem;  /* Horizontal gap */
  row-gap: 1rem;     /* Vertical gap */
  align-items: stretch;
  width: 70%;
  
  max-width: 180rem;
  margin-bottom: 6rem;
}

/* ===== Vendors Grid (Tablet – <1280px) ===== */
@media (max-width: 1280px) {
  .home-vendors__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    column-gap: 2rem;  /* Horizontal gap */
    row-gap: 1rem;  /* Vertical gap */
    width: 90%;
  }
}

/* ===== Vendors Grid (Tablet – <992px) ===== */
@media (max-width: 991px) {
  .home-vendors__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    column-gap: 2rem;  /* Horizontal gap */
    row-gap: 1rem;  /* Vertical gap */
  }
}

/* ===== Vendors Grid (Tablet – <992px) ===== */
@media (max-width: 780px) {
  .home-vendors__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    column-gap: 2rem;  /* Horizontal gap */
    row-gap: 1rem;  /* Vertical gap */
  }
}

/* ===== Vendors Grid (Mobile – <540px) ===== */
@media (max-width: 540px) {
  .home-vendors__grid {
    grid-template-columns: 1fr; /* 1 column */
    column-gap: 1rem;  /* Horizontal gap */
    row-gap: 1rem;  /* Vertical gap */
  }
}

/* ============================== */
/* ===== Home Vendors Image ===== */
/* ============================== */
.home-vendors__image { 
    width: 100%;
    height: 100%;
    background-size: cover; /* <-- this is the key */
    background-repeat: no-repeat;
    opacity: 0.6;      
    transform: scale(1.05);
    background-position: center; 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;  /* transition: all 0.8s ease-out; */ 
    }

.home-vendors__image-wrapper {
    background-color: var(--color-text-primary);
    border-radius: 1.8rem;
}

.home-vendors__image-wrapper:hover .home-vendors__image {
    opacity: 1;
    transform: scale(1);      
}


/* ========================================= */
/* ================ LAZY LOAD ============== */
/* ========================================= */

/* ===== Shared Lazy Background Defaults ===== */
.home-vendors__image.lazy-background:not(.is-loaded) {
  background-image: none !important;
  /* background-positioning is fine to repeat, or can be skipped */
}

/* ===== MAK Kratom Vendor Background ===== */
.home-vendors__image.vendor--mak.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Mak_Home_Vendors_Banner-v3-857x409-1.png') !important;
}

/* ===== Choice Vendor Background ===== */
.home-vendors__image.vendor--choice.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/05/Choice_Home_Vendors_Banner-857x409-1.png') !important;
}

/* ===== Krabot Vendor Lazy Background ===== */
.home-vendors__image.vendor--krabot.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/04/Krabot_Home_Vendors_Banner-857x409-1.png') !important;
}

/* ===== White Rabbit Vendor Lazy Background ===== */
.home-vendors__image.vendor--white-rabbit.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/White_Rabbit_Home_Vendors_Banner-v2-857x409-1.png') !important;
}

/* ===== Lumenade Vendor Lazy Background ===== */
.home-vendors__image.vendor--lumenade.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/05/Lumenade_2_Home_Vendors_Banner-857x409-1.png') !important;
}

/* ===== Wave Vendor Lazy Background ===== */
.home-vendors__image.vendor--wave.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/04/Wave_Home_Vendors_Banner-857x409-1.png') !important;
}




/* ===================================== */ 
/* ===== HOME VENDORS LOGO OPACITY ===== */
/* ===================================== */ 
.home-vendors__image-wrapper {
   position: relative;
}

.home-vendors__logo {
   position: absolute;
   top: 50%;
   right: 50%;
   transform: translate(0%, -0%) translate(50%, -50%) scale(1);
   transform-origin: top right;
   opacity: 1;
   transition: all 0.8s ease-out;
}

.home-vendors__card:hover .home-vendors__logo {
   top: 6%;
   right: 6%;
   transform: translate(0, 0) scale(0.60);
   opacity: 0.6;
/*   animation: logo-pulse 0.8s ease-out forwards; */
}

/* ===== Mobile (up to 768px) ===== */
@media (max-width: 768px) {
  .home-vendors__image-wrapper {
     border-radius: 1.4rem;
  }
}

/* ============================================== */
/* ===== Description Wrapper (Vendors Grid) ===== */
/* ============================================== */
.home-vendors__description-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: flex-start; /* top */
   align-items: center;         /* horizontal center */  
   width: 100%;
   height: 100%;
   padding: 0 2% 5% 2%; /* top, right, bottom, left */
}

@media (max-width: 1280px) {
  .home-vendors__description-wrapper {
    padding: 0 2% 8% 2%; /* top, right, bottom, left */
  }
}

@media (max-width: 992px) {
  .home-vendors__description-wrapper {
    padding: 0 2% 5% 2%; /* top, right, bottom, left */
  }
}

/* ======================================== */
/* ===== Vendors Title (Vendors Grid) ===== */
/* ======================================== */
.home-vendors__title {
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--color-accent-secondary); /* Replace with actual hex if needed */
  text-align: center;
  padding-top: 0.75em;
  padding-bottom: 0.5em;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  font-smoothing: antialiased;
}


@media (max-width: 992px) {
  .home-vendors__title {
    font-size: 2.4rem;
  }
}

/* ============================================== */
/* ===== Vendors Description (Vendors Grid) ===== */
/* ============================================== */
.home-vendors__description {
  font-size: 1.7rem;
  font-weight: 400;
  text-align: center;
  color: var(--color-text-muted); 
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}


/* ============================================== */
/* ===== Lab-Tested - Thumbs Mak Standards  ===== */
/* ============================================== */ 

/* ===== Thumbs Mak Standards Grid ===== */
#thumbs-mak-standards__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 2rem;
   row-gap: 2rem;
   justify-content: center;
   align-items: center;
   width: 100%;
}

/* ===== MAK Standars thumbs - Grid – <1280px) ===== */
@media (max-width: 1280px) {
  #thumbs-mak-standards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

/* ===== MAK Standars thumbs - Grid – <1040px) ===== */
@media (max-width: 1040px) {
  #thumbs-mak-standards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

/* ===== MAK Standars thumbs - Grid (Tablet – <992px) ===== */
@media (max-width: 991px) {
  #thumbs-mak-standards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    justify-content: center;
    align-items: center;
    width: 90%;
  }  
}

/* ===== MAK Standars thumbs - Grid (Tablet – <780px) ===== */
@media (max-width: 780px) {
  #thumbs-mak-standards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    justify-content: center;
    align-items: center;
    width: 95%; 
  }
}

/* ===== MAK Standars thumbs - Grid (Tablet – <540px) ===== */
@media (max-width: 540px) {
  #thumbs-mak-standards__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    justify-content: center;
    align-items: center;
    width: 95%; 
  }
}


/* ========================== */
/* ===== Wrapper Styles ===== */
/* ========================== */
.thumbs-mak-standars__image-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--color-text-primary);
  border-radius: 1.8rem;
  width: 100%;
  height: 100%;
  max-height: 32rem;  /*Ensures enough space */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* content to bottom */
  align-items: center;
  padding-top: 2rem !important;
}

/* ===== Image Styles ===== */
.thumbs-mak-standars__image {
  /* No background-image here! */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  transform: scale(1.05);
  transition: opacity 0.6s cubic-bezier(.55,.08,.38,1), transform 0.6s cubic-bezier(.55,.08,.38,1);
  filter: none;
}

/* ===== Title: Always Visible ===== */
.thumbs-mak-standars__description-title {
  z-index: 2;
  position: relative;
  color: #fff;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 2.2rem;
  text-shadow: 0 3px 18px rgba(0,0,0,0.18);
  pointer-events: none;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  transition: opacity 1s, transform 0.8s;
  transform-origin: bottom;
}

/* ===== Description: Hidden By Default ===== */
.thumbs-mak-standars__description {
  z-index: 2;
  position: relative;
  color: rgba(255,255,255,0.95);
  font-size: 1.7rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px);
 /* background: rgba(29,31,38, 0.82);*/
  border-radius: 12px;
  padding: 1.2rem 1rem;
  margin-bottom: 1.6rem;
  width: 90%;
  max-width: 90%;
  font-weight: 400;
  transition: opacity 1s, transform 0.8s;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* ====== Hover/Focus Effects ====== */
.thumbs-mak-standars__image-wrapper:hover .thumbs-mak-standars__description-title {
  text-shadow: 0 3px 18px rgba(0,0,0,0.18);
  opacity: 0.6;
/*  transform: scale(1.1); */
  transition: transform 0.6s, opacity 0.6s; /* add transition for smoothness */
}

/* ====== Hover/Focus Effects ====== */
.thumbs-mak-standars__image-wrapper:hover .thumbs-mak-standars__image,
.thumbs-mak-standars__image-wrapper:focus-within .thumbs-mak-standars__image {
  filter: blur(0.8rem);
  opacity: 0.9;
  transform: scale(1);
}

.thumbs-mak-standars__image-wrapper:hover .thumbs-mak-standars__description,
.thumbs-mak-standars__image-wrapper:focus-within .thumbs-mak-standars__description {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ========================= */
/* ====== Card Images ====== */
/* ========================= */


/* ===== Fallback Images - Show before lazy load ==== */

#Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__image.lazy-background:not(.is-loaded) {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-native-v1-1000x1000-1.png') !important;
}

#Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image.lazy-background:not(.is-loaded) {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-man-inspecting-kratom-v1-1000x1000-1.png') !important;
}

#Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image.lazy-background:not(.is-loaded) {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-indigenous-crops-v1-1000x1000-1.png') !important;
}

#Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__image.lazy-background:not(.is-loaded) {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-lab-tested-v1-1000x1000-1.png') !important;
}


/* Show image by default (fallback for no-JS or early render) */
#Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__image {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-native-v1-1000x1000-1.png');
}
#Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-man-inspecting-kratom-v1-1000x1000-1.png');
}
#Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-indigenous-crops-v1-1000x1000-1.png');
}
#Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__image {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-lab-tested-v1-1000x1000-1.png');
}


/* Lazy load high-res version (same as current setup) */
/* ===== Card 1 ===== */
#Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__image.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-native-v1-1000x1000-1.png') !important;
}

/* ===== Card 2 ===== */
#Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-man-inspecting-kratom-v1-1000x1000-1.png') !important;
}

/* ===== Card 3 ===== */
#Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-indigenous-crops-v1-1000x1000-1.png') !important;
}

/* ===== Card 4 ===== */
#Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__image.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/thumb-l-lab-tested-v1-1000x1000-1.png') !important;
}

/* =========================== */
/* ====== Media Queries ====== */
/* =========================== */

@media (max-width: 1440px) {
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description-title {
    font-size: 2.4rem;
    margin-bottom: 2.2rem;
  }
  .thumbs-mak-standars__image-wrapper {
    width: 100% !important;
    max-height: 32rem !important;
   
     
  }
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description {
    font-size: 1.7rem;
    padding: 1.2rem 1rem;
    margin-bottom: 1.6rem;
  }
}


/* min-height: 32rem;  Ensures enough space */
@media (max-width: 1280px) {
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description-title {
    font-size: 2.4rem;
    margin-bottom: 2.2rem;
  }
  .thumbs-mak-standars__image-wrapper{
    width: 100% !important;
  /*  max-height: 18rem !important;*/  
  /*  height: 18rem !important; */
    
  }
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description {
    font-size: 1.7rem;
    padding: 1.2rem 1rem;
    margin-bottom: 1.6rem;
    width: 95%;
    max-width: 95%;
  }

  /* Per-card customizations: (background position, etc.) */
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image {
 /*   background-position: top right;*/
  }
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image {
  /*  background-position: bottom center; */
  }
}

/* ====== Tablet and below (max 991px) ====== */
@media (max-width: 991px) {
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description-title {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
  }
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__image-wrapper,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image-wrapper,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image-wrapper,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__image-wrapper {
     width: 100% !important;
    max-width: none !important;
    min-height: 32rem;
  }
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description {
    font-size: 1.7rem;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
  }
  /* Per-card customizations: (background position, etc.) */
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image {
 /*   background-position: top right;*/
  }
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image {
  /*  background-position: bottom center; */
  }
}

@media (max-width: 768px) {
  .thumbs-mak-standars__image-wrapper {
    border-radius: 1.4rem;
  }
}
/* ====== Mobile (max 767px) ====== */
@media (max-width: 768px) {
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__image-wrapper,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__image-wrapper,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__image-wrapper,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__image-wrapper {
    max-width: 100%;
    min-height: 32rem;
    border-radius: 12px;
  }
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description-title,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description-title {
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
  }
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-2 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-3 .thumbs-mak-standars__description,
  #Mak-Standars-Thumb_Card-4 .thumbs-mak-standars__description {
    font-size: 1.7rem;
    padding: 0.8rem 0.5rem;
  }
  /* More per-card tweaks */
  #Mak-Standars-Thumb_Card-1 .thumbs-mak-standars__image {
   /* background-position: top center; */
  }
}

/* =============================== */
/* ====== Lab Tested Banner ====== */
/* ====== Mobile (max 540px) ====== */
#div_block-209-66367 {
  @media (max-width: 540px) {
    border-radius: 1.4rem;
  }
}


/* ========================================= */
/* ===== Home CTA Product Image Styles ===== */
/* ========================================= */ /* == 🟩 🟩 🟩 🟩 == */


/* ===== Home CTA Grid ===== */
/* ===== Default Layout (≥ 540px) ===== */

#section-home-cta {
  margin-top: 0rem; 
  margin-bottom: 6rem; 
}
  
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 1280px) {
    #section-home-cta {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
  }
} 


/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 1040px) {
  #section-home-cta {
    margin-top: 0rem; 
    margin-bottom: 4rem; 
  }
} 
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 992px) {
    #section-home-cta {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
  }
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 768px) {
    #section-home-cta {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 4rem 3rem 4rem 6rem;
  } 
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 540px) {
    #section-home-cta {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 4rem 2rem;
  } 
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 480px) {
    #section-home-cta {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
    padding: 4rem 2rem;
  }
} 


/* ========================================================== */
/* ===== CTA Sale Right Column (Default: Right Aligned) ===== */
.home-cta__sale-right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Horizontal alignment: right */
  width: 100%;
}

/* ===== CTA Sale Right Column (Mobile ≤ 540px: Center Aligned) ===== */
@media (max-width: 540px) {
  .home-cta__sale-right-column {
    align-items: center; /* Center content on mobile */
  }
}

/* ===== CTA Sale Left Column (Default: Left Align, Vertically Centered) ===== */
.home-cta__sale-left-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* Horizontal alignment: left */
  justify-content: center;  /* Vertical alignment: middle */
  height: 100%;
  padding-left: 2rem;
}


@media (max-width: 540px) { 
  .home-cta__sale-left-column {
    padding-left: 0;
   }
}

/* ===== Home CTA Button Wrapper ===== */
.home-cta__sale-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

@media (max-width: 540px) {
  .home-cta__sale-button-wrapper {
    align-items: center;
  }
}

/* ===== Button Wrapper (Max Width + Center) ===== */
#button-generic-wrapper-home-cta-sale {
  width: 100%;
  max-width: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* ===== Button Link Wrapper (Max Width + Hover Width) ===== */
#button-generic-link-wrapper-home-cta-sale {
  max-width: 40rem;
  width: 100%;
}

#button-generic-link-wrapper-home-cta-sale:hover {
  width: 80%;
}

/* ===== Home CTA Product===== */
.home-cta__sale-product {
  max-width: 220px;
  margin-right: 0;
  /* optional layout */
  display: flex;
  justify-content: flex-end; /* Push content to the right */
/*  border: 1px solid var(--color-border-input);
  border-radius: 18px;
  padding: 2rem; */
}

.home-cta__sale-product-image {
  width: 100%;
  height: auto;
  border-radius: 18px;  
}

/* ===== Home CTA Grid ===== */
/* ===== Default Layout (≥ 540px) ===== */

#section-home-cta-2 {
  margin-top: 0rem; 
  margin-bottom: 6rem; 
}
  
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 1280px) {
    #section-home-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
  }
} 


/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 1040px) {
  #section-home-cta-2{
    margin-top: 0rem; 
    margin-bottom: 4rem;
    padding: 3rem 3rem 6rem 9rem;
  }
} 
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 992px) {
    #section-home-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 2rem 3rem 0rem 6rem;
  }
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 768px) {
    #section-home-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 0rem 3rem 0rem 6rem;
  } 
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 540px) {
    #section-home-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 4rem 2rem;
  } 
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 480px) {
    #section-home-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
    padding: 4rem 2rem;
  }
}

/* ======================================================= */
/* ===== Home CTA Product (Lazy Graphic Background - X NOPE ) ===== */
/* ======================================================= */
#home-cta__sale-product {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/cta-graphics-2-430x300-1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px;
  width: 100%;
  height: 24rem; /* or set a fixed height if needed */
  margin-top: -3rem;
}

@media (max-width: 540px) {
  #home-cta__sale-product {
    margin-top: 0rem;  
  }
}

/* ===== Button Wrapper (Max Width + Center) ===== */
#button-generic-wrapper-home-cta-sale-2 {
  width: 100%;
  max-width: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/* ===== Button Link Wrapper (Max Width + Hover Width) ===== */
#button-generic-link-wrapper-home-cta-sale-2 {
  max-width: 40rem;
  width: 100%;
}

#button-generic-link-wrapper-home-cta-sale-2:hover {
  width: 80%;
}


/* ========================= */
/* ===== Tested Banner ===== */
/* ========================= */
#tested-banner {
  position: relative;
  width: 100%;
  max-width: 150rem;
  margin: 0 auto; /* center it horizontally */
  border-radius: 18px;
  overflow: hidden;
  
  /* Background */
  background-color: #0d4d24; /* fallback color */
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Banner_Woman_Kratom-dynamic-Bckg-1-1800x1458-1.jpg'); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Text spacing */
  padding: 4rem 6rem 5.6rem;
  color: #fff;

  transition: background-image 0.4s ease-out, opacity 0.4s ease-out;
}

/* ===== Woman PNG Foreground ===== */
#tested-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Banner_Woman_Kratom-dynamic-Front-1-1800x917-1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: calc(100% + 40px) 48%;
  pointer-events: none;
  z-index: 0;

  transition: background-image 0.4s ease-out, opacity 0.4s ease-out;
}

/* ============================== */
/* ===== Lazy Load Overrides ==== */
/* ============================== */

/* Only wipe background on the banner itself, not globally */
#tested-banner.lazy-background:not(.is-loaded) {
  background-image: none !important;
}

.lazy-background.is-loaded {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Banner_Woman_Kratom-dynamic-Bckg-1-1800x1458-1.jpg') !important;
}

#tested-banner.lazy-background::after {
  background-image: none !important;
}

#tested-banner.lazy-background.is-loaded::after {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/Banner_Woman_Kratom-dynamic-Front-1-1800x917-1.png') !important;
}
/* keep text above */
#tested-banner > * {
  position: relative;
  z-index: 1;
}

/* ===== Text Styling ===== */
#tested-banner__text-wrapper h3 {
  font-size: 3.2rem;
  font-weight: 600;
  color: #fff;
  max-width: 60rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  -webkit-font-smoothing: antialiased;   /* Chrome/Safari on macOS/iOS */
  -moz-osx-font-smoothing: grayscale;    /* Firefox on macOS */
}

#tested-banner__text-wrapper {
  font-size: 1.7rem;
  font-weight: 400;
  color: #fff;
  max-width: 51%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;   /* Chrome/Safari on macOS/iOS */
  -moz-osx-font-smoothing: grayscale;    /* Firefox on macOS */
}

#tested-banner_text-2 {
  width: 100%;
  max-width: 90%;
}


/* ================================================ */
/* ===== Tested Banner Responsive Adjustments ===== */
/* ================================================ */

/* ≥ 1280px */
@media (min-width: 1281px) {
  #tested-banner {
    max-width: 100%;
    background-position: 120% 90%; /* X=120%, Y=bottom */
  }
  
  #tested-banner::after {
    width: 90%; /* control width */
  /*  background-position: right calc(50% + 30px);  x then y */ /* 100% = right edge, 20px from top */
  }
}

/* ≤ 1280px */
@media (max-width: 1280px) {
  #tested-banner {
    max-width: 100%;
    background-position: 120% 90%;
  }
  
  #tested-banner::after {
    width: 100%; /* control width */
    background-position: right calc(50% + 30px); /* x then y */ /* 100% = right edge, 20px from top */
  }
}

/* ≤ 1040px */
@media (max-width: 1040px) {
  #tested-banner::after {
    width: 100%; /* control width */
    background-position: right calc(50% + 68px); /* x then y */ /* 100% = right edge, 20px from top */
  }
  #tested-banner__text-wrapper {
    max-width: 50rem;
  }
}

/* ≤ 992px */
@media (max-width: 992px) {
  #tested-banner {
    padding: 4rem 6rem 5.6rem;
  }  
  #tested-banner::after {
    background-size: auto 90%; /* height at 90%, width auto */
    background-position: calc(100% + 40px)  calc(50% + 120px); /* x then y right calc(50% + 140px);*/
  }
  #tested-banner__text-wrapper {
    max-width: 100%;
    padding-bottom: 6rem;
  }
  #tested-banner_text-2 {
    max-width: 60%;
  }
}

/* ≤ 768px */
@media (max-width: 768px) {
  #tested-banner::after {
    background-size: auto 85%; /* height at 90%, width auto */
    background-position: calc(100% + 30px)  calc(50% + 120px); /* x then y right calc(50% + 140px);*//
  }
  #tested-banner__text-wrapper {
    padding-bottom: 6rem;
  }
}

/* ≤ 540px */
@media (max-width: 540px) {
#tested-banner {
    padding: 4rem 3rem 5.6rem;
    background-position: 100% 90%;
  } 
 
  #tested-banner::after {
    background-size: auto 70%; /* height at 90%, width auto */
    background-position: calc(100% + 30px) calc(50% + 190px); /* x then y */
  }
    #tested-banner__text-wrapper {
    padding-bottom: 10rem;
  }
}

/* ≤ 480px */
@media (max-width: 480px) {
  #tested-banner::after {
    background-size: auto 60%; /* height at 90%, width auto */
    background-position: calc(100% + 90px) calc(50% + 190px); /* x then y */
  }
    #tested-banner__text-wrapper {
    padding-bottom: 14rem;
  }
  #tested-banner_text-2 {
    max-width: 20rem;
  }
}



/* Victoria - Monster Studios */

/* Checkout Page Styles – Scoped to .woocommerce-checkout */

/* ========== CART SECTION ========== */
#section-checkout-top {
  max-width: 128rem;
  margin-bottom: 0;
}

/* ========== CART TITLE ========== */
#checkout-title {
    margin-top: 6rem;
    margin-bottom: 1em;
    font-family: 'outfit';
    font-weight: 600;
    font-size: 4.8rem;
    color: var(--color-text-primary); 
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  #checkout-title {
  font-size: 4rem;
 }
}

@media (max-width: 540px) {
  #checkout-title {
   margin-bottom: 0.75em;
 }
}

#section-checkout-top {
  
}

/* ===== Reequired Fields "*" ===== */  /* ===== 🌏‼️👀 -Global ===== */ 
.oxy-woo-checkout .woocommerce form .form-row .required {
    color: var(--color-accent-secondary);
    font-weight: 600;
}

/* ===== Remove Search Input on Dropdowns ===== */  /* ===== 🌏‼️👀 -Global ===== */ 
.select2-search--dropdown {
  display: none !important;
}

/* ===== Input Focus Style (Scoped to Interactive Form Fields Only) ===== */  /* ===== 🌏‼️👀 -Global ===== */ 
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="search"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  box-shadow: 0 0 0 1px var(--color-accent-primary) inset !important;
  outline: none !important;
  border: 1px solid var(--color-accent-primary) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ===== Remove Visible Focus Outline on Checkboxes ===== */  /* ===== 🌏☑️‼️👀 -Global ===== */ 
body.woocommerce-checkout input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  outline-offset: 0 !important;
}


  /* Canceling Focus Shadow on Country and State */   /* == ⁉️👀 == */ 
  body.woocommerce-checkout .select2-container--default .select2-selection--single:focus,
  body.woocommerce-checkout .select2-container--default .select2-selection--single.select2-selection--focus {
    box-shadow: none !important;
    outline: none !important;   
  }
  

.checkout-instructions {
  font-size: 1.7rem;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  -webkit-font-smoothing: antialiased;
}

/* ===== Coupon Toggle Width & Alignment ===== */
.woocommerce .woocommerce-form-coupon-toggle {
  width: 50%;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* H3 Billing Details */   /* == ❌ 👀 -H3 == */ /* == 🔻 ==*/ 
body.woocommerce-checkout .woocommerce-billing-fields > h3 {
    font-size: 3.2rem; 
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary); 
    margin-bottom: 3.2rem;
    font-weight: 600;
 /*  -webkit-font-smoothing: initial;*/
  }
  /* Reduce bottom margin under "Ship to a different address?" checkbox */
  body.woocommerce-checkout h3#ship-to-different-address {
    margin-bottom: 3.4rem;
    margin-top: 1.6rem;/* Or try 4px, 6px for fine-tuning */
  }
  
  form.checkout.woocommerce-checkout {
    margin-top: 6rem;
  }
  
  /* Style selected option (when navigating with keyboard or mouse) */
body.woocommerce-checkout .select2-container .select2-results__option[aria-selected="true"] {
  background-color: white !important;
  color: var(--color-text-primary) !important;
  font-weight: 500;
  transform: scale(1.2);
  transform-origin: left center;
  -webkit-font-smoothing: antialiased !important;
  transition: transform 0.3s ease-out;
}

  
  /* Optional: style hover for options already selected */
  body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
  background-color: white !important;
  color: var(--color-text-muted) !important;
  font-weight: 400;
  transform: scale(1); /* Reset scale */
  transform-origin: left center;
  -webkit-font-smoothing: antialiased !important;
  transition: transform 0.3s ease-in-out, color 0.2s ease-in-out;
}

 /* ===== Optional: style hover for options already selected =====    /* == 🔵🔵⁉️👀  ==*/
 /*  body.woocommerce-checkout ::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1; Ensures full opacity across browsers 
  }*/
  
  /* ===== June 14, 2025 ===== */
  /* ===== Checkout: Billing Country & State Custom Arrow (Aligned with Product Archive) =====    /* ==  🔼🔽 👀 == */
  body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231d1d1f' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.6rem center; /* Match Product Archive */
    background-size: 12px 7px;               /* Match Product Archive */
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    pointer-events: none;
  }
  

  
  /* INITIAL START __________________________________________________________________________________*/
  body.woocommerce-checkout {
    font-family: 'Outfit', sans-serif;
    background-color: #fff;
    color: var(--color-text-primary);
  }
  
  /* Two columns  1px solid var(--color-border-divider) /* #1d1d1f2e */ 
  body.woocommerce-checkout .col2-set {
    border: none;
    border-top: none;
    border-radius: 0;
    background: #ffffff;
    padding: 20px;
    border-collapse: collapse;
    box-shadow: none;
  }
  
  /* Layout: Two columns */
  body.woocommerce-checkout #primary {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    margin-top: 40px;
  }
  
  /* Left Column – Form ⁉️ */
  body.woocommerce-checkout .woocommerce-checkout-form {
    flex: 2;
    min-width: 60%;
  }
   
  /* Headings and Labels */
  /*body.woocommerce-checkout h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary) /* #1d1d1f *//*;
    margin-bottom: 16px;
  } */
  
/*  body.woocommerce-checkout label {   ===== ⁉️👀 ❌❌ ===== 
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
  } */

/* ===== Checkout: Additional Fields Divider ===== 🔴🔴🔴🔴    🔴🔴🔴🔴  */
body.woocommerce-checkout .woocommerce-additional-fields {
  border-top: 1px solid var(--color-border-divider);
/*  border-bottom: 1px solid var(--color-border-divider);*/
  padding: 3rem 0;
}

/*✅*/  /* =====Apply only to Order Notes (Textarea in Order Notes section) =====*/
body.woocommerce-checkout #order_comments {
  font-family: 'Outfit', sans-serif;
  padding: 18px 16px !important;
  border: 1px solid var(--color-border-input); 
  border-radius: 12px !important;
  width: 100%;
  margin-bottom: 8px !important;
} 
  body.woocommerce-checkout #order_comments {
    font-size: 14px; /* Change this to your desired size */
    font-family: 'Outfit', sans-serif; /* Optional if you want consistent font */
  }
  
  /* Checked state with site color 
  #shipping_insurance_field input[type="checkbox"]:checked {
    background-color: var(--color-accent-primary)  !important;
    border-color: var(--color-accent-primary)  !important;
  }*/
  
   
  /* ===== ALL INPUT BORDERS AND FONT EXCEPT ACCORDION ===== */   /* == ⁉️👀 == */ 
/*   body.woocommerce-checkout input.input-text,
  body.woocommerce-checkout select {
    font-family: 'Outfit', sans-serif;
   border: 1px solid var(--color-border-input);
    padding: 18px 16px !important;
    font-size: 17px;
    border-radius: 12px;
    color: var(--color-text-primary)!important;
  }*/

/*✅*/ 


/* ==  🟩  🟩  🟩  🟩   🟩  🟩  🟩  🟩    🟩  🟩  🟩  🟩    🟩  🟩  🟩  🟩 == */
/* ===================================================================
CHECKOUT INPUTS — BILLING / SHIPPING — BASE STRUCTURE
=================================================================== */
/* ===== TEMP RESET: Billing & Shipping Only ===== */
/* body.woocommerce-checkout .woocommerce-billing-fields input,
body.woocommerce-checkout .woocommerce-billing-fields select,
body.woocommerce-checkout .woocommerce-shipping-fields input,
body.woocommerce-checkout .woocommerce-shipping-fields select,
body.woocommerce-checkout .woocommerce-billing-fields .select2-selection--single,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-selection--single {
  all: unset; ← full reset 
  display: revert;  keeps them visible 
  width: 100%;  required to prevent collapse 
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  box-sizing: border-box;
}*/

/* Reset Select2 container box 
body.woocommerce-checkout .select2-container {
  all: unset;
  display: revert;
  width: 100%;
}*/


/* TEMP DEBUG - highlight billing field blocks 
body.woocommerce-checkout .woocommerce-billing-fields .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row {
  background: rgba(255, 200, 0, 0.1);
  outline: 1px dashed red;
}*/

/* Add spacing visibility 
body.woocommerce-checkout .form-row.form-row-first {
  background: rgba(0, 200, 255, 0.1);
}
body.woocommerce-checkout .form-row.form-row-last {
  background: rgba(200, 255, 0, 0.1);
}*/

/* TEMP override to stack First + Last name
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last,
.woocommerce-shipping-fields .form-row-first,
.woocommerce-shipping-fields .form-row-last {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
} */

/* .woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last,
.woocommerce-shipping-fields .form-row-first,
.woocommerce-shipping-fields .form-row-last {
  margin-left: 0 !important;
  margin-bottom: 2rem; adjust this to match your other rows 
} */


/* ===== Checkout Billing/Shipping: Apple-style Parent Border ===== ===============🔵=========================*/
/* ===== Checkout Billing/Shipping: Apple-style Parent Border ===== */
body.woocommerce-checkout .woocommerce-billing-fields .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row {
  position: relative;
  border: 1px solid var(--color-border-input);
  border-radius: 1.2rem;
  
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 2rem;
}

/* ==== Remove Apple-style border ONLY for Country/State rows ==== */
body.woocommerce-checkout .form-row#billing_country_field,
body.woocommerce-checkout .form-row#billing_state_field,
body.woocommerce-checkout .form-row#shipping_country_field,
body.woocommerce-checkout .form-row#shipping_state_field {
  border: none !important;
  margin-bottom: 2.4rem;
 /* padding: 0 !important;  optional: only if you need to align height */
 /* border-radius: 0 !important; optional: to remove the curve if needed */
}


/* ===== Floating Labels for Billing/Shipping ===== */
body.woocommerce-checkout .woocommerce-billing-fields .form-row label,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row label {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 1.3rem !important;
  font-family: 'Outfit', sans-serif;
  background: white;
  padding: 0 4px;
  line-height: 1.4;
  z-index: 2;
  pointer-events: none;
  color: var(--color-text-primary);
  transition: top 0.2s ease-out, font-size 0.2s ease-out;
}

/* ===== Lift label on input focus/filled ===== */
body.woocommerce-checkout .woocommerce-billing-fields .form-row:focus-within label,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row:focus-within label {
  top: -16px;
  font-size: 1.1rem;
}

/* ===== Add input padding to create space for label ===== */
body.woocommerce-checkout .woocommerce-billing-fields .form-row input,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row input,
body.woocommerce-checkout .woocommerce-billing-fields .form-row select,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row select,
body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row textarea {
  padding: 40px 16px 16px !important;
  font-size: 1.6rem !important; 
  border: none !important;        /* ← This line updated */
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  width: 100%;
  z-index: 3;
  position: relative;
}

/* ===== Highlight Border on Focus (Input Inside) ===== *//* == 🟪 🟪 🟪 🟪 🟪 == */
.woocommerce-billing-fields .form-row:has(input:focus, select:focus, textarea:focus),
.woocommerce-shipping-fields .form-row:has(input:focus, select:focus, textarea:focus) {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1.5px var(--color-accent-primary);
}

/* ===== ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ===== */

/* ===== Country/Region & State Inputs - Checkout ===== */
body.woocommerce-checkout .woocommerce-billing-fields .select2-container--default .select2-selection--single,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-container--default .select2-selection--single {
  padding: 3rem 1.6rem 1rem !important;
  height: 76px !important; /* ✅ Set fixed height */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 12px !important;
}

/* Ensure Select2 selection inside stays full width */
body.woocommerce-checkout .select2-selection--single {
  width: 100% !important;   /* === 🟪  🟪  🟪  🟪 ADDED ON === */
}

/* ===== Country/State Dropdown Menu Styling ===== */
body.woocommerce-checkout .select2-container--open .select2-dropdown {
  padding: 1.6rem 1.6rem 2.8rem !important;
  border-top: none !important;
  border-radius: 0px 0px 12px 12px !important;
  border: 1px solid var(--color-border-input);
  box-shadow: unset !important;
  background-color: #fff;
  margin-top: -1.2rem;
}


body.woocommerce-checkout .select2-container {
  width: 100% !important;
 /* box-sizing: border-box; *//* === 🟪  🟪 === */
  display: block !important;   /* === 🟪  🟪  🟪  🟪 ADDED ON === */
}

  /* ===== Force Select2 Dropdown to Match Input Width - Checkout
body.woocommerce-checkout .select2-dropdown {
  width: calc(100% + 3.2rem) !important;
  left: -1.6rem !important;
  box-sizing: border-box;
}  ===== */



/* ===== Remove Native Focus Ring on Select2 Fields - Checkout ===== */
body.woocommerce-checkout .woocommerce-billing-fields .select2-container--default .select2-selection--single:focus,
body.woocommerce-checkout .woocommerce-billing-fields .select2-container--default .select2-selection--single:focus-visible,
body.woocommerce-checkout .woocommerce-billing-fields .select2-container--default .select2-selection--single:focus-within,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-container--default .select2-selection--single:focus,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-container--default .select2-selection--single:focus-visible,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-container--default .select2-selection--single:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Force Dropdown to Open Below (State) ===== */
body.woocommerce-checkout .select2-container--open.select2-container--below {
  top: 100% !important;
  bottom: auto !important;
}

/* ===== Rendered Value Padding / Font Size ===== */ /* ==  🟩  🟩  🟩  🟩 == */
body.woocommerce-checkout .woocommerce-billing-fields .select2-selection__rendered,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-selection__rendered {
  padding-top: 1rem !important;
  font-size: 1.7rem !important;

    line-height: 1.6;
    color: ;
    padding: 10px 0 0 !important;
    min-height: 20px;
    outline: none;
}


/* ===== Placeholder Styling ===== */
body.woocommerce-checkout .woocommerce-billing-fields .select2-selection__placeholder,
body.woocommerce-checkout .woocommerce-shipping-fields .select2-selection__placeholder {
  color: var(--color-text-muted) !important;
}

/* ===== Placeholder Text (Global Override – Checkout) ===== */
.oxy-woo-checkout .woocommerce form ::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* ===== Required Asterisk (Global) ===== 
.oxy-woo-checkout .woocommerce form .form-row .required {
  color: #b64400;
  font-weight: 600 !important;
}*/


/* ===== Custom Dropdown Arrow (Same as My Account) ===== */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231d1d1f95' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 12px 7px;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  pointer-events: none;
}

/* FROM OLD CHECKOUT */
/* THIS IS NOT CHANGING ANYTHING */
body.woocommerce-checkout .select2-selection:focus,
body.woocommerce-checkout .select2-selection:active {
  box-shadow: none !important;
  outline: none !important; 
}
/* Remove Select2 default border+shadow on container */
body.woocommerce-checkout .woocommerce-billing-fields .form-row .select2-container .select2-selection,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row .select2-container .select2-selection {
  border: 1px solid var(--color-border-input) !important; /* ===== 🟪  🟪  🟪  🟪  🟪  🟪  🟪  🟪 ===== */
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  height: auto !important;/* ===== 🟪  🟪  🟪  🟪  🟪  🟪  🟪  🟪 ===== */
}

/* Force the span wrapper inside the form-row to full width */
body.woocommerce-checkout .form-row span.woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}


/* ========== 5. Misc Global Tweaks ========== */

/* Placeholder text globally */
.oxy-woo-checkout .woocommerce form ::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* Force span wrapper inside form-row to full width */
body.woocommerce-checkout .form-row span.woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}

/* Optional: Required asterisk override (currently commented out) */
/*
.oxy-woo-checkout .woocommerce form .form-row .required {
  color: #b64400;
  font-weight: 600 !important;
}
*/





/* ========== AUTOFILL COMPATIBILITY ========== */ /* FROM MYACCOUNT 🟩  🟩  */
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill:hover,
body.woocommerce-checkout input:-webkit-autofill:focus,
body.woocommerce-checkout input:-webkit-autofill:active {
  background-color: white !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  caret-color: var(--color-text-primary) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

body.woocommerce-checkout input:-webkit-autofill:focus {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 1px var(--color-accent-primary), 0 0 0px 1000px white inset !important;
}

 /* FROM MYACCOUNT 🟩  🟩  */
body.woocommerce-checkout .woocommerce form .form-row .input-text {
  padding: 40px 16px 16px !important;
  font-size: 17px;
  width: 100%;
  font-family: 'Outfit', sans-serif;
  border: 1px solid var(--color-border-input);
  border-radius: 12px;
 /* background-color: #fff; */
  color: var(--color-text-primary);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  outline: none;
  box-shadow: none;
}
 /* FROM MYACCOUNT 🟩  🟩  */
body.woocommerce-checkout .woocommerce form .form-row .input-text::placeholder {
  font-size: 17px;
  font-family: 'Outfit', sans-serif;
  color: var(--color-border-input);
}

 /* FROM MYACCOUNT 🟩  🟩  */
body.woocommerce-checkout .woocommerce form .form-row:focus-within label,
body.woocommerce-checkout .woocommerce form .form-row .input-text:not(:placeholder-shown) + label {
  top: -20px;
}


/* ========== FLOATING LABEL SYSTEM ========== */ /* FROM MYACCOUNT 🟩  🟩  ??? MIGHT DELETE ❌  */
/* ✅ Updated: Apply only outside .two-column layout */
body.woocommerce-checkout .woocommerce form .form-row:not(.two-column .form-row) {
  position: relative;
  margin-bottom: 2rem;
}





  /* Style selected option (when navigating with keyboard or mouse) */
body.woocommerce-checkout .select2-container .select2-results__option[aria-selected="true"] {
  background-color: white !important;
  color: var(--color-text-primary) !important;
  font-weight: 500;
  transform: scale(1.2);
  transform-origin: left center;
  -webkit-font-smoothing: antialiased !important;
  transition: transform 0.3s ease-out;
}

  
  /* Optional: style hover for options already selected */
  body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
  background-color: white !important;
  color: var(--color-text-muted) !important;
  font-weight: 400;
  transform: scale(1); /* Reset scale */
  transform-origin: left center;
  -webkit-font-smoothing: antialiased !important;
  transition: transform 0.3s ease-in-out, color 0.2s ease-in-out;
}

/* ==  🟩  🟩  🟩  🟩   🟩  🟩  🟩  🟩    🟩  🟩  🟩  🟩    🟩  🟩  🟩  🟩 == */


/* ======================== NEW FIX CODE ======================== */
/* ===== Custom Margin for Validated Billing Last Name Field ===== */
body.woocommerce-checkout #billing_last_name_field.woocommerce-validated {
  margin-left: 12px !important;
  margin-bottom: 20px !important;
}
/* ===== Custom Margin for Validated Billing Last Name Field ===== */
body.woocommerce-checkout #shipping_last_name_field.woocommerce-validated {
  margin-left: 12px !important;
  margin-bottom: 20px !important;
}

/* ===== Custom Margin for Validated Billing Country Field ===== */
body.woocommerce-checkout #billing_country_field.woocommerce-validated {
  margin-bottom: 2rem !important;
}
/* ===== Custom Margin for Validated Shipping Country Field ===== */
body.woocommerce-checkout #shipping_country_field.woocommerce-validated {
  margin-bottom: 2rem !important;
}
/* ===== Custom Margin for Validated Billing Phone ===== */
body.woocommerce-checkout #billing_phone_field.woocommerce-validated {
  margin-bottom: 2rem !important;
}
/* ===== Custom Margin for Validated Shipping Phone ===== */
body.woocommerce-checkout #shipping_phone_field.woocommerce-validated {
  margin-bottom: 2rem !important;
}

/* ==================== */
/* Billing: State & ZIP */
/* ==================== */
body.woocommerce-checkout #billing_state_field .woocommerce-input-wrapper,
body.woocommerce-checkout #billing_postcode_field .woocommerce-input-wrapper,
/* Shipping: State & ZIP */
body.woocommerce-checkout #shipping_state_field .woocommerce-input-wrapper,
body.woocommerce-checkout #shipping_postcode_field .woocommerce-input-wrapper {
  display: inline-block !important;
  width: 100% !important;
}

/* Billing: State and ZIP */
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #billing_postcode_field,
/* Shipping: State and ZIP */
body.woocommerce-checkout #shipping_state_field,
body.woocommerce-checkout #shipping_postcode_field {
  display: inline-block !important;
  width: calc(50% - 6px) !important;  /* ⬅️ Each shrinks 6px */
  margin-right: 12px !important;     /* ⬅️ Total gap = 12px */
  vertical-align: top;
}

/* Remove right margin from the second in each pair */
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_postcode_field {
  margin-right: 0 !important;
}

/* Checkout: Set height for State & Country select2 fields */
body.woocommerce-checkout .select2-container .select2-selection--single {
  height: 76px !important;
}

/* ===== ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ===== */

/* ===== Chrome Autofill Fix: Remove Background + Blue Glow ===== NOT WORKING!!!!*/    /* == ⁉️👀 == */ 
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px red inset !important; /* set to your background */
  -webkit-text-fill-color: var(--color-text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== Remove Blue Outline Shadow ===== */
/* ===== Remove Blue Outline Shadow ===== 
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  box-shadow:
    0 0 0 1000px #fff inset !important,
    0 0 0 1.5px var(--color-accent-primary) !important; 
  outline: none !important;
}*/
  
/* ========================================================== */  
/* ======================= YOUR ORDER ======================= */
/* ========================================================== */  
  
  /* Thead Diplay NONE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
    display: none;
  }
  
  body.woocommerce-checkout #order_review_heading {
    font-size: 3.2rem;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary);
    margin-bottom: 3.2rem;
    padding-left: 0rem; /* Add left padding */
    font-weight: 600;
 /*  -webkit-font-smoothing: initial;*/
  }
  
  
  
/* ========== Right Column – Order Summary YOUR ORDER DIVat 50% Width ========== */
/* ========== Right Column – Order Summary: Full Width Reset ========== */ /* == 🔻 ==*/ /* == 🔵‼️👀  ==*/
  body.woocommerce-checkout .woocommerce-checkout-review-order {
 /* float: right;*/
  width: 80%;         /* or 50%, depending on desired width */
  clear: both;        /* optional — ensures it starts below any floats above */
  border-radius: 12px;
  padding: 0;
  background: white;
}
  
  /* Buttons 
  body.woocommerce-checkout .button {
    background-color: var(--color-text-primary);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    transition: background 0.2s ease;
  }
  
  body.woocommerce-checkout .button:hover {
    background-color: #333;
  }*/
  
  /* Review Order Table on the Checkout Page*/
  body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    font-size: 14px;
    border-radius: 0px;
    width:100%;
    border: none;
    border-top: none;
    border-radius: 0;
    background: #ffffff;
    padding: 20px;
    border-collapse: collapse;
    box-shadow: none;
  }
  
  /* Cart Item Tr NOT IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item {
  }
  
  /* Order Summary Table MIGHT NOT NEED IT */
  /* body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    padding: 10px 0;
    border: none;
    font-size: 1.7rem;
    text-transform: none !important;
  } */
  
  
  /* NOT IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  }
  
  /* Product Name Left Divs IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    vertical-align: top; 
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    color: var(--color-text-primary);
    font-weight: 500;
    padding: 64px 0px 56px 20px;
    line-height: 1.2;
  }
  
  /* ===== Checkout: Product Quantity Styling ===== 🟠🟠 */ 
  body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
    vertical-align: top;   
    font-size: 2.4rem;
    color: var(--color-text-primary);
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.2;
  }
  
/* ================================================= */  
/* ===== Variations (Picks) Adjustments IN USE ===== */
/* ================================================= */ 
  body.woocommerce-checkout td.product-name dl.variation  {
    margin-top: 3.2rem;
    padding: 8px 0 0 12px;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary) !important;
    font-size: 1.5rem;
    line-height: 1.4em;
    border-top: 1px solid var(--color-border-divider);
    text-align: left;
    font-style: italic;
    -webkit-font-smoothing: antialiased !important;
    font-weight: 400 !important;
  }

body.woocommerce-checkout td.product-name dl.variation p {
  margin: 0;
  display: inline;
}


  /* Product Price Right Divs - IN USE - THIS IS FOR THE UPPER DIV, NOT ORDER TOTALS 🟢 */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
    vertical-align: top;  
    text-align: right;
    padding: 64px 0px 56px 20px;
  }
  /* Product Price Right Divs - IN USE - THIS IS FOR THE UPPER DIV, NOT ORDER TOTALS */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total .amount {
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    color: var(--color-text-primary);
    font-weight: 500;
    display: inline-block;
    margin-top: 0rem; /* Adjust as needed */ 
    line-height: 1.2;
  }
  
  
  /* CHECK THIS OUT
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    font-weight: 600;
  } */
  
  /* Divider below items */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody:after {
    content: "";
    display: block;
    border-bottom: none;
    margin: 6rem 0;
   /* display: none;  */ 
  }

/* ========================================================== */  
/* ==================== tfoot YOUR ORDER ==================== */ /* 🟪  🟪  🟪   */
/* ========================================================== */   
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
    margin-top: 6rem; /* adjust as needed */
    display: table-row-group; /* ensure it stays as table-row-group */
  }
  
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td {
  /*   padding-top: 6rem !important; adds spacing above the first row in tfoot */
    border-top: none;
  }


  /* Your Order Line Divisions */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
    border-top: none;
    border-bottom: 1px solid var(--color-border-divider);
  }
  
  /* Order Summary Left Div IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    text-align: left;
    padding: 12px 20px;
    border: none;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--color-text-primary);
    font-family: 'Outfit', sans-serif;  
    text-transform: none !important;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased; 
    width: 60%;
}
  
  /* Order Summary Right Div IN USE */ /* 🟪  🟪  🟪   */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    padding: 12px 0px 12px 0px;
    border: none;
  /*  font-size: 1.7rem;
    font-family: 'Outfit', sans-serif;  
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;  */
  }
  
  /* ===== June 13, 2025 ===== */
    /* Checkout Page: Your Order Section – Tfoot Price Amount */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .woocommerce-Price-amount.amount {
    font-size: 1.7rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary);
  /*  -webkit-font-smoothing: antialiased; */
    padding-left: 1rem; /* Optional: adjust spacing */
  }
  
  /* ===== June 13, 2025 ===== */
    /* Checkout Page: Shipping Price in Order Totals (tfoot only) */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot ul#shipping_method .amount {
    font-size: 1.7rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary);
  /*  -webkit-font-smoothing: antialiased; */
    padding-left: 1rem; /* Optional: adjust spacing */
  }
  
  /* ===== June 13, 2025 ===== */
    /* Checkout Page: Flat Rate Label (Shipping Method) */
  body.woocommerce-checkout ul#shipping_method li label {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

.oxy-woo-checkout .woocommerce ul#shipping_method li {
    margin-bottom: 8px;
}


/* ========================================= */
/* ===== Shipping Method Label Spacing ===== */
/* ========================================= */
/* Tighten spacing for shipping method text */
/* Shipping list items */

    
  /* ===== Order Summary Tr Total - IN USE ===== */   /* == 🔵‼️👀  ==*/   /* == 🔻 ==*/ 

body.woocommerce-checkout #payment {
  width: 80%;
}

  
  /* ===== June 13, 2025 ===== */
    /* Checkout Page: Remove Bottom Border from Last Row in Order Totals */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child {
    border-bottom: none !important;
  }
  
  /* th Order Total - IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
    text-align: left;
    padding: 20px 20px 12px;
    border: none;
    font-size: 2.4rem; 
    font-weight: 500;
    color: var(--color-text-primary) !important;
    font-family: 'Outfit', sans-serif;  
    text-transform: none !important;
    -webkit-font-smoothing: antialiased; 
    
  }
  
  /* ===== June 13, 2025 ===== */
    /* th Order Total - IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    text-align: right;
    padding: 20px 0px 12px 20px;
    border: none;
   
  }
  /* ===== June 13, 2025 ===== */
    /* Checkout Page: Order Totals (tfoot TD Price for Final Total Only) */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount.amount {
    font-size: 2.4rem;
    font-weight: 500 !important;
    color: var(--color-text-primary);
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 20px 0px 12px 20px;
    text-align: right;
  }
  
  /* Price bdi Order Total - IN USE */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount bdi {
    /* styles here */
  }
  











/* ====================================================== */  /* == 🟩 🟩 == */
/* ===== WooCommerce Autofill Override - Light Gray ===== */
/* ====================================================== */  
/*body.woocommerce-checkout input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #f4f4f4 inset !important;  light gray 
  -webkit-text-fill-color: var(--color-text-primary) !important;
  transition: background-color 99999s ease-out 0s;
}
*/







  

  
/* ========================================================== */  
/* ================ CREDIT CARD - CC SECTION ================ */
/* ========================================================== */  
  
    /* Whole Payment Div - IN USE */
  body.woocommerce-checkout #payment ul.payment_methods {
    /* Example styles */
    padding: 1.5rem;
    background-color: white !important;
    border-radius: 12px;
    list-style: none;
    margin: 0;
  }
  
    /* Example styles - NOT IN USE YET =================== THIS IS THE GREEN LINE LOOK */
  body.woocommerce-checkout #payment ul.payment_methods li {
    padding: 1rem 0;
    border-bottom: none !important;
  }
  
    /* Inner Payment Div - IN USE */
  body.woocommerce-checkout #payment div.payment_box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 2rem 0 0;
    margin: 1.5rem 0 0;
    font-size: 1.6rem;
    line-height: 1.6;
    background-color: white; /* replace with your preferred color */
    color: var(--color-text-primary);
    border-radius: 12px;
    border: unset;
    font-family: 'Outfit', sans-serif;
  }
  
    /*  - NOT IN USE YET */   /* == 🔗 👀 -link == */
    body.woocommerce-checkout #payment div.payment_box a {
    color: var(--color-accent-secondary); /* your secondary accent */
    text-decoration: underline;
  }

   /* Accept.Blue credit card fieldset */
body.woocommerce-checkout #wc-acceptbluecard-cc-form {
  margin-top: 2.4rem !important; /* or however much you want */
}

    /* Text Above Input Boxes with "*" - IN USE */   /* == 🔻👀 -Queries ==*/ 
  body.woocommerce-checkout .oxy-woo-checkout .woocommerce form .form-row label {
    font-size: 1.7rem;
    color: var(--color-text-primary);
    font-weight: 400;
    font-family: 'Outfit', sans-serif;
  }
  
  /* ===== June 13, 2025 ===== */
  /* Payment Method Label: Accept.Blue Card Only */
  body.woocommerce-checkout li.payment_method_acceptbluecard > label {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px; /* spacing between text and icons */
    -webkit-font-smoothing: antialiased;
  }
  
  /* ===== Payment Method Description: Accept.Blue Card Paragraph ===== */
  body.woocommerce-checkout li.payment_method_acceptbluecard .payment_box > p:last-of-type {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-top: 1rem;
    -webkit-font-smoothing: antialiased;
  }
  
  
  /* ===== Payment Method Input Fields - Styling (The font it's for the Placeholders ===== */
  body.woocommerce-checkout #payment div.payment_box input.input-text {
    font-size: 1.7rem;
    color: var(--color-text-primary);
    font-family: 'Outfit', sans-serif;
    border: 1px solid var(--color-border-input);
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.6rem; /* Add spacing between stacked fields */
  }

  
  /* ===== Payment Form: Two Columns Layout (Expiration + Card Code) ===== */
    
  body.woocommerce-checkout #payment .form-row-first {
    width: 48% !important;
    margin-right: 4% !important; /* space between columns */
    box-sizing: border-box;
  }
  
  body.woocommerce-checkout #payment .form-row-last {
    width: 48% !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }  

/* ===== Adjust Bottom Margin for Credit Card Fields ===== 🔴🔴 */
body.woocommerce-checkout #payment div.payment_box .form-row {
  margin-bottom: 0.5em; /* Adjust value as needed */
}

  /* ===== Stripe Payment Input Fields Style ===== */   /* == 🅾️ 👀 -Labels == */
  
  .woocommerce-checkout #payment div.payment_box input.input-text {
    font-size: 1.7rem;
    color: var(--color-text-primary) !important;
    font-family: 'Outfit', sans-serif;
    border: 1px solid var(--color-border-divider);
    border-radius: 12px !important;
    padding: 20px 12px !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 1.6rem;
    margin-top: 0 !important;
    -webkit-font-smoothing: antialiased !important;
  }
   
  /* ===== Checkout Privacy Policy Text ===== */   /* == ⭕️ 👀 -P == */ 
  .woocommerce-privacy-policy-text p {
    font-size: 1.5rem;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    margin-top: 0px !important;
   
  }
  
  /* ===== Checkout: Privacy Policy Link Styled like .link_paragraph ===== */   /* == 🔗 👀 -link == */
body.woocommerce-checkout .woocommerce-privacy-policy-text p a.woocommerce-privacy-policy-link {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative;
  text-decoration: none;
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
}
/* ===== Underline Animation ===== */
body.woocommerce-checkout .woocommerce-privacy-policy-text p a.woocommerce-privacy-policy-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text p a.woocommerce-privacy-policy-link:hover::after {
  width: 100%;
}
  
  
  /* ===== Checkout: Margin Between Privacy Text and Place Order Button ===== */
  body.woocommerce-checkout .form-row.place-order .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 3rem; /* Adjust spacing as needed */
  }


/* ========== CC LABELS FONT SHRINK NEW HACK ==== 🟪 🟪=========== */ /* == ⚠️‼️👀 -Hack == */ /* == 🅾️ 👀 -Labels == */

/* Floating Label Effect for Credit Card Fields (CC Section) */
body.woocommerce-checkout #payment div.payment_box .form-row {
  position: relative;
}

/* Start the label already above the input */
body.woocommerce-checkout #payment div.payment_box .form-row label {
  position: absolute;
  left: 12px;
  top: 8px; /* ← change from 18px */
  font-size: 1.3rem; /* ← change from 1.7rem */
  transition: top 0.2s ease-out; /* only animate top */
  pointer-events: none;
  z-index: 2;
  background-color: white;
  padding: 0 4px;
  line-height: 1.4;
  font-family: 'Outfit', sans-serif;
  color: var(--color-text-primary); /* ← fix: use var, not --color-border-input */
}

/* Optional: bump label upward slightly on focus */
body.woocommerce-checkout #payment div.payment_box .form-row:focus-within label {
  top: -16px; /* position near the top border */
}

/* Add input padding to make room for label */ /* Padding inside input for label space */
body.woocommerce-checkout #payment div.payment_box .form-row input {
  padding: 40px 16px 16px !important; /* top | left/right | bottom */
  font-size: 17px; /* Match font size with user input text */
}

/*  Placeholder user-typed input */
body.woocommerce-checkout #payment div.payment_box .form-row input::placeholder {
  font-size: 17px;
  font-family: 'Outfit', sans-serif;
  color: var(--color-border-input);
}

#acceptbluecard_cc_card-number {
  padding: 48px 16px 16px !important; /* top, sides, bottom */
}

/* Default input 
body.woocommerce-checkout #payment div.payment_box .form-row input {
  border: 1px solid var(--color-border-input) !important; 
  transition: box-shadow 0.35s ease-in-out, border-color 0.35s ease-in-out !important;
}*/

/* On focus: simulate thicker border with inner shadow 
body.woocommerce-checkout #payment div.payment_box .form-row input:focus {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 2px var(--color-accent-primary) inset !important;
}*/


  /* ======================================================================================================= */

/* ===== CHEKBOX TERMS & CONDITIONS ==================== */  /* == ☑️ 👀 -Checkbox == */    
/* ===== Terms and Conditions: Custom Checkbox Styling ===== */

body.woocommerce-checkout input#terms[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: white !important;
  border: 1px solid var(--color-border-divider) !important;
  border-radius: 4px !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
  position: relative !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}
/* ===== Remove Theme's Extra Span Styling ===== */
body.woocommerce-checkout label.woocommerce-form__label[for="terms"] span {
  margin-left: 0 !important;
}
/* ===== Checked State ===== */
body.woocommerce-checkout input#terms[type="checkbox"]:checked {
  background-color: var(--color-accent-secondary) !important;
  border-color: var(--color-accent-secondary) !important;
}
/* ===== White Checkmark Centered ===== */
body.woocommerce-checkout input#terms[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
/* ===== Prevents the dic from Jumping when on Error ===== 
.woocommerce-invalid #terms {
  outline-offset: 0 !important;
} */ /* == ⁉️👀 == */  

/* ===== Fix Wrapper Layout for Terms Checkbox Block ===== */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align everything to the left */
  gap: 1.2rem; /* space between privacy text and checkbox */
  margin-bottom: 3rem;
}

body.woocommerce-checkout p.form-row.validate-required.woocommerce-validated {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;

}

/* ===== Terms and Conditions: Flex Label Wrapper ===== */
body.woocommerce-checkout label.woocommerce-form__label[for="terms"] {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.4;
  cursor: pointer;
}

body.woocommerce-checkout label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
  padding-left: 0 !important;
}

/* ===== Hide WooCommerce Default ::before Checkbox Box ===== */
body.woocommerce-checkout span.woocommerce-terms-and-conditions-checkbox-text::before {
  display: none !important;
}


/* ===== Checkbox Box Text ===== */
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-primary); /* #1d1d1f */
  line-height: 1.4;
  padding-top: 1px;
}

/* ===== Checkbox Box Link ===== */   /* == 🔗 👀 -link == */
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a.woocommerce-terms-and-conditions-link {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative;
  text-decoration: none;
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a.woocommerce-terms-and-conditions-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a.woocommerce-terms-and-conditions-link:hover::after {
   width: 100%; 
}


  /* ===== BUTTON ================================= */   /* == 🅱️ 👀 -Button == */
  /* Checkout Place Order Button Wrapper */
  body.woocommerce-checkout .form-row.place-order {
    display: flex;
    justify-content: center;
  }
  
  /* Checkout Place Order Button Style */
  body.woocommerce-checkout .form-row.place-order #place_order {
    width: 100%;
  /*  max-width: 32rem;*/
    background-color: var(--color-accent-primary) !important;
    color: white;
    padding: 0.2rem 1.2rem !important;
    font-size: 1.7rem !important;
    border-radius: 999px;
    border: 2px solid var(--color-accent-primary) !important;
    text-decoration: none;
    display: inline-block;
    font-family: 'Outfit';
    font-weight: 500 !important;
    text-transform: unset;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
    transition: all 0.8s ease-in-out;
  } 
  /* Checkout Place Order Button Hover Animation */
  body.woocommerce-checkout .form-row.place-order #place_order:hover {
    width: 80%;
    background-color: var(--color-accent-primary) !important;
    opacity: 1 !important;
  }
  
  /* ===== Checkout Place Order Section Layout ===== */
  body.woocommerce-checkout .form-row.place-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* ===== June 14, 2025 ===== 🔴🔴🔴 */
  /* ===== Checkout Payment Help Text Block & Width Container ===== */
  body.woocommerce-checkout #text_block-53-450 {
    font-size: 1.5rem;
    font-family: 'Outfit', sans-serif;
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    padding: 3rem 0;
    margin-top: 6rem;
    border-top: 1px solid var(--color-border-divider);
    border-bottom: 1px solid var(--color-border-divider);
  }
  
  /* ===== Checkout: Help Text Block Link Styled like .link_paragraph ===== */   /* == 🔗 👀 -link == */
body.woocommerce-checkout #text_block-53-450 a {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative;
  text-decoration: none;
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
}
/* ===== Underline Animation ===== */
body.woocommerce-checkout #text_block-53-450 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
body.woocommerce-checkout #text_block-53-450 a:hover::after {
  width: 100%;
}
  
  
   
  /* ==== June 14. 2025 ===== */
  /* ===== Ship to a Different Address Checkbox ===== */   /* == ☑️ 👀 -Checkbox == */
  
  /* ===== Checkout: Ship to a Different Address Block Margin ===== */   /* == ❌ 👀 -H3 == */ 
  body.woocommerce-checkout h3#ship-to-different-address {
    margin-bottom: 2rem; /* Adjust as needed */
    margin-top: 3rem; 
  }
  
  /* ===== Ship to a Different Address: Custom Checkbox Styling ===== */
  body.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: white !important;
    border: 1px solid var(--color-border-divider) !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
    position: relative !important;
    margin: 0 8px 0 8px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
  }
  
  /* ===== Ship to a Different Address: Remove Extra Span Margin ===== */
  body.woocommerce-checkout label.woocommerce-form__label.woocommerce-form__label-for-checkbox span {
    margin-left: 0 !important;
  }
    
  /* ===== Checked State ===== */
  body.woocommerce-checkout #ship-to-different-address input[type="checkbox"]:checked {
    background-color: var(--color-accent-secondary) !important;
    border-color: var(--color-accent-secondary) !important;
  }
  
  /* ===== White Checkmark Centered ===== */
  body.woocommerce-checkout #ship-to-different-address input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
  }  

   /* ===== ????????????? ===== */   /* == 🅾️ 👀 -Labels == */ 
  body.woocommerce-checkout #ship-to-different-address label.woocommerce-form__label {
    display: flex;
    align-items: center;
    gap: 8px; /* match spacing */
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.4;
    cursor: pointer;
  }
  
  /* ===== Ship to a Different Address: Hide Theme Checkbox Box (::before) ===== */
  body.woocommerce-checkout #ship-to-different-address span::before {
    display: none !important;
  }
  
   
  
  /* ===== PREVIEWS CSS, MIGHT NEED SOME TEAKING ===== */
  
  /* ===== Checkout: Shipping Insurance Checkbox Styling ===== */   /* == ☑️ 👀 -Checkbox == */   
  /* Base styles for the Shipping Insurance checkbox */
  body.woocommerce-checkout #shipping_insurance_field input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    border: 1px solid var(--color-border-divider) /* #1d1d1f2e */ !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
    position: relative !important;
    margin: 2px 8px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
  }    
  /* Checked state with white checkmark */
  body.woocommerce-checkout #shipping_insurance_field input[type="checkbox"]:checked {
    background-color: var(--color-accent-secondary) /* #b64400 */ !important;
    border-color: var(--color-accent-secondary) /* #b64400 */ !important;
  } 
  body.woocommerce-checkout #shipping_insurance_field input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
  }
  
  /* ===== Remove default padding/margin from wrappers =====*/
  body.woocommerce-checkout #shipping_insurance_field,
  body.woocommerce-checkout #shipping_insurance_field .woocommerce-input-wrapper,
 /* body.woocommerce-checkout #shipping_insurance_field label.checkbox */ {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* ===== Align label text with custom checkbox ===== */
  body.woocommerce-checkout #shipping_insurance_field label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.4;
    cursor: pointer;
    padding: 0 !important;
    margin: 0rem 0rem 0rem 0.8rem;
  }
  
  /* ===== Checkout: Hide "(optional)" Label on Shipping Insurance ===== */
  body.woocommerce-checkout #shipping_insurance_field .optional {
    display: none !important;
  }
  

/* ===== June 30, 2025 ===== 🔴🔴🔴 🔴🔴🔴 👀*/
/* ================================================================== */
/* ===== Checkout Two-Column: Billing (Left) + Shipping (Right) ===== */
/* ================================================================== */

body.woocommerce-checkout #customer_details {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 6rem;
  padding-top: 6rem;
  border-top: 1px solid var(--color-border-divider);  
  border-bottom: 1px solid var(--color-border-divider);
}

/* Billing Fields */
body.woocommerce-checkout #customer_details > .col-1 {
  flex: 1 1 50%;
  max-width: 50%;
  padding-right: 0px; /* Optional spacing */
}

/* Shipping Fields */
body.woocommerce-checkout #customer_details > .col-2 {
  flex: 1 1 50%;
  max-width: 50%;
  padding-left: 0px; /* Optional spacing */
/*  border-top: 1px solid var(--color-border-divider);
  border-bottom: 1px solid var(--color-border-divider);
  padding-top: 3rem;
  padding-bottom: 3rem;*/
}


/* =============================== */
/* ===== START Media Queries ===== */   /* == 🔻👀 -Queries == */ /* == 🔵🔵⁉️👀  ==*//* == 🔴🔴🔴 ==*/
/* =============================== */
@media (max-width: 1280px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    width: 60%;
  }
    body.woocommerce-checkout #payment {
    width: 60%;
  }
}

@media (max-width: 1040px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
     width: 55%;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    width: 90%;
  }
    /* ===== Order Summary Tr Total - IN USE ===== */   /* == 🔵‼️👀  ==*/
  body.woocommerce-checkout #payment {
    width: 60%;
  }
}

/* ===== START 992 ===== */   /* == 🔻👀 -992 == */  
/* ===== START Col-1 & col-2 ===== */   /* == 🔻👀 -992 == */  
@media (max-width: 992px) {
  /* Coupon */
  .woocommerce .woocommerce-form-coupon-toggle {
    width: 100%;
  }
  /* Billing Fields */
  body.woocommerce-checkout #customer_details > .col-1 {
    flex: 1 1 50%;
    max-width: 80%;
    padding-right: 0px; /* Optional spacing */
  }

  /* Shipping Fields */
  body.woocommerce-checkout #customer_details > .col-2 {
    flex: 1 1 50%;
    max-width: 80%;
    padding-left: 0px; /* Optional spacing */
  /*  border-top: 1px solid var(--color-border-divider);
    border-bottom: 1px solid var(--color-border-divider);
    padding-top: 3rem;
    padding-bottom: 3rem;*/
  } 
  
/* ===== START Checkout- Review- Order ===== */   /* == 🔻👀 -992 == */  
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    width: 100%;
  }
    body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    width: 50%;
  }
    /* ===== Order Summary Tr Total - IN USE ===== */   /* == 🔵‼️👀  ==*/
  body.woocommerce-checkout #payment {
    width: 100%;
  }
  /* ===== Blue Card - IN USE ===== */
  body.woocommerce-checkout #payment div.payment_box{
    width: 60%;
  }
  /* ===== Checkout Privacy Policy Text ===== */   /* == ⭕️ 👀 -P == */ 
  .woocommerce-privacy-policy-text p { 
    width: 60%;
  }
}



/* ===== START 768 ===== */   /* == 🔻👀 -768 == */  
/* ===== Checkout Review Column (Mobile Full Width) ===== */   /* == 🔻👀 -768 == */ 
@media screen and (max-width: 768px) {
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    max-width: 100%;
  }  
}

/* =====  🟪  🟪  🟪  🟪  🟪  🟪 =====*/
/* ===== START 540 ===== */   /* == 🔻👀 -540 == */  
/* ===== Checkout Review Column (Mobile Full Width) ===== */   /* == 🔻👀 -540 == */ 
@media screen and (max-width: 540px) {
/* Billing Fields */
  body.woocommerce-checkout #customer_details > .col-1 {
    flex: 1 1 50%;
    max-width: 90%;
    padding-right: 0px; /* Optional spacing */
  }

  /* Shipping Fields */
  body.woocommerce-checkout #customer_details > .col-2 {
    flex: 1 1 50%;
    max-width: 90%;
    padding-left: 0px; /* Optional spacing */
  /*  border-top: 1px solid var(--color-border-divider);
    border-bottom: 1px solid var(--color-border-divider);
    padding-top: 3rem;
    padding-bottom: 3rem;*/
  } 
  /* ===== Blue Card - IN USE ===== */
  body.woocommerce-checkout #payment div.payment_box{
    width: 90%;
  }
 /* ===== Checkout Privacy Policy Text ===== */   /* == ⭕️ 👀 -P == */ 
  .woocommerce-privacy-policy-text p { 
    width: 90%;
  }
}
/* ===== START 480 ===== */   /* == 🔻👀 -480 == */  

@media screen and (max-width: 480px) {
  
  /* ===== Headings ===== */ /* == ❌ 👀 -H3 == */ 
  /* Billing Fields H3 */
  body.woocommerce-checkout .woocommerce-billing-fields > h3 {
    font-size: 3rem; 
  }
/* You Order H3*/
  body.woocommerce-checkout #order_review_heading {
    font-size: 3rem; 
  }

   /* ===== START Product Name Left Divs IN USE  ===== */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
    vertical-align: top; 
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: var(--color-text-primary);
    font-weight: 600;
    padding: 64px 0px 56px 20px;
    line-height: 1.2;
  }  
  /* ===== Checkout: Product Quantity Styling ===== */   /* == ⚠️‼️👀 -Hack == */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
    vertical-align: top;   
    font-size: 1.7rem;
    color: var(--color-text-primary);
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.2;
  }
  /* Product Price Right Divs - IN USE - THIS IS FOR THE UPPER DIV, NOT ORDER TOTALS */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total .amount {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    color: var(--color-text-primary);
    font-weight: 600;
    display: inline-block;
    margin-top: 0rem; /* Adjust as needed */ 
    line-height: 1.2;
  }

/* ===== Checkout Review Column (Mobile Full Width) ===== */
  /* Billing Fields */
  body.woocommerce-checkout #customer_details > .col-1 {
    flex: 1 1 50%;
    max-width: 95%;
    padding-right: 0px; /* Optional spacing */
  }

  /* Shipping Fields */
  body.woocommerce-checkout #customer_details > .col-2 {
    flex: 1 1 50%;
    max-width: 95%;
    padding-left: 0px; /* Optional spacing */
  /*  border-top: 1px solid var(--color-border-divider);
    border-bottom: 1px solid var(--color-border-divider);
    padding-top: 3rem;
    padding-bottom: 3rem;*/
  } 

  /* ===== Align Left Terms & Conditions ===== */
  body.woocommerce-checkout p.form-row.validate-required {
    text-align: left !important;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  body.woocommerce-checkout label.woocommerce-form__label[for="terms"] {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* ===== START Checkout- Review- Order ===== */   /* == 🔻👀 -480 == */  
  /* ===== Blue Card - IN USE ===== */
  body.woocommerce-checkout #payment div.payment_box{
    width: 100%;
  }
  /* ===== Checkout Privacy Policy Text ===== */   /* == ⭕️ 👀 -P == */ 
  .woocommerce-privacy-policy-text p { 
    width: 100%;
  }
} 
/* ===== END 480 ===== */ 


/* ===== Return to Shop  ===== */   /* == 🅱️ 👀 -Button == */   /* == 🔵🔵⁉️👀  ==*/
.woocommerce .return-to-shop {
  width: 100%;
  display: block;
  margin: 3rem 0;
}

/* ===== Return to Cart Button (Error Message) =====   min-width: 240px !important;     /* Adjust this value as needed */
/* ===== Return to Cart Button (Error Message) ===== */   /* == 🅱️ 👀 -Button == */
.woocommerce .button.wc-backward {
  width: 100% !important;
  max-width: 100%;
  display: block !important;
  margin: 0 auto;
  text-align: center !important;

  background-color: var(--color-accent-primary) !important;
  color: white !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  padding: 0.2rem 2rem;
  border: 2px solid var(--color-accent-primary) !important;
  border-radius: 999px;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal !important;
  transition: all 0.8s ease-in-out;
}
.woocommerce .button.wc-backward:hover {
  width: 80% !important;
  margin: 0 auto; /* Center the button even when it shrinks */
  color: white !important;
}
/* Victoria - Monster Studios */


/* ============================= */
/* ===== MAK Global Colors ===== */
/* ============================= */

:root {
  /* ===== Text Colors ===== */
  --color-text-primary: #1d1d1f;     /* default for body and headings */
  --color-text-muted: #a1a1a2;       /* placeholder text, muted UI */
  --color-text-subtle: #b7b8b9;      /* subtle/inactive text */ 
  

  /* ===== Light / White Text ===== */
  --color-white-primary: rgba(255, 255, 255, 0.95);   /* white text on graphics */
  --color-white-muted: rgba(255, 255, 255, 0.85);     /* white footer headings & text */
  --color-white-subtle: rgba(255, 255, 255, 0.6);     /* white footer disclaimer */

  
  

  /* ===== Border & Divider Colors ===== */
  --color-border-input: rgba(29, 29, 31, 0.58);    /* from #1d1d1f95 */ /* input borders */
  --color-border-divider: rgba(29, 29, 31, 0.17);  /* from #1d1d1f2e */ /* horizontal rules, section lines */
  

  /* ===== Accent Colors ===== */
  --color-accent-primary: #e8a83a;       /* primary brand (e.g. buttons) */
  --color-accent-secondary: #b64400;     /* secondary brand (e.g. links) */
  --color-accent-terciary: #bf7b22;      /* terciary brand (e.g. badges, graphics) */
  --color-accent-quaternary: #ac7e4b;    /* quaternary brand (e.g. badges, graphics) */
  

  /* ===== Star Ratings ===== */
  --color-star-muted: #a1a1a2;       /* for inactive stars */

  /* ===== Backgrounds ===== */
  --color-bg-light: #f9f9f9;      /* light alt background */
  --color-bg-medium: #262729;        /* footer background  */
  --color-bg-dark: #1d1d1f;          /* dark background sections */

  /* ===== Overlays ===== */
  --color-backdrop-dark: rgba(29, 29, 31, 0.6); /* dropdowns, modals, blurred bg */
/*  --color-backdrop-dark-80: rgba(29, 29, 31, 0.8); NOT IN USE YET */
/*  --color-backdrop-light-20: rgba(255, 255, 255, 0.2); NOT IN USE YET*/

}
  

/* ====================================== */
/* ===== Global Reset & Base Styles ===== */
/* ====================================== */
  
  :root {
  --tap-highlight: transparent; /* or try rgba(0,0,0,0.05) for subtle gray */
}

* {
  -webkit-tap-highlight-color: var(--tap-highlight);
}
  

  /* ===== Future: Status Colors ===== */
  /* --color-success: #2d9d78;        /* Woo: Earn Points, order success */
  /* --color-warning: #e6a100;        /* Woo: low stock, notices */
  /* --color-error: #d92d20;          /* Woo: errors, payment failed */




/* Victoria, Monster Studios */

/* ===== DEBUG PRODUCT LIST STRUCTURE
ul.products.columns-4 {
  outline: 3px dashed magenta;
  background: rgba(255, 0, 255, 0.05);
}

ul.products.columns-4 > li.product {
  outline: 2px solid #00ffff;
  background: rgba(0, 255, 255, 0.04);
}

ul.products.columns-4 li.product * {
  outline: 1px dotted red !important;
} ===== */



/* ================== */
/* ===== GUTTER ===== */
/* ================== */
:root {
 /*  Default: full-width layout with max-width 180rem (centered) */
  --gutter-start: calc((100vw - 180rem) / 2);
}

  :root {
    --gutter-start: 3rem;
  }
}


@media (max-width: 1280px) {
  :root {
    --gutter-start: 3rem;
  }
}

@media (max-width: 992px) {
  :root {
    --gutter-start: 3rem;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter-start: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter-start: 2rem;
  }
}

/*
:root {
  --gutter-start: 3rem;
}

@media (max-width: 768px) {
  :root {
    --gutter-start: 2rem;
  }
}*/


/* =================================== */
/* ===== Global Styles: Sections ===== */
/* =================================== */
.mak_sections {
  padding: 6rem 3rem;
/*  align-items: center; */
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Large Screens (≤1440px) ===== */
@media (max-width: 1440px) {
  .mak_sections  {
    padding: 6rem 3rem;
  /*  align-items: center; */
    max-width: 180rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1280px) {
.mak_sections {
  padding: 6rem 3rem;
/*  align-items: center; */
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
}
@media (max-width: 992px) {
.mak_sections {
  padding: 4rem 3rem;
/*  align-items: center; */
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
}
@media (max-width: 768px) {
.mak_sections {
  padding: 4rem 2rem;
/*  align-items: center; */
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
}
@media (max-width: 540px) {
.mak_sections {
  padding: 0 2rem 4rem;
/*  align-items: center; */
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
} 
@media (max-width: 480px) {
.mak_sections {
  padding: 0 2rem 4rem;
/*  align-items: center; */
  max-width: 180rem;
  margin-left: auto;
  margin-right: auto;
}
}  

/* ======= Inner Wrap Attention!! ====== */

.mak_sections > .ct-section-inner-wrap {
    max-width: 100%;
    align-items: center;
}

@media (max-width: 1280px) {
    .mak_sections > .ct-section-inner-wrap {
        padding-right:0rem;
        padding-left: 0rem;
    }
}

@media (max-width: 991px) {
    .mak_sections > .ct-section-inner-wrap {
        display:flex;
    }  
} 


/* =========================== */
/* ======= Attention!! ====== */
/* =========================== */
/* Only remove margin on paragraphs inside text blocks where spacing is handled manually */
.text-block p,
.hero-section p,
.footer p {
  margin: 0;
}

/* ===== Strong Rich Text Global ===== */
.oxy-rich-text strong {
  font-weight: 700;
}


/* ==================================================================================== */
/* ==================== GLOBAL: Quantity Arrows Styling =============================== */
/* ========== JavaScript Init in Snippet: "Global JS – Qty Arrows + AOS Init" ========= */


/* Normalize number inputs and hide native spin buttons */
.quantity input[type="number"] {
  -webkit-appearance: none;    /* Chrome, Safari */
  -moz-appearance: textfield;  /* Firefox */
  appearance: textfield;       /* Modern browsers */
  padding-right: 2.8rem;
  position: relative;
}
.quantity input::-webkit-inner-spin-button,
.quantity input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none !important;
}

/* Wrapper for quantity + arrows */
.quantity-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ===== Show default cursor instead of text caret ===== */
.quantity-wrapper input[type="number"] {
  cursor: default;
}

/* Quantity input */
.qty-input {
  width: 5rem;
  text-align: center;
  font-size: 1.7rem;
  border: 1px solid var(--color-border-input);
  padding: 0.6rem;
  border-radius: 0.4rem;
}

/* Plus/Minus buttons */
.qty-btn {
  width: 2.4rem;
  height: 2.4rem;
  background: transparent;
  border: none;
  border-radius: 0.4rem;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease, transform 0.2s ease;
}

.qty-btn:hover {
  transform: scale(1.03);
}
.qty-btn:focus {
  outline: none;
  box-shadow: none;
}
.qty-btn:not(.disabled) {
  color: var(--color-accent-primary);
}
.qty-btn.disabled {
  color: var(--color-text-muted);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* Minus bar */
.qty-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 3.5px;
  border-radius: 1px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

/* Plus vertical bar */
.qty-btn.plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5px;
  height: 1.6rem;
  border-radius: 1px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

input.qty-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Optional: Hide spinner arrows globally (even if not inside .quantity) ===== */ /* ===== 🌏‼️👀 -Global ===== */
/* Uncomment this only if you want to hide spinners on *all* number inputs across site */
/*
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  display: none !important;
}
input[type="number"] {
  -moz-appearance: textfield;
}
*/

/* ===== Prevent ghost gap when Woo injects extra checkmark ===== */

/* 3) When Woo adds the "added" state (or our success class),
      DO NOT expand padding (kills the temporary gap) */
.woocommerce a.add_to_cart_button.added,
.woocommerce a.add_to_cart_button.added-success {
  padding-right: 1.4rem !important; /* same as default above */
}

.woocommerce a.add_to_cart_button.added:hover {
  padding-right: 1.4rem !important; /* same as default above */
}


.woocommerce a.add_to_cart_button.added-success:hover {
  padding-right: 1.4rem !important; /* same as default above */
}


/* 4) Safety: if a button has no .btn-icon at all, never grow on hover */
.woocommerce a.button:not(:has(.btn-icon)):hover {
  padding-right: 1.4rem !important;
}


/* ===== DOUBLE CHECKMARK FIX ===== */ 
/* If for any reason multiple icons get appended, show only the first */
.woocommerce a.button .btn-icon ~ .btn-icon,
.woocommerce a.add_to_cart_button .btn-checkmark ~ .btn-checkmark {
  display: none !important;
  width: 0 !important;      /* <-- kills the gap instantly */
  height: 0 !important;
  overflow: hidden;
}



/* =============================================== */
/* ===== Global Styles: Pagination  ============== */
/* =============================================== */

.woocommerce-pagination {
    margin-top: 4.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  -webkit-font-smoothing: initial;
}

#-woo-products-11-431 nav.woocommerce-pagination ul li span.current {
    color: #ffffff;
    background-color: #262729;
    -webkit-font-smoothing: antialiased;
}


/* =============================================== */
/* ===== Global Styles: Pagination  ============== */
/* =============================================== */

/* ===== Pagination Container ===== */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: flex-start; /* Or center/right based on layout */
  gap: 0px;
  margin-top: 4rem;
  padding: 0;
  list-style: none;
  border: none !important;

}

/* ===== Pagination Container ===== */
.woocommerce nav.woocommerce-pagination ul li{
  border: none !important;

}
/* ===== Pagination Link Defaults ===== */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 8px 12px;
  font-size: 1.6rem;
  font-family: 'Outfit', sans-serif;
  color: var(--color-text-primary);
  background-color: white;
  border: 1px solid white;
  border-radius: 6px;
    transform: scale(1); /* ✅ Set baseline */
  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;

}

/* ===== Hover State ===== */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  color: var(--color-text-primary);
/*   transform: scale(1.1);
  transition: transform 0.2s ease;*/
  background-color: white !important; /*rgba(29, 29, 31, 0.29); */
}

/* ===== Remove Oxygen Inline Styles (Shop Page Override) ===== */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers {
  background-color: white !important;
  color: var(--color-text-primary) !important;
  border: 1px solid white !important;
}

/* ===== Active Page (Current) ===== */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
  color: #ffffff;
  background-color: var(--color-bg-medium);
  cursor: default;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* ===== Arrow Controls (Next/Previous) ===== */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
  font-size: 1.6rem;
  color: var(--color-text-primary);
}


/* =========================================================== */
/* ===== Global Styles: WooCommerce Breadcrumbs ============== */
/* =========================================================== */

/* ===== Default Breadcrumb Styling (All Pages) ===== */
.woocommerce-breadcrumb {
  margin: 0 0 1em;
  padding: 0;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-primary);
}

.woocommerce-breadcrumb a {
  color: var(--color-text-primary);
  font-weight: 400;
  -webkit-font-smoothing: antialiased !important;
}

.woocommerce-breadcrumb a:hover {
  font-weight: 500; /* Slightly bolder on hover */
}

/* Final breadcrumb segment (wrapped dynamically in <strong> via JS) */
.woocommerce-breadcrumb strong {
  font-weight: 600;
  -webkit-font-smoothing: antialiased !important;
}

/* ===== Product Archive Only: Underline Styling ===== */

.archive .mak-breadcrumb .woocommerce-breadcrumb {
  margin-bottom: 0 !important; /* Align with underline */
}

.archive .mak-breadcrumb {
  position: relative;
  padding-bottom: 2px;              /* Space between breadcrumb and underline */
  margin-bottom: 3.2rem !important; /* Space below underline */
}

.archive .mak-breadcrumb::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-border-divider);
}


/* ======================================= */
/* ===== Link on Paragraphs ============== */  /* == 🔗 👀 -link == */
/* ======================================= */
/* ===== Link on Paragraphs ===== */
.link_paragraph {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative; /* Required for ::after */
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
  text-decoration: none; /* Remove default underline */
  -webkit-font-smoothing: initial;
}

.link_paragraph::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* 👈 Moves line slightly below the text baseline */
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}

.link_paragraph:hover::after {
  width: 100%;
}


/* ============================ */
/* ===== MAK Global Links ===== */
/* ============================ */
a.restore-item {
  color: var(--color-accent-secondary);
  font-weight: 400;
  position: relative; /* Required for ::after */
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
  text-decoration: none; /* Remove default underline */
}
a.restore-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* 👈 Moves line slightly below the text baseline */
  width: 0%;
  height: 1px;
  background-color: var(--color-accent-secondary);
  transition: width 0.35s ease-in-out;
}
a.restore-item:hover::after {
  width: 100%;
}


/* ============================================= */
/* ===== Global Select2 Arrow SVG Override ===== */
/* ============================================= */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231d1d1f95' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}


/* =========================================== */
/* ===== Global Autofill Reset & Styling ===== */
/* =========================================== */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ============================================================ */
/* ===== Remove Default Blue Flash from Buttons and Links ===== */
/* ============================================================ */
button,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce input[type="submit"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  outline: none;
  box-shadow: none;
}
/* Victoria, Monster Studios */




/* ===== Remove "View Cart" Button After Adding to Cart ===== */
a.added_to_cart.wc-forward {
  display: none !important;
}


/* ======================================= */
/* ===== Global Styles: Product Grid ===== */
/* ======================================= */

/* ===== Shop Page: (AND other archives ?)Product Grid Bottom Spacing ===== */
body.post-type-archive.woocommerce ul.products {
  margin-bottom: 12rem; /* or whatever value you prefer */
}

/* ===== Product Archives (Shop, Category, Tag, Sale): Grid Layout Reset ===== */
body.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
}

/* Step 1: Flex container inside the product link */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow to stretch */
}

body.woocommerce-page ul.products li.product {
  display: flex;                  /* NEW: Flex container for vertical layout */
  flex-direction: column;        /* NEW: Stack children vertically */
  
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;

  border: 1px solid var(--color-border-input); 
  border-radius: 18px;
  overflow: hidden;
  background: white;
 /*  box-shadow: rgba(0, 0, 0, 0.08) 2px 4px 12px 0px;*/
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1280px) {
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  
}
  
/* 🔁 2 columns for medium-small screens (e.g., 540px) */
@media (max-width: 540px) {
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
  body.woocommerce-page ul.products li.product {
    border-radius: 14px;
 }
}

/* 🔁 1 column for very small screens (e.g., 480px and under) */
@media (max-width: 480px) {
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr);  /* grid-template-columns: 1fr; */
    gap: 1.6rem;
  }
    body.woocommerce-page ul.products li.product {
    padding: 1.4rem;
 }
}

/* ===== Remove WooCommerce Float-Based Pseudo Elements ===== */
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
body.woocommerce-page ul.products.columns-4::before,
body.woocommerce-page ul.products.columns-4::after {
  display: none !important;
  content: none !important;
}


/* ======================================= */

/* ======================================= */


/* ======================================= */
/* ===== Global Styles: Product Cards ===== */
/* ======================================= */

/* ===== NEW IMAGE MARGIN BOTTOM ===== */
body.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0; /* it was 0 0 1em; 🟩 */
    box-shadow: none
}

/* ========================================= */
/* ===== Product Grid: Image Zoom Hover ==== */
/* ========================================= */

/* Ensure anchor wraps correctly and hides overflow */
body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  overflow: hidden;

}

/* Enable smooth zoom animation */
body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
  display: block;
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  will-change: transform;
}

/* Zoom on hover or keyboard focus */
body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover img,
body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:focus-visible img {
  transform: scale(1.1);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Product Link Description */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'outfit';
  font-size: 1.6rem;
  font-weight: unset !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: normal; /* it was 0.01rem */
  color: var(--color-text-primary);
  text-align: left;
  padding-bottom: 1rem; /* it was 1rem */
  transition: color 0.6s ease-out;
  -webkit-font-smoothing: antialiased;

  
  background-color: #fff;
  padding-top: 16px;    /*keep your spacing */
  position: relative;   /* needed for z-index */
  z-index: 2;
  /* margin-top: 1em; it was nothing 🟩 */
}

/* ===== Product Rating Stars ===== */
.woocommerce ul.products li.product .star-rating span {
  color: var(--color-accent-secondary); /* #b64400 */
}

/* ===== Product Price Block ===== */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-Price-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-text-primary); /* #1d1d1f */
  text-align: left;
  -webkit-font-smoothing: antialiased;
  padding-top: 1rem;
  padding-bottom: 1.1rem;
}

@media (max-width: 480px) {
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .woocommerce-Price-amount {
    padding-top: .2rem;
    padding-bottom: 1.1rem;
 }
}


/* Highlight Sale Price Only */
.woocommerce ul.products li.product .price ins {
  color: var(--color-accent-primary); /* e.g. #e8a83a */
  font-weight: 600;
  -webkit-font-smoothing: antialiased;  
}

/* ===== Button – Product Cards ===== */
/*
.woocommerce ul.products li.product a.button {
  margin-top: auto;       
  align-self: flex-start;  
  
  width: max-content;
  padding: 0.3rem 1.4rem 0.4rem;
  text-transform: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: normal;
  text-align: center;
  border: none !important;border: 2px solid var(--color-accent-primary); 
  border-radius: 999px;
  color: #ffffff;
  background-color: var(--color-accent-primary);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.woocommerce ul.products li.product a.button:hover {
  font-weight: 600;
  color: var(--color-accent-primary);
  background-color: #ffffff;
  border: 2px solid var(--color-accent-primary);
}*/


/* ========================================================= */
/* ===== Product Card Button w/ Slide-In Icon on Hover ===== */
.woocommerce ul.products li.product a.button {
  position: relative;
  overflow: hidden;  
  width: max-content;
  display: inline-flex;           /* Make button use flex layout */
  align-items: center;  
  justify-content: flex-start;  
  gap: 0.4rem;                    /* Space between text and icon */

  /* Core Styling */
  padding: 0.3rem 1.4rem 0.4rem;
  font-size: 1.7rem;
  font-weight: 500;
  border-radius: 999px;
  background-color: var(--color-accent-primary);
  color: white;
  border: none !important;
  text-transform: unset;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;

  vertical-align: middle;
  transition: padding-right 0.3s ease;
}

.woocommerce ul.products li.product a.button .btn-icon {
  display: inline-flex;
  align-items: center;        /* ✅ Centers icon inside its box */
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
  right: 2.2rem;              /* adjust this for spacing */
  top: 50%;                   /* ✅ center vertically */
  pointer-events: none;
}

/* 🔎 Icon starts outside to the right */
.woocommerce ul.products li.product a.button:hover {
  padding-right: 4rem;
  background-color: var(--color-accent-primary);
}
/* On hover: add space and reveal icon */
.woocommerce ul.products li.product a.button:hover .btn-icon {
  transform: translateY(-50%) translateX(12px);          /* Slide into view */
  opacity: 1;
}

/* ============================================================ */
/* ========== Add to Cart Button – Success Checkmark ========== */
/* ===== Add to Cart Button - Base ===== */
/* ========================================================= */
/* Add to Cart Success Styling */
.woocommerce ul.products li.product a.add_to_cart_button.added-success {
  background-color: var(--color-accent-primary) !important; /* ✅ Green after click */
}

/* Hide icon on hover when added */
.woocommerce ul.products li.product a.add_to_cart_button.added-success .btn-icon {
  display: none;
}

/* Checkmark Style */
.btn-checkmark {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  opacity: 0;
  transform: translateX(-4px);
  animation: fadeInCheck 0.3s ease forwards;
}

@keyframes fadeInCheck {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* # seconds checkmark removal for JAVA 
setTimeout(() => {
  btn.classList.remove('added-success');
  btn.classList.remove('added');
}, 3000); */





[id*="woo-products"] ul.products li.product .onsale {
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-accent-secondary) !important;
  padding: 0.3rem 1.2rem 0.4rem;
}
/* Victoria, Monster Studios */

/*  margin-bottom: 12rem; */ /* or whatever value you prefer */




/*  LOOK AT THIS AND MAKE A CLASS !!!!!!!!!!! */
body.search.woocommerce h1.page-title {
  font-family: inherit;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
   margin-top: 6rem;
   margin-bottom: 2em;
}

@media (max-width: 992px) {
body.search.woocommerce h1.page-title {    
    font-size: 4rem;
    margin-top: 6rem;
    margin-bottom: 2em;
 }
}

@media (max-width: 540px) {
body.search.woocommerce h1.page-title {    
    font-size: 4rem;
    margin-top: 3rem;
    margin-bottom: 1em;
 }
}

/* ===== Product Search: Grid Layout Reset ===== */
.search-results-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;

   align-items: stretch; /* == ADDED ON == */ /* ✅ This makes the children fill the row height */
}
  
/* ===== Responsive Breakpoints ===== */
@media (max-width: 1280px) {
  .search-results-grid  {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .search-results-grid  {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  
}
  
/* 🔁 2 columns for medium-small screens (e.g., 540px) */
@media (max-width: 540px) {
  .search-results-grid  {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-results-grid {
    border-radius: 14px;
 }
}

/* 🔁 1 column for very small screens (e.g., 480px and under) */
@media (max-width: 480px) {
  .search-results-grid  {
    grid-template-columns: 1fr;
  }
}


/* ===== Product Image - Need to find the CSS with the 64px-64px margin-bottom: 1.6rem 
#image-36-66306 {
  margin-bottom: 1.6rem;
}===== */


/* ===== Product Card ===== */
.search-product-card {
  display: flex;  /* NEW: Flex container for vertical layout */
  flex-direction: column;
 /* flex-grow: 1;   NEW: Stack children vertically */
  
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;

  border: 1px solid var(--color-border-input); 
  border-radius: 18px;
  overflow: hidden;
  background: white;

  padding: 2rem;  /* == ADDED ON to MATCH == */
  height: 100%;
  
}


#div_block-88-66306 {
  flex-grow: 1; /* ✅ Fill available vertical space */
  display: flex;
  flex-direction: column;
}

/* ===== Product Image ===== */
.search-product-card__image {
    min-width: 64px;
    min-height: 64px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
    overflow: hidden;

    margin-bottom: 1.6rem;  /* == ADD ON to MATCH == */
   margin-top: auto; /* Pushes button to bottom */
}

/* ===== Product Title ===== */
.search-product-card__title {
  font-family: 'outfit';
  font-size: 1.6rem;
  font-weight: unset !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: normal; /* it was 0.01rem */
  color: var(--color-text-primary);
  text-align: left;
  padding-bottom: 1rem; /* it was 1rem */
  transition: color 0.6s ease-out;
  -webkit-font-smoothing: antialiased;
}

/* ===== Product Price ===== */
.search-product-card__price .woocommerce-Price-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-text-primary); /* #1d1d1f */
  text-align: left;
  -webkit-font-smoothing: antialiased;
  padding-top: 1rem;
  padding-bottom: 1.1rem;
  
}

/* ===== Woocommerce Rating ===== */
.woocommerce ul.products li.product a { /* == NOT in USE == */
    text-decoration: none;
}
.woocommerce .oxy-product-rating a.woocommerce-review-link {
    font-size: 12px;
    color: var(--color-star-muted);
}



/* ================================================================ */
/* ===== Search Product Card Button w/ Slide-In Icon on Hover ===== */
.search-product-card__button,
.search-product-card__button .button,
.search-product-card__button .alt,
.search-product-card__button .add_to_cart_button,
.search-product-card__button .single_add_to_cart_button {
  
  position: relative !important;
  overflow: hidden !important; 
  width: max-content !important;
  display: inline-flex !important;
  align-items: center !important; 
  justify-content: flex-start !important;  
  gap: 0.4rem !important;

  /* Core Styling */
  padding: 0.3rem 1.4rem 0.4rem !important;
  font-size: 1.7rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  background-color: var(--color-accent-primary) !important;
  color: white !important;
  border: none !important;
  text-transform: unset !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  -webkit-font-smoothing: antialiased !important;

  vertical-align: middle !important;
  transition: padding-right 0.3s ease !important;
}

.search-product-card__button .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
  right: 2.2rem;
  top: 50%;
  pointer-events: none;
}

.search-product-card__button:hover {
  padding-right: 4rem;
  background-color: var(--color-accent-primary);
}

.search-product-card__button:hover .btn-icon {
  transform: translateY(-50%) translateX(12px);
  opacity: 1;
}

/* ============================================================ */
/* ===== Add to Cart Button – Success Checkmark (Search Page) ===== */
.search-product-card__button.add_to_cart_button.added-success {
  background-color: var(--color-accent-primary) !important;
}

.search-product-card__button.add_to_cart_button.added-success .btn-icon {
  display: none;
}

.btn-checkmark {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  opacity: 0;
  transform: translateX(-4px);
  animation: fadeInCheck 0.3s ease forwards;
}

@keyframes fadeInCheck {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ===== Hide Woo Elements in Search Result Cards ===== */
.search-product-card .quantity,
.search-product-card .quantity.customized,
.search-product-card table.variations,
.search-product-card p.stock.in-stock {
  display: none !important;
}


.search-product-card p.stock {
  font-size: 1.7rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: white !important;
  border: none !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ===== Fix WooCommerce Form Spacing in Search Product Cards
.search-product-card form.cart {
  padding: 0 !important;
  margin: 0 !important;
  display: contents !important; 
} ===== */
.search-product-card form.cart {
  all: unset !important;
  display: contents !important; /*  Allow inner elements to behave normally */
}
.search-product-card__button.oxy-product-cart-button {
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

/* padding: 0.3rem 1.4rem 0.4rem !important; */







/* ===== Victoria, Moster Studios ===== */
/* ===== Klaviyo Newsletter Style ===== */
#div_block-780-66367 {}
/* Left Column */

/* Klaviyo CTA WRAPPER*/
#div_block-767-66367 {
  display: flex;
  flex-direction: row;         /* "Horizontal" layout */
  align-items: flex-start;     /* "Top" vertical alignment */
  justify-content: center;     /* "Center" horizontal alignment */
  width: 90%;
  gap: 0px;                    /* or leave it out since it's the default */
  flex-wrap: nowrap;           /* "Allow multiline" is OFF */
}

/* ===== Columns ===== */
#new_columns-778-66367 {
  width: 90%;
  display: flex;
  flex-wrap: nowrap;
}
/* ===== Left ===== */
#div_block-779-66367 {
  width: 33.33%;
  flex-shrink: 0; /* optional: prevents auto-shrinking */
}
/* ===== Right ===== */
#div_block-780-66367 {
  width: 66.66%;
}


#Klaviyo-Code-Block__Wrapper {
  width: 100%;
  max-width: 100rem;
  margin-top: 0rem;
  align-items: center;
  padding-left: 2.4rem;
}
/* ===== CTA Text Wrapper ===== */
#div_block-775-66367 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  text-align: right; /* ✅ Add this */
 /* align-items:  center;*/
 /* padding-right: 2.4rem;*/
}

#text_block-769-66367 strong {
  position: relative;
  /* top: -5px; /* tweak this as needed */
  marging-top: 5px;
}

/* ===== Klaviyo Sign Up To Our Newsletter ===== */
#text_block-769-66367 {
  text-align: right;
  width: 100%; 
  
}


/*#text_block-769-66367 {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
}
#text_block-769-66367 strong {
  font-size: clamp(2.4rem, 3vw, 3.2rem);
}*/

#text_block-769-66367 {
  font-size: clamp(1.7rem, 1.6vw, 2.4rem);
}

#text_block-769-66367 strong {
  font-size: clamp(2.1rem, 2.3vw, 3.2rem);
}



.mak-newsletter {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap; /* ✅ keep elements on the same line */
  align-items: center;
 /* max-width: 80rem; */
 /* width: auto;*/
}

/* ===== Klaviyo Input Email Style ===== */
.mak-newsletter input[type="email"] {
  font-size: 1.6rem;
  padding: 1rem 1.6rem;
  border-radius: 12px;
  border: 1px solid var(--color-border-input); /* or #ccc */
  font-family: 'Outfit', sans-serif;
  flex: 1;
  min-width: 0; /* override any shrinking restrictions *//* min-width: 29rem; it was min-width: 240px; */
/*  max-width: 29rem; */
  height: 4.4rem; /* ADDED ON */
}
 /* Klaviyo Newsletter Button Hover Animation */
 form.mak-newsletter input[type="email"]:focus {
   box-shadow: 0 0 0 1px var(--color-accent-primary) inset !important;
   outline: none !important;
   border: 1px solid var(--color-accent-primary) !important;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ===== Klaviyo Placeholder Style ===== */
.mak-newsletter input::placeholder {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted);
  opacity: 1;
  font-style: normal; /* Optional */
  -webkit-font-smoothing: antialiased !important;
}

/* ===== Klaviyo Input Text ===== */
.mak-newsletter input[type="email"] {
  color: var(--color-text-primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 400; /* Optional */
}


/* ===== Klaviyo Button Wrapper ===== */
.mak-newsletter__button-wrapper {
  width: auto;               /* allow natural growth */
  min-width: 32rem;          /* guarantees animation room */
  padding: 0 1.5rem;         /* ✅ space left and right of wrapper */
  display: flex;
  justify-content: center;
}

/* ===== Klaviyo Button ===== */
.mak-newsletter__button {
    width: 100%;
  /* max-width: 24rem; */
    background-color: var(--color-accent-primary) /* #e8a83a */ !important;
    color: white;
    padding: 0.2rem 1.2rem !important;
    font-size: 1.7rem !important;
    border-radius: 999px;
    border: 2px solid var(--color-accent-primary) /* #e8a83a */ !important;
    text-decoration: none;
    display: inline-block;
    font-family: 'Outfit';
    font-weight: 500 !important;
    text-transform: unset;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
    transition: all 0.8s ease-in-out !important;
    cursor: pointer !important;
}
 /* Klaviyo Newsletter Button Hover Animation */
  .mak-newsletter__button:hover  {
    width: 80%;
    
  }
@media (max-width: 1024px) {
  /* Klaviyo CTA WRAPPER
  #div_block-767-66367 {
    width: 90%; 
  }*/
  
#div_block-767-66367 {  
  width: 100%; 
    
}
  /* ===== Columns ===== */
  #new_columns-778-66367 {
    width: 95%;
  }
  .mak-newsletter input[type="email"] {
    min-width: 0; 
   /* min-width: 29rem; */
  }
  .mak-newsletter__button-wrapper {
    min-width: 24rem; 
  }
  /* ===== CTA Text Wrapper ===== */
  #div_block-775-66367 {
    margin-right: 2rem;

    display: flex;
    justify-content: flex-end;
    width: 100%; /* Ensure it spans the parent */
  }  
}

@media (max-width: 992px) {
  .mak-newsletter {
    display: flex;        /* 🛠️ Restore horizontal layout */
    flex-wrap: wrap;      /* ✅ Allow wrapping if needed */
    gap: 1rem;
    align-items: center;
  }
 /* Email-Button Wrapper */ 
  #div_block-780-66367 {
     margin-top: auto; /* pushes this div to bottom if parent is column flex */
}
  /* ===== Columns ===== */
  #new_columns-778-66367 {
    width: 100%;
  }
 /* #Klaviyo-Code-Block__Wrapper {
  padding-left: 2rem;
}*/

    /* ===== DOING NOTHING SO FAR ===== */
  #Klaviyo-Code-Block__Wrapper {
    width: 100%;
    max-width: 100rem;
    margin-top: 0rem;
    align-items: center;
    padding-left: 2rem;
  }

}

@media (max-width: 780px) {
    /* ===== Left ===== */
  #div_block-779-66367 {
    width: 28%;
    flex-shrink: 0; /* optional: prevents auto-shrinking */
  }
  /* ===== Right ===== */
  #div_block-780-66367 {
    width: 72%;
  }
   #text_block-769-66367 {
  margin-bottom: -0.4rem; /* fine-tune with negative margin */
     line-height: 1;
  }
  
}

@media (max-width: 540px) {
  /* ===== Columns ===== */
  #new_columns-778-66367 {
    display: flex !important;
    flex-direction: column !important;
  }

  #div_block-779-66367,
  #div_block-780-66367 {
    width: 100% !important;
  }

    #div_block-767-66367 {
        width: 90%;
    }
  
   form.mak-newsletter {
    flex-direction: column;
    align-items: stretch; /* ensures full width */
    gap: 1.6rem; /* optional vertical spacing */
  }

  .mak-newsletter input[type="email"],
  .mak-newsletter__button-wrapper {
    width: 100%;
  }

  .mak-newsletter__button-wrapper {
    min-width: unset; /* removes forced width */
    padding: 0;        /* remove horizontal padding */
  }

  .mak-newsletter__button {
    width: 100%;
  }

  #Klaviyo-Code-Block__Wrapper {
    margin-top: 1.2rem;
    padding-left: 0rem;
  }
}

@media (max-width: 480 px) {
 
} /* ====== Victoria, Monster Studios ====== */
/* ====== 404 - Page Not Found Styling ====== */

/*
#page404-SearchContainer .aws-container {
  border: 5px solid red !important;
}
*/

/* ============================================ */
/* ====== AWS Search Form Styling on 404 ====== */
/* ============================================ */

body.error404 .aws-container .aws-search-label {
}
/*
#404-Page__Search #modal-3058-19 {
  width: 100%;
  position: absolute;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: 72rem;
  border-radius: 14px !important;
  height: auto;
}*/

#page404-SearchContainer {
  width: 100%;
  max-width: 60rem;
  padding: 2rem;
}


#page404-SearchContainer .aws-container {
  border-radius: 8px !important;
  border: 1px solid var(--color-border-input);
  overflow: hidden;
}

#page404-SearchContainer .aws-container .aws-search-form {
  background: white;
  height: auto;
}

/* ====== Text when Written ====== */
#page404-SearchContainer .aws-container .aws-search-field {
  color: var(--color-text-primary);
  border: none;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: normal;
  padding: 16px 40px 16px 12px;
  -webkit-font-smoothing: antialiased;
}

/* ====== Placeholder Text ====== */
#page404-SearchContainer .aws-search-field::placeholder {
  color: var(--color-text-subtle);
  font-size: 1.6rem;
  font-weight: 400;
  opacity: 1;
  padding-left: 2rem;
  -webkit-font-smoothing: antialiased;
}

.woocommerce input.aws-search-field[type="search"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

#page404-SearchContainer .aws-container .aws-search-form .aws-form-btn {
  background: white;
  border: none;
}

#page404-SearchContainer .aws-container .aws-search-form .aws-search-btn_icon {
  display: inline-block;
  fill: currentColor;
  height: 17px;
  line-height: 17px;
  position: relative;
  width: 42px;
  color: var(--color-text-primary);
}

#page404-SearchContainer span.aws-search-btn_icon svg {
  display: none !important;
}

#page404-SearchContainer .aws-search-btn_icon {
  display: inline-block;
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/06/MAK_Search_1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#page404-SearchContainer .aws-container .aws-search-form .aws-search-clear {
  display: none !important;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  color: var(--color-text-subtle);
  height: 100%;
  width: 38px;
  padding: 0 0 0 10px;
  text-align: left;
}





/* =================================================== */
/* ====== CODE FROM DEV TOOLS - DROPDOWN SEARCH ====== */
/* ========= Scoped to #404-Page__Search ============= */

#page404-SearchContainer .aws-search-result {
  position: absolute;
  text-align: left;
  z-index: 9999999999999;
  background: #fff;
  width: 100%;
  margin-top: 30px; /* == IT WAS -1px == */
  border: 1px solid white;
  font-size: 12px;
  line-height: 16px;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-radius: 14px !important;
  
}

#page404-SearchContainer .aws-search-result ul {  
}

#page404-SearchContainer .aws-search-result ul li {
  list-style: none;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  margin: 0 0.8rem !important;
  position: relative;
}

#page404-SearchContainer .aws_result_item.hovered {
  background-color: #f9f9f9;
}

#page404-SearchContainer .aws-search-result .aws_result_link {
  display: block;
  cursor: pointer;
  padding: 10px 8px;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  border: 0;
}

#page404-SearchContainer .aws-search-result .aws_result_item .aws_result_link_top {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  text-indent: -9999px;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  outline: 0;
  text-decoration: none;
}

#page404-SearchContainer .aws-search-result .aws_result_title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 3px;
  color: var(--color-accent-secondary);
}

#page404-SearchContainer .aws-search-result .aws_result_image {
  display: block;
  height: 100%;
  float: left;
  padding: 0 10px 0 0;
}

#page404-SearchContainer .aws-search-result .aws_result_image img {
  width: 64px;
  height: 64px;
  border-radius: 6px !important;
}

#page404-SearchContainer .aws-search-result .aws_result_excerpt {
  display: block;
  font-weight: 400;
  color: var(--color-text-primary);
}

#page404-SearchContainer .aws_result_price .woocommerce-Price-amount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary);
}

#page404-SearchContainer .aws-search-result .aws_result_price {
  padding: 8px 0 0;
}

#page404-SearchContainer .aws-search-result .aws_search_more a {
  line-height: 40px;
  display: block;
  text-decoration: none;
  border: 0;
  text-align: center;
  color: var(--color-accent-secondary);
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* Victoria - Monster Studios */

/* Main Footer */

/* ========================== */
/* ===== Footer Section ===== */
/* ========================== */

#footer {
  background-color:  var(--color-bg-medium); /* --color-bg-medium: #262729 */
  width: 100%; 
  display: flex;
  flex-direction: column; /* = "Vertical" layout */
  align-items: center;    /* = "Center" alignment */
}
/* ===== Link Home Icon ===== */
/* Show on mobile (up to 991px) */
@media (max-width: 1280px) {
  #footer {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* ============================== */
/* ===== Footer Nav Heading ===== */
/* ============================== */

.footer__heading {
  font-size: 2.2rem;
  font-weight: 400 !important;
  color: var(--color-white-muted); /* rgba(255, 255, 255, 0.85) */
  margin-bottom: 0.5em;
  text-transform: none;
  font-family: 'Outfit', sans-serif;
  -webkit-font-smoothing: antialiased;
}


/* ===================================== */
/* ===== Footer Nav Contact  Heading ===== */
/* ===================================== */
.footer__contact-heading {
  font-size: 1.4rem;
  font-weight: 400 !important;
  color: var(--color-white-muted);  /* rgba(255, 255, 255, 0.85) */
 /* margin-bottom: 0.5em;*/
  text-transform: none;
  font-family: 'Outfit', sans-serif;
   -webkit-font-smoothing: antialiased;
  
}


/* ============================ */
/* ===== Footer Nav Links ===== */
/* ============================ */

/* ===== Footer Link Hover Underline Effect ===== */
.footer__link-wrapper {
  position: relative; /* Required for ::after positioning */
  text-decoration: none; /* Ensure no default underline */
  -webkit-font-smoothing: antialiased;
  color: var(--color-white-muted); /* rgba(255, 255, 255, 0.85) */
  display: inline-block; /* Shrinks to fit text only */
  
/*  color: var(--color-text-primary);
  transition: color 0.35s ease-in-out;  */
}

/* .footer__link-wrapper:hover {
  color: var(--color-accent-secondary);
} */

.footer__link-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjusts underline position */
  width: 0%;
  height: 1px;
  background-color: var(--color-white-subtle); /* rgba(255, 255, 255, 0.6) */
  transition: width 0.35s ease-in-out;
}

.footer__link-wrapper:hover::after {
  width: 100%;
}

/* ===== TEMP: Limit Footer Link Wrapper Columns to Content Width ===== */
#div_block-2175-19,
#div_block-2176-19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 👈 Prevent full-width stretch */
 /*  gap: 1rem;               Optional: vertical space between links */
  width: fit-content;      /* 👈 Shrinks to match content */
}



/* ===================================== */
/* ===== Footer Klaviyo Newsletter ===== */
/* ===================================== */

#code_block-3168-19 {
  width: 100%; 
}

/* ===== Newsletter Form Wrapper (Optional if needed later) ===== */
.mak-footer-newsletter__form {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* ensures full width */
  gap: 1rem;
  margin-bottom: 1em;   /* Spacing below the form */
  width: 100%;           
}

/* ===== Email Input Field ===== */
.mak-footer-newsletter__input {
  background-color: #ffffff !important;                /* white background */
  border: 1px solid var(--color-white-subtle) !important; /* rgba(255, 255, 255, 0.6) */
  border-radius: 2px !important;                       /* subtle corner rounding */
  padding: 1rem 1rem !important;                     /* internal spacing */
  width: 100% !important;                              /* full width */
  font-size: 1.3rem!important;
  font-weight: 400 !important;/* match placeholder font size */
  font-family: inherit !important;                      /* match site/global font */
  color: var(--color-text-primary) !important;
  transition: border-color 0.6s ease-out !important;   /* smooth focus transition */
  margin-bottom: 2rem !important;
 /*  flex: 1; ✅ Stretch input to fill remaining space */
}


body .mak-footer-newsletter__input [type="email"] {
  all: unset !important;
  
}

.mak-footer-newsletter__input:focus {
   box-shadow: 0 0 0 1px var(--color-accent-primary) inset !important;
   outline: none !important;
   border: 1px solid var(--color-accent-primary) !important;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ===== Footer Newsletter Placeholder Text ===== */
.mak-footer-newsletter__input::placeholder {
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-muted); /* rgba(68, 68, 68, 0.55) text color matches placeholder */
}

/* ===== Button Wrapper (Optional – used for layout control) ===== */
.mak-footer-newsletter__button-wrapper {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left; /* Based on image */
  margin-bottom: 2em;  
}

/* ===== Submit Button ===== */

body .mak-footer-newsletter__button[type="submit"] {
  all: unset !important;
  background: transparent !important;/* Or customize later */
 /* border: none; */
  color: var(--color-white-muted) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.8rem !important;
  width: 100% !important;
 /* padding: 0.5em 1.2em; */
  padding: 0.4rem 0.5rem 0.3rem !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background-color 0.3s ease !important;
  letter-spacing: 0.5px !important;
   -webkit-font-smoothing: antialiased !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  /*  -moz-osx-font-smoothing: grayscale; */  
  border: 1px solid var(--color-white-muted) !important; /* rgba(255, 255, 255, 0.85) */
  border-radius: 2px !important;
}

body .mak-footer-newsletter__button[type="submit"]:hover {
  background-color: var(--color-accent-primary) !important;
  border: 1px solid  var(--color-accent-primary) !important;
}


/* ==================================================== */
/* ===== Hover Underline on Specific Footer Spans ===== */
/* ==================================================== */
#span-589-19,
#span-590-19,
#span-591-19 {
  display: inline-block;      /* so it doesn’t stretch full width */
  position: relative;         /* so the ::after can position itself */
}

#span-589-19::after,
#span-590-19::after,
#span-591-19::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--color-white-subtle); /* rgba(255, 255, 255, 0.6) */
  transition: width 0.35s ease-in-out;
}

#span-589-19:hover::after,
#span-590-19:hover::after,
#span-591-19:hover::after {
  width: 100%;
}




/* Victoria, Monster Studios */

/* Contact Us WPForms */



/* ========== CART SECTION ========== */
#section-contact-us {
  max-width: 128rem;
}

/* ========== CART TITLE ========== */
#contact-us-title {
    margin-top: 6rem;
    margin-bottom: 1em;
    font-family: 'outfit';
    font-weight: 600;
    font-size: 4.8rem;
    color: var(--color-text-primary); 
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  #contact-us-title {
  font-size: 4rem;
 }
}

@media (max-width: 540px) {
  #contact-us-title {
   margin-bottom: 0.75em;
 }
}


/* ===== Underline on Hover for Social Text Only ===== */
body.page-contact-us .footer__link-wrapper a {
  position: relative; /* Required for ::after positioning */
  text-decoration: none; /* Ensure no default underline */
  -webkit-font-smoothing: antialiased;
  color:  var(--color-text-primary);
  line-height: 1.3;

  display: inline-block; /* 👈 Shrinks to fit text only */
  opacity: 1;
}

body.page-contact-us .footer__link-wrapper a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjusts underline position */
  width: 0%;
  height: 1px;
  background-color: var(--color-text-primary);
  transition: width 0.35s ease-in-out;
   opacity: 1;
}

body.page-contact-us .footer__link-wrapper a:hover::after {
  width: 100%;
}

/* ========================== */
/* ===== ERROR MESSAGES ===== */
/* ========================== */

/* ===== WPForms Validation Error: Remove Red Shadow ===== */
input.wpforms-field.wpforms-error,
textarea.wpforms-field.wpforms-error,
select.wpforms-field.wpforms-error'
.wpforms-field.wpforms-error {
  box-shadow: none !important;
  outline: none !important;
}
/* ===== WPForms: Remove red box-shadow on error hover ===== */
div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error:hover {
  box-shadow: none !important;
  outline: none !important;
}

div.wpforms-container-full .wpforms-form em.wpforms-error {
  padding-left: 2rem !important;
}


/* ========================== */
/* ===== INPUT & LABELS ===== */
/* ========================== */

.wpforms-field-label .wpforms-required-label {
  color: var(--color-accent-secondary) !important;
  font-weight: 600 !important;
}


/* ===== WPForms Email Field Full Width ===== */
div.wpforms-field-email,
#wpforms-66631-field_2-container {
  width: 100% !important;
}

/* #wpforms-66631-field_2 {
  width: 100% !important;
  box-sizing: border-box; Ensures padding doesn't break layout 
}*/

/* ===== Contact Page: Make WPForms Fields Full Width
body.contact .wpforms-container input.wpforms-field-medium,
body.contact .wpforms-container select.wpforms-field-medium,
body.contact .wpforms-container textarea.wpforms-field-medium {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
} ===== */


/* ===== WPForms Email ===== */
.wpforms-container input.wpforms-field-medium {
  max-width: 100% !important; 
}

/* ===== WPForms Inputs Name and Email ===== */
div.wpforms-container-full input {
  max-width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 4rem 1.6rem 1.6rem !important;
}
/* ===== Remove Blue Native Focus Outline ===== */
div.wpforms-container-full input:focus {
  outline: none !important;
  box-shadow: none !important;
}


/* ===== WPForms Input Written Text ===== */
.wpforms-container input[type=text] {
 /* color: red !important; */
}

/* ===== WPForms Input Name 
#wpforms-66631-field_1 {
 background-color: yellow !important; 
  width: 100% ; 
} ===== */

/* === Name Field (Input) === */
#wpforms-66631-field_1 {
  color: var(--color-text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
}

/* === Email Field (Input) === */
#wpforms-66631-field_2 {
  color: var(--color-text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
}

/* === Notes Field (Textarea) === */
#wpforms-66631-field_3 {
  color: var(--color-text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
}

/* ===== WPForms Input Last DISPLAY NONE  ===== */
#wpforms-66631-field_1-last {
  border: none !important;
  display: none !important;
}


.wpforms-container .wpforms-field .wpforms-field-row .wpforms-one-half {
   width: 100% !important;
}

/* ===== WPForms Text Area ===== */
div.wpforms-container-full .wpforms-form textarea {
  border: none !important;
  padding-top: 2rem !important;
 /* min-height: 30rem !important; */  
}
/* ===== Remove Blue Native Focus Outline ===== */
div.wpforms-container-full .wpforms-form textarea input:focus {
  outline: none !important;
  box-shadow: none !important;
}

#wpforms-66631-field_3:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ========================= */  /* == 🟪 🟪 🟪 🟪 🟪 == */
/* ===== BUTTON SUBMIT ===== */
/* ========================= */ 

/* ===== WPForms Button Not Active ===== :not(:hover):not(:active)*/
div.wpforms-container-full button[type=submit] {
  background-color: var(--color-accent-primary) !important;
  
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100% !important;
  background: var(--color-accent-primary) !important;
  color: white;
  padding: 0.2rem 1.2rem !important;
  font-size: 1.7rem !important;
  border-radius: 999px !important;
  border: 2px solid var(--color-accent-primary) !important;
  font-family: 'Outfit', sans-serif  !important;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.8s ease-in-out !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: unset !important;
  line-height: 1.2 !important;
  height: auto !important;
}

div.wpforms-container-full button[type=submit]:hover {
  background: var(--color-accent-primary) !important;
  border-color: var(--color-accent-primary) !important;
  width: 80% !important;
  opacity: 1 !important;
}
  
/* ================================= */  /* == 🟪 🟪 🟪 🟪 🟪 == */
/* ===== FOLATING LABELS HACK  ===== */
/* ================================= */ 

/* ===== EMAIL Floating Label for WPForms Email Field (Contact Us) ===== */
#wpforms-66631-field_2-container {
  border-radius: 12px !important;
  border: 1px solid var(--color-border-input);
  margin-bottom: 2rem !important;
  
  position: relative;
  padding-top: 1.6rem; /* Create space above input for label */
}

#wpforms-66631-field_2-container label {
   position: absolute;
    left: 12px;
    top: 8px;
    font-size: 1.3rem;
    transition: top 0.2s ease-out;
    pointer-events: none; 
    z-index: 2;
    background-color: white !important;
    padding: 0 4px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-text-primary) !important;
}

#wpforms-66631-field_2-container:focus-within label {
  top: -1rem;
}

/* ===== Highlight Border on Focus (Input Inside) ===== */
#wpforms-66631-field_2-container:has(input:focus, select:focus, textarea:focus),
#wpforms-66631-field_2-container:has(input:focus, select:focus, textarea:focus) {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1.5px var(--color-accent-primary);
}

/* ===== NAME Floating Label for WPForms Name Field (Contact Us) ===== */
#wpforms-66631-field_1-container  {
  border-radius: 12px !important;
  border: 1px solid var(--color-border-input);
  margin-bottom: 2rem !important;
  
  position: relative;
  padding-top: 2.6rem; /* Create space above input for label */
}

#wpforms-66631-field_1-container legend {
   position: absolute;
    left: 12px;
    top: 8px;
    font-size: 1.3rem;
    transition: top 0.2s ease-out;
    pointer-events: none; 
    z-index: 2;
    background-color: white !important;
    padding: 0 4px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-text-primary) !important;
}

#wpforms-66631-field_1-container:focus-within legend {
  top: -1rem;
}

/* ===== Highlight Border on Focus (Input Inside) ===== */
#wpforms-66631-field_1-container:has(input:focus, select:focus, textarea:focus),
#wpforms-66631-field_1-container:has(input:focus, select:focus, textarea:focus) {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1.5px var(--color-accent-primary);
}


/* ===== NOTES Floating Label for WPForms Note Field (Contact Us) ===== */
#wpforms-66631-field_3-container  {
  border-radius: 12px !important;
  border: 1px solid var(--color-border-input);
  margin-bottom: 2rem !important;
  
  position: relative;
  padding-top: 1.6rem; /* Create space above input for label */
}

#wpforms-66631-field_3-container label{
   position: absolute;
    left: 12px;
    top: 8px;
    font-size: 1.3rem;
    transition: top 0.2s ease-out;
    pointer-events: none; 
    z-index: 2;
    background-color: #ffffff !important;
    padding: 0 4px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--color-text-primary) !important;
}

#wpforms-66631-field_3-container:focus-within label {
  top: -1rem;
}

/* ===== Highlight Border on Focus (Input Inside) ===== */
#wpforms-66631-field_3-container:has(input:focus, select:focus, textarea:focus),
#wpforms-66631-field_3-container:has(input:focus, select:focus, textarea:focus) {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1.5px var(--color-accent-primary);
}

/* legend.wpforms-field-label {
      z-index: 9999 !important;
} */



/* ==== Name Container  FAKE as INPUT 
#wpforms-66631-field_1-container {
  border-radius: 12px !important;
  border: 1px solid var(--color-border-input) !important;
  margin-bottom: 2rem !important;
} ==== */

/* ==== "First"  Label Below name Container ==== */
div.wpforms-container-full .wpforms-field-sublabel {
  display: none !important;
}

/* ================================== */
/* ===== WPForms Autofill Reset ===== */
/* ================================== */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/* =========================================== */
/* ===== Global Autofill Reset & Styling ===== */
/* =========================================== */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  transition: background-color 5000s ease-in-out 0s !important;
}


/* =========================================== */
/* ===== Left Column ===== */
/* =========================================== */

#div_block-8-66629 {
  border-left: 1px solid var(--color-border-divider);
}

/* ===== Contact - Left Links Styling ===== */
#link-23-66629,
#link-28-66629,
#link-69-66629,
#link-74-66629 {
  font-weight: 400;
  color:  var(--color-text-primary);
  position: relative; /* Required for ::after */
  -webkit-font-smoothing: initial;
  transition: color 0.35s ease-in-out;
  text-decoration: none; /* Remove default underline */
  -webkit-font-smoothing: initial;
}

/* ===== Contact - Underline Hover Effect ===== */
#link-23-66629::after,
#link-28-66629::after,
#link-69-66629::after,
#link-74-66629::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* 👈 Moves line slightly below the text baseline */
  width: 0%;
  height: 1px;
  background-color: var(--color-text-primary);
  transition: width 0.35s ease-in-out;
}

#link-23-66629:hover::after,
#link-28-66629:hover::after,
#link-69-66629:hover::after,
#link-74-66629:hover::after {
  width: 100%;
}

.dropdown-links a:hover {
  transform: scale(1.1);
}
/* ===== Victoria, Monster STudios ===== */

/* ========================================= */
/* ===== Banner Journey Section Styles ===== */
/* ========================================= */


#banner-journey.lazy-background.is-loaded  {
  --bg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Journey-v2-1800x446-1.jpg');
}/* ===== Banner Journey Lazy Load Fix ===== */
#banner-journey.lazy-background:not(.is-loaded) {
  background-image: none !important;
}

/* Ensure the loaded image shows */
#banner-journey.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Journey-v2-1800x446-1.jpg') !important;
}

/* If you're using the --bg CSS variable instead of background-image, also add this */
#banner-journey.lazy-background.is-loaded {
  --bg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Journey-v2-1800x446-1.jpg') !important;
}


/* ===== Desktop Default (≥ 1281px) ===== */
#banner-journey {
  background-position: center top; /* or center top, or 27% center, etc */
}

/* ===== Tablet (≤ 1280px) ===== */
@media (max-width: 1280px) {
  #banner-journey {
    background-position: center center;
  }
}

/* ===== Mobile Large (≤ 780px) ===== */
@media (max-width: 780px) {
  #banner-journey {
    background-position: center center;
  }
}

/* ===== Mobile Small (≤ 540px) ===== */
@media (max-width: 540px) {
  #banner-journey {
    background-position: 27% center;  /* ✅ your example works now */
  }
}
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 480px) {
  #banner-journey {
  }
  #text_journey-fix {
    margin-right: -1rem;
  }   
} 


/* ====================================== */
/* ===== Banner Team Section Styles ===== */
/* ====================================== */

/* ===== Banner Team Lazy Load Fix ===== */
#banner-team.lazy-background:not(.is-loaded) {
  background-image: none !important;
}

/* Ensure the loaded image shows */
#banner-team.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Native-v2-1800x446-1.jpg') !important;
}

/* If you're using the --bg CSS variable instead of background-image, also add this */
#banner-team.lazy-background.is-loaded {
  --bg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Native-v2-1800x446-1.jpg') !important;
}

/* ===== Desktop Default (≥ 1281px) ===== */
#banner-team {
  background-position: right center; /* or center top, or 27% center, etc */
}


/* ===== Mobile Small (≤ 540px) ===== */
@media (max-width: 540px) {
  #banner-team {
    background-position: 60% center;  /* ✅ your example works now */
  }
}
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 480px) {
  #banner-team {
  }   
} 


/* ================================================ */
/* ===== Banner Sustainability Section Styles ===== */
/* ================================================ */

/* ===== Banner Sustainability Lazy Load Fix ===== */
#banner-sustainability.lazy-background:not(.is-loaded) {
  background-image: none !important;
}

/* Ensure the loaded image shows */
#banner-sustainability.lazy-background.is-loaded {
  background-image: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Sustainability-v3-1800x446-1.jpg') !important;
}

/* If you're using the --bg CSS variable instead of background-image, also add this */
#banner-sustainability.lazy-background.is-loaded {
  --bg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Fg-Sustainability-v3-1800x446-1.jpg') !important;
}


/* ===== Desktop Default (≥ 1281px) ===== */
#banner-sustainability{
  background-position: right center; /* or center top, or 27% center, etc */
}


/* ===== Mobile Small (≤ 540px) ===== */
@media (max-width: 540px) {
  #banner-sustainability {
    background-position: 60% center;  /* ✅ your example works now */
  }
}
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 480px) {
  #banner-sustainability {
  }
  #text_sustainability-fix {
    letter-spacing: 0.2em;
  }
} 


/* ========================================= */
/* ===== Banner Mission Section Styles ===== */
/* ========================================= */

#banner-mission {
  --bg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Kava-v1-1800x446-1.jpg');
  --fg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Front-Kava-1800x446-1.png');
}


/* ===== Desktop Default (≥ 1281px) ===== */
#banner-mission .mak-banner__fg {
  background: var(--fg) right calc(100% + 20px) / cover no-repeat;
}

/* ===== 1280px and below ===== */
@media (max-width: 1280px) {
  #banner-mission .mak-banner__fg {
    background: var(--fg) right calc(100% + 1px) / cover no-repeat;
  }
}

/* ===== 1040px and below ===== */
@media (max-width: 1040px) {
  #banner-mission .mak-banner__fg {
    background: var(--fg) calc(100% + 40px) calc(100% + 1px) / cover no-repeat;
  }
}

/* ===== 992px and below ===== */
@media (max-width: 992px) {
  #banner-mission .mak-banner__fg {
    background: var(--fg) right bottom / cover no-repeat;
    background-size: 130% auto;
  }
}

/* ===== 768px and below ===== */
@media (max-width: 768px) {
  #banner-mission .mak-banner__fg {
    background: var(--fg) calc(100% + 30px) bottom / cover no-repeat;
    background-size: 135% auto;
  }
}

/* ===== 540px and below ===== */
@media (max-width: 540px) {
  #banner-mission .mak-banner__fg {
    background: var(--fg) calc(100% + 70px) bottom / cover no-repeat;
    background-size: 155% auto;
  }
}

/* ===== 480px and below ===== */
@media (max-width: 480px) {
  #banner-mission .mak-banner__fg {
    /* add overrides here if needed */
  }
  #text_mission-fix {
    margin-right: -1rem;
  }   
}


/* ======================================================= */
/* ===== Home CTA Product (Lazy Graphic Background) ===== */
/* ===== Home CTA Grid ===== */
/* ===== Default Layout (≥ 540px) ===== */

#section-about-us-cta-2 {
  margin-top: 0rem; 
  margin-bottom: 6rem;
  padding-top: 3rem;
}
  
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 1280px) {
    #section-about-us-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
  }
} 


/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 1040px) {
  #section-about-us-cta-2{
    margin-top: 0rem; 
    margin-bottom: 4rem;
    padding: 3rem 3rem 6rem 9rem;
  }
} 
/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 992px) {
    #section-about-us-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 2rem 3rem 0rem 6rem;
  }
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 768px) {
    #section-about-us-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 0rem 3rem 0rem 6rem;
  } 
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 540px) {
    #section-about-us-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem;
    padding: 4rem 2rem;
  } 
} 

/* ===== Mobile Layout (≤ 540px) ===== */
@media (max-width: 480px) {
    #section-about-us-cta-2 {
    margin-top: 0rem; 
    margin-bottom: 6rem; 
    padding: 4rem 2rem;
  }
}

/* ======================================================= */
/* ===== Home CTA Product (Lazy Graphic Background) ===== */
/* ======================================================= */
#home-cta__sale-product {
  background-image: url('https://staging3.makkratom.com/wp-content/uploads/2025/08/cta-graphics-2-430x300-1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px;
  width: 100%;
  height: 24rem; /* or set a fixed height if needed */
  margin-top: -3rem;
}

@media (max-width: 540px) {
#home-cta__sale-product {
  margin-top: 0rem;  
}
}

/* ===== Button Wrapper (Max Width + Center) ===== */
#button-generic-wrapper-about-us-cta-sale-2 {
  width: 100%;
  max-width: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/* ===== Button Link Wrapper (Max Width + Hover Width) ===== */
#button-generic-link-wrapper-about-us-cta-sale-2 {
  max-width: 40rem;
  width: 100%;
}

#button-generic-link-wrapper-about-us-cta-sale-2:hover {
  width: 80%;
}


/* ========================================================== */
/* ===== MAK Kratom Privacy Policy - Terms & Conditions ===== */
/* ========================================================== */
#div_block-2049-66363 {
    border-top-style: solid;
    border-top-color: var(--color-border-divider);
    border-top-width: 1px
}


/* ========================================================== */
/* ===== MAK Kratom Privacy Policy - Terms & Conditions ===== */
/* ========================================================== */
/* ===== Generic Banner Wrapper ===== */
.mak-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 180rem;

  min-height: 30rem; /* adjust */
  border-radius: 1.8rem;
  margin-bottom: 9rem;
  overflow: hidden;
  padding: 5.6rem 6%;                /* breathing room */

  /* CSS variables */
  --bg: none;
  --fg: none;

  background: var(--bg) center/cover no-repeat;
}

/* ===== Banner Inner Wrapper ===== */
.mak-banner__inner {
  position: relative;
  z-index: 2;                   /* above fg */
  display: flex;
  flex-direction: column;  /* stack children vertically */
 /*  justify-content: flex-end; default left */
  align-items: flex-end;   /* push them to the right */
  height: 100%;
  width: 100%;      /* fill parent for vertical centering */
}

.mak-banner__inner--left {
  align-items: flex-start;   /* push them to the right */
}

.mak-banner__inner--right {  /* NOT IN USE YET */
  align-items: flex-end; 
}


/* ===== Foreground Layer ===== */
.mak-banner__fg {
  position: absolute;
  inset: 0;                 /* shorthand for top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;

  /* default foreground background */
  background: var(--fg) right calc(100% + 20px) / cover no-repeat;
}

/* ===== Banner Title ===== */
.mak-banner__title {
  position: relative;           /* stays in normal flow inside inner */
  z-index: 2;                   /* ensure it sits above foreground */
  font-family: 'Outfit', sans-serif;
  font-size: 4.8rem;            /* adjust */
  font-weight: 400;
  color: #ffffff80;
  letter-spacing: 0.5em;/* white text by default */
  text-align: right;
  margin: 0;
  text-transform: uppercase;/* reset heading default margin */
  -webkit-font-smoothing: antialiased;
}

/* Mission Banner */


/* Mission Banner */
#banner-legalise {
  --bg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Bg-Kava-v1-1800x446-1.jpg');
  --fg: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/Banner_Front-Kava-1800x446-1.png');
}

/* Legalise Banner – add logo layer */
#banner-legalise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3; /* above fg */
  background: url('https://staging1.makkratom.com/wp-content/uploads/2025/08/mak-logo.png')
              center center / 180px auto no-repeat; /* size tweak */
  pointer-events: none;
}

 #banner-legalise .mak-banner__logo {
   padding-right: 9rem;
 }



/* ============================================= */
/* ===== Responsive Foreground Adjustments ===== */
/* ============================================= */

  .mak-banner__fg {
     background: var(--fg) right calc(100% + 20px) / cover no-repeat;
  }

/* 1280px and below */
@media (max-width: 1280px) {
  .mak-banner__fg {
     background: var(--fg) right calc(100% + 1px) / cover no-repeat;
  }
  .mak-banner__title {
    font-size: 4rem;     
  }
}

/* 1040px and below */
@media (max-width: 1040px) {
    .mak-banner {
    min-height: 28rem; /* adjust */
  }
  .mak-banner__fg {
    background: var(--fg) calc(100% + 40px) calc(100% + 1px) / cover no-repeat;
  }
}

/* 992px and below */
@media (max-width: 992px) {
  .mak-banner {
    min-height: 24rem; /* adjust */
    margin-bottom: 6rem;
  }
  .mak-banner__fg {
    background: var(--fg) right bottom / cover no-repeat;
    background-size: 130% auto;   
  }
}

/* 768px and below */
@media (max-width: 768px) {
  .mak-banner__fg {
    background: var(--fg) calc(100% + 30px) bottom / cover no-repeat;
    background-size: 135% auto; 
  }
}

/* 540px and below */
@media (max-width: 540px) {
  .mak-banner {
    min-height: 20rem; /* adjust */
  }
    .mak-banner__title {
    font-size: 3.2rem;     
  }
  .mak-banner__fg {
    background: var(--fg) calc(100% + 70px) bottom / cover no-repeat;
    background-size: 155% auto; 
  }
}

/* 480px and below */
@media (max-width: 480px) {
  .mak-banner {
    min-height: 20rem; /* adjust */
    margin-bottom: 4rem;

  .mak-banner__fg {
    /* adjustments go here */
  }
}