@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Basic Reset/Body Styles */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    /* Adjusted padding-top for fixed header height - Default for desktop */
    padding-top: 110px; /* Base desktop (header-top + header-middle + header-bottom approx height) */
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll caused by off-canvas (hidden by default) */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Class to disable body scroll when mobile menu is open - added by JS */
body.no-scroll {
    overflow: hidden;
}


/* CSS for Centered Containers */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

/* CSS for Full-Width Containers (Used in Main and Footer) */
.full-container {
    width: 100%;
    max-width: 1360px; /* Slightly wider max width for full-container sections */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* --- HEADER STYLES (Desktop First) --- */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Ensure header stays on top */
    border-bottom: 1px solid #eee;
}

.header-top {
    background-color: #f5f5f6;
    font-size: 0.85em;
    color: #555;
    padding-top: 6px;
    padding-bottom: 6px;
}
.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-top ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}
.header-top a {
     text-decoration: none;
     color: inherit;
     transition: color 0.2s ease;
}
.header-top a:hover {
    color: #000;
}

.header-middle {
     border-bottom: 1px solid #eee;
    padding-top: 10px;
    padding-bottom: 10px;
}
.header-middle .container {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between logo, nav, search, actions */
}

.site-branding img {
    height: 30px; /* Control logo height */
    width: auto;
    max-width: 100%;
    display: block;
}

/* Desktop Only Classes - Used to hide elements on mobile */
.desktop-only {
    display: block; /* Default display for desktop */
}

.main-nav {
    flex-shrink: 0; /* Prevent shrinking */
    margin-right: auto; /* Push search/actions to the right */
}
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}
.main-nav a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 0.95em;
    transition: color 0.2s ease;
}
.main-nav a:hover {
    color: #555;
}

.header-search {
    flex-grow: 1; /* Allow search bar to take up available space */
    max-width: 450px; /* Max width for search bar */
    margin-left: 20px;
     display: flex; /* Use flex to align icon and input */
    align-items: center;
}
.header-search form {
    display: flex; /* Use flex for form content */
    align-items: center;
    background-color: #f0f0f0;
    padding: 8px 15px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}
.header-search input[type="text"] {
    border: none;
    outline: none;
    padding: 0;
    flex-grow: 1;
    font-size: 1em;
    background-color: transparent;
    color: #333;
    margin-left: 10px;
}
.header-search input::placeholder {
    color: #888;
}
.header-search .search-icon {
    color: #888;
    font-size: 1.2em;
    flex-shrink: 0;
    /* cursor: pointer; */ /* Icon is not clickable, form submission handles search */
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between actions (Login, Wishlist, Cart) */
    font-size: 0.95em;
     flex-shrink: 0; /* Prevent shrinking */
}
/* Style for the desktop login link */
.user-actions .login-link-desktop a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
     transition: color 0.2s ease;
}
.user-actions .login-link-desktop a:hover {
    color: #555;
}
.user-actions .action-icon {
     text-decoration: none;
}

.user-actions .action-icon i {
    font-size: 1.3em;
    color: #000;
    transition: color 0.2s ease;
}
.user-actions .action-icon:hover i {
    color: #555;
}

/* Hide hamburger icon by default on desktop */
.hamburger-icon {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove default button padding */
    font-size: 1.3em; /* Match other icons */
    color: #000;
    transition: color 0.2s ease;
}
.hamburger-icon:hover {
    color: #555;
}


.header-bottom {
    background-color: #f5f5f6;
    padding-top: 8px;
    padding-bottom: 8px;
}
.header-bottom .full-container {
     padding: 0 15px; /* Use padding inside full-container */
}
.header-bottom-content {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Allow content to overflow and provide scroll */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px; /* Space for scrollbar if visible */
     -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
.header-bottom-content::-webkit-scrollbar {
     display: none; /* Hide scrollbar for Chrome/Safari/Opera */
}


/* Desktop Gender Toggle Style */
.gender-toggle {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    background-color: #eee;
    border-radius: 20px;
    padding: 3px;
}

.gender-toggle button {
    padding: 8px 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1em;
    color: #555;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking in flex row */
}

.gender-toggle button.active {
    background-color: #8c40ea;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Desktop Category Nav Style (Horizontal Scroll) */
.category-nav {
     /* No flex-grow or overflow-x needed here, handled by .header-bottom-content */
     /* flex-grow: 1; */
     /* overflow-x: auto; */
    -webkit-overflow-scrolling: touch;
    /* padding-bottom: 5px; Space for scrollbar - Handled by parent .header-bottom-content */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
.category-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari/Opera */
}


.category-nav ul {
    display: flex; /* Lay items out horizontally */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px; /* Space between category links */
    width: max-content; /* Ensures flex items stay on one line initially */
}
.category-nav a {
    white-space: nowrap; /* Prevent category names from wrapping */
    text-decoration: none;
    color: #000;
    font-weight: normal;
    padding: 5px 0;
    font-size: 1em;
    transition: color 0.2s ease;
}
.category-nav a:hover {
    color: #555;
}

/* --- MOBILE OFF-CANVAS MENU STYLES (Slides up from bottom) --- */
.mobile-off-canvas-menu {
    position: fixed;
    top: 0; /* Occupy full viewport height */
    left: 0;
    width: 100%; /* Occupy full viewport width */
    height: 100%;
    z-index: 1100; /* Above the header */
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Start transparent */
    transition: visibility 0s 0.3s, opacity 0.3s ease; /* Delay visibility change until transition ends when closing */
    display: flex; /* Use flex to push content to the bottom */
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-end; /* Push content to the bottom */
}

.mobile-off-canvas-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s; /* Remove delay when opening */
}

.mobile-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    cursor: pointer; /* Indicate it's clickable to close */
}

.mobile-menu-content {
    /* Position relative to the flex container (.mobile-off-canvas-menu) */
    width: 100%; /* Full width */
    max-height: 90vh; /* Prevent it from covering the very top of the screen */
    background-color: #fff;
    overflow-y: auto; /* Enable scrolling for content if it overflows */
    transition: transform 0.3s ease-out; /* Slide animation using transform */
    box-sizing: border-box;
    padding: 20px 15px;
    transform: translateY(100%); /* Start off-screen below */
    box-shadow: 0 -44px 10px rgba(0,0,0,0.1); /* Shadow at the top */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.mobile-off-canvas-menu.is-open .mobile-menu-content {
    transform: translateY(0); /* Slide up to reveal */
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.mobile-menu-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.close-menu-button {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #555;
    padding: 0;
}
.close-menu-button:hover {
    color: #000;
}

.mobile-menu-search {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.mobile-menu-search form {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
}
.mobile-menu-search input {
    border: none;
    outline: none;
    padding: 8px 10px;
    flex-grow: 1;
    font-size: 1em;
}
.mobile-menu-search button {
     padding: 8px 10px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}


.mobile-menu-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.mobile-menu-section:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
     border-bottom: none;
}

.mobile-menu-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: #555;
    text-transform: uppercase;
    font-weight: normal;
}

/* Style gender toggle within the mobile menu */
.mobile-menu-section .gender-toggle {
    justify-content: center; /* Center the toggle */
    margin-bottom: 10px;
    /* Inherits button styles from global .gender-toggle */
}

/* Style nav lists within the mobile menu (Vertical Lists) */
.mobile-menu-section .main-nav ul,
.mobile-menu-section .category-nav ul,
.mobile-menu-section > ul { /* Also style direct ul li for Account links */
    list-style: none;
    padding: 0;
    margin: 0;
    display: block; /* Stack list items vertically */
    gap: 0; /* Remove flex gap */
}

.mobile-menu-section .main-nav li,
.mobile-menu-section .category-nav li,
.mobile-menu-section > ul li { /* Also style direct ul li for Account links */
    margin-bottom: 10px;
}
.mobile-menu-section .main-nav li:last-child,
.mobile-menu-section .category-nav li:last-child,
.mobile-menu-section > ul li:last-child {
    margin-bottom: 0;
}


.mobile-menu-section .main-nav a,
.mobile-menu-section .category-nav a,
.mobile-menu-section > ul li a { /* Style links */
    text-decoration: none;
    color: #000;
    font-size: 1.1em;
    font-weight: normal;
    display: block; /* Make links block for easier tapping */
    padding: 5px 0;
}
.mobile-menu-section .main-nav a {
    font-weight: bold; /* Keep main nav links bold */
}


/* --- General Section Title Styles --- */
/* Applies to most section titles like Shop Our Collections, Best Sellers, Offers, Plus Size */
h2 {
    margin-top: 40px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: #000;
}

/* Specific Style for NEW ARRIVALS H2 to match image */
.new-products-section h2 {
    display: block;
    width: fit-content;
    padding: 1px 10px;
    margin: 20px auto 10px auto;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    border-radius: 6px;
    background-color: #ffc107; /* Yellow background for 'NEW ARRIVALS' tag */
}

/* Ensure the New Arrivals section container supports centering the h2 */
.new-products-section {
    text-align: center;
    background: linear-gradient(to bottom right, #dfee0561 0%, #e2c9f32d 40%, #ffffff 80%);
    padding: 40px 0;
}
/* Ensure horizontal padding comes from the full-container inside */
.new-products-section .full-container {
    padding: 0 15px;
}


/* --- General Slider Structure & Arrow Styles --- */
/* Applied to wrapper elements like .promo-banners-slider, .new-arrivals-slider, .buy2-offer-slider */
.slider-wrapper-container {
    position: relative;
    margin: 0 auto;
    padding: 0 40px; /* Default desktop padding for arrows space */
    box-sizing: border-box;
    user-select: none; /* Prevent text selection during drag */
    /* The 'js-scroll-enabled' class is added by JS on desktop */
    /* .slider-wrapper-container.js-scroll-enabled { overflow: hidden; } */
}

/* Container: The visible window. Controls overflow. */
.slider-container {
    width: 100%;
    /* overflow: hidden; <- controlled by JS based on .js-scroll-enabled class */
    cursor: grab; /* Indicate draggable area */
}

/* Wrapper: Contains all items (originals + clones). Transformed by JS on desktop. */
.slider-wrapper {
    display: flex;
    gap: 15px; /* Default horizontal space between items for JS scroll on desktop */
    width: max-content; /* Allows content to exceed container width */
    height: 100%; /* Fill the height of the slider-container */
    transition: transform 0.5s ease-in-out; /* Smooth transition for JS movement */
     flex-wrap: nowrap; /* Prevent items from wrapping by default */
}

/* Slider Arrows (Hidden on smaller screens by media query + hide-arrows class) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex; /* Use flex to center icon */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, pointer-events 0.3s ease;
     user-select: none;
     opacity: 1;
     pointer-events: auto;
     border: none; /* Remove default button border */
}
.slider-arrow:hover {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.slider-arrow i {
    color: #333;
    font-size: 1.2em;
}

.slider-arrow.left-arrow {
    left: 15px; /* Position relative to .slider-wrapper-container padding */
}
.slider-arrow.right-arrow {
    right: 15px; /* Position relative to .slider-wrapper-container padding */
}

/* Style for disabled arrows (applied by JS) */
.slider-arrow.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* CSS rule added by JS or Media Query to hide arrows */
/* When hidden, use !important to ensure it overrides the default display: flex */
.slider-wrapper-container.hide-arrows .slider-arrow {
    display: none !important;
}

/* When JS is enabled, overflow is hidden on container, and transform is used on wrapper */
.slider-wrapper-container.js-scroll-enabled > .slider-container {
     overflow: hidden;
     cursor: grab;
}
/* When dragging, indicate grabbing */
.slider-wrapper-container.js-scroll-enabled.is-dragging > .slider-container {
    cursor: grabbing;
}

.slider-wrapper-container.js-scroll-enabled > .slider-container > .slider-wrapper {
    /* gap is set by default */
     transform: translateX(var(--slider-translate, 0px)); /* Use a CSS variable for transform if desired, JS sets this */
}


/* --- Featured Promotional Banners HORIZONTAL Slider STYLES --- */
.promo-banners-section {
    margin-top: 20px;
    margin-bottom: 40px;
}

.promo-banners-section .slider-wrapper-container {
    padding: 0 40px; /* Maintain desktop padding for arrows */
}

.promo-banners-section .slider-container {
    height: 400px; /* Fixed height for the banner slider on desktop */
}

.promo-banners-section .slider-wrapper {
    gap: 15px; /* Gap between banner items on desktop */
}

.promo-banners-section .banner-item {
    display: block;
    flex: 0 0 auto; /* Prevent items from shrinking or growing in flex wrapper */
    width: 300px; /* --- Default desktop width of each item --- */
    height: 400px; /* --- Default desktop height of each item --- */
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid #ddd;
    margin: 0; /* Ensure no vertical margin interferes */
}

.promo-banners-section .banner-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     border-color: #aaa;
}

.promo-banners-section .banner-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

/* Adjust arrow position relative to the banner height container */
.promo-banners-section .slider-arrow {
    top: 50%;
}


/* --- NEW ARRIVALS & BUY 2 OFFER SLIDER STYLES (Product Item Overrides for Desktop JS Scroll) --- */
/* These styles specifically target product items within the slider wrappers on desktop */
.new-products-section .product-item,
.oversized-tee-offer-section-1st .product-item {
    flex: 0 0 auto; /* Essential for horizontal flex scroll */
    width: 250px; /* --- Default desktop width of each item for the slider --- */
    border: 1px solid #eee;
    padding: 0; /* Removed padding from item itself for slider width calculation */
    text-align: left;
    display: flex; /* Use flex to structure content internally */
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    /* Margin-right for native scroll is handled in media queries */
}
.new-products-section .product-item:hover,
.oversized-tee-offer-section-1st .product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15),
                0 0 15px 2px rgba(255, 224, 0, 0.4);
}


.new-products-section .product-item .product-image-wrapper,
.oversized-tee-offer-section-1st .product-item .product-image-wrapper {
     width: 100%; /* Fill item width */
     height: auto; /* Height determined by aspect ratio */
     aspect-ratio: 321 / 482;
     max-width: none;
     max-height: none;
     margin: 0 0 5px 0;
     overflow: hidden;
     position: relative;
     border-radius: 2px 2px 0 0;
}

.new-products-section .product-item .product-image-wrapper img,
.oversized-tee-offer-section-1st .product-item .product-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

/* Product Tag (like BUY 2 FOR 999) */
.new-products-section .product-item .product-tag,
.oversized-tee-offer-section-1st .product-item .product-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: rgba(140, 64, 234, 0.9);
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 2;
}

/* Wishlist Icon */
.new-products-section .product-item .wishlist-icon,
.oversized-tee-offer-section-1st .product-item .wishlist-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #fff;
    font-size: 1.2em;
    z-index: 2;
    cursor: pointer;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    transition: color 0.2s ease;
}
.new-products-section .product-item .wishlist-icon:hover,
.oversized-tee-offer-section-1st .product-item .wishlist-icon:hover {
    color: #ff4d4d;
}

/* Product Info section for slider items */
.new-products-section .product-item .product-info,
.oversized-tee-offer-section-1st .product-item .product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 10px 10px 10px; /* Added padding here for desktop slider items */
    text-align: left;
}

.new-products-section .product-item .product-brand-name,
.oversized-tee-offer-section-1st .product-item .product-brand-name {
    font-size: 0.8em; /* Slightly smaller for brand */
    margin: 0 0 2px 0; /* Reduce margin */
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-products-section .product-item .product-description,
.oversized-tee-offer-section-1st .product-item .product-description {
     font-size: 0.9em; /* Normal size for description */
     margin: 0 0 5px 0;
     font-weight: normal;
     color: #333;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}


.new-products-section .product-item .price-rating,
.oversized-tee-offer-section-1st .product-item .price-rating {
    margin: 5px 0;
    font-size: 0.9em;
    display: flex;
    justify-content: flex-start; /* Align prices/rating to the left */
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px; /* Space between price elements */
    text-align: left;
    width: 100%;
}
.new-products-section .product-item .price-rating .discounted-price,
.oversized-tee-offer-section-1st .product-item .price-rating .discounted-price {
    font-weight: bold;
    color: #e53935;
    font-size: 1em;
}
.new-products-section .product-item .price-rating .original-price,
.oversized-tee-offer-section-1st .product-item .price-rating .original-price {
    text-decoration: line-through;
    color: #888;
    font-size: 0.85em;
}
.new-products-section .product-item .price-rating .offer,
.oversized-tee-offer-section-1st .product-item .price-rating .offer {
    color: #388e3c;
    font-weight: bold;
    font-size: 0.85em;
}
.new-products-section .product-item .price-rating .rating,
.oversized-tee-offer-section-1st .product-item .price-rating .rating {
    color: #fbc02d;
    font-weight: bold;
    font-size: 0.9em;
    margin-left: auto; /* Push rating to the right */
    flex-shrink: 0;
}

/* Hide the Add to Cart button style for these specific slider items on desktop */
.new-products-section .product-item .add-to-cart,
.oversized-tee-offer-section-1st .product-item .add-to-cart {
    display: none;
}

/* Specific arrow styling for New Arrivals Slider */
.new-products-section .slider-wrapper-container {
     padding: 0 10px; /* Smaller padding for arrows closer to items */
     margin-top: 20px;
     margin-bottom: 20px;
}
.new-products-section .slider-arrow {
     left: 10px;
     right: 10px;
     width: 35px;
     height: 35px;
}
.new-products-section .slider-arrow i {
     font-size: 1.3em;
}

/* Specific arrow styling for Buy 2 Offer Slider */
.oversized-tee-offer-section-1st {
    padding: 40px 0;
    background-color: #f8f8f8;
    margin: 40px 0;
}
.oversized-tee-offer-section-1st .buy2-offer-slider {
    position: relative;
    padding: 0 15px; /* Padding inside the full-container for arrows on desktop */
    margin: 20px 0;
}
.oversized-tee-offer-section-1st .slider-arrow {
    left: 0;
    right: 0;
    width: 40px;
    height: 40px;
}
.oversized-tee-offer-section-1st .slider-arrow i {
    font-size: 1.2em;
}


/* --- SECTION FOOTER STYLES --- */
/* General footer style used in multiple sections */
.section-footer {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
}
/* Specific footer style for the first footer (New Arrivals and Buy 2 Offer) */
.section-footer-1st {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Style for the 'View All' links */
.view-all-trends, .view-all-offer-items {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid #000;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-radius: 3px;
}
.view-all-trends:hover, .view-all-offer-items:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}


/* --- PRIMARY CATEGORY BLOCKS STYLES (Shop Our Collections) --- */
.category-blocks-section {
    margin: 40px 0;
}

/* Category rows use flexbox (or grid on smaller screens) */
.category-row {
    display: flex; /* Default to flex for layout control */
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 15px; /* Space between blocks */
    justify-content: center; /* Center items when they wrap */
    margin-bottom: 15px; /* Space between rows */
}
.category-row:last-child {
    margin-bottom: 0;
}


/* Individual category block item - Base styles */
.category-block {
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 321 / 482; /* Maintain aspect ratio */
    width: auto; /* Base width, will be overridden by flex-basis or grid */
    max-width: none; /* Remove max-width constraint for flex/grid items */
    text-align: center; /* Center content like h3 */
    background-color: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Hover effect */
.category-block:hover {
     transform: translateY(-8px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Link, image wrapper, image, and text overlay styles */
.category-block a {
    display: flex; /* Use flex to center/position content */
    flex-direction: column; /* Stack image and text */
    justify-content: flex-end; /* Push content to bottom */
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
}

.category-block img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


.category-block h3 {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.3;
    font-weight: bold;
    padding: 15px 10px; /* Padding inside the text area */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Gradient overlay */
    color: #fff;
    text-align: center;
    width: 100%; /* Take full width of the block */
    box-sizing: border-box;
}


/* Style for the 'View All' block itself */
.category-block.view-all-block {
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Style for the 'View All' link text */
.category-blocks-section .view-all-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.category-blocks-section .view-all-link:hover {
     color: #ccc;
}


/* Media Query: Apply specific 5-5-3-ViewAll layout on screens wider than 1100px */
@media (min-width: 1101px) {
    /* Row 1: 5 items */
    .category-row.row-1 .category-block {
        flex-basis: calc(20% - 12px); /* (100% - 4 * 15px gap) / 5 */
         width: calc(20% - 12px); /* Explicit width for consistency */
    }

    /* Row 2: 5 items */
    .category-row.row-2 .category-block {
        flex-basis: calc(20% - 12px); /* (100% - 4 * 15px gap) / 5 */
         width: calc(20% - 12px); /* Explicit width for consistency */
    }

    /* Row 3: 3 items + View All (4 items total) */
    .category-row.row-3 .category-block,
    .category-row.row-3 .view-all-block {
         flex-basis: calc(25% - 11.25px); /* (100% - 3 * 15px gap) / 4 */
         width: calc(25% - 11.25px); /* Explicit width for consistency */
    }
}


/* Media Query: Fallback to simpler responsive grid on screens 1100px or narrower */
@media (max-width: 1100px) {
    /* Use grid on the rows for simpler auto-fit */
    .category-row {
         display: grid; /* Switch to grid for auto-fit */
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Simpler responsive grid layout */
         gap: 15px; /* Keep gap */
         /* Remove flexbox specific properties that conflict */
         justify-content: unset; /* Reset flex justify-content */
    }
    /* Reset specific flex item sizing applied above */
    .category-block {
         width: auto; /* Reset explicit width */
         flex-basis: auto; /* Reset explicit flex-basis */
         max-width: none; /* Allow items to take full width of grid cells */
         margin-top: 0; /* Ensure no leftover specific margins */
    }
}
/* --- END Primary CATEGORY BLOCKS STYLES --- */


/* --- PRODUCT GRID SECTIONS (Best Sellers, Offers, Plus Size) --- */

.product-grid-section {
    margin: 40px 0;
}

.product-list {
    display: grid;
    /* Adjusted minmax for better fit on various screens */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* --- Base styles for ALL .product-item elements ---
   These styles apply universally unless overridden by a more specific selector (like in sliders).
   This makes grid items the "default" visual style. */
.product-item {
    border: 1px solid #eee;
    padding: 10px; /* Add padding to the item */
    text-align: left; /* Default text alignment */
    display: flex; /* Use flex to structure image/info */
    flex-direction: column;
    justify-content: space-between; /* Pushes button/info to bottom */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%; /* Take full width of grid cell */
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none; /* Base link style */
    color: inherit;
}
.product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15),
                0 0 15px 2px rgba(255, 224, 0, 0.4);
}

/* Base styles for product image wrapper (used in both grid and sliders) */
.product-item .product-image-wrapper {
     width: 100%; /* Fill the width of the product item padding area */
     height: auto;
     aspect-ratio: 321 / 482; /* Maintain common product image aspect ratio */
     max-width: none; /* Remove max-width constraint from wrapper */
     max-height: none; /* Remove max-height constraint */
     margin: 0 0 10px 0; /* Add bottom margin */
     overflow: hidden;
     position: relative; /* For tag/icon */
     border-radius: 2px;
}
/* Styles for tag/icon within ANY product-item */
.product-item .product-tag {
     position: absolute;
     top: 8px; left: 8px;
     background-color: rgba(0,0,0,0.7);
     color: white;
     padding: 4px 8px;
     font-size: 0.7em;
     font-weight: bold;
     border-radius: 3px;
     z-index: 2;
}
.product-item .wishlist-icon {
    position: absolute;
    top: 8px; right: 8px;
    color: #eee;
    font-size: 1.2em;
    z-index: 2;
    cursor: pointer;
     text-shadow: 0 0 2px rgba(0,0,0,0.3);
     transition: color 0.2s ease;
}
.product-item .wishlist-icon:hover {
    color: #ff4d4d;
}

/* Base styles for product images (used in both grid and sliders) */
.product-item .product-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

/* Base styles for product info block (used in both grid and sliders) */
.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px 0; /* Add padding to the info block itself, inside the item */
    text-align: left;
}

/* Base styles for product brand name */
.product-brand-name {
    font-size: 0.8em;
    margin: 0 0 2px 0;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Base styles for product description */
.product-description {
     font-size: 0.9em;
     margin: 0 0 5px 0;
     font-weight: normal;
     color: #333;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}


/* Base styles for grid item price/rating block */
.product-info .price-rating {
    margin: 5px 0;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between; /* Default for grid - space out prices and rating */
    flex-wrap: wrap;
    gap: 5px 10px;
    align-items: center;
    text-align: left;
    width: 100%;
}
.product-info .discounted-price {
    font-weight: bold;
    color: #e53935;
    font-size: 1.1em;
}
.product-info .original-price {
    text-decoration: line-through;
    color: #888;
    font-size: 0.9em;
}
.product-info .offer {
    color: #388e3c;
    font-weight: bold;
}
.product-info .rating {
    color: #fbc02d;
    font-weight: bold;
    font-size: 1em;
    margin-left: auto; /* Push rating to the right */
}

/* Style for Add to Cart button in grid items */
.add-to-cart {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: auto; /* Push button to the very bottom */
    width: 100%; /* Full width button */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease;
    text-align: center;
    display: block;
    border-radius: 2px;
}
.add-to-cart:hover {
    background-color: #333;
}

/* Specific overrides for Offer List items to center text and elements */
.offer-list .product-item .product-info {
     text-align: center;
     align-items: center; /* Center flex items vertically */
}

.offer-list .product-item .product-info .price-rating {
    justify-content: center; /* Center price/rating elements */
    gap: 5px 10px;
    margin: 5px 0;
    text-align: center;
}
.offer-list .product-item .product-info .rating {
    margin-left: 0; /* Remove auto margin to center rating */
}


/* Scrollable Area for items like 'Shop by Collection' */
.collection-section {
    margin: 40px 0;
}
.scrollable-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px; /* Space for scrollbar */
    margin: 20px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollable-area::-webkit-scrollbar {
    display: none;
}

.scroll-items-wrapper {
    display: flex;
    gap: 15px;
    width: max-content; /* Important for horizontal scroll */
    padding-bottom: 5px; /* Space below items before scrollbar */
}

/* Style for individual scrollable items (like in Shop by Collection) */
.scroll-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    flex: 0 0 auto; /* Prevent shrinking/growing in flex wrapper */
    width: 120px; /* Fixed width for scrollable items */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-item:hover {
     transform: translateY(-5px);
}
.scroll-item a {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
     color: inherit;
     width: 100%;
}
.scroll-item img {
     width: 100%;
     height: auto;
     max-width: none;
     aspect-ratio: 1 / 1; /* Assuming these are square images */
     object-fit: cover;
     display: block;
     margin: 0 auto 5px auto;
     border-radius: 50%; /* Example: Make circular if desired, otherwise remove */
     border: 1px solid #eee;
}
.scroll-item figcaption {
    font-size: 0.9em;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
    white-space: normal;
    word-break: break-word; /* Allow long names to break */
    padding: 0 5px;
}


/* --- FOOTER STYLES --- */
.site-footer {
    background-color: #f8f8f8;
    padding: 40px 0 20px 0;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 40px; /* Row and column gap */
}

.footer-column {
    flex: 1 1 180px;
    margin-bottom: 20px;
}
/* Responsive adjustment for column widths on wider screens */
@media (min-width: 768px) {
  .footer-column {
    margin-bottom: 0;
  }
   .footer-column:nth-child(1) { flex-basis: 200px; } /* Customer Service */
   .footer-column:nth-child(2) { flex-basis: 150px; } /* Company */
    .footer-column:nth-child(3) { flex-basis: 220px; } /* Connect */
    .footer-column:nth-child(4) { flex-basis: 250px; } /* Newsletter */
     .footer-column:nth-child(5) { flex-basis: 150px; } /* Download App */
     .footer-column:nth-child(6) { flex-basis: 250px; } /* Payment */
}

/* Mobile footer stacking and centering */
@media (max-width: 767.98px) {
     .footer-content { flex-direction: column; gap: 20px;}
       .footer-column { width: 100%; flex-basis: auto; text-align: center; }
       .footer-column ul, .footer-column li, .footer-column p, .social-media, .newsletter-column form, .download-column, .payment-icons {
           justify-content: center;
           text-align: center;
           margin-left: auto;
           margin-right: auto;
       }
       .newsletter-column form { width: 90%; margin: 10px auto; }
       .download-column a { display: inline-block; margin: 0 5px 10px 5px; }
       .download-column img { margin: 0 auto; }
       .payment-icons { justify-content: center; }
       .footer-column li {
           flex-direction: row; /* Reset list items to row for icons */
           justify-content: center; /* Center icon/text horizontally */
           align-items: center;
           gap: 5px;
       }
       .footer-column li i { flex-shrink: 0;} /* Prevent icon from shrinking */
}


.footer-column h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #000;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
}
.footer-column li i {
    color: #888;
    font-size: 1em;
}

.footer-column a {
    text-decoration: none;
    color: #555;
    transition: color 0.3s ease;
}
.footer-column a:hover {
    text-decoration: underline;
    color: #000;
}

.footer-column p {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
}
.footer-column p i {
    color: #888;
    font-size: 1em;
}

.social-media {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.social-media a {
    font-size: 1.5em;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}
.social-media a:hover {
    color: #000;
}


.newsletter-column form {
    display: flex;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
}
.newsletter-column input[type="email"] {
    padding: 10px;
    border: none;
    flex-grow: 1;
    outline: none;
    font-size: 1em;
    color: #333;
}
.newsletter-column input::placeholder {
    color: #888;
}

.newsletter-column button {
    padding: 10px 15px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}
.newsletter-column button:hover {
    background-color: #333;
}

.download-column a {
    display: block;
    margin-bottom: 10px;
}
.download-column a:last-child {
    margin-bottom: 0;
}
.download-column img {
    display: block;
    max-width: 120px;
    height: auto;
}

.payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.payment-icons img {
    height: 30px;
    width: auto;
    filter: grayscale(10%); /* Subtle filter */
    opacity: 0.9;
}


.footer-copyright {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
/* --- END FOOTER STYLES --- */


/* --- Media Queries for Mobile Responsiveness --- */

/* Breakpoint for switching to mobile header/menu (e.g., Tablet Portrait, Mobile) */
@media (max-width: 768px) {

    /* Adjust body padding-top for the mobile header height */
     /* Approx height: header-middle on mobile (~50px based on 25px logo + padding) */
    body { padding-top: 50px; }

    /* Hide desktop-only elements */
    .header-top,
    .desktop-only {
        display: none !important; /* Use !important to override potential flex/grid settings */
    }
     /* Hide the desktop login link specifically */
     .login-link-desktop {
          display: none !important;
     }

    /* Adjust Header Middle for Mobile */
    .header-middle {
        padding-top: 8px; /* Reduce padding */
        padding-bottom: 8px;
        border-bottom: none; /* Remove bottom border */
    }
    .header-middle .container {
        display: flex;
        justify-content: space-between; /* Space out logo, search/user/hamburger */
        align-items: center;
        gap: 10px; /* Reduce gap */
    }

    .site-branding img {
        height: 25px; /* Smaller logo on mobile */
    }

    .header-search {
        flex-grow: 0; /* Don't let search take up space */
        max-width: none; /* Remove max-width */
        margin-left: 0; /* Remove margin */
    }
    .header-search form {
        background-color: transparent; /* Remove grey background */
        padding: 0; /* Remove padding */
        border: none; /* Remove border */
        width: auto; /* Only take necessary width */
    }
     /* Hide the search input field on mobile, only show icon */
    .header-search input[type="text"] {
         display: none;
    }
    .header-search .search-icon {
        font-size: 1.3em; /* Larger search icon */
        color: #000; /* Darker color */
    }

    .user-actions {
        gap: 15px; /* Space between icons (Wishlist, Cart, Hamburger) */
        flex-grow: 0;
        align-items: center;
    }
    /* Ensure action icons are properly sized */
    .user-actions .action-icon i {
         font-size: 1.3em; /* Match search icon size */
         color: #000; /* Darker color */
    }

    /* Show the hamburger icon on mobile */
    .hamburger-icon {
        display: block; /* Make hamburger visible */
    }


     /* --- SLIDER RESPONSIVE FALLBACK (Native Scroll) --- */
     /* These styles apply to sliders on mobile, overriding desktop JS styles */

     /* Hide JS arrows and remove padding that made space for them */
     .slider-wrapper-container .slider-arrow { display: none; }

     /* Remove the padding that was for arrows and use standard container padding */
     .promo-banners-section .slider-wrapper-container,
     .new-products-section .slider-wrapper-container,
     .oversized-tee-offer-section-1st .buy2-offer-slider {
         padding: 0 15px; /* Use standard full-container padding */
         margin-left: 0; /* Remove auto-margins that might affect padding */
         margin-right: 0;
         width: 100%; /* Ensure it takes full width */
     }

     /* Enable native horizontal scrolling on the container */
     .slider-container {
          overflow-x: auto; /* Enable horizontal scroll */
          overflow-y: hidden; /* Prevent vertical scroll interference */
          scroll-behavior: smooth; /* Smooth scroll when programmatically scrolled */
          -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
          cursor: grab; /* Indicate draggable area */
          height: auto; /* Let height be determined by content */
     }
      /* Hide scrollbar for all browsers */
      .slider-container::-webkit-scrollbar,
       .scrollable-area::-webkit-scrollbar {
          display: none;
      }
      .slider-container, .scrollable-area {
          -ms-overflow-style: none; /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
      }


     /* Ensure items don't wrap in the wrapper when using overflow-x: auto */
     /* Also remove the gap set for desktop JS scroll */
     .slider-wrapper {
         flex-wrap: nowrap;
         gap: 0; /* Remove flex gap */
         /* Remove transform and transition property applied by JS on desktop */
         transform: none !important;
         transition: none !important;
     }

      /* Set item widths using percentages for native scroll + add margin-right */
      /* This makes items fixed width blocks within the scroller */
      .promo-banners-section .banner-item {
           flex: 0 0 auto; /* Required for fixed width in flex scroller */
           width: calc(85% - 10px); /* Show ~1.1 items, minus margin */
           margin-right: 10px; /* Space between items */
           height: auto; /* Let height be determined by aspect ratio */
           aspect-ratio: 300 / 400;
      }

      /* --- Styles for product items in sliders (New Arrivals, Buy 2 Offer) on MOBILE --- */
      /* These override the base and desktop slider styles to look like grid items on mobile */
      .new-products-section .product-item,
      .oversized-tee-offer-section-1st .product-item {
          flex: 0 0 auto; /* Required for fixed width in flex scroller */
          width: calc(50% - 10px); /* Show 2 items side-by-side on typical mobile, minus margin (2*10px gap) */
          margin-right: 20px; /* Space *after* each item in native scroll */
          height: auto;
          aspect-ratio: 321 / 482; /* Maintain product image aspect ratio */
          padding: 10px; /* ADD padding back to the item */
           box-sizing: border-box; /* Include padding in the width calculation */
           display: flex; /* Re-assert flex for inner layout */
           flex-direction: column; /* Stack contents vertically */
           justify-content: space-between; /* Push button/info down */
           text-align: left; /* Align text left */
      }

       /* Style the info block within mobile slider items to match grid items */
       .new-products-section .product-item .product-info,
       .oversized-tee-offer-section-1st .product-item .product-info {
            padding: 5px 0; /* Adjust padding inside info block */
            text-align: left;
            align-items: flex-start; /* Align children (brand, desc, prices) to the start */
       }
        /* Ensure price/rating block in mobile slider items aligns left */
       .new-products-section .product-item .price-rating,
       .oversized-tee-offer-section-1st .product-item .price-rating {
            justify-content: flex-start; /* Align price/rating items to the start */
            margin-top: 5px;
            margin-bottom: 5px;
            width: 100%;
            flex-wrap: wrap;
            gap: 5px 8px;
       }
        /* Ensure rating is aligned left in mobile slider items */
       .new-products-section .product-item .price-rating .rating,
       .oversized-tee-offer-section-1st .product-item .price-rating .rating {
            margin-left: 0; /* Remove auto margin */
            flex-shrink: 0;
       }
        /* Show the Add to Cart button on mobile slider items */
        .new-products-section .product-item .add-to-cart,
        .oversized-tee-offer-section-1st .product-item .add-to-cart {
            display: block; /* Make button visible */
            margin-top: auto; /* Push to bottom */
            width: 100%;
            padding: 8px 15px; /* Adjust button padding */
            font-size: 0.9em; /* Adjust button font size */
        }

      /* Remove margin-right from the last item in any slider wrapper to prevent extra space at the end */
      .slider-wrapper > *:last-child {
           margin-right: 0;
      }


     /* Primary Category Blocks Responsive Adjustments */
     /* Handled by the media query within the .category-blocks-section styles (max-width: 1100px) */

     /* Product List Grid Responsive Adjustments (Already responsive) */
     .product-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } /* Allow slightly smaller min width */
     .product-item { padding: 8px; } /* Reduce padding */
     .product-item .product-image-wrapper { margin: 0 0 8px 0; } /* Adjust margin */
     .product-item .add-to-cart { padding: 8px 15px; font-size: 0.9em;}


     /* Scrollable Items (Shop By Collection) */
     .collection-section .scroll-item { width: 100px; } /* Adjust fixed width */
     .collection-section .scroll-items-wrapper { gap: 10px; } /* Adjust gap */
     .collection-section .scroll-item figcaption { font-size: 0.85em; } /* Adjust text size */


     /* Footer responsive adjustments (already covered above) */

      /* General mobile adjustments */
      h2 { margin-top: 30px; margin-bottom: 20px; font-size: 1.8em; }
      .section-footer { margin-top: 20px; margin-bottom: 30px; }
}


/* Adjustments for screens up to 576px (Smaller mobile) */
@media (max-width: 576px) {
     /* Adjust body padding-top for likely shorter header */
     /* Approx height: header-middle on smaller mobile (~45px) */
     body { padding-top: 45px; }

      /* Header middle container might need further adjustment for very small screens */
     .header-middle { padding-top: 6px; padding-bottom: 6px;}
     .header-middle .container { gap: 8px; }
     .site-branding img { height: 22px; }
     .user-actions { gap: 10px; }
      /* Match icons size */
     .user-actions .action-icon i,
     .header-search .search-icon,
     .hamburger-icon { font-size: 1.2em; }

      /* Adjust mobile menu padding */
     .mobile-menu-content { padding: 15px 10px; }
     .mobile-menu-section { margin-bottom: 15px; padding-bottom: 10px; }
     .mobile-menu-section h4 { font-size: 0.9em; }


      /* --- SLIDER ITEM WIDTH ADJUSTMENTS (Mobile) --- */
     .promo-banners-section .banner-item {
          width: calc(90% - 8px); /* Show ~1.1 items */
          margin-right: 8px;
     }
     .new-products-section .product-item,
     .oversized-tee-offer-section-1st .product-item {
         width: calc(50% - 8px); /* Still show 2 items, reduce gap */
         margin-right: 16px; /* Space after item */
          padding: 8px; /* Reduce padding */
     }

      /* Product List Responsive Adjustments */
     .product-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
     .product-item { padding: 6px; } /* Reduce padding */
     .product-item .product-image-wrapper { margin: 0 0 6px 0; } /* Adjust margin */
      .product-item .add-to-cart { padding: 6px 10px; font-size: 0.85em; }


     /* Scrollable Items (Shop By Collection) */
     .collection-section .scroll-item { width: 80px; }
     .collection-section .scroll-items-wrapper { gap: 8px; }
     .collection-section .scroll-item figcaption { font-size: 0.8em; }

     h2 { margin-top: 25px; margin-bottom: 15px; font-size: 1.6em; }
}


/* Adjustments for screens up to 400px (Very Small Mobile) */
@media (max-width: 400px) {
    /* Adjust body padding-top for potentially shortest header */
    body { padding-top: 40px; }

    .header-middle { padding-top: 5px; padding-bottom: 5px;}
    .header-middle .container { gap: 5px; }
    .site-branding img { height: 20px; }
    .user-actions { gap: 8px; }
    .user-actions .action-icon i, .header-search .search-icon, .hamburger-icon { font-size: 1.1em; }

     /* Adjust mobile menu padding */
     .mobile-menu-content { padding: 10px; }
     .mobile-menu-section { margin-bottom: 10px; padding-bottom: 8px; }
     .mobile-menu-section h4 { font-size: 0.9em; }
     .mobile-menu-section .main-nav a,
     .mobile-menu-section .category-nav a,
     .mobile-menu-section > ul li a { font-size: 1em; padding: 3px 0;}


      /* --- SLIDER ITEM WIDTH ADJUSTMENTS (Mobile) --- */
     .promo-banners-section .banner-item {
         width: calc(95% - 5px); /* Show almost 1 item */
         margin-right: 5px;
    }
    .new-products-section .product-item,
    .oversized-tee-offer-section-1st .product-item {
        width: calc(65% - 5px); /* Show ~1.4 items */
        margin-right: 10px; /* Space after item */
        padding: 5px; /* Reduce padding further */
    }
     .new-products-section .product-item .add-to-cart,
     .oversized-tee-offer-section-1st .product-item .add-to-cart {
         padding: 5px 8px; font-size: 0.8em;
     }


     /* Product List Responsive Adjustments */
     .product-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; }
     .product-item { padding: 5px; } /* Reduce padding */
     .product-item .product-image-wrapper { margin: 0 0 5px 0; } /* Adjust margin */
     .product-item .add-to-cart { padding: 5px 8px; font-size: 0.8em;}


     /* Scrollable Items (Shop By Collection) */
     .collection-section .scroll-item { width: 70px; }
     .collection-section .scroll-items-wrapper { gap: 5px; }
     .collection-section .scroll-item figcaption { font-size: 0.75em; }

     h2 { margin-top: 20px; margin-bottom: 10px; font-size: 1.5em; }
     .section-footer { margin-top: 15px; margin-bottom: 20px; }
}