/**
 * Custom Frontend Styles
 * Datron CNC - Hello Elementor Child Theme
 * 
 * This file contains all frontend-specific custom styles
 * extracted from functions.php for better maintainability.
 */

/* ============================================================================
   PRODUCT VIDEO
   ============================================================================ */
.product-video-in-summary {
    margin: 20px 0;
    width: 100%;
}

.product-video-in-summary .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 4px;
}

.product-video-in-summary .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================================
   WAITLIST - GUEST USERS
   ============================================================================ */

/* Hide default waitlist for logged-out users */
.wcwl_elements.bound {
    display: block !important;
}

/* Custom waitlist button for guests */
.datron-waitlist-guest {
    margin: 20px 0;
}

.datron-join-waitlist-btn {
    background-color: #0071a1;
    color: white;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

.datron-join-waitlist-btn:hover {
    background-color: #005a82;
}

/* Waitlist Modal */
.datron-waitlist-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.datron-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
}

.datron-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.datron-modal-close:hover,
.datron-modal-close:focus {
    color: #000;
}

.datron-modal-content .woocommerce-info {
    margin-top: 20px;
}

/* Out of stock cart hiding is handled dynamically via PHP body classes or inline conditionals */


/* ============================================================================
   PRODUCT GRID STYLES
   ============================================================================ */

/* Base - Two explicit columns, independent height */
.single-product div.product,
.single-product.woocommerce div.product {
    display: grid !important;
    grid-template-columns: 48% 48% !important;
    grid-gap: 4% !important;
    align-items: start !important;
    padding-bottom: 50px !important;
}

/* Full Width Top Elements (Notices, Breadcrumbs) */
.single-product div.product>.woocommerce-notices-wrapper,
.single-product div.product>.woocommerce-breadcrumb,
.single-product div.product>.woocommerce-message,
.single-product div.product>.woocommerce-error,
.single-product div.product>.woocommerce-info {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 16px !important;
}

/* Left Column: Product Gallery & Images */
.single-product div.product>.images,
.single-product div.product>.woocommerce-product-gallery,
.single-product div.product>.datron-images-wrap,
.single-product div.product div.images {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Right Column: Product Summary & Meta */
.single-product div.product>.summary,
.single-product div.product>.entry-summary,
.single-product div.product>.datron-summary-wrap,
.single-product div.product div.summary {
    grid-column: 2 !important;
    grid-row: auto !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Full Width Bottom Elements (Tabs, Related Products, Additional Info) */
.single-product div.product>.woocommerce-tabs,
.single-product div.product>.related,
.single-product div.product>.upsells,
.single-product div.product>.datron-additional-info,
.single-product div.product>section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    clear: both !important;
}

/* ============================================================================
   PRODUCT GALLERY & IMAGES OVERLAP FIX
   ============================================================================ */

/* Desktop Gallery Layout (min-width: 1025px) - Prevents Main Image & Vertical Thumbnail Overlap */
@media (min-width: 1025px) {

    .single-product div.product div.images,
    .woocommerce div.product div.images,
    .datron-images-wrap {
        position: relative !important;
        width: 100% !important;
    }

    .woocommerce div.product div.images img {
        max-height: 600px !important;
        object-fit: contain !important;
    }

    /* Shift Main Image Viewport to the right of vertical thumbnail column with clean 20px gap */
    .woocommerce .flex-viewport,
    .woocommerce div.product div.images .flex-viewport,
    .datron-images-wrap .flex-viewport {
        width: calc(100% - 100px) !important;
        margin-left: 100px !important;
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        float: none !important;
    }

    /* Position Thumbnail Navigation vertically on the left with strict 80px width */
    .woocommerce .flex-control-nav,
    .woocommerce .flex-control-thumbs,
    ol.flex-control-nav.flex-control-thumbs,
    .woocommerce div.product div.images .flex-control-thumbs {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5 !important;
        float: none !important;
    }

    .woocommerce .flex-control-thumbs li,
    ol.flex-control-nav.flex-control-thumbs li,
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
        height: auto !important;
        margin: 0 0 10px 0 !important;
        float: none !important;
        border: 1px solid #aaa !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
    .woocommerce div.product div.images .flex-control-thumbs li img {
        height: 70px !important;
        width: 100% !important;
        object-fit: contain !important;
        padding: 4px !important;
        display: block !important;
    }
}

.woocommerce .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb {
    margin-bottom: 20px !important;
    clear: both !important;
    display: block !important;
}

/* Responsive adjustments for Tablet & Mobile (Fixes 568px - 1024px Viewport Overlap) */
@media (max-width: 1024px) {

    .datron-images-wrap,
    .single-product div.product div.images {
        margin-bottom: 30px !important;
        width: 100% !important;
        float: none !important;
    }

    /* Reset flex-viewport (Main Product Image) positioning */
    .woocommerce .flex-viewport,
    .woocommerce div.product div.images .flex-viewport,
    .datron-images-wrap .flex-viewport {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        margin: 0 auto !important;
        float: none !important;
    }

    /* Reset Thumbnail Navigation Container (Force horizontal layout below main image) */
    .woocommerce .flex-control-nav,
    .woocommerce .flex-control-thumbs,
    ol.flex-control-nav.flex-control-thumbs,
    .woocommerce div.product div.images .flex-control-thumbs {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 15px 0 25px 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Reset Thumbnail List Items (Pills) */
    .woocommerce .flex-control-thumbs li,
    ol.flex-control-nav.flex-control-thumbs li,
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: auto !important;
        max-width: 90px !important;
        margin: 0 10px 10px 0 !important;
        float: none !important;
        display: inline-block !important;
        border: 1px solid #aaa !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
    .woocommerce div.product div.images .flex-control-thumbs li img {
        height: 75px !important;
        width: 100% !important;
        object-fit: contain !important;
        padding: 4px !important;
        display: block !important;
    }
}

@media (max-width: 768px) {
    .woocommerce div.product div.images img {
        max-height: 400px !important;
    }

    .woocommerce div.product div.images .flex-viewport img,
    .woocommerce div.product div.images .woocommerce-product-gallery__image img {
        padding-left: 0 !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
    .woocommerce div.product div.images .flex-control-thumbs li img {
        height: 75px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce div.product div.images img {
        max-height: 300px !important;
    }

    .woocommerce div.product div.images .flex-viewport img,
    .woocommerce div.product div.images .woocommerce-product-gallery__image img {
        padding-left: 0 !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
    .woocommerce div.product div.images .flex-control-thumbs li img {
        height: 60px !important;
    }
}

/* Custom WooCommerce Variation Inline Notice */
.datron-inline-variation-error,
.woocommerce div.product .datron-inline-variation-error {
    background-color: #fdf2f2 !important;
    color: #b81c23 !important;
    border: 1px solid #f5c6cb !important;
    border-left: 4px solid #b81c23 !important;
    padding: 12px 18px !important;
    border-radius: 4px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 15px 0 !important;
    display: block !important;
    clear: both !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    list-style: none !important;
}

.datron-inline-variation-error::before,
.datron-inline-variation-error::after {
    display: none !important;
    content: "" !important;
}

/* Product Video - Below Available Options (right column) */
.datron-variation-video {
    margin-top: 24px !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

.datron-variation-video__wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.datron-variation-video__wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    border: none !important;
}


/* Description Section */

/* Section Headings (Description, Available Options, Additional Information) */
.datron-cell-heading {
    border-bottom: 2.6px solid #E0E0E0 !important;
}

.datron-description-wrap {
    margin-top: 152px;
}

.datron-description-content {
    margin-top: 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #333333;
    line-height: 1.75;
    padding-bottom: 50px;
}

.datron-description-content p {
    margin: 0 0 16px 0;
}

.datron-description-content p:last-child {
    margin-bottom: 0;
}

/* Additional Information Table */

.datron-additional-info {
    margin-top: 30px;
}

/* Additional Information Table Container */
.datron-attr-table-wrap {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
}

.datron-attr-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.datron-attr-table tr {
    border-bottom: 1px solid #e0e0e0 !important;
}

.datron-attr-table tr:last-child {
    border-bottom: none !important;
}

.datron-attr-table tr:nth-child(odd) {
    background-color: #f8f8f8 !important;
}

.datron-attr-table tr:nth-child(even) {
    background-color: #ffffff !important;
}

.datron-attr-table th {
    width: 42% !important;
    padding: 12px 16px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    vertical-align: middle !important;
    text-align: left !important;
    border-right: 1px solid #e0e0e0 !important;
    box-sizing: border-box !important;
}

.datron-attr-table td {
    padding: 12px 16px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Variation Table (Figma Spec matching Image 2) */
.single-product .product table.variations,
.woocommerce div.product table.variations,
table.variations {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: table !important;
}

.single-product .product table.variations tr,
.woocommerce div.product table.variations tr,
table.variations tr {
    display: flex !important;
    padding: 10px !important;
    align-items: center !important;
    align-self: stretch !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}

.single-product .product table.variations tr:nth-child(odd),
.single-product .product table.variations tr:nth-child(odd) th,
.single-product .product table.variations tr:nth-child(odd) td,
.woocommerce div.product table.variations tr:nth-child(odd),
.woocommerce div.product table.variations tr:nth-child(odd) th,
.woocommerce div.product table.variations tr:nth-child(odd) td,
table.variations tr:nth-child(odd),
table.variations tr:nth-child(odd) th,
table.variations tr:nth-child(odd) td {
    background-color: #F6F6F6 !important;
}

.single-product .product table.variations tr:nth-child(even),
.single-product .product table.variations tr:nth-child(even) th,
.single-product .product table.variations tr:nth-child(even) td,
.woocommerce div.product table.variations tr:nth-child(even),
.woocommerce div.product table.variations tr:nth-child(even) th,
.woocommerce div.product table.variations tr:nth-child(even) td,
table.variations tr:nth-child(even),
table.variations tr:nth-child(even) th,
table.variations tr:nth-child(even) td {
    background-color: #FFF !important;
}

.single-product .product table.variations th.label,
.woocommerce div.product table.variations th.label,
table.variations th.label,
table.variations th {
    display: flex !important;
    width: 275px !important;
    max-width: 45% !important;
    height: 42px !important;
    padding: 10px 15px !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
    color: #363636 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16.2px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16.2px !important;
    flex: none !important;
}

.single-product .product table.variations th.label label,
.woocommerce div.product table.variations th.label label,
table.variations th.label label {
    margin: 0 !important;
    padding: 0 !important;
    color: #363636 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16.2px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 16.2px !important;
}

.single-product .product table.variations td.value,
.woocommerce div.product table.variations td.value,
table.variations td.value,
table.variations td {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.single-product .product a.reset_variations,
.woocommerce div.product a.reset_variations,
table.variations a.reset_variations {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    margin-top: 16px !important;
    color: #0064a0 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    padding-right: 15px !important;
}

.single-product .product table.variations td.value select,
.woocommerce div.product table.variations td.value select,
.sku-url-page .variations select,
table.variations select {
    display: flex !important;
    padding: 9px 35px 9px 15px !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    border-radius: 4px !important;
    border: 1px solid #0064a0 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    box-sizing: border-box !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23363636%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 14px 14px !important;
}

.single-product.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .out-of-stock,
.single-product .out-of-stock {
    color: var(--wc-red);
    display: flex;
    padding: 7px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    border: 1px solid #C3E6CB;
    background: #E7F5EC;
}

.datron-attr-table td {
    color: #555;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.5px;
}

/* Remove any bullet list styles from the table */
.datron-attr-table ul,
.datron-attr-table .datron-attr-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.datron-attr-table .datron-attr-list li {
    display: inline !important;
}

.datron-attr-table .datron-attr-list li+li::before {
    content: ' / ';
}


/* Variation Switcher (in product grid context) */

.sku-variation-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.sku-variation-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    min-height: 90px !important;
    transform: none !important;
}

.sku-variation-item:hover {
    border-color: #0064a0 !important;
    box-shadow: 0 2px 8px rgba(0, 100, 160, 0.1) !important;
    transform: none !important;
}

.sku-variation-item.active {
    border: 2px solid #0064a0 !important;
    background: #f0f8ff !important;
    font-weight: normal !important;
}

/* Top row: attribute text */
.sku-variation-item .sku-var-top {
    flex: 1;
}

.sku-variation-item .variation-sku {
    display: block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.sku-variation-item .variation-sku .sku-label {
    color: #0064a0 !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
}

.sku-variation-item .variation-attributes {
    display: block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    flex: none !important;
    min-width: unset !important;
}

/* Bottom row: price + selected + stock */
.sku-variation-item .sku-var-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.sku-variation-item .variation-price {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #a89f00 !important;
    margin: 0 auto 0 0 !important;
    flex: none !important;
}

.sku-variation-item .variation-price .woocommerce-Price-amount {
    color: #a89f00 !important;
}

.sku-variation-item .current-badge,
.current-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0F834D !important;
    text-align: center !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    border-radius: 0 !important;
    letter-spacing: normal !important;
}

.sku-variation-item .variation-stock,
.variation-stock {
    display: inline-flex !important;
    padding: 7px 10px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 3px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Price & Stock Wrapper - Staging Environment Matching */
.datron-price-stock-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 10px 0 15px 0 !important;
}

.datron-price-stock-wrapper .price,
.datron-price-stock-wrapper .datron-live-price,
.datron-price-stock-wrapper .datron-live-price>.woocommerce-Price-amount,
.datron-price-stock-wrapper .datron-live-price ins,
.datron-price-stock-wrapper .datron-live-price ins .woocommerce-Price-amount {
    font-family: 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #958e09 !important;
    text-decoration: none !important;
}

ins,
.price ins,
.datron-live-price ins,
.datron-sticky-price ins {
    text-decoration: none !important;
    background: transparent !important;
}

del,
.price del,
.datron-live-price del {
    color: #888888 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.75 !important;
    margin-right: 6px !important;
}

del .woocommerce-Price-amount,
.price del .woocommerce-Price-amount,
.datron-live-price del .woocommerce-Price-amount {
    color: #888888 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

.datron-sticky-price del,
.datron-sticky-price del .woocommerce-Price-amount {
    font-size: 14px !important;
    color: #888888 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

.datron-sticky-price ins,
.datron-sticky-price ins .woocommerce-Price-amount {
    font-size: 18px !important;
    color: #a89f00 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.datron-categories-tags {
    margin: 15px 0 20px 0 !important;
}

.datron-categories-tags .sku-wrapper,
.datron-categories-tags .categories-wrapper,
.datron-categories-tags .tags-wrapper {
    display: block !important;
    margin-bottom: 0px !important;
    line-height: 27px !important;
}

span.spn-sku,
.datron-categories-tags .spn-sku {
    color: #363636 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    display: inline !important;
    margin-right: 4px !important;
}

.datron-categories-tags .spn-sku-val {
    color: #363636 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 27px !important;
    display: inline !important;
}

.datron-categories-tags .spn-cat,
.datron-categories-tags .spn-tag {
    color: #363636 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    display: inline !important;
    margin-right: 4px !important;
}

.datron-categories-tags .spn-cat-val,
.datron-categories-tags .spn-cat-val a,
.datron-categories-tags .spn-tag-val,
.datron-categories-tags .spn-tag-val a {
    color: #0064A0 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 27px !important;
    text-decoration: none !important;
    display: inline !important;
}

.datron-categories-tags .spn-cat-val a:hover,
.datron-categories-tags .spn-tag-val a:hover {
    color: #004d7a !important;
    text-decoration: underline !important;
}

.datron-price-stock-wrapper .stock-badge.in-stock,

.sku-variation-item .variation-stock.in-stock,
.variation-stock.in-stock,
.stock-badge.in-stock,
.stock.in-stock {
    color: #0F834D !important;
    text-align: center !important;
    leading-trim: both !important;
    text-edge: cap !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    display: inline-flex !important;
    padding: 7px 10px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 3px !important;
    border: 1px solid #C3E6CB !important;
    background: #E7F5EC !important;
}

/* Hide WooCommerce default dynamic variation price & availability inside cart form */
.single_variation .price,
.single_variation .stock,
.single_variation .woocommerce-variation-price,
.single_variation .woocommerce-variation-availability,
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-availability,
.single_variation_wrap .stock,
.variations_form .single_variation .stock,
.variations_form .single_variation .woocommerce-variation-availability,
.datron-summary-wrap form.cart .stock,
.single-product form.cart .stock,
.datron-summary-wrap p.stock,
.datron-summary-wrap div.stock:not(.datron-live-stock-wrap),
.single-product .summary p.stock,
.single-product .summary div.stock:not(.datron-live-stock-wrap) {
    display: none !important;
}



.sku-variation-item .variation-stock.out-of-stock,
.variation-stock.out-of-stock,
.stock.out-of-stock {
    border-radius: 3px !important;
    border: 1px solid #F5C6CB !important;
    background: #F8D7DA !important;
    color: #721C24 !important;
}

/* Responsive - Mobile & Tablet */
@media (max-width: 1024px) {

    .single-product div.product,
    .single-product.woocommerce div.product {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        grid-gap: 0px !important;
    }

    .single-product div.product div.images,
    .single-product div.product div.summary {
        grid-column: 1 !important;
        width: 100% !important;
    }

    .sku-variation-list {
        grid-template-columns: 1fr !important;
    }

    /* Mobile Section Reordering: Images (1) -> Summary/Title & Attributes (2) -> Description (3) -> Additional Info (4) -> Available Options (5) -> Video (6) */
    .datron-product-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .datron-col-left,
    .datron-col-right {
        display: contents !important;
    }

    .datron-images-wrap,
    .datron-summary-wrap,
    .datron-description-wrap,
    .datron-additional-info,
    .datron-variations-wrap,
    .datron-variation-video,
    .product-video-in-summary {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    .datron-images-wrap {
        order: 1 !important;
        margin-bottom: 20px !important;
    }

    .datron-summary-wrap {
        order: 2 !important;
        margin-bottom: 20px !important;
    }

    .datron-description-wrap {
        order: 3 !important;
        margin-top: 0px !important;
        margin-bottom: 24px !important;
    }

    .datron-additional-info {
        order: 4 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        padding-bottom: 15px;
    }

    .datron-variations-wrap {
        order: 5 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    .datron-variation-video,
    .product-video-in-summary {
        order: 6 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    /* Variation Section Mobile Stacking Fix */
    .single-product .product table.variations,
    .woocommerce div.product table.variations,
    table.variations {
        display: block !important;
        width: 100% !important;
    }

    .single-product .product table.variations tbody,
    .woocommerce div.product table.variations tbody,
    table.variations tbody {
        display: block !important;
        width: 100% !important;
    }

    .single-product .product table.variations tr,
    .woocommerce div.product table.variations tr,
    table.variations tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .single-product .product table.variations th.label,
    .woocommerce div.product table.variations th.label,
    table.variations th.label,
    table.variations th {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 2px 0 6px 0 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        flex: none !important;
        text-align: left !important;
    }

    .single-product .product table.variations th.label label,
    .woocommerce div.product table.variations th.label label,
    table.variations th.label label {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .single-product .product table.variations td.value,
    .woocommerce div.product table.variations td.value,
    table.variations td.value,
    table.variations td {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        position: relative !important;
    }

    .single-product .product table.variations td.value select,
    .woocommerce div.product table.variations td.value select,
    .sku-url-page .variations select,
    table.variations select {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 8px 35px 8px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        background-position: right 12px center !important;
    }

    .single-product .product a.reset_variations,
    .woocommerce div.product a.reset_variations,
    table.variations a.reset_variations,
    a.reset_variations {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        float: right !important;
        display: block !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        text-align: right !important;
        clear: both !important;
    }
}



/* ============================================================================
   TOP NAVIGATION HEADER SEARCH BAR (Figma Mockup Match)
   ============================================================================ */

.elementskit-menu-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.datron-header-search-form {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: none !important;
    align-items: center !important;
}

.datron-search-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 320px !important;
    max-width: 100% !important;
}

.datron-header-search-input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 36px 0 14px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    color: #333333 !important;
    outline: none !important;
    box-shadow: none !important;
}

.datron-header-search-input::placeholder {
    color: #888888 !important;
    font-size: 13px !important;
}

.datron-header-search-input:focus {
    border-color: #0064a0 !important;
    box-shadow: 0 0 0 2px rgba(0, 100, 160, 0.15) !important;
}

.datron-header-search-btn {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    color: #666666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.datron-header-search-btn:hover {
    color: #0064a0 !important;
}


/* ============================================================================
   STICKY BOTTOM HEADER BAR (Figma Mockup Match)
   ============================================================================ */

.datron-sticky-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    background: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    z-index: 9990 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.datron-sticky-bottom-bar.datron-sticky-hidden {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.datron-sticky-bar-container {
    width: 100% !important;
    max-width: 1440px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

.datron-sticky-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.datron-sticky-thumb {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.datron-sticky-thumb img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.datron-sticky-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.datron-sticky-title {
    color: #363636 !important;
    leading-trim: both !important;
    text-edge: cap !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    text-transform: capitalize !important;
}

.datron-sticky-sku {
    color: #363636 !important;
    leading-trim: both !important;
    text-edge: cap !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    margin-top: 2px !important;
}

.datron-sticky-right {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.datron-sticky-price {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #a89f00 !important;
    white-space: nowrap !important;
}

.datron-sticky-price .woocommerce-Price-amount {
    color: #a89f00 !important;
}

.datron-sticky-qty-wrap .quantity {
    display: inline-flex !important;
    padding: 8.8px 15px 9.2px 15px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;
    border: 1px solid #767676 !important;
    border-radius: 4px !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.datron-sticky-qty-wrap .quantity .datron-qty-btn {
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    box-shadow: none !important;
}

.datron-sticky-qty-wrap .quantity .datron-qty-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.datron-sticky-qty-wrap .quantity input[type="number"] {
    width: 32px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
    outline: none !important;
}

.datron-sticky-qty-wrap .quantity input[type="number"]::-webkit-outer-spin-button,
.datron-sticky-qty-wrap .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.datron-sticky-add-to-cart-btn {
    display: inline-flex !important;
    padding: 0 36px !important;
    justify-content: center !important;
    align-items: center !important;
    background: #005ba4 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    height: 40px !important;
    line-height: 40px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.datron-sticky-add-to-cart-btn:hover {
    background: #004b88 !important;
    box-shadow: 0 4px 12px rgba(0, 91, 164, 0.3) !important;
}

.datron-sticky-add-to-cart-btn.disabled,
.datron-sticky-add-to-cart-btn.out-of-stock,
.datron-sticky-add-to-cart-btn:disabled,
body.datron-product-out-of-stock .datron-sticky-add-to-cart-btn {
    background: #0064a0 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    opacity: 0.55 !important;
}

@media (max-width: 768px) {
    .datron-sticky-bottom-bar {
        height: 72px !important;
    }

    .datron-description-wrap {
        margin-top: 65px;
    }

    .datron-description-content {
        padding-bottom: 15px;
    }

    .datron-sticky-bar-container {
        padding: 0 12px !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }

    .datron-sticky-left {
        gap: 8px !important;
        max-width: 45% !important;
        overflow: hidden !important;
    }

    .datron-sticky-thumb {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    .datron-sticky-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .datron-sticky-sku {
        font-size: 11px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .datron-sticky-right {
        gap: 8px !important;
        max-width: 55% !important;
        justify-content: flex-end !important;
    }

    .datron-sticky-price {
        font-size: 15px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .datron-sticky-add-to-cart-btn {
        height: 38px !important;
        line-height: 38px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    /* Header Search Bar Mobile Responsiveness */
    .datron-header-search-form {
        width: 100% !important;
        margin: 8px 0 !important;
    }

    .datron-search-input-wrap {
        width: 100% !important;
    }

    /* Single product cart form on mobile - Quantity matching Add to Cart width */
    .single-product div.product form.cart,
    .single-product .product form.cart,
    .single-product .product .woocommerce-variation-add-to-cart,
    .woocommerce div.product form.cart,
    .woocommerce div.product .woocommerce-variation-add-to-cart {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 20px 0 15px 0 !important;
    }

    .single-product .product .quantity,
    .single-product div.product .quantity,
    .woocommerce div.product .quantity {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 24px !important;
        height: 46px !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
    }

    .single-product .product .single_add_to_cart_button,
    .single-product div.product .single_add_to_cart_button,
    .woocommerce div.product .single_add_to_cart_button {
        display: inline-flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 18px !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 576px) {
    .datron-sticky-sku {
        display: none !important;
    }

    .datron-sticky-qty-wrap {
        display: none !important;
    }

    .datron-sticky-title {
        max-width: 90px !important;
    }
}

/* ============================================================================
   SINGLE PRODUCT - QUANTITY SELECTOR & ADD TO CART BUTTON (User Screenshot Match)
   ============================================================================ */

/* Container flex row */
.single-product div.product form.cart,
.single-product .product form.cart,
.single-product .product .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 30px 0 15px 0 !important;
}

/* Quantity Box Container (Figma Spec - Single Product Form Only) */
.single-product .product form.cart .quantity,
.single-product div.product form.cart .quantity,
.datron-sticky-qty-wrap .quantity {
    display: inline-flex !important;
    padding: 8.8px 15px 9.2px 15px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;
    border: 1px solid #767676 !important;
    border-radius: 4px !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Reset Mini-Cart / Floating Side Cart Drawer Quantity Display */
.widget_shopping_cart .quantity,
.elementor-menu-cart__container .quantity,
.elementor-menu-cart__product-quantity,
.elementor-menu-cart__product-quantity .quantity,
.woocommerce-mini-cart-item .quantity {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    gap: 0 !important;
    box-shadow: none !important;
}

/* Hide custom quantity buttons in side cart / mini cart drawer */
.elementor-menu-cart__container .datron-qty-btn,
.elementor-menu-cart__product-quantity .datron-qty-btn,
.widget_shopping_cart .datron-qty-btn,
.woocommerce-mini-cart-item .datron-qty-btn {
    display: none !important;
}

/* Minus & Plus Buttons inside Quantity Box */
.single-product .product form.cart .quantity .datron-qty-btn,
.single-product div.product form.cart .quantity .datron-qty-btn,
.datron-sticky-qty-wrap .quantity .datron-qty-btn {
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    box-shadow: none !important;
}

.single-product .product form.cart .quantity .datron-qty-btn svg,
.single-product div.product form.cart .quantity .datron-qty-btn svg,
.datron-sticky-qty-wrap .quantity .datron-qty-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Input Number in Center of Quantity Box */
.single-product .product form.cart .quantity input[type="number"],
.single-product div.product form.cart .quantity input[type="number"],
.datron-sticky-qty-wrap .quantity input[type="number"] {
    width: 32px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
    outline: none !important;
}

.single-product .product .quantity input[type="number"]::-webkit-outer-spin-button,
.single-product .product .quantity input[type="number"]::-webkit-inner-spin-button,
.single-product div.product .quantity input[type="number"]::-webkit-outer-spin-button,
.single-product div.product .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Add to Cart Pill Button (Figma Spec) */
.single-product .product .single_add_to_cart_button,
.single-product div.product .single_add_to_cart_button {
    display: inline-flex !important;
    width: 337px !important;
    max-width: 100% !important;
    padding: 12px 18px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    background: #0064A0 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    height: auto !important;
    line-height: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.single-product .product .single_add_to_cart_button:hover,
.single-product div.product .single_add_to_cart_button:hover {
    background: #004d7a !important;
    box-shadow: 0 4px 12px rgba(0, 100, 160, 0.3) !important;
}

/* Add to Favorites Link */
.single-product .product .tinv-wraper,
.single-product div.product .tinv-wraper {
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    clear: both !important;
}

.single-product .product .tinvwl_add_to_wishlist_button,
.single-product div.product .tinvwl_add_to_wishlist_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #005ba4 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding-top: 7px !important;
}

.single-product .product .tinvwl_add_to_wishlist_button:hover,
.single-product div.product .tinvwl_add_to_wishlist_button:hover {
    color: #004b88 !important;
    text-decoration: underline !important;
}

/* Single Product Short Description (Figma Spec) */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p,
.single-product .product .woocommerce-product-details__short-description,
.single-product .product .woocommerce-product-details__short-description p,
.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-product-details__short-description p,
.datron-description-content,
.datron-description-content p {
    color: #363636 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 27px !important;
}

/* Suppress WooCommerce variation not found message */
.wc-no-matching-variations,
div[role="alert"]:has(.wc-no-matching-variations),
p.wc-no-matching-variations,
.woocommerce-variation-not-found,
.single-product .woocommerce-variation-not-found,
.woocommerce div.product .woocommerce-variation-not-found {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    opacity: 0 !important;
}

/* ============================================================================
   SIMPLE PRODUCT PAGE DISPLAY FIXES
   ============================================================================ */

/* Ensure Short Description is visible on simple product pages */
.single-product .woocommerce-product-details__short-description,
.single-product .product .woocommerce-product-details__short-description,
.woocommerce-product-details__short-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    color: #363636 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Ensure Price is styled and visible on single product pages */
.single-product .summary .price,
.single-product .product .price,
.product-type-simple .price,
.single-product .price {
    display: block !important;
    visibility: visible !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #828A00 !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
}

.single-product .price .woocommerce-Price-amount,
.single-product .price .woocommerce-Price-currencySymbol {
    display: inline-block !important;
}

/* Hide 'View Available Options' button on Simple (non-variable) Products */
.product-type-simple .view-available-options,
.product-type-simple a[href*="available-options"],
.product-type-simple [class*="available-options"],
body.single-product:not(.product-type-variable) a[href*="available-options"],
body.single-product:not(.product-type-variable) .view-available-options {
    display: none !important;
}

/* Join Waitlist Button Styling for Out-of-Stock Simple Products */
.datron-waitlist-guest .datron-join-waitlist-btn,
.datron-join-waitlist-btn {
    background-color: #0071a1 !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-top: 0px !important;
    transition: background-color 0.2s !important;
}

.datron-waitlist-guest .datron-join-waitlist-btn:hover,
.datron-join-waitlist-btn:hover {
    background-color: #005177 !important;
}

/* ============================================================================
   RELATED & UPSELL PRODUCTS (PRODUCT DETAILS / SKU PAGE ONLY)
   ============================================================================ */

.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .related.products ul.products li.product h2,
.single-product .related.products ul.products li.product h3,
.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products ul.products li.product h2,
.sku-url-page .related.products ul.products li.product .woocommerce-loop-product__title,
.sku-url-page .related.products ul.products li.product h2,
.sku-url-page .upsells.products ul.products li.product .woocommerce-loop-product__title,
.sku-url-page .upsells.products ul.products li.product h2 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
}

.single-product .related.products ul.products li.product .button,
.single-product .related.products ul.products li.product a.button,
.single-product .related.products ul.products li.product .add_to_cart_button,
.single-product .upsells.products ul.products li.product .button,
.single-product .upsells.products ul.products li.product a.button,
.sku-url-page .related.products ul.products li.product .button,
.sku-url-page .related.products ul.products li.product a.button,
.sku-url-page .related.products ul.products li.product .add_to_cart_button,
.sku-url-page .upsells.products ul.products li.product .button,
.sku-url-page .upsells.products ul.products li.product a.button {
    white-space: nowrap !important;
    padding: 8px 8px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background-color: #606060 !important;
    color: #ffffff !important;
    border: 1px solid #0064a0 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

.single-product .related.products ul.products li.product .button:hover,
.single-product .related.products ul.products li.product a.button:hover,
.single-product .related.products ul.products li.product .add_to_cart_button:hover,
.single-product .upsells.products ul.products li.product .button:hover,
.sku-url-page .related.products ul.products li.product .button:hover,
.sku-url-page .related.products ul.products li.product a.button:hover,
.sku-url-page .related.products ul.products li.product .add_to_cart_button:hover,
.sku-url-page .upsells.products ul.products li.product .button:hover {
    background-color: #0064a0 !important;
    color: #ffffff !important;
    border-color: #0064a0 !important;
}

/* ============================================================================
   CATEGORY & SHOP ARCHIVE PAGE RESPONSIVE LAYOUT
   ============================================================================ */

@media (max-width: 1024px) {

    /* 1. Category Page Main Layout - Stack Sidebar and Main Content Columns */
    .tax-product_cat .elementor-section .elementor-container,
    .post-type-archive-product .elementor-section .elementor-container,
    .woocommerce-page.archive .elementor-section .elementor-container {
        flex-wrap: wrap !important;
    }

    .tax-product_cat .elementor-column.elementor-col-25,
    .tax-product_cat .elementor-column.elementor-col-30,
    .tax-product_cat .elementor-column.elementor-col-75,
    .tax-product_cat .elementor-column.elementor-col-70,
    .post-type-archive-product .elementor-column.elementor-col-25,
    .post-type-archive-product .elementor-column.elementor-col-75,
    .woocommerce-page.archive .elementor-column.elementor-col-25,
    .woocommerce-page.archive .elementor-column.elementor-col-75 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px !important;
    }

    /* 2. Product Grid Layout on Category Page (2 columns on tablet/mobile) */
    .tax-product_cat ul.products,
    .post-type-archive-product ul.products,
    .woocommerce-page.archive ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
        grid-template-columns: none !important;
        justify-content: space-between !important;
    }

    .tax-product_cat ul.products li.product,
    .post-type-archive-product ul.products li.product,
    .woocommerce-page.archive ul.products li.product {
        width: 48% !important;
        max-width: 48% !important;
        flex: 0 0 48% !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* 3. Product Cards Button Styling on Category Page */
    .tax-product_cat ul.products li.product .button,
    .tax-product_cat ul.products li.product a.button,
    .post-type-archive-product ul.products li.product .button,
    .post-type-archive-product ul.products li.product a.button,
    .woocommerce-page.archive ul.products li.product .button,
    .woocommerce-page.archive ul.products li.product a.button {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin-top: 10px !important;
    }
}

@media (max-width: 576px) {

    /* Single column on mobile phones if screen is very narrow */
    .tax-product_cat ul.products li.product,
    .post-type-archive-product ul.products li.product,
    .woocommerce-page.archive ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================================================
   FOOTER RESPONSIVE OVERLAP FIX (TARGETED TO FOOTER SECTION 1e5e0d78)
   ============================================================================ */

@media (max-width: 1024px) {

    /* Stack footer section columns vertically on mobile/tablet to prevent horizontal overlap */
    .elementor-element.elementor-element-1e5e0d78>.elementor-container {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .elementor-element.elementor-element-1e5e0d78>.elementor-container>.elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 25px !important;
        float: none !important;
        clear: both !important;
    }

    /* Contain widgets and white button inside Column 3 */
    .elementor-element.elementor-element-528211b6 .elementor-widget-heading,
    .elementor-element.elementor-element-528211b6 .elementor-widget-button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-element.elementor-element-528211b6 .elementor-button {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================================
   HEADER RESPONSIVE ALIGNMENT FIX (DESKTOP, TABLET & MOBILE)
   ============================================================================ */

/* Ensure WooCommerce Menu Cart Widget is ALWAYS visible across all responsive viewports */
.elementor-location-header .elementor-widget-woocommerce-menu-cart,
.elementor-location-header .elementor-menu-cart__toggle_button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------------------
   2. TABLET & LAPTOP VIEWPORTS (768px - 1024px) - CLEAN SINGLE ROW LAYOUT
   ---------------------------------------------------------------------------- */

/* 2A. Mid-Size Tablet Viewport (768px - 899px) */
@media (min-width: 768px) and (max-width: 899px) {
    .elementor-location-header .elementor-element-2bb71e50 .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 6px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .elementor-location-header .elementor-element-2bb71e50 .elementor-container>.elementor-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .elementor-location-header .elementor-element-62a6998f img {
        max-width: 100px !important;
        height: auto !important;
        display: block !important;
    }

    .elementor-location-header .elementor-element-2bb71e50 .elementor-icon-box-title,
    .elementor-location-header .elementor-element-2bb71e50 .elementor-icon-box-description {
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .elementor-location-header .elementor-element-2bb71e50 .elementor-button {
        font-size: 10px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
    }

    .elementor-location-header .elementor-element-7b0862ef {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .elementor-location-header .elementor-element-5f03fd53 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        width: auto !important;
    }

    .elementor-location-header .login-iconbox .elementor-icon-box-title,
    .elementor-location-header .login-iconbox .elementor-icon-box-content,
    .elementor-location-header .stax-condition-yes a,
    .elementor-location-header .stax-condition-yes .elementor-icon-box-title {
        font-size: 10px !important;
        white-space: nowrap !important;
        max-width: 70px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .elementor-location-header .elementor-widget-woocommerce-menu-cart {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: 2px !important;
    }

    .elementor-location-header .elementor-menu-cart__toggle_button {
        padding-right: 4px !important;
    }

    .elementor-location-header .elementor-element-2d172493 .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
}

/* 2B. Large Tablet / Small Laptop Viewport (900px - 1024px) */
@media (min-width: 900px) and (max-width: 1024px) {
    .elementor-location-header .elementor-element-2bb71e50 .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 8px 15px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .elementor-location-header .elementor-element-2bb71e50 .elementor-container>.elementor-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .elementor-location-header .elementor-element-62a6998f img {
        max-width: 120px !important;
        height: auto !important;
        display: block !important;
    }

    .elementor-location-header .elementor-element-2bb71e50 .elementor-icon-box-title,
    .elementor-location-header .elementor-element-2bb71e50 .elementor-icon-box-description {
        font-size: 11px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .elementor-location-header .elementor-element-2bb71e50 .elementor-button {
        font-size: 11px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
    }

    .elementor-location-header .elementor-element-7b0862ef {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .elementor-location-header .elementor-element-5f03fd53 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
    }

    .elementor-location-header .login-iconbox .elementor-icon-box-title,
    .elementor-location-header .login-iconbox .elementor-icon-box-content,
    .elementor-location-header .stax-condition-yes a,
    .elementor-location-header .stax-condition-yes .elementor-icon-box-title {
        font-size: 11px !important;
        white-space: nowrap !important;
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .elementor-location-header .elementor-widget-woocommerce-menu-cart {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: 4px !important;
    }

    .elementor-location-header .elementor-menu-cart__toggle_button {
        padding-right: 5px !important;
    }

    .elementor-location-header .elementor-element-2d172493 .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 15px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
}

/* ----------------------------------------------------------------------------
   2. MOBILE VIEWPORT (max-width: 767px)
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body:not(.logged-in) .elementor-location-header .elementor-element-2bb71e50 .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    body:not(.logged-in) .elementor-location-header .elementor-element-62a6998f {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    body:not(.logged-in) .elementor-location-header .elementor-element-62a6998f img {
        max-width: 140px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    body:not(.logged-in) .elementor-location-header .elementor-element-7b0862ef,
    body:not(.logged-in) .elementor-location-header .elementor-element-5f03fd53 {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    body:not(.logged-in) .elementor-location-header .elementor-element-5f03fd53 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.logged-in) .elementor-location-header .login-iconbox,
    body:not(.logged-in) .elementor-location-header .elementor-widget-woocommerce-menu-cart {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.logged-in) .elementor-location-header .login-iconbox .elementor-icon-box-content,
    body:not(.logged-in) .elementor-location-header .login-iconbox .elementor-icon-box-title {
        display: inline-block !important;
        font-size: 11px !important;
    }

    /* ------------------------------------------------------------------------
       2. LOGGED-IN USER HEADER (TWO ROW LAYOUT)
       ------------------------------------------------------------------------ */
    body.logged-in .elementor-location-header .elementor-element-2bb71e50 .elementor-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Row 1: Centered Logo */
    body.logged-in .elementor-location-header .elementor-element-62a6998f {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 6px !important;
        float: none !important;
    }

    body.logged-in .elementor-location-header .elementor-element-62a6998f .elementor-widget-image {
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    body.logged-in .elementor-location-header .elementor-element-62a6998f img {
        max-width: 140px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Row 2: Centered Account Dropdown & Cart Widget */
    body.logged-in .elementor-location-header .elementor-element-7b0862ef,
    body.logged-in .elementor-location-header .elementor-element-5f03fd53 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        float: none !important;
    }

    body.logged-in .elementor-location-header .elementor-element-5f03fd53 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0px !important;
        width: 100% !important;
    }

    .elementor-nav-menu .sub-arrow {
        display: inline-flex !important;
    }

    body.logged-in .elementor-location-header .login-iconbox,
    body.logged-in .elementor-location-header .stax-condition-yes,
    body.logged-in .elementor-location-header .elementor-widget-woocommerce-menu-cart {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.logged-in .elementor-location-header .login-iconbox .elementor-icon-box-title,
    body.logged-in .elementor-location-header .login-iconbox .elementor-icon-box-content,
    body.logged-in .elementor-location-header .stax-condition-yes a,
    body.logged-in .elementor-location-header .stax-condition-yes .elementor-icon-box-title {
        display: inline-block !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* ------------------------------------------------------------------------
       3. BLUE NAVIGATION & SEARCH BAR SECTION (COMMON)
       ------------------------------------------------------------------------ */
    .elementor-location-header .elementor-element-2d172493 .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .elementor-location-header .elementskit-menu-toggler {
        flex: 0 0 auto !important;
        margin-right: 10px !important;
    }

    .elementor-location-header .datron-header-search-form,
    .elementor-location-header .aws-container {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .elementor-location-header .datron-search-input-wrap,
    .elementor-location-header .aws-search-form {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-location-header .datron-header-search-input,
    .elementor-location-header .aws-search-field {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }
}

/* Hide Add to Cart button and Quantity selector when product/variation is out of stock */
body.datron-product-out-of-stock .single_add_to_cart_button,
body.datron-product-out-of-stock .quantity,
body.datron-product-out-of-stock button[name="add-to-cart"],
body.datron-product-out-of-stock form.cart .single_add_to_cart_button,
body.datron-product-out-of-stock form.cart .quantity,
form.cart.is-out-of-stock .single_add_to_cart_button,
form.cart.is-out-of-stock .quantity,
form.cart.is-out-of-stock button[name="add-to-cart"],
form.cart.is-out-of-stock .woocommerce-variation-add-to-cart {
    display: none !important;
}

/* Fix WooCommerce Cart Table, Side Cart Drawer & Mini Cart Product Image Sizing */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce table.shop_table.cart td.product-thumbnail,
.woocommerce-cart-form table.cart td.product-thumbnail {
    width: 90px !important;
    max-width: 90px !important;
    padding: 10px !important;
    vertical-align: middle !important;
}

.woocommerce-cart table.cart td img,
.woocommerce-cart table.cart td a img,
.woocommerce table.shop_table.cart td img,
.woocommerce table.shop_table.cart td a img,
.woocommerce-cart-form table.cart td img,
.woocommerce-cart-form table.cart a img,
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart table.cart td.product-name img {
    max-width: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Fix Elementor Menu Cart / Side Cart Drawer / Mini Cart Product Images */
.elementor-menu-cart__container .elementor-menu-cart__product-image,
.elementor-menu-cart__main-container .elementor-menu-cart__product-image,
.elementor-menu-cart__product-image,
.widget_shopping_cart .product-thumbnail,
.woocommerce-mini-cart-item .product-thumbnail {
    width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.elementor-menu-cart__container img,
.elementor-menu-cart__main-container img,
.elementor-menu-cart__product-image img,
.elementor-menu-cart__product-image a img,
.elementor-menu-cart__product img,
.widget_shopping_cart img,
.widget_shopping_cart_content img,
.woocommerce-mini-cart img,
.woocommerce-mini-cart-item img,
.mini_cart_item img,
.cart_list img,
.product_list_widget img {
    max-width: 70px !important;
    max-height: 70px !important;
    width: 70px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ============================================================================
   MINI CART / ELEMENTOR MENU CART DRAWER FLEX & SCROLL FIX
   ============================================================================ */

/* Main drawer container: full height column flexbox */
.elementor-menu-cart__wrapper,
.elementor-menu-cart__container,
.elementor-menu-cart__main-container,
div.elementor-menu-cart__main-container,
.widget_shopping_cart,
.widget_shopping_cart_content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 100vh !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

/* Products list container: scrollable flex item */
.elementor-menu-cart__products,
.elementor-menu-cart__container .woocommerce-mini-cart,
.elementor-menu-cart__main-container .woocommerce-mini-cart,
.widget_shopping_cart_content .woocommerce-mini-cart,
.widget_shopping_cart_content .cart_list,
ul.woocommerce-mini-cart,
ul.cart_list,
ul.product_list_widget {
    flex: 1 1 auto !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 5px !important;
}

/* Scrollbar styling for cart product list */
.elementor-menu-cart__products::-webkit-scrollbar,
ul.woocommerce-mini-cart::-webkit-scrollbar {
    width: 6px;
}

.elementor-menu-cart__products::-webkit-scrollbar-thumb,
ul.woocommerce-mini-cart::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* Mini cart footer (Subtotal & Checkout Buttons): sticky at bottom */
.elementor-menu-cart__footer,
.elementor-menu-cart__subtotal,
.widget_shopping_cart_content .total,
.widget_shopping_cart_content .buttons,
.widget_shopping_cart_content p.total,
.widget_shopping_cart_content p.buttons {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 15px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
}