/*
 * Ecolap Eco-Tech Custom Styles
 * TailwindCSS overrides and custom classes
 */

/* ========================================
   BASE STYLES
   ======================================== */

/* NUKE: Target HTML as well */
html,
body {
    background-color: #02120b !important;
    color: #f3f4f6 !important;
    font-family: 'Rajdhani', sans-serif !important;
    min-height: 100vh;
    margin: 0;
}

/* NUCLEAR OVERRIDE: Force Storefront containers to be transparent */
.site,
.site-header,
.site-content,
.col-full,
#page,
#content,
.content-area,
.entry-content,
.entry-header,
.widget,
.footer-widgets,
.site-footer {
    background-color: transparent !important;
    background: transparent !important;
}

/* Force dark header */
.site-header {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
}

/* Selection styling */
::selection {
    background-color: #00ff9d;
    color: #000;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #02120b;
}

::-webkit-scrollbar-thumb {
    background: #00ff9d;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00cc7d;
}

/* ========================================
   CIRCUIT PATTERN BACKGROUND
   ======================================== */

.bg-circuit {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30' fill='none' stroke='%2300ff9d' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M70 70 L90 70 L90 90' fill='none' stroke='%2300ff9d' stroke-width='1' opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%2300ff9d' opacity='0.2'/%3E%3C/svg%3E");
}

/* ========================================
   GLOW EFFECTS
   ======================================== */

.text-glow {
    text-shadow: 0 0 12px rgba(0, 255, 157, 0.6);
}

.border-glow {
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.15), inset 0 0 15px rgba(0, 255, 157, 0.05);
}

.shadow-neon {
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.27), 0 0 30px rgba(0, 255, 157, 0.13);
}

.shadow-neon-sm {
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.4);
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: 'Orbitron', sans-serif !important;
}

/* ========================================
   HEADER STYLES
   ======================================== */

.site-header .site-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-header .site-title a,
.site-header .site-title {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.site-header .site-title a:hover {
    color: #00ff9d !important;
}

/* Navigation */
.main-navigation ul li a,
.storefront-primary-navigation ul li a {
    color: #9ca3af !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.main-navigation ul li a:hover,
.storefront-primary-navigation ul li a:hover,
.main-navigation ul li.current-menu-item>a {
    color: #00ff9d !important;
}

/* Cart icon */
.site-header-cart .cart-contents {
    color: #00ff9d !important;
}

/* ========================================
   PRODUCT GRID LAYOUT FIX
   ======================================== */

/* Override Storefront's float-based grid with CSS Grid */
ul.products,
.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Reset float styles that break the grid */
ul.products li.product,
.products .product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
}

/* Product title - ensure it doesn't break */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h3,
.products .product .woocommerce-loop-product__title,
.products .product h3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    min-height: auto !important;
}

/* Add to cart button - keep inline and prevent overflow */
ul.products li.product .button,
.products .product .button,
ul.products li.product .add_to_cart_button {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: inline-block !important;
}

/* Fix for the product content container */
ul.products li.product>a,
.products .product>a {
    display: block !important;
}

/* Align product text to the left */
ul.products li.product,
.products .product {
    text-align: left !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h3,
.products .product .woocommerce-loop-product__title,
.products .product h3,
ul.products li.product .price,
.products .product .price {
    text-align: left !important;
}

/* Square product images - Force square aspect ratio on all screens */
ul.products li.product img,
.products .product img,
ul.products li.product .product-image,
.products .product .product-image {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Product image container - ensure it maintains square shape */
ul.products li.product .aspect-square,
.products .product .aspect-square,
ul.products li.product .product-image-container,
.products .product .product-image-container,
ul.products li.product a>img:first-child,
.products .product a>img:first-child {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

ul.products li.product .aspect-square img,
.products .product .aspect-square img,
ul.products li.product .product-image-container img,
.products .product .product-image-container img,
ul.products li.product a>img:first-child,
.products .product a>img:first-child {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Tailwind aspect-square support */
.aspect-square {
    aspect-ratio: 1 / 1 !important;
}

/* Mobile specific - ensure square images on small screens */
@media (max-width: 768px) {

    ul.products li.product img,
    .products .product img,
    ul.products li.product .product-image,
    .products .product .product-image {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    ul.products li.product .aspect-square,
    .products .product .aspect-square,
    ul.products li.product .product-image-container,
    .products .product .product-image-container {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* ========================================
   PRODUCT CARD STYLES
   ======================================== */

.products .product,
ul.products li.product {
    background-color: rgb(30, 78, 62) !important;
    border: 1px solid rgba(0, 255, 157, 0.1) !important;
    border-radius: 0.5rem !important;
    /* Slightly more rounded for premium feel */
    padding: 1.5rem !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.products .product:hover,
ul.products li.product:hover {
    border-color: #00ff9d !important;
    box-shadow: 0 20px 40px rgba(0, 255, 157, 0.15), 0 0 100px rgba(0, 255, 157, 0.05);
    transform: translateY(-8px) scale(1.02);
}

.products .product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700;
    color: #0f172a !important;
    /* Dark Slate for contrast */
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
}

/* Description text on light card */
.products .product p,
ul.products li.product p {
    color: #4b5563 !important;
    /* Gray-600 */
    line-height: 1.5 !important;
}

body .products .product .price,
body .products .product .price span,
body .products .product .price bdi,
body ul.products li.product .price,
body ul.products li.product .price span,
body ul.products li.product .price bdi,
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
    color: #059669 !important;
    /* Deep Emerald for readability on white */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-weight: 600 !important;
    /* Slightly bolder for presence */
    font-size: 1.35rem !important;
    /* Slightly larger */
}

.products .product img,
ul.products li.product img {
    border-radius: 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
}

.products .product:hover img,
ul.products li.product:hover img {
    transform: scale(1.05);
}



/* ========================================
   PAGE TITLES
   ======================================== */

.woocommerce-products-header__title,
.page-title,
.entry-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Gradient text for shop title */
.woocommerce-products-header__title {
    background: linear-gradient(to right, #00ff9d, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.site-footer {
    background-color: #000 !important;
    border-top: 1px solid rgba(0, 255, 157, 0.2) !important;
    color: #9ca3af !important;
}

.site-footer a {
    color: #9ca3af !important;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #00ff9d !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ========================================
   BUTTONS AND FORMS
   ======================================== */

button,
input[type="button"],
input[type="submit"],
.button,
.wp-block-button__link {
    background-color: #00ff9d !important;
    color: #000 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700;
    font-size: 1.1rem !important;
    /* Slightly larger for readability */
    border: none !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: #00cc7d !important;
    transform: scale(1.02);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    color: rgb(168, 255, 221) !important;
    border-radius: 0.5rem !important;
    font-family: 'Rajdhani', sans-serif !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #00ff9d !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.4) !important;
}

/* ========================================
   THEME GUIDE: COLORS
   ========================================
   Primary Brand (Neon): #00ff9d
   Action/Secondary (Forest): rgb(30, 78, 62)
   Background: #02120b
   ======================================== */

/* Add to cart button (IMPORTANT ACTION) - MOVED HERE FOR PRECEDENCE */
.products .product .button,
ul.products li.product .button,
.add_to_cart_button,
.single_add_to_cart_button {
    background-color: rgb(30, 78, 62) !important;
    /* ACTION COLOR */
    color: #00ff9d !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700;
    font-size: 1.1rem !important;
    /* Slightly larger for readability */
    border: 1px solid #00ff9d !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.4));

}

.products .product .button:hover,
ul.products li.product .button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
    color: #ffffff !important;
    background-color: #00ff9d9d !important;
    border: 1px solid #ffffff !important;
    filter: drop-shadow(0 0 15px rgba(0, 255, 157, 0.644));
    /* Darker Orange */
    transform: scale(1.02);

}

/* ========================================
   WOOCOMMERCE SPECIFIC
   ======================================== */

/* Breadcrumbs */
.woocommerce-breadcrumb {
    color: #6b7280 !important;
    font-family: 'Rajdhani', sans-serif !important;
}

.woocommerce-breadcrumb a {
    color: #00ff9d !important;
}

/* Sale badge */
.onsale {
    background-color: #00ff9d !important;
    color: #000 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700;
    border-radius: 0.5rem !important;
}

/* Star rating */
.star-rating span::before {
    color: #00ff9d !important;
}

/* Quantity input */
.quantity .qty {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    color: #fff !important;
}

/* Tabs on single product */
.woocommerce-tabs .tabs li a {
    color: #9ca3af !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600;
}

.woocommerce-tabs .tabs li.active a {
    color: #00ff9d !important;
    border-bottom-color: #00ff9d !important;
}

/* [SHOP-SELECTS] Shop ordering dropdown & native selects */
.woocommerce-ordering select,
.storefront-sorting select,
.woocommerce select {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 0.5rem !important;
    color: #a8ffdd !important;
    font-family: 'Rajdhani', sans-serif !important;
    padding: 0.75rem 2rem 0.75rem 0.75rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ff9d' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-ordering select:hover,
.storefront-sorting select:hover,
.woocommerce select:hover {
    border-color: rgba(0, 255, 157, 0.4) !important;
}

.woocommerce-ordering select:focus,
.storefront-sorting select:focus,
.woocommerce select:focus {
    border-color: #00ff9d !important;
    box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.15) !important;
    outline: none !important;
}

/* Native <option> elements (limited CSS support in browsers) */
.woocommerce-ordering select option,
.storefront-sorting select option,
.woocommerce select option {
    background-color: #02120b !important;
    color: #d1d5db !important;
    padding: 0.5rem !important;
}

.woocommerce-ordering select option:checked,
.storefront-sorting select option:checked,
.woocommerce select option:checked {
    background-color: rgba(0, 255, 157, 0.2) !important;
    color: #00ff9d !important;
}

/* Cart and checkout containers (not body-level .woocommerce-checkout) */
.woocommerce-cart-form,
.cart_totals {
    background-color: rgba(5, 46, 31, 0.3) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
}

.cart_totals th,
.cart_totals td {
    color: #fff !important;
}

/* Messages */
.woocommerce-message,
.woocommerce-info {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border-left-color: #00ff9d !important;
    color: #fff !important;
}

.woocommerce-error {
    background-color: rgba(127, 29, 29, 0.5) !important;
    border-left-color: #ef4444 !important;
    color: #fff !important;
}

/* ========================================
   SIDEBAR WIDGETS
   ======================================== */

.widget,
.storefront-handheld-footer-bar {
    background-color: rgba(5, 46, 31, 0.3) !important;
    border: 1px solid rgba(0, 255, 157, 0.1) !important;
    border-radius: 1rem;
    padding: 1.5rem;
}

.widget-title {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(0, 255, 157, 0.2);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.widget a {
    color: #9ca3af !important;
}

.widget a:hover {
    color: #00ff9d !important;
}

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

.menu-toggle {
    background-color: transparent !important;
    border: 2px solid rgba(0, 255, 157, 0.3) !important;
    border-radius: 0.5rem !important;
}

.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span::before {
    background-color: #00ff9d !important;
}

/* ========================================
   LINKS AND GENERAL
   ======================================== */

a {
    color: #00ff9d;
    transition: color 0.3s ease;
}

a:hover {
    color: #00cc7d;
}

/* Remove default Storefront colors */
.site-content,
.content-area,
#content {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Fix for col-full wrapper */
.col-full {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Page content */
.type-page .entry-content,
.type-post .entry-content {
    color: #d1d5db;
}

/* Storefront specific overrides */
.storefront-breadcrumb {
    background-color: transparent !important;
    padding: 1em 0;
}

/* ========================================
   MINI CART DROPDOWN STYLES
   ======================================== */

/* Mini cart container */
.site-header-cart .widget_shopping_cart,
.widget_shopping_cart {
    background-color: #02120b !important;
    border: 1px solid rgba(0, 255, 157, 0.3) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 157, 0.1) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Product list container */
.widget_shopping_cart .product_list_widget {
    background-color: transparent !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
}

/* Product items */
.widget_shopping_cart .product_list_widget li,
.widget_shopping_cart .woocommerce-mini-cart-item {
    border-bottom: 1px solid rgba(0, 255, 157, 0.1) !important;
    padding: 1rem 1.25rem !important;
    background-color: transparent !important;
}

.widget_shopping_cart .product_list_widget li:last-child,
.widget_shopping_cart .woocommerce-mini-cart-item:last-child {
    border-bottom: none !important;
}

/* Product name link */
.widget_shopping_cart .product_list_widget li a:not(.remove),
.widget_shopping_cart .woocommerce-mini-cart-item a:not(.remove) {
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.widget_shopping_cart .product_list_widget li a:not(.remove):hover,
.widget_shopping_cart .woocommerce-mini-cart-item a:not(.remove):hover {
    color: #00ff9d !important;
}

/* Product quantity and price */
.widget_shopping_cart .quantity,
.widget_shopping_cart .woocommerce-Price-amount {
    color: #00ff9d !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 500 !important;
}

/* Remove button (X) */
.widget_shopping_cart .remove,
.widget_shopping_cart a.remove {
    color: #ef4444 !important;
    font-size: 1.25rem !important;
    opacity: 0.7;
    transition: opacity 0.3s ease !important;
}

.widget_shopping_cart .remove:hover,
.widget_shopping_cart a.remove:hover {
    opacity: 1 !important;
    background-color: transparent !important;
    color: #ef4444 !important;
}

/* Product images */
.widget_shopping_cart .product_list_widget li img,
.widget_shopping_cart .woocommerce-mini-cart-item img {
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
}

/* Subtotal section */
.widget_shopping_cart .total,
.widget_shopping_cart p.total {
    background-color: rgba(0, 255, 157, 0.05) !important;
    border-top: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-bottom: none !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
}

.widget_shopping_cart .total strong,
.widget_shopping_cart p.total strong {
    color: #fff !important;
}

.widget_shopping_cart .total .woocommerce-Price-amount,
.widget_shopping_cart p.total .woocommerce-Price-amount {
    color: #00ff9d !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 500 !important;
}

/* Buttons container */
.widget_shopping_cart .buttons,
.widget_shopping_cart p.buttons {
    background-color: rgba(0, 0, 0, 0.3) !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    border-top: 1px solid rgba(0, 255, 157, 0.1) !important;
}

/* Mini cart buttons - Outline style with glow */
.widget_shopping_cart .buttons a.button,
.widget_shopping_cart p.buttons a.button,
.widget_shopping_cart .button,
.woocommerce-mini-cart__buttons a.button {
    background-color: transparent !important;
    color: #00ff9d !important;
    border: 2px solid #00ff9d !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.2), inset 0 0 15px rgba(0, 255, 157, 0.05) !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.widget_shopping_cart .buttons a.button:hover,
.widget_shopping_cart p.buttons a.button:hover,
.widget_shopping_cart .button:hover,
.woocommerce-mini-cart__buttons a.button:hover {
    background-color: rgba(0, 255, 157, 0.1) !important;
    box-shadow: 0 0 25px rgba(0, 255, 157, 0.4), inset 0 0 20px rgba(0, 255, 157, 0.1) !important;
    transform: scale(1.02) !important;
    color: #00ff9d !important;
}

/* Checkout button - Slightly different styling (solid background on hover) */
.widget_shopping_cart .buttons a.button.checkout,
.widget_shopping_cart p.buttons a.button.checkout,
.woocommerce-mini-cart__buttons a.button.checkout {
    border-color: #00ff9d !important;
}

.widget_shopping_cart .buttons a.button.checkout:hover,
.widget_shopping_cart p.buttons a.button.checkout:hover,
.woocommerce-mini-cart__buttons a.button.checkout:hover {
    background-color: #00ff9d !important;
    color: #000 !important;
}

/* Empty cart message */
.widget_shopping_cart .woocommerce-mini-cart__empty-message,
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
    color: #9ca3af !important;
    padding: 2rem !important;
    text-align: center !important;
    font-family: 'Rajdhani', sans-serif !important;
}

/* ========================================
   ECOLAP HERO SHORTCODE STYLES
   ======================================== */

.ecolap-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    /* Changed from center to allow padding control */
    justify-content: center;
    overflow: hidden;
    background-color: #02120b;
    margin: 0;
    padding: 0;
    /* Full-width: break out of container */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: none;
    /* Fill viewport minus header height - !important to override any inline styles */
    min-height: calc(100vh - 70px) !important;
    min-height: calc(100dvh - 70px) !important;
}

/* Mobile/Tablet: restar header (70px) + bottom nav (70px) = 140px total */
@media (max-width: 1099px) {
    .ecolap-hero {
        min-height: calc(100vh - 140px) !important;
        min-height: calc(100dvh - 140px) !important;
        flex-direction: column;
        justify-content: flex-start;
    }
}

/* Ensure parent containers don't limit hero height */
.wp-block-shortcode:has(.ecolap-hero),
.entry-content:has(.ecolap-hero) {
    max-height: none !important;
    overflow: visible !important;
}

/* Remove site-content margin/padding when hero is present */
.site-content:has(.ecolap-hero) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Also target article/main content wrappers */
.site-main:has(.ecolap-hero),
.hentry:has(.ecolap-hero),
.type-page:has(.ecolap-hero) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove colophon/footer margin when hero is present */
body:has(.ecolap-hero) .colophon,
body:has(.ecolap-hero) .site-footer,
body:has(.ecolap-hero) .storefront-footer-bar {
    margin-top: 0 !important;
}

/* Remove #content padding when hero is present */
body:has(.ecolap-hero) #content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove header margin when hero is present */
body:has(.ecolap-hero) .site-header,
body:has(.ecolap-hero) header {
    margin-bottom: 0 !important;
}

/* Hide page title when hero is present */
body:has(.ecolap-hero) .entry-header,
body:has(.ecolap-hero) .page-title,
body:has(.ecolap-hero) .entry-title {
    display: none !important;
}

/* Remove #primary margin when hero is present */
body:has(.ecolap-hero) #primary {
    margin-bottom: 0 !important;
}

/* Position edit-link absolutely so it doesn't take space */
body:has(.ecolap-hero) .edit-link,
body:has(.ecolap-hero) .post-edit-link {
    position: absolute !important;
    top: 10px;
    right: 10px;
    z-index: 100;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dark overlay with stronger top/bottom vignette */
.ecolap-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(2, 18, 11, 1) 0%,
            rgba(2, 18, 11, 0.2) 20%,
            rgba(2, 18, 11, 0) 50%,
            rgba(2, 18, 11, 0.2) 80%,
            rgba(2, 18, 11, 1) 100%);
    z-index: 1;
}

/* Circuit pattern background - Smooth edges */
.ecolap-hero-circuit {
    position: absolute;
    inset: -50px;
    background-image:
        linear-gradient(90deg, rgba(0, 255, 157, 0.15) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 255, 157, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 6;
    /* Arriba de la laptop (z-5) pero debajo del texto (z-10) */
    opacity: 0.8;
    pointer-events: none;
    mix-blend-mode: screen;
    /* Modo de mezcla para que brille sobre la laptop */
    /* Fade out at top and bottom edges - Smoother transition */
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%);
}

/* Cinematic Flare Effect */
.ecolap-hero-flare {
    position: absolute;
    top: 50%;
    left: -100%;
    /* Start off-screen */
    width: 200%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 255, 157, 0.1) 30%,
            rgba(0, 255, 157, 0.8) 45%,
            #ffffff 50%,
            rgba(0, 255, 157, 0.8) 55%,
            rgba(0, 255, 157, 0.1) 70%,
            transparent 100%);
    z-index: 15;
    pointer-events: none;
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
    box-shadow: 0 0 100px 5px rgba(0, 255, 157, 0.5);
}

.ecolap-hero-flare::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 50px 10px #00ff9d, 0 0 100px 20px rgba(0, 255, 157, 0.6);
    filter: blur(2px);
    opacity: 0.8;
}

/* Animated glow at the bottom */
.ecolap-hero-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #00ff9d, transparent);
    box-shadow:
        0 0 60px rgba(0, 255, 157, 0.6),
        0 0 120px rgba(0, 255, 157, 0.4),
        0 0 180px rgba(0, 255, 157, 0.2);
    z-index: 5;
    animation: heroGlowPulse 3s ease-in-out infinite;
}

@keyframes heroGlowPulse {

    0%,
    100% {
        opacity: 0.6;
        box-shadow:
            0 0 40px rgba(0, 255, 157, 0.4),
            0 0 80px rgba(0, 255, 157, 0.2);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 80px rgba(0, 255, 157, 0.8),
            0 0 160px rgba(0, 255, 157, 0.4);
    }
}

/* Content container */
.ecolap-hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding-top: 22rem !important;
    /* Force extreme spacing */
    padding-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1000px;
    width: 100%;
    /* Permitir que los eventos táctiles pasen al canvas 3D debajo */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Re-habilitar eventos en elementos interactivos */
.ecolap-hero-content a,
.ecolap-hero-content button,
.ecolap-hero-button {
    pointer-events: auto;
}

/* Hero Title - Single Layer with text-shadow glow */
.ecolap-hero-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(4.5rem, 12vw, 7.5rem);
    /* Increased size */
    font-weight: 900;
    line-height: 1.1;
    color: #00ff9d;
    margin: 0 0 1.5rem 0;
    padding-top: 5rem;
    /* Added padding top */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
}

@media (max-width: 767px) {
    .ecolap-hero-title {
        padding-top: 1.5rem;
        /* Reduced padding for mobile */
    }
}

/* Single layer character styles with text-shadow glow */
.ecolap-hero-char {
    display: inline-block;
    color: #00ff9d;
    will-change: transform, opacity, text-shadow;
    /* GSAP will animate the text-shadow for the glow effect */
}

/* Word wrapper - prevents words from breaking */
.ecolap-hero-word {
    display: inline-block;
    white-space: nowrap;
}

/* Space between words */
.ecolap-hero-space {
    display: inline-block;
    width: 0.3em;
}

@keyframes heroTitleShimmer {

    0%,
    100% {
        text-shadow:
            0 0 10px rgba(0, 255, 157, 0.8),
            0 0 20px rgba(0, 255, 157, 0.4);
    }

    50% {
        text-shadow:
            0 0 20px rgba(0, 255, 157, 1),
            0 0 40px rgba(0, 255, 157, 0.6),
            0 0 60px rgba(0, 255, 157, 0.4);
    }
}

/* Hero Subtitle - Terminal Typewriter Style */
.ecolap-hero-subtitle {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-weight: 400;
    color: rgba(0, 255, 157, 0.9);
    margin: 0 0 2.5rem 0;
    line-height: 1.6;
    max-width: 600px;
    letter-spacing: 0.02em;
}

/* Typewriter cursor - thick block style */
.ecolap-typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1.2em;
    background-color: #00ff9d;
    margin-left: 3px;
    vertical-align: text-bottom;
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* Only blink when active */
.ecolap-typewriter-active .ecolap-typewriter-cursor {
    opacity: 1;
    animation: cursorBlink 0.8s infinite;
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* Typewriter text */
.ecolap-typewriter-text {
    color: rgba(0, 255, 157, 0.9);
}

.ecolap-hero-content.text-center .ecolap-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* Hero Button - Outline with glow */
.ecolap-hero-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #00ff9d !important;
    background: transparent;
    border: 2px solid #00ff9d;
    border-radius: 0.75rem;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 0 20px rgba(0, 255, 157, 0.3),
        inset 0 0 20px rgba(0, 255, 157, 0.05);
    position: relative;
    overflow: hidden;
}

.ecolap-hero-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 157, 0.1) 0%, transparent 50%, rgba(0, 255, 157, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ecolap-hero-button:hover {
    background: rgba(0, 255, 157, 0.15);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 40px rgba(0, 255, 157, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(0, 255, 157, 0.1);
    color: #00ff9d !important;
}

.ecolap-hero-button:hover::before {
    opacity: 1;
}

.ecolap-hero-button .material-symbols-outlined {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.ecolap-hero-button:hover .material-symbols-outlined {
    transform: translateX(5px);
}

/* Alignment classes */
.ecolap-hero-content.text-left {
    text-align: left;
    align-items: flex-start;
}

.ecolap-hero-content.text-right {
    text-align: right;
    align-items: flex-end;
}

.ecolap-hero-content.text-center {
    text-align: center;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ecolap-hero-content {
        padding: 3rem 1.5rem;
    }

    .ecolap-hero-title {
        margin-bottom: 1rem;
    }

    .ecolap-hero-subtitle {
        margin-bottom: 2rem;
    }

    .ecolap-hero-button {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }

    .ecolap-hero-glow {
        width: 90%;
    }
}

/* Remove default Gutenberg spacing when used in FSE */
.wp-block-shortcode .ecolap-hero {
    margin-top: -2rem;
    margin-bottom: -2rem;
}

/* ========================================
   GSAP ANIMATION INITIAL STATES
   ======================================== */

/* Circuit grid - ready for infinite animation */
.ecolap-hero-circuit {
    background-position: 0 0;
    will-change: background-position, transform;
}

/* Character wrapper for letter animation */
.ecolap-hero-char {
    display: inline-block;
    will-change: transform, opacity;
}

/* Prevent layout shift during animation */
.ecolap-hero-title {
    min-height: 1.2em;
}

/* Subtitle initial state (set by GSAP, this is fallback) */
.ecolap-hero-subtitle {
    will-change: transform, opacity, filter;
}

/* Button initial state */
.ecolap-hero-button {
    will-change: transform, opacity, box-shadow;
}

/* Glow line - remove CSS animation when GSAP takes over */
.ecolap-hero-glow {
    will-change: transform, box-shadow, background;
}

/* Smooth parallax container */
.ecolap-hero {
    perspective: 1000px;
}

/* 3D Laptop Container - Positioned to the left */
#ecolap-hero-3d-container {
    position: absolute;
    top: 0;
    left: 0;
    /* Move laptop to the left */
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: auto;
}

/* ========================================
   HERO CATEGORIES SIDEBAR - MARQUEE STYLE
   ======================================== */

/* Main layout wrapper: Laptop + Categories side by side on desktop */
.ecolap-hero-main-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    /* Above 3D container (5) but below content (10) */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through to 3D */
}

/* Re-enable pointer events on the categories */
.ecolap-hero-categories {
    pointer-events: auto;
}

/* Categories Navigation Container - Fixed to viewport */
.ecolap-hero-categories {
    position: absolute;
    bottom: 2%;
    left: 50% !important;
    right: auto;
    width: 100vw !important;
    transform: translateX(-50%);
    margin: 0 !important;
    max-width: none !important;
    max-height: none;
    overflow: hidden;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    z-index: 20;
}

/* Fade effect at left and right edges */
.ecolap-hero-categories::before,
.ecolap-hero-categories::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 10;
    pointer-events: none;
}

.ecolap-hero-categories::before {
    left: 0;
    background: linear-gradient(to right, rgba(2, 18, 11, 1), transparent);
}

.ecolap-hero-categories::after {
    right: 0;
    background: linear-gradient(to left, rgba(2, 18, 11, 1), transparent);
}

/* Category List - Horizontal animated marquee */
.ecolap-cat-list {
    list-style: none;
    margin: 0 auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2rem;
    animation: marqueeScrollHorizontal 30s linear infinite;
    width: max-content;
    justify-content: flex-start;
    /* Start from left for seamless loop */
}

/* Pause animation on hover/touch */
.ecolap-hero-categories:hover .ecolap-cat-list,
.ecolap-hero-categories:focus-within .ecolap-cat-list {
    animation-play-state: paused;
}

@keyframes marqueeScrollHorizontal {
    100% {
        transform: translateX(calc(-100% / 4));
    }
}

/* Category Item */
.ecolap-cat-item {
    margin-bottom: 0;
    border-radius: 0.5rem;
    transition: background 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Category Link */
.ecolap-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.ecolap-cat-link:hover,
.ecolap-cat-link:focus,
.ecolap-cat-link:active {
    color: #00ff9d !important;
    background: rgba(0, 255, 157, 0.1);
    border: none;
    outline: none;
}

/* Arrow Icon */
.ecolap-cat-arrow {
    font-size: 1.25rem;
    color: rgba(0, 255, 157, 0.6);
    transition: transform 0.3s ease, color 0.3s ease;
}

.ecolap-cat-item.has-children:hover .ecolap-cat-arrow,
.ecolap-cat-item.is-open .ecolap-cat-arrow {
    color: #00ff9d;
}

.ecolap-cat-item.is-open .ecolap-cat-arrow {
    transform: rotate(180deg);
}

/* Sub-category List - Inline with parent */
.ecolap-subcat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Sub-category Item */
.ecolap-subcat-item {
    margin: 0;
    display: flex;
    align-items: center;
}

/* Separator before subcats */
.ecolap-subcat-item::before {
    content: '>';
    color: #00ff9d;
    margin-right: 0.5rem;
    font-weight: 700;
}

/* Sub-category Link */
.ecolap-subcat-link {
    display: inline-block;
    padding: 0.5rem 0.5rem;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 500;
    font-size: 1.25rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border-left: none;
    margin-left: 0;
    white-space: nowrap;
}

.ecolap-subcat-link:hover {
    color: #00ff9d !important;
}

/* ========================================
   HERO CATEGORIES - RESPONSIVE
   ======================================== */

/* Mobile: Categories above laptop - horizontal marquee */
@media (max-width: 1099px) {

    /* Center laptop on mobile */
    #ecolap-hero-3d-container {
        left: 0;
    }

    .ecolap-hero-main-layout {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 1rem;
    }

    .ecolap-hero-categories {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: none;
        height: auto;
        margin-top: auto;
        /* Push to bottom of flex container if height permits */
        margin-bottom: 1rem;
        padding: 1rem 0;
        z-index: 20;
        /* Remove container styling on mobile */
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Remove vertical fade on mobile */
    .ecolap-hero-categories::before,
    .ecolap-hero-categories::after {
        display: none;
    }

    /* Horizontal marquee on mobile */
    .ecolap-cat-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        justify-content: center;
        padding: 0.5rem 1rem;
        animation: marqueeScrollHorizontal 20s linear infinite;
    }

    .ecolap-hero-categories:hover .ecolap-cat-list,
    .ecolap-hero-categories:focus-within .ecolap-cat-list {
        animation-play-state: paused;
    }

    @keyframes marqueeScrollHorizontal {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .ecolap-cat-item {
        margin-bottom: 0;
        flex: 0 0 auto;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Remove borders on mobile */
    .ecolap-cat-link {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
        border: none !important;
        background: transparent !important;
    }

    .ecolap-cat-link:hover {
        border: none !important;
        background: transparent !important;
    }

    /* Sub-categories inline on mobile (Parent > Child) */
    .ecolap-cat-item.has-children {
        position: static;
        flex-direction: row;
        align-items: center;
    }

    .ecolap-subcat-list {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        transform: none;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: auto;
        z-index: auto;
        box-shadow: none;
        max-height: none;
    }

    /* Separator between parent and children */
    .ecolap-cat-item.has-children .ecolap-cat-link::after {
        content: '>';
        margin-left: 0.5rem;
        color: rgba(0, 255, 157, 0.5);
    }

    .ecolap-subcat-link {
        margin-left: 0;
        border-left: none;
        padding: 0.25rem 0.5rem;
        text-align: left;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .ecolap-subcat-link:hover {
        padding-left: 0.5rem;
        color: #00ff9d !important;
    }
}

/* Large Desktop: More space */
@media (min-width: 1400px) {
    .ecolap-hero-categories {
        right: 8%;
        width: 320px;
        max-height: 400px;
    }

    .ecolap-cat-link {
        font-size: 1.1rem;
        padding: 0.875rem 1.25rem;
    }
}

/* ========================================
   MY ACCOUNT PAGE FIXES
   ======================================== */

/* Fix for fieldset background usually found in "Change Password" or address forms */
fieldset {
    background-color: transparent !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    min-width: 0 !important;
}

legend {
    color: #fff !important;
    font-family: 'Orbitron', sans-serif !important;
    padding: 0 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.2rem !important;
    background-color: #02120b !important;
    /* Match body bg to cover border line if needed */
    border-radius: 0.25rem !important;
}

/* Fix for standard WP password inputs wrapper */
.woocommerce-EditAccountForm fieldset {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Password visibility toggle button fix */
.woocommerce-password-strength {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
    font-weight: 600 !important;
}

.woocommerce-password-strength.short {
    color: #ef4444 !important;
}

.woocommerce-password-strength.bad {
    color: #f59e0b !important;
}

.woocommerce-password-strength.good {
    color: #3b82f6 !important;
}

.woocommerce-password-strength.strong {
    color: #00ff9d !important;
}

/* Eye icon container/button if present */
.show-password-input,
.woocommerce-form-row .password-input-toggle {
    color: #00ff9d !important;
    cursor: pointer !important;
}

/* ========================================
   SELECT2 CUSTOM STYLES (WOOCOMMERCE)
   ======================================== */

/* Force overrides with higher specificity */
body .select2-container .select2-selection--single,
body .select2-container .select2-selection--multiple {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 0.5rem !important;
    height: auto !important;
    min-height: 40px !important;
    outline: none !important;
    padding: 0.25rem 0.5rem !important;
}

/* Text color inside the box */
body .select2-container .select2-selection--single .select2-selection__rendered {
    color: #a8ffdd !important;
    /* Light green for contrast */
    line-height: 2.2rem !important;
    font-family: 'Rajdhani', sans-serif !important;
    padding-left: 0.5rem !important;
}

/* Arrow */
body .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.5rem !important;
}

body .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #00ff9d transparent transparent transparent !important;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    margin-top: -2px !important;
}

/* Open Dropdown Arrow */
body .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #00ff9d transparent !important;
    border-width: 0 4px 5px 4px;
}

/* Dropdown Container */
body .select2-dropdown {
    background-color: #02120b !important;
    border: 1px solid #00ff9d !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
}

/* Search Box inside dropdown */
body .select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 255, 157, 0.3) !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
    font-family: 'Rajdhani', sans-serif !important;
    padding: 0.5rem !important;
}

/* Results Options */
body .select2-results__option {
    color: #d1d5db !important;
    padding: 0.5rem 1rem !important;
    font-family: 'Rajdhani', sans-serif !important;
    background-color: transparent !important;
}

/* Highlighted Option (Hover) */
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #00ff9d !important;
    color: #000 !important;
}

/* Selected Option */
body .select2-container--default .select2-results__option[aria-selected=true],
body .select2-container--default .select2-results__option[data-selected=true] {
    background-color: rgba(0, 255, 157, 0.2) !important;
    color: #fff !important;
}

/* Fix input form elements background too */
body .input-text,
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body textarea,
body select {
    background-color: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    color: #a8ffdd !important;
    border-radius: 0.5rem !important;
}

/* =========================================
   WooCommerce Cart Page Customizations
   ========================================= */

/* 1. Layout & Sizing - Bigger Elements & Flex Layout for Row */
table.wc-block-cart-items .wc-block-cart-items__row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 1.5rem !important;
    border-bottom: 1px solid rgba(0, 255, 157, 0.1) !important;
}

table.wc-block-cart-items .wc-block-cart-items__row td {
    display: flex !important;
    align-items: center !important;
    /* Vertical center content within cells */
    border: none !important;
    padding: 1.5rem 0 !important;
}

/* Image Column - Square images in cart */
.wc-block-cart-items__row .wc-block-cart-item__image {
    width: 140px !important;
    /* Even bigger as requested */
    max-width: 140px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

.wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 140px !important;
    height: 140px !important;
    border-radius: 8px;
    /* Soften the look */
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
}

/* Product Info Column - Expand to push quantity right but keep close */
.wc-block-cart-item__product {
    flex-grow: 1 !important;
    width: auto !important;
    padding-right: 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.wc-block-components-product-name,
.wc-block-components-product-name a {
    font-size: 1.4rem !important;
    /* Larger text */
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
    text-decoration: none !important;
    color: #fff !important;
}

/* 2. Quantity Selector - Inline & Styled */
.wc-block-cart-item__quantity {
    width: auto !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
}

.wc-block-components-quantity-selector {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 9999px !important;
    /* Pill shape */
    padding: 0.25rem 0.5rem !important;
    background: rgba(5, 46, 31, 0.8) !important;
    /* Dark Green bg */
    width: auto !important;
    min-width: 120px !important;
    /* Prevent "falling short" */
}

.wc-block-components-quantity-selector__input {
    border: none !important;
    background: transparent !important;
    color: #a8ffdd !important;
    /* Light green text */
    width: 3rem !important;
    text-align: center !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    appearance: none !important;
    -moz-appearance: textfield !important;
}

.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wc-block-components-quantity-selector__button {
    background: transparent !important;
    border: none !important;
    color: #a8ffdd !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0.7;
    transition: all 0.2s;
}

.wc-block-components-quantity-selector__button:hover {
    opacity: 1;
    background: rgba(0, 255, 157, 0.1) !important;
    border-radius: 50%;
}

/* 3. Remove Item Button - Trash Icon Style */
.wc-block-cart-item__remove-link {
    display: block !important;
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin-top: 0.75rem !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.2s !important;
}

.wc-block-cart-item__remove-link:hover {
    color: #ef4444 !important;
    /* Red hover */
    background: transparent !important;
}

.wc-block-cart-item__remove-link svg {
    display: none !important;
    /* Hide default SVG if present */
}

/* Use Icon via Mask */
.wc-block-cart-item__remove-link::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-color: currentColor !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>') no-repeat center !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>') no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

/* 4. Total & Meta */
.wc-block-cart-item__total {
    width: auto !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    min-width: 100px !important;
    text-align: right !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
}

.wc-block-cart-item__prices {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
}

.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
    font-size: 1.4rem !important;
    /* Bigger total */
    font-weight: bold !important;
    color: #a8ffdd !important;
}

/* =========================================
   CART PAGE - HORIZONTAL CARDS LAYOUT
   ========================================= */

/* ========================================
   WOOCOMMERCE CART BLOCK - HORIZONTAL CARDS
   ======================================== */

/* Cart items as vertical stack of horizontal cards */
table.wc-block-cart-items {
    display: block !important;
    border: none !important;
}

table.wc-block-cart-items thead {
    display: none !important;
}

table.wc-block-cart-items tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 !important;
}

/* Individual Horizontal Card - CSS Grid Layout */
/* Grid: 3 columns | 2 rows - Quantity below Product name in middle column */
table.wc-block-cart-items .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 140px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "image product total"
        "image quantity .";
    align-items: stretch !important;
    background: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 1rem !important;
    padding: 0.5rem !important;
    /* Aggressive reduction */
    row-gap: 0.25rem !important;
    /* Tighter row gap */
    column-gap: 0.5rem !important;
    /* Standard col gap */
    /* Tighter gap */
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

table.wc-block-cart-items .wc-block-cart-items__row:hover {
    border-color: rgba(0, 255, 157, 0.4) !important;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1) !important;
}

/* Card cells - reset table behavior */
table.wc-block-cart-items .wc-block-cart-items__row td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
}

/* Image Section - Grid Area: image (spans 2 rows) - Square but matches content height */
.wc-block-cart-items__row .wc-block-cart-item__image {
    grid-area: image !important;
    width: 100% !important;
    /* Fill grid cell width (1fr) */
    height: auto !important;
    /* Let aspect-ratio determine height */
    align-self: start !important;
    /* Prevent vertical stretching, align to top padding */
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

.wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0.75rem !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid rgba(0, 255, 157, 0.15) !important;
}

/* Product Info Section - Grid Area: product (spans 2 rows) */
.wc-block-cart-item__product {
    grid-area: product !important;
    width: 100% !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    min-width: 0 !important;
}

.wc-block-components-product-name,
.wc-block-components-product-name a {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    text-decoration: none !important;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Product Metadata */
.wc-block-cart-item__product .wc-block-components-product-metadata {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 0.25rem !important;
}

/* Price Section - Inline with product name */
.wc-block-cart-item__prices {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #00ff9d !important;
    margin-bottom: 0 !important;
}

/* Total Section - Grid Area: total (row 1, column 3) */
.wc-block-cart-item__total {
    grid-area: total !important;
    width: auto !important;
    min-width: 80px !important;
    text-align: right !important;
    flex-direction: column !important;
    text-align: right !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    align-self: end !important;
    /* Align to bottom */
    margin: 0 !important;
    margin-right: 0.5rem !important;
    /* Move left to avoid corner */
    display: flex !important;
}

.wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-size: 1.25rem !important;
    font-weight: bold !important;
    color: #00ff9d !important;
}

/* Quantity Section - Grid Area: quantity (row 2, column 2 - BELOW product name) */
.wc-block-cart-item__quantity {
    grid-area: quantity !important;
    justify-content: flex-start !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
}

.wc-block-components-quantity-selector {

    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    /* No border */
    border-radius: 9999px !important;
    padding: 0 !important;
    background: rgba(5, 46, 31, 0.8) !important;
    width: auto !important;
    min-width: 110px !important;
}

.wc-block-components-quantity-selector__input {
    border: none !important;
    background: transparent !important;
    color: #00ff9d !important;
    width: 2.5rem !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wc-block-components-quantity-selector__button {
    background: transparent !important;
    border: none !important;
    color: #00ff9d !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    padding: 0.25rem !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: all 0.2s !important;
    border-radius: 50% !important;
}

.wc-block-components-quantity-selector__button:hover {
    opacity: 1 !important;
    background: rgba(0, 255, 157, 0.15) !important;
}

/* Remove Button - Trash Icon (left of quantity via flex-direction: row-reverse) */
.wc-block-cart-item__remove-link {
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: -10px !important;
    /* Pull closer to quantity */
    border-radius: 50% !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0 !important;
    /* Hide text */
    transition: all 0.2s !important;
}

.wc-block-cart-item__remove-link::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-color: currentColor !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>') no-repeat center !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>') no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.wc-block-cart-item__remove-link:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;

}


/* ========================================
   CLASSIC WOOCOMMERCE CART - HORIZONTAL CARDS
   ======================================== */

/* Transform classic cart table into vertical stack of horizontal cards */
.woocommerce-cart-form .shop_table {
    border: none !important;
    background: transparent !important;
}

.woocommerce-cart-form .shop_table thead {
    display: none !important;
}

.woocommerce-cart-form .shop_table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* Classic Cart - CSS Grid Layout */
/* Grid: 3 columns | 2 rows - Quantity below Product name in middle column */
.woocommerce-cart-form .shop_table tr.cart_item,
.woocommerce-cart-form .shop_table tbody tr {
    display: grid !important;
    grid-template-columns: 140px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "image product ."
        "image quantity total";
    align-items: stretch !important;
    background: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 1rem !important;
    padding: 0.5rem !important;
    /* Aggressive reduction */
    row-gap: 0.25rem !important;
    /* Tighter row gap */
    column-gap: 0.5rem !important;
    /* Standard col gap */
    /* Tighter gap */
    transition: all 0.3s ease !important;
    position: relative !important;
}

.woocommerce-cart-form .shop_table tr.cart_item:hover,
.woocommerce-cart-form .shop_table tbody tr:hover {
    border-color: rgba(0, 255, 157, 0.4) !important;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1) !important;
}

/* Reset table cells */
.woocommerce-cart-form .shop_table tr.cart_item td,
.woocommerce-cart-form .shop_table tbody tr td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
}

/* Product thumbnail - Grid Area: image (spans 2 rows) - Square but matches content height */
.woocommerce-cart-form .product-thumbnail {
    grid-area: image !important;
    width: 100% !important;
    height: auto !important;
    align-self: start !important;
    /* Prevent vertical stretching, align to top */
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

.woocommerce-cart-form .product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0.75rem !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid rgba(0, 255, 157, 0.15) !important;
}

/* Product name - Grid Area: product (spans 2 rows) */
.woocommerce-cart-form .product-name {
    grid-area: product !important;
    text-align: left !important;
    min-width: 0 !important;
}

.woocommerce-cart-form .product-name a {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    text-decoration: none !important;
    display: block !important;
}

.woocommerce-cart-form .product-name a:hover {
    color: #00ff9d !important;
}

/* Product price - inline with name */
.woocommerce-cart-form .product-price {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #00ff9d !important;
}

.woocommerce-cart-form .product-price .amount {
    color: #00ff9d !important;
}

/* Product subtotal - Grid Area: total (row 1, column 3) */
.woocommerce-cart-form .product-subtotal {
    grid-area: total !important;
    min-width: 80px !important;
    text-align: right !important;
    align-self: end !important;
    /* Align to bottom */
    margin-right: 0.5rem !important;
    /* Move left to avoid corner */
}

.woocommerce-cart-form .product-subtotal .amount {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #00ff9d !important;
}

/* Quantity input - Grid Area: quantity (row 2, column 2 - BELOW product name) */
.woocommerce-cart-form .product-quantity {
    grid-area: quantity !important;
    justify-content: flex-start !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}

.woocommerce-cart-form .quantity .qty {
    width: 60px !important;
    text-align: center !important;
    background: rgba(5, 46, 31, 0.8) !important;
    border: 1px solid rgba(0, 255, 157, 0.3) !important;
    border-radius: 9999px !important;
    color: #00ff9d !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.5rem !important;
}

/* Remove button - Left of quantity (via flex-direction: row-reverse) */
.woocommerce-cart-form .product-remove {
    position: static !important;
    width: auto !important;
}

.woocommerce-cart-form .product-remove a.remove {
    display: block !important;
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-top: -10px !important;
    /* Pull closer */
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0 !important;
    /* Hide text */
    transition: all 0.2s !important;
}

.woocommerce-cart-form .product-remove a.remove:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.woocommerce-cart-form .product-remove a.remove::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-color: currentColor !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>') no-repeat center !important;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>') no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

/* Product subtotal */
.woocommerce-cart-form .product-subtotal {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #00ff9d !important;
}

.woocommerce-cart-form .product-subtotal .amount {
    color: #00ff9d !important;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet: smaller cards - Square images */
@media (max-width: 1024px) {

    .wc-block-cart-items__row .wc-block-cart-item__image,
    .woocommerce-cart-form .product-thumbnail {
        width: 100% !important;
        /* Fill the 1fr */
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .wc-block-cart-items__row .wc-block-cart-item__image img,
    .woocommerce-cart-form .product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* Mobile: adjust grid for smaller screens - Square images */
@media (max-width: 768px) {

    table.wc-block-cart-items .wc-block-cart-items__row,
    .woocommerce-cart-form .shop_table tr.cart_item,
    .woocommerce-cart-form .shop_table tbody tr {
        grid-template-columns: 1fr 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "image product total"
            "image quantity .";
        padding: 0.5rem !important;
        row-gap: 0.25rem !important;
        column-gap: 0.5rem !important;
    }

    /* Larger images on mobile - Square */
    .wc-block-cart-items__row .wc-block-cart-item__image,
    .woocommerce-cart-form .product-thumbnail {
        width: 100% !important;
        /* Fill the 1fr */
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .wc-block-cart-items__row .wc-block-cart-item__image img,
    .woocommerce-cart-form .product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Smaller text on mobile */
    .wc-block-components-product-name,
    .wc-block-components-product-name a,
    .woocommerce-cart-form .product-name a {
        font-size: 1rem !important;
    }

    /* Quantity selector smaller */
    .wc-block-components-quantity-selector {
        min-width: 100px !important;
    }

    /* Product info alignment */
    .wc-block-cart-item__product {
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* Fix Total Alignment on Mobile - Align with Quantity */
    .wc-block-cart-item__total,
    .woocommerce-cart-form .product-subtotal {
        align-self: start !important;
    }
}

/* ========================================
   CART TOTALS SIDEBAR STYLING
   ======================================== */

.cart_totals {
    background: rgba(5, 46, 31, 0.5) !important;
    border: 1px solid rgba(0, 255, 157, 0.2) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
}

.cart_totals h2 {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(0, 255, 157, 0.2) !important;
}

.cart_totals th,
.cart_totals td {
    color: #fff !important;
    padding: 0.75rem 0 !important;
}

.cart_totals .amount {
    color: #00ff9d !important;
    font-weight: 700 !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    border-top: 1px solid rgba(0, 255, 157, 0.2) !important;
    padding-top: 1rem !important;
}

/* Checkout button in cart totals */
.cart_totals .checkout-button,
.cart_totals .wc-proceed-to-checkout a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
    border: 2px solid #00ff9d !important;
    color: #00ff9d !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 1rem !important;
    border-radius: 9999px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.cart_totals .checkout-button:hover,
.cart_totals .wc-proceed-to-checkout a.button:hover {
    background: #00ff9d !important;
    color: #02120b !important;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.3) !important;
}

/* ========================================
   PRODUCT LOOP STYLING (CUSTOM FIXES)
   ======================================== */

/* Force product card description text to be white */
.woocommerce ul.products li.product p,
.woocommerce ul.products li.product .woocommerce-product-details__short-description {
    color: #ffffff !important;
}

/* Utility: Text White */
.text-white {
    color: #ffffff !important;
}

/* Adjusted Product Card Button Spacing to match new full-bleed layout */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
    margin: 0 1.5rem 1.5rem 1.5rem !important;
    /* Restore the visual padding */
    width: calc(100% - 3rem) !important;
    /* Full width minus margins */
    display: block !important;
    text-align: center;
}

/* Force Remove Padding from Product Card to allow full bleed image */
.woocommerce ul.products li.product {
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    /* Ensure no theme border */
    box-shadow: none !important;
    /* Ensure no theme shadow */
    background: transparent !important;
    /* Ensure no theme background */
    /* Ensure rounded corners clip image */
}

/* Ensure the link wraps content fully without padding */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border-radius: inherit !important;
    border: none !important;
    /* Ensure no border on the link itself */
    text-decoration: none !important;
    /* Ensure no underline */
    box-shadow: none !important;
    /* Ensure no shadow/outline */
}

/* Ensure Image is full width and has no rounded corners of its own */
.woocommerce ul.products li.product .product-image-container {
    width: calc(100% + 6px) !important;
    margin-left: -3px !important;
    margin-top: -3px !important;
    margin-right: -3px !important;
    max-width: none !important;
    border-radius: 1rem 1rem 0 0 !important;
    margin-bottom: -1px !important;
    border: none !important;
    /* Ensure no border */
    /* Let parent clip it */
}

.woocommerce ul.products li.product img {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    /* Ensure no border */
    /* Remove any default rounding */
}