/* --- Global Body & Container Background --- */


.body {
 background-color: #ffefef; /* Soft off-white for the main page background */
 color: #333333; /* Default text color for good readability */
 font-family: 'Open Sans', Arial, sans-serif; /* Professional, clean font */
}

/* Default padding for #wrapper on all pages (internal pages) */
#wrapper {
 padding: 40px 0; /* Adjust horizontal padding as needed */
}

/* Override padding for #wrapper ONLY on the homepage */
body.page-index #wrapper {
 padding: 0;
}

/* Additional adjustment for the hero-section margin if needed to pull it up */
/* This might be necessary if the previous padding was handled on a container *inside* wrapper */
body.page-index .hero-section {
 margin-top: 0; /* Ensure no top margin pushing it down */
 padding-top: 0; /* Ensure no top padding pushing it down */
}

/* --- Header Top Bar Background --- */
.my-header-top-bar {
 background-color: #FFFFFF; /* Pure white for a crisp header background */
 border-bottom: 1px solid #EEEEEE; /* Very light separator line */
 box-shadow: 0 1px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

/* --- Header Text Colors --- */
.my-header-logo-section {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
 padding-right: 15px;
 margin-left: 25px;
 margin-top: 10px;
}

.my-header-logo-section .my-site-title {
 color: #333333; /* Dark gray for "La Plazita Ecuatoriana" text */
 font-size: 1.1rem;
}

/* --- Search Bar Styling --- */
.my-header-search-section form {
 border: 1px solid #FFDD00; /* Yellow border for the search bar */
 border-radius: 6px;
 background-color: #FFFFFF; /* White background for the search input field */
}
.my-header-search-section input[type="text"] {
 color: #333333; /* Text input color */
 background-color: transparent; /* Transparent to let form background show */
}
.my-header-search-section input[type="text"]::placeholder {
 color: #999999; /* Light gray for placeholder text */
}

/* Adjust search icon color (if using inline SVG as background-image) */
/* The color in the SVG data-url needs to be changed for the icon itself. */
/* For example, for #999999: fill="none" stroke="%23999999" */


/* --- Account & Cart Icons/Text --- */

/* Style for the "Sign in" link/account info */
.my-header-user-info {
 /* Amazon's "Hello, Sign in Account & Lists" is a single clickable area */
 /* Ensure this whole div acts as a block-like link or contains one */
 display: flex; /* Make it a flex container to align contents vertically */
 flex-direction: row;
 align-items: center; /* Align text to the left */
 text-decoration: none;
 color: #555555; /* Default text color */
 font-size: 0.9rem;
 line-height: 1.2; /* Adjust line height for stacking text */
 padding: 5px 0; /* Add a little vertical padding for click area */
 white-space: nowrap; /* Prevent text wrapping */
 cursor: pointer; /* Indicate it's clickable */
 margin-right: 25px;
}

.my-header-user-info a { /* Target the actual link within user info */
 text-decoration: none; /* No underline */
 color: #555555; /* Base color for text */
 display: block; /* Ensure the link takes its own line within the flex column */
}

.my-header-account-cart-section {
 display: flex;
 align-items: center; /* Vertically align items in the middle */
 gap: 30px; /* Space between "Sign in" and "Cart" links */
 flex-shrink: 0; /* Prevent this section from shrinking too much */
 margin-left: auto; /* Pushes this section to the far right within its parent */
 padding-left: 15px; /* Add some left padding for visual separation from search */
}

/* This targets the actual link that wraps the icon and text */
#_desktop_user_info a { /* Assuming the link is directly inside _desktop_user_info */
 display: flex;
 flex-direction: column; /* Stack icon on top, text below */
 align-items: center; /* Horizontally center icon and text */
 text-decoration: none;
 color: #555555; /* Default text color */
 font-size: 0.85rem; /* Slightly smaller font for secondary text */
 line-height: 1.2;
 padding: 5px 0; /* Add a little vertical padding for click area */
 white-space: nowrap; /* Prevent text wrapping */
 cursor: pointer;
 transition: color 0.2s ease; /* Smooth transition for hover effects */
}

/* Style for the icon within the "Sign in" block */
#_desktop_user_info a i.material-icons {
 font-size: 2.2rem; /* Larger person icon */
 color: #2E2E80; /* Dark blue icon color */
 margin-bottom: 2px; /* Small space between icon and text */
}

/* Hover effect for the "Sign in" link */
#_desktop_user_info a:hover {
 color: #CC0033; /* Red hover color for text */
}
#_desktop_user_info a:hover i.material-icons {
 color: #CC0033; /* Red hover color for icon */
}

.user-info {
 display: flex;
 flex-direction: row-reverse;
 align-items: end;
 gap: 20px;
 margin-right: 20px;
}

/* --- Overall Header Account/Cart Section Layout --- */
/* This container holds both the user info and cart sections side-by-side */
.my-header-account-cart-section {
 display: flex;
 align-items: center; /* Vertically aligns the user and cart blocks */
 gap: 30px; /* Space between "Sign in" and "Cart" links */
 flex-shrink: 0; /* Prevent this section from shrinking too much */
 margin-left: auto; /* Pushes this section to the far right within its parent header container */
 padding-left: 15px; /* Add some left padding for visual separation */
}

/* This targets the specific link containing the name and user icon */
.my-header-user-info .user-info a.account {
 display: flex;
 /* Reverses the visual order of elements inside the link (icon will appear on the right) */
 flex-direction: row-reverse; /* <<< CHANGED from 'column' */
 align-items: center;         /* Vertically aligns the name and icon with each other */
 gap: 8px;                    /* Creates space between the name and the icon */
 text-decoration: none;
 color: #555555;
}

/* Adjustments for the user icon within the link */
.my-header-user-info .user-info a.account i.material-icons {
 font-size: 2.2rem;
 color: #2E2E80;
 margin-bottom: 0;    /* <<< REMOVED bottom margin meant for vertical stacking */
 transition: color 0.2s ease;
}

/* HOVER EFFECT - For consistency */
.my-header-user-info .user-info a.account:hover,
.my-header-user-info .user-info a.account:hover span.hidden-sm-down {
 color: #CC0033;
}

.my-header-user-info .user-info a.account:hover i.material-icons {
 color: #CC0033;
}

/* --- CART ICON STYLING - To match the User Icon's appearance --- */
#_desktop_cart {
 display: flex;
 align-items: center;
}

/* Target the actual clickable link inside #_desktop_cart */
/* This link typically contains the icon and text, and will be the positioning context for the bubble */
#_desktop_cart .blockcart .header a {
 display: flex;
 flex-direction: column; /* Stack icon and text within the link */
 align-items: center; /* Center icon and text horizontally */
 text-decoration: none;
 color: #555555; /* Default text color (grayish) */
 font-size: 0.85rem; /* Consistent with user info text size */
 line-height: 1.2;
 white-space: nowrap; /* Prevent text wrapping */
 transition: color 0.2s ease; /* Smooth transition for hover effects */
 position: relative; /* CRUCIAL: Make this the positioning context for the count bubble */
 padding: 0; /* Reset padding if any from theme */
}


/* Style the cart icon (the shopping_cart material icon) */
#_desktop_cart .blockcart .header a i.material-icons.shopping-cart {
 font-size: 2.2rem; /* Consistent large size with user icon */
 color: #2E2E80; /* Dark blue icon color, consistent with user icon */
 margin-bottom: 2px; /* Small space between icon and text */
 transition: color 0.2s ease;
}

/* Style the "Cart" text (e.g., "Cart") */
/* This targets the <span class="hidden-sm-down">Cart</span> */
#_desktop_cart .blockcart .header a span.hidden-sm-down {
 color: #555555; /* Consistent text color */
 font-weight: 500;
 line-height: 1; /* Tighter line height for stacked text */
 transition: color 0.2s ease;
}

/* Position the cart count bubble (the '(13)') */
/* This targets the <span class="cart-products-count">(13)</span> */
#_desktop_cart .blockcart .header a span.cart-products-count {
 background-color: #CC0033; /* Red background for cart count bubble */
 color: #FFFFFF;
 border-radius: 50%; /* Makes it perfectly round */
 padding: 2px 6px;
 font-size: 0.7rem; /* Smaller font for the count number */
 font-weight: 700;
 position: absolute; /* Position relative to its parent `a` tag */
 top: -5px; /* Adjust vertically to sit just above/on the top-right of the icon */
 right: -10px; /* Adjust horizontally to sit just above/on the top-right of the icon */
 min-width: 18px; /* Ensures a minimum size for single digits */
 text-align: center;
 line-height: 1; /* For better vertical alignment of text in bubble */
 box-sizing: border-box; /* Include padding in min-width/height */
 border: 1px solid #FFFFFF; /* Small white border for definition */
 z-index: 2; /* Ensure it's above the icon */
 transition: all 0.2s ease; /* Smooth transition for hover effects */
}

/* --- Hover Effects for the Cart --- */
/* Apply hover to the parent link for comprehensive effect */
#_desktop_cart .blockcart .header a:hover {
 color: #CC0033; /* Red hover color for text */
}
#_desktop_cart .blockcart .header a:hover i.material-icons.shopping-cart {
 color: #CC0033; /* Red hover color for icon */
}
#_desktop_cart .blockcart .header a:hover span.hidden-sm-down {
 color: #CC0033; /* Red hover for "Cart" text */
}


/* --- Navigation Bar (Bottom Bar) --- */
.my-header-bottom-bar {
 /* ANOTHER BLUE 1A237E */
 background-color: #2E2E80; /* Deep Blue for the nav bar background, matching existing */
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.my-header-desktop-menu #_desktop_top_menu li a {
 color: #FFFFFF; /* White text for main nav items */
}
.my-header-desktop-menu #_desktop_top_menu li a:hover,
.my-header-desktop-menu #_desktop_top_menu li.current > a,
.my-header-desktop-menu #_desktop_top_menu li.sfHover > a {
 background-color: #FFDD00; /* Yellow background on hover/active */
 color: #2E2E80; /* Deep blue text on yellow for contrast */
}

/* Dropdown menus from ps_mainmenu */
.my-header-desktop-menu div.popover.sub-menu.js-sub-menu.collapse {
 background-color: #2E2E80 !important; /* Deep Blue for dropdown background */
 border: 1px solid #000000;
}
.my-header-desktop-menu div.popover.sub-menu.js-sub-menu.collapse ul li a {
 color: #FFFFFF !important; /* White text for dropdown items */
}
.my-header-desktop-menu div.popover.sub-menu.js-sub-menu.collapse ul li a:hover {
 background-color: #CC0033 !important; /* Red hover for dropdown items */
 color: #FFFFFF !important;
}

/* Mobile menu toggle button */
.my-header-mobile-menu-toggle {
 background-color: #CC0033; /* Red button for mobile toggle */
 color: #FFFFFF;
}
.my-header-mobile-menu-toggle:hover {
 background-color: #FFDD00; /* Yellow hover */
 color: #222222;
}

/* --- Buttons (Example, adjust for your specific button classes) --- */
.btn-primary {
 background-color: #FFDD00;
 color: #2E2E80;
 border-color: #FFDD00;
}
.btn-primary:hover {
 background-color: #CC0033;
 color: #FFFFFF;
 border-color: #CC0033;
}
.btn-secondary { /* If you have a secondary button style */
 background-color: #555555;
 color: #FFFFFF;
 border-color: #555555;
}
.btn-secondary:hover {
 background-color: #333333;
 border-color: #333333;
}


.container {
 max-width: 1200px; /* Consistent content width */
 margin: 0 auto;
 padding: 0 15px; /* Side padding */
}

.section-title {
 text-align: center;
 font-size: 2.5rem; /* Larger, impactful titles */
 color: #222222;
 margin-bottom: 3rem;
 font-weight: 700;
 position: relative;
 padding-bottom: 15px;
}
.section-title::after {
 content: '';
 display: block;
 width: 60px;
 height: 3px;
 background-color: #FFDD00; /* Ecuador Yellow accent */
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 bottom: 0;
 border-radius: 2px;
}

/* --- Buttons (Unified Styling) --- */
.btn {
 display: inline-block;
 padding: 12px 30px;
 font-size: 1rem;
 font-weight: 600;
 text-align: center;
 text-decoration: none;
 border-radius: 5px;
 transition: all 0.3s ease;
 cursor: pointer;
 border: 2px solid transparent;
}

.btn-outline-secondary {
 background-color: transparent;
 color: #6c757d;
 border-color: #6c757d;
}
.btn-outline-secondary:hover {
 background-color: #6c757d;
 color: #FFFFFF;
}


/* --- 1. Hero Section --- */
.hero-section {
 position: relative;
 width: 100%;
 height: 550px; /* Adjust height as needed */
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #FFFFFF;
 margin-bottom: 4rem;
}

.hero-background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}
.hero-background img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* Ensures image covers the area without distortion */
 filter: brightness(0.6); /* Slightly darken image for text readability */
}

.hero-content {
 position: relative;
 z-index: 2;
 max-width: 800px;
 padding: 0 20px;
}

.hero-title {
 font-size: 2.5rem;
 font-weight: 800;
 margin-bottom: 1rem;
 line-height: 1.1;
 text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
 color: #ffdd00;
}

.hero-subtitle {
 font-size: 1.5rem;
 margin-bottom: 2.5rem;
 text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
 color: #fff;
}

.hero-cta {
 margin: 0 10px;
}


/* --- 2. Featured Categories Section --- */
.featured-categories-section {
 padding: 4rem 0; /* Vertical spacing */
}

.category-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
 gap: 30px; /* Space between items */
 margin-top: 3rem;
}

.category-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: #FFFFFF;
 border-radius: 8px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.08);
 overflow: hidden;
 text-decoration: none;
 color: #333333;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.category-item img {
 width: 100%;
 height: 200px; /* Fixed height for consistent image size */
 object-fit: cover; /* Crop images to fit */
 border-bottom: 1px solid #eee;
}

.category-item .category-title {
 font-size: 1.5rem;
 font-weight: 600;
 padding: 20px;
 text-align: center;
 width: 100%;
 margin: 0;
}


/* --- 3. Products Section (Popular, New, Bestsellers) --- */
.products-section {
 padding: 4rem 0;
}

.product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive product grid */
 gap: 30px;
 margin-top: 3rem;
 margin-bottom: 3rem;
}

.product-card {
 background-color: #FFFFFF;
 border-radius: 8px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.08);
 overflow: hidden;
 text-align: center;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-card .product-image-link {
 display: block;
 height: 250px; /* Consistent image height */
 overflow: hidden;
 position: relative;
}
.product-card img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease;
}
.product-card:hover img {
 transform: scale(1.05); /* Subtle zoom on hover */
}

.product-card .product-name {
 font-size: 1.2rem;
 font-weight: 600;
 margin: 15px 10px 5px;
 height: 3em; /* Fixed height for name to prevent layout shifts */
 overflow: hidden;
 line-height: 1.5;
}
.product-card .product-name a {
 color: #222222;
 text-decoration: none;
}
.product-card .product-name a:hover {
 color: #CC0033; /* Red hover */
}

.product-card .product-price {
 font-size: 1.3rem;
 font-weight: 700;
 color: #CC0033; /* Red price */
 margin-bottom: 15px;
}

.product-card .btn-add-to-cart {
 width: calc(100% - 30px); /* Full width minus padding */
 margin-bottom: 15px;
 padding: 10px 15px;
 font-size: 0.9rem;
}

.view-all-btn {
 margin-top: 2rem;
}


/* --- 4. Value Proposition / Trust Section --- */
.value-prop-section {
 background-color: #CC0033; /* Ecuador Red background */
 color: #FFFFFF;
 padding: 5rem 0;
 text-align: center;
 margin-top: 4rem;
}
.value-prop-section .section-title {
 color: #FFFFFF;
}
.value-prop-section .section-title::after {
 background-color: #FFDD00; /* Yellow accent */
}

.value-prop-content p {
 font-size: 1.2rem;
 max-width: 800px;
 margin: 0 auto 3rem;
 line-height: 1.8;
 color: gold;
}

.value-prop-features {
 display: flex;
 justify-content: center;
 gap: 40px; /* Space between features */
 flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.feature-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: 1.2rem;
 font-weight: 600;
 width: 200px; /* Fixed width for consistency */
}
.feature-item i.material-icons {
 font-size: 3rem; /* Large icons */
 color: #FFDD00; /* Yellow icons */
 margin-bottom: 15px;
}

.feature-item i.material-icons-outlined {
 font-size: 3rem; /* Large icons */
 color: #FFDD00; /* Yellow icons */
 margin-bottom: 15px;
}

/*i.material-icons-outlined*/
.feature-item span {
 text-align: center;
}


/* --- 5. Newsletter Section --- */
/* This defines the background and padding for the entire newsletter section */
.newsletter-section.container {
 padding: 30px; /* Padding inside the section */
 border-radius: 8px; /* Optional: rounded corners for the section */
 text-align: center; /* Center text content within the section */
}

.newsletter-section {
 padding: 4rem 0;
 text-align: center;
 background-color: #F0F0F0; /* Light gray background for contrast */
 margin-top: 4rem;
}

/* --- Newsletter Form Wrapper Styling (Remove default module styles) --- */
/* Make sure the primary newsletter module wrapper has no conflicting background/padding */
.block_newsletter.newsletter-form {
 background-color: transparent !important; /* Force transparent background */
 padding: 0 !important; /* Remove any padding */
 border: none !important; /* Remove any borders */
 box-shadow: none !important; /* Remove any box shadows */
 border-radius: 0 !important; /* Remove any border radius */
 margin-bottom: 0 !important; /* Remove any bottom margin */
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 10px;
 width: 100%;
 max-width: 500px;
 overflow: hidden;
}


/* --- Input and Button Layout (Using our new wrapper class) --- */
.newsletter-input-button-wrapper {
 display: flex; /* Make it a flex container */
 flex-wrap: wrap; /* Allow items to wrap to next line on small screens */
 justify-content: center; /* Horizontally center the input and button */
 align-items: center; /* Vertically align them in the middle */
 gap: 10px; /* Space between the input and button */
 margin-bottom: 1rem; /* Add some space below the input/button group and messages */
}

.newsletter-input-button-wrapper input[type="email"] {
 flex-grow: 1; /* Allow the email input to grow and take available space */
 min-width: 200px; /* Ensure input doesn't get too small */
 /* Your existing input styles (adjust padding/border/etc. as needed) */
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
 background-color: #fff; /* Ensure input background is white */
}

.newsletter-input-button-wrapper .btn-primary {
 flex-shrink: 0; /* Prevent the button from shrinking */
 /* Your existing button styles (adjust padding/color/etc. as needed) */
 padding: 10px 20px;
 border-radius: 4px;
 background-color: #FFD93E; /* Your yellow color */
 color: #333;
 border: none;
 cursor: pointer;
}

.newsletter-section .section-title {
 margin-bottom: 1.5rem;
}
.newsletter-section .section-title::after {
 display: none; /* No underline for newsletter title */
}

.newsletter-section p {
 font-size: 1.1rem;
 margin-bottom: 2rem;
 color: #555555;
}

.block_newsletter input[type="email"] {
 flex-grow: 1;
 padding: 15px 20px;
 border: none;
 outline: none;
 font-size: 1rem;
 color: #333333;
}
.block_newsletter button {
 flex-shrink: 0;
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
 padding: 15px 25px;
}

/* --- Navigation Bar Adjustments (Part of .my-header-bottom-bar) --- */

/* Ensure the bottom bar has correct background and spacing */
.my-header-bottom-bar {
 /*background-color: #1f24c5;*/
 background-color: #2E2E80;
 padding: 10px 0; /* Slightly more vertical padding for breathing room */
 box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
 position: relative; /* Ensure it respects z-index if needed */
 z-index: 10; /* Ensure it's above content but below fixed header */
}

.my-header-bottom-bar .my-header-inner-wrap {
 justify-content: flex-start; /* Align menu items to the left */
 /* Remove any unnecessary flex-wrap or height constraints if they cause issues */
}

/* Main Menu List (ps_mainmenu module output) */
.my-header-desktop-menu #_desktop_top_menu {
 display: flex;
 list-style: none; /* Remove bullet points */
 margin: 0;
 padding: 0;
 gap: 20px; /* Increased space between main menu items for a cleaner look */
 align-items: center; /* Vertically center menu items */
 font-size: 1rem; /* Base font size for navigation */
}

/* Individual Menu Items (Links) */
.my-header-desktop-menu #_desktop_top_menu li a {
 display: block;
 text-decoration: none;
 color: #FFFFFF; /* White text for contrast on dark background */
 font-size: 1rem; /* Consistent font size */
 font-weight: 500; /* Medium weight, professional */
 padding: 8px 15px; /* Ample padding for click area */
 border-radius: 4px; /* Slightly rounded corners */
 transition: background-color 0.2s ease, color 0.2s ease;
 white-space: nowrap; /* Prevent menu items from wrapping */
}

.my-header-desktop-menu #_desktop_top_menu li a:hover,
.my-header-desktop-menu #_desktop_top_menu li.current > a, /* Highlight active/current category */
.my-header-desktop-menu #_desktop_top_menu li.sfHover > a /* PrestaShop's hover class for dropdowns */ {
 background-color: #FFDD00; /* Ecuador Yellow for hover/active */
 color: #222222; /* Darker text on yellow for contrast */
}

/* Dropdown Menu Specifics (ps_mainmenu sub-menus) */
.top-menu a.dropdown-submenu {
 color: #FFFFFF;
 text-transform: none; !important;
}


.my-header-desktop-menu div.popover.sub-menu.js-sub-menu.collapse {
 background-color: #2E2E80 !important;
 /*background-color: #1f24c5 !important;*/
 border: 1px solid #2E2E80;
 box-shadow: 0 5px 15px rgba(0,0,0,0.4); /* Deeper shadow for popover */
 padding: 10px 0;
 /* Ensure z-index is high enough if it hides behind other content */
 z-index: 1060; /* PrestaShop's default is often 1060 or 1050 for popovers */
 min-width: 200px; /* Ensure sufficient width */
}

.my-header-desktop-menu div.popover.sub-menu.js-sub-menu.collapse ul li a {
 background-color: transparent !important; /* No background for individual items */
 color: #FFFFFF !important; /* White text for dropdown items */
 padding: 8px 20px; /* Padding for readability and click area */
 font-size: 0.95rem; /* Slightly smaller font for sub-items */
 border-radius: 0; /* No rounded corners for sub-items */
}

.my-header-desktop-menu div.popover.sub-menu.js-sub-menu.collapse ul li a:hover {
 background-color: #CC0033 !important; /* Ecuador Red for dropdown item hover */
 color: #FFFFFF !important; /* White text on hover */
}


/* --- Mobile Menu Toggle Button (ensure it matches the new style) --- */
/* This assumes you're still using a mobile toggle button defined in your HTML/JS */
.my-header-mobile-menu-toggle {
 display: none; /* Hide on desktop, shown by media query */
 text-decoration: none;
 color: #FFFFFF;
 font-weight: bold;
 font-size: 14px;
 align-items: center;
 gap: 5px;
 padding: 8px 15px;
 border-radius: 4px;
 background-color: #2E2E80;
 transition: background-color 0.2s ease, color 0.2s ease;
}
.my-header-mobile-menu-toggle:hover {
 background-color: #2E2E80;
 color: #222222;
}
.my-header-mobile-menu-toggle i {
 font-size: 18px; /* Icon size */
}

/* --- Header Top Bar Layout --- */

.my-header-top-bar .my-header-inner-wrap {
 display: flex; /* Enable Flexbox for the container */
 align-items: center; /* Vertically align items in the center */
 /* Use gap for space between elements or flex-grow for flexible spacing */
 gap: 20px; /* Default space between main sections */
}

.my-header-logo-section .my-logo-group img { /* Target the actual logo image */
 max-height: 70px; /* Adjust this value as needed, same as before */
 width: auto;
 display: block;
}

/* 2. Search Section - Make it take available space */
.my-header-search-section {
 flex-grow: 1; /* Allow the search bar to fill remaining space */
 max-width: 100%; /* Set a max width for the search bar, adjust as desired */
}

#search_widget {
 min-width: 35.5rem;
}

.my-header-search-section button { /* Hide the default search button if using icon inside input */
 display: none; /* Hide default button if using icon inside input */
 /* If you prefer a button, style it: */
 /* background-color: #FFDD00; */
 /* color: #222222; */
 /* border: none; */
 /* padding: 0 15px; */
 /* cursor: pointer; */
 /* display: flex; */
 /* align-items: center; */
}


.footer-container {
 background-color: #2E2E80; /* This is an approximate deep blue based on your screenshot,
                                  you'll want to use the exact hex code of your blue background. */
 color: #DDDDDD; /* Light gray for the text */
 padding: 30px 20px; /* Adjust padding as needed for spacing */
 font-family: Arial, sans-serif; /* Example font, choose one that matches your brand */
 font-size: 14px; /* Adjust font size as needed */
 line-height: 1.6; /* Improves readability for paragraphs */
}

/* To ensure all links within the footer also adopt this color */
.footer-container a {
 color: #DDDDDD; /* Links inside the footer */
 text-decoration: none; /* Remove underline by default */
}

/* Optional: style for hover state of links */
.footer-container a:hover {
 color: #FFFFFF; /* Brighter white on hover for emphasis */
 text-decoration: underline; /* Add underline on hover for clarity */
}

/* If you have specific headings (like PRODUCTS, OUR COMPANY, etc.) that need a different color or style */
.footer-container h4,
.footer-container h5,
.footer-container h6 { /* Adjust heading tags as used in your footer */
 color: #FFFFFF; /* Pure white for headings to make them stand out a bit more */
 margin-bottom: 15px; /* Spacing below headings */
 text-transform: uppercase; /* Common for footer headings */
}

.footer-container .h3 {
 color: #DDDDDD;
}

#block_myaccount_infos .myaccount-title a {
 color: #DDDDDD;
}

.block-contact .block-contact-title {
 color: #DDDDDD;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
 .hero-section {
  height: 450px;
 }
 .hero-title {
  font-size: 3rem;
 }
 .hero-subtitle {
  font-size: 1.3rem;
  color: #fff;
 }

 .section-title {
  font-size: 2rem;
  margin-bottom: 2.5rem;
 }

 .category-grid, .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
 }
 .product-card .product-image-link, .product-card img {
  height: 200px;
 }
 .category-item img {
  height: 180px;
 }

 .value-prop-section {
  padding: 4rem 0;
 }
 .value-prop-content p {
  font-size: 1rem;
 }
 .feature-item {
  font-size: 1.1rem;
 }
 .feature-item i.material-icons {
  font-size: 2.5rem;
 }
 .my-header-desktop-menu {
  display: none; /* Hide desktop menu */
 }
 .my-header-mobile-menu-toggle {
  display: flex !important; /* Show mobile toggle */
  justify-content: center; /* Center the toggle button */
  width: auto; /* Allow button to size to content */
  margin: 0 auto; /* Center button horizontally */
 }
 .my-header-top-bar .my-header-inner-wrap {
  flex-direction: column; /* Stack all elements vertically */
  align-items: center;
  gap: 15px;
 }

 .my-header-logo-section {
  flex-direction: column; /* Stack logo and text vertically */
  gap: 5px;
  padding-right: 0;
 }

 .my-header-search-section {
  width: 90%; /* Allow search bar to take more width on mobile */
  max-width: none;
 }

 .my-header-account-cart-section {
  display: flex;
  align-items: center; /* Vertically align both the user and cart sections */
  gap: 30px;
  margin-left: auto;
  padding-left: 15px;
 }

 /* Adjust specific cart elements for mobile */
 #_desktop_cart .blockcart .header a i.material-icons.shopping-cart {
  font-size: 2.5rem; /* Larger icon for easier tapping on mobile */
 }
 #_desktop_cart .blockcart .header a span.hidden-sm-down {
  font-size: 0.85rem; /* Slightly larger text on mobile */
 }
 #_desktop_cart .blockcart .header a span.cart-products-count {
  top: -8px; /* Adjust position for larger icon on mobile */
  right: -8px;
  font-size: 0.8rem;
 }
}

@media (max-width: 767px) {
 .hero-section {
  height: 400px;
 }
 .hero-title {
  font-size: 2.5rem;
 }
 .hero-subtitle {
  font-size: 1.1rem;
  margin-bottom: 2rem;
 }
 .hero-cta {
  display: block;
  width: 80%;
  margin: 10px auto;
 }

 .section-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
 }

 .category-grid, .product-grid {
  grid-template-columns: 1fr; /* Single column on small mobiles */
 }
 .product-card .product-image-link, .product-card img {
  height: 220px; /* Taller on single column */
 }
 .category-item img {
  height: 200px;
 }

 .value-prop-section {
  padding: 3rem 0;
 }
 .value-prop-features {
  flex-direction: column;
  gap: 20px;
 }
 .feature-item {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
 }

 .block_newsletter {
  flex-direction: column;
  gap: 10px;
  box-shadow: none; /* Remove shadow on mobile for stacked elements */
 }
 .block_newsletter input, .block_newsletter button {
  width: 100%;
  border-radius: 5px !important; /* Ensure rounded corners for both */
 }

 .my-header-bottom-bar {
  padding: 8px 0; /* Slightly less padding on mobile */
 }

 #header a.my-header-mobile-menu-toggle {
  color: #FFFFFF; /* White */
 }

 .my-header-mobile-menu-toggle {
  padding: 6px 12px;
  font-size: 13px;
 }
 .my-header-mobile-menu-toggle i {
  font-size: 16px;
 }
}

#search_widget {
 min-width: 30.5rem;
}

@media (max-width: 575px) {
 .hero-section {
  height: 350px;
 }
 .hero-title {
  font-size: 2rem;
 }
 .hero-subtitle {
  font-size: 1rem;
 }

 .my-header-logo-section .my-logo-group img {
  max-height: 40px; /* Slightly smaller logo on very small screens */
 }
 .my-header-logo-section .my-site-title {
  font-size: 1.1rem;
 }
 .my-header-search-section form {
  height: 36px; /* Smaller height for search on small screens */
 }
 .my-header-search-section input[type="text"] {
  padding-left: 35px;
  background-size: 18px;
 }

 #header a.my-header-mobile-menu-toggle {
  color: #FFFFFF; /* White */
 }

}