/*
Theme Name: elswefy
Theme URI: 
Author: Bembo
Author URI: 
Description: Sunglasses
Requires at least: 6.9.1
Tested up to: 7.0
Requires PHP: 5.7
Version: 0.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elswefy
Tags: 
*/
*,
:after,
:before {
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    z-index: 0;
}

.home *,
.single-product * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

:root :where(.wp-element-button, .wp-block-button__link) {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color .2s;
}

:root :where(.wp-element-button, .wp-block-button__link):hover {
    background-color: var(--wp--preset--color--foreground) !important;
}

.wc-block-mini-cart__badge {
    font-size: .6rem;
    background: #cc1818;
}

/* Container to hold the select and the icon */
.woocommerce-ordering {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 280px;
}

.woocommerce-ordering select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    /* Extra padding on the left for the icon */
    padding: 12px 16px 12px 30px;
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The Sort Icon (Left Side) */
.woocommerce-ordering::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    /* This uses a standard modern sort icon SVG */
    background-color: #6b7280;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E") no-repeat center;
    pointer-events: none;
    z-index: 1;
}


/* Subtle Right Arrow (Optional, to show it's a dropdown) */
/* .woocommerce-ordering::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #9ca3af;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
    pointer-events: none;
} */

/* Hover & Focus States */
.select:hover {
    border-color: #b0b0b0;
}

.select:focus {
    border-color: #007AFF;
    /* Modern blue accent */
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

@keyframes components-button__busy-animation {
    0% {
        background-position: 200px 0;
    }
}

@media not (prefers-reduced-motion) {

    .wc-block-components-checkout-place-order-button--loading {
        animation: components-button__busy-animation 2.5s linear infinite;
        background-image: linear-gradient(-45deg, var(--wp-admin-theme-foreground, #1e1e1e) 33%, var(--wp-admin-theme-color-contrast, #121212) 33%, var(--wp-admin-theme-color-contrast, #121212) 70%, var(--wp-admin-theme-foreground, #1e1e1e) 70%);
        background-size: 100px 100%;
        border-color: var(--wp-components-color-foreground, #1e1e1e);
    }
}

body :not(#wpadminbar) a:not(:has(*)):not([data-wp-on--click]) {
    position: relative;
}

body :not(#wpadminbar) a::before,
body :not(#wpadminbar) a:not(:has(*)):not([data-wp-on--click])::before {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

body :not(#wpadminbar) a.link::before,
body :not(#wpadminbar) a:not(:has(*)):not([data-wp-on--click])::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--wp--preset--color--mostarda);
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}


body :not(#wpadminbar) a:hover,
body :not(#wpadminbar) a:not(:has(*)):not([data-wp-on--click]):hover {
    color: #333;
    /* Color on hover */
}

body :not(#wpadminbar) a:not(:has(*)):not([data-wp-on--click]):hover::before {
    transform: scaleX(1);
    /* Expand width on hover */
}

/* Sticky Header Fixes for Block Theme */
.wp-site-blocks {
    /* Prevent overflow:hidden from breaking position:sticky on children */
    overflow-x: clip !important;
}

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 999;
    /* transition must be applied to the inner wrapper for smooth animation, 
       but we can keep the header sticky at the top */
}

.site-header-wrapper {
    position: relative;
    background-color: var(--wp--preset--color--base, var(--wp--preset--color--base));
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}

/* Ensure the header has a solid background when the mega menu is open or hovered */
.site-header-wrapper:has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]),
.site-header-wrapper:has(.wp-block-elswefy-blocks-mega-menu:hover) {
    background: none !important;

}

.site-header-wrapper.is-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.site-header-wrapper .site-header-inner {
    transition: padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.site-header-wrapper .site-header-inner {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 15px !important;


}

/* Ensure right actions line up correctly */
.header-right-actions {
    gap: 6px;
    align-items: center;
}

.site-header-inner>.header-logo-container {
    isolation: isolate;
}

.header-right-actions>* {
    flex: 0 0 auto;
}

/* Adjust mini cart z-index so it shows over the sticky header */
.wc-block-mini-cart__drawer {
    z-index: 99999 !important;
}

/* Mobile Navigation and Header Layout adjustments */
@media screen and (max-width: 781px) {
    :where(.wp-block-group.has-background) {
        padding: 1em 1.25em;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    /* Reorder header elements to put navigation on left, logo in center, actions on right */
    .site-header-inner {
        align-items: center !important;
    }

    .site-header-inner>.header-logo-container,
    .site-header-inner>.header-nav-container,
    .site-header-inner>.header-right-actions {
        /* flex: 1 1 0% !important; */
        display: flex !important;
    }

    .site-header-inner>.header-nav-container {
        order: 1 !important;
        justify-content: flex-start !important;
    }

    .site-header-inner>.header-logo-container {
        order: 2 !important;
        justify-content: center !important;
        flex-grow: 1;
        padding-left: 40px;
        isolation: isolate;
    }

    .site-header-inner>.header-right-actions {
        order: 3 !important;
        justify-content: flex-end !important;
    }

    /* Base styling for closed drawer (override WP core hidden state) */
    .wp-block-navigation__responsive-container {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 99999 !important;
        background-color: rgba(0, 0, 0, 0) !important;
        /* Invisible backdrop */
        visibility: hidden;
        transition: background-color 0.4s ease-in-out, visibility 0.4s ease-in-out !important;
        /* prevent clicking when hidden */
        pointer-events: none;
    }

    /* The actual sliding drawer panel (closed state) */
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: 90vw;
        min-width: 365px;
        height: 100vh;
        background-color: var(--wp--preset--color--base, var(--wp--preset--color--base));
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
        padding: 40px 20px 20px;
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out !important;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        /* pointer events normal for inner content */
        pointer-events: auto;
    }

    /* Open Drawer state */
    .wp-block-navigation__responsive-container.is-menu-open {
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.5) !important;
        /* Dark backdrop */
        pointer-events: auto;

        /* Allow clicking backdrop to close */
    }

    .wp-block-navigation__responsive-container.is-menu-open>li>a {
        filter: none;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        transform: translateX(0);
        animation-duration: .3s;
        animation-name: slideinLeft;
        overflow-y: scroll;
    }

    @keyframes slideinLeft {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /* Move inner content positioning */
    .wp-block-navigation__responsive-container-content {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Positioning the close button inside the drawer */
    .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
        color: var(--wp--preset--color--black, #000000);
    }
}

/* Ensure the header (and its mobile drawer) stays above the floating animated logo when open */
html.has-modal-open .wp-block-template-part {
    z-index: 100000 !important;
}

/* Fix mobile nav drawer being clipped when header has backdrop-filter on scroll */
/* html.has-modal-open body .site-header-wrapper.is-scrolled {
    backdrop-filter: none !important;
    background-color: var(--wp--preset--color--base, var(--wp--preset--color--base)) !important;
} */

/* Lenis Smooth Scroll Recommended Base Styles */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
    /* Overrides native smooth scroll */
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* Parallax Video Container */
.is-style-parallax-video {
    position: relative;
    overflow: hidden !important;
}

.is-style-parallax-video video.wp-block-cover__video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 120vh;
    /* Taller than container for parallax */
    object-fit: cover;
    z-index: 0;
    will-change: transform;
    /* transform is handled by JS */
}

/* Smooth Text Animations */
.animate-text-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1), transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-text-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional delays for staggered animations inside a container */
.stagger-delay-1 {
    transition-delay: 0.1s;
}

.stagger-delay-2 {
    transition-delay: 0.2s;
}

.stagger-delay-3 {
    transition-delay: 0.3s;
}

/* --- Transparent Header on Frontpage --- */

/* 1. Make the header Wrapper float over the hero */
body.home .site-header-wrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 33%) 0%, rgb(0 0 0 / 0%) 95%) !important;
    z-index: 1000;
}

/* 2. When scrolled, it becomes fixed and solid again */
body .site-header-wrapper.is-scrolled {
    position: fixed !important;
    background: none !important;

}

body .site-header-wrapper.is-scrolled::before {
    opacity: 1;
}

body .site-header-wrapper::before {
    transition: opacity 0.3s ease-in-out;
    content: "";
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(8px);
    background-color: rgba(230, 230, 230, 0.1) !important;
    pointer-events: none;
}


body:not(.home) .site-header-wrapper.is-scrolled {
    position: relative !important;
}

/* 3. Initial state text/icon color (white over video) */
body.home .site-header-wrapper:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container>li>a,
body.home .site-header-wrapper:not(.is-scrolled) .wp-block-navigation__container>li>button,
body.home .site-header-wrapper:not(.is-scrolled) .wc-block-customer-account__account-icon,
body.home .site-header-wrapper:not(.is-scrolled) .wc-block-mini-cart__button,
body.home .site-header-wrapper:not(.is-scrolled) .wp-element-button {
    color: var(--wp--preset--color--base) !important;
}

body.home .site-header-wrapper:not(.is-scrolled) .wc-block-mini-cart__amount {
    color: var(--wp--preset--color--base) !important;
}

body.home .site-header-wrapper:not(.is-scrolled) .custom-logo,
body.home .site-header-wrapper:not(.is-scrolled) .wp-block-elswefy-ajax-search,
body.home .site-header-wrapper:not(.is-scrolled) button.wp-block-navigation__responsive-container-open,
body.home .site-header-wrapper:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open)>li>a {
    filter: brightness(0) invert(1);
}

/* Revert text/logo colors when mega menu is open on home page (since background becomes solid white) */
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wp-block-navigation__container>li>a,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wp-block-navigation__container>li>button,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wc-block-customer-account__account-icon,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wc-block-mini-cart__button,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wc-block-mini-cart__amount,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wp-element-button,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wp-block-navigation__container>li>a,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wp-block-navigation__container>li>button,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wc-block-customer-account__account-icon,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wc-block-mini-cart__button,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wc-block-mini-cart__amount,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wp-element-button {
    color: var(--wp--preset--color--black, #333333) !important;
}

body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .custom-logo,
body.home .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .custom-logo {
    filter: none !important;
}

/* --- Single Product Page --- */
body.single-product .site-header-wrapper {
    background-color: rgb(230, 230, 230, 0);
}

body.single-product .wp-block-woocommerce-product-price>* {
    font-size: var(--wp--preset--font-size--medium);
}

body.single-product .single-product-columns .wp-block-woocommerce-product-price>* {
    font-size: var(--wp--preset--font-size--large);
}

body.single-product .wp-block-woocommerce-product-details>* {
    padding-top: 12px;
    padding-bottom: 12px;
}

body.single-product .wp-block-woocommerce-product-details table {
    /* Collapses the separate borders of adjacent cells into a single border */
    border-collapse: collapse;
    width: 100%;
    /* Makes the table span the full width of its container */
}

body.single-product .wp-block-woocommerce-product-details th,
body.single-product .wp-block-woocommerce-product-details td {
    border: 1px solid #ddd;
    /* Adds a light grey border to all headers and data cells */
    padding: 12px;
    /* Adds space between the content and cell borders */
    text-align: left;
    /* Aligns text to the left (th is center by default) */
}

body.single-product .wp-block-woocommerce-product-details th {
    background-color: var(--wp--preset--color--light-gray, #e6e6e6);
    /* Green background for table headers */
    color: var(--wp--preset--color--black, #333333);
    /* White text color for headers */
}

.wp-block-navigation__responsive-container .wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
    display: none;
}

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

    /* 1. Make the header Wrapper float over the hero */
    body.single-product .site-header-wrapper {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        background: none;
    }

    body.single-product {
        background-color: var(--wp--preset--color--light-gray, #e6e6e6);
    }

    body.single-product .site-header-wrapper.is-scrolled {
        position: fixed !important;
    }

    body.single-product .single-product-columns .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:not(.pre-load) {
        background: var(--wp--preset--color--base, #f9f9f9);
    }



    /* 3. Initial state text/icon color (white over video) */
    body.single-product .site-header-wrapper:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container>li>a,
    body.single-product .site-header-wrapper:not(.is-scrolled) .wp-block-navigation__container>li>button,
    body.single-product .site-header-wrapper:not(.is-scrolled) .wc-block-customer-account__account-icon,
    body.single-product .site-header-wrapper:not(.is-scrolled) .wp-element-button {
        color: var(--wp--preset--color--base) !important;
    }

    body.single-product .site-header-wrapper:not(.is-scrolled) .wc-block-mini-cart__amount {
        color: var(--wp--preset--color--base) !important;
    }

    /* Revert text/logo colors when mega menu is open on home page (since background becomes solid white) */
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wp-block-navigation__container>li>a,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wp-block-navigation__container>li>button,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wc-block-customer-account__account-icon,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wc-block-mini-cart__button,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wc-block-mini-cart__amount,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu a[aria-expanded="true"]) .wp-element-button,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wp-block-navigation__container>li>a,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wp-block-navigation__container>li>button,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wc-block-customer-account__account-icon,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wc-block-mini-cart__button,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wc-block-mini-cart__amount,
    body.single-product .site-header-wrapper:not(.is-scrolled):has(.wp-block-elswefy-blocks-mega-menu:hover) .wp-element-button {
        color: var(--wp--preset--color--black, #333333) !important;
    }

    :where(.is-vertical.wc-block-product-gallery) .wc-block-next-previous-buttons.wc-block-next-previous-buttons,
    :where(.wc-block-product-gallery) .wc-block-next-previous-buttons.wc-block-next-previous-buttons {
        display: flex;
    }

    body.single-product .wc-block-next-previous-buttons__button {
        background-color: transparent;
    }

    body.single-product .wc-block-next-previous-buttons__icon {
        padding: 0;
    }

    body.single-product .wc-block-product-gallery {
        background-color: var(--wp--preset--color--light-gray);
    }

    body.single-product h1.wp-block-post-title {
        font-size: 30px !important;
    }

    .wp-block-navigation__responsive-container .wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
        display: unset;
    }


}



.wc-block-components-quantity-selector {
    border-radius: 0;
}

/* --- Floating Logo Animation Clone --- */
.floating-logo-clone {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    transform-origin: top left;
    will-change: transform, width, height, filter, opacity;
    pointer-events: none;

    /* Simulate the entrance fading of the cover logo */
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.floating-logo-clone.is-visible {
    opacity: 1;
}

.bigbang {
    position: absolute;
    transform: translate(16%, -17%);
}

/* Initially white to match cover text on home page */
/* body.home .floating-logo-clone {
    filter: brightness(0) invert(1);
} */

/* Return to dark logo color when scrolled, to match the header logo */
/* body.home .floating-logo-clone.is-scrolled {
    filter: none;
} */

/* WooCommerce Product Grid Mobile - Horizontal Scroll Row */
@media screen and (max-width: 781px) {

    /* Make the outer wc-block-grid wrapper not clip the horizontal scroll */
    .wc-block-grid,
    .wc-block-grid.has-4-columns,
    .wc-block-grid.has-3-columns,
    .wc-block-grid.has-2-columns {
        overflow: visible !important;
    }

    /* Turn the product list into a horizontally scrolling row */
    .wc-block-grid .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-3-columns .wc-block-grid__products,
    .wc-block-grid.has-2-columns .wc-block-grid__products,
    ul.wc-block-grid__products {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding: 0 16px 16px !important;
        margin: 0 -16px !important;
        /* Hide the scrollbar visually but keep it functional */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;

    }

    /* Hide webkit scrollbar */
    .wc-block-grid .wc-block-grid__products::-webkit-scrollbar {
        display: none !important;
    }

    /* Each product card: fixed width, snaps into place */
    .wc-block-grid li.wc-block-grid__product,
    .wc-block-grid.has-4-columns li.wc-block-grid__product,
    .wc-block-grid.has-3-columns li.wc-block-grid__product,
    .wc-block-grid.has-2-columns li.wc-block-grid__product,
    li.wc-block-grid__product {
        flex: 0 0 75vw !important;
        width: 75vw !important;
        max-width: 75vw !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: var(--wp--preset--color--base, #F2F1F3) !important;
        border: none !important;
    }

    /* Support for category grids */
    .wc-block-product-categories-list.is-grid,
    ul.wc-block-product-categories {
        display: flex !important;
        flex-direction: column !important;
    }

    .wc-block-product-categories-list-item,
    li.wc-block-product-categories-list-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    .bigbang {
        position: absolute;
        transform: translateX(100px);
    }

    .bigbang span {
        font-size: 50vw;
        transform: translate(-35vw, 5px);
        position: absolute;
    }
}


/* --- Horizontal Scroll Section --- */
.horizontal-scroll-section {
    position: relative;
    width: 100%;
}

.horizontal-scroll-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Center horizontally scrolling content vertically */
}

.horizontal-scroll-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    will-change: transform;
    gap: 30px;
    padding: 0 5vw;
    /* Optional padding so cards don't touch the screen edges initially */
}

/* For Gutenberg users: ensure child elements don't crush */
.horizontal-scroll-track>* {
    flex: 0 0 auto;
    width: auto;
}

/* --- Support WooCommerce Grids inside Horizontal Track --- */
.horizontal-scroll-track .wc-block-grid,
.horizontal-scroll-track .wc-block-grid.has-4-columns,
.horizontal-scroll-track .wc-block-grid.has-3-columns,
.horizontal-scroll-track .wc-block-grid.has-2-columns {
    overflow: visible !important;
}

.horizontal-scroll-track .wc-block-grid .wc-block-grid__products,
.horizontal-scroll-track ul.wc-block-product-categories {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.horizontal-scroll-track .wc-block-grid li.wc-block-grid__product,
.horizontal-scroll-track li.wc-block-product-categories-list-item {
    flex: 0 0 350px !important;
    /* Set a fixed width for cards inside the scrolling track */
    width: 350px !important;
    max-width: 350px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make category card images consistent inside scroll track */
.horizontal-scroll-track li.wc-block-product-categories-list-item img {
    height: 350px;
    object-fit: cover;
    border-radius: 0;
    /* Polish the look slightly */
}

/* --- WooCommerce Creative Pagination --- */
.wp-block-query-pagination {
    margin-top: 3rem;
    padding: 1.5rem 0;
    gap: 1rem;
    align-items: center;
}

.wp-block-query-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--wp--preset--color--base, var(--wp--preset--color--base));
    padding: 0.5rem;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--wp--preset--color--black, #333333);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
}

.wp-block-query-pagination-numbers .page-numbers:not(.current):hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: var(--wp--preset--color--black, #000);
}

.wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--wp--preset--color--black, #000000);
    color: var(--wp--preset--color--base, var(--wp--preset--color--base));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    color: var(--wp--preset--color--black, #000);
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--black, #000);
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    background-color: var(--wp--preset--color--black, #000);
    color: var(--wp--preset--color--base, var(--wp--preset--color--base));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.wp-block-query-pagination-next::after {
    content: "→";
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.wp-block-query-pagination-previous::before {
    content: "←";
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.wp-block-query-pagination-next:hover::after {
    transform: translateX(4px);
}

.wp-block-query-pagination-previous:hover::before {
    transform: translateX(-4px);
}

/* --- WooCommerce Product Single page --- */
:where(.wc-block-product-gallery-large-image) .wc-block-components-product-image.wc-block-components-product-image.wc-block-components-product-image--aspect-ratio-auto img {
    object-fit: cover !important;
    aspect-ratio: 4/5 !important;
}

.wp-block-breadcrumbs.wc-block-breadcrumbs {
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}

@media screen and (max-width: 781px) {
    .wp-block-breadcrumbs.wc-block-breadcrumbs {
        display: none !important;
    }

    .wp-block-woocommerce-product-gallery.wc-block-product-gallery.is-layout-flex.wp-container-woocommerce-product-gallery-is-layout-edc3bc78.wp-block-woocommerce-product-gallery-is-layout-flex {
        gap: 0 !important;
    }
}

.wc-block-grid__product-price del {
    color: var(--wp--preset--color--sale, #ce6868);
}

/* -- Global WooCommerce Styles -- */
:root :where(.wc-block-components-product-image) img {
    aspect-ratio: 4 / 5;
}

/* --- WhatsApp Floating Button --- */
.elswefy-whatsapp-float button {
    position: fixed !important;
    bottom: 40px !important;
    left: 40px !important;
    height: 44px !important;
    width: 44px !important;
    color: #FFF !important;
    text-align: center !important;
    font-size: 30px !important;
    z-index: 99 !important;
    border-radius: 44px !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    background-color: #47cd79 !important;

    /* Smooth Fade Slide Up Animation */
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    visibility: hidden;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.5s ease,
        visibility 0.5s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

.elswefy-whatsapp-float button.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.elswefy-whatsapp-float button:hover {
    background-color: #128c7e !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

.elswefy-whatsapp-float button.is-visible:hover {
    transform: translateY(-5px) scale(1.1) !important;
}

.elswefy-whatsapp-float button svg {
    width: 32px !important;
    height: 32px !important;
}

@media screen and (max-width: 781px) {
    .elswefy-whatsapp-float button {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    .elswefy-whatsapp-float button svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* --- Editor Overrides --- */
/* Ensure the button doesn't float over everything in the editor */
.editor-styles-wrapper .elswefy-whatsapp-float button {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    margin: 20px 0 !important;
    z-index: 1 !important;
}

/* Ensure the container doesn't take up too much vertical space in the editor */
.editor-styles-wrapper .wp-block-elswefy-whatsapp-button-container {
    display: flex !important;
    justify-content: center !important;
    padding: 10px !important;
    background: #f0f0f0 !important;
    border: 1px dashed #ccc !important;
}

/* --- Fix Product Grid Layout on Mobile --- */
/* Sunglasses the responsive grid wrapper inside the product template */
@media (max-width: 550px) {
    .wc-block-product-template__responsive.columns-2 {
        grid-template-columns: 1fr !important;
    }
}