.box-1-1:before{content:"";display:block}.gallery-section.container{width:100%;padding-right:unset;padding-left:unset}.gallery.row{margin:unset;gap:100px;flex-direction:row!important;flex-wrap:nowrap;justify-content:center;align-items:center;padding:1rem 1rem 0}@media(max-width:991px){.gallery.row{flex-direction:row!important}}.gallery.row>.gallery-item{margin:unset;padding:unset;flex:unset;max-width:unset;border-radius:11px}.gallery.row .box-1-1::before{display:none}.gallery.row .box-1-1>.content{position:unset}.gallery.row .box-1-1>.content img{object-fit:contain!important;transform:scale(1);transition:.3s all ease-in-out;border-radius:6px}.gallery.row .box-1-1>.content img:hover{transform:scale(1.05)}button.more-button, a.more-button{min-width:149px;border-radius:5px;font-size:1.286rem;padding:4px}.breadcrumb-item.active{color:#000}.breadcrumb{background-color:#fff}.header-wrapper{background-color:#fff}#product-description ~.product-selection.mt-5{display:none}
/* --- 1. GLOBAL: HIDE CLUTTER --- */
.product-item .add-to-wishlist, 
.product-item .btn-product-card-select-variant,
.product-item .product-card-rating-wrapper,
.add-to-cart,
.product-item small:not(.text-short-description) { 
    display: none !important; 
}

/* --- 2. MODEL NUMBER: NAVY BLUE, BOLD, LARGE --- */
.product-title {
    margin-bottom: 0 !important; /* Remove bottom space */
    padding-bottom: 0 !important;
}
#products-list {
    margin-top: 30px !important;
}
.product-title span {
    color: #000080 !important; /* Navy Blue */
    font-weight: bold !important;
    font-size: 1.4rem !important; /* Large and bold */
    display: block !important;
    text-align: center !important;
}
.products-details-page h1 {
    color: #000080 !important;
    font-weight: bold !important;
}

/* --- 3. PRICE: PULL UP TO MODEL NUMBER --- */
.product-crd-spec {
    text-align: center !important;
    margin-top: -10px !important; /* NEGATIVE MARGIN: Pulls price up */
    padding-top: 0 !important;
}

.product-price span {
    font-size: 1.3rem !important; /* Makes the price larger */
    font-weight: bold !important;
    color: #000 !important;
}

/* --- 4. GRID LAYOUT: DESKTOP (3) & MOBILE (2) --- */
@media (min-width: 992px) {
    #products-list.products-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 991px) {
    #products-list.products-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Reset original widths to ensure photos stay large */
.products-list .prod-col, 
.products-list .prod-col-attr, 
.products-list .prod-col-tb {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --- 5. IMAGE SETTINGS: PREVENT CROPPING --- */
.product-item .box-1-1 {
    aspect-ratio: 2 / 3 !important; 
    overflow: hidden !important;
    background: #ffffff !important;
}

.product-item .box-1-1 .content img {
    object-fit: contain !important; 
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.5s ease !important;
}

.product-item:hover .box-1-1 .content img {
    transform: scale(1.08) !important;
}
/* Fix for Product Information / Metafields on Mobile */
@media (max-width: 767px) {
    /* Remove the justify alignment that causes awkward spacing */
    .description-paragrah.text-justify {
        text-align: start !important;
        text-justify: none !important;
    }

    /* Ensure the metafields container allows text to wrap naturally */
    .metafields-item {
        display: block !important; /* Stack label and content if necessary */
        margin-bottom: 12px !important;
        text-align: start !important;
    }

    /* Target the specific labels and content */
    .metafields-item .item-name, 
    .metafields-item .item-content {
        font-size: 14px !important; /* Slightly smaller for mobile screens */
        display: inline !important; /* Keep them together */
        line-height: 1.5 !important;
    }
}
/* This hides the (undefined) or empty counts next to the color names */
.filter-count {
    display: none !important;
}

/* This ensures the labels look clean and centered */
.attribute-label div span {
    vertical-align: middle;
}
@media (max-width: 767px) {
    /* Force each item to take up the full width of the screen */
    .gallery-section .gallery-item.col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-bottom: 15px; /* Adds space between the stacked images */
    }

    /* Ensures the row allows them to wrap onto new lines */
    .gallery-section .gallery.row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}
/* --- ZID CUSTOM MENU STYLING --- */
/* --- 1. DESKTOP VIEW (Only for screens wider than 991px) --- */
@media (min-width: 992px) {
    /* This is your original code that you said works fine */
    .main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .main-nav .top-level-link {
        flex: 0 0 auto !important;
    }

    /* Force show hidden items like Winter Collection on desktop */
    .main-nav .top-level-link.d-none, 
    .main-nav .top-level-link[style*="display: none"] {
        display: block !important;
    }
}

/* --- 2. GLOBAL STYLES (Applies to both Desktop and Mobile) --- */

/* Make all text Uppercase */
.main-nav .top-level-link a span {
    text-transform: uppercase !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 2px !important;
}
/* Make "SALE" Red (Targeted by your Category ID 1566353) */
.main-nav .top-level-link a[href*="1566353"] span {
    color: #FF0000 !important;
    font-weight: bold !important;
}

/* Works for Arabic/English and Desktop/Mobile */
.gallery.row a:has(img[srcset*="b7517415"]),
.gallery.row a:has(img[srcset*="e38def08"]),
.gallery.row a:has(img[srcset*="9012e062"]),
.gallery.row a:has(img[srcset*="107a1dbe"]) {
    pointer-events: none !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent; /* Removes the grey flicker on mobile tap */
}