/* =========================================================================
   DealzSg — Organo-inspired grocery storefront theme
   Layers on top of Bootstrap 5; defines brand palette, components, layout.
   ========================================================================= */

:root {
    --brand: #5cb338;
    --brand-dark: #4a9a26;
    --brand-soft: #eaf6e2;
    --brand-pale: #f3faec;

    --accent: #f58220;
    --accent-dark: #d36a0e;
    --accent-soft: #ffe9d3;
    --accent-pale: #fff5e8;

    --earth: #5d3522;
    --earth-dark: #422413;
    --earth-soft: #f5ece4;

    --danger: #e53935;
    --warning: #ff9800;

    --ink: #1f2937;
    --ink-light: #4b5563;
    --muted: #6b7280;
    --line: #ececec;
    --soft-bg: #fafafa;

    --shadow-sm: 0 2px 8px rgba(20, 30, 50, .05);
    --shadow-md: 0 10px 24px rgba(20, 30, 50, .08);
    --shadow-lg: 0 18px 40px rgba(20, 30, 50, .12);

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: auto; }
body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
    font-size: 15px;
}
a { color: var(--accent-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 .5em;
    line-height: 1.25;
}
img { max-width: 100%; height: auto; }
.muted { color: var(--muted); }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: #fff; }
.bg-soft  { background: var(--soft-bg); }
.bg-pale  { background: var(--brand-pale); }

/* ---------- Buttons ---------- */
.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 10px 22px;
    border: 1.5px solid transparent;
    font-size: 14px;
    letter-spacing: .2px;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-secondary {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}
.btn-secondary:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-outline {
    background: transparent;
    border-color: var(--brand);
    color: var(--brand);
}
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-warning {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-warning:hover { background: #e2a700; border-color: #e2a700; color: #fff; }
.btn-tiny { padding: 5px 12px; font-size: 12px; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-large { padding: 14px 30px; font-size: 15px; }
.btn-pill { border-radius: 999px; }

/* ---------- Top bar ---------- */
.top-bar {
    background: #fff;
    color: var(--ink-light);
    font-size: 12.5px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.top-bar a { color: var(--ink-light); }
.top-bar a:hover { color: var(--accent); }
.top-bar .top-bar-left i,
.top-bar .top-bar-right i { color: var(--accent); margin-right: 5px; }
.top-bar .divider {
    display: inline-block;
    margin: 0 12px;
    color: var(--line);
}

/* ---------- Header (3 zones) ---------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}
.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.site-header .brand .logo-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(92, 179, 56, .25);
}
.site-header .brand .brand-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 30px;
    color: var(--brand-dark);
    letter-spacing: -.5px;
    line-height: 1;
}
.site-header .brand .brand-text .accent { color: var(--accent); }
.site-header .brand .brand-text small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 6px;
    letter-spacing: .2px;
    text-transform: none;
}

/* Header search */
.header-search {
    display: flex;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 999px;
    overflow: hidden;
    height: 50px;
    max-width: 560px;
    margin: 0 auto;
}
.header-search input[type="search"] {
    flex: 1;
    border: 0;
    padding: 0 18px;
    font-size: 14px;
    outline: none;
    color: var(--ink);
    background: transparent;
}
.header-search button {
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 0 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.header-search button:hover { background: var(--accent-dark); }

/* Header right icons */
.header-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}
.header-icons .icon-link {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    font-weight: 500;
    font-size: 14px;
}
.header-icons .icon-link:hover { color: var(--accent); }
.header-icons .icon-link .ic-img {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .2s;
}
.header-icons .icon-link:hover .ic-img {
    background: var(--accent);
    color: #fff;
}
.header-icons .icon-link .ic-label {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.header-icons .icon-link .ic-label small { color: var(--muted); font-size: 11px; }
.cart-badge-count {
    position: absolute;
    top: -4px; left: 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ---------- Main nav ---------- */
.main-nav {
    background: var(--brand);
    color: #fff;
}
.main-nav .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.5vw, 24px);
    flex-wrap: nowrap; /* Prevent horizontal wrapping of categories, menu, and support info */
}
.main-nav a {
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 0.95vw, 14px); /* Fluid typography scales dynamically */
    padding: 14px 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s, border-color .15s;
    border-bottom: 2px solid transparent;
    opacity: .92;
    white-space: nowrap; /* Absolutely prevent links from wrapping internally */
}
.main-nav a:hover { opacity: 1; border-bottom-color: #fff; color: #fff; }
.main-nav .menu { 
    display: flex; 
    gap: clamp(10px, 1.2vw, 22px); /* Fluid spacing prevents overflow on small desktops */
    flex: 1; 
    flex-wrap: nowrap; /* Prevent menu links from wrapping into multiple rows */
    align-items: center;
    justify-content: center; /* Consistently center links in all languages */
}
.main-nav .nav-right { 
    display: flex; 
    gap: 18px; 
    font-size: 13px; 
    align-items: center;
    white-space: nowrap;
}
.main-nav .nav-right a { color: #fff; font-weight: 500; }
.main-nav .nav-right i { margin-right: 4px; color: #fff; }

/* Custom adjustments for longer locales like Tamil & Malay to guarantee perfect single-row fit */
.lang-ta .main-nav a,
.lang-ms .main-nav a {
    font-size: clamp(11.5px, 0.9vw, 13.5px);
    letter-spacing: -0.3px;
}
.lang-ta .main-nav .menu,
.lang-ms .main-nav .menu {
    gap: clamp(8px, 1vw, 16px);
}

/* Categories dropdown */
.cat-dropdown {
    position: relative;
    background: var(--brand-dark);
    padding: 14px 22px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background .2s;
}
.cat-dropdown:hover { background: var(--accent); }
.cat-dropdown > a, .cat-dropdown a:not(.cat-dropdown-menu a) { color: #fff !important; border-bottom: 0 !important; }
.cat-dropdown:hover .cat-dropdown-menu { display: block; }
.cat-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    min-width: 280px;
    z-index: 50;
    padding: 8px 0;
    box-shadow: var(--shadow-md);
}
.cat-dropdown-menu li { list-style: none; position: relative; }
.cat-dropdown-menu a {
    display: flex !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    color: var(--ink) !important;
    border-bottom: none !important;
    font-weight: 500 !important;
    align-items: center;
    justify-content: space-between;
}
.cat-dropdown-menu a:hover {
    background: var(--accent-pale);
    color: var(--accent) !important;
    border-bottom: none !important;
}
.cat-dropdown-menu .submenu {
    display: none;
    position: absolute;
    top: 0; left: 100%;
    background: #fff;
    min-width: 240px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 8px 0;
}
.cat-dropdown-menu li:hover > .submenu { display: block; }
.cat-dropdown-menu ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, #f3faec 0%, #eaf6e2 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    right: -120px; top: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(92, 179, 56, .18), transparent 70%);
    border-radius: 50%;
    z-index: 1;
}
.hero::after {
    content: "";
    position: absolute;
    left: -80px; bottom: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(245, 130, 32, .15), transparent 70%);
    border-radius: 50%;
    z-index: 1;
}
.hero-inner { position: relative; z-index: 2; }
.hero .eyebrow {
    display: inline-block;
    background: rgba(245, 130, 32, .15);
    color: var(--accent-dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 18px;
}
.hero .eyebrow i { color: var(--accent); margin-right: 4px; }
.hero h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 18px;
    color: var(--ink);
    letter-spacing: -1px;
}
.hero h1 .accent { color: var(--accent); }
.hero h1 .highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(245,130,32,.35) 60%);
    padding: 0 4px;
}
.hero p.lead {
    font-size: 17px;
    color: var(--ink-light);
    max-width: 540px;
    margin: 0 0 28px;
}
.hero-cta .btn + .btn { margin-left: 10px; }
.hero-perks {
    display: flex; gap: 28px; margin-top: 26px;
    flex-wrap: wrap;
}
.hero-perks .perk {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-light); font-size: 14px;
    font-weight: 500;
}
.hero-perks .perk i {
    color: var(--accent);
    background: var(--accent-soft);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.hero-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-image-circle {
    width: 420px;
    height: 420px;
    max-width: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--brand-soft) 70%);
    box-shadow: 0 40px 80px rgba(20,50,25,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 180px;
    position: relative;
    overflow: hidden;
}
.hero-image-circle::before {
    content: "";
    position: absolute; inset: 20px;
    border: 2px dashed rgba(92,179,56,.3);
    border-radius: 50%;
}
.hero-discount-badge {
    position: absolute;
    top: 20px; right: 20px;
    width: 100px; height: 100px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 14px 30px rgba(253,185,0,.4);
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    transform: rotate(-12deg);
    animation: pulse 2s ease-in-out infinite;
}
.hero-discount-badge .pct { font-size: 28px; font-weight: 800; }
.hero-discount-badge .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-top: 4px; }
@keyframes pulse {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50%      { transform: rotate(-12deg) scale(1.07); }
}
.hero-leaf {
    position: absolute;
    color: var(--brand);
    opacity: .25;
    animation: float 4s ease-in-out infinite;
}
.hero-leaf-1 { top: 10%; left: 8%; font-size: 40px; }
.hero-leaf-2 { bottom: 12%; right: 10%; font-size: 50px; animation-delay: 1s; }
.hero-leaf-3 { top: 38%; left: 50%; font-size: 30px; animation-delay: 2s; }
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-15px) rotate(8deg); }
}

/* ---------- Service strip ---------- */
.services-strip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: -40px auto 0;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 3;
    padding: 18px 8px;
}
.service-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
}
.service-item .icon {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.service-item h4 {
    font-size: 14px;
    margin: 0 0 2px;
    font-weight: 700;
}
.service-item p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* ---------- Section headers ---------- */
.section {
    padding: 70px 0;
}
.section--soft { background: var(--soft-bg); }
.section-head {
    text-align: center;
    margin-bottom: 40px;
}
.section-head .eyebrow {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    margin-bottom: 8px;
}
.section-head h2 {
    font-size: 36px;
    margin: 0;
}
.section-head p {
    color: var(--muted);
    max-width: 540px;
    margin: 12px auto 0;
}

/* ---------- Category circles ---------- */
.cat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    display: block;
    transition: all .25s ease;
    height: 100%;
}
.cat-card:hover {
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    color: var(--brand-dark);
}
.cat-card .cat-icon {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 14px;
    transition: all .25s;
}
.cat-card:hover .cat-icon {
    background: var(--brand);
    color: #fff;
}
.cat-card .cat-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 4px;
}
.cat-card .cat-count {
    font-size: 12px;
    color: var(--muted);
}

/* ---------- Product card ---------- */
.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .25s;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.product-card .product-thumb {
    position: relative;
    background: var(--brand-pale);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card .product-thumb img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform .35s ease;
}
.product-card:hover .product-thumb img { transform: scale(1.08); }
.product-card .product-thumb-fallback {
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    color: var(--brand);
    font-weight: 800;
}
.product-card .badges {
    position: absolute;
    top: 12px; left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.product-card .badge-sale {
    background: var(--danger);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.product-card .badge-new {
    background: var(--brand);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.product-card .badge-out {
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.product-card .quick-actions {
    position: absolute;
    top: 12px; right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(10px);
    transition: all .25s;
}
.product-card:hover .quick-actions {
    opacity: 1;
    transform: translateX(0);
}
.product-card .quick-actions .qa-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.product-card .quick-actions .qa-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.product-card .product-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.product-card .product-cat {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.product-card .product-name {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    min-height: 42px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card .product-name a { color: var(--ink); }
.product-card .product-name a:hover { color: var(--accent); }
.product-card .product-unit { font-size: 12px; color: var(--muted); }
.product-card .product-price {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 4px;
}
.product-card .product-price del {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-left: 6px;
}
.product-card .add-bar {
    margin-top: auto;
    padding-top: 12px;
}
.product-card .add-cart-btn {
    background: var(--accent-pale);
    color: var(--accent-dark);
    border: 1px solid transparent;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.product-card .add-cart-btn:hover {
    background: var(--accent);
    color: #fff;
}
.product-card .add-cart-btn--disabled {
    background: #e5e7eb;
    color: var(--muted);
    cursor: not-allowed;
}
.product-card .add-cart-btn--disabled:hover {
    background: #e5e7eb;
    color: var(--muted);
}

/* ---------- Banner / promo blocks ---------- */
.promo-banner {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}
.promo-banner h3 { color: #fff; font-size: 26px; }
.promo-banner p { color: rgba(255,255,255,.85); margin: 0 0 20px; }

/* ---------- Page hero / breadcrumb ---------- */
.page-hero {
    background: linear-gradient(120deg, var(--brand-pale), var(--brand-soft));
    padding: 50px 0;
    text-align: center;
}
.page-hero h1 {
    font-size: 36px;
    margin: 0 0 8px;
    color: var(--ink);
}
.breadcrumb-row {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    font-size: 13px;
}
.breadcrumb-row li { color: var(--muted); }
.breadcrumb-row li a { color: var(--brand-dark); }
.breadcrumb-row li + li::before { content: "›"; color: var(--muted); margin-right: 8px; }
.breadcrumb-row .active { color: var(--ink); font-weight: 600; }

/* ---------- Shop layout (sidebar + grid) ---------- */
.shop-sidebar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
}
.shop-sidebar h4 {
    font-size: 16px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.shop-sidebar .cat-tree { list-style: none; padding: 0; margin: 0; }
.shop-sidebar .cat-tree li { margin: 0; }
.shop-sidebar .cat-tree a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    color: var(--ink);
    font-size: 14px;
    border-bottom: 1px dashed var(--line);
}
.shop-sidebar .cat-tree a:hover { color: var(--accent); }
.shop-sidebar .cat-tree a.active { color: var(--accent); font-weight: 600; }
.shop-sidebar .cat-tree .sub { padding-left: 14px; }
.shop-sidebar .cat-count {
    background: var(--brand-pale);
    color: var(--brand-dark);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.category-select:hover {
    border-color: var(--brand) !important;
}
.category-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(92, 179, 56, 0.15) !important;
}

/* ---------- Product detail ---------- */
.product-detail {
    background: #fff;
    border-radius: var(--radius);
    padding: 30px;
    border: 1px solid var(--line);
}
.product-detail .main-image {
    background: var(--brand-pale);
    border-radius: var(--radius);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.product-detail .main-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-detail .main-image .placeholder {
    font-family: 'Poppins', sans-serif;
    font-size: 100px;
    color: var(--brand);
    font-weight: 800;
}
.product-detail h1 { font-size: 32px; margin: 0 0 10px; }
.product-detail .product-cat-link {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--brand);
    font-weight: 700;
    font-size: 12px;
}
.product-detail .price-detail {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--brand);
    margin: 14px 0;
}
.product-detail .price-detail del {
    color: var(--muted);
    font-size: 18px;
    font-weight: 500;
    margin-left: 10px;
}
.product-detail .price-detail .discount-tag {
    background: var(--danger);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
}
.product-detail .stock-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-pale);
    color: var(--brand-dark);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.product-detail .stock-row.out {
    background: rgba(229,57,53,.1);
    color: var(--danger);
}
.product-detail .short-desc {
    color: var(--ink-light);
    margin: 18px 0 22px;
    line-height: 1.7;
}
.product-detail .qty-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin: 20px 0;
}
.product-detail .qty-input {
    width: 110px;
    height: 50px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.product-detail .qty-form .btn { height: 50px; padding: 0 28px; }
.product-detail .meta-row {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
}
.product-detail .meta-row strong { color: var(--ink); margin-right: 6px; }

/* ---------- Cart table ---------- */
.cart-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td {
    padding: 18px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 14px;
}
.cart-table th {
    background: var(--soft-bg);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-light);
    font-weight: 600;
}
.cart-table tr:last-child td { border-bottom: none; }
.cart-thumb {
    width: 64px; height: 64px;
    border-radius: var(--radius-sm);
    background: var(--brand-pale);
    object-fit: contain;
    padding: 4px;
}
.cart-product { display: flex; align-items: center; gap: 14px; }
.cart-product-name { font-family: 'Poppins', sans-serif; font-weight: 600; }
.cart-qty-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.cart-qty-form input {
    width: 70px; height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 14px;
}
.btn-link {
    background: transparent;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}
.btn-link:hover { background: rgba(229,57,53,.08); }

.cart-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 20px;
}
.cart-summary h4 { margin: 0 0 16px; font-size: 18px; }
.cart-summary .sum-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--ink-light);
    font-size: 14px;
}
.cart-summary .sum-row.grand {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 8px;
    color: var(--ink);
    font-weight: 700;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
}
.cart-summary .sum-row.grand .v { color: var(--accent); }

/* ---------- Forms ---------- */
fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 0 0 18px;
    background: #fff;
}
legend {
    padding: 0 8px;
    color: var(--brand);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row-inline { flex-direction: row; align-items: center; gap: 8px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 576px) { .form-grid-2 { grid-template-columns: 1fr; } }
label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.form-control, .form-select {
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    width: 100%;
    background: #fff;
    color: var(--ink);
    transition: border .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(92,179,56,.15);
}
.form-error {
    color: var(--danger);
    font-size: 12.5px;
}

/* ---------- Flash messages ---------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    margin-bottom: 10px;
    font-size: 14px;
}
.alert-success { background: var(--brand-pale); border-color: var(--brand); color: var(--brand-dark); }
.alert-error,
.alert-danger  { background: rgba(229,57,53,.08); border-color: var(--danger); color: var(--danger); }
.alert-info    { background: rgba(33,150,243,.08); border-color: #1e88e5; color: #1565c0; }
.alert-warning { background: rgba(255,152,0,.1); border-color: var(--warning); color: #b76d00; }

/* ---------- Pagination ---------- */
.pagination-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 32px 0 0;
}
.pagination-row a, .pagination-row span {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
}
.pagination-row a:hover { border-color: var(--accent); color: var(--accent); }
.pagination-row .active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Newsletter ---------- */
.newsletter {
    background: linear-gradient(135deg, var(--accent-pale) 0%, var(--accent-soft) 100%);
    color: var(--ink);
    padding: 60px 0;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.newsletter::before {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(245,130,32,.18), transparent 70%);
    border-radius: 50%;
}
.newsletter::after {
    content: "";
    position: absolute;
    left: -60px; bottom: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(92,179,56,.15), transparent 70%);
    border-radius: 50%;
}
.newsletter .container { position: relative; z-index: 2; }
.newsletter .eyebrow {
    display: inline-block;
    background: rgba(245,130,32,.15);
    color: var(--accent-dark);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 14px;
}
.newsletter h3 { color: var(--ink); font-size: 32px; margin: 0 0 10px; }
.newsletter p { color: var(--ink-light); margin: 0 0 26px; font-size: 15px; }
.newsletter form {
    max-width: 540px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: var(--shadow-md);
}
.newsletter input[type="email"] {
    flex: 1;
    border: 0;
    padding: 12px 22px;
    border-radius: 999px;
    outline: none;
    font-size: 14px;
    color: var(--ink);
}
.newsletter button {
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0 28px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    font-family: 'Poppins', sans-serif;
}
.newsletter button:hover { background: var(--accent-dark); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--soft-bg);
    color: var(--ink-light);
    padding: 60px 0 0;
    border-top: 1px solid var(--line);
}
.site-footer h5 {
    color: var(--ink);
    font-size: 16px;
    margin: 0 0 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}
.site-footer h5::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 36px; height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin: 8px 0; }
.site-footer ul a {
    color: var(--ink-light);
    font-size: 14px;
    transition: color .2s, padding .2s;
}
.site-footer ul a:hover { color: var(--accent); padding-left: 4px; }
.site-footer .brand .brand-text { color: var(--brand-dark); }
.site-footer .brand .brand-text small { color: var(--muted); }
.site-footer .about-blurb { color: var(--ink-light); font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.site-footer .contact-row { font-size: 14px; margin: 8px 0; color: var(--ink-light); }
.site-footer .contact-row i { color: var(--accent); margin-right: 8px; }
.site-footer .socials { display: flex; gap: 10px; margin-top: 12px; }
.site-footer .socials a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.site-footer .socials a:hover { background: var(--accent); color: #fff; }
.copyright-bar {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding: 20px 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}
.copyright-bar i { color: var(--accent); }

/* ---------- Error pages ---------- */
.error-page {
    padding: 100px 20px;
    text-align: center;
}
.error-page h1 {
    font-size: 130px;
    color: var(--accent);
    margin: 0;
    font-weight: 800;
    line-height: 1;
}
.error-page h2 { font-size: 28px; margin: 12px 0 18px; }
.error-page p { color: var(--muted); margin-bottom: 24px; }

/* ---------- Static page ---------- */
.static-page {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px;
    line-height: 1.8;
}
.static-page h2, .static-page h3 { color: var(--ink); margin-top: 24px; }

/* ---------- Order complete ---------- */
.order-success {
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 48px 28px;
    max-width: 720px;
    margin: 0 auto;
}
.order-success .check-icon {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-bottom: 16px;
}
.order-success h1 { font-size: 32px; }
.order-success .order-number-tag {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    padding: 6px 18px;
    border-radius: 999px;
    font-weight: 700;
    margin: 8px 0 18px;
}
.order-summary-card {
    background: var(--soft-bg);
    border-radius: var(--radius);
    padding: 22px;
    margin: 20px 0;
    text-align: left;
}
.order-summary-card ul { list-style: none; padding: 0; margin: 0 0 14px; }
.order-summary-card li {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}

/* ---------- Rating stars (in product card / detail) ---------- */
.rating {
    color: #fdb900;
    font-size: 13px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rating .count {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0;
}

/* ---------- Colored category circles ---------- */
.cat-card.tone-1 .cat-icon { background: #fff3e0; color: #ef6c00; }
.cat-card.tone-1:hover .cat-icon { background: #ef6c00; color: #fff; }
.cat-card.tone-2 .cat-icon { background: #e3f2fd; color: #1565c0; }
.cat-card.tone-2:hover .cat-icon { background: #1565c0; color: #fff; }
.cat-card.tone-3 .cat-icon { background: #fce4ec; color: #c2185b; }
.cat-card.tone-3:hover .cat-icon { background: #c2185b; color: #fff; }
.cat-card.tone-4 .cat-icon { background: #f3e5f5; color: #7b1fa2; }
.cat-card.tone-4:hover .cat-icon { background: #7b1fa2; color: #fff; }
.cat-card.tone-5 .cat-icon { background: #e0f7fa; color: #00838f; }
.cat-card.tone-5:hover .cat-icon { background: #00838f; color: #fff; }
.cat-card.tone-6 .cat-icon { background: #fff8e1; color: #f9a825; }
.cat-card.tone-6:hover .cat-icon { background: #f9a825; color: #fff; }

/* ---------- Product tabs ---------- */
.product-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.product-tab {
    background: transparent;
    border: 0;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink-light);
    cursor: pointer;
    transition: all .2s;
    border: 1.5px solid var(--line);
    background: #fff;
}
.product-tab:hover { color: var(--accent); border-color: var(--accent); }
.product-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Deal of the day ---------- */
.deal-section {
    background: linear-gradient(135deg, var(--accent-pale) 0%, var(--accent-soft) 100%);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
}
.deal-section::before {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(245,130,32,.22), transparent 70%);
    border-radius: 50%;
}
.deal-section::after {
    content: "";
    position: absolute;
    left: -60px; bottom: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(92,179,56,.15), transparent 70%);
    border-radius: 50%;
}
.deal-section .deal-inner { position: relative; z-index: 2; }
.deal-section .eyebrow {
    background: rgba(245,130,32,.18);
    color: var(--accent-dark);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 14px;
}
.deal-section .eyebrow i { margin-right: 4px; }
.deal-section h2 {
    color: var(--ink);
    font-size: 36px;
    margin: 0 0 12px;
}
.deal-section p {
    color: var(--ink-light);
    margin: 0 0 22px;
    font-size: 15px;
    max-width: 460px;
}
.countdown {
    display: flex;
    gap: 12px;
    margin: 24px 0;
}
.countdown-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    min-width: 70px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    box-shadow: var(--shadow-sm);
}
.countdown-box .num {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.countdown-box .lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 1.5px;
    margin-top: 4px;
}

/* ---------- Banner cards (3-up) ---------- */
.banner-card {
    border-radius: var(--radius);
    overflow: hidden;
    padding: 36px 28px;
    color: #fff;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    transition: transform .25s ease;
}
.banner-card:hover { transform: translateY(-4px); }
.banner-card .eyebrow {
    background: rgba(255,255,255,.18);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: inline-block;
    align-self: flex-start;
}
.banner-card h3 {
    color: #fff;
    font-size: 24px;
    margin: 14px 0 6px;
    line-height: 1.15;
}
.banner-card p { color: rgba(255,255,255,.85); margin: 0 0 16px; font-size: 14px; }
.banner-card .banner-cta {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
}
.banner-card .banner-cta:hover { color: #fff; gap: 10px; }
.banner-card .banner-icon {
    position: absolute;
    right: 20px; top: 20px;
    font-size: 80px;
    opacity: .12;
    color: #fff;
}
.banner-card.tone-green { background: linear-gradient(135deg, #5cb338 0%, #4a9a26 100%); }
.banner-card.tone-orange { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); }
.banner-card.tone-light {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
}
.banner-card.tone-light h3 { color: var(--ink); }
.banner-card.tone-light p { color: var(--ink-light); }
.banner-card.tone-light .eyebrow {
    background: var(--accent-soft);
    color: var(--accent-dark);
}
.banner-card.tone-light .banner-cta { color: var(--accent); }
.banner-card.tone-light .banner-cta:hover { color: var(--accent-dark); }
.banner-card.tone-light .banner-icon { color: var(--accent); opacity: .15; }

/* ---------- Blog cards ---------- */
.blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: var(--brand);
}
.blog-card .blog-image {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--brand-pale) 0%, var(--brand-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 60px;
    position: relative;
}
.blog-card .blog-date-tag {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--brand);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
.blog-card .blog-date-tag .day { display: block; font-size: 18px; }
.blog-card .blog-date-tag .month { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.blog-card .blog-body { padding: 20px; flex: 1; }
.blog-card .blog-meta {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 8px;
}
.blog-card .blog-meta i { color: var(--accent); margin-right: 4px; }
.blog-card .blog-meta + .blog-meta { margin-left: 14px; }
.blog-card h4 {
    font-size: 17px;
    margin: 0 0 8px;
    line-height: 1.35;
}
.blog-card h4 a { color: var(--ink); }
.blog-card h4 a:hover { color: var(--accent); }
.blog-card p { color: var(--ink-light); font-size: 14px; margin: 0; }
.blog-card .blog-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-dark);
    font-weight: 600;
    font-size: 13px;
    margin-top: 12px;
}

/* ---------- Brand strip ---------- */
.brand-strip {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 32px 0;
}
.brand-strip .row { align-items: center; }
.brand-logo {
    text-align: center;
    color: var(--muted);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    opacity: .55;
    transition: opacity .2s;
    letter-spacing: -0.5px;
}
.brand-logo:hover { opacity: 1; color: var(--accent); }
.brand-logo i { font-size: 22px; margin-right: 6px; vertical-align: middle; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .hero h1 { font-size: 36px; }
    .hero { padding: 50px 0; }
    .section { padding: 50px 0; }
    .section-head h2 { font-size: 28px; }
    .services-strip { margin-top: 0; }
    .header-search { margin: 16px 0; }
    .header-icons { justify-content: flex-end; } /* Keep icons aligned to the right on tablet to avoid search overlap */
    .main-nav .nav-inner {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 6px 0;
        justify-content: center;
    }
    .main-nav .menu {
        gap: clamp(10px, 1.8vw, 16px);
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
        overflow-x: auto; /* Allow horizontal swiping/scrolling on mobile to keep a neat single line */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide standard scrollbar in Firefox */
    }
    .main-nav .menu::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Chrome/Safari */
    }
    .main-nav a {
        font-size: clamp(12px, 1.6vw, 13.5px);
        padding: 10px 4px;
    }
    .lang-ta .main-nav a,
    .lang-ms .main-nav a {
        font-size: clamp(11px, 1.4vw, 12.5px);
        letter-spacing: -0.2px;
    }
    .lang-ta .main-nav .menu,
    .lang-ms .main-nav .menu {
        gap: clamp(6px, 1.2vw, 12px);
    }
}
@media (max-width: 767px) {
    .header-icons { justify-content: flex-end; gap: 12px; } /* Align right and reduce gap on mobile to fit side-by-side with logo */
}
@media (max-width: 576px) {
    .hero h1 { font-size: 28px; }
    .product-detail { padding: 20px; }
    .static-page { padding: 22px; }
    .product-detail h1 { font-size: 22px; }
}