/* Global left and right padding for the whole website */

/* Site typography */
body,
html body {
    font-family: 'Outfit', sans-serif !important;
}

body {

    padding-left: 124px;

    padding-right: 124px;

}



@media (max-width: 991px) {

    body {

        padding-left: 16px;

        padding-right: 16px;

    }

}



@media (max-width: 575px) {

    body {

        padding-left: 12px;

        padding-right: 12px;

    }

}



/* Full-width elements that should break out of padding */

.header,

.banner-two,

.breadcrumb,

.inner-banner-two,

.app-alert-banner {

    /* margin-left: -24px; */

    /* margin-right: -24px; */

    width: calc(100% + 48px);

    /* padding-left: 24px; */

    /* padding-right: 24px; */

}

.nav-menu__link {

    color: var(--gray-400);

    font-weight: 500;

    width: 100%;

    /* padding: 16px 0; */

    width: 100%;

}

@media (max-width: 991px) {

    .header,

    .banner-two,

    .breadcrumb,

    .inner-banner-two,

    .app-alert-banner {

        margin-left: -16px;

        margin-right: -16px;

        width: calc(100% + 32px);

        padding-left: 16px;

        padding-right: 16px;

    }

}



@media (max-width: 575px) {

    .header,

    .banner-two,

    .breadcrumb,

    .inner-banner-two,

    .app-alert-banner {

        margin-left: -12px;

        margin-right: -12px;

        width: calc(100% + 24px);

        padding-left: 12px;

        padding-right: 12px;

    }

}



@media screen and (max-width: 1199px) {

    .section-heading {

        margin-bottom: 15px !important;

        margin-left: 2%

    }

}



.text-sm {

    font-size: 0.705rem !important;

}



.mobile-menu {

    position: fixed;

    background-color: hsl(var(--white));

    width: 300px;

    height: 100vh;

    overflow-y: auto;

    padding: 24px;

    z-index: 9999;

    transform: translateX(-110%);

    transition: 0.2s linear;

    padding-block-end: 68px;

}



.mobile-menu.active {

    transform: translateX(-5%);

}

.list-grid-wrapper {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 10px;

}



@media screen and (max-width: 767px) {

    .list-grid-wrapper {

        grid-template-columns: repeat(auto-fit, minmax(130px, 2fr));

    }

}



.h-44 {

    height: 2.15rem !important;

}

.w-44 {

    width: 2rem !important;

}

@media screen and (max-width: 1499px) {

    .product-card__cart {

        font-size: 12px;

        padding: 7px 8px !important;

    }

}



.product-card__content {

    width: -webkit-fill-available;

}



.slick-initialized.slick-slider .slick-slide {

    cursor: grab;

    height: auto;

    margin: 0 5px !important;

}



.form-control {

    display: block;

    width: 100%;

    padding: .375rem .75rem;

    font-size: 0.7rem !important; 

    font-weight: 400;

    line-height: 1.5;

    color: var(--bs-body-color);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background-color: var(--bs-body-bg);

    background-clip: padding-box;

    border: var(--bs-border-width) solid var(--bs-border-color);

    border-radius: var(--bs-border-radius);

    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}

.end-n4 {

    inset-inline-end: -10px !important;

}

.top-n6 {

    inset-block-start: -10px !important     ;

}



/* Consistent Select2 styling for sort dropdowns - Match form-control with px-10 py-10 exactly */

#sorting + .select2-container,

#vendorProductSort + .select2-container {

    width: auto !important;

    display: inline-block;

    vertical-align: middle;

}



#sorting + .select2-container .select2-selection,

#vendorProductSort + .select2-container .select2-selection {

    border: 1px solid #ced4da !important;

    border-radius: 0.375rem !important;

    padding: 0.625rem 2.5rem 0.625rem 0.625rem !important;

    font-size: 0.875rem !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

    min-height: calc(1.5em + 1.25rem + 2px) !important;

    height: auto !important;

    background-color: #fff !important;

    color: #212529 !important;

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;

    box-sizing: border-box !important;

}



#sorting + .select2-container .select2-selection:hover,

#vendorProductSort + .select2-container .select2-selection:hover {

    border-color: #86b7fe !important;

}



#sorting + .select2-container.select2-container--focus .select2-selection,

#vendorProductSort + .select2-container.select2-container--focus .select2-selection,

#sorting + .select2-container.select2-container--open .select2-selection,

#vendorProductSort + .select2-container.select2-container--open .select2-selection {

    border-color: #86b7fe !important;

    outline: 0 !important;

    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;

}



#sorting + .select2-container .select2-selection__rendered,

#vendorProductSort + .select2-container .select2-selection__rendered {

    padding: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    line-height: 1.5 !important;

    color: #212529 !important;

    font-size: 0.875rem !important;

    display: block !important;

}



#sorting + .select2-container .select2-selection__arrow,

#vendorProductSort + .select2-container .select2-selection__arrow {

    height: 100% !important;

    right: 0.625rem !important;

    top: 0 !important;

    width: 20px !important;

}



#sorting + .select2-container .select2-selection__arrow b,

#vendorProductSort + .select2-container .select2-selection__arrow b {

    border-color: #212529 transparent transparent transparent !important;

    border-style: solid !important;

    border-width: 5px 5px 0 5px !important;

    height: 0 !important;

    left: 50% !important;

    margin-left: -5px !important;

    margin-top: -2px !important;

    position: absolute !important;

    top: 50% !important;

    width: 0 !important;

}



.btn2 {

    position: relative;

    border-radius: 8px;

    border: 2px solid #e5e7eb;

    font-weight: 500;

    font-family: var(--body-font);

    z-index: 1;

    transition: all 0.2s ease;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



/* Product Variant Color Buttons */

.product-variant-color-btn {

    width: 50px;

    height: 50px;

    min-width: 50px;

    border-radius: 12px;

    border: 2px solid #e5e7eb !important;

    cursor: pointer;

    position: relative;

    transition: all 0.2s ease;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    padding: 0 !important;

    margin: 0;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.product-variant-color-btn:hover {

    border-color: #6366f1 !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);

    z-index: 2;

}



.product-variant-color-btn.selected {

    border-color: #6366f1 !important;

    border-width: 3px !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

    z-index: 2;

}



.product-variant-color-btn .product-variant-check-icon {

    pointer-events: none !important;

    z-index: 3;

    display: none;

}



.product-variant-color-btn.selected .product-variant-check-icon {

    display: block !important;

}



/* Product Variant Size/Weight Buttons */

.product-variant-btn {

    min-width: 50px;

    padding: 10px 16px;

    border-radius: 8px;

    border: 2px solid #e5e7eb !important;

    background-color: #ffffff;

    color: #374151;

    font-weight: 500;

    font-size: 14px;

    transition: all 0.2s ease;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.product-variant-btn:hover {

    border-color: #6366f1 !important;

    background-color: #f5f7fa;

    transform: translateY(-1px);

    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.15);

}



.product-variant-btn.btn-primary,

.product-variant-btn.selected {

    border-color: #6366f1 !important;

    background-color: #6366f1 !important;

    color: #ffffff !important;

    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);

}



/* Variant Container Enhancements */

#productVariants {

    display: flex;

    flex-direction: column;

    

}



#productVariants .variant-group {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



#productVariants .variant-label {

    font-size: 14px;

    font-weight: 600;

    color: #374151;

    margin-bottom: 0px !important;

}



#productVariants .variant-options {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}



/* Product Quantity and Add to Cart Styles */

.product-quantity-input {

    border: 1px solid #d1d5db;

    border-radius: 6px;

    color: #374151;

    font-size: 1.25rem;

    font-weight: 500;

    text-align: center;

    padding: 0;

    outline: none;

    transition: border-color 0.2s ease;

}



.product-quantity-input:focus {

    border-color: hsl(var(--main-h), var(--main-s), var(--main-l));

    box-shadow: 0 0 0 3px rgba(72, 127, 255, 0.1);

}



.product-quantity-input::-webkit-inner-spin-button,

.product-quantity-input::-webkit-outer-spin-button {

    opacity: 1;

    height: 48px;

}



.btn-add-to-cart {

    text-decoration: none;

    font-weight: 500;

    transition: all 0.2s ease;

    border: none;

}



.btn-add-to-cart:hover {

    text-decoration: none;

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

}



.btn-add-to-cart:active {

    transform: translateY(0);

}



.add-to-cart-notification {

    pointer-events: none;

    z-index: 10;

    font-size: 0.875rem;

}



.add-to-cart-notification.visible {

    visibility: visible !important;

    animation: slideInNotification 0.3s ease-out forwards;

}



.add-to-cart-notification span:first-child {

    display: inline-block;

    padding: 4px 8px;

    border-radius: 9999px;

    font-size: 0.75rem;

    font-weight: 600;

}



@keyframes slideInNotification {

    0% {

        transform: translateX(100%);

        opacity: 0;

    }

    100% {

        transform: translateX(0);

        opacity: 1;

    }

}



@media (max-width: 768px) {

    .add-to-cart-notification {

        left: 10px !important;

    }

    

    .btn-add-to-cart {

        font-size: 0.875rem;

    }

}



/* Color variant with label enhancement */

.product-variant-color-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

}



.product-variant-color-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 8px;

    min-width: 80px;

    max-width: 150px;

    width: 100%;

    border: 2px solid #e5e7eb;

    border-radius: 8px;

    transition: all 0.2s ease;

    cursor: pointer;

    background-color: #ffffff;

}



.product-variant-color-card:hover {

    border-color: #6366f1;

    background-color: #f5f7fa;

    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);

    transform: translateY(-2px);

}



.product-variant-color-card.selected {

    border-color: #6366f1;

    border-width: 3px;

    background-color: #f0f4ff;

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);

}



.product-variant-color-card .color-swatch {

    width: 40px;

    height: 40px;

    border-radius: 8px;

    border: 2px solid rgba(0, 0, 0, 0.1);

    margin-bottom: 6px;

    flex-shrink: 0;

}



.product-variant-color-card .color-label {

    font-size: 12px;

    color: #374151;

    font-weight: 500;

    text-align: center;

}



/* Cart Notification Styles */

.cart-notification {

    position: fixed;

    top: 80px;

    right: 20px;

    z-index: 9999;

    opacity: 0;

    transform: translateX(400px);

    transition: all 0.3s ease-in-out;

    pointer-events: none;

}



.cart-notification.show {

    opacity: 1;

    transform: translateX(0);

    pointer-events: auto;

}



.cart-notification-content {

    background: white;

    padding: 16px 20px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 300px;

    max-width: 400px;

}



.cart-notification-content i {

    font-size: 24px;

    flex-shrink: 0;

}



.cart-notification-content span {

    font-size: 14px;

    font-weight: 500;

    color: #374151;

}



/* Cart Sidebar Styles */

.cart-sidebar {

    position: fixed;

    top: 0;

    right: 0;

    width: 0;

    height: 100vh;

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease-in-out;

}



.cart-sidebar.active {

    width: 100%;

    opacity: 1;

    visibility: visible;

}



.cart-sidebar-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;

    transition: opacity 0.3s ease-in-out;

    cursor: pointer;

}



.cart-sidebar.active .cart-sidebar-overlay {

    opacity: 1;

}



.cart-sidebar-content {

    position: absolute;

    top: 0;

    right: 0;

    width: 25%;

    min-width: 350px;

    max-width: 450px;

    height: 100%;

    background: white;

    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);

    display: flex;

    flex-direction: column;

    transform: translateX(100%);

    transition: transform 0.3s ease-in-out;

}



.cart-sidebar.active .cart-sidebar-content {

    transform: translateX(0);

}



.cart-sidebar-body {

    flex: 1;

    overflow-y: auto;

    padding: 0;

    min-height: 100%;

}



.cart-added-item-section {

    border-bottom: 1px solid #e2e8f0;

}



.cart-best-sellers-section {

    border-top: 1px solid #f0f0f0;

}



body.cart-sidebar-open {

    overflow: hidden;

}



/* Cart sidebar button styles */

.cart-sidebar .cart-sidebar-continue {

    background: white;

    border: 1px solid #0066cc;

    color: #0066cc;

    transition: all 0.2s ease;

}



.cart-sidebar .cart-sidebar-continue:hover {

    background: #0066cc;

    color: white;

}



.cart-sidebar a[href="cart.php"] {

    background: #0066cc;

    border: 1px solid #0066cc;

    color: white;

    text-decoration: none;

    transition: all 0.2s ease;

}



.cart-sidebar a[href="cart.php"]:hover {

    background: #0052a3;

    border-color: #0052a3;

}



@media (max-width: 768px) {

    .cart-sidebar-content {

        width: 100%;

        min-width: 100%;

        max-width: 100%;

    }

}



@media (max-width: 768px) {

    .cart-notification {

        top: 60px;

        right: 10px;

        left: 10px;

        transform: translateY(-100px);

    }

    

    .cart-notification.show {

        transform: translateY(0);

    }

    

    .cart-notification-content {

        min-width: auto;

        max-width: 100%;

    }

}

/* ── Zone Select2 – match common-input appearance ─────────────────────────── */

#checkoutAddZone + .select2-container,
#add-zone + .select2-container {
    width: 100% !important;
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#checkoutAddZone + .select2-container .select2-selection--single,
#add-zone + .select2-container .select2-selection--single {
    height: auto !important;
    padding: 11px 40px 11px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #1a1a2e !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#checkoutAddZone + .select2-container .select2-selection--single:hover,
#checkoutAddZone + .select2-container.select2-container--focus .select2-selection--single,
#checkoutAddZone + .select2-container.select2-container--open .select2-selection--single,
#add-zone + .select2-container .select2-selection--single:hover,
#add-zone + .select2-container.select2-container--focus .select2-selection--single,
#add-zone + .select2-container.select2-container--open .select2-selection--single {
    border-color: var(--main-600, #38c1c8) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(56, 193, 200, 0.15) !important;
}

#checkoutAddZone + .select2-container .select2-selection__rendered,
#add-zone + .select2-container .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.5 !important;
    color: #1a1a2e !important;
    font-size: 0.875rem !important;
}

#checkoutAddZone + .select2-container .select2-selection__placeholder,
#add-zone + .select2-container .select2-selection__placeholder {
    color: #9ca3af !important;
}

#checkoutAddZone + .select2-container .select2-selection__arrow,
#add-zone + .select2-container .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

/* Hide the default CSS-border triangle */
#checkoutAddZone + .select2-container .select2-selection__arrow b,
#add-zone + .select2-container .select2-selection__arrow b {
    display: none !important;
}

/* SVG chevron pinned dead-centre of the arrow container */
#checkoutAddZone + .select2-container .select2-selection__arrow::after,
#add-zone + .select2-container .select2-selection__arrow::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform 0.2s ease !important;
}

/* Flip chevron when open */
#checkoutAddZone + .select2-container.select2-container--open .select2-selection__arrow::after,
#add-zone + .select2-container.select2-container--open .select2-selection__arrow::after {
    transform: translate(-50%, -50%) rotate(180deg) !important;
}

#checkoutAddZone + .select2-container .select2-selection__clear,
#add-zone + .select2-container .select2-selection__clear {
    margin-right: 4px !important;
    color: #9ca3af !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.select2-dropdown {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    font-size: 0.875rem !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    font-size: 0.875rem !important;
    outline: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--main-600, #38c1c8) !important;
    box-shadow: 0 0 0 3px rgba(56, 193, 200, 0.15) !important;
}

.select2-results__option {
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
}

.select2-results__option--highlighted {
    background-color: var(--main-600, #38c1c8) !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    #checkoutAddZone + .select2-container,
    #add-zone + .select2-container {
        width: 100% !important;
    }
    .select2-dropdown {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* ── Delivery message notice ─────────────────────────────────────────────── */
.checkout-delivery-msg {
    border-left: 3px solid var(--main-600, #2ea8ae);
    background: linear-gradient(135deg, rgba(46,168,174,0.06) 0%, rgba(56,193,200,0.03) 100%);
    border-radius: 0 10px 10px 0;
    padding: 10px 14px 10px 14px;
}
.checkout-delivery-msg__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--main-600, #2ea8ae);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    margin-bottom: 7px;
}
.checkout-delivery-msg__badge i {
    font-size: 0.85rem;
}
.checkout-delivery-msg__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #1a4a4d;
    font-weight: 500;
}