/* Basic Reset and Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* Or your preferred font */
    line-height: 1.6;
    color: #333;
    /* Optional: Add smooth scrolling */
    scroll-behavior: smooth;
    /* Prevent horizontal scroll caused by off-canvas menu sliding */
    overflow-x: hidden;
    /* Needed for z-index and blur stacking context */
    position: relative;
    min-height: 100vh; /* Ensure body is at least viewport height */
    display: flex; /* Use flexbox to push footer to bottom */
    flex-direction: column;
}

/* Class added to body when off-canvas menu is open by JS */
body.menu-open {
    /* Prevent vertical scrolling of main content when menu is open */
    overflow-y: hidden;
}

a {
    text-decoration: none;
    color: inherit; /* Inherit text color by default */
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    /* Prevents extra space below images */
    display: block;
}

/* Layout Containers */
.container {
    max-width: 1200px; /* Standard max width for centered content */
    margin: 0 auto;
    padding: 0 15px; /* Add padding on sides */
}

.full-container {
    width: 100%; /* Full width container */
    max-width: 1200px; /* Or your preferred max-width */
    margin: 0 auto; /* Center the container */
    padding: 0 15px; /* Add some padding on the sides */
}


section {
    padding: 40px 0; /* Default spacing between sections */
}

h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
}

/* Basic focus style for keyboard navigation */
*:focus-visible {
    outline: 2px solid red; /* Match the red theme */
    outline-offset: 2px;
}


/* -------------------- Header Styles (Mobile First) -------------------- */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Make header sticky at the top */
    position: sticky;
    top: 0;
    width: 100%;
    /* Ensure header is above page content and off-canvas overlay */
    z-index: 1010;
    flex-shrink: 0; /* Prevent header from shrinking in body flex */
}

/* Primary Header Container (Flexbox layout) */
.header-container {
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Distribute space between left, center, right */
    max-width: 1200px; /* Optional: Limit max width on large screens */
    margin: 0 auto; /* Center the container itself */
    padding: 10px 15px; /* Padding inside the header */
    gap: 8px; /* Default gap between left, center, right sections (mobile) */
    flex-wrap: nowrap; /* Prevent wrapping in the main header row */
}

/* Header Left Section (Mobile: Toggle only) */
.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    min-width: 0; /* Allow children to define minimum size within flex */
}

/* Header Center Section (Logo) */
.header-center {
    display: flex; /* Use flex to center the logo */
    justify-content: center; /* Center logo horizontally */
    align-items: center;
    flex-grow: 1; /* Allow the center section (logo) to grow and take space on mobile */
    min-width: 0; /* Allow logo container to shrink */
}

/* Header Right Section (Search & Icons) */
.header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    min-width: 0; /* Allow children (search/icons) to shrink */
    gap: 8px; /* Space between search and icons on mobile */
}

/* Menu Toggle Button (Hamburger icon) */
/* Visible on mobile/tablet AND desktop as per requirement */
.menu-toggle {
    background: none;
    border: none;
    font-size: 1.5em; /* Adjust size */
    cursor: pointer;
    padding: 5px; /* Make clickable area easier */
    margin-right: 5px; /* Small space before next item on mobile */
    display: block; /* Visible on mobile AND desktop */
    color: #333; /* Toggle color */
    flex-shrink: 0; /* Prevent shrinking */
    line-height: 1; /* Adjusted from !important */
    align-self: center; /* Align vertically if header-left is flex */
}

/* Desktop Navigation Links (MEN, WOMEN, SNEAKERS) */
/* ALWAYS Hidden in the header, only visible in Off-Canvas */
/* NOTE: The .header-desktop-menu block is kept in HTML but hidden by this rule */
.header-nav {
    display: none; /* Hidden on all screen sizes */
}


/* Logo */
.site-logo img {
    height: 40px; /* Adjust logo size */
    width: auto;
    max-width: 100%; /* Ensure logo image doesn't overflow its container */
    display: block; /* Correct display */
}

/* Search Bar (Mobile: Icon Only) */
.search-container {
    display: flex;
    align-items: center;
    /* Mobile default: No border, padding, only search icon visible */
    border: none;
    padding: 0;
    flex-grow: 1; /* Allow search icon area to grow on mobile to help spacing */
    flex-shrink: 1; /* Allow search container to shrink */
    min-width: 0; /* Allow search container to shrink */
    margin-right: 0; /* No space before icons on mobile, gap on header-right handles it */
}

/* Search button/icon and microphone button/icon */
.search-container button {
    border: none;
    background: none;
    padding: 8px; /* Adjusted padding */
    cursor: pointer;
    font-size: 1.2em; /* Adjusted size */
    color: #555;
    transition: color 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
    line-height: 1; /* Adjusted from !important */
    align-self: center; /* Align vertically */
}

.search-container button:hover {
    color: red;
}

/* Microphone icon is hidden on mobile by default */
.search-container .mic-icon {
    display: none; /* Hidden on mobile */
}

/* Search icon is visible on mobile */
.search-container .search-icon {
    display: block; /* Visible on mobile */
    margin-left: 0; /* No margin */
}


/* Right-side Icons (Location, User, Wishlist, Cart) */
.header-icons {
    display: flex;
    align-items: center; /* Ensure vertical alignment */
    gap: 8px; /* Reduced gap on mobile */
    font-size: 1.2em;
    flex-shrink: 0; /* Prevent shrinking */
    min-width: 0; /* Allow icons container to shrink */
}

.header-icons .icon-link {
    color: #333;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Ensure icons don't shrink */
    padding: 5px; /* Add padding for easier tapping on mobile */
    line-height: 1; /* Adjusted from !important */
}

.header-icons .icon-link:hover {
    color: red;
}

/* Style for filled heart - Targeting the icon inside the button now */
.product-item .wishlist-icon.is-favorited i {
     color: red;
}


/* -------------------- Off-Canvas Menu Styles (Mobile First) -------------------- */
.off-canvas-menu {
    position: fixed;
    top: 0;
    /* Start off-screen by default */
    left: -280px; /* Match default width */
    width: 280px; /* Default width for smaller screens */
    max-width: 80%; /* Ensure it doesn't take full width on tiny screens */
    height: 100%;
    background-color: #fff; /* Or your desired menu background */
    /* Allow scrolling if menu content exceeds screen height */
    overflow-y: auto;
    /* Smooth sliding animation */
    transition: left 0.3s ease;
    /* Ensure it's above the header and overlay */
    z-index: 1020;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5); /* Optional shadow */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    display: block; /* Ensure it's not hidden by a previous rule */
}

/* State when the menu is open (toggled by JS) */
.off-canvas-menu.open {
    left: 0; /* Slide into view */
}

 /* Close button for the off-canvas menu (X icon) - Visible in Off-Canvas only */
 .off-canvas-close-icon {
     position: absolute;
     top: 15px; /* Adjust position */
     right: 15px; /* Adjust position */
     font-size: 2em; /* Adjust size */
     cursor: pointer;
     color: #555;
     z-index: 10; /* Ensure it's above menu content */
     background: none; /* Ensure no button background */
     border: none; /* Ensure no button border */
     padding: 5px; /* Make it clickable */
     line-height: 1; /* Align icon */
 }
 .off-canvas-close-icon:hover {
     color: red;
 }

/* Overlay for background dimming */
.off-canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent black */
    /* Below the menu, above the header and page content */
    z-index: 1015;
    /* Start hidden */
    opacity: 0;
    visibility: hidden; /* Hide completely from screen readers/clicks */
    transition: opacity 0.3s ease, visibility 0.3s ease;
     display: block; /* Ensure it's not hidden by a previous rule */
}

/* State when the overlay is visible (toggled by JS) */
.off-canvas-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Styles for content inside the off-canvas menu */
.off-canvas-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* For close button absolute positioning */
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Top row: Country/Region & Login/Register */
.off-canvas-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    width: 100%;
    padding: 0 10px; /* Add horizontal padding */
    box-sizing: border-box;
}

.off-canvas-top .country-selector {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #555;
}

.off-canvas-top .country-selector i {
    margin-right: 5px;
}

.off-canvas-top .login-register-btn a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 0.9em;
}
.off-canvas-top .login-register-btn a:hover {
     background-color: #eee;
}

.off-canvas-logo {
    margin-bottom: 15px;
    padding: 0 10px; /* Add horizontal padding */
    box-sizing: border-box;
}
.off-canvas-logo img {
     height: 30px;
     width: auto;
     display: block;
}

/* Off-Canvas Horizontal Scrolling Section (New Arrivals, Cotton Linen etc.) inside off-canvas */
.off-canvas-horizontal-scroll {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    /* Enable horizontal scrolling */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
     flex-shrink: 0; /* Prevent shrinking */
}
/* Hide scrollbar (Chrome, Safari, Opera) */
.off-canvas-horizontal-scroll::-webkit-scrollbar { display: none; }

.off-canvas-horizontal-scroll .scroll-items-wrapper {
    display: flex;
    gap: 15px; /* Space between items */
    padding: 0 15px; /* Inner padding */
    width: max-content; /* Allow content to define width */
}

.off-canvas-scroll-item {
    flex-shrink: 0; /* Prevent items from shrinking */
    width: 100px; /* Adjust item width */
    text-align: center;
    display: flex; /* Use flex */
    flex-direction: column; /* Stack content */
}
.off-canvas-scroll-item a {
    display: flex; /* Use flex for link content */
    flex-direction: column;
    align-items: center;
    color: inherit;
    height: 100%; /* Make link fill item */
}
.off-canvas-scroll-item img {
    width: 100px; /* Fixed image width */
    height: 120px; /* Fixed image height */
    object-fit: cover; /* Cover the area without distorting aspect ratio */
    border-radius: 8px; /* Optional rounded corners */
    margin-bottom: 5px;
}
.off-canvas-scroll-item span {
    font-size: 0.8em; /* Adjust text size */
    color: #555;
    font-weight: bold;
    display: block; /* Ensure text wraps */
    width: 100%; /* Ensure text takes full width for centering/wrapping */
    white-space: normal; /* Allow text to wrap */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
}

/* --- START: Styles for the Tabbed/Accordion Menu Inside Off-Canvas --- */

/* Tabs for switching main categories in off-canvas */
.off-canvas-menu .tabs { /* Scope the tabs to inside the off-canvas */
    display: flex;
    justify-content: flex-start; /* Align tabs */
    gap: 10px; /* Smaller gap for mobile menu */
    padding: 10px;
    border-bottom: 1px solid #ddd;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
     scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
     flex-shrink: 0; /* Prevent shrinking */
}
.off-canvas-menu .tabs::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari and Opera */
    display: none;
}

.off-canvas-menu .tabs button {
    background: none;
    border: none;
    padding: 8px 12px; /* Adjust padding */
    font-size: 16px; /* Adjust font size */
    cursor: pointer;
    flex-shrink: 0;
    color: #333; /* Default text color */
     text-transform: uppercase;
     white-space: nowrap; /* Prevent text from wrapping */
}

/* Active tab color (Matching Red from Image) */
.off-canvas-menu .tabs button.active {
    color: red;
    border-bottom: 2px solid red;
    font-weight: bold;
}
.off-canvas-menu .tabs button:hover {
     color: red; /* Hover style */
}

/* Menu Content Containers (Tab Panels) */
.off-canvas-menu .menu-contents {
    padding: 0 20px 15px 20px; /* Add padding around the content area */
     flex-grow: 1; /* Allow contents to grow if needed */
}

/* Hide all content containers by default */
.off-canvas-menu .menu-contents > div {
    display: none;
}

/* Show the active content container */
.off-canvas-menu .menu-contents > div.active-content {
    display: block;
}

/* Optional: Styling for the wrapper inside each tab panel if needed */
.off-canvas-menu .menu-container {
    padding-top: 10px; /* Space above the first menu section */
}

/* Individual menu section within the content */
.off-canvas-menu .menu-section {
    margin-bottom: 0;
    border-bottom: 1px solid #eee; /* Divider between sections */
}
.off-canvas-menu .menu-section:last-child {
    border-bottom: none; /* No border on the last section */
}

/* --- SNEAKER HIGHLIGHTS (Top Images - Specific to Sneakers Content) --- */
/* Ensure these styles are scoped correctly */
.off-canvas-menu #sneakers-content .sneaker-highlights {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.off-canvas-menu #sneakers-content .sneaker-highlights ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Adjust minmax based on desired item width */
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px; /* Adjust gap */
    justify-items: center; /* Center grid items */
}

.off-canvas-menu #sneakers-content .sneaker-highlights li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px; /* Space between image and label */
    width: 100%;
}

.off-canvas-menu #sneakers-content .sneaker-highlights li a {
    color: #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}
.off-canvas-menu #sneakers-content .sneaker-highlights li a:hover {
    color: red; /* Match Red from Image */
}

.off-canvas-menu #sneakers-content .sneaker-highlights img {
    width: 100%;
    height: auto;
    max-width: 90px; /* Adjust max image size */
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Keep images square */
    border: 1px solid #ddd; /* Optional: add a border */
    display: block; /* Ensure image is a block element */
}

.off-canvas-menu #sneakers-content .sneaker-highlights .highlight-label {
    font-size: 13px; /* Adjust font size */
    font-weight: bold;
    padding: 4px 8px; /* Adjust padding */
    background: #f0f0f0;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Prevent overflow from making item too wide */
}
/* --- END SNEAKER HIGHLIGHTS --- */

/* Accordion Header (Clickable Area) */
.off-canvas-menu .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px; /* Adjust font size */
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: none;
    color: #333; /* Default text color */
    border: none; /* Remove default button border */
    text-align: left; /* Align text left */
}

/* Change color/style when header is active (Matching Red from Image) */
.off-canvas-menu .dropdown-header[aria-expanded="true"],
.off-canvas-menu .dropdown-header:hover {
   color: red;
}

/* Nested Dropdown Header */
.off-canvas-menu .submenu .dropdown-header {
    font-size: 15px; /* Smaller font size for nested headers */
    padding: 8px 0;
}

/* Simple Top-Level Link Item */
.off-canvas-menu .menu-link-item a {
    display: block;
    padding: 12px 0;
    font-size: 16px; /* Match top-level headers */
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

/* Simple Link Item within a Submenu */
.off-canvas-menu .submenu .menu-link-item a {
    font-size: 15px; /* Match nested headers */
    padding: 5px 0;
    font-weight: normal;
}

.off-canvas-menu .menu-link-item a:hover {
    color: red; /* Match Red from Image */
}

/* Arrow Icon */
.off-canvas-menu .dropdown-header .arrow {
    transition: transform .3s ease;
    user-select: none;
}

/* Arrow rotation when the section is active/expanded */
.off-canvas-menu .dropdown-header[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

/* Submenu Content */
.off-canvas-menu .submenu {
    display: none; /* Hidden by default */
    border-left: 3px solid red; /* Highlight border (Matching Red from Image) */
    padding-left: 15px;
    margin-top: 5px;
    padding-bottom: 10px; /* Space below submenu content */
    overflow: hidden; /* Essential for height transition when collapsed */
}

/* Indent content within submenus and nested submenus */
.off-canvas-menu .submenu .menu-section > .dropdown-header, /* Nested headers */
.off-canvas-menu .submenu .sub-heading, /* Sub-headings */
.off-canvas-menu .submenu .icon-list, /* Icon lists */
.off-canvas-menu .submenu .menu-link-item /* Simple links */
 {
    padding-left: 10px; /* Add indent */
}

/* --- STYLES FOR ICON-ON-TOP LISTS --- */

/* Style the UL container for lists WITH icons */
.off-canvas-menu .submenu .icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Adjust minmax based on desired number of columns and item width */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* Adjust for smaller icons/text */
    gap: 10px; /* Adjust gap */
    padding: 10px 0;
    justify-items: center; /* Center grid items */
}

/* Style the LI items within the icon lists */
.off-canvas-menu .submenu .icon-list li {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center icon and text horizontally */
    gap: 4px; /* Space between the icon box and the text */
    padding: 0;
    font-size: 12px; /* Smaller font size for list items */
    text-align: center; /* Center the text below the icon */
    width: 100%;
    justify-content: flex-start; /* Align items to the top */
    white-space: normal; /* Allow text to wrap */
}

/* Style links within icon list items */
.off-canvas-menu .submenu .icon-list li a {
    color: #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.off-canvas-menu .submenu .icon-list li a:hover {
    color: red; /* Match Red from Image */
}

.off-canvas-menu .icon-box {
    width: 35px; /* Adjust icon box size */
    height: 35px;
    padding: 3px;
    border-radius: 50%;
    background: #eee; /* Background for the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
    border: 1px solid #ccc; /* Optional: add a border */
}

.off-canvas-menu .icon-box img {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Make image circular */
    object-fit: cover; /* Cover the area without stretching */
}

/* --- END ICON LIST STYLES --- */

/* Style for the 'More' links list - keep it as a standard list */
.off-canvas-menu .submenu.more-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block; /* Display as a standard block list */
    grid-template-columns: none; /* Ensure it doesn't inherit grid */
    gap: 0;
}

.off-canvas-menu .submenu.more-links li {
    display: list-item; /* Ensure li behaves as a list item */
    flex-direction: row; /* Override column flex */
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    text-align: left;
    line-height: 1.4;
}

.off-canvas-menu .submenu.more-links li a { /* Style links within the more section */
    color: #333;
    text-decoration: none;
    display: block;
    padding: 0;
}
.off-canvas-menu .submenu.more-links li a:hover {
    color: red; /* Match Red from Image */
}
/* --- END: Styles for the Tabbed/Accordion Menu Inside Off-Canvas --- */

/* -------------------- Main Content and Blur Effect (Mobile First) -------------------- */

/* Wrapper for main page content (excluding header and off-canvas) */
.page-content-wrapper {
    position: relative; /* Needed for z-index and blur stacking context */
    /* Ensure it's below the header and off-canvas elements */
    z-index: 10;
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for transform AND filter */
    /* Ensure the content starts immediately below the sticky header's original position */
    padding-top: 0;
    margin-top: 0;
     flex-grow: 1; /* Allow main content to grow and push footer down */
}

/* Apply blur filter and transform to content wrapper when the menu is open (toggled by JS) */
/* Adjust transform value based on off-canvas menu width */
body.menu-open .page-content-wrapper {
    filter: blur(5px); /* Adjust blur amount as needed */
    /* Disable pointer events on blurred content */
    pointer-events: none;
    /* Slide content to the right by the menu width */
    transform: translateX(280px); /* Match default off-canvas width */
}

/* Image Scroller (Main Page) - Matching the Full-Width Banner */
.banner-slider-section-wrapper {
     position: relative;
     width: 100%;
     margin-bottom: 2%; /* Margin below the banner */
     padding-top: 0; /* Ensure no padding above */
     margin-top: 0; /* Ensure no margin above */
     /* Add horizontal padding here if you want arrows to be inside padding */
     /* padding: 0 15px; */
}

.img-header-moving {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Ensure it takes full width and sits flush below header */
    width: 100%;
    /* Remove padding on the container if it has any, apply to inner items if needed */
}
.img-header-moving::-webkit-scrollbar { display: none; }

.img-header-moving img {
    flex-shrink: 0;
    width: 100%; /* Each image takes the full width of the container */
    height: auto; /* Auto height to maintain aspect ratio */
    scroll-snap-align: start;
    object-fit: cover;
     min-height: 200px; /* Prevent banner from being too short on large screens */
     max-height: 600px; /* Prevent banner from being too tall - Adjust as needed */
     display: block; /* Ensure image is block */
}


/* Pagination dots */
.pagination-dots {
    position: absolute;
    bottom: 15px; /* Position below the banner */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px; /* Space between dots */
    z-index: 1; /* Above images */
}

.pagination-dots .dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.pagination-dots .dot.active {
    background-color: red; /* Active dot color */
    width: 12px; /* Highlight active dot */
    height: 8px; /* Maintain height */
    border-radius: 4px; /* Make active dot rectangular */
}

.pagination-dots .dot:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* New Arrivals, Trending, Top of the Week, Categories, Product Lists (Similar Grid Layout) */
.new-arrivals-grid, .trending-grid, .top-items-grid, .categories-grid, .product-list, .hidden-gems-grid, .plus-size-list, .offer-list {
    display: grid;
    /* Default mobile grid: auto-fit items with minimum width of 150px */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
    /* Removed padding here, rely on .full-container */
    /* padding: 0 15px; */
}

.new-arrival-item, .trending-item, .top-item, .categories-grid .category-item {
    text-align: center;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff; /* Add background for consistency */
    display: flex; /* Use flex */
    flex-direction: column; /* Stack content */
}

.new-arrival-item:hover, .trending-item:hover, .top-item:hover, .categories-grid .category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.new-arrival-item a, .trending-item a, .top-item a, .categories-grid .category-item a {
    display: flex; /* Use flex for link content */
    flex-direction: column;
    align-items: center; /* Center items */
    color: inherit;
     height: 100%; /* Make link fill the item */
}

.new-arrival-item img, .trending-item img, .top-item img, .categories-grid .category-item img {
    width: 100%;
    height: 150px; /* Fixed height for consistency in these grids */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
     flex-shrink: 0; /* Prevent image from shrinking */
}

.new-arrival-item p, .trending-item p, .top-item p, .categories-grid .category-item p {
    font-size: 1em;
    color: #555;
    font-weight: bold;
    flex-grow: 1; /* Allow text to grow */
    display: flex; /* Use flex */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Horizontally center text */
    text-align: center;
}

/* Category Blocks Section */
/* Removed .full-container padding override here */
/* .category-blocks-section .full-container { padding: 0; } */

.category-rows {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-row {
    display: grid;
    /* Mobile grid: smaller min width for category blocks */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 0; /* Removed padding here, should be on the container */
}

.category-block {
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Use flex */
    flex-direction: column; /* Stack content */
}

.category-block:hover {
     transform: translateY(-5px);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.category-block a {
    display: flex; /* Use flex */
    flex-direction: column;
    color: inherit;
     padding-bottom: 10px;
     height: 100%; /* Make link fill the block */
     justify-content: space-between; /* Distribute space */
}

.category-block img {
    width: 100%;
    height: 120px; /* Adjust height for mobile category blocks */
    object-fit: cover;
     flex-shrink: 0; /* Prevent image from shrinking */
}

.category-block h3 {
    font-size: 0.9em; /* Adjust font size for mobile */
    margin-top: 10px;
    margin-bottom: 0;
    color: #333;
    flex-grow: 1; /* Allow heading to grow if needed */
     display: flex; /* Use flex */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Horizontally center text */
    text-align: center;
}

.view-all-block {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    border: 2px dashed #ccc;
    border-radius: 8px; /* Match block radius */
    padding: 10px;
    min-height: 130px; /* Match image height + padding (120 + 10) */
}

.view-all-link {
    font-size: 1em; /* Adjust font size for mobile */
    font-weight: bold;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.view-all-link i {
    margin-top: 5px;
    font-size: 1.3em; /* Adjust icon size */
}

/* Product Grid/Slider Items (Shared Styles) */
/* Removed background-color from product-grid-section */

/* Slider Wrapper - Use Flexbox for horizontal arrangement */
.product-slider-section .slider-wrapper-container {
     position: relative;
     padding: 0 15px; /* Default padding, arrows will overlay/be positioned */
}

.product-slider-section .slider-container {
    /* Enable manual scrolling on mobile */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-slider-section .slider-container::-webkit-scrollbar { display: none; }

.product-slider-section .slider-wrapper {
    display: flex;
    gap: 15px;
     /* Important for letting content dictate width for scrolling */
     width: max-content;
     padding-bottom: 10px; /* Add padding for scrollbar space if needed */
}

.product-slider-section .product-item {
    flex-shrink: 0;
    width: 180px; /* Default width for mobile slider items */
}

/* Slider navigation arrows */
.product-slider-section .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 35px; /* Smaller arrows on mobile */
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10; /* Above product items */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    color: #333; /* Arrow color */
    /* Hide arrows by default and show only on larger screens via media query */
    display: none; /* Hidden on mobile */
}

.product-slider-section .slider-arrow:hover { background-color: #fff; color: red; }

/* Position arrows relative to the slider-wrapper-container padding */
.product-slider-section .slider-arrow.left-arrow { left: 5px; }
.product-slider-section .slider-arrow.right-arrow { right: 5px; }

/* Individual Product Item Styling (used in grids and sliders) */
.product-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.product-item a { display: block; color: inherit; flex-grow: 1; display: flex; flex-direction: column; } /* Ensure link wraps content and allows flex */
.product-item:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }

/* Wrapper to maintain aspect ratio for product images */
.product-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 130%; /* Aspect ratio (height is 130% of width) */
    background-color: #eee;
}
.product-image-wrapper img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-tag {
    position: absolute;
    top: 8px; left: 8px; /* Adjust position */
    background-color: red;
    color: white;
    font-size: 0.6em; /* Smaller font size */
    padding: 2px 6px; /* Adjust padding */
    border-radius: 3px;
    z-index: 2;
    font-weight: bold;
}

/* Wishlist Button Styling (using the button element from HTML correction) */
/* Made this more specific to ensure it applies correctly */
.product-item .wishlist-icon {
    position: absolute;
    top: 8px; right: 8px; /* Adjust position */
    font-size: 1em; /* Adjust size */
    color: #555;
    cursor: pointer;
    z-index: 2;
    padding: 4px; /* Adjust padding */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: color 0.3s ease, background-color 0.3s ease;
    border: none; /* Remove default button border */
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
}
.product-item .wishlist-icon:hover {
    color: red;
    background-color: rgba(255, 255, 255, 0.9);
}
/* Style for filled heart when item is favorited (handled by JS adding class) */
.product-item .wishlist-icon.is-favorited {
   color: red; /* Match filled color */
}
/* Ensure icon inside button inherits color */
.product-item .wishlist-icon i {
    color: inherit;
}

.product-info {
    padding: 8px; /* Adjust padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 0.9em; /* Base font size for product info */
}

.product-brand-name {
    font-size: 0.8em;
    color: #888;
    margin-bottom: 3px; /* Adjust margin */
    line-height: 1.2;
}

.product-description {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px; /* Adjust margin */
     flex-grow: 1; /* Allows description to take up space if needed */
     line-height: 1.3;
}

.price-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow prices/rating to wrap on small screens */
    margin-top: auto; /* Push price/rating to the bottom */
     font-size: 0.9em;
}

.discounted-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #007bff; /* Or your primary color */
    margin-right: 5px; /* Adjust margin */
}

.original-price {
    font-size: 0.8em; /* Adjust size */
    color: #888;
    text-decoration: line-through;
    margin-right: 5px; /* Adjust margin */
}

.offer {
    font-size: 0.7em; /* Adjust size */
    color: green; /* Or your success color */
    font-weight: bold;
    margin-right: 5px; /* Adjust margin */
}

.rating {
    font-size: 0.9em; /* Adjust size */
    color: #ffc107; /* Star color */
    margin-left: auto; /* Push rating to the right */
    min-width: 45px; /* Adjust min width */
    text-align: right;
}

.add-to-cart {
    display: block;
    width: calc(100% - 16px); /* Adjust width based on padding */
    margin: 8px; /* Adjust margin */
    padding: 8px; /* Adjust padding */
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em; /* Adjust font size */
    text-align: center;
    transition: background-color 0.3s ease;
}
.add-to-cart:hover { background-color: red; }

/* Scrollable Sections (Collections, Fandoms) */
.scrollable-section .full-container { padding: 0; }
/* Text align H2 left within scrollable sections */
.scrollable-section h2 { padding: 0 15px; text-align: left; }

.scrollable-area {
    /* Enable horizontal scrolling */
    overflow-x: auto;
    padding: 0 15px;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollable-area::-webkit-scrollbar { display: none; }

.scroll-items-wrapper {
    display: flex;
    gap: 15px; /* Adjust gap */
    width: max-content; /* Allow content to define width */
}

.scroll-item {
    flex-shrink: 0; /* Prevent shrinking */
    width: 120px; /* Default mobile width */
    text-align: center;
     display: flex; /* Use flex */
    flex-direction: column; /* Stack content */
}
.scroll-item a {
    display: flex; /* Use flex for link content */
    flex-direction: column;
    align-items: center;
    color: inherit;
     height: 100%; /* Make link fill item */
}
.scroll-item img {
    width: 100%;
    height: 120px; /* Adjust height */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 5px;
     flex-shrink: 0; /* Prevent image from shrinking */
}
.scroll-item figcaption {
    font-size: 0.8em; /* Adjust font size */
    color: #555;
    font-weight: bold;
     flex-grow: 1; /* Allow caption to grow */
     display: flex; /* Use flex */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    text-align: center;
}

/* Section Footers (View All links) */
.section-footer {
    text-align: center;
    margin-top: 30px;
}

.section-footer a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #333;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    font-size: 1em; /* Adjust font size */
}
.section-footer a:hover { background-color: #333; color: white; }
.section-footer a i { margin-left: 5px; }

/* Customer Count Section */
.customer-count-section h2 { /* Keeps center alignment */ }

/* -------------------- Footer Styles (Mobile First) -------------------- */
.site-footer {
    background-color: #f2f2f2;
    padding: 40px 15px 20px; /* Default padding */
    color: #555;
    font-size: 0.9em;
    flex-shrink: 0; /* Prevent footer from shrinking in body flex */
    margin-top: auto; /* Push footer to the bottom */
}

/* Desktop Footer Columns (Hidden on mobile) */
.footer-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px; /* Match mobile padding */
    border-top: 1px solid #ccc;
    padding-top: 20px;
    display: none; /* Hidden by default on mobile */
}

.footer-links-column h3 {
    color: red; /* Heading color */
    font-size: 1.1em;
    margin-bottom: 15px;
}

.footer-links-column ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-links-column a { color: #555; transition: color 0.3s ease; }
.footer-links-column a:hover { color: #000; }
.view-more-link { color: blue; font-weight: bold; }
.view-more-link:hover { text-decoration: underline; }

/* Shared Footer Sections (App Download, Social, Payment) */
.footer-app-download, .footer-social-media, .footer-payment-shipping {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px; /* Match main container padding */
    border-top: 1px solid #ccc;
    padding-top: 20px;
    text-align: center;
}

.footer-app-download strong { display: block; margin-bottom: 10px; }
.footer-app-download img {
    height: 35px;
    display: inline-block;
    margin: 0 5px;
     transition: opacity 0.2s ease;
}
.footer-app-download img:hover { opacity: 0.8; }

.footer-social-media p { margin-bottom: 10px; }
.footer-social-media .social-icons {
    font-size: 1.5em;
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}
.footer-social-media a { color: #555; transition: color 0.3s ease; }
.footer-social-media a:hover { color: red; }

/* Footer Collapsible Links (Visible on mobile/tablet by default) */
.footer-collapsible-links {
     /* Show by default on mobile */
     display: block;
     max-width: 1200px;
     margin: 20px auto 0; /* Adjust margin */
     padding: 0 15px; /* Match main container padding */
     border-top: 1px solid #ccc; /* Add top border */
}

.footer-collapsible-item { border-bottom: 1px solid #eee; margin-bottom: 0; }
.footer-collapsible-item:last-child { border-bottom: none; }

/* Footer Collapsible Header (is a button now) */
.footer-collapsible-item .collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    font-weight: bold;
    color: #333;
    padding: 12px 0;
    /* Add button specific styles */
    width: 100%; /* Make button take full width */
    background: none;
    border: none;
    text-align: left;
    outline: none; /* Remove default outline, focus-visible handles it */
}

/* Rotate icon when collapsible section is open (toggled by JS) */
.footer-collapsible-item.open .toggle-icon i {
     transform: rotate(45deg); /* Rotate the Font Awesome icon directly */
     transition: transform 0.3s ease; /* Add transition to the icon */
}

/* Style for the toggle icon span */
.footer-collapsible-item .toggle-icon {
    /* Use flex to center the icon inside the span */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
    font-size: 1.2em;
    margin-left: 10px;
    line-height: 1; /* Ensure vertical alignment */
}

/* Style for the Font Awesome icon inside the span */
.footer-collapsible-item .toggle-icon i {
     /* Initial state (plus icon) - no rotation */
     transform: rotate(0deg);
     /* Inherit color from parent button/header */
     color: inherit;
      /* Transition is applied above in the '.open .toggle-icon i' rule */
}


.footer-collapsible-item .collapsible-content {
    /* Height/Display controlled by JS for smooth animation */
    overflow: hidden;
    /* Initial height should be 0 when closed */
    /* height: 0; */ /* Managed by JS */
    /* opacity: 0; */ /* Managed by JS */
    /* Note: JS is toggling 'display: block' and managing height for transition */
    /* CSS transition property here ensures smooth change when JS modifies height/opacity */
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* CSS states for content managed by JS */
.footer-collapsible-item.open .collapsible-content {
     /* JS manages height to auto or calculated value for smooth transition */
     /* JS manages opacity to 1 for smooth transition */
     padding-top: 10px; /* Add padding when open */
     padding-bottom: 10px; /* Add padding when open */
}


.footer-collapsible-item .collapsible-content ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}
.footer-collapsible-item .collapsible-content a { color: #555; transition: color 0.3s ease; }
.footer-collapsible-item .collapsible-content a:hover { color: #000; }

.footer-payment-shipping p { margin-bottom: 10px; }
.footer-payment-shipping .payment-icons {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     margin-bottom: 10px;
}
.footer-payment-shipping .payment-icons span {
     display: inline-block;
     margin: 0 8px 8px 0;
     font-weight: bold;
     color: #333;
     font-size: 1em;
}
.footer-payment-shipping .payment-icons span:last-child { margin-right: 0; }

/* Copyright */
.footer-bottom {
     text-align: center;
     margin-top: 30px;
     font-size: 0.8em;
     color: #888;
     border-top: 1px solid #ccc; /* Add border above copyright */
     padding-top: 20px; /* Add padding above copyright */
}

/* Developer Credit */
.developer-credit {
    text-align: center;
    font-size: 0.8em;
    padding: 10px 0;
    background-color: #f1f1f1;
    color: #555;
}
.developer-credit a { color: #007BFF; text-decoration: none; }
.developer-credit a:hover { text-decoration: underline; }


/* New Arrivals Section Styling (Example of another carousel/grid) */
.new-arrivals-section {
    padding: 60px 0; /* Add vertical spacing */
    text-align: center; /* Center the heading */
}

.section-title {
    font-size: 2.2em; /* Larger heading */
    margin-bottom: 40px; /* Space below heading */
    color: #333; /* Dark text color */
    text-transform: uppercase; /* Uppercase like in the image */
    letter-spacing: 1px;
}

/* Carousel Container - enables arrow positioning */
.arrivals-carousel-container {
    position: relative;
    /* Optional: Add overflow: hidden if you don't want arrows to overlap content outside this container */
}

/* Wrapper for the carousel items - this creates the horizontal layout and scrolling */
.arrivals-items-wrapper {
    display: flex; /* Arrange items horizontally */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling animation */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding-bottom: 20px; /* Add padding for potential scrollbar space */

    /* Hide Scrollbar (optional) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.arrivals-items-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Styling for each individual arrival item card */
.arrival-item-card {
    flex: 0 0 auto; /* Prevent items from shrinking/growing, allows fixed width */
    width: 280px; /* Set a fixed width for each card (adjust as needed) */
    margin-right: 20px; /* Space between cards */
    /* If you want padding within the card, add it here or inside .item-details */
    text-align: left; /* Align text to the left within the card */
    border: 1px solid #eee; /* Optional: Add a light border */
    border-radius: 8px; /* Optional: Rounded corners */
    overflow: hidden; /* Ensure image and content fit within border-radius */
    background-color: #fff; /* Optional: white background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.arrival-item-card:last-child {
    margin-right: 0; /* Remove right margin for the last item */
}

.arrival-item-card a {
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color from parent */
    display: block; /* Make the entire card clickable */
}

.arrival-item-card img {
    display: block; /* Remove extra space below image */
    width: 100%; /* Image fills the card width */
    height: auto; /* Maintain aspect ratio */
}

/* Styling for the text details below the image */
/* Note: There is a global .item-details, adjust if needed */
/* Keeping these specific for this card type */
.new-arrivals-section .item-details {
    padding: 15px; /* Padding inside the details area */
}

.new-arrivals-section .item-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
    color: #333;
}

.new-arrivals-section .item-description {
    font-size: 0.95em;
    color: #666;
    margin-top: 0;
    margin-bottom: 10px;
}

.new-arrivals-section .item-price {
    font-size: 1.05em;
    font-weight: bold;
    color: #000; /* Or a specific price color */
    margin-top: 0;
    margin-bottom: 0;
}

/* Optional: Hover effect on cards */
.arrival-item-card:hover {
    transform: translateY(-5px); /* Lift card slightly on hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* More pronounced shadow on hover */
}


/* Styling for Navigation Arrows (requires JavaScript to make them scroll) */
/* Note: This uses .carousel-nav-arrow, different from .nav-arrow in the oversized section */
.carousel-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10; /* Ensure arrows are above items */
    border-radius: 50%; /* Circular button */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex; /* Center content */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add shadow to arrows */
    font-size: 1.5em; /* Size of the arrow symbol */
    color: #333; /* Color of the arrow symbol */
    line-height: 1; /* Center vertically */
    transition: background-color 0.3s ease, color 0.3s ease;
    display: none; /* Hide by default, show with JS or media query */
}

.carousel-nav-arrow:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #000;
}

.left-arrow {
    left: 10px; /* Position from the left edge */
}

.right-arrow {
    right: 10px; /* Position from the right edge */
}

/* Arrow content (using simple characters, replace with icons if using Font Awesome) */
.left-arrow::before {
    content: '<'; /* Unicode left arrow or use Font Awesome icon class */
}

.right-arrow::before {
    content: '>'; /* Unicode right arrow or use Font Awesome icon class */
}

/* Add styles for disabled state */
.carousel-nav-arrow:disabled {
    opacity: 0.5; /* Make them semi-transparent */
    cursor: not-allowed; /* Change cursor */
}


/* === START: Integrated and Corrected Oversized Carousel Styles === */

.product-carousel-section {
    text-align: center; /* Center the heading */
    padding: 20px 0;
    overflow: hidden; /* Hide overflowing items initially */
    position: relative; /* Needed for absolute positioning of arrows */
}

/* .full-container styles are already global, removed redundancy */

.carousel-heading {
    margin-bottom: 30px;
    font-size: 2em; /* Adjust size as needed */
}

.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the carousel container and arrows */
    width: 100%; /* Take full width */
    position: relative;
    /* Ensure arrows are within the padding of the full-container */
    /* Or adjust carousel-container width/margin */
    /* Keeping original logic of 40px margin for arrows */
}

.product-carousel-section .carousel-container { /* Specific selector */
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling */
    -webkit-overflow-scrolling: touch; /* Improve scrolling on touch devices */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    width: calc(100% - 80px); /* Adjust width to make space for arrows (40px on each side) */
    margin: 0 40px; /* Space for arrows */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.product-carousel-section .carousel-container::-webkit-scrollbar { display: none; }

.product-carousel-section .carousel-item { /* Specific selector */
    flex: 0 0 auto; /* Prevent shrinking, allow growing based on content */
    width: 250px; /* Adjust item width as needed */
    margin: 0 10px; /* Space between items */
    background-color: #f0f0f0; /* Placeholder background */
    padding: 10px;
    border-radius: 8px;
    text-align: left;
}

.product-carousel-section .item-link { /* Specific selector */
    text-decoration: none;
    color: inherit; /* Inherit text color */
    display: block; /* Make the whole block clickable */
}

.product-carousel-section .item-image-area { /* Specific selector */
    position: relative;
    width: 100%;
    height: 250px; /* Placeholder height */
    background-color: #ddd; /* Placeholder background */
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.product-carousel-section .item-image-area img { /* Specific selector */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area without distortion */
}

.product-carousel-section .offer-tag { /* Specific selector */
    position: absolute;
    top: 10px;
    left: 0;
    background-color: red;
    color: white;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 10; /* Ensure it's above the image */
}

/* Specific selector for this carousel's wishlist icon */
.product-carousel-section .wishlist-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2em;
    z-index: 10;
    color: grey; /* Default grey color */
    /* Add transition for hover/active state */
     transition: color 0.3s ease, background-color 0.3s ease;
}

.product-carousel-section .wishlist-icon:hover {
    color: red;
    background-color: rgba(255, 255, 255, 1);
}

/* Style for filled heart when item is favorited (handled by JS adding class) */
.product-carousel-section .wishlist-icon.is-favorited {
    color: red; /* Match filled color */
}


.product-carousel-section .item-details { /* Specific selector */
    padding: 5px 0;
}

.product-carousel-section .store-name { /* Specific selector */
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}

.product-carousel-section .product-title { /* Specific selector */
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.product-carousel-section .item-description { /* Specific selector */
    font-size: 1em;
    color: #333;
    margin-bottom: 10px;
}

.product-carousel-section .price-info { /* Specific selector */
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.product-carousel-section .current-price { /* Specific selector */
    font-size: 1.1em;
    font-weight: bold;
    color: #000; /* Current price color */
    margin-right: 8px;
}

.product-carousel-section .original-price { /* Specific selector */
    font-size: 0.9em;
    color: #888;
    text-decoration: line-through;
    margin-right: 8px;
}

.product-carousel-section .discount { /* Specific selector */
    font-size: 0.9em;
    color: green;
    font-weight: bold;
}

.product-carousel-section .rating-info { /* Specific selector */
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: gold; /* Star color */
}

.product-carousel-section .star-icon { /* Specific selector */
    margin-right: 3px;
}

.product-carousel-section .rating-number { /* Specific selector */
    color: #333; /* Rating number color */
}

/* Navigation Arrows for the Oversized Carousel (Scoped) */
.product-carousel-section .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    /* Display flex is needed to center the arrow icon */
    display: none; /* Hidden by default, JS will change to flex */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    z-index: 20; /* Above the container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 0; /* Remove default button padding */
    transition: opacity 0.3s ease; /* Smooth fade for disabled state */
}

.product-carousel-section .nav-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-carousel-section .prev-arrow { left: 0; }
.product-carousel-section .next-arrow { right: 0; }

/* === END: Integrated and Corrected Oversized Carousel Styles === */



/* ==================== Responsiveness (Media Queries) ==================== */

/* Adjustments for extra small phones (<= 480px) */
@media (max-width: 480px) {
     /* Further reduce padding and gap in header */
     .header-container { padding: 8px 10px; gap: 6px; }
      .menu-toggle { font-size: 1.4em; padding: 4px; margin-right: 8px; }
       .site-logo img { height: 30px; }

     /* Mobile Search adjustments */
     .search-container { margin-right: 6px; flex-grow: 1; } /* Reduced margin, allow it to grow more */
      .search-container button { font-size: 1.1em; padding: 6px; } /* Adjusted padding */
      .header-icons { gap: 6px; font-size: 1.1em;} /* Tighter icons */
      .header-icons .icon-link { padding: 4px; } /* Adjust padding */


     /* Adjust off-canvas size for very small screens */
     .off-canvas-menu { width: 250px; max-width: 85%; left: -250px; }
      body.menu-open .page-content-wrapper {
          transform: translateX(250px); /* Match extra small off-canvas width */
      }
      .off-canvas-header { padding: 12px; }
      .off-canvas-top { font-size: 13px; margin-bottom: 10px; padding: 0 5px; } /* Further reduce padding */
       .off-canvas-logo { padding: 0 5px; } /* Further reduce padding */
       .off-canvas-logo img { height: 25px; }
        /* Off-Canvas Close Icon adjustment */
        .off-canvas-close-icon { font-size: 1.8em; top: 10px; right: 10px; padding: 3px;} /* Adjusted padding */


       /* Off-Canvas Tab adjustments */
       .off-canvas-menu .tabs { padding: 8px 0; gap: 8px; }
        .off-canvas-menu .tabs button { font-size: 14px; padding: 6px 10px; }

       /* Off-Canvas Horizontal Scrolling Section adjustments */
       .off-canvas-horizontal-scroll { padding: 12px 0; }
       .off-canvas-horizontal-scroll .scroll-items-wrapper { padding: 0 10px; gap: 10px; }
       .off-canvas-scroll-item { width: 90px; } /* Adjust item width */
        .off-canvas-scroll-item img { width: 90px; height: 110px; } /* Adjust image size */
        .off-canvas-scroll-item span { font-size: 0.7em; } /* Adjust text size */


      /* Adjust expandable menu item padding/font size */
      .off-canvas-menu .menu-contents { padding: 0 15px 10px; }
      .off-canvas-menu .dropdown-header { padding: 10px 0; font-size: 15px; }
      /* Specific adjustment for icon lists to fit better */
       .off-canvas-menu .submenu .icon-list { grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); gap: 6px; padding: 6px 0; }
        .off-canvas-menu .icon-box { width: 28px; height: 28px; padding: 2px; }
        .off-canvas-menu .submenu .icon-list li { font-size: 10px; gap: 2px; }
       /* Simple link item padding in submenu */
       .off-canvas-menu .submenu .menu-link-item a { padding: 4px 0; font-size: 13px; }


     /* Adjust section padding and heading size */
     h2 { font-size: 1.6em; margin-bottom: 20px; }
      section { padding: 25px 0; }
       /* Further reduce container padding */
       .container, .full-container { padding: 0 10px; }

       /* Adjust grid layouts for smaller screens */
       .new-arrivals-grid, .trending-grid, .top-items-grid, .categories-grid, .product-list, .hidden-gems-grid, .plus-size-list, .offer-list {
           grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Smaller grid items */
           gap: 10px;
           margin-top: 15px;
           /* Removed padding here, rely on .full-container */
           /* padding: 0 10px; */
       }
       .new-arrival-item, .trending-item, .top-item, .categories-grid .category-item { padding: 12px; }
       .new-arrival-item img, .trending-item img, .top-item img, .categories-grid .category-item img { height: 130px; margin-bottom: 8px; }
       .new-arrival-item p, .trending-item p, .top-item p, .categories-grid .category-item p { font-size: 0.9em; }


       /* Adjust slider layout for smaller screens */
       .product-slider-section .slider-wrapper-container { padding: 0 10px; }
       .product-slider-section .slider-wrapper { gap: 10px; }
       .product-slider-section .product-item { width: 150px; } /* Smaller slider items */
       /* Slider arrows remain hidden below 768px */


       /* Adjust product item info size */
       .product-item .product-info { padding: 6px; font-size: 0.8em; }
       .product-item .product-brand-name { font-size: 0.7em; margin-bottom: 2px; }
       .product-item .product-description { font-size: 0.9em; margin-bottom: 6px; }
       .product-item .price-rating { font-size: 0.8em; }
        .product-item .discounted-price { font-size: 1em; margin-right: 4px; }
        .product-item .original-price, .product-item .offer, .product-item .rating { font-size: 0.7em; margin-right: 4px; }

        /* Adjust add to cart button size */
        .add-to-cart { padding: 7px; font-size: 0.85em; margin: 7px; width: calc(100% - 14px); }


       /* Adjust category block layout/size */
       .category-rows { gap: 10px; }
       .category-row { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; padding: 0; } /* Removed padding here */
        .category-block img { height: 100px; }
         .category-block h3 { font-size: 0.8em; margin-top: 8px; padding-bottom: 8px; }
        .view-all-block { padding: 8px; min-height: 108px; } /* Match taller blocks + padding (100 + 8) */
        .view-all-link { font-size: 0.9em; }
        .view-all-link i { font-size: 1.2em; }


       /* Adjust horizontal scrollable sections */
       .scrollable-section h2 { padding: 0 10px; text-align: left; } /* Keep left align */
       .scrollable-area { padding: 0 10px; } /* Adjust padding */
       .scroll-items-wrapper { gap: 10px; } /* Adjust gap */
       .scroll-item { width: 100px; }
       .scroll-item img { height: 100px; }
       .scroll-item figcaption { font-size: 0.7em; }


        /* Adjust section footer size */
        .section-footer { margin-top: 25px; }
        .section-footer a { padding: 8px 15px; font-size: 0.9em; }

        /* Adjust footer padding */
        .site-footer { padding-top: 25px; padding-bottom: 15px; }
        .footer-app-download, .footer-social-media, .footer-collapsible-links, .footer-payment-shipping { margin-top: 15px; padding-top: 15px; padding: 0 10px; }

        /* Adjust footer element sizes */
        .footer-app-download img { height: 25px; }
        .footer-social-media .social-icons { font-size: 1.3em; gap: 10px; }
        .footer-collapsible-item .collapsible-header { font-size: 0.9em; padding: 10px 0; }
        .footer-collapsible-item.open .collapsible-content { padding-top: 8px; padding-bottom: 8px; }
        .footer-payment-shipping .payment-icons span { font-size: 0.9em; margin: 0 4px 4px 0; }

        /* Adjust copyright and developer credit */
        .footer-bottom { margin-top: 20px; font-size: 0.7em; padding-top: 15px; border-top: 1px solid #ccc; }
        .developer-credit { font-size: 0.6em; padding: 8px 0; }


         /* === START: Oversized Carousel Responsive Styles (<= 480px) === */
         .product-carousel-section .carousel-heading { font-size: 1.5em; } /* Match h2 size */
         .product-carousel-section .carousel-item { width: 180px; } /* Adjust item width */
          .product-carousel-section .carousel-container {
             width: calc(100% - 40px); /* Adjust width for very small screens (20px on each side) */
             margin: 0 20px; /* Space for arrows */
         }
         .product-carousel-section .nav-arrow {
             width: 30px;
             height: 30px;
             font-size: 1.2em;
              display: none; /* Hide arrows entirely on very small screens */
         }
          .product-carousel-section .prev-arrow { left: 0; }
          .product-carousel-section .next-arrow { right: 0; }

         .product-carousel-section .item-image-area { height: 180px; } /* Adjust image height */
         .product-carousel-section .offer-tag { font-size: 0.7em; padding: 1px 6px; }
         .product-carousel-section .wishlist-icon { width: 25px; height: 25px; font-size: 1em; top: 5px; right: 5px; }
         .product-carousel-section .store-name { font-size: 0.8em; }
         .product-carousel-section .product-title { font-size: 1em; }
          .product-carousel-section .item-description { font-size: 0.9em; }
          .product-carousel-section .current-price { font-size: 1em; margin-right: 4px;}
           .product-carousel-section .original-price, .product-carousel-section .discount { font-size: 0.8em; margin-right: 4px;}
           .product-carousel-section .rating-info { font-size: 0.8em; }

         /* === END: Oversized Carousel Responsive Styles (<= 480px) === */

}


/* Tablet and Desktop Layout (Applies from 768px and up) */
@media (min-width: 768px) {

    /* Adjust off-canvas width for larger screens */
    .off-canvas-menu {
        width: 350px; /* Wider on desktop */
        left: -350px; /* Start further off-screen */
    }

    /* Apply blur filter and transform to content wrapper when the menu is open (toggled by JS) */
    /* Adjust transform value based on off-canvas menu width */
    body.menu-open .page-content-wrapper {
        filter: blur(5px); /* Keep filter if desired on desktop */
        /* Disable pointer events on blurred content */
        pointer-events: none;
        transform: translateX(350px); /* Match desktop off-canvas width */
    }

    /* Header adjustments */
     .header-container {
         padding: 10px 20px; /* Increased padding on desktop */
         gap: 20px; /* Increase gap */
     }

    .header-left {
        flex-grow: 0; /* Don't grow on desktop */
         min-width: auto; /* Allow width based on content */
    }

    /* Keep mobile menu toggle on desktop as per requirement */
    .menu-toggle {
        display: block;
        margin-right: 15px; /* Add space before next item */
        font-size: 1.6em; /* Slightly larger icon */
    }

    /* Hide desktop navigation menu - It's only in off-canvas */
    /* NOTE: The .header-desktop-menu block is kept in HTML but hidden by this rule */
    .header-nav { display: none; }

    .header-center {
        flex-grow: 1; /* Logo section takes available space */
        min-width: 150px; /* Give logo area a bit more space on desktop */
    }

     .site-logo img { height: 45px; } /* Slightly larger logo on desktop */

     .header-right {
         flex-shrink: 0; /* Prevent shrinking */
         min-width: 350px; /* Ensure right side has a minimum width */
         gap: 25px; /* Increase gap between search and icons on desktop */
         justify-content: flex-end; /* Align search/icons to the right */
     }

    /* Show full search bar input and mic icon */
     .search-container {
         display: flex; /* Ensure flex */
         border: 1px solid #ccc; /* Add border */
         border-radius: 25px;
         padding: 5px 10px; /* Add padding */
         margin-right: 0; /* Gap handled by header-right */
         flex-grow: 1; /* Allow search to grow more on desktop */
         max-width: 400px; /* Optional max width for search */
         min-width: 180px; /* Ensure search bar has minimum width */
         background-color: #f9f9f9; /* Example background */
     }

     /* --- START: Code originally marked to hide on mobile, now explicitly shown on desktop --- */
    .search-container input[type="text"] {
        display: block; /* Show input */
         border: none; /* Keep original border style */
         padding: 8px 0; /* Restore original padding */
         flex-grow: 1;
         outline: none;
         font-size: 1em;
         background: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         min-width: 0;
         color: #333;
         box-sizing: border-box;
         margin-right: 8px; /* Space between input and mic icon */
     }
     .search-container input[type="text"]::placeholder {
         color: #888; /* Keep original placeholder color */
     }
     /* --- END: Code explicitly shown on desktop --- */

     .search-container .mic-icon {
         display: block; /* Show mic icon */
         border-right: 1px solid #eee; /* Add separator */
         padding-right: 10px; /* Add padding */
         margin-right: 10px; /* Space between mic and search icon */
     }
     .search-container .search-icon {
        /* display: block; flex-shrink: 0; padding: 8px; are already defaults */
        padding: 8px 0 8px 8px; /* Adjust padding if needed */
     }

    /* Adjust right-side icons */
     .header-icons {
         gap: 20px; /* Increase gap */
         font-size: 1.3em; /* Slightly larger icons */
     }
     .header-icons .icon-link {
         padding: 0; /* Remove mobile padding */
     }

     /* --- START: Code originally marked to hide on mobile, now explicitly shown on desktop --- */
    /* Header Menu Container (Exists in HTML, but hidden by parent .header-nav's display: none) */
    /* NOTE: These styles only take effect if the parent .header-nav is made visible on desktop */
    .header-desktop-menu {
        display: flex; /* Show flex container on desktop */
        align-items: center;
        gap: 16px;
    }

    /* Remove bullets and reset spacing */
    .header-desktop-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex; /* Makes list items horizontal */
        gap: 20px;      /* Space between items */
    }

    /* List items horizontal */
    .header-desktop-menu li {
        padding: 8px 12px;
        border-bottom: none; /* Remove bottom border for horizontal */
        cursor: pointer;
    }

    /* Hover effect */
    .header-desktop-menu li:hover {
        background-color: #f5f5f5;
        border-radius: 4px;
    }
    /* --- END: Code explicitly shown on desktop --- */


     /* Image Header Adjustments */
      .banner-slider-section-wrapper {
          margin-bottom: 40px; /* More space below banner on desktop */
          /* Ensure no extra space above if min-height or max-height is hit */
          padding-top: 0;
          margin-top: 0;
      }
      .img-header-moving img {
          max-height: 600px; /* Allow taller banner on desktop */
      }
      /* Banner Slider Navigation Arrows (Removed from HTML) */
      /* These CSS rules will remain but will not apply to any elements in the current HTML */
      .banner-slider-section-wrapper .nav-arrow {
          /* display: flex; <-- This was in the previous version's desktop query, removed now */
          width: 40px; /* Larger arrows on desktop */
          height: 40px;
      }
       /* Position arrows relative to the banner-slider-section-wrapper */
       .banner-slider-section-wrapper .nav-arrow.left-arrow { left: 20px; } /* Position further in */
       .banner-slider-section-wrapper .nav-arrow.right-arrow { right: 20px; } /* Position further in */


    /* Adjustments for main content sections on desktop */
    h2 { font-size: 2.2em; margin-bottom: 40px; } /* Larger h2 */
    section { padding: 60px 0; } /* More spacing between sections */

    /* Ensure consistent padding for containers */
    .container, .full-container { padding: 0 20px; }


    /* Adjust grid layouts for desktop */
    .new-arrivals-grid, .trending-grid, .top-items-grid, .categories-grid, .product-list, .hidden-gems-grid, .plus-size-list, .offer-list {
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Wider grid items on desktop */
         gap: 20px;
         margin-top: 30px;
         /* Removed padding here, rely on .full-container */
         /* padding: 0 20px; */
    }

    /* Adjust image heights in grids */
    .new-arrival-item img, .trending-item img, .top-item img, .categories-grid .category-item img { height: 250px; } /* Taller images */
    .new-arrival-item p, .trending-item p, .top-item p, .categories-grid .category-item p { font-size: 1.1em; }


    /* Adjust slider layout for desktop */
    .product-slider-section .slider-wrapper-container {
         padding: 0 20px; /* Padding to align with other containers */
    }
     /* Show and size up arrows on desktop */
    .product-slider-section .slider-arrow { display: flex; width: 40px; height: 40px; }
    /* Position arrows relative to the slider-wrapper-container padding */
    .product-slider-section .slider-arrow.left-arrow { left: 0; }
    .product-slider-section .slider-arrow.right-arrow { right: 0; }

    .product-slider-section .product-item {
        width: 220px; /* Wider slider items */
    }

    /* Adjust product item info layout/size */
    .product-item .product-info { padding: 10px; font-size: 1em; }
     .product-item .product-brand-name { margin-bottom: 5px; }
      .product-item .product-description { margin-bottom: 10px; }
     .product-item .price-rating { font-size: 0.9em; flex-wrap: nowrap; } /* Prevent wrapping on desktop */
      .product-item .discounted-price { font-size: 1.1em; }
      .product-item .original-price, .product-item .offer, .product-item .rating { font-size: 0.9em; }


     /* Adjust add to cart button size/padding */
     .add-to-cart { padding: 10px; font-size: 1em; margin: 10px; width: calc(100% - 20px); }


    /* Adjust category block layout/size */
    .category-rows { gap: 20px; } /* Increase gap between rows */
    .category-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 0; } /* Wider blocks */
    .category-block img { height: 180px; } /* Taller images */
     .category-block h3 { font-size: 1.1em; }
    .view-all-block { padding: 15px; min-height: 190px; } /* Match taller blocks + padding (180 + 15) */
    .view-all-link { font-size: 1.2em; }
    .view-all-link i { font-size: 1.5em; }


    /* Adjust horizontal scrollable sections */
    .scrollable-section h2 { padding: 0 20px; text-align: left; } /* Keep left align */
    .scrollable-area { padding: 0 20px; }
    .scroll-items-wrapper { gap: 20px; } /* Increase gap */
    .scroll-item { width: 150px; } /* Wider scroll items */
    .scroll-item img { height: 150px; } /* Taller images */
    .scroll-item figcaption { font-size: 0.9em; }

    /* Adjust section footer link size */
    .section-footer { margin-top: 40px; }
    .section-footer a { font-size: 1em; }

    /* Show desktop footer columns */
   .footer-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Wider grid items on desktop */
        gap: 30px; /* Larger gap */
        margin-bottom: 30px; /* Space below columns */
        margin-top: 20px; /* Match other sections */
        padding: 0 20px; /* Match main container padding */
        border-top: 1px solid #ccc; /* Add top border */
        padding-top: 20px; /* Add padding above */
   }
   /* Hide mobile footer collapsible links */
   .footer-collapsible-links { display: none; }

   /* Ensure border-top for shared footer sections on desktop - Removed as handled by .footer-container */
   /* .footer-app-download, .footer-social-media, .footer-payment-shipping { margin-top: 30px; padding-top: 20px; padding: 0 20px; border-top: 1px solid #ccc; } */
    .footer-app-download, .footer-social-media, .footer-payment-shipping { margin-top: 30px; padding-top: 20px; padding: 0 20px; }


    /* Adjust footer element sizes */
    .footer-app-download img { height: 40px; } /* Slightly larger app badges */
    .footer-social-media .social-icons { font-size: 1.8em; } /* Larger social icons */
     .footer-payment-shipping .payment-icons span { font-size: 1em; }

      /* Adjust copyright and developer credit */
       .footer-bottom { margin-top: 40px; font-size: 0.9em; padding-top: 30px; border-top: 1px solid #ccc; }
       .developer-credit { font-size: 0.9em; padding: 15px 0; }


      /* === START: Oversized Carousel Responsive Styles (>= 768px) === */
      .product-carousel-section .carousel-heading { font-size: 2.2em; } /* Match h2 size */
       .product-carousel-section .carousel-item { width: 280px; } /* Adjust item width for desktop */
        .product-carousel-section .carousel-container {
            width: calc(100% - 100px); /* Adjust width for desktop screens (50px on each side) */
            margin: 0 50px; /* Space for arrows */
        }
         .product-carousel-section .nav-arrow {
             width: 50px; /* Larger arrows on desktop */
             height: 50px;
             font-size: 1.8em;
              display: flex; /* Show arrows on desktop */
         }
          .product-carousel-section .prev-arrow { left: 0; }
          .product-carousel-section .next-arrow { right: 0; }

         .product-carousel-section .item-image-area { height: 280px; } /* Adjust image height */
         .product-carousel-section .offer-tag { font-size: 0.9em; padding: 3px 10px; }
         .product-carousel-section .wishlist-icon { width: 40px; height: 40px; font-size: 1.5em; top: 10px; right: 10px; }
         .product-carousel-section .store-name { font-size: 1em; }
         .product-carousel-section .product-title { font-size: 1.2em; }
          .product-carousel-section .item-description { font-size: 1.1em; }
           .product-carousel-section .current-price { font-size: 1.2em; margin-right: 10px;}
            .product-carousel-section .original-price, .product-carousel-section .discount { font-size: 1em; margin-right: 10px;}
            .product-carousel-section .rating-info { font-size: 1em; }

      /* === END: Oversized Carousel Responsive Styles (>= 768px) === */

}


/* Tablet specific adjustments (768px to 1024px approx) */
/* This range is already covered by (min-width: 768px) */
/* You can add more specific overrides here if needed */

@media (min-width: 768px) and (max-width: 1024px) {
     /* Adjust off-canvas width for tablets */
     .off-canvas-menu {
         width: 320px; /* Slightly wider than mobile, narrower than desktop */
         left: -320px;
     }
      body.menu-open .page-content-wrapper {
         transform: translateX(320px); /* Match tablet off-canvas width */
      }

    /* Example: Slightly smaller search bar area on tablets */
     .header-right { min-width: 300px; }
     .search-container { max-width: 350px; }
      .header-icons { gap: 15px; font-size: 1.2em; }
      .header-container { gap: 15px; }
      .site-logo img { height: 40px; } /* Keep mobile height */


      /* Adjust grid minmax for tablets */
      .new-arrivals-grid, .trending-grid, .top-items-grid, .categories-grid, .product-list, .hidden-gems-grid, .plus-size-list, .offer-list {
           grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
           gap: 15px;
      }
       .new-arrival-item img, .trending-item img, .top-item img, .categories-grid .category-item img { height: 200px; } /* Mid-range image height */
       .new-arrival-item p, .trending-item p, .top-item p, .categories-grid .category-item p { font-size: 1em; }

       /* Adjust category block grid for tablets */
      .category-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
       .category-block img { height: 150px; } /* Mid-range image height */
       .category-block h3 { font-size: 1em; }
       .view-all-block { padding: 10px; min-height: 160px; } /* Match taller blocks + padding (150 + 10) */


       /* Adjust slider item width for tablets */
       .product-slider-section .product-item { width: 200px; }

       /* Adjust product info size for tablets */
       .product-item .product-info { padding: 8px; font-size: 0.9em; }
        .product-item .price-rating { font-size: 0.8em; }

       /* Adjust scroll item width for tablets */
       .scroll-item { width: 140px; }
       .scroll-item img { height: 140px; } /* Mid-range image height */
       .scroll-item figcaption { font-size: 0.8em; }


       /* Footer adjustments for tablets */
       .footer-container { gap: 20px; }
       .footer-app-download img { height: 35px; } /* Keep mobile height */
       .footer-social-media .social-icons { font-size: 1.6em; } /* Mid-range size */
       .footer-bottom { font-size: 0.8em; }
       .developer-credit { font-size: 0.8em; }


       /* === START: Oversized Carousel Responsive Styles (Tablet 768px - 1024px) === */
       .product-carousel-section .carousel-heading { font-size: 2em; } /* Keep main size */
        .product-carousel-section .carousel-item { width: 220px; } /* Adjust item width for tablets */
         .product-carousel-section .carousel-container {
            width: calc(100% - 80px); /* Adjust width for tablets (40px on each side) */
            margin: 0 40px; /* Space for arrows */
        }
         .product-carousel-section .nav-arrow {
             width: 40px;
             height: 40px;
             font-size: 1.5em;
              display: flex; /* Show arrows on tablets */
         }
          .product-carousel-section .prev-arrow { left: 0; }
          .product-carousel-section .next-arrow { right: 0; }

         .product-carousel-section .item-image-area { height: 220px; } /* Adjust image height */
         .product-carousel-section .offer-tag { font-size: 0.8em; }
         .product-carousel-section .wishlist-icon { width: 35px; height: 35px; font-size: 1.3em; top: 8px; right: 8px; }
         .product-carousel-section .store-name { font-size: 0.9em; }
         .product-carousel-section .product-title { font-size: 1.1em; }
          .product-carousel-section .item-description { font-size: 1em; }
           .product-carousel-section .current-price { font-size: 1.1em; margin-right: 6px;}
            .product-carousel-section .original-price, .product-carousel-section .discount { font-size: 0.9em; margin-right: 6px;}
            .product-carousel-section .rating-info { font-size: 0.9em; }

       /* === END: Oversized Carousel Responsive Styles (Tablet 768px - 1024px) === */
}