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

:root {
    --primary-red: #cc2027;
    --dark-red: #a3181d;
    --gold: #dfa135;
    --bg-light: #f7f7f7;
    --text-dark: #222;
    --text-gray: #666;
    --border-color: #eaeaea;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #fff;
    color: var(--text-dark);
    overflow-x: hidden;
    width: 100%;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-red);
    color: white;
    font-size: 12px;
    padding: 5px 0;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.social-icons {
    display: flex;
    gap: 8px;
    font-size: 14px;
}

.social-icons a:hover {
    opacity: 0.8;
}

.divider {
    width: 1px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.5);
}

.top-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.top-nav-item {
    position: relative;
    padding: 6px 0;
}

.top-nav-item>a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.top-nav-item>a:hover,
.top-nav-item>a.active {
    color: #ffd1d1;
}

.small-chevron {
    font-size: 12px;
    transition: transform 0.2s;
}

.top-nav-item.has-dropdown:hover>a .small-chevron {
    transform: rotate(180deg);
}

/* Dropdown Menu for Top Bar */
.top-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(204,32,39,0.10), 0 2px 8px rgba(0,0,0,0.06);
    border-radius: 0 0 12px 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    border-top: 3px solid #cc2027;
}

.top-nav-item.has-dropdown:hover .top-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.top-nav-dropdown li {
    padding: 0;
}

.top-nav-dropdown a {
    padding: 11px 22px;
    display: block;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s;
    text-decoration: none;
}

.top-nav-dropdown li:last-child a {
    border-bottom: none;
}

.top-nav-dropdown a:hover {
    background-color: #fff7f7;
    color: #cc2027;
    padding-left: 28px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dealership-link a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    transition: color 0.2s;
}

.dealership-link a:hover {
    color: #ffd1d1;
}

.dealership-link i {
    font-size: 16px;
}

.top-bar-right .delivery-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
}

.top-bar-right .delivery-info i {
    font-size: 14px;
}

/* Main Header */
.main-header {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    font-weight: bold;
    position: sticky;
    top: 30px;
    z-index: 999;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.logo img {
    height: 65px;
    display: block;
}

.search-bar {
    display: flex;
    flex: 1;
    max-width: 650px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 30px;
    overflow: hidden;
    height: 45px;
    align-items: center;
}

.search-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-right: 1px solid #e0e0e0;
    max-width: 180px;
    flex-shrink: 0;
}

.search-select {
    background: transparent;
    border: none;
    padding: 0 25px 0 0;
    outline: none;
    font-size: 14px;
    color: #555;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-arrow {
    position: absolute;
    right: 12px;
    font-size: 12px;
    color: #888;
    pointer-events: none;
}

.search-bar input {
    flex: 1;
    border: none;
    padding: 0 20px;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #888;
}

.search-bar button {
    background: #bc8e3e;
    color: white;
    border: none;
    height: 45px;
    padding: 0 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 0 30px 30px 0;
    transition: background 0.2s;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
}

.search-bar button:hover {
    background: #a87e35;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    border: 1px solid #eee;
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: #444;
    transition: background 0.2s;
    gap: 15px;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: #fdfaf4;
}

.suggestion-info {
    flex: 1;
}

.suggestion-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.suggestion-price {
    font-size: 14px;
    color: #b78a42;
    font-weight: 700;
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-icon {
    width: 40px;
    height: 40px;
    background-color: #d1b88e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    font-size: 32px;
    padding-top: 5px;
    transition: background 0.2s, transform 0.2s;
}

/* Logged-in avatar: show initials */
.profile-icon--loggedin {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, #cc2027, #e65100);
    align-items: center;
    padding-top: 0;
    letter-spacing: -0.5px;
}

/* Profile dropdown alignment (right-aligned to icon) */
.profile-action .profile-dropdown {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    right: auto;
    min-width: 210px;
    border-top-color: #cc2027;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(204,32,39,0.14), 0 2px 10px rgba(0,0,0,0.07);
    overflow: hidden;
}

.profile-action.has-dropdown:hover .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.profile-action.has-dropdown {
    padding: 10px 0;
}

.divider-vertical {
    width: 1px;
    height: 25px;
    background-color: #ddd;
}

.action-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.icon-item {
    position: relative;
    font-size: 24px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.icon-item:hover {
    color: var(--primary-red);
}

/* ── Icon Tooltips ── */
.icon-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(-4px);
    z-index: 9999;
    letter-spacing: 0.3px;
}

.icon-item[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.count-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #bc8e3e;
    color: white;
    font-size: 12px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    border: 1px solid white;
}

.hamburger-menu {
    display: none;
    /* Removed from new design */
}

/* Header Categories Area */
.header-categories {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0 25px;
    background: #fff;
}

.header-cat-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.header-cat-title-row h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    white-space: nowrap;
    margin: 0;
}

.header-cat-line {
    flex: 1;
    height: 1px;
    background-color: #ddd;
    position: relative;
    display: flex;
    align-items: center;
}

.header-cat-line::before {
    content: '';
    position: absolute;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #bc8e3e;
    /* darker gold */
    border-radius: 4px;
}

.header-cat-nav {
    display: flex;
    gap: 8px;
}

.header-cat-nav button {
    width: 25px;
    height: 25px;
    background: white;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
}

.header-cat-nav button:hover {
    border-color: #bc8e3e;
    color: #bc8e3e;
}

.header-cat-list {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px;
}

.header-cat-list::-webkit-scrollbar {
    display: none;
}

.header-cat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.header-cat-item:hover {
    transform: scale(1.05);
}

.header-cat-img {
    width: 60px;
    height: 60px;
    background-color: #fcf4e6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}

.header-cat-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.header-cat-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #9b7245;
    /* brown text */
}

/* Hero Slider */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-slider-track {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-slider .slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
}

.hero-slider .slide img {
    width: 100%;
    height: 450px;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Hero Content Overlay */
.hero-content-overlay {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 10;
    max-width: 500px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #c8a14b;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    margin-top: 0;
}

.hero-desc {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
}

.btn-hero-order {
    display: inline-block;
    background-color: #b78a42;
    color: #fff;
    padding: 14px 40px;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s, transform 0.2s;
    text-shadow: none;
}

.btn-hero-order:hover {
    background-color: #9c7333;
    transform: translateY(-2px);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    font-size: 32px;
    /* Reduced from 40 for better fit */
    cursor: pointer;
    padding: 20px;
    opacity: 0.8;
}

.slider-btn:hover {
    opacity: 1;
}

.slider-btn.prev {
    left: 3%;
}

.slider-btn.next {
    right: 3%;
}

.slider-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.dot {
    width: 13px;
    height: 13px;
    background: transparent;
    border: 1px solid white;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background: white;
}

/* Banners & Categories */
.category-banners-section {
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
}

.shop-category-label {
    position: absolute;
    left: 2px;
    top: 15px;
    /* Aligned slightly below top */
    background-color: var(--primary-red);
    color: white;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.category-banners {
    display: flex;
    gap: 20px;
    padding-left: 0;
}

.category-banner {
    flex: 1;
}

.category-banner img {
    width: 100%;
    height: auto;
    border-radius: 0;
    /* In the image they look like standard banners without rounding or very slight rounding */
    display: block;
    transition: transform 0.3s ease;
}

.category-banner:hover img {
    transform: translateY(-5px);
}

/* Mobile carousel arrows — hidden on desktop */
.mobile-carousel-wrap {
    position: relative;
}
.mc-arrow {
    display: none;
}

.popular-categories {
    margin: 60px auto 40px;
}

.pop-cats-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
}

.pop-cats-header h2 {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    white-space: nowrap;
    margin: 0;
}

.pop-cats-line {
    flex: 1;
    height: 1px;
    background-color: #ddd;
    position: relative;
    display: flex;
    align-items: center;
}

.pop-cats-line::before {
    content: '';
    position: absolute;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #c99c5c;
}

.pop-cats-nav {
    display: flex;
    gap: 10px;
}

.pop-cats-nav button {
    width: 35px;
    height: 35px;
    background: white;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
}

.pop-cats-nav button:hover {
    border-color: #c99c5c;
    color: #c99c5c;
}

.categories-list {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    background: transparent;
    padding: 0;
    border: none;
}

.cat-img-wrap {
    width: 80px;
    height: 80px;
    background-color: #fcf4e6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-shrink: 0;
}

.cat-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cat-name {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #9b7245;
}

/* Generic Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0 20px 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.section-header h2 {
    font-size: 22px;
    color: var(--text-dark);
    position: relative;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gold);
}

.see-more {
    color: var(--text-gray);
    font-size: 16px;
}

.timer-badges span {
    background: var(--primary-red);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    margin: 0 2px;
}

/* Product Cards */
.product-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.product-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    position: relative;
    transition: box-shadow 0.3s ease;
    background: white;
}

.product-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

.badge.discount {
    background: var(--primary-red);
}

.product-card h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.current-price {
    font-weight: bold;
    color: var(--text-dark);
}

.old-price {
    text-decoration: line-through;
    color: var(--text-gray);
    font-size: 14px;
}

.add-cart-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: white;
    border: 1px solid var(--gold);
    color: var(--gold);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.add-cart-btn:hover {
    background: var(--gold);
    color: white;
}

/* Split Layout (Best Sellers) */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
}

.promo-sidebar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.product-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Banners */
.full-banner {
    margin-top: 50px;
}

.full-banner img {
    width: 100%;
    border-radius: 8px;
}

/* Recipes */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.recipe-card {
    cursor: pointer;
}

.recipe-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.recipe-content {
    padding: 0;
}

.recipe-content h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #111;
}

.recipe-content p {
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: 10px;
    line-height: 1.5;
}

.recipe-content .date {
    font-size: 14px;
    color: #999;
    display: block;
}

/* Custom Footer */
.custom-footer {
    background-color: #000;
    color: #fff;
    padding-top: 50px;
    margin-top: 60px;
}

.new-footer-container {
    padding-bottom: 40px;
}

.footer-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.footer-logos-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logos-left img {
    height: 60px;
    object-fit: contain;
}

.footer-top-links {
    display: flex;
    gap: 25px;
}

.footer-top-links a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.footer-top-links a:hover {
    color: #c8a14b;
}

.footer-top-links a i {
    font-size: 13px;
}

.footer-mid-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-socials {
    display: flex;
    gap: 30px;
}

.stay-connected {
    text-align: right;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.txt-white {
    color: #fff;
}

.txt-gold {
    color: #c8a14b;
}

.social-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-links-list a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.2s;
}

.social-links-list a i {
    font-size: 18px;
    width: 16px;
    text-align: center;
}

.social-links-list a:hover {
    color: #c8a14b;
}

.footer-mid-right {
    display: flex;
    gap: 80px;
}

.footer-payments h4,
.footer-delivery h4 {
    color: #c8a14b;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: none;
}

.footer-payments img {
    height: 28px;
    object-fit: contain;
}

.footer-delivery img {
    height: 28px;
    object-fit: contain;
}

.footer-bottom-bar {
    background-color: #b38841;
    /* Golden brown */
    padding: 20px 0;
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-txt {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.bottom-legal-links {
    display: flex;
    gap: 20px;
}

.bottom-legal-links a {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    transition: opacity 0.2s;
}

.bottom-legal-links a:hover {
    opacity: 0.8;
}

/* Responsive Custom Footer */
@media (max-width: 900px) {
    .footer-top-row {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-top-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-mid-row {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .footer-socials {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .stay-connected {
        text-align: center;
    }

    .footer-mid-right {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        text-align: center;
    }

    .footer-bottom-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .bottom-legal-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Discount Products Section */
.discount-products-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

.discount-container-box {
    background-color: #fbfbf9;
    border: 2px solid #b78a42;
    border-radius: 12px;
    padding: 25px;
}

.discount-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.discount-title-area {
    display: flex;
    align-items: center;
    flex: 1;
}

.discount-title-area h2 {
    margin-right: 15px;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 0;
}

.discount-gold-line-wrap {
    flex: 1;
    height: 1px;
    background-color: #ddd;
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.discount-gold-line-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #b78a42;
}

.discount-timer {
    display: flex;
    gap: 5px;
}

.timer-box {
    background-color: #e51d20;
    color: white;
    border-radius: 4px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    min-width: 40px;
}

.timer-num {
    font-size: 18px;
    font-weight: 800;
}

.timer-label {
    font-size: 11px;
    font-weight: 500;
}

.discount-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
}

.disc-product-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 0 14px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s ease;
}

.disc-card-header {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
}

.brand-name {
    font-size: 12px;
    color: #888;
    flex: 1;
    line-height: 1.2;
}

.disc-card-icons {
    display: flex;
    gap: 8px;
    color: #b78a42;
    font-size: 16px;
}

.cart-icon-wrap {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #b78a42;
    color: white;
    font-size: 10px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    border: 1px solid white;
    z-index: 10;
}

.disc-card-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 20px;
}

.disc-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.disc-card-details {
    margin-top: auto;
}

.price-row-new {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.main-price {
    font-size: 17px;
    font-weight: 800;
    color: #444;
}

.discount-tag {
    background: #e51d20;
    color: white;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.old-price-new {
    font-size: 13px;
    color: #b5b5b5;
    text-decoration: line-through;
    margin-bottom: 8px;
}

.product-title-new {
    font-size: 15px;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
}

.discount-product-grid .product-title-new {
    font-weight: 400;
    font-size: 13px;
}

.product-card-weight {
    font-size: 14px;
    color: #999;
    font-weight: 400;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.product-card-price {
    font-size: 15px;
    color: #444;
    font-weight: 400;
    margin: 0;
}

.product-title-new a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
}
.rating-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stars {
    color: #f7c32e;
    font-size: 11px;
    display: flex;
    gap: 2px;
}

.rating-score {
    font-size: 12px;
    color: #a0a0a0;
}

/* Responsive adjustments for discounts */
@media (max-width: 1200px) {
    .discount-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .bestsellers-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .discount-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bestsellers-layout {
        flex-direction: column;
    }

    .bestsellers-left-banner {
        width: 100%;
        border-radius: 0;
    }

    .bestsellers-left-banner img {
        max-height: 400px;
        object-fit: cover;
    }

    .bestsellers-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .discount-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .discount-title-area h2 {
        font-size: 18px;
    }

    .bestsellers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 6-Column Full Width Grid */
.full-grid-section {
    margin-bottom: 50px;
}

.product-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5px;
    background-color: #c8a14b;
    border: 1.5px solid #c8a14b;
}

.pre-order-text {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    margin-left: 2px;
}

/* Best Sellers Layout */
.bestsellers-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

.bestsellers-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.bestsellers-left-banner {
    width: 330px;
    flex-shrink: 0;
    display: flex;
}

.bestsellers-left-banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    border-radius: 8px;
}

.bestsellers-right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bestsellers-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.bestsellers-header h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 15px 0 0;
    color: #111;
}

.bestsellers-gold-line-wrap {
    flex: 1;
    height: 1px;
    background-color: #ddd;
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.bestsellers-gold-line-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #b78a42;
}

.btn-see-more {
    font-size: 15px;
    color: #555;
    text-decoration: none;
    border: 1px solid #ddd;
    padding: 6px 15px;
    border-radius: 4px;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
}

.btn-see-more:hover {
    background: #f5f5f5;
    color: #111;
}

.bestsellers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5px;
    background-color: #c8a14b;
    border: 1.5px solid #c8a14b;
}

.bestseller-card {
    background: white;
    padding: 15px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.bs-card-top {
    position: absolute;
    top: 12px;
    right: 15px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
}

.bs-weight {
    font-size: 15px;
    color: #777;
    font-weight: 500;
}

.bs-icons {
    display: flex;
    gap: 10px;
    color: #b78a42;
    font-size: 16px;
}

.bs-cart-wrap {
    position: relative;
}

.bs-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #b78a42;
    color: white;
    font-size: 10px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid white;
    font-weight: bold;
    z-index: 10;
}

.bs-card-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.bs-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bs-card-info {
    margin-top: auto;
}

.bs-price {
    font-size: 16px;
    font-weight: 800;
    color: #444;
    margin-bottom: 5px;
}

.bs-title {
    font-size: 13px;
    color: #888;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}

.bs-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
}

.full-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .product-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .split-layout {
        grid-template-columns: 1fr;
    }

    .product-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        gap: 15px;
    }

    .search-bar {
        width: 100%;
    }

    .nav-links {
        display: none;
    }

    /* Would need a hamburger menu in real build */
    .product-grid-5,
    .product-grid-4,
    .recipe-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .bottom-flex {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .product-grid-5,
    .product-grid-4,
    .recipe-grid {
        grid-template-columns: 1fr;
    }

    .slide-content h1 {
        font-size: 34px;
    }
}

/* === INTERACTIVE HOVER EFFECTS === */

/* Cards Lift & Shadow */
.bestseller-card,
.disc-product-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    position: relative;
}

.bestseller-card:hover,
.disc-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.07);
    z-index: 10;
}



/* Icon Interactions */
.bs-icons .fa-heart,
.disc-card-icons .fa-heart {
    transition: color 0.2s, transform 0.2s;
    cursor: pointer;
}

.bs-icons .fa-heart:hover,
.disc-card-icons .fa-heart:hover {
    color: #e51d20;
    transform: scale(1.15);
}

.bs-cart-wrap,
.cart-icon-wrap {
    transition: color 0.2s, transform 0.2s;
    cursor: pointer;
}

.bs-cart-wrap:hover,
.cart-icon-wrap:hover {
    color: #8a6a32;
    transform: scale(1.1);
}

/* See More Button Animation */
.btn-see-more,
.see-more {
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-see-more i,
.see-more i {
    transition: transform 0.3s;
}

.btn-see-more:hover,
.see-more:hover {
    background-color: #b78a42;
    color: #fff !important;
    border-color: #b78a42;
}

.btn-see-more:hover i,
.see-more:hover i {
    transform: translateX(4px);
    color: #fff;
}

/* Banner Brightness */
.bestsellers-left-banner img,
.full-banner img,
.promo-sidebar img {
    transition: filter 0.4s ease;
}

.bestsellers-left-banner img:hover,
.full-banner img:hover,
.promo-sidebar img:hover {
    filter: brightness(1.08);
}

/* ==================================
   SHOP PAGE SPECIFIC STYLES 
   ================================== */
.shop-page-wrapper {
    margin-top: 30px;
    margin-bottom: 80px;
    font-family: 'Poppins', sans-serif;
}

/* Breadcrumbs */
.shop-breadcrumbs {
    font-size: 15px;
    color: #555;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}

.shop-breadcrumbs a {
    color: #111;
    text-decoration: none;
}

.shop-breadcrumbs i {
    font-size: 12px;
    margin: 0 8px;
    color: #ccc;
}

.active-crumb {
    color: #c8a14b;
    font-weight: 600;
}

/* Layout */
.shop-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar */
.shop-sidebar {
    width: 25%;
    flex-shrink: 0;
}

.shop-widget {
    margin-bottom: 30px;
    border: 1px solid #eaeaea;
    padding: 20px;
    border-radius: 4px;
}

.shop-sidebar h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.sidebar-search {
    display: flex;
    padding: 0;
    border: none;
}

.sidebar-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    padding: 12px 15px;
    border-right: none;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    border-radius: 4px 0 0 4px;
    background-color: #fcfcfc;
}

.sidebar-search button {
    flex-shrink: 0;
    background-color: #b78a42;
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background 0.2s;
}

.sidebar-search button:hover {
    background-color: #9c7333;
}

/* List Widgets (Categories & Brands) */
.shop-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-widget ul li {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.shop-widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.shop-widget ul li a {
    text-decoration: none;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
    display: block;
}

.shop-widget ul li.active a,
.shop-widget ul li a:hover {
    color: #c8a14b;
    font-weight: 700;
}

/* ── Price Range Filter Widget ── */
.price-range-wrap {
    margin-bottom: 16px;
}

/* Outer wrapper — same height as thumb so no overflow ever occurs */
.price-slider-wrap {
    position: relative;
    height: 20px;       /* = thumb height */
    margin: 10px 0 14px;
    touch-action: none;
}

/* Visual track line through the vertical center */
.price-track-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 5px;
    margin-top: -2px;   /* center the 5px bar: -(5/2) + 0.5 ≈ -2 */
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;   /* clip the gold fill to the rounded track */
    pointer-events: none;
}

/* Gold fill between the two thumbs */
.price-track-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: #b78a42;
    /* left/width set by JS in px */
}

/* Thumb handles — positioned with left: Xpx, never overflow wrapper */
.price-thumb {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #b78a42;
    box-shadow: 0 1px 6px rgba(0,0,0,0.20);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.price-thumb:hover {
    border-color: #9c7333;
    box-shadow: 0 2px 10px rgba(183,138,66,0.35);
}
.price-thumb.dragging {
    cursor: grabbing;
    border-color: #9c7333;
    box-shadow: 0 3px 12px rgba(183,138,66,0.45);
    transform: scale(1.12);
}
.price-thumb-min { z-index: 3; }
.price-thumb-max { z-index: 4; }

/* Min / Max number inputs row */
.price-inputs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.price-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    transition: border-color 0.2s;
}
.price-input-box:focus-within {
    border-color: #b78a42;
    background: #fff;
}
.price-currency {
    font-size: 13px;
    font-weight: 700;
    color: #b78a42;
    padding: 0 6px 0 10px;
    flex-shrink: 0;
}
.price-input-box input[type=number] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding: 8px 8px 8px 0;
    -moz-appearance: textfield;
}
.price-input-box input[type=number]::-webkit-outer-spin-button,
.price-input-box input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.price-range-dash {
    font-size: 14px;
    color: #aaa;
    flex-shrink: 0;
}

/* Apply button */
.btn-filter-price {
    width: 100%;
    padding: 11px 0;
    background: #b78a42;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.5px;
}
.btn-filter-price:hover {
    background: #9c7333;
    transform: translateY(-1px);
}
.btn-filter-price:active {
    transform: translateY(0);
}

/* Clear filter link */
.price-clear-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.price-clear-link:hover { color: #cc2027; }

/* Main Content */
.shop-main-content {
    width: 75%;
}

/* Toolbar */
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.view-toggles {
    display: flex;
    gap: 8px;
}

.view-btn {
    background: #fff;
    border: 1px solid #eaeaea;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover {
    color: #555;
}

.view-btn.active {
    border-color: #eee;
    color: #555;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    /* very subtle pressed feel */
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.showing-txt {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.sort-select {
    border: 1px solid #b78a42;
    /* Gold border like the image */
    padding: 8px 30px 8px 15px;
    font-family: inherit;
    font-size: 15px;
    color: #555;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23b78a42" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
}

/* Shop Product Grid */
.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Shop Product Card */
.shop-product-card {
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.3s, transform 0.3s;
}

.shop-product-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    z-index: 10;
}

.sp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.sp-tag {
    font-size: 12px;
    color: #888;
    line-height: 1.3;
}

.sp-card-header i {
    color: #c8a14b;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sp-card-header i:hover {
    transform: scale(1.15);
    color: #e51d20;
}

.sp-image {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sp-image img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.shop-product-card:hover .sp-image img {
    transform: scale(1.05);
}

.sp-details {
    margin-top: auto;
    margin-bottom: 15px;
}

.sp-details h4 {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.sp-details p {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.btn-add-cart {
    width: 100%;
    background-color: #f5eedf;
    /* Light beige/gold tint */
    color: #b78a42;
    /* Gold text */
    border: none;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add-cart:hover {
    background-color: #b78a42;
    color: #fff;
}

/* Order Tracking Header Button */
.btn-order-tracking {
    background-color: #b78a42;
    color: #fff;
    text-decoration: none;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
}

.btn-order-tracking:hover {
    background-color: #9c7333;
    color: #fff;
}

.promo-group-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Media Queries */
@media (max-width: 1024px) {
    .shop-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .shop-layout {
        flex-direction: column;
    }

    .shop-sidebar {
        width: 100%;
    }

    .shop-main-content {
        width: 100%;
    }

    .shop-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .promo-group-actions {
        flex-direction: column;
        gap: 5px;
    }

    /* responsive header */
}

@media (max-width: 480px) {
    .shop-product-grid {
        grid-template-columns: 1fr;
    }

    .shop-toolbar {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

/* ==================================
/* ==================================
   HOME SECTIONS — Best Sellers & What's New
   ================================== */
.home-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

.home-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.home-section-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    white-space: nowrap;
    margin: 0;
}

.home-section-line {
    flex: 1;
    height: 2px;
    background: #eee;
    border-radius: 2px;
}

/* 6-column grid (Best Sellers) */
.home-product-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 15px;
    margin: -15px;
}

/* 5-column grid */
.home-product-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    flex: 1;
    padding: 15px;
    margin: -15px;
}

/* What's New: 4 cards + side ad */
.home-whatsnew-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.home-product-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    flex: 1;
    padding: 15px;
    margin: -15px;
}

.home-whatsnew-ad {
    width: 220px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.home-whatsnew-ad a {
    display: block;
    height: 100%;
}

.home-whatsnew-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.home-whatsnew-ad img:hover {
    transform: scale(1.02);
}

/* ==================================
   CART & CHECKOUT STYLES
   ================================== */
.cart-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    white-space: nowrap;
}

.cart-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.cart-toast i {
    color: #cc2027;
    font-size: 18px;
}

/* Base Page Elements */
.page-title {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 40px;
    color: #111;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 15px;
}

.cart-page-wrapper,
.checkout-page-wrapper {
    margin-top: 40px;
    margin-bottom: 80px;
    font-family: 'Poppins', sans-serif;
}

/* Cart Page */
.cart-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.cart-items-section {
    width: 65%;
}

.cart-summary-section {
    width: 35%;
    border: 1px solid #eaeaea;
    padding: 30px;
    border-radius: 4px;
    background: #fafafa;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    text-align: left;
    padding: 15px 0;
    border-bottom: 1px solid #eaeaea;
    color: #888;
    font-size: 15px;
    font-weight: 600;
}

.cart-table td {
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;
    vertical-align: middle;
}

.td-product-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-remove {
    color: #ccc;
    transition: color 0.2s;
}

.item-remove:hover {
    color: #e51d20;
}

.td-product-wrap img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 5px;
}

.td-product-wrap span {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.col-price,
.col-subtotal {
    font-size: 16px;
    font-weight: 600;
    color: #555;
}

.col-subtotal {
    color: #111;
}

.qty-control {
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    background: #f5f5f5;
    border: none;
    width: 30px;
    height: 35px;
    cursor: pointer;
    font-weight: 600;
}

.qty-btn:hover {
    background: #eaeaea;
}

.qty-control input {
    width: 40px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    appearance: textfield;
    -moz-appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.cart-actions-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.btn-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #eaeaea;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-outline:hover {
    border-color: #b78a42;
    color: #b78a42;
}

.cart-summary-section h3 {
    font-size: 22px;
    margin-bottom: 25px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.summary-line.highlight {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    border-bottom: none;
}

.btn-primary-block {
    display: block;
    width: 100%;
    background: #b78a42;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary-block:hover {
    background: #9c7333;
}

/* Checkout Page */
.checkout-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.checkout-forms {
    width: 60%;
}

.checkout-summary {
    width: 40%;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    padding: 40px 35px;
    border-radius: 8px;
    position: sticky;
    top: 20px;
}

.checkout-block {
    margin-bottom: 40px;
}

.checkout-block h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #111;
}

.form-group {
    margin-bottom: 15px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group.half {
    width: 50%;
}

.form-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-label .req {
    color: #e51d20;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.form-input:focus {
    border-color: #b78a42;
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
    padding-right: 40px;
    height: 44px;
}

.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.mini-cart-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 5px;
    background: #fff;
}

.mc-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mc-name {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.mc-qty {
    font-size: 14px;
    color: #888;
}

.mc-price {
    font-size: 16px;
    font-weight: 600;
    color: #555;
}

.summary-totals {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 20px;
}

.sum-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
}

.sum-total {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-top: 15px;
}

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.payment-grid .payment-radio {
    margin-bottom: 0;
}

.payment-radio {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s;
}

.payment-radio:hover {
    border-color: #b78a42;
}

.payment-radio input {
    margin-right: 15px;
    cursor: pointer;
}

.pay-text {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.pay-logo-inline {
    height: 20px;
}

.terms-block {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    background: #fafafa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.terms-block p {
    margin-bottom: 12px;
}

.terms-block p:last-of-type {
    margin-bottom: 0;
}

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.terms-checkbox input {
    margin-top: 3px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #b78a42;
}

.terms-checkbox span {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.terms-checkbox a {
    color: #b78a42;
    text-decoration: underline;
}

.required-asterisk {
    color: #e51d20 !important;
}

/* --- Single Product Page --- */
.product-single-wrapper {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.product-gallery {
    width: 50%;
    background: #fafafa;
    border-radius: 8px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}

.product-gallery img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.product-details-wrap {
    width: 50%;
}

.product-breadcrumb {
    font-size: 15px;
    color: #888;
    margin-bottom: 20px;
}

.product-breadcrumb a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.product-breadcrumb a:hover {
    color: #b78a42;
}

.product-breadcrumb .active {
    color: #b78a42;
    font-weight: 600;
}

.single-title {
    font-size: 34px;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
}

.single-price {
    font-size: 26px;
    font-weight: 700;
    color: #b78a42;
    margin-bottom: 25px;
}

.single-description {
    font-size: 17px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.single-meta {
    margin-bottom: 30px;
    padding: 20px;
    background: #fafafa;
    border-radius: 6px;
    border-left: 3px solid #b78a42;
}

.single-meta p {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.single-meta p:last-child {
    margin-bottom: 0;
}

.single-meta strong {
    font-weight: 700;
    color: #111;
}

/* Preparation block */
.single-preparation {
    margin-bottom: 25px;
    border: 1px solid #f0e8d6;
    border-left: 4px solid #b78a42;
    border-radius: 8px;
    background: #fffdf7;
    overflow: hidden;
}
.single-preparation-title {
    font-size: 14px;
    font-weight: 700;
    color: #b78a42;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 16px;
    background: #fef8ec;
    border-bottom: 1px solid #f0e8d6;
    display: flex;
    align-items: center;
    gap: 8px;
}
.single-preparation-body {
    font-size: 15px;
    color: #444;
    line-height: 1.75;
    padding: 14px 16px;
}

.single-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 40px;
}

.single-qty-wrap {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.single-qty-btn {
    width: 45px;
    height: 48px;
    background: #f5f5f5;
    border: none;
    font-size: 18px;
    cursor: pointer;
    font-weight: 700;
}

.single-qty-input {
    width: 60px;
    height: 48px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.single-qty-input::-webkit-inner-spin-button,
.single-qty-input::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.single-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.single-qty-input:disabled {
    background: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
}

.single-stock-note {
    margin: -28px 0 20px;
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}
.single-stock-note i  { color: #ef2f2f; }
.single-stock-note strong { color: #333; }

/* ── Qty popup overlay ── */
#qty-toast-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    animation: qtyOverlayIn 0.25s ease forwards;
}
#qty-toast-overlay.qty-toast-hide {
    animation: qtyOverlayOut 0.28s ease forwards;
}

/* ── Qty limit popup — centered modal ── */
#qty-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    width: 340px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    animation: qtyPopupIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#qty-toast.qty-toast-hide {
    animation: qtyPopupOut 0.28s ease forwards;
}

@keyframes qtyPopupIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes qtyPopupOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes qtyOverlayIn  { from { opacity:0; } to { opacity:1; } }
@keyframes qtyOverlayOut { from { opacity:1; } to { opacity:0; } }

.qty-toast-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cc2027, #ef2f2f);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(239,47,47,0.35);
    margin: 0 auto 18px;
}

.qty-toast-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-bottom: 22px;
}
.qty-toast-title {
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}
.qty-toast-msg {
    font-size: 13.5px;
    color: #666;
    line-height: 1.55;
}
.qty-toast-msg strong { color: #ef2f2f; font-weight: 700; }

.qty-toast-close {
    background: linear-gradient(135deg, #ef2f2f, #c0392b);
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 32px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    transition: opacity .2s;
    width: 100%;
}
.qty-toast-close:hover { opacity: 0.88; }

/* ── Qty box shake animation ── */
@keyframes qtyShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}
.qty-shake { animation: qtyShake 0.45s ease; }

.btn-single-add {
    flex: 1;
    height: 48px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-single-add:hover {
    background: #b78a42;
}

@media (max-width: 900px) {
    .product-single-wrapper {
        flex-direction: column;
    }

    .product-gallery,
    .product-details-wrap {
        width: 100%;
    }

    .cart-layout,
    .checkout-layout {
        flex-direction: column;
    }

    .cart-items-section,
    .cart-summary-section,
    .checkout-forms,
    .checkout-summary {
        width: 100%;
    }
}

/* ── Floating Sticky Cart ── */
.floating-cart-widget {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #cc2127;
    color: #fff;
    width: 75px;
    padding: 18px 8px;
    border-radius: 12px 0 0 12px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    z-index: 9999;
    transition: none;
    white-space: nowrap;
}

.floating-cart-widget:hover {
    background: #cc2127;
    color: #fff;
}

.fc-icon {
    font-size: 22px;
    margin-bottom: 0;
}

/* Hidden on desktop — only shown inside mobile media query */
.fc-qty-badge { display: none !important; }

/* Delivery section inside cart bar — desktop hidden */
.fc-delivery { display: none !important; }
.fc-bar-divider { display: none !important; }

.fc-items {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 0;
    text-align: center;
}

.fc-price-pill {
    background: rgba(255, 255, 255, 0.22);
    padding: 4px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}


/* =========================================
   CONTACT PAGE
========================================= */
.contact-page-wrapper {
    padding: 0px 0;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: flex-start;
}

.contact-title {
    color: #b78a42;
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 30px;
}

.contact-socials-big {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.social-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 24px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.social-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    color: white;
}

.social-icon.tiktok {
    background: #000;
}

.social-icon.facebook {
    background: #1877F2;
}

.social-icon.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.contact-info-cards {
    display: flex;
    gap: 20px;
}

.contact-card {
    background: #bc8e3e;
    border-radius: 8px;
    flex: 1;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.card-header {
    background: white;
    color: #111;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 20px;
    text-align: center;
    margin: 10px 10px 0 10px;
    border-radius: 4px;
}

.card-body {
    padding: 20px;
    color: white;
}

.card-subtitle {
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 500;
    line-height: 1.4;
}

.card-highlight {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.card-highlight-small {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    word-break: break-all;
}

.mt-15 {
    margin-top: 15px;
}

.business-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.business-hours-list li {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.business-hours-list i {
    font-size: 12px;
}

.dealership-link-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
    margin-top: 5px;
    transition: opacity 0.3s;
}

.dealership-link-card:hover {
    opacity: 0.8;
    color: white;
}

/* Right Form column */
.contact-form-container {
    background: #fcfcfc;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.form-title {
    color: #2c4161;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 30px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group-c {
    width: 100%;
}

.form-group-c label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #2c4161;
    margin-bottom: 8px;
}

.form-group-c label span {
    color: #e74c3c;
}

.form-group-c input,
.form-group-c textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.form-group-c input:focus,
.form-group-c textarea:focus {
    outline: none;
    border-color: #b78a42;
    box-shadow: 0 0 0 3px rgba(183, 138, 66, 0.1);
}

.form-checkbox-c {
    display: flex;
    align-items: flex-start;
}

.custom-checkbox-c {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.custom-checkbox-c input {
    margin-top: 3px;
}

.checkbox-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.checkbox-text .req {
    color: #e74c3c;
}

.recaptcha-mockup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    padding: 10px 15px;
    width: 300px;
    margin-bottom: 10px;
}

.rc-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
}

.rc-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rc-text {
    font-size: 11px;
    color: #555;
    text-align: center;
    margin-top: 5px;
}

.btn-submit-contact {
    background-color: #f6685e;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 14px 30px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-submit-contact:hover {
    background-color: #e55b52;
    transform: translateY(-2px);
}

/* Contact Page Responsive */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .contact-info-cards {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .contact-page-wrapper .container {
        padding-top: 36px !important;
        padding-bottom: 40px;
    }

    /* Banner: shorter on mobile */
    .guarantee-banner {
        height: 200px;
    }
    .guarantee-banner h1 {
        font-size: 30px;
    }

    /* Grid: single column */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Social icons: row, centered */
    .contact-socials-big {
        justify-content: flex-start;
        gap: 14px;
        margin-bottom: 24px;
    }
    .social-icon {
        width: 52px;
        height: 52px;
        font-size: 26px;
        border-radius: 10px;
    }

    /* Info cards: stacked and centered on mobile/tablet */
    .contact-info-cards {
        flex-direction: column;
        gap: 15px;
    }
    .contact-card {
        flex: 1;
        text-align: center;
    }
    .contact-card .card-header {
        font-size: 15px;
        padding: 12px;
        text-align: center;
    }
    .contact-card .card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .card-highlight, .card-subtitle, .card-highlight-small, .business-hours-list, .dealership-link-card {
        font-size: 15px;
    }
    .business-hours-list li {
        justify-content: center;
    }

    /* Form */
    .contact-form-container {
        padding: 24px 20px;
        border-radius: 10px;
    }
    .form-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .contact-form {
        gap: 16px;
    }
    .form-group-c input,
    .form-group-c textarea {
        font-size: 15px;
        padding: 10px 13px;
    }
    .btn-submit-contact {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    /* Stack info cards vertically on very small screens */
    .contact-info-cards {
        flex-direction: column;
        gap: 12px;
    }
    .guarantee-banner {
        height: 160px;
    }
    .guarantee-banner h1 {
        font-size: 24px;
    }
    .contact-form-container {
        padding: 20px 16px;
    }
    .recaptcha-mockup {
        width: 100%;
    }
}

/* =========================================
   VISION, MISSION AND VALUES PAGE
========================================= */
.vmv-page-wrapper {
    background: white;
    margin-bottom: -60px;
    /* Counteract the .custom-footer margin-top */
}

.vmv-header-section {
    padding: 60px 20px 20px 20px;
    text-align: center;
    background: white;
    position: relative;
    z-index: 2;
}

.vmv-title {
    font-size: 44px;
    font-weight: 800;
    color: #000;
    margin-bottom: 25px;
    font-family: 'Poppins', sans-serif;
}

.vmv-description {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

.vmv-cards-section {
    position: relative;
    background: url('images/visionbg.png') center/cover no-repeat;
    padding: 80px 20px 120px 20px;
    font-family: 'Poppins', sans-serif;
}

.vmv-cards-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.vmv-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

.vmv-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 750px;
}

.vmv-icon-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: absolute;
    left: -50px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 52px;
}

.vmv-icon-ring {
    position: absolute;
    width: 106px;
    height: 106px;
    border: 3px solid white;
    border-radius: 50%;
}

.vmv-content-box {
    display: flex;
    width: 100%;
    min-height: 120px;
    margin-left: 60px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.vmv-left-label {
    flex: 0 0 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: white;
    padding-left: 90px;
}

.vmv-right-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    color: white;
    font-size: 18px;
    text-align: center;
    line-height: 1.4;
    font-weight: 400;
}

/* Colors Theme */
.blue-theme .vmv-icon-circle {
    background: #42729a;
    box-shadow: 0 0 0 10px #2e5b82;
}

.blue-theme .vmv-left-label {
    background: #42729a;
}

.blue-theme .vmv-right-text {
    background: #4f8ab9;
}

.orange-theme .vmv-icon-circle {
    background: #e88d2d;
    box-shadow: 0 0 0 10px #cb7922;
}

.orange-theme .vmv-left-label {
    background: #e88d2d;
}

.orange-theme .vmv-right-text {
    background: #efa149;
}

.red-theme .vmv-icon-circle {
    background: #c33031;
    box-shadow: 0 0 0 10px #a42324;
}

.red-theme .vmv-left-label {
    background: #c33031;
}

.red-theme .vmv-right-text {
    background: #d04342;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .vmv-title {
        font-size: 34px;
    }

    .vmv-description {
        padding: 0 15px;
        font-size: 16px;
    }

    .vmv-icon-circle {
        width: 100px;
        height: 100px;
        font-size: 37px;
        left: -20px;
        box-shadow: 0 0 0 6px;
    }

    .vmv-icon-ring {
        width: 75px;
        height: 75px;
        border-width: 2px;
    }

    .vmv-content-box {
        flex-direction: column;
        margin-left: 30px;
        border-radius: 8px;
        overflow: hidden;
    }

    .vmv-left-label {
        flex: none;
        width: 100%;
        padding: 20px 0 20px 60px;
        font-size: 24px;
        justify-content: flex-start;
    }

    .vmv-right-text {
        text-align: left;
        padding: 20px;
    }
}

@media (max-width: 500px) {
    .vmv-row {
        flex-direction: column;
    }

    .vmv-icon-circle {
        position: relative;
        left: 0 !important;
        margin: 0 auto -50px auto !important;
        z-index: 3;
    }

    .vmv-content-box {
        margin-left: 0;
        padding-top: 50px;
    }

    .vmv-left-label {
        padding: 20px 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .vmv-right-text {
        text-align: center !important;
    }
}

@media (min-width: 901px) {
    .hamburger-menu {
        display: none;
    }
}

@media (max-width: 900px) {

    /* Header & Navigation */
    .top-bar-flex {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .dealership-link a {
        justify-content: center;
    }

    .header-middle {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px 0;
    }

    .search-bar {
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
    }

    .nav-inner {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .nav-left,
    .header-right-actions {
        justify-content: center;
        width: 100%;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
        border-top: 1px solid #eee;
        text-align: center;
    }

    .nav-links.mobile-active {
        display: flex;
    }

    .hamburger-menu {
        display: block;
        margin: 10px auto 0;
        cursor: pointer;
        color: #b78a42;
        font-size: 30px;
    }

    /* Home Page & General Grids */
    .hero-container {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .hero-content,
    .hero-image {
        width: 100%;
    }

    .hero-h1 {
        font-size: 34px;
    }

    .features-row {
        flex-direction: column;
        gap: 20px;
    }

    .category-grid {
        grid-template-columns: 1fr 1fr;
    }

    .promo-grid {
        flex-direction: column;
    }

    .promo-box {
        width: 100%;
    }

    .deal-layout {
        flex-direction: column;
    }

    .deal-timer-wrap,
    .deal-products {
        width: 100%;
    }

    .bestseller-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cta-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* Shop Page */
    .shop-layout {
        flex-direction: column;
    }

    .shop-sidebar {
        width: 100%;
        margin-bottom: 0px;
    }

    .shop-product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* Footer */
    .footer-top {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .footer-col {
        align-items: center;
    }

    .footer-bottom-flex {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .bottom-legal-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Mobile overrides for cart widget & delivery badge handled in the
   comprehensive responsive block below — no styles here to avoid conflicts */

@media (max-width: 500px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .shop-product-grid {
        grid-template-columns: 1fr;
    }

    .bestseller-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group.half {
        width: 100%;
        display: block;
    }

    .payment-grid {
        grid-template-columns: 1fr;
    }

    div.payment-radio[style*="span 2"],
    label.payment-radio[style*="span 2"] {
        grid-column: span 1 !important;
    }
}

/* =======================================================
   Tracking Modal Styles
======================================================== */
.tracking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    /* above header overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tracking-modal-overlay.show {
    display: flex;
    opacity: 1;
}

.tracking-modal-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.tracking-modal-overlay.show .tracking-modal-content {
    transform: scale(1);
}

.tracking-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 34px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.tracking-close-btn:hover {
    color: #333;
}

.tracking-icon-container {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
}

.tracking-icon-container .pin-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #0066cc;
    font-size: 26px;
}

.tracking-icon-container .truck-base-icon {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: #0b1c3a;
    font-size: 42px;
}

.tracking-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.tracking-input-wrapper {
    background: #f1f1f1;
    border-radius: 8px;
    padding: 6px 6px 6px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.tracking-label {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-right: 10px;
    text-transform: uppercase;
}

.tracking-input {
    flex: 1;
    border: none;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    outline: none;
    width: 100%;
}

.tracking-status-list {
    text-align: left;
    padding: 0 10px;
    margin-bottom: 30px;
}

.track-status-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.track-status-item:last-child {
    margin-bottom: 0;
}

.track-status-item .status-box {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.track-status-item.completed .status-box {
    background: #b58d4a;
    /* User's gold/brown theme color */
    color: #fff;
    border: 2px solid #b58d4a;
}

.track-status-item.pending .status-box {
    background: #fff;
    border: 2px solid #b58d4a;
}

.track-status-item .status-text {
    display: flex;
    flex-direction: column;
}

.track-status-item strong {
    font-size: 17px;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.2;
}

.track-status-item.completed strong {
    color: #1a1a1a;
}

.track-status-item span {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
}

.tracking-submit-btn {
    background: #a87e35;
    /* Gold background */
    color: #fff;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tracking-submit-btn:hover {
    background: #8c6828;
}

/* =======================================================
   Our Partners Page Styles
======================================================== */
.partners-page-wrapper {
    padding: 0px 0 100px;
    background-color: #fff;
    min-height: 60vh;
}

.partners-title {
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #cc2027;
    display: inline-block;
    padding: 6px 24px;
    border-radius: 50px;
    margin-bottom: 40px;
}

.partners-title-wrap {
    text-align: center;
    margin-bottom: 0;
}

.partners-divider {
    display: none;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.partner-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.partner-logo-item img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    filter: grayscale(0%);
    transition: transform 0.3s ease;
}

.partner-logo-item:hover img {
    transform: scale(1.05);
}

@media (max-width: 900px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .partners-title {
        font-size: 30px;
    }
}

/* =======================================================
   Our Guarantee Page Styles
======================================================== */
.guarantee-page-wrapper {
    background-color: #fff;
    padding-bottom: 10px;
}

.guarantee-banner {
    position: relative;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

.guarantee-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-banner-overlay h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.guarantee-content-section {
    padding: 60px 0;
    text-align: center;
}

.guarantee-text {
    font-size: 20px;
    line-height: 1.8;
    color: #444;
    max-width: 800px;
    margin: 0 auto 50px;
    font-weight: 500;
}

.guarantee-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.guarantee-logos img {
    max-width: 250px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .guarantee-banner {
        height: 300px;
    }

    .guarantee-banner-overlay h1 {
        font-size: 38px;
    }

    .guarantee-text {
        font-size: 18px;
    }

    .guarantee-logos {
        gap: 30px;
    }

    .guarantee-logos img {
        max-width: 200px;
    }
}

/* =======================================================
   Locate Us Page Styles
======================================================== */
.locate-page-wrapper {
    background-color: #fcfcfc;
    padding-bottom: 60px;
}

.locate-section {
    padding: 60px 0;
}

.locate-subtitle {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #111;
    margin-bottom: 50px;
}

.store-masonry {
    column-count: 4;
    column-gap: 40px;
}

.store-group {
    break-inside: avoid;
    margin-bottom: 32px;
}

.store-group-title {
    font-size: 17px;
    font-weight: 800;
    color: #444;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.store-group-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.store-group-list li {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    line-height: 1.4;
    letter-spacing: 0.3px;
    font-weight: 500;
    text-align: left;
}

.locate-link-wrapper {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    margin-top: 40px;
}

.locate-link-wrapper p {
    font-size: 18px;
    color: #555;
    margin-bottom: 15px;
}

.locate-link-wrapper .btn-primary:hover {
    background-color: #9c7333 !important;
}

@media (max-width: 1024px) {
    .store-masonry {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .locate-subtitle {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .store-masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .store-masonry {
        column-count: 1;
    }
}

/* =======================================================
   Export Countries Page Styles
======================================================== */
.export-content-section {
    padding: 60px 0;
    background-color: #fcfcfc;
}

.export-map-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    display: inline-block;
    max-width: 100%;
}

.export-map-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* =======================================================
   FAQ Page Styles
======================================================== */
.faq-accordion-group {
    max-width: 800px;
    margin: 0 auto;
}
.faq-details {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    overflow: hidden;
}
.faq-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    list-style: none; /* remove default arrow */
    transition: background-color 0.3s;
}
.faq-summary::-webkit-details-marker {
    display: none; /* remove default arrow in Safari */
}
.faq-summary:hover {
    background-color: #f9f9f9;
}
.faq-icon i {
    color: #b78a42;
    transition: transform 0.3s ease;
}
.faq-details[open] .faq-icon i {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 25px 25px 25px;
    font-size: 17px;
    color: #666;
    line-height: 1.6;
}

/* =======================================================
   Policy Pages — Shared Styles
   (Shipping Policy, Return Policy, Terms of Use, Privacy Policy)
======================================================== */
.policy-page-wrapper    { background: #fcfcfc; }
.policy-content-section { padding: 70px 0 90px; }

.policy-container {
    max-width: 860px;
}

.policy-intro {
    font-size: 15.5px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 48px;
    padding-bottom: 28px;
    border-bottom: 2px solid #f0f0f0;
}

/* ── Section row ── */
.policy-section {
    display: flex;
    gap: 28px;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}
.policy-section:last-child { border-bottom: none; margin-bottom: 0; }

/* ── Numbered circle ── */
.policy-section-num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cc2027, #ef2f2f);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(204, 32, 39, 0.28);
    margin-top: 2px;
}

/* ── Section body ── */
.policy-section-body h2 {
    font-size: 19px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 14px;
}
.policy-section-body p {
    font-size: 15px;
    color: #555;
    line-height: 1.85;
    margin: 0 0 14px;
}
.policy-section-body p:last-child { margin-bottom: 0; }

/* Sub-heading inside a section */
.policy-sub-heading {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Bullet list ── */
.policy-list {
    margin: 10px 0 14px 20px;
    padding: 0;
    color: #555;
    font-size: 15px;
    line-height: 2;
}

/* ── Temperature cards ── */
.policy-temp-grid {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.policy-temp-card {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.policy-temp-card i {
    font-size: 24px;
    color: #ef2f2f;
    margin-top: 2px;
    flex-shrink: 0;
}
.policy-temp-card div  { display: flex; flex-direction: column; gap: 3px; }
.policy-temp-card strong { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.policy-temp-card span   { font-size: 20px; font-weight: 800; color: #cc2027; line-height: 1.1; }
.policy-temp-card small  { font-size: 12px; color: #999; }

/* ── Contact strip ── */
.policy-contact-strip {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.policy-contact-strip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.policy-contact-strip a i { color: #ef2f2f; }
.policy-contact-strip a:hover {
    background: #ef2f2f;
    color: #fff;
    border-color: #ef2f2f;
}
.policy-contact-strip a:hover i { color: #fff; }

/* ── No-return banner ── */
.policy-no-return-banner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff5f5;
    border: 1.5px solid #fca5a5;
    border-left: 5px solid #ef2f2f;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 48px;
}
.policy-no-return-banner i {
    font-size: 28px;
    color: #ef2f2f;
    flex-shrink: 0;
    margin-top: 2px;
}
.policy-no-return-banner div  { display: flex; flex-direction: column; gap: 4px; }
.policy-no-return-banner strong { font-size: 16px; color: #1a1a1a; font-weight: 800; }
.policy-no-return-banner span   { font-size: 14px; color: #555; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 700px) {
    .policy-section { flex-direction: column; gap: 14px; }
    .policy-section-num { width: 40px; height: 40px; font-size: 15px; }
    .policy-temp-grid { flex-direction: column; }
    .policy-content-section { padding: 40px 0 60px; }
    .policy-intro { font-size: 14.5px; }
}

/* ================================================================
   MOBILE RESPONSIVE — COMPREHENSIVE
   Breakpoints: 1024px | 768px | 480px
================================================================ */

/* ── Mobile Hamburger Button ── */
.mobile-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s;
}
.mobile-hamburger:hover { background: #f5f5f5; }
.mobile-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s;
}

/* ── Mobile Nav Drawer ── */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    backdrop-filter: blur(2px);
}
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: #fff;
    z-index: 9001;
    overflow-y: auto;
    transition: left 0.35s cubic-bezier(0.25,0.8,0.25,1);
    box-shadow: 4px 0 30px rgba(0,0,0,0.15);
}
.mobile-nav-drawer.open { left: 0; }
.mobile-nav-overlay.open { display: block; }

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
.mobile-nav-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #555;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}
.mobile-nav-close:hover { background: #fdecea; color: #cc2027; }

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
.mobile-nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    border-bottom: 1px solid #f8f8f8;
    transition: background 0.2s, color 0.2s;
}
.mobile-nav-list > li > a:hover { background: #fff7f7; color: #cc2027; }
.mobile-nav-list > li > a i:first-child { width: 20px; color: #cc2027; }

.mobile-sub-arrow { margin-left: auto; font-size: 11px; color: #aaa; transition: transform 0.3s; }
.mobile-nav-has-sub.open .mobile-sub-arrow { transform: rotate(90deg); }

.mobile-nav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #fafafa;
}
.mobile-nav-has-sub.open .mobile-nav-sub { max-height: 500px; }
.mobile-nav-sub li a {
    display: block;
    padding: 11px 22px 11px 44px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s;
}
.mobile-nav-sub li a:hover { color: #cc2027; }

.mobile-nav-divider {
    height: 1px;
    background: #eeeeee;
    margin: 8px 0;
}

@media (max-width: 768px) {

    /* ── Top Bar: hide nav links, keep socials ── */
    .top-bar { display: none; }

    /* ── Main Header: single tight row ── */
    .main-header { padding: 10px 0; }
    .header-inner {
        gap: 8px;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* ── Logo: compact ── */
    .logo { flex-shrink: 0; }
    .logo img { height: 40px; }

    /* ── Search bar: fills available space ── */
    .search-bar-wrapper {
        flex: 1;
        min-width: 0;
        max-width: none !important;
    }
    .search-select-wrapper { display: none; }
    .search-bar { border-radius: 20px; height: 38px; }
    .search-bar input { font-size: 13px; padding: 0 10px; }
    .search-bar button {
        padding: 0 12px;
        font-size: 0; /* hide text, keep icon */
        gap: 0;
        border-radius: 0 20px 20px 0;
        min-width: 40px;
        justify-content: center;
    }
    .search-bar button i { font-size: 14px; }

    /* ── Right actions: compact, no wrap ── */
    .header-right-actions {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Hide profile icon on mobile (use drawer instead) */
    .profile-action { display: none; }
    .divider-vertical { display: none; }

    .action-icons { gap: 8px; }
    .icon-item { font-size: 19px; }
    .count-badge { width: 15px; height: 15px; font-size: 9px; top: -3px; right: -5px; }

    /* ── Show hamburger ── */
    .mobile-hamburger { display: flex; }

    /* ── Hide profile hover dropdown on mobile (use drawer instead) ── */
    .profile-action .profile-dropdown { display: none !important; }

    /* ── Header categories: horizontal scroll ── */
    .header-cat-title-row { display: none; }
    .header-cat-list { gap: 8px; padding: 10px 4px; }
    .header-cat-item { gap: 8px; }
    .header-cat-img { width: 46px; height: 46px; }
    .header-cat-name { font-size: 12px; }

    /* ── Hero Slider ── */
    .hero-slider .slide img { height: 220px; }
    .hero-content-overlay { left: 5%; max-width: 70%; }
    .hero-title { font-size: 26px; }
    .hero-subtitle { font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
    .hero-desc { font-size: 14px; margin-bottom: 16px; }
    .btn-hero-order { padding: 10px 22px; font-size: 14px; }

    /* ── Category Banners (Shop by Brand) ── */
    .category-banners { gap: 8px; }

    /* ── Homepage grids ── */
    .home-product-grid-6, .home-product-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .home-product-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .discount-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* ── Related products: 2 columns, max 4 items on mobile ── */
    .related-products .product-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .related-products .product-grid-5 .shop-product-card:nth-child(n+5) { display: none !important; }

    /* ── What's New layout: stack vertically ── */
    .home-whatsnew-layout { flex-direction: column; }
    .home-whatsnew-ad { display: none; }  /* hide favoritas3 side banner on mobile */

    /* ── Section headers ── */
    .home-section-header h2 { font-size: 20px; }
    .discount-header-row h2 { font-size: 20px; }

    /* ── Product cards ── */
    .disc-card-img { height: 160px; margin-top: 15px; margin-bottom: 10px; }
    .disc-card-details { }
    .main-price { font-size: 14px; }
    .product-title-new { font-size: 12px; }

    /* ── Full-width banners ── */
    .full-banner img { border-radius: 8px; }

    /* ── Discount section ── */
    .discount-container-box { padding: 20px 16px; }
    .discount-header-row { margin-bottom: 16px; }

    /* ── Floating Cart & Delivery Badge: see comprehensive block below ── */

    /* ── Footer ── */
    .footer-mid-row { flex-direction: column; gap: 24px; }
    .footer-mid-right { flex-direction: column; gap: 20px; }
    .footer-bottom-flex { flex-direction: column; gap: 12px; text-align: center; }
    .bottom-legal-links { flex-wrap: wrap; justify-content: center; gap: 12px; }

    /* ── Shop Page ── */
    .shop-layout { flex-direction: column; }
    .shop-sidebar { width: 100%; max-width: 100%; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* ── Product Detail ── */
    .product-detail-layout { flex-direction: column; gap: 24px; }
    .product-gallery { max-width: 100%; }

    /* ── Cart ── */
    .cart-layout { flex-direction: column; }
    .cart-summary-box { width: 100%; }
    .cart-item-row { flex-direction: column; gap: 12px; align-items: flex-start; }

    /* ── Checkout ── */
    .checkout-layout { flex-direction: column; }
    .checkout-summary { width: 100%; }

    /* ── Account Dashboard ── */
    .account-layout { flex-direction: column; }
    .account-sidebar { width: 100%; max-width: 100%; }

    /* ── Recipe Grid ── */
    .recipe-grid { grid-template-columns: repeat(1, 1fr); gap: 16px; }

    /* ── Cart Toast — top center ── */
    /* Cart Toast — bottom center on mobile, above the sticky bars */
    .cart-toast { left: 50%; transform: translateX(-50%) translateY(80px); right: auto; width: 90vw; max-width: 360px; bottom: 120px; white-space: normal; text-align: center; justify-content: center; }
    .cart-toast.show { transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   480px — Small Phones
================================================================ */
@media (max-width: 480px) {

    .container { padding-left: 14px; padding-right: 14px; }

    /* ── Logo ── */
    .logo img { height: 38px; }

    /* ── Search bar: even more compact ── */
    .search-bar-wrapper { max-width: calc(100% - 120px); }
    .search-bar button { padding: 0 10px; font-size: 12px; }

    /* ── Hero ── */
    .hero-slider .slide img { height: 180px; }
    .hero-title { font-size: 20px; }
    .hero-content-overlay { left: 4%; max-width: 65%; }
    .hero-desc { display: none; }
    .btn-hero-order { padding: 8px 16px; font-size: 12px; }

    /* ── Grids: 2 cols still fine ── */
    .home-product-grid-6,
    .home-product-grid-5,
    .home-product-grid-4,
    .discount-product-grid,
    .product-grid-6,
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* ── Product cards: tighter ── */
    .disc-product-card { padding: 10px 8px; border-radius: 10px; min-height: 260px; }
    .disc-card-img { height: 160px; margin-top: 15px; margin-bottom: 8px; }
    .main-price { font-size: 13px; }
    .product-title-new { font-size: 11px; }

    /* ── Section spacing ── */
    .home-section { margin-top: 28px; margin-bottom: 28px; }
    .home-section-header h2 { font-size: 17px; }

    /* ── Discount section container ── */
    .discount-container-box { padding: 16px 12px; border-radius: 12px; }

    /* ── Recipe cards: homepage 2 cards max on mobile; gallery stays 2-col ── */
    .recipe-section .recipe-grid { grid-template-columns: 1fr !important; }
    .recipe-section .recipe-grid .recipe-card:nth-child(n+3) { display: none !important; }
    .recipe-gallery-section .recipe-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }

    /* ── Cart count badges ── */
    .count-badge { width: 14px; height: 14px; font-size: 10px; }

    /* ── Floating cart: tuck in on tiny screens ── */
    .floating-cart-widget {
        padding: 7px 10px;
        gap: 6px;
    }
    .fc-items { font-size: 12px; }

    /* ── Footer: tighter ── */
    .footer-logos-left { gap: 12px; }
    .footer-logos-left img { height: 42px; }
    .footer-logos-left img:nth-child(2) { height: 52px; }
    .social-links-list { flex-direction: column; gap: 10px; }

    /* ── Mobile drawer: full-width on very small ── */
    .mobile-nav-drawer { width: 100%; max-width: 100%; }
}

/* ================================================================
   COMPREHENSIVE RESPONSIVE SYSTEM — AGUILA
   Breakpoints: 1440 | 1024 | 768 | 425 | 375 | 320
================================================================ */

/* ── Base: prevent horizontal overflow globally ── */
html {
    max-width: 100%;
}
body {
    overflow-x: clip;
    max-width: 100%;
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ── Container fluid on small screens ── */
@media (max-width: 1024px) {
    .container { padding: 0 16px; }

    /* Header inner: allow wrap */
    .header-inner { gap: 16px; }

    /* Hero slider shorter on tablet */
    .hero-slider .slide img { height: 380px; }
    .hero-title { font-size: 42px; }

    /* Category banners stacked if needed */
    .category-banners { flex-wrap: wrap; }
    .category-banner { flex: 1 1 45%; }

    /* Home grids */
    .home-product-grid-6, .home-product-grid-5 { grid-template-columns: repeat(4, 1fr); }
    .home-product-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .bestsellers-grid { grid-template-columns: repeat(4, 1fr); }
    .product-grid-6 { grid-template-columns: repeat(4, 1fr); }

    /* What's new ad */
    .home-whatsnew-ad { width: 180px; }

    /* Shop sidebar narrower */
    .shop-sidebar { width: 30%; }
    .shop-main-content { width: 70%; }
    .shop-product-grid { grid-template-columns: repeat(3, 1fr); }

    /* Cart table: slightly compressed */
    .cart-table th, .cart-table td { padding: 12px 0; }
}

/* ── 768px — Tablet / Mobile boundary ── */
@media (max-width: 768px) {
    /* --- Global --- */
    .container { padding: 0 14px; }
    body { font-size: 15px; }

    /* --- Top Bar: hide completely --- */
    .top-bar { display: none !important; }

    /* --- Main Header: CSS Grid 2-row layout (bypasses inline flex:1 on search-bar-wrapper) --- */
    .main-header { padding: 10px 0 8px; position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .header-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo . actions"
            "search search search";
        align-items: center;
        gap: 8px 10px;
        justify-content: unset;
    }

    /* Grid area assignments override inline flex styles */
    .logo { grid-area: logo; }
    .logo img { height: 38px; }
    .search-bar-wrapper { grid-area: search; width: 100% !important; max-width: 100% !important; position: relative; }
    .header-right-actions { grid-area: actions; }

    /* Search bar styling */
    .search-select-wrapper { display: none; }
    .search-bar { border-radius: 22px; height: 38px; width: 100%; }
    .search-bar input { font-size: 13px; padding: 0 12px; }
    .search-bar button { padding: 0 14px; font-size: 0; gap: 0; border-radius: 0 22px 22px 0; min-width: 44px; justify-content: center; }
    .search-bar button i { font-size: 15px; }

    /* Actions row */
    .header-right-actions { flex-shrink: 0; gap: 8px; }
    .profile-action { display: none !important; }
    .divider-vertical { display: none; }
    .action-icons { gap: 10px; }
    .action-icons { gap: 10px; }
    .icon-item { font-size: 20px; }
    .count-badge { width: 16px; height: 16px; font-size: 10px; }
    .mobile-hamburger { display: flex !important; }

    /* --- Header categories --- */
    .header-cat-title-row { display: none; }
    .header-cat-list { gap: 10px; padding: 10px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .header-cat-item { flex-shrink: 0; gap: 8px; }
    .header-cat-img { width: 50px; height: 50px; }
    .header-cat-name { font-size: 12px; }

    /* --- Hero Slider --- */
    .hero-slider .slide img { height: 240px; }
    .hero-content-overlay { left: 5%; max-width: 75%; }
    .hero-title { font-size: 28px; }
    .hero-subtitle { font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; }
    .hero-desc { font-size: 14px; margin-bottom: 14px; }
    .btn-hero-order { padding: 10px 20px; font-size: 13px; }
    .slider-btn { padding: 10px; font-size: 24px; }

    /* --- Category Banners → Carousel on mobile --- */
    .category-banners-section { margin-top: 24px; margin-bottom: 24px; }
    .category-banners {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        scrollbar-width: none;
        padding-right: 0;
    }
    .category-banners::-webkit-scrollbar { display: none; }
    .mobile-carousel-wrap { overflow: hidden; }
    .category-banner {
        flex: 0 0 calc(50% - 5px);
        scroll-snap-align: start;
        min-width: 0;
    }
    .category-banner img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 10px;
        transition: none;
    }
    .category-banner:hover img { transform: none; }

    /* Carousel arrow buttons — full-height edge strips */
    .mc-arrow {
        display: none !important;
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 28px;
        z-index: 10;
        background: rgba(0, 0, 0, 0.28);
        color: #fff;
        border: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        padding: 0;
        flex-shrink: 0;
        border-radius: 0;
    }
    .mc-prev { left: 0; border-radius: 0 4px 4px 0; }
    .mc-next { right: 0; border-radius: 4px 0 0 4px; }
    /* Center the "Shop by Brand" label; force single line; no wrapping */
    .shop-category-label {
        position: static;
        display: block;
        text-align: center;
        margin: 0 auto 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: transparent;
        color: #111;
        box-shadow: none;
        padding: 6px 0;
    }
    .shop-category-label span {
        display: inline !important; /* override block/br stacking */
        font-size: 18px;
        white-space: nowrap;
    }
    .shop-category-label span br { display: none; } /* remove the line break inside the label */

    /* --- Popular Categories --- */
    .popular-categories { margin: 30px auto 20px; }
    .categories-list { flex-wrap: wrap; gap: 12px; }
    .category-item { flex: 1 1 calc(50% - 12px); }
    .cat-img-wrap { width: 60px; height: 60px; }
    .cat-name { font-size: 14px; }

    /* --- Home sections --- */
    .home-section { margin: 28px 0; }
    .home-section-header { flex-wrap: wrap; gap: 8px; }
    .home-section-header h2 { font-size: 20px; }
    .home-product-grid-6, .home-product-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .home-product-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* --- What's New layout --- */
    .home-whatsnew-layout { flex-direction: column; gap: 14px; }
    .home-whatsnew-ad { width: 100%; max-height: 200px; border-radius: 10px; overflow: hidden; }
    .home-whatsnew-ad img { max-height: 200px; object-fit: cover; width: 100%; }

    /* --- Discount section --- */
    .discount-products-section { margin: 24px 0; }
    .discount-container-box { padding: 18px 14px; border-radius: 12px; }
    .discount-header-row { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
    .discount-title-area h2 { font-size: 18px; }
    .discount-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .disc-card-img { height: 160px; margin-top: 15px; margin-bottom: 10px; }
    .main-price { font-size: 14px; }
    .product-title-new { font-size: 12px; }

    /* --- Best Sellers --- */
    .bestsellers-section { margin: 24px 0; }
    .bestsellers-layout { flex-direction: column; gap: 16px; }
    .bestsellers-left-banner { width: 100%; }
    .bestsellers-left-banner img { max-height: 280px; object-fit: cover; }
    .bestsellers-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bestsellers-header h2 { font-size: 20px; }

    /* --- Product grid (6-col full width) --- */
    .product-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .full-grid-section { margin-bottom: 28px; }

    /* --- Shop page --- */
    .shop-page-wrapper { margin-top: 20px; margin-bottom: 40px; }
    .shop-layout { flex-direction: column; gap: 20px; }
    .shop-sidebar { width: 100%; max-width: 100%; }
    .shop-main-content { width: 100%; }
    .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .shop-toolbar { flex-direction: column; gap: 12px; align-items: flex-start; }
    .toolbar-right { width: 100%; justify-content: space-between; }
    .sort-select { width: 100%; }

    /* --- Single Product --- */
    .product-single-wrapper { flex-direction: column; gap: 24px; margin-top: 20px; }
    .product-gallery { width: 100%; padding: 24px; }
    .product-details-wrap { width: 100%; }
    .single-title { font-size: 26px; }
    .single-actions { flex-wrap: wrap; gap: 10px; }
    .btn-single-add { min-width: 200px; }

    /* --- Cart: stacked card layout on mobile (no horizontal scroll) --- */
    .cart-page-wrapper { margin-top: 14px; margin-bottom: 30px; }
    .page-title { font-size: 22px; margin-bottom: 16px; }
    .cart-layout { flex-direction: column; gap: 20px; }
    .cart-items-section { width: 100%; }
    .cart-summary-section { width: 100%; padding: 16px; }

    /* Disable horizontal scroll — convert to card/grid layout */
    .cart-table-wrapper { overflow-x: unset; }
    .cart-table { min-width: unset !important; width: 100%; border-collapse: separate; border-spacing: 0 8px; }
    .cart-table thead { display: none !important; }
    .cart-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas: "product qty";
        grid-template-rows: auto;
        column-gap: 10px;
        row-gap: 4px;
        padding: 12px 14px;
        border-bottom: none !important;
        width: 100%;
        background: #fafafa;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        margin-bottom: 8px;
        box-sizing: border-box;
    }
    .cart-table td { display: block !important; border: none !important; padding: 0; box-sizing: border-box; }

    /* Grid placement */
    .cart-table .col-product { grid-area: product; min-width: 0; align-self: end; }
    .cart-table .col-price   { grid-area: price; align-self: start; }
    .cart-table .col-qty     { grid-area: qty; align-self: center; }
    .cart-table .col-subtotal { display: none !important; }

    /* Product info row */
    .td-product-wrap { gap: 10px; flex-wrap: nowrap; align-items: flex-start; }
    .td-product-wrap img {
        width: 86px;
        height: 86px;
        flex-shrink: 0;
        padding: 4px;
        border-radius: 8px;
        border: 1px solid #eee;
        background: #fff;
        object-fit: contain;
    }
    .td-product-wrap span {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        color: #1a1a1a;
    }
    .item-remove {
        flex-shrink: 0;
        font-size: 13px;
        color: #ccc;
        padding: 2px 4px;
    }

    /* Price: directly under product name, black */
    .cart-table .col-price {
        display: none !important;
    }
    .mobile-price {
        display: block !important;
        font-size: 14px;
        font-weight: 800;
        color: #111;
        margin-top: 6px;
    }

    /* Qty control: vertically centered on right */
    .qty-control {
        border-radius: 6px;
        border: 1.5px solid #e0e0e0;
        background: #fff;
        overflow: hidden;
    }
    .qty-btn {
        width: 22px;
        height: 26px;
        font-size: 14px;
        font-weight: 700;
        color: #333;
        background: #fff;
    }
    .qty-btn:hover { background: #f5f5f5; }
    .qty-control input {
        width: 24px;
        font-size: 13px;
        font-weight: 700;
        height: 26px;
        border-left: 1.5px solid #e0e0e0;
        border-right: 1.5px solid #e0e0e0;
        color: #111;
    }

    .cart-actions-bottom { flex-direction: column; gap: 8px; margin-top: 4px; }
    .btn-outline { width: 100%; text-align: center; font-size: 13px; padding: 11px 14px; border-radius: 8px; }

    /* --- Checkout --- */
    .checkout-page-wrapper { margin-top: 20px; margin-bottom: 40px; }
    .checkout-layout { flex-direction: column; gap: 24px; }
    .checkout-forms { width: 100%; }
    .checkout-summary { width: 100%; position: static; top: auto; }
    .form-row { flex-direction: column; gap: 0; }
    .form-group.half { width: 100%; }
    .payment-grid { grid-template-columns: 1fr; }

    /* --- Contact page --- */
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-title { font-size: 34px; }
    .contact-info-cards { flex-direction: row; gap: 12px; }
    .contact-card { flex: 1; }
    .contact-form-container { padding: 24px 18px; }
    .btn-submit-contact { width: 100%; justify-content: center; }
    .recaptcha-mockup { width: 100%; }

    /* --- VMV page --- */
    .vmv-title { font-size: 30px; }
    .vmv-description { font-size: 16px; padding: 0 8px; }
    .vmv-cards-section { padding: 50px 16px 80px; }
    .vmv-content-box { flex-direction: column; margin-left: 24px; border-radius: 8px; overflow: hidden; }
    .vmv-left-label { flex: none; width: 100%; padding: 18px 0 18px 60px; font-size: 22px; justify-content: flex-start; }
    .vmv-right-text { text-align: left; padding: 18px 16px; font-size: 16px; }
    .vmv-icon-circle { width: 90px; height: 90px; font-size: 34px; left: -16px; }
    .vmv-icon-ring { width: 68px; height: 68px; }

    /* --- Locate page --- */
    .locate-subtitle { font-size: 22px; margin-bottom: 24px; }
    .store-masonry { column-count: 2; column-gap: 24px; }
    .locate-link-wrapper { padding: 24px 16px; }

    /* --- FAQ page --- */
    .faq-summary { padding: 16px 18px; font-size: 16px; }
    .faq-answer { padding: 0 18px 18px; font-size: 15px; }

    /* --- Partners page --- */
    .partners-title { font-size: 28px; letter-spacing: 1px; }
    .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .guarantee-banner { height: 220px; }
    .guarantee-banner-overlay h1 { font-size: 32px; }

    /* --- Footer: Stay Connected — single line on mobile --- */
    .footer-top-row { flex-direction: column; gap: 16px; text-align: center; }
    .footer-logos-left { justify-content: center; flex-wrap: wrap; gap: 14px; }
    .footer-top-links { flex-wrap: wrap; justify-content: center; gap: 14px; }
    .footer-mid-row { flex-direction: column; gap: 16px; align-items: center; }
    .footer-socials { flex-direction: row; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
    .stay-connected {
        font-size: 18px;
        text-align: left;
        white-space: nowrap;
        line-height: 1;
        /* Remove the stacked line — show "Stay Connected" on one line */
    }
    .stay-connected br { display: none; }
    .stay-connected .txt-white::after { content: ' '; }
    .social-links-list { align-items: flex-start; gap: 8px; }
    .social-links-list a { font-size: 13px; gap: 8px; }
    .footer-mid-right { flex-direction: row; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
    .footer-payments, .footer-delivery { padding-bottom: 16px; }
    .footer-payments img, .footer-delivery img { max-width: 160px; }
    .footer-bottom-flex { flex-direction: column; gap: 10px; text-align: center; }
    .bottom-legal-links { flex-wrap: wrap; justify-content: center; gap: 8px; }

    /* =====================================================
       MOBILE BOTTOM ACTION BAR — single red strip
       LEFT:  Delivering To info
       RIGHT: Cart icon + price
       ===================================================== */

    /* Hide old separate gold delivery badge — now embedded in cart bar */
    #deliveryBadge { display: none !important; }

    /* --- Floating Cart: single full-width red bar --- */
    .floating-cart-widget {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        transform: none !important;
        width: 100%;
        border-radius: 0;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
        gap: 0;
        z-index: 8000;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
        background: #cc2127;
        min-height: 56px;
    }
    .floating-cart-widget:hover {
        transform: none !important;
        background: #cc2127;
    }

    /* LEFT: delivery area info */
    .fc-delivery {
        display: flex !important;
        flex: 1;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        cursor: pointer;
        min-width: 0;
        overflow: hidden;
    }
    .fc-delivery > i {
        font-size: 15px;
        color: rgba(255,255,255,0.85);
        flex-shrink: 0;
    }
    .fc-delivery-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }
    .fc-delivery-label {
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
    .fc-delivery-area {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Vertical separator between left and right */
    .fc-bar-divider {
        display: block !important;
        width: 1px;
        background: rgba(255,255,255,0.3);
        align-self: stretch;
        flex-shrink: 0;
        margin: 10px 0;
    }

    /* RIGHT: cart icon + qty badge + price */
    .fc-icon {
        font-size: 20px;
        margin-bottom: 0;
        flex-shrink: 0;
        position: relative;
        display: flex;
        align-items: center;
        padding-left: 14px;
    }
    .fc-qty-badge {
        display: flex !important;
        position: absolute;
        top: -5px;
        right: -8px;
        background: #fff;
        color: #cc2027;
        font-size: 9px;
        font-weight: 800;
        min-width: 16px;
        height: 16px;
        border-radius: 50px;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        line-height: 1;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        pointer-events: none;
    }
    /* Hide the X Items text — delivery info replaces it */
    .fc-items { display: none !important; }
    .fc-price-pill {
        background: rgba(255,255,255,0.22);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
        margin: auto 14px auto 10px;
    }

    /* Body padding — zero; sticky bar is fixed so no push needed */
    body { padding-bottom: 0 !important; }
    /* iOS Safari safe-area: html bg shows in home-indicator area — match gold footer */
    html { background-color: #b38841; }
    /* Gold bar extends down to sticky cart — no black gap */
    .custom-footer { padding-bottom: 0 !important; margin-bottom: 0; }
    .footer-bottom-bar { padding-bottom: 68px !important; }


    /* --- Featured Recipe: 2-col grid on home page; fix touch targets --- */
    .recipe-section .recipe-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
    /* Hide cards beyond the first 2 on home page only */
    .recipe-section .recipe-grid .recipe-card:nth-child(n+3) { display: none !important; }
    /* Fix touch/click: make the card a block-level tappable area */
    .recipe-card {
        position: relative;
        -webkit-tap-highlight-color: rgba(0,0,0,0.05);
        touch-action: manipulation;
    }
    /* Full-area tap overlay so onclick fires reliably on mobile */
    .recipe-card::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        cursor: pointer;
    }
    .recipe-card img { margin-bottom: 8px; }
    .recipe-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .recipe-content h3 { font-size: 14px; }
    .recipe-content p { font-size: 12px; }
    /* --- Recipe Gallery page: show ALL cards on mobile (2-col grid) --- */
    .recipe-gallery-section .recipe-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }


    /* --- Policy pages --- */
    .policy-content-section { padding: 40px 0 60px; }
    .policy-section { flex-direction: column; gap: 12px; }
    .policy-section-num { width: 40px; height: 40px; font-size: 15px; }
    .policy-temp-grid { flex-direction: column; }
    .policy-intro { font-size: 14px; }
}

/* ── 425px — Mobile L ── */
@media (max-width: 425px) {
    .container { padding: 0 12px; }

    /* Header */
    .logo img { height: 38px; }
    .search-bar { height: 36px; }
    .search-bar input { font-size: 12px; padding: 0 8px; }
    .search-bar button { min-width: 36px; padding: 0 10px; }
    .search-bar button i { font-size: 13px; }
    .icon-item { font-size: 18px; }

    /* Hero */
    .hero-slider .slide img { height: 200px; }
    .hero-title { font-size: 22px; }
    .hero-subtitle { font-size: 11px; margin-bottom: 4px; }
    .hero-desc { display: none; }
    .btn-hero-order { padding: 8px 16px; font-size: 12px; }
    .hero-content-overlay { left: 4%; max-width: 72%; }
    .slider-btn { font-size: 20px; padding: 8px; }

    /* Category items */
    .categories-list { gap: 8px; }
    .category-item { flex: 1 1 calc(50% - 8px); }
    .cat-img-wrap { width: 52px; height: 52px; }
    .cat-name { font-size: 13px; }

    /* Grids */
    .home-product-grid-6,
    .home-product-grid-5,
    .home-product-grid-4,
    .discount-product-grid,
    .product-grid-6,
    .bestsellers-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Discount cards */
    .disc-product-card { padding: 10px 8px; border-radius: 10px; min-height: 260px; }
    .disc-card-img { height: 160px; margin-top: 15px; margin-bottom: 8px; }
    .main-price { font-size: 13px; }
    .product-title-new { font-size: 11px; }
    .discount-container-box { padding: 14px 10px; }
    .discount-timer { flex-wrap: wrap; gap: 4px; }
    .timer-box { min-width: 36px; padding: 4px 6px; }
    .timer-num { font-size: 15px; }
    .timer-label { font-size: 10px; }

    /* Shop grid */
    .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sp-image { height: 140px; }
    .sp-image img { max-height: 140px; }
    .sp-details h4 { font-size: 15px; }
    .sp-details p { font-size: 12px; }
    .btn-add-cart { font-size: 13px; padding: 9px 0; }

    /* Single product */
    .single-title { font-size: 22px; }
    .single-price { font-size: 20px; }
    .single-description { font-size: 15px; }
    .single-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .btn-single-add { width: 100%; }

    /* Cart table */
    .cart-table { min-width: 420px; font-size: 13px; }
    .td-product-wrap img { width: 56px; height: 56px; }
    .td-product-wrap span { font-size: 13px; }
    .col-price, .col-subtotal { font-size: 13px; }

    /* Checkout */
    .checkout-summary { padding: 20px 16px; }
    .checkout-block h3 { font-size: 18px; }
    .form-label { font-size: 14px; }
    .form-input { font-size: 15px; padding: 10px 12px; }

    /* Contact */
    .contact-title { font-size: 28px; }
    .contact-info-cards { flex-direction: column; gap: 10px; }
    .contact-card { text-align: center; }
    .contact-card .card-header { text-align: center; }
    .contact-card .card-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .business-hours-list li { justify-content: center; }
    .social-icon { width: 48px; height: 48px; font-size: 26px; }

    /* VMV */
    .vmv-row { flex-direction: column; }
    .vmv-icon-circle { position: relative; left: 0; margin: 0 auto -40px; z-index: 3; }
    .vmv-content-box { margin-left: 0; padding-top: 40px; }
    .vmv-left-label { padding: 16px 0; justify-content: center; text-align: center; }
    .vmv-right-text { text-align: center; font-size: 15px; }
    .vmv-description br { display: none; }

    /* Partners */
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .partners-title { font-size: 24px; }
    .guarantee-banner { height: 180px; }
    .guarantee-banner-overlay h1 { font-size: 26px; }

    /* Locate */
    .store-masonry { column-count: 1; }
    .locate-link-wrapper { padding: 20px 14px; }

    /* FAQ */
    .faq-accordion-group { margin: 0; }
    .faq-summary { padding: 14px 16px; font-size: 15px; }
    .faq-answer { padding: 0 16px 16px; font-size: 14px; }

    /* Recipe: homepage 2 cards max, gallery shows all */
    .recipe-section .recipe-grid { grid-template-columns: 1fr !important; }
    .recipe-section .recipe-grid .recipe-card:nth-child(n+3) { display: none !important; }
    .recipe-gallery-section .recipe-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }

    /* Section headers */
    .home-section-header h2, .bestsellers-header h2 { font-size: 18px; }
    .section-header h2 { font-size: 18px; }

    /* Footer */
    .footer-logos-left img { height: 38px; }
    .footer-logos-left img:nth-child(2) { height: 48px; }
    .footer-top-links a { font-size: 13px; }
    .footer-payments img, .footer-delivery img { max-width: 180px; }
    .footer-bottom-bar { padding: 14px 0; }
    .copyright-txt { font-size: 11px; }
    .bottom-legal-links a { font-size: 11px; }

    /* Floating cart: tighten at 425px, still full-width 2-row bar */
    .floating-cart-widget { padding: 11px 16px; gap: 10px; min-height: 52px; }
    .fc-icon { font-size: 20px; }
    .fc-items { font-size: 13px; }
    .fc-price-pill { font-size: 13px; }
    /* Keep delivery strip flush above cart bar */
    /* NOTE: body padding and delivery badge overrides removed — handled by 768px block */



    /* Page title */
    .page-title { font-size: 22px; margin-bottom: 20px; }
}

/* ── 375px — Mobile M ── */
@media (max-width: 375px) {
    .container { padding: 0 10px; }

    /* Header */
    .logo img { height: 34px; }
    .search-bar { height: 34px; }
    .search-bar input { font-size: 11px; padding: 0 6px; }
    .search-bar button { min-width: 34px; padding: 0 8px; }
    .header-right-actions { gap: 6px; }
    .icon-item { font-size: 17px; }

    /* Hero */
    .hero-slider .slide img { height: 175px; }
    .hero-title { font-size: 19px; }
    .hero-content-overlay { max-width: 68%; }

    /* Grids stay 2-col */
    .home-product-grid-6,
    .home-product-grid-4,
    .discount-product-grid,
    .bestsellers-grid,
    .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

    /* Discount box tighter */
    .discount-container-box { padding: 12px 8px; }
    .discount-title-area h2 { font-size: 15px; }

    /* Single product */
    .single-title { font-size: 20px; }
    .single-price { font-size: 18px; }

    /* Cart table */
    .cart-table { min-width: 380px; }
    .td-product-wrap img { width: 46px; height: 46px; }

    /* Partners grid: 2-col */
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Footer tighter */
    .footer-logos-left { gap: 10px; }
    .footer-logos-left img { height: 34px; }
    .footer-logos-left img:nth-child(2) { height: 44px; }
    .social-links-list a { font-size: 13px; gap: 8px; }
    .mobile-nav-drawer { width: 100%; max-width: 100%; }
}

/* ── 320px — Mobile S ── */
@media (max-width: 320px) {
    .container { padding: 0 8px; }

    /* Header: tightest */
    .logo img { height: 30px; }
    .search-bar { height: 32px; }
    .search-bar input { font-size: 10px; }
    .search-bar button { min-width: 30px; padding: 0 6px; }
    .icon-item { font-size: 16px; }
    .mobile-hamburger span { width: 20px; }

    /* Hero: minimal */
    .hero-slider .slide img { height: 155px; }
    .hero-title { font-size: 16px; }
    .hero-subtitle { display: none; }
    .hero-desc { display: none; }
    .btn-hero-order { padding: 7px 12px; font-size: 11px; }

    /* Grids: 2-col on tiny phone */
    .home-product-grid-6,
    .home-product-grid-4,
    .discount-product-grid,
    .bestsellers-grid,
    .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }

    .disc-card-img { height: 160px; margin-top: 15px; margin-bottom: 8px; }
    .main-price { font-size: 12px; }
    .product-title-new { font-size: 10px; }

    /* Cat items: 2-col */
    .category-item { flex: 1 1 calc(50% - 5px); }
    .cat-img-wrap { width: 44px; height: 44px; }
    .cat-name { font-size: 12px; }

    /* Single product */
    .single-title { font-size: 18px; }

    /* Contact cards: vertical */
    .contact-info-cards { flex-direction: column; }

    /* Partners: 2-col */
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Footer logos wrap */
    .footer-logos-left { flex-wrap: wrap; gap: 8px; }
    .footer-logos-left img { height: 30px; }
    .footer-logos-left img:nth-child(2) { height: 40px; }

    /* Cart bar: 320px — still full-width 2-row bar */
    .floating-cart-widget { padding: 10px 12px; gap: 8px; min-height: 50px; }
    .fc-icon { font-size: 18px; }
    .fc-items { font-size: 12px; }
    .fc-price-pill { font-size: 12px; padding: 3px 10px; }
    /* NOTE: body padding and delivery badge overrides removed — handled by 768px block */
}

/* ── 1440px — Large screens ── */
@media (min-width: 1440px) {
    .container { max-width: 1360px; }
    .home-product-grid-6 { grid-template-columns: repeat(6, 1fr); }
    .home-product-grid-5 { grid-template-columns: repeat(5, 1fr); }
    .home-product-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .hero-slider .slide img { height: 520px; }
    .hero-title { font-size: 64px; }
}

/* ── Touch-friendly interactive elements ── */
@media (max-width: 768px) {
    /* Minimum 44px tap targets */
    .btn-add-cart, .btn-single-add, .btn-primary-block,
    .btn-outline, .btn-hero-order,
    .btn-submit-contact, .btn-filter-price,
    .qty-btn, .single-qty-btn,
    .payment-radio { min-height: 44px; }

    .btn-see-more {
        font-size: 11px;
        padding: 4px 9px;
        min-height: unset;
    }

    .qty-btn { width: 38px; height: 44px; }
    .single-qty-btn { width: 48px; height: 48px; }

    input[type="text"], input[type="email"], input[type="number"],
    input[type="tel"], input[type="password"], select, textarea {
        font-size: 16px !important; /* prevent iOS auto-zoom */
        min-height: 44px;
    }
    select.form-input { height: 48px; }

    /* Make close/hamburger buttons easier to tap */
    .mobile-nav-close { padding: 10px; }
    .mobile-hamburger { padding: 10px 6px; }
}

/* ── Overflow-safe sections ── */
@media (max-width: 768px) {
    .header-cat-list, .categories-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cart-table-scroll-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Remove fixed widths that cause overflow */
    .recaptcha-mockup { width: 100%; box-sizing: border-box; }
    .bestsellers-left-banner { min-width: 0; }
    .home-whatsnew-ad { min-width: 0; }
}

/* ── Ensure grids never overflow on tiny screens ── */
@media (max-width: 359px) {
    .discount-product-grid,
    .home-product-grid-6,
    .home-product-grid-4,
    .shop-product-grid,
    .bestsellers-grid,
    .product-grid-6 { grid-template-columns: 1fr 1fr; gap: 4px; }

    .recipe-section .recipe-grid { grid-template-columns: 1fr !important; }
    .recipe-section .recipe-grid .recipe-card:nth-child(n+3) { display: none !important; }
    .recipe-gallery-section .recipe-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .partners-grid { grid-template-columns: 1fr; }
}
/* --- Shop Categories Mobile Dropdown --- */
.mobile-category-select-wrap {
    display: none;
}
@media (max-width: 991px) {
    .mobile-category-select-wrap {
        display: block !important;
        margin-bottom: 20px;
    }
    .mobile-category-select-wrap select {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #333;
        background-color: #fff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 12px auto;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        cursor: pointer;
    }
    .mobile-category-select-wrap select:focus {
        outline: none;
        border-color: #bc8e3e;
        box-shadow: 0 0 0 3px rgba(188, 142, 62, 0.2);
    }
    .desktop-category-list {
        display: none !important;
    }
    
    .shop-toolbar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .toolbar-right, .sort-dropdown {
        width: 100%;
    }
    .sort-dropdown {
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 12px auto;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        cursor: pointer;
    }
}

/* Hide mobile-only price by default */
.mobile-price {
    display: none;
}