/* ============================================================
   Storefront styles
   ============================================================ */
:root {
    --primary: #0984e3;
    --primary-dark: #0770bf;
    --text: #2d3436;
    --muted: #7b878e;
    --border: #e2e6e9;
    --bg: #ffffff;
    --bg-soft: #f6f8fa;
    --danger: #c0392b;
    --success: #1e8449;
    --radius: 10px;
    --shadow: 0 4px 14px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }
html { max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
/* iOS Safari zooms into any focused form control whose font-size is under 16px,
   and the zoom pushes 100%-width fields past the screen edge. Force every form
   control to a minimum 16px so focus never triggers the zoom. Kept global (16px
   is fine on desktop too) and !important so no later/base rule can shrink it. */
input, select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], input[type="search"] {
    font-size: 16px !important;
    max-width: 100%;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page { padding-top: 28px; padding-bottom: 60px; min-height: 50vh; }
.muted { color: var(--muted); font-size: .92em; }
.green { color: var(--success); }

/* ---------- header ---------- */
.site-header {
    background: linear-gradient(135deg, #0a3d62, #0984e3);
    color: #fff;
    border-bottom: 3px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 14px rgba(9, 132, 227, .25);
    position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 28px; padding: 14px 20px; }
.brand { font-size: 1.35rem; font-weight: 800; color: #fff; }
.brand:hover { color: #fff; opacity: .9; }
.main-nav { display: flex; gap: 18px; flex: 1; }
.main-nav a { color: #fff; font-weight: 500; opacity: .92; }
.main-nav a:hover { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.header-actions { display: flex; gap: 14px; align-items: center; font-size: .92em; }
.header-actions a { color: #fff; }
.header-actions a:hover { opacity: .85; }
.cart-link { font-weight: 600; position: relative; }
.cart-link .badge { background: #fff; color: var(--primary); font-weight: 700; }

/* ---------- alerts ---------- */
.alert { padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: .95rem; }
.alert-success { background: #eafaf1; color: #1a6b34; border: 1px solid #c3e6cb; border-left: 4px solid #2ecc71; }
.alert-error, .alert-danger { border-left: 4px solid var(--danger); background: #fdecea; color: #7a241d; }
.alert-error, .alert-danger { border-left-color: var(--danger); }
.alert-info { background: #e8f1fd; color: #1c4e7a; border-left: 4px solid var(--primary); }

/* ---------- buttons ---------- */
.btn {
    display: inline-block; padding: 10px 18px; border-radius: 8px;
    border: 1px solid transparent; cursor: pointer; font-size: .95rem;
    background: transparent; color: inherit; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { color: var(--primary); }
.btn-ghost:hover { color: var(--primary-dark); }
.btn-link { color: var(--primary); background: none; border: none; padding: 0; cursor: pointer; }
.btn-link:hover { color: var(--primary-dark); }
.btn-block { display: block; width: 100%; }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 6px; }
.danger { color: var(--danger); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- hero ---------- */
.hero {
    background: linear-gradient(135deg, #0a3d62, #0984e3);
    color: #fff; text-align: center; padding: 72px 20px; margin: 0 -20px 0;
    position: relative; overflow: hidden;
}
.hero h1 { font-size: 2.6rem; margin: 0 0 8px; }
.hero p { font-size: 1.15rem; opacity: .9; margin: 0 0 24px; }
.hero .btn-primary { background: #fff; color: var(--primary); font-weight: 700; }
.hero .btn-primary:hover { background: #f0f6ff; color: var(--primary); }

/* ---------- sections ---------- */
.section { margin: 42px 0; }
.section-title { font-size: 1.4rem; margin: 0 0 20px; }
.page-title { font-size: 1.8rem; margin: 0 0 6px; }
.page-heading { margin-bottom: 20px; }
.shop-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.shop-search { display: flex; gap: 10px; align-items: center; }
.shop-search input[type=text] { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; max-width: 240px; }
.shop-search input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(9,132,227,.15); }
.live-search-hint { margin: -10px 0 16px; }
.search-results.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.empty-state { text-align: center; padding: 90px 0; }
.empty-state h1 { font-size: 2rem; }

/* ---------- cards / grids ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.category-card {
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column; text-align: center;
}
.category-card img { height: 150px; object-fit: cover; width: 100%; }
.category-card span { padding: 12px; font-weight: 600; color: var(--text); }
.category-img-placeholder { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); }

.price-sale { color: var(--success); }
.price { font-weight: 700; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; line-height: 1.35; white-space: nowrap; background: #eaf3fb; color: #1c4a7a; }
.badge-low { background: #fdf3e3; color: #a3690d; }
.badge-out { background: #fdeaec; color: #a11d29; }
.badge-alt { background: #efe7fd; color: #5b2a9e; }

/* ---------- shop layout ---------- */
.shop-layout, .shopping-grid {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}
.shop-content { min-width: 0; }
.shop-sidebar {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    position: sticky;
    top: 84px;
}
.shop-sidebar h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sidebar-list { list-style: none; padding: 0; margin: 0 0 20px; }
.sidebar-list li { border-bottom: 1px solid var(--border); }
.sidebar-list a { display: block; padding: 9px 2px; color: var(--text); }
.sidebar-list li.active a { color: var(--primary); font-weight: 700; }
.sidebar-list li.active { background: #eaf3fb; border-left: 3px solid var(--primary); padding-left: 8px; border-radius: 6px; }
.pagination { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.pagination a { padding: 7px 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- product single ---------- */
.product-single { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.gallery-main { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #ffffff; }
.gallery-main img { width: 100%; height: 460px; object-fit: contain; }
.product-order h1 { font-size: 1.5rem; line-height: 1.25; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.gallery-thumbs .thumb { width: 70px; height: 70px; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; padding: 0; background: #fff; }
.gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.rating-stars { color: #f39c12; letter-spacing: 2px; }
.product-price.big { font-size: 3rem; margin: 14px 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.product-price.big .price,
.product-price.big .price-sale { font-size: 3rem !important; }
.product-price.big .price-original { font-size: 1.6rem; }
.product-single + .section { margin-top: 16px; padding-top: 8px; }
.product-short { color: var(--muted); }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field input[type=tel], .field input[type=search],
.field select, .field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; background: #fff; color: var(--text);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); }
.field.inline { display: flex; align-items: center; gap: 12px; }
.field.inline input[type=number] { width: 80px; }
.field .check { font-weight: 400; }
.row { display: flex; gap: 14px; }
.row .col-6 { flex: 1 1 50%; }
.row .col-4 { flex: 1 1 33.333%; }
.row .col-5 { flex: 1 1 41.666%; }
.row .col-3 { flex: 1 1 25%; }

/* ---------- reviews ---------- */
.review { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.review-stars { color: #f5a12e; }
.review-form, .auth-form { max-width: 560px; margin-top: 20px; }
.rich { max-width: 760px; }
.rich p, .rich li { color: #444; }

/* ---------- cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; }
.cart-item { display: flex; gap: 16px; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.cart-img img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; }
.cart-info { flex: 1; }
.cart-info h3 { margin: 0 0 4px; font-size: 1rem; }
.cart-row { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.cart-row input { width: 80px; }
.cart-line-total { font-weight: 700; }
.cart-summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: sticky; top: 84px; }
.summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.summary-line > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.summary-line > span:last-child { flex: 1 1 auto; text-align: right; min-width: 0; word-break: break-word; }
.summary-line.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; font-size: 1.15rem; font-weight: 700; }
.summary-box { background: var(--bg-soft); border-radius: 8px; padding: 14px; margin-top: 10px; }
.coupon { display: flex; gap: 8px; margin: 12px 0; }
.coupon input { flex: 1; padding: 9px; border: 1px solid var(--border); border-radius: 8px; }

/* ---------- checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 36px; align-items: start; }
.checkout-layout > * { min-width: 0; }
.checkout-summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: sticky; top: 84px; }
.payment-option { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.payment-option input { margin-top: 0; }
.pay-icon-wrap { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); flex: 0 0 auto; }
.pay-icon { display: block; }
.pay-label { font-weight: 500; }

/* ---------- tables & misc ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table th { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.table tfoot td { border-top: 2px solid var(--border); font-weight: 600; }
.table-compact th, .table-compact td { padding: 7px 10px; font-size: .92rem; }
.total-row td { font-size: 1.1rem; }
.notice { border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 8px; padding: 16px; margin: 20px 0; }
.notice.success { border-left-color: var(--success); }
.notice pre { background: var(--bg-soft); padding: 12px; border-radius: 6px; }
pre { white-space: pre-wrap; }

/* ---------- account ---------- */
.account-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: start; }
.account-nav { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 0; }
.account-nav a { display: block; padding: 10px 18px; color: var(--text); }
.account-nav a.active { background: var(--bg-soft); color: var(--primary); font-weight: 600; border-left: 3px solid var(--primary); }
.account-nav a.danger { color: var(--danger); }
.account-user { padding: 6px 18px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.stat-cards { display: flex; gap: 16px; margin: 16px 0 30px; }
.stat-card { flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; }
.stat-card strong { display: block; font-size: 1.9rem; }
.address-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.address-card .btn, .address-card .inline-form { margin-top: 4px; }
.address-card .btn { margin-right: 6px; vertical-align: middle; }
.inline-form { display: inline; }

/* ---------- auth ---------- */
.auth { max-width: 400px; margin: 0 auto; }
.empty-state { text-align: center; padding: 80px 0; }
.empty-state h1 { font-size: 2.4rem; margin: 0 0 6px; }
.success-box { background: #e8f8f0; border: 1px solid #b7e4c7; padding: 26px; border-radius: var(--radius); text-align: center; margin-bottom: 24px; }

/* ---------- footer ---------- */
.site-footer {
    background: #0b1c2e;
    color: #fff;
    margin-top: 40px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 44px 20px 32px;
}
.footer-col h4 { margin: 0 0 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.footer-col p { margin: 5px 0; color: rgba(255,255,255,.72); font-size: .9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col a { color: rgba(255,255,255,.8); font-size: .9rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 14px 0; }
.footer-bottom p { margin: 0; color: rgba(255,255,255,.5); font-size: .84em; }

/* ---------- responsive ---------- */
/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
    display: none; background: transparent; border: 0; color: #fff; cursor: pointer;
    padding: 4px; line-height: 0; border-radius: 6px;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); }

@media (max-width: 900px) {
    .product-single, .cart-layout, .checkout-layout, .account-layout { grid-template-columns: 1fr; }
    .header-inner { flex-wrap: nowrap; gap: 10px; position: relative; align-items: center; padding: 12px 16px; min-height: 56px; }
    /* English (LTR): [hamburger] [globe] [currency] ........... [logo] */
    .nav-toggle { display: inline-flex; order: 0; flex: 0 0 auto; }
    .header-actions {
        order: 1; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
        margin: 0; margin-inline-end: auto;
    }
    .header-switchers { display: flex; align-items: center; gap: 8px; }
    /* The bottom tab bar already has Cart & Account, so hide the top-bar
       cart, account menu and auth links on mobile to keep the header tidy. */
    .cart-wrap,
    .header-actions > a,
    .header-actions .account-menu { display: none; }
    /* Logo pinned to the far side (opposite the hamburger) */
    .brand { order: 2; flex: 0 0 auto; margin: 0; }
    /* Nav dropdown panel opens under the hamburger (left edge) */
    .main-nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: auto; z-index: 1000;
        flex-direction: column; gap: 0; flex: none; width: min(78vw, 300px);
        background: #0a3d62;
        border-radius: 0 0 12px 0;
        box-shadow: 0 14px 30px rgba(0,0,0,.35);
        overflow: hidden; margin: 0;
        max-height: calc(100vh - 100%); overflow-y: auto;
        text-align: left;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a {
        padding: 15px 18px; width: 100%; opacity: 1; color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    /* The slide-out menu has its OWN dark background (#0a3d62), so its links
       must stay light even when the header bar is a light colour. The header's
       luminance-based inline style sets ".site-header .main-nav a{color:#1a1a1a
       !important}" for light headers, which would otherwise make these dark and
       unreadable — override it here, scoped to the open mobile menu. */
    .site-header .main-nav.is-open a,
    .site-header .main-nav.is-open .mobile-account-links a,
    .main-nav.is-open a.admin-pill {
        color: #fff !important;
    }
    .site-header .main-nav.is-open svg { color: #fff !important; fill: currentColor !important; stroke: currentColor !important; }
    .main-nav a:last-child { border-bottom: 0; }
    .main-nav a:hover { text-decoration: none; background: rgba(255,255,255,.10); }
    .mobile-account-links { display: contents; }
    .mobile-account-links a { border-top: 1px solid rgba(255,255,255,.18); }
    .gallery-main img { height: 320px; }
}
@media (max-width: 560px) {
    .shop-layout, .shopping-grid { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; }
    /* Brand/contact column spans the full width; the three menu columns
       (Shop / Account / Info) share one row of three equal columns. */
    .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .footer-col:first-child { grid-column: 1 / -1; }
    .footer-col h4 { font-size: .72rem; letter-spacing: .04em; }
    .footer-col a, .footer-col li { font-size: .8rem; }
}
/* ---- Brand logo ------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 52px; width: auto; display: block; }

/* ---- Floating WhatsApp button ---------------------------------------- */
.whatsapp-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover { color: #fff; transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 24px rgba(0,0,0,.32); }
.whatsapp-float svg { display: block; }
@media (max-width: 768px) {
    /* Sit above the bottom tab bar */
    .whatsapp-float { right: 16px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
}

/* ---- Currency switcher ----------------------------------------------- */
.currency-switcher { display: inline-block; margin: 0; }
.currency-switcher select {
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px; padding: 5px 8px; font-size: .9rem; cursor: pointer;
}
.currency-switcher select option { color: #222; }
.currency-note { font-size: .82rem; color: #7b878e; margin-top: 6px; }

/* ---- Checkout free-shipping note ------------------------------------- */
.ship-free-note {
    display: none; margin-top: 12px; padding: 10px 14px; border-radius: 8px;
    background: #e6f5ec; color: #16783b; font-weight: 600; font-size: .92rem; text-align: center;
}
.ship-free-note.is-visible { display: block; }
.ship-loc-hint { display: none; margin-top: 10px; }
.ship-loc-hint.is-visible { display: block; }

/* ---- Cart icon + count bubble ---------------------------------------- */
.cart-link { display: inline-flex; align-items: center; position: relative; color: #fff; }
.cart-icon { display: block; }
.cart-bubble {
    position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #e74c3c; color: #fff; font-size: .72rem; font-weight: 700;
    line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cart-bubble.is-empty { display: none; }
@keyframes cartPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); }
    60%  { transform: scale(.85); }
    100% { transform: scale(1); }
}
.cart-bubble.cart-pop, .tab-badge.cart-pop { animation: cartPop .4s ease 4; }

/* Small "added to cart" toast */
.cart-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
    background: #16783b; color: #fff; padding: 11px 20px; border-radius: 8px;
    font-size: .95rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 950;
}
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* Error / validation toasts drop down from the top, under the header, so they
   can't be missed at the bottom of a long product page. */
.cart-toast.is-error {
    background: #c0392b; bottom: auto; top: 84px; transform: translate(-50%, -20px);
    max-width: min(92vw, 460px); text-align: center;
}
.cart-toast.is-error.is-visible { transform: translate(-50%, 0); }

/* ============================================================
   MOBILE APP-LIKE EXPERIENCE
   Larger typography, bigger tap targets, sticky bottom tab bar.
   ============================================================ */
@media (max-width: 768px) {
    /* Bump the base font so everything scales up like a native app */
    html { font-size: 18px; }
    body { line-height: 1.55; -webkit-text-size-adjust: 100%; }

    .container { padding: 0 16px; }
    .page { padding-top: 18px; padding-bottom: 12px; min-height: auto; }

    /* Headings a touch larger and tighter */
    .hero h1 { font-size: 2rem; }
    .page-title { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }

    /* Bigger, thumb-friendly buttons */
    .btn { padding: 13px 20px; font-size: 1rem; border-radius: 10px; }
    .btn-block { display: block; width: 100%; }
    .btn-sm { padding: 9px 14px; font-size: .92rem; }

    /* Inputs at 16px+ so iOS doesn't zoom on focus; roomier touch area */
    input, select, textarea, .field input, .field select, .field textarea {
        font-size: 16px !important; padding: 13px 14px; border-radius: 10px;
    }
    .field { margin-bottom: 14px; }
    .field label { font-size: .95rem; font-weight: 600; margin-bottom: 6px; display: block; }

    /* Cards feel more like app tiles */
    .product-card { border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
    .product-image img { height: 150px; }
    .product-info { padding: 10px 12px; }
    .product-price { font-size: 1rem; }
    .product-order .product-price.big { font-size: 1.7rem; }
    .product-order .product-price.big .price,
    .product-order .product-price.big .price-sale { font-size: 2rem !important; }
    .product-order .product-price.big .price-original { font-size: 1.15rem; }
    .product-info h3 { font-size: 1.05rem; }
    .product-price { font-size: 1.05rem; }

    /* Product grid: two up on phones looks more app-like than one */
    .shopping-grid, .shop-layout .products, .related-grid, .product-grid, .category-grid {
        grid-template-columns: repeat(2, 1fr) !important; gap: 12px;
    }

    /* Shop sidebar becomes a compact, horizontally-scrolling filter bar
       instead of a tall block that squeezes the products. */
    .shop-layout { grid-template-columns: 1fr; gap: 16px; }
    .shop-sidebar {
        position: static; padding: 12px; margin-bottom: 4px; overflow: hidden;
    }
    .shop-sidebar h3 { font-size: .72rem; margin: 8px 0 8px; letter-spacing: .05em; }
    .shop-sidebar h3:first-child { margin-top: 0; }
    .shop-sidebar .sidebar-list {
        display: flex; gap: 8px; overflow-x: auto; margin: 0 0 6px;
        padding: 2px 2px 8px; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shop-sidebar .sidebar-list::-webkit-scrollbar { display: none; }
    .shop-sidebar .sidebar-list li {
        border: 1px solid var(--border); border-radius: 999px; flex: 0 0 auto;
        background: #fff; padding: 0; margin: 0;
    }
    .shop-sidebar .sidebar-list li.active {
        background: var(--primary); border-color: var(--primary);
    }
    .shop-sidebar .sidebar-list li.active a { color: #fff; font-weight: 600; }
    .shop-sidebar .sidebar-list a { display: block; padding: 8px 16px; white-space: nowrap; font-size: .9rem; }
    .product-info h3 { font-size: 1rem; }

    /* Shop search: full width, tidy on phones */
    .shop-heading { gap: 12px; }
    .shop-search { width: 100%; }
    .shop-search input[type=text] { flex: 1; max-width: none; }

    /* Stack the main layouts */
    .product-single, .cart-layout, .checkout-layout, .account-layout { grid-template-columns: 1fr; gap: 18px; }

    /* Stack paired form fields (e.g. Full name / Phone) full-width on mobile */
    .checkout-column .row, .row { flex-wrap: wrap; }
    .checkout-column .row .col-6, .checkout-column .row .col-4, .checkout-column .row .col-3 { flex: 1 1 100%; }

    /* Sticky "Add to cart" area on product page */
    .buy-form .field.inline { flex-wrap: wrap; gap: 10px; }

    /* Summary boxes get more presence */
    .summary-box, .cart-summary { border-radius: 14px; }
    .summary-line { font-size: 1rem; }
    .summary-line.total { font-size: 1.15rem; }
}

/* Sticky bottom tab bar — only rendered/visible on small screens */
.mobile-tabbar { display: none; }
@media (max-width: 768px) {
    .mobile-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
        background: #e8eaed; border-top: 1px solid #d0d4d9;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    }
    .mobile-tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px; color: var(--muted); font-size: .72rem; font-weight: 600;
        position: relative;
    }
    .mobile-tabbar a.is-active { color: var(--primary); }
    .mobile-tabbar svg { width: 24px; height: 24px; display: block; }
    .mobile-tabbar .tab-badge {
        position: absolute; top: 2px; right: calc(50% - 20px); min-width: 16px; height: 16px;
        padding: 0 4px; border-radius: 999px; background: #e74c3c; color: #fff;
        font-size: .62rem; line-height: 16px; text-align: center; font-weight: 700;
    }
    .mobile-tabbar .tab-badge.is-empty { display: none; }

    /* ----- Footer on mobile: internal padding + clearance for tab bar ----- */
    .site-footer { margin-top: 24px; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .footer-inner { padding: 34px 18px 26px; gap: 24px; }
    .footer-bottom { padding: 16px 0; }

    /* Hide the top header cart on mobile since the tab bar has it */
    .header-actions .cart-link { display: none; }

    /* ----- Mobile header: keep it minimal & tidy -----
       Layout (order + logo placement) is handled in the max-width:900px block
       above; here we only tune sizes so we don't fight that layout. */
    .header-actions .lang-toggle { display: inline-flex; }
    /* Keep the mini-cart popup links (View Cart / Checkout / product names) visible */
    .header-actions .mini-cart a { display: block; }
    .header-actions .mini-cart .mini-cart-name { display: block; }
    .header-actions .mini-cart .mini-cart-actions a { display: block; }
    .header-actions .currency-switcher { display: inline-block; }
    .header-actions .currency-switcher select { font-size: 16px; padding: 6px 8px; }
    .brand-logo { height: 46px; }
    .brand-name { font-size: 1.15rem; }
}

/* ---- Gallery zoom hint + clickable main image ------------------------ */
.gallery-main { position: relative; }
.gallery-main .zoomable { cursor: zoom-in; }
.gallery-main .zoom-hint {
    position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; font-size: 1rem;
    pointer-events: none; opacity: .85;
}

/* ---- Image lightbox (enlarged, but capped below full/original size) --- */
.image-lightbox {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.8); padding: 30px;
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
    direction: ltr; /* keep prev/next arrows behaving the same in every language */
}
.image-lightbox.is-visible { opacity: 1; visibility: visible; }
.image-lightbox .lightbox-img {
    /* Bigger than the 460px display box, but never full-screen or original size */
    max-width: min(85vw, 900px);
    max-height: 85vh;
    width: auto; height: auto;
    border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,.5);
    background: #fff; cursor: zoom-out;
    transform: scale(.96); transition: transform .2s ease;
}
.image-lightbox.is-visible .lightbox-img { transform: scale(1); }
.lightbox-close {
    position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
    background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 50%;
    font-size: 1.8rem; line-height: 1; cursor: pointer; transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; z-index: 2;
    background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 50%;
    font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.35); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
body.lightbox-open { overflow: hidden; }

/* ---- Admin-only edit bar on product page ----------------------------- */
.admin-edit-bar {
    margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--primary);
    border-radius: var(--radius); background: rgba(9,132,227,.05);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.btn-admin-edit { font-weight: 600; }
.admin-edit-bar .btn-admin-edit {
    background: #1f5fd0; color: #fff; border: 1px solid #1f5fd0;
}
.admin-edit-bar .btn-admin-edit:hover { background: #164aa8; border-color: #164aa8; color: #fff; }
.admin-edit-bar .btn-admin-toggle {
    background: #1f9d55; color: #fff; border: 1px solid #1f9d55;
}
.admin-edit-bar .btn-admin-toggle:hover { background: #17813f; border-color: #17813f; color: #fff; }
.admin-edit-note { font-size: .82rem; color: var(--muted); }
.admin-edit-bar form { margin: 0; }
.admin-edit-bar .btn-danger {
    background: #c0392b; color: #fff; border: 1px solid #c0392b;
}
.admin-edit-bar .btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

@media (max-width: 768px) {
    .image-lightbox { padding: 16px; }
    .image-lightbox .lightbox-img { max-width: 92vw; max-height: 80vh; }
    .lightbox-nav { width: 42px; height: 42px; font-size: 1.3rem; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

/* ---- Checkout: saved address selection ------------------------------- */
.saved-address-list { display: grid; gap: 12px; margin-bottom: 10px; }
.saved-address-card {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
    border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s; background: #fff;
}
.saved-address-card:hover { border-color: var(--primary); }
.saved-address-card input[type=radio] { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.saved-address-card:has(input:checked),
.saved-address-card.is-selected {
    border-color: var(--primary); background: #f2f8ff; box-shadow: 0 0 0 3px rgba(9,132,227,.1);
}
.sac-body { display: flex; flex-direction: column; gap: 3px; }
.sac-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sac-lines { color: var(--muted); font-size: .9rem; }
.sac-default { background: var(--primary); color: #fff; font-size: .68rem; }
.saved-address-card.is-default { border-color: var(--primary); }
.sac-new .sac-name { color: var(--primary); font-weight: 600; }

/* ---- Action pills (orders list View / Invoice) ---------------------- */
.order-actions { display: inline-flex; gap: 8px; flex-wrap: nowrap; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.orders-table td, .orders-table th { white-space: nowrap; }
.pill {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    font-size: .82rem; font-weight: 600; white-space: nowrap; line-height: 1.4;
    transition: opacity .15s, transform .15s;
}
.pill:hover { opacity: .88; transform: translateY(-1px); }
.pill-view { background: #eaf3fb; color: #0770bf; }
.pill-view:hover { color: #0770bf; }
.pill-invoice { background: #e6f5ec; color: #16783b; }
.pill-invoice:hover { color: #16783b; }

/* ---- Language switcher ------------------------------------------------ */
.lang-toggle {
    display: inline-flex; align-items: center; color: #fff;
    opacity: .9; transition: opacity .15s; text-decoration: none;
}
.lang-toggle:hover { opacity: 1; color: #fff; }
.lang-toggle .lang-globe { display: block; }

/* Switchers group: a subtle divider between the language toggle and the
   currency dropdown. Only shows when both controls are present. */
.header-switchers { display: inline-flex; align-items: center; gap: 12px; }
.header-switchers .lang-toggle + .currency-switcher::before {
    content: ""; display: inline-block; align-self: center;
    width: 1px; height: 18px; margin-inline-end: 12px;
    background: rgba(255,255,255,.4);
}
.header-switchers .currency-switcher { display: inline-flex; align-items: center; }

/* ==================================================================
   HOME PAGE REDESIGN (Shopingo-inspired)
   ================================================================== */

/* ----- Hero ----- */
.home-hero {
    background: linear-gradient(120deg, #0a283e, #2066ac);
    background-size: cover; background-position: center;
    color: #fff; margin-bottom: 0;
}
.home-hero-inner { padding: 92px 20px; }
.home-hero-copy { max-width: 620px; }
.home-hero-eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .18em;
    font-size: 1.05rem; font-weight: 700; opacity: .85; margin-bottom: 14px;
}
.home-hero h1 { font-size: 3.1rem; line-height: 1.08; margin: 0 0 14px; font-weight: 800; }
.home-hero p { font-size: 1.15rem; opacity: .92; margin: 0 0 28px; max-width: 34em; }
.btn-hero {
    display: inline-block; background: #fff; color: #0a283e; font-weight: 700;
    padding: 13px 30px; border-radius: 999px; font-size: 1rem;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-hero:hover { background: #f0f6ff; color: #0a283e; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

/* ----- Features strip ----- */
.feature-strip { background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.feature-strip-inner {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    padding: 26px 20px;
}
.feature-item { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 10px; }
.feature-item + .feature-item { border-left: 1px solid var(--border); }
.feature-ic { color: var(--primary); flex: 0 0 auto; display: inline-flex; }
.feature-txt { display: flex; flex-direction: column; line-height: 1.3; }
.feature-txt strong { font-size: .98rem; }
.feature-txt span { font-size: .82rem; color: var(--muted); }

/* ----- Section heads ----- */
.section { padding-top: 54px; padding-bottom: 6px; }
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 24px;
}
.section-head .section-title {
    margin: 0; font-size: 1.6rem; font-weight: 800; position: relative;
    padding-bottom: 10px;
}
.section-head .section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 52px; height: 3px; background: var(--primary); border-radius: 2px;
}
.section-link { font-weight: 600; font-size: .92rem; white-space: nowrap; }

/* ----- Browse category grid ----- */
.browse-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.browse-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 20px 12px; border: 1px solid var(--border); border-radius: 14px;
    background: #fff; transition: transform .16s, box-shadow .16s, border-color .16s;
}
.browse-card:hover {
    transform: translateY(-4px); border-color: transparent;
    box-shadow: 0 14px 30px rgba(16,24,40,.10);
}
.browse-thumb {
    width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
}
.browse-thumb img { width: 100%; height: 100%; object-fit: cover; }
.browse-initial { font-size: 2rem; font-weight: 800; color: var(--primary); }
.browse-name { font-weight: 700; font-size: .95rem; color: var(--text); }
.browse-count { font-size: .8rem; color: var(--muted); }

/* Auto-scrolling horizontal category strip */
.browse-strip-nav { display: flex; gap: 8px; }
.browse-arrow {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: #fff; color: var(--text); font-size: .9rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .16s, color .16s, border-color .16s;
}
.browse-arrow:hover { background: var(--primary); color: #fff; border-color: transparent; }
.browse-strip { overflow: hidden; width: 100%; }
.browse-track {
    display: flex; gap: 16px;
    scroll-behavior: smooth;
    overflow-x: auto;
    scrollbar-width: none;               /* Firefox */
    -ms-overflow-style: none;            /* IE/Edge */
    padding: 4px;                        /* room for hover lift/shadow */
    scroll-snap-type: x mandatory;
}
.browse-track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.browse-track .browse-card {
    flex: 0 0 auto;
    width: 168px;                        /* fixed item width for the strip */
    scroll-snap-align: start;
}

/* ----- Product card enhancements ----- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Homepage Featured / New Arrivals: 5 per row, more compact cards. */
.home-products { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.home-products .product-info { padding: 10px 10px 12px; }
.home-products .product-info h3 { font-size: .85rem; line-height: 1.3; }
.home-products .product-price { font-size: .85rem; }
.home-products .price-original { font-size: .78rem; }
.home-products .pc-add-btn, .home-products .pc-add-options { font-size: .8rem; padding: 8px 10px; }
.home-products .pc-badge { font-size: .68rem; padding: 3px 7px; }
@media (max-width: 1000px) {
    .home-products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .home-products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.product-card {
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: #fff; display: flex; flex-direction: column;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.product-card:hover {
    transform: translateY(-4px); border-color: transparent;
    box-shadow: 0 16px 34px rgba(16,24,40,.12);
}
.product-media { position: relative; overflow: hidden; background: var(--bg-soft); }
.product-media .product-image { display: block; aspect-ratio: 1 / 1; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:hover .product-media img { transform: scale(1.05); }
.pc-badge {
    position: absolute; top: 12px; font-size: .72rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; color: #fff; letter-spacing: .02em;
}
.pc-badge-sale { right: 12px; background: #e74c3c; }
.pc-badge-out { right: 12px; background: #636e72; }
.pc-badge-new {
    left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(120deg, #16a34a, #22c55e);
    box-shadow: 0 4px 12px rgba(34,197,94,.4);
    animation: pcNewPop .4s ease-out both;
}
.pc-badge-new-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: pcNewPulse 1.8s ease-out infinite;
}
@keyframes pcNewPop {
    0% { transform: scale(0) translateY(-6px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes pcNewPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
    .pc-badge-new, .pc-badge-new-dot { animation: none; }
}
.pc-add {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    transform: translateY(140%); opacity: 0; transition: transform .22s, opacity .22s;
}
.product-card:hover .pc-add { transform: translateY(0); opacity: 1; }
.pc-add-btn {
    width: 100%; border: 0; cursor: pointer; background: var(--primary); color: #fff;
    font-weight: 700; padding: 11px; border-radius: 10px; font-size: .9rem;
    transition: background .15s;
}
.pc-add-btn:hover { background: var(--primary-dark); }
.pc-add-options {
    display: block; text-align: center; text-decoration: none;
    background: var(--primary); color: #fff;
    font-weight: 700; padding: 11px; border-radius: 10px; font-size: .9rem;
    transition: background .15s;
}
.pc-add-options:hover { background: var(--primary-dark); color: #fff; }
.product-info { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.product-info h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.product-info h3 a { color: var(--text); }
.product-info h3 a:hover { color: var(--primary); }
.product-price { display: flex; align-items: baseline; gap: 8px; }
.product-price .price, .product-price .price-sale { font-weight: 800; font-size: 1.1rem; color: var(--text); }
.product-price .price-sale { color: #e74c3c; }
.product-price .price-original { text-decoration: line-through; color: var(--muted); font-size: .9rem; font-weight: 500; }

/* ----- Promo CTA band ----- */
.promo-cta { background: linear-gradient(120deg, #0a283e, #2066ac); color: #fff; margin-top: 56px; }
.promo-cta-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 44px 20px; flex-wrap: wrap;
}
.promo-cta h2 { margin: 0 0 6px; font-size: 1.9rem; font-weight: 800; }
.promo-cta p { margin: 0; opacity: .9; }

/* ----- Home responsive ----- */
@media (max-width: 1000px) {
    .browse-grid { grid-template-columns: repeat(4, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .home-hero-inner { padding: 60px 18px; }
    .home-hero h1 { font-size: 2.1rem; }
    .home-hero p { font-size: 1rem; }
    .feature-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
    .feature-item:nth-child(odd) { border-left: 0; }
    .feature-item:nth-child(2) { border-left: 1px solid var(--border); }
    .section { padding-top: 38px; }
    .section-head .section-title { font-size: 1.3rem; }
    .browse-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    /* On touch devices, always show the add button (no hover) */
    .pc-add { position: static; transform: none; opacity: 1; margin-top: 10px; }
    .promo-cta-inner { padding: 32px 18px; }
    .promo-cta h2 { font-size: 1.5rem; }
}
@media (max-width: 460px) {
    .browse-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Social sub-bar (above header) ---- */
.social-bar { background: #08243a; color: rgba(255,255,255,.85); font-size: .82rem; }
.social-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 20px; }
.social-bar-tag { opacity: .8; }
.social-bar-icons { display: inline-flex; gap: 4px; }
.social-bar-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; color: rgba(255,255,255,.85);
    transition: background .15s, color .15s;
}
.social-bar-icons a:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ---- CMS content pages (Return / Privacy) ---- */
.cms-page { max-width: 820px; margin: 0 auto; }
.cms-body { line-height: 1.75; color: var(--text); }
.cms-body h2 { font-size: 1.3rem; margin: 28px 0 10px; }
.cms-body h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.cms-body p { margin: 0 0 14px; }
.cms-body ul, .cms-body ol { margin: 0 0 14px; padding-left: 1.4em; }
.cms-body li { margin-bottom: 6px; }
.cms-body a { color: var(--primary); text-decoration: underline; }
.cms-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- Hero slider (full-width) ---- */
.home-hero-slider { position: relative; width: 100%; overflow: hidden; background: #0a283e; }
.hero-slides { position: relative; }
.hero-slide {
    display: none;
    background-color: #0a283e;
    background-image: linear-gradient(120deg, #0a283e, #2066ac);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: #fff; min-height: 420px;
}
.hero-slide.is-active { display: block; animation: heroFade .6s ease; }
@keyframes heroFade { from { opacity: .35; } to { opacity: 1; } }
.home-hero-slider .home-hero-inner { padding: 96px 72px; display: flex; align-items: center; min-height: 420px; }
.home-hero-slider .home-hero-copy { max-width: 620px; }
/* Horizontal placement of the copy over the slide */
.home-hero-slider .home-hero-inner.hpos-left   { justify-content: flex-start; }
.home-hero-slider .home-hero-inner.hpos-center { justify-content: center; }
.home-hero-slider .home-hero-inner.hpos-right  { justify-content: flex-end; }
.home-hero-slider .home-hero-inner.hpos-center .home-hero-copy { text-align: center; }
.home-hero-slider .home-hero-inner.hpos-right  .home-hero-copy { text-align: right; }
/* Vertical placement */
.home-hero-slider .home-hero-inner.vpos-top    { align-items: flex-start; }
.home-hero-slider .home-hero-inner.vpos-middle { align-items: center; }
.home-hero-slider .home-hero-inner.vpos-bottom { align-items: flex-end; }
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.18); color: #fff; font-size: 1.6rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
    transition: background .15s;
}
.hero-arrow:hover { background: rgba(255,255,255,.32); }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 9px; z-index: 3; }
.hero-dot {
    width: 11px; height: 11px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    background: rgba(255,255,255,.45); transition: background .15s, transform .15s;
}
.hero-dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 768px) {
    .hero-slide, .home-hero-slider .home-hero-inner { min-height: 320px; }
    .home-hero-slider .home-hero-inner { padding: 56px 52px; }
    .hero-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
    .hero-prev { left: 6px; } .hero-next { right: 6px; }
}

/* ---- Product share buttons ---- */
.product-share { margin-top: 18px; }
.product-share-label { font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; display: block; }
.product-share-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.product-share-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    color: var(--text); transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.product-share-icons a:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share-facebook:hover { background: #1877f2; }
.share-x:hover { background: #000; }
.share-whatsapp:hover { background: #25d366; }
.share-linkedin:hover { background: #0a66c2; }
.share-telegram:hover { background: #229ED9; }
.share-copy:hover { background: var(--primary); }

/* Wishlist heart state */
.btn-ghost .wish-heart { font-size: 1.05em; line-height: 1; vertical-align: -1px; }
.btn-ghost.in-wishlist { color: #e74c3c; border-color: #e74c3c; }
.btn-ghost.in-wishlist .wish-heart { color: #e74c3c; }

/* ---- Customer wallet ---- */
.wallet-balance-card {
    display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(120deg, #0a283e, #2066ac); color: #fff;
    padding: 22px 26px; border-radius: 14px; margin-bottom: 24px; max-width: 340px;
}
.wallet-balance-label { font-size: .85rem; opacity: .85; }
.wallet-balance-amount { font-size: 2rem; font-weight: 800; }
.wallet-pay-methods { display: flex; flex-direction: column; gap: 8px; }
.wallet-pay-methods .pay-method-opt { display: flex; align-items: center; gap: 8px; }
.wallet-history td { vertical-align: middle; }
.wallet-inline-bal { font-size: .85rem; color: var(--muted, #6b7280); margin-inline-start: 6px; }
.payment-option.is-disabled { opacity: .55; }

/* ---- Product stock visibility ---- */
.stock-info { margin: 10px 0 0; font-size: .95rem; font-weight: 600; color: #1e8e3e; }
.stock-info.stock-low { color: #d93025; }

/* ---- Back / continue-shopping link ---- */
.back-link { margin: 0 0 8px; }
.back-link a { color: var(--muted, #6b7280); text-decoration: none; font-size: .95rem; }
.back-link a:hover { color: var(--primary, #0984e3); }
.back-link a::before { content: "\2190"; margin-inline-end: 6px; }

/* ---- Account hover dropdown (top bar) ---- */
.account-menu { position: relative; display: inline-block; }
.account-menu-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.account-caret { font-size: 1.75em; transition: transform .15s; }
.account-menu:hover .account-caret { transform: rotate(180deg); }
.account-menu-list {
    position: absolute; top: 100%; inset-inline-end: 0; margin-top: 8px;
    min-width: 180px; background: #fff; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s; z-index: 100;
}
/* A hover bridge so the menu doesn't close in the gap above it */
.account-menu::after { content: ""; position: absolute; top: 100%; inset-inline-end: 0; width: 100%; height: 12px; }
.account-menu:hover .account-menu-list,
.account-menu:focus-within .account-menu-list {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.account-menu-list a {
    display: block; padding: 9px 14px; border-radius: 7px;
    color: #1f2937 !important; font-size: .95rem; white-space: nowrap;
}
.account-menu-list a:hover { background: #f2f4f7; opacity: 1; }
.account-menu-logout { border-top: 1px solid #eef1f4; margin-top: 4px; color: #d93025 !important; }

/* Mobile-only account links inside the hamburger menu */
.mobile-account-links { display: none; }

/* ---- Product page category link ---- */
.product-category-link {
    display: inline-block; margin-bottom: 8px;
    font-size: .9rem; font-weight: 600; letter-spacing: .01em;
    color: var(--primary, #0984e3); text-decoration: none;
}
.product-category-link::before { content: "\2190"; margin-inline-end: 6px; }
.product-category-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Mini-cart popup (shows on add-to-cart) ---- */
.cart-wrap { position: relative; display: inline-flex; }
.mini-cart {
    position: absolute; top: calc(100% + 14px); inset-inline-end: 0;
    width: 340px; max-width: 92vw; background: #fff; color: var(--text, #1f2933);
    border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.22);
    padding: 16px; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.mini-cart.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mini-cart::before {
    content: ""; position: absolute; bottom: 100%; inset-inline-end: 18px;
    border: 8px solid transparent; border-bottom-color: #fff;
}
.mini-cart-items { max-height: 320px; overflow-y: auto; }
.mini-cart-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef1f4; }
.mini-cart-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.mini-cart-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-cart-name { font-weight: 600; font-size: .95rem; color: #1f2933 !important; text-decoration: none; line-height: 1.3; }
.mini-cart-name:hover { color: var(--primary) !important; }
.mini-cart-attrs { font-size: .8rem; color: var(--muted, #6b7280); }
.mini-cart-qty { font-size: .85rem; color: var(--muted, #6b7280); }
.mini-cart-subtotal { display: flex; justify-content: space-between; font-weight: 700; padding: 12px 0; font-size: 1rem; }
.mini-cart-actions { display: flex; flex-direction: column; gap: 8px; }
.mini-cart-actions .btn { width: 100%; text-align: center; }
.mini-cart-actions .btn-outline { border: 1px solid var(--border, #d5dae0); color: #1f2933 !important; background: #fff; }
.mini-cart-actions .btn-outline:hover { border-color: var(--primary); color: var(--primary) !important; }
.mini-cart-actions .btn-primary { background: var(--primary); color: #fff !important; }
.mini-cart-empty { text-align: center; color: var(--muted, #6b7280); padding: 10px 0; }
.mini-cart-close {
    display: none; position: absolute; top: 8px; inset-inline-start: 8px;
    width: 34px; height: 34px; align-items: center; justify-content: center;
    border: 0; background: #f2f3f5; color: #333; cursor: pointer;
    font-size: 22px; line-height: 1; border-radius: 50%; z-index: 2;
}
.mini-cart-close:hover { background: #e6e8eb; }

@media (max-width: 768px) {
    /* On mobile the desktop cart link is hidden, so anchor the mini-cart
       to the top of the screen and cap its height so the subtotal and
       action buttons stay visible; the item list scrolls inside. */
    .mini-cart {
        position: fixed; top: 64px; inset-inline: 10px; bottom: auto;
        width: auto; max-width: none;
        max-height: calc(100vh - 150px); display: flex; flex-direction: column;
    }
    .mini-cart::before { display: none; }
    .mini-cart-items { flex: 1 1 auto; max-height: none; overflow-y: auto; }
    .mini-cart-subtotal, .mini-cart-actions { flex: 0 0 auto; }
    .mini-cart-close { display: flex; }        /* show the close button on mobile */
}

/* Mini-cart row remove button */
.mini-cart-row { position: relative; }
.mini-cart-remove {
    position: absolute; top: 8px; inset-inline-end: 0;
    width: 24px; height: 24px; border: 0; background: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: #b0b6bd; border-radius: 50%;
}
.mini-cart-remove:hover { color: #d93025; background: #f7f7f8; }

/* ---- Payment status pages (cancelled / result) ---- */
.payment-status-page { max-width: 520px; margin: 40px auto; text-align: center !important; }
.payment-status-page .page-title { text-align: center !important; }
.payment-status-page .muted { text-align: center !important; }
.payment-status-actions { display: flex !important; gap: 12px; justify-content: center !important; flex-wrap: wrap; margin-top: 18px; }

/* ---- Maintenance mode overlay ---- */
.maintenance-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #1f2933, #0f172a);
}
.maintenance-box {
    max-width: 480px; width: 100%; text-align: center;
    background: #fff; border-radius: 16px; padding: 40px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.maintenance-logo { max-width: 160px; max-height: 90px; width: auto; height: auto; margin: 0 auto 22px; display: block; object-fit: contain; }
.maintenance-title { font-size: 1.6rem; margin: 0 0 12px; color: #1f2933; }
.maintenance-text { font-size: 1.02rem; line-height: 1.6; color: #52606d; margin: 0; }

/* =====================================================================
   HOMEPAGE LAYOUTS (admin-selectable: home-layout-1 … 4)
   Layout 1 = classic (base styles above). 2–4 restyle via these rules.
   ===================================================================== */

/* ---- Shared: full-bleed slider used by layouts 2, 3, 4 ---- */
.home-layout-2 .home-hero-slider,
.home-layout-3 .home-hero-slider,
.home-layout-4 .home-hero-slider {
    /* break out of any max-width container to span the viewport edge-to-edge */
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.home-layout-2 .hero-slide,
.home-layout-3 .hero-slide,
.home-layout-4 .hero-slide { min-height: 78vh; }
.home-layout-2 .home-hero-slider .home-hero-inner,
.home-layout-3 .home-hero-slider .home-hero-inner,
.home-layout-4 .home-hero-slider .home-hero-inner { min-height: 78vh; padding: 0 max(24px, 6vw); }
.home-layout-2 .home-hero-copy h1,
.home-layout-3 .home-hero-copy h1,
.home-layout-4 .home-hero-copy h1 {
    font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 800;
}
.home-layout-2 .home-hero-copy p,
.home-layout-3 .home-hero-copy p,
.home-layout-4 .home-hero-copy p { font-size: clamp(1rem, 1.6vw, 1.28rem); opacity: .96; }
.home-layout-2 .home-hero-eyebrow,
.home-layout-3 .home-hero-eyebrow,
.home-layout-4 .home-hero-eyebrow {
    display: inline-block; letter-spacing: .32em; text-transform: uppercase;
    font-size: .72rem; font-weight: 700; opacity: .9; margin-bottom: 14px;
}
.home-layout-2 .home-hero-copy,
.home-layout-3 .home-hero-copy,
.home-layout-4 .home-hero-copy { max-width: 720px; }
/* larger, more elegant hero button */
.home-layout-2 .btn-hero,
.home-layout-3 .btn-hero,
.home-layout-4 .btn-hero { margin-top: 26px; padding: 15px 34px; font-size: 1.02rem; border-radius: 999px; }
/* refined dots as a bar */
.home-layout-2 .hero-dot,
.home-layout-3 .hero-dot,
.home-layout-4 .hero-dot { width: 34px; height: 4px; border-radius: 2px; }
.home-layout-2 .hero-dot.is-active,
.home-layout-3 .hero-dot.is-active,
.home-layout-4 .hero-dot.is-active { transform: none; background: #fff; }
/* glassy square arrows */
.home-layout-2 .hero-arrow,
.home-layout-4 .hero-arrow { border-radius: 12px; width: 52px; height: 52px; }

/* ---- Shared section heading treatment for layouts 2–4 ---- */
.home-layout-2 .section-head,
.home-layout-3 .section-head,
.home-layout-4 .section-head { text-align: center; margin-bottom: 34px; }
.home-layout-2 .section-title,
.home-layout-3 .section-title,
.home-layout-4 .section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em;
}

/* =====================================================================
   LAYOUT 2 — "Spotlight": dark, cinematic. Product sections sit on a deep
   night background with a warm gold accent — dramatic and premium.
   ===================================================================== */
.home-layout-2 .section { padding-block: 74px; }
/* Featured section gets a full-bleed dark band */
.home-layout-2 .section:nth-of-type(1 of .section) { }
.home-layout-2 .section-head { position: relative; margin-bottom: 40px; }
.home-layout-2 .section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.01em; }
.home-layout-2 .section-title::after {
    content: ""; display: block; width: 60px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, #e0a83e, #f4c76b); margin: 16px auto 0;
}
.home-layout-2 .section-link { color: var(--primary); font-weight: 600; }
.home-layout-2 .product-card {
    border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.home-layout-2 .product-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(10,40,62,.18); }
/* Category chips: rounded pills with centered labels */
.home-layout-2 .browse-grid { justify-content: center; }
.home-layout-2 .browse-card { border-radius: 16px; transition: transform .2s, box-shadow .2s; }
.home-layout-2 .browse-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.12); }

/* =====================================================================
   LAYOUT 3 — "Editorial": magazine feel. Numbered section eyebrows,
   left-aligned headings with a rule that runs across, category image tiles.
   ===================================================================== */
.home-layout-3 .section { padding-block: 62px; }
.home-layout-3 .section-head {
    text-align: left; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; border-bottom: 2px solid #12324e; padding-bottom: 14px; margin-bottom: 30px;
}
.home-layout-3 .section-title {
    font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: 0;
}
/* Numbered eyebrow above each heading via counters */
.home-layout-3 .section { counter-increment: ed-sec; }
.home-layout-3 .section-title::before {
    content: "0" counter(ed-sec); display: block; font-size: .82rem; letter-spacing: .3em;
    color: var(--primary); font-weight: 700; margin-bottom: 6px;
}
.home-layout-3 .section-link { font-weight: 600; white-space: nowrap; padding-bottom: 4px; }
.home-layout-3 .browse-grid { gap: 16px; }
.home-layout-3 .browse-card {
    border-radius: 4px; overflow: hidden; aspect-ratio: 3/4; position: relative;
    display: block; padding: 0; border: 0; background: #0a283e;
}
.home-layout-3 .browse-card .browse-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; margin: 0;
    display: block; background: #0a283e;
}
.home-layout-3 .browse-card .browse-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.home-layout-3 .browse-card:hover .browse-thumb img { transform: scale(1.07); }
.home-layout-3 .browse-card .browse-initial { font-size: 3rem; color: rgba(255,255,255,.5); }
.home-layout-3 .browse-card .browse-name {
    position: absolute; inset: auto 0 0 0; z-index: 2; margin: 0; padding: 30px 16px 6px;
    background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
    color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em;
}
.home-layout-3 .browse-card .browse-count {
    position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0 16px 14px;
    color: rgba(255,255,255,.8); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
}
.home-layout-3 .product-card { border-radius: 4px; }

/* =====================================================================
   LAYOUT 4 — "Minimal": gallery-white, ultra-restrained. Tiny tracked
   uppercase headings, hairline dividers, borderless cards, maximal air.
   ===================================================================== */
.home-layout-4 .section { padding-block: 90px; }
.home-layout-4 .section + .section { border-top: 1px solid var(--border); }
.home-layout-4 .section-head { text-align: center; margin-bottom: 52px; }
.home-layout-4 .section-title {
    font-size: .96rem; font-weight: 700; text-transform: uppercase; letter-spacing: .32em;
    color: var(--text);
}
.home-layout-4 .section-link { display: inline-block; margin-top: 12px; color: var(--muted); font-size: .84rem;
    text-transform: uppercase; letter-spacing: .16em; }
.home-layout-4 .section-link:hover { color: var(--primary); }
.home-layout-4 .product-card { border: 0; box-shadow: none; border-radius: 0; }
.home-layout-4 .product-card:hover { box-shadow: none; }
.home-layout-4 .product-card:hover img { opacity: .86; }
.home-layout-4 .product-card img { transition: opacity .25s; }
.home-layout-4 .browse-card { border: 0; box-shadow: none; border-radius: 0; }
.home-layout-4 .browse-card .browse-name { letter-spacing: .04em; }
.home-layout-4 .feature-strip { background: transparent; border-block: 1px solid var(--border); }

/* Responsive: keep hero readable on phones for all layouts */
@media (max-width: 768px) {
    .home-layout-2 .hero-slide, .home-layout-3 .hero-slide, .home-layout-4 .hero-slide,
    .home-layout-2 .home-hero-slider .home-hero-inner,
    .home-layout-3 .home-hero-slider .home-hero-inner,
    .home-layout-4 .home-hero-slider .home-hero-inner { min-height: 60vh; }
    .home-layout-3 .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---- Stronger, unmistakable per-layout cues (visible even without slides) ---- */
/* Layout 2 Spotlight: warm-tinted page, gold section links */
.home-layout-2 { background: #fbf9f5; }
.home-layout-2 .section-link { color: #c48a2a; }

/* ---- Spotlight fine-tuning (per request) ---- */
/* 1) Fixed 500px slider height (overrides the shared 78vh rule) */
.home-layout-2 .hero-slide,
.home-layout-2 .home-hero-slider .home-hero-inner { min-height: 500px !important; height: 500px; }
/* 2) No gap between the top bar and the slider */
.home-layout-2 .site-header { margin-bottom: 0; border-bottom: 0; }
.home-layout-2 main.page { padding-top: 0; }
/* 3) Features strip spans the full viewport width, matching the slider */
.home-layout-2 .feature-strip { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.home-layout-2 .feature-strip-inner {
    max-width: none; width: 100%;
    padding-left: max(24px, 6vw); padding-right: max(24px, 6vw);
}
/* Layout 3 Editorial: cool paper, categories band gets a tinted full-width backing */
.home-layout-3 { background: #f6f7f9; }
.home-layout-3 .feature-strip { background: #0a283e; color: #fff; }
.home-layout-3 .feature-strip .feature-ic { color: #7fb2e6; }

/* ---- Editorial fine-tuning (per request) ---- */
/* 1) Fixed 250px slider height (overrides the shared 78vh rule) */
.home-layout-3 .hero-slide,
.home-layout-3 .home-hero-slider .home-hero-inner { min-height: 250px !important; height: 250px; }
.home-layout-3 .home-hero-copy h1 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.home-layout-3 .home-hero-copy p { font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.home-layout-3 .home-hero-eyebrow { margin-bottom: 8px; }
.home-layout-3 .btn-hero { margin-top: 16px; padding: 11px 26px; }
/* 2) No gap between the top bar and the slider */
.home-layout-3 .home-hero-slider { margin-top: 0; }
.home-layout-3 .site-header { margin-bottom: 0; border-bottom: 0; }
.home-layout-3 main.page { padding-top: 0; }
.home-layout-3 .home-hero-slider + * { margin-top: 0; }
/* 3) Features strip spans the full viewport width, matching the slider */
.home-layout-3 .feature-strip { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.home-layout-3 .feature-strip-inner {
    max-width: none; width: 100%;
    padding-left: max(24px, 6vw); padding-right: max(24px, 6vw);
}
.home-layout-3 .feature-item + .feature-item { border-left-color: rgba(255,255,255,.14); }
.home-layout-3 .feature-txt span { color: rgba(255,255,255,.72); }
/* Layout 4 Minimal: pure white everywhere, no feature-strip fill */
.home-layout-4 { background: #fff; }

/* Product price "From" label (shown before a priced variation is picked) */
.product-price.big .price-from-label { font-size: 1rem; font-weight: 600; color: var(--muted); vertical-align: middle; }

/* Footer logo (between store name and tagline) */
.footer-logo { height: 108px; width: auto; max-width: 220px; display: block; object-fit: contain; object-position: left center; margin-top: 8px !important; margin-bottom: 10px !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; }
[dir="ltr"] .footer-logo, :root:not([dir="rtl"]) .footer-logo { margin-left: 0 !important; margin-right: auto !important; object-position: left center; }
[dir="rtl"] .footer-logo { margin-right: 0 !important; margin-left: auto !important; object-position: right center; }
@media (max-width: 768px) {
    .footer-logo { height: 64px; max-width: 150px; }
}
@media (max-width: 460px) {
    .footer-logo { height: 54px; max-width: 130px; }
}

/* ---- Tighter spacing between stacked homepage sections ------------------
   Every .section carries a large top padding + vertical margin; where two
   sit back-to-back on the homepage that stacks into a big empty band.
   Compress the join for all layouts. The first section (after the hero /
   features strip) keeps its normal spacing; layout-4's divider line stays. */
.home-layout .section { margin-top: 0; margin-bottom: 0; }
/* Layout 1 (default): base section has small bottom padding already, so only
   the following section's top padding needs trimming. */
.home-layout-1 .section + .section { padding-top: 20px; }
/* Layouts 2–4 use padding-block (both sides large); trim both sides of the
   join so consecutive sections sit closer. */
.home-layout-2 .section + .section { padding-top: 30px; }
.home-layout-2 .section { padding-bottom: 30px; }
.home-layout-3 .section + .section { padding-top: 26px; }
.home-layout-3 .section { padding-bottom: 26px; }
.home-layout-4 .section + .section { padding-top: 40px; }
.home-layout-4 .section { padding-bottom: 40px; }

/* Checkout fulfillment choice (ship vs collect from store) */
.fulfillment-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (max-width: 560px) { .fulfillment-choices { grid-template-columns: 1fr; } }
.fulfillment-card {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--border, #dfe3e8); border-radius: 10px;
    padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.fulfillment-card:hover { border-color: var(--primary); }
.fulfillment-card.is-active { border-color: var(--primary); background: rgba(9,132,227,.05); box-shadow: inset 0 0 0 1px var(--primary); }
.fulfillment-card input[type=radio] { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.fulfillment-card .fc-body { display: flex; flex-direction: column; gap: 2px; }
.fulfillment-card .fc-title { font-weight: 600; }
.fulfillment-card .fc-sub { font-size: .85rem; color: var(--muted, #6b7680); }
.pickup-info { background: var(--bg-soft, #f7f9fb); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.pickup-info p { margin: 0 0 4px; }

/* Checkout pickup date pills (customer picks the day) */
.pickup-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pickup-pill {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 84px; padding: 10px 16px;
    border: 1px solid var(--border, #dfe3e8); border-radius: 999px;
    background: #fff; cursor: pointer; line-height: 1.2;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.pickup-pill:hover { border-color: var(--primary); }
.pickup-pill.is-active {
    border-color: var(--primary); background: var(--primary); color: #fff;
    box-shadow: 0 2px 8px rgba(9,132,227,.25);
}
.pickup-pill-day  { font-weight: 600; font-size: .9rem; }
.pickup-pill-date { font-size: .78rem; opacity: .85; }
.pickup-hours { margin: 0; }

/* Back-in-stock "Notify me" modal */
.notify-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.notify-modal.is-open { display: block; }
.notify-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.notify-dialog {
    position: relative; z-index: 1; max-width: 440px; width: calc(100% - 32px);
    margin: 12vh auto 0; background: #fff; border-radius: 14px; padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: notifyIn .18s ease;
}
@keyframes notifyIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.notify-x {
    position: absolute; top: 10px; inset-inline-end: 12px; background: none; border: 0;
    font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.notify-x:hover { color: var(--text); }
.notify-product { display: flex; gap: 14px; align-items: center; }
.notify-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.notify-info h3 { margin: 0 0 6px; font-size: 1.1rem; }
.notify-lead { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.notify-feedback { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; font-size: .95rem; line-height: 1.5; }
.notify-ok    { background: #e7f7ee; color: #1a7f4b; }
.notify-info  { background: #eef3fb; color: #2a5aa8; }
.notify-error { background: #fdecec; color: #c0392b; }
.notify-actions { display: flex; gap: 10px; margin-top: 20px; }

/* Notify-me CTA spacing (keep it clear of the share icons above) */
.notify-cta { clear: both; margin-top: 18px; }
.notify-cta .btn { display: inline-block; }

/* ===== Header search icon + smart search popup ===== */
.search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: inherit;
    padding: 4px; margin-inline-end: 4px; line-height: 0;
}
.search-toggle:hover { opacity: .8; }

.search-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.search-modal.is-open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.search-panel {
    position: relative; z-index: 1; max-width: 640px; width: calc(100% - 28px);
    margin: 8vh auto 0; background: #fff; border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.32); overflow: hidden; animation: searchIn .18s ease;
}
@keyframes searchIn { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.search-modal-form { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border,#e7eaee); }
.search-modal-ico { color: var(--muted,#6b7280); flex: 0 0 auto; line-height: 0; }
.search-modal-form input {
    flex: 1 1 auto; border: 0; outline: none; font-size: 1.1rem; background: transparent;
    color: var(--text,#1f2937); padding: 6px 0;
}
.search-modal-x { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--muted,#6b7280); cursor: pointer; flex: 0 0 auto; }
.search-modal-x:hover { color: var(--text,#1f2937); }
.search-modal-results { max-height: 62vh; overflow-y: auto; padding: 14px 16px; }
.search-modal-results.is-loading { opacity: .55; }
.search-modal-hint { color: var(--muted,#6b7280); text-align: center; padding: 26px 0; }
/* Compact the product grid inside the popup */
.search-modal-results .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.search-modal-results .pagination { margin-top: 14px; }
body.search-modal-lock { overflow: hidden; }
@media (min-width: 620px) {
    .search-modal-results .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Admin pill in the storefront nav (v2.76.71) -------------------- */
/* Sets the "Admin" link apart as a rounded pill. Uses a translucent white
   fill + border so it stays legible on any themed header colour, and the
   text stays white (inherits the nav colour). Appears in the desktop header
   action bar and inside the mobile menu. */
.main-nav a.admin-pill,
.header-actions a.admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid currentColor;
    line-height: 1.2;
    opacity: 1;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, opacity .15s;
}
.main-nav a.admin-pill:hover,
.header-actions a.admin-pill:hover {
    /* Faint fill on hover — currentColor at low alpha isn't directly
       expressible, so use a neutral translucent overlay that works on both
       light and dark header text. */
    background: rgba(128, 128, 128, .18);
    text-decoration: none;
}
/* In the mobile menu the nav items are full-width stacked rows; keep the pill
   inline-sized and nudged in from the edge so it still reads as a pill. */
@media (max-width: 900px) {
    .main-nav a.admin-pill {
        margin: 8px 18px;
        align-self: flex-start;
    }
}

/* ---- Size pill selector (v2.76.97) ---------------------------------- */
/* The real <select> stays in the DOM (submittable + native validation) but
   is visually hidden — never display:none, so a required select stays valid. */
.size-select-hidden { position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.size-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.size-pill { min-width: 40px; height: 38px; padding: 0 12px;
    border: 1.5px solid #d5d9df; border-radius: 999px; background: #fff;
    color: #1f2933; font-size: .9rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.size-pill:hover:not(.is-out):not(.is-selected) { border-color: #1f2933; }
.size-pill.is-selected { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
.size-pill.is-out { color: #c4c9d0; border-color: #ececf0; cursor: not-allowed;
    position: relative; overflow: hidden; }
/* Diagonal strike-through line for out-of-stock sizes. */
.size-pill.is-out::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top left, transparent calc(50% - 1px), #e3e6ea calc(50% - 1px), #e3e6ea calc(50% + 1px), transparent calc(50% + 1px)); }
.size-pill:focus-visible { outline: 2px solid var(--primary,#0984e3); outline-offset: 2px; }

/* ---- Colour / type image swatches (v2.76.98) ------------------------ */
.var-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.var-swatch { padding: 0; border: 2px solid #d5d9df; border-radius: 10px;
    background: #fff; cursor: pointer; width: 48px; height: 48px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, box-shadow .15s; position: relative; }
.var-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.var-swatch:hover:not(.is-out):not(.is-selected) { border-color: #1f2933; }
.var-swatch.is-selected { border-color: #2b2b2b; box-shadow: 0 0 0 2px #2b2b2b inset; }
.var-swatch.is-out { cursor: not-allowed; opacity: .45; border-color: #ececf0; }
.var-swatch.is-out::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top left, transparent calc(50% - 1px), #d0d4da calc(50% - 1px), #d0d4da calc(50% + 1px), transparent calc(50% + 1px)); }
/* Text fallback (variation has no image): render as a small labelled chip. */
.var-swatch-text { width: auto; min-width: 44px; height: 38px; padding: 0 12px;
    border-radius: 999px; border-width: 1.5px; font-size: .9rem; font-weight: 600; color: #1f2933; }
.var-swatch-text.is-selected { background: #2b2b2b; border-color: #2b2b2b; color: #fff; box-shadow: none; }
.var-swatch-text.is-out::after { display: none; }
.var-swatch:focus-visible { outline: 2px solid var(--primary,#0984e3); outline-offset: 2px; }

/* ---- Categories mega menu (v2.76.104) ------------------------------- */
.mega-wrap { position: relative; display: inline-flex; align-items: center; }
.mega-trigger { display: inline-flex; align-items: center; gap: 6px; }
.mega-caret { font-size: 1.75em; line-height: 0; transition: transform .18s ease; }
.mega-wrap:hover .mega-caret,
.mega-wrap.is-open .mega-caret { transform: rotate(180deg); }

.mega-panel {
    position: absolute; top: calc(100% + 14px); inset-inline-start: 0;
    width: min(720px, 86vw);
    background: #fff; color: #1f2933;
    border: 1px solid var(--line, #e6e3dc); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.16);
    padding: 18px; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Small hover bridge so the panel doesn't close in the gap under the trigger. */
.mega-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.mega-wrap:hover .mega-panel,
.mega-wrap.is-open .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.mega-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px; color: #1f2933 !important;
    transition: background .14s ease;
}
.mega-item:hover { background: #f3f4f7; text-decoration: none; }
.mega-thumb {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px; overflow: hidden;
    background: #eef1f5; display: inline-grid; place-items: center;
}
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-initial { font-weight: 800; color: #8a93a0; font-size: 1.15rem; }
.mega-text { display: flex; flex-direction: column; min-width: 0; }
.mega-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-count { font-size: .78rem; color: #8a93a0; }
.mega-all {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e6e3dc);
    font-weight: 700; color: var(--primary, #0984e3) !important;
}

/* Mobile: the nav stacks, so render the mega menu inline as a plain list. */
@media (max-width: 900px) {
    .mega-wrap { display: block; width: 100%; }
    .mega-trigger { justify-content: space-between; width: 100%; }
    .mega-panel {
        position: static; width: auto; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px;
        background: transparent; display: none;
    }
    .mega-wrap.is-open .mega-panel { display: block; }
    .mega-grid { grid-template-columns: 1fr; gap: 2px; }
    .mega-item { color: #fff !important; padding: 12px 8px; }
    .mega-item:hover { background: rgba(255,255,255,.08); }
    .mega-name { color: #fff; }
    .mega-count { color: rgba(255,255,255,.6); }
    .mega-thumb { width: 34px; height: 34px; }
    .mega-all { color: #fff !important; border-top-color: rgba(255,255,255,.15); margin-inline-start: 8px; }
}

/* ---- GCC checkout address grid (v2.77.1) ---------------------------- */
/* A responsive grid so per-country fields wrap neatly, and each field is a
   column with the input pushed to the bottom — so inputs stay aligned on one
   row even when some labels wrap to two lines (e.g. "Way / Street no."). */
.gcc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gcc-grid .gcc-field { display: flex; flex-direction: column; margin-bottom: 0; }
.gcc-grid .gcc-field label { min-height: 2.4em; display: flex; align-items: flex-end; }
.gcc-grid .gcc-field input { margin-top: auto; }
@media (max-width: 640px) {
    .gcc-grid { grid-template-columns: repeat(2, 1fr); }
    .gcc-grid .gcc-field label { min-height: 0; }
}

/* ---- Mega menu columns (sub-categories) (v2.77.6) ------------------- */
.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 22px; }
.mega-col { padding: 4px 0 8px; break-inside: avoid; }
.mega-col-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px;
    border-radius: 9px; color: #1f2933 !important; font-weight: 700; }
.mega-col-head:hover { background: #f3f4f7; text-decoration: none; }
.mega-sublist { list-style: none; margin: 2px 0 0; padding: 0 8px; }
.mega-sublist li { margin: 0; }
.mega-sublist a { display: block; padding: 6px 8px 6px 46px; border-radius: 8px;
    color: #566 !important; font-size: .92rem; }
.mega-sublist a:hover { background: #f3f4f7; color: #1f2933 !important; text-decoration: none; }
[dir=rtl] .mega-sublist a { padding: 6px 46px 6px 8px; }

@media (max-width: 900px) {
    .mega-cols { grid-template-columns: 1fr; gap: 0; }
    .mega-col-head { color: #fff !important; }
    .mega-sublist a { color: rgba(255,255,255,.75) !important; padding-inline-start: 46px; }
    .mega-sublist a:hover { background: rgba(255,255,255,.08); color: #fff !important; }
}

/* ---- Sub-category chips on category pages (v2.77.6) ----------------- */
.subcat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.subcat-chip { display: inline-block; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--line,#e6e3dc); background: #fff; color: #1f2933 !important;
    font-size: .9rem; font-weight: 600; transition: border-color .14s, background .14s; }
.subcat-chip:hover { border-color: var(--primary,#0984e3); background: #f4f8ff; text-decoration: none; }