:root {
    --ink: #24150f;
    --ink-soft: #5c463a;
    --cream: #fbf5e9;
    --cream-2: #f2e5cd;
    --paper: #fffdf8;
    --gold: #c9992e;
    --gold-light: #e6c866;
    --olive: #6e702f;
    --line: rgba(63, 38, 22, .14);
    --shadow: 0 24px 70px rgba(44, 25, 12, .12);
    --radius-sm: 14px;
    --radius-md: 24px;
    --radius-lg: 38px;
    --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
svg { display: block; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 96px 0; }
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed;
    z-index: 9999;
    top: 10px; left: 10px;
    transform: translateY(-160%);
    background: white;
    border: 2px solid var(--gold);
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
}
.skip-link:focus { transform: none; }

.announcement {
    background: var(--ink);
    color: #f8ecd1;
    font-size: 13px;
    letter-spacing: .02em;
}
.announcement__inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.announcement a { color: var(--gold-light); text-decoration: none; }
.announcement a:hover { text-decoration: underline; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 253, 248, .9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 30px rgba(43, 25, 14, .07); }
.header__inner {
    min-height: 84px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 36px;
}
.brand { width: 156px; display: inline-block; }
.brand img { width: 100%; height: 74px; object-fit: cover; object-position: center 10%; border-radius: 10px; }
.primary-nav { display: flex; justify-content: center; gap: 34px; }
.primary-nav a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    position: relative;
}
.primary-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -8px;
    height: 2px;
    background: var(--gold);
    transition: right .2s ease;
}
.primary-nav a:hover::after { right: 0; }
.icon-button {
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: white;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-toggle { display: none; }
.cart-button {
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: white;
    min-height: 46px;
    padding: 0 10px 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 700;
}
.cart-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-count {
    min-width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-grid;
    place-items: center;
    font-size: 12px;
}

.hero {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 20%, rgba(211, 169, 68, .18), transparent 26%),
        linear-gradient(135deg, #fffdf8 0%, #f8ecd7 100%);
}
.hero__grid {
    min-height: 760px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 74px;
    padding-block: 70px;
}
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 800;
    color: #9b711e;
    margin-bottom: 18px;
}
.hero h1,
.section-heading h2,
.story h2,
.order-banner h2,
.product-modal h2,
.checkout-modal h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: .99;
}
.hero h1 { font-size: clamp(54px, 6.7vw, 94px); max-width: 760px; }
.hero h1 em { color: var(--gold); font-weight: 500; }
.hero__content > p { max-width: 650px; font-size: 18px; color: var(--ink-soft); margin: 28px 0 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
    min-height: 50px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button--gold { color: #21140e; background: linear-gradient(135deg, #e8cd74, #bd8820); box-shadow: 0 13px 30px rgba(171, 119, 20, .2); }
.button--ghost { color: var(--ink); background: rgba(255,255,255,.7); border-color: var(--line); }
.button--dark { color: white; background: var(--ink); }
.button--small { min-height: 40px; padding-inline: 16px; font-size: 12px; background: var(--ink); color: white; }
.button--full { width: 100%; }
.hero__trust {
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.hero__trust span { display: grid; gap: 2px; }
.hero__trust strong { font-size: 13px; }
.hero__trust small { color: var(--ink-soft); font-size: 11px; }
.hero__visual { position: relative; padding: 16px 34px 0 0; }
.hero__image-frame {
    position: relative;
    border-radius: 48px 48px 160px 48px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #2d1c18;
    aspect-ratio: .73;
}
.hero__image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero__image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.17);
    border-radius: inherit;
    pointer-events: none;
}
.hero__badge {
    position: absolute;
    left: -40px; bottom: 58px;
    width: 155px; height: 155px;
    border-radius: 50%;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: #f7ebcc;
    background: var(--ink);
    border: 8px solid var(--cream);
    box-shadow: 0 16px 42px rgba(33, 18, 10, .2);
    transform: rotate(-7deg);
}
.hero__badge span, .hero__badge small { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.hero__badge strong { font-family: Georgia, serif; font-size: 30px; color: var(--gold-light); }

.category-strip { background: var(--ink); color: white; }
.category-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.category-tile {
    min-height: 136px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.13);
    background: transparent;
    color: white;
    padding: 28px;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    cursor: pointer;
}
.category-tile:first-child { border-left: 1px solid rgba(255,255,255,.13); }
.category-tile:hover { background: rgba(255,255,255,.045); }
.category-tile__number { color: var(--gold-light); font-family: Georgia, serif; font-size: 20px; }
.category-tile span:nth-child(2) { display: grid; gap: 3px; }
.category-tile strong { font-size: 15px; }
.category-tile small { color: rgba(255,255,255,.55); font-size: 11px; }
.category-tile svg { width: 22px; fill: none; stroke: var(--gold-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}
.section-heading h2, .story h2, .order-banner h2 { font-size: clamp(42px, 5vw, 68px); }
.section-heading p { color: var(--ink-soft); margin: 12px 0 0; }
.text-link {
    appearance: none;
    border: 0;
    background: transparent;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.text-link:hover { color: #9b711e; }
.featured { background: var(--paper); }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.featured-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.featured-card:hover { transform: translateY(-6px); box-shadow: 0 20px 55px rgba(45, 26, 14, .11); }
.featured-card__image {
    width: 100%;
    height: 300px;
    padding: 18px;
    border: 0;
    background: linear-gradient(145deg, #fbf5e9, #f2e5cc);
    cursor: pointer;
}
.featured-card__image img { width: 100%; height: 100%; object-fit: contain; }
.featured-card__body { padding: 19px 20px 22px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.product-arabic { color: #9b711e; font-size: 13px; display: block; margin-bottom: 4px; }
.featured-card h3, .product-card h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.featured-card p, .product-card p { margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; }
.round-add {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 0;
    background: var(--ink);
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.story { background: var(--cream); overflow: hidden; }
.story__grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 80px; align-items: center; }
.story__image { position: relative; }
.story__image::before {
    content: "";
    position: absolute;
    width: 180px; height: 180px;
    border: 1px solid rgba(177, 126, 27, .4);
    border-radius: 50%;
    right: -56px; top: -56px;
}
.story__image img { border-radius: 180px 28px 28px 28px; width: 100%; max-height: 720px; object-fit: cover; box-shadow: var(--shadow); }
.story__content > p { color: var(--ink-soft); font-size: 17px; max-width: 700px; margin: 28px 0; }
.story blockquote {
    margin: 0;
    padding: 26px 0 26px 28px;
    border-left: 3px solid var(--gold);
    font-family: Georgia, serif;
    font-size: 25px;
    line-height: 1.25;
}
.story__facts { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.story__facts span { display: grid; border-top: 1px solid var(--line); padding-top: 14px; }
.story__facts strong { font-family: Georgia, serif; font-size: 34px; color: #8c681d; }
.story__facts small { color: var(--ink-soft); }

.shop { background: #fffdf8; }
.section-heading--shop { align-items: center; }
.shop-search { width: min(100%, 430px); }
.search-field {
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
}
.search-field svg { width: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.filter-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    min-height: 42px;
    padding: 0 17px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: white; }
.product-count { margin: 0; white-space: nowrap; color: var(--ink-soft); font-size: 13px; }
.product-count strong { color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card {
    min-width: 0;
    border: 1px solid var(--line);
    background: white;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 46px rgba(51, 29, 16, .1); }
.product-card[hidden] { display: none !important; }
.product-card__media {
    display: block;
    width: 100%;
    height: 270px;
    padding: 18px;
    border: 0;
    background: linear-gradient(145deg, #fffaf0, #f4e8d1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-badge {
    position: absolute;
    z-index: 2;
    left: 12px; top: 12px;
    background: var(--ink);
    color: #f8e4a4;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
}
.product-card__view {
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translate(-50%, 14px);
    opacity: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(36, 21, 15, .88);
    color: white;
    font-size: 11px;
    font-weight: 700;
    transition: opacity .2s ease, transform .2s ease;
}
.product-card:hover .product-card__view { opacity: 1; transform: translate(-50%, 0); }
.product-card__body { padding: 18px; }
.product-card__meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 13px; color: var(--ink-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.product-card__footer { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-request { font-size: 12px; font-weight: 800; color: #8d681d; }
.empty-state { text-align: center; padding: 80px 20px; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.empty-state h3 { font-family: Georgia, serif; font-size: 36px; margin: 0; }
.empty-state p { color: var(--ink-soft); }

.order-banner { padding-top: 0; }
.order-banner__inner {
    color: white;
    background:
        linear-gradient(110deg, rgba(36,21,15,.97), rgba(74,43,24,.91)),
        url('../images/hero-zahara-dates.webp') center 45% / cover;
    border-radius: var(--radius-lg);
    min-height: 330px;
    padding: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
.order-banner__inner > div { max-width: 760px; }
.order-banner h2 { color: white; }
.order-banner p { color: rgba(255,255,255,.7); margin-bottom: 0; }

.site-footer { background: #1b100c; color: #f5ead5; padding: 78px 0 24px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 55px; }
.footer__brand img { width: 170px; height: 82px; object-fit: cover; object-position: center 10%; border-radius: 10px; margin-bottom: 18px; }
.footer__brand p { margin: 0 0 4px; color: rgba(255,255,255,.78); max-width: 330px; }
.footer__brand span { color: var(--gold-light); font-family: Georgia, serif; font-style: italic; }
.site-footer h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-light); margin: 0 0 18px; }
.site-footer a, .site-footer p, .footer-link {
    display: block;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: 13px;
    margin: 0 0 11px;
}
.footer-link { appearance: none; background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; }
.site-footer a:hover, .footer-link:hover { color: white; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.11); margin-top: 52px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; }
.footer__bottom p, .footer__bottom a { margin: 0; font-size: 11px; }

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20, 12, 8, .48);
    backdrop-filter: blur(3px);
}
.cart-drawer {
    position: fixed;
    z-index: 310;
    top: 0; right: 0;
    width: min(100%, 460px);
    height: 100dvh;
    background: var(--paper);
    box-shadow: -20px 0 70px rgba(22, 11, 6, .2);
    transform: translateX(105%);
    transition: transform .3s ease;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__header { padding: 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.cart-drawer__header .eyebrow { margin-bottom: 2px; }
.cart-drawer__header h2 { margin: 0; font-family: Georgia, serif; font-size: 34px; }
.cart-drawer__body { overflow-y: auto; padding: 20px 24px; }
.cart-empty { text-align: center; padding: 50px 15px; }
.cart-empty__icon { width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; color: var(--gold); font-size: 26px; }
.cart-empty h3 { font-family: Georgia, serif; font-size: 30px; margin: 0; }
.cart-empty p { color: var(--ink-soft); margin: 12px 0 24px; }
.cart-items { display: grid; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 82px 1fr auto; gap: 13px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cart-item__image { width: 82px; height: 82px; border-radius: 12px; background: var(--cream); padding: 6px; }
.cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.cart-item h3 { font-size: 14px; margin: 0; }
.cart-item p { margin: 2px 0 8px; color: var(--ink-soft); font-size: 11px; }
.quantity-control { display: inline-grid; grid-template-columns: 30px 38px 30px; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.quantity-control button { width: 30px; height: 30px; border: 0; background: white; cursor: pointer; }
.quantity-control span { text-align: center; font-size: 12px; font-weight: 800; }
.cart-item__remove { border: 0; background: transparent; color: #8d5c4c; cursor: pointer; font-size: 18px; }
.cart-drawer__footer { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: white; }
.cart-summary { display: flex; justify-content: space-between; }
.cart-note { color: var(--ink-soft); font-size: 11px; }
.clear-cart { width: 100%; border: 0; background: transparent; margin-top: 10px; cursor: pointer; color: var(--ink-soft); font-size: 12px; }

.product-modal, .checkout-modal {
    width: min(calc(100% - 30px), 980px);
    max-height: calc(100dvh - 30px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: 0 35px 100px rgba(30, 15, 8, .32);
    background: var(--paper);
    color: var(--ink);
}
.product-modal::backdrop, .checkout-modal::backdrop { background: rgba(21, 12, 8, .6); backdrop-filter: blur(4px); }
.modal-close { position: absolute; z-index: 2; right: 18px; top: 18px; }
.product-modal__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.product-modal__image { padding: 40px; background: linear-gradient(145deg, #fffaf0, #eddfc5); display: grid; place-items: center; }
.product-modal__image img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; }
.product-modal__content { padding: 64px 50px 44px; }
.product-modal__content .eyebrow { margin-bottom: 10px; }
.product-modal h2, .checkout-modal h2 { font-size: clamp(42px, 5vw, 62px); }
.modal-description { color: var(--ink-soft); font-size: 15px; margin: 20px 0 28px; }
.product-details { margin: 0; border-top: 1px solid var(--line); }
.product-details div { display: grid; grid-template-columns: 100px 1fr; padding: 13px 0; border-bottom: 1px solid var(--line); }
.product-details dt { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.product-details dd { margin: 0; font-size: 13px; font-weight: 700; }
.modal-order-row { margin-top: 26px; display: flex; align-items: end; gap: 12px; }
.modal-order-row label { display: grid; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.modal-order-row input { width: 90px; height: 50px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; background: white; }
.modal-whatsapp { margin-top: 18px; }
.checkout-modal { width: min(calc(100% - 30px), 760px); }
.checkout-modal__content { padding: 52px; }
.checkout-modal__content > p { color: var(--ink-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
.form-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 800; }
.form-grid input, .form-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px 14px; outline: 0; }
.form-grid input:focus, .form-grid textarea:focus, .search-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,153,46,.12); }
.form-grid__full { grid-column: 1 / -1; }
.checkout-preview { background: var(--cream); border-radius: 14px; padding: 16px; margin-bottom: 18px; font-size: 12px; }
.checkout-preview strong { display: block; margin-bottom: 6px; }
.checkout-preview ul { margin: 0; padding-left: 18px; }
.form-help { text-align: center; color: var(--ink-soft); font-size: 10px; }
.toast {
    position: fixed;
    z-index: 500;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 30px);
    opacity: 0;
    pointer-events: none;
    background: var(--ink);
    color: white;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 15px 45px rgba(20,10,5,.22);
    font-size: 13px;
    transition: .25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.noscript-notice { background: #fff0c2; color: #4a3300; padding: 14px; text-align: center; }

@media (max-width: 1050px) {
    .hero__grid { gap: 44px; min-height: 680px; }
    .hero h1 { font-size: clamp(50px, 7vw, 76px); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .category-tile { padding: 20px 16px; gap: 12px; }
    .story__grid { gap: 45px; }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer__grid > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 820px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .section { padding: 72px 0; }
    .announcement__inner span { display: none; }
    .announcement__inner { justify-content: center; }
    .header__inner { grid-template-columns: auto 1fr auto auto; min-height: 74px; gap: 12px; }
    .brand { width: 130px; }
    .brand img { height: 62px; }
    .nav-toggle { display: inline-grid; justify-self: end; }
    .primary-nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 14px; right: 14px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 16px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
        gap: 0;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav a { padding: 13px 10px; }
    .primary-nav a::after { display: none; }
    .cart-button span:not(.cart-count) { display: none; }
    .cart-button { padding: 0 8px 0 13px; }
    .hero__grid { grid-template-columns: 1fr; min-height: auto; padding-block: 58px 70px; }
    .hero__content { text-align: center; }
    .hero__content > p { margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__trust { text-align: left; }
    .hero__visual { max-width: 540px; margin: 0 auto; padding-right: 0; }
    .hero__badge { left: -18px; }
    .category-strip__grid { grid-template-columns: 1fr 1fr; }
    .category-tile:nth-child(3) { border-left: 1px solid rgba(255,255,255,.13); }
    .category-tile { border-bottom: 1px solid rgba(255,255,255,.13); }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .story__grid { grid-template-columns: 1fr; }
    .story__image { max-width: 560px; }
    .story__image img { max-height: 600px; }
    .section-heading--shop { align-items: stretch; flex-direction: column; }
    .shop-search { width: 100%; }
    .shop-toolbar { align-items: flex-start; flex-direction: column; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .order-banner__inner { padding: 42px; flex-direction: column; align-items: flex-start; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__grid > div:last-child { grid-column: auto; }
    .product-modal__grid { grid-template-columns: 1fr; }
    .product-modal__image { min-height: 340px; }
    .product-modal__content { padding: 42px 28px 34px; }
}

@media (max-width: 560px) {
    .section { padding: 58px 0; }
    .hero__grid { padding-top: 42px; gap: 38px; }
    .hero h1 { font-size: 50px; }
    .hero__content > p { font-size: 15px; }
    .hero__actions .button { width: 100%; }
    .hero__trust { grid-template-columns: 1fr; gap: 12px; }
    .hero__trust span { grid-template-columns: 1fr 1.6fr; align-items: center; }
    .hero__image-frame { border-radius: 30px 30px 95px 30px; }
    .hero__badge { width: 120px; height: 120px; bottom: 32px; }
    .hero__badge strong { font-size: 24px; }
    .category-strip__grid { grid-template-columns: 1fr; }
    .category-tile, .category-tile:nth-child(3) { border-left: 1px solid rgba(255,255,255,.13); }
    .featured-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
    .featured-card { min-width: 82vw; scroll-snap-align: start; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .section-heading h2, .story h2, .order-banner h2 { font-size: 44px; }
    .story__facts { gap: 10px; }
    .story__facts strong { font-size: 27px; }
    .story__facts small { font-size: 10px; }
    .filter-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100vw - 28px); padding-bottom: 5px; }
    .filter-chip { flex: 0 0 auto; }
    .product-grid { grid-template-columns: 1fr; }
    .product-card__media { height: 320px; }
    .order-banner__inner { padding: 34px 24px; border-radius: 24px; }
    .footer__grid { grid-template-columns: 1fr; gap: 34px; }
    .footer__bottom { flex-direction: column; }
    .product-modal, .checkout-modal { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .product-modal__image { min-height: 290px; padding: 28px; }
    .product-modal__content { padding: 34px 22px 28px; }
    .modal-order-row { align-items: stretch; flex-direction: column; }
    .modal-order-row label { width: 100%; }
    .modal-order-row input { width: 100%; }
    .checkout-modal__content { padding: 40px 22px 26px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid__full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* =========================================================
   Compact responsive layout v1.1.0
   Reduces page height and keeps mobile shopping dense/readable.
   ========================================================= */
:root {
    --container: 1180px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
}

.section { padding: 72px 0; }
.announcement__inner { min-height: 30px; }
.header__inner { min-height: 72px; gap: 28px; }
.brand { width: 132px; }
.brand img { height: 58px; }
.primary-nav { gap: 28px; }
.cart-button { min-height: 42px; }

.hero__grid {
    min-height: 610px;
    grid-template-columns: 1.08fr .92fr;
    gap: 54px;
    padding-block: 42px;
}
.hero h1 { font-size: clamp(50px, 5.7vw, 76px); max-width: 650px; }
.hero__content > p { max-width: 590px; font-size: 16px; margin: 20px 0 26px; }
.eyebrow { margin-bottom: 12px; }
.button { min-height: 46px; padding-inline: 21px; }
.hero__trust { margin-top: 28px; padding-top: 18px; gap: 16px; }
.hero__visual { max-width: 500px; justify-self: end; padding: 8px 24px 0 0; }
.hero__image-frame { aspect-ratio: .82; max-height: 560px; border-radius: 38px 38px 120px 38px; }
.hero__badge { left: -28px; bottom: 38px; width: 126px; height: 126px; border-width: 6px; }
.hero__badge strong { font-size: 25px; }
.hero__badge span, .hero__badge small { font-size: 8px; }

.category-tile { min-height: 96px; padding: 18px 20px; gap: 13px; }
.category-tile__number { font-size: 18px; }
.category-tile strong { font-size: 13px; }
.category-tile svg { width: 19px; }

.section-heading { margin-bottom: 28px; }
.section-heading h2, .story h2, .order-banner h2 { font-size: clamp(40px, 4.5vw, 56px); }
.featured-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.featured-card__image { height: 210px; padding: 13px; }
.featured-card__body { padding: 14px 15px 16px; }
.featured-card h3, .product-card h3 { font-size: 17px; }
.round-add { width: 38px; height: 38px; font-size: 21px; }

.story__grid { grid-template-columns: .78fr 1.22fr; gap: 50px; }
.story__image img { max-height: 490px; border-radius: 120px 24px 24px 24px; }
.story__content > p { font-size: 15px; margin: 20px 0; }
.story blockquote { padding: 18px 0 18px 22px; font-size: 21px; }
.story__facts { margin-top: 24px; gap: 14px; }
.story__facts strong { font-size: 30px; }

.shop-search { width: min(100%, 380px); }
.search-field { min-height: 46px; }
.shop-toolbar { margin-bottom: 20px; }
.filter-chip { min-height: 38px; padding-inline: 14px; }
.product-grid { gap: 14px; }
.product-card__media { height: 215px; padding: 13px; }
.product-card__body { padding: 14px; }
.product-card__meta { margin-bottom: 9px; }
.product-card__footer { margin-top: 13px; }
.button--small { min-height: 36px; padding-inline: 13px; }

.order-banner__inner { min-height: 220px; padding: 38px 44px; gap: 32px; }
.site-footer { padding: 54px 0 20px; }
.footer__grid { gap: 38px; }
.footer__bottom { margin-top: 34px; padding-top: 18px; }

@media (max-width: 1050px) {
    .hero__grid { min-height: 560px; gap: 36px; }
    .featured-grid { grid-template-columns: repeat(3, 1fr); }
    .featured-card:nth-child(4) { display: none; }
    .product-card__media { height: 205px; }
}

@media (max-width: 820px) {
    .section { padding: 52px 0; }
    .header__inner { min-height: 64px; }
    .brand { width: 116px; }
    .brand img { height: 52px; }
    .hero__grid { padding-block: 38px 46px; gap: 30px; }
    .hero__visual { max-width: 410px; justify-self: center; }
    .hero__image-frame { max-height: 430px; }
    .category-strip__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .category-tile,
    .category-tile:nth-child(3) {
        flex: 0 0 220px;
        min-height: 82px;
        border-left: 0;
        border-bottom: 0;
        scroll-snap-align: start;
    }
    .category-tile:first-child { border-left: 1px solid rgba(255,255,255,.13); }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-card:nth-child(4) { display: block; }
    .featured-card__image { height: 220px; }
    .story__image { max-width: 390px; margin-inline: auto; }
    .story__image img { max-height: 380px; }
    .story__grid { gap: 34px; }
    .order-banner__inner { padding: 34px; }
}

@media (max-width: 560px) {
    .container { width: min(calc(100% - 24px), var(--container)); }
    .section { padding: 42px 0; }
    .announcement { font-size: 11px; }
    .announcement__inner { min-height: 28px; }
    .header__inner { min-height: 58px; gap: 8px; }
    .brand { width: 104px; }
    .brand img { height: 46px; border-radius: 8px; }
    .icon-button { width: 38px; height: 38px; }
    .cart-button { min-height: 38px; padding: 0 6px 0 10px; gap: 5px; }
    .cart-count { min-width: 24px; height: 24px; }

    .hero__grid { padding-block: 28px 34px; gap: 24px; }
    .hero h1 { font-size: clamp(38px, 12vw, 46px); line-height: 1.01; }
    .hero__content > p { font-size: 14px; margin: 14px auto 18px; line-height: 1.45; }
    .hero__actions { gap: 9px; }
    .hero__actions .button { min-height: 43px; font-size: 12px; }
    .hero__trust {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 20px;
        padding-top: 14px;
        text-align: center;
    }
    .hero__trust span { display: grid; grid-template-columns: 1fr; gap: 2px; padding-inline: 6px; }
    .hero__trust span + span { border-left: 1px solid var(--line); }
    .hero__trust strong { font-size: 10px; }
    .hero__trust small { font-size: 8px; line-height: 1.25; }
    .hero__visual { max-width: 300px; }
    .hero__image-frame { aspect-ratio: .92; max-height: 320px; border-radius: 26px 26px 72px 26px; }
    .hero__badge { width: 88px; height: 88px; left: -8px; bottom: 20px; border-width: 4px; }
    .hero__badge strong { font-size: 18px; }
    .hero__badge span, .hero__badge small { font-size: 6px; }

    .category-strip__grid { width: 100%; }
    .category-tile,
    .category-tile:nth-child(3) {
        flex-basis: 178px;
        min-height: 72px;
        padding: 12px 14px;
        gap: 10px;
    }
    .category-tile__number { font-size: 16px; }
    .category-tile strong { font-size: 11px; }
    .category-tile small { font-size: 9px; }
    .category-tile svg { width: 16px; }

    .section-heading { gap: 10px; margin-bottom: 20px; }
    .section-heading h2, .story h2, .order-banner h2 { font-size: 38px; }
    .section-heading p { margin-top: 7px; font-size: 13px; }
    .eyebrow { font-size: 9px; margin-bottom: 8px; }
    .text-link { font-size: 11px; }

    .featured-grid { gap: 10px; padding-bottom: 6px; }
    .featured-card { min-width: 70vw; }
    .featured-card__image { height: 184px; padding: 10px; }
    .featured-card__body { padding: 12px; }
    .featured-card h3 { font-size: 15px; }
    .featured-card p { font-size: 10px; }
    .round-add { width: 34px; height: 34px; }

    .story__grid { gap: 24px; }
    .story__image { max-width: 100%; }
    .story__image::before { width: 110px; height: 110px; right: -24px; top: -24px; }
    .story__image img { width: 100%; height: 250px; max-height: none; object-position: center 28%; border-radius: 70px 18px 18px 18px; }
    .story__content > p { font-size: 13px; line-height: 1.5; margin: 14px 0; }
    .story blockquote { padding: 13px 0 13px 16px; font-size: 17px; }
    .story__facts { margin-top: 18px; gap: 8px; }
    .story__facts strong { font-size: 24px; }
    .story__facts small { font-size: 8px; line-height: 1.25; }

    .section-heading--shop { gap: 16px; }
    .search-field { min-height: 43px; padding-inline: 14px; }
    .shop-toolbar { gap: 10px; margin-bottom: 14px; }
    .filter-chips { width: calc(100vw - 24px); gap: 7px; }
    .filter-chip { min-height: 34px; padding-inline: 12px; font-size: 10px; }
    .product-count { font-size: 11px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-card__media { height: 150px; padding: 9px; }
    .product-badge { left: 7px; top: 7px; padding: 4px 7px; font-size: 7px; }
    .product-card__view { display: none; }
    .product-card__body { padding: 10px; }
    .product-card__meta { margin-bottom: 7px; font-size: 7px; }
    .product-card__meta span:last-child { display: none; }
    .product-arabic { font-size: 10px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .product-card h3 { font-size: 14px; line-height: 1.2; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .product-card p { font-size: 9px; line-height: 1.3; min-height: 24px; }
    .product-card__footer { margin-top: 9px; display: grid; gap: 7px; align-items: stretch; }
    .price-request { font-size: 9px; }
    .product-card .button--small { width: 100%; min-height: 34px; padding-inline: 6px; font-size: 9px; }

    .order-banner__inner { min-height: 0; padding: 26px 22px; gap: 20px; border-radius: 20px; }
    .order-banner__inner .button { width: 100%; }
    .order-banner p { font-size: 13px; line-height: 1.45; }

    .site-footer { padding: 40px 0 18px; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__grid > div:last-child { grid-column: 1 / -1; }
    .footer__brand img { width: 130px; height: 62px; margin-bottom: 12px; }
    .site-footer h2 { margin-bottom: 12px; font-size: 10px; }
    .site-footer a, .site-footer p, .footer-link { margin-bottom: 8px; font-size: 11px; }
    .footer__bottom { margin-top: 24px; gap: 8px; }
    .footer__bottom p, .footer__bottom a { font-size: 9px; }

    .cart-drawer { width: 100%; }
    .cart-drawer__header { padding: 18px; }
    .cart-drawer__body { padding: 16px 18px; }
    .cart-drawer__footer { padding: 16px 18px 18px; }
}

@media (max-width: 380px) {
    .container { width: min(calc(100% - 18px), var(--container)); }
    .hero h1 { font-size: 36px; }
    .hero__actions .button { font-size: 11px; }
    .hero__visual { max-width: 270px; }
    .product-grid { gap: 8px; }
    .product-card__media { height: 132px; }
    .product-card__body { padding: 8px; }
    .product-card h3 { font-size: 13px; min-height: 31px; }
    .product-card .button--small { font-size: 8px; }
}

/* =========================================================
   Compact mobile commerce layout v1.2.0
   ========================================================= */
.header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.header-search svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hero__visual-mobile { display: none; }

.hero__grid { min-height: 520px; padding-block: 44px; gap: 48px; }
.hero h1 { font-size: clamp(48px, 5.3vw, 72px); }
.hero__mobile-row > p { max-width: 590px; font-size: 15px; color: var(--ink-soft); margin: 18px 0 24px; }
.hero__trust { margin-top: 24px; padding-top: 16px; }
.hero__visual { max-width: 430px; justify-self: end; padding: 0 20px 0 0; }
.hero__image-frame { max-height: 470px; border-radius: 32px 32px 100px 32px; }
.hero__badge { width: 112px; height: 112px; left: -24px; bottom: 30px; border-width: 5px; }
.hero__badge strong { font-size: 23px; }
.hero__badge span, .hero__badge small { font-size: 7px; }

.category-tile { min-height: 84px; padding: 14px 18px; }
.section { padding: 60px 0; }
.section-heading { margin-bottom: 24px; }

.featured-carousel { position: relative; }
.carousel-dots { display: none; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(36, 21, 15, .24); cursor: pointer; transition: width .2s ease, background .2s ease; }
.carousel-dots button.is-active { width: 22px; background: var(--gold); }
.round-add { position: relative; }
.round-add__count { display: grid; place-items: center; width: 100%; height: 100%; font-size: 13px; font-weight: 800; }

.story__grid { grid-template-columns: .78fr 1.22fr; grid-template-areas: "image content" "image facts"; gap: 24px 48px; align-items: center; }
.story__image { grid-area: image; }
.story__content { grid-area: content; align-self: end; }
.story__facts { grid-area: facts; align-self: start; margin-top: 0; }
.story__image img { max-height: 430px; border-radius: 100px 20px 20px 20px; }
.story__content > p { margin: 16px 0; font-size: 14px; }
.story blockquote { padding: 14px 0 14px 18px; font-size: 19px; }
.story__facts strong { font-size: 27px; }
.story__facts small { font-size: 11px; }

.section-heading--shop { margin-bottom: 14px; }
.shop-title-row { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 18px; }
.shop-title-row .product-count { margin-bottom: 8px; }
.catalogue-controls { margin-bottom: 18px; }
.shop-search { width: min(100%, 430px); margin-bottom: 12px; }
.search-field { min-height: 44px; }
.search-clear { width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; font-size: 18px; line-height: 1; }
.shop-toolbar { margin-bottom: 0; }
.filter-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 36px; padding-inline: 14px; }

.product-grid { align-items: stretch; }
.product-card { display: flex; flex-direction: column; }
.product-card__media { height: auto; aspect-ratio: 4 / 3; padding: 12px; }
.product-card__media img,
.featured-card__image img { border-radius: 10px; object-fit: contain; }
.product-card__body { flex: 1; display: flex; flex-direction: column; }
.product-card__meta { min-height: 15px; }
.product-card .product-arabic { min-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card h3 { min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__body > p { min-height: 18px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__footer { margin-top: auto; padding-top: 12px; align-items: end; }
.price-request { line-height: 1.2; }
.card-cart-actions { flex: 0 0 auto; }
.card-cart-actions .quantity-control { grid-template-columns: 34px 34px 34px; background: white; }
.card-cart-actions .quantity-control button { width: 34px; height: 34px; }
.card-cart-actions [hidden] { display: none !important; }

.order-banner__inner { min-height: 180px; padding: 30px 38px; }
.order-banner h2 { font-size: clamp(38px, 4.5vw, 56px); }
.order-banner p { max-width: 680px; font-size: 14px; }

.footer-group { min-width: 0; }
.footer-group__content { padding-top: 14px; }
.footer-group__content > * { display: block; }
.footer-whatsapp { color: var(--gold-light) !important; font-weight: 800; }

.mobile-bottom-nav { display: none; }

.quote-modal { width: min(calc(100% - 30px), 760px); }

@media (max-width: 1050px) {
    .hero__grid { min-height: 500px; }
    .hero__visual { max-width: 390px; }
    .story__grid { gap: 24px 34px; }
}

@media (max-width: 820px) {
    .header__inner { grid-template-columns: auto 1fr auto auto; }
    .header-actions { grid-column: 3; }
    .cart-button { grid-column: 4; }
    .hero__grid { grid-template-columns: 1fr; padding-block: 38px 44px; }
    .hero__visual { max-width: 360px; justify-self: center; }
    .story__grid { grid-template-columns: 1fr; grid-template-areas: "content" "image" "facts"; gap: 24px; }
    .story__image { max-width: 100%; }
    .story__image img { width: 100%; height: 300px; max-height: none; object-position: center 32%; }
    .story__content { align-self: auto; }
    .story__facts { align-self: auto; }
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    html { scroll-padding-top: 96px; }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .container { width: min(calc(100% - 20px), var(--container)); }
    .section { padding: 34px 0; }
    .announcement__inner { min-height: 26px; }
    .announcement a { font-size: 10px; }
    .header__inner { min-height: 54px; grid-template-columns: auto 1fr auto auto; gap: 6px; }
    .brand { width: 96px; }
    .brand img { height: 42px; }
    .header-search { display: inline-grid; }
    .header-actions { gap: 5px; }
    .icon-button { width: 36px; height: 36px; }
    .cart-button { min-height: 36px; padding: 0 5px 0 9px; }
    .cart-button svg { width: 18px; height: 18px; }
    .cart-count { min-width: 22px; height: 22px; font-size: 10px; }

    .hero__grid { display: block; padding-block: 24px 26px; }
    .hero__content { text-align: left; }
    .hero h1 { max-width: 330px; font-size: clamp(37px, 11vw, 44px); line-height: .98; }
    .hero__mobile-row { display: grid; grid-template-columns: 1fr 126px; align-items: center; gap: 10px; margin-top: 12px; }
    .hero__mobile-row > p { margin: 0; font-size: 12px; line-height: 1.45; text-align: left; }
    .hero__visual-mobile { display: block; position: relative; border-radius: 18px 18px 44px 18px; overflow: hidden; box-shadow: 0 12px 28px rgba(44,25,12,.14); aspect-ratio: .9; background: var(--ink); }
    .hero__visual-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
    .hero__visual-mobile span { position: absolute; left: 8px; bottom: 8px; right: 8px; padding: 5px 6px; border-radius: 999px; background: rgba(36,21,15,.82); color: #f6df9b; text-align: center; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .hero__visual { display: none; }
    .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
    .hero__actions .button { width: 100%; min-height: 42px; padding-inline: 8px; font-size: 10px; }
    .hero__trust { grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 12px; gap: 0; text-align: center; }
    .hero__trust span { display: grid; grid-template-columns: 1fr; gap: 2px; padding-inline: 5px; }
    .hero__trust span + span { border-left: 1px solid var(--line); }
    .hero__trust strong { font-size: 9px; }
    .hero__trust small { font-size: 7px; line-height: 1.25; }

    .category-strip { display: none; }
    .section-heading { margin-bottom: 16px; }
    .section-heading h2, .story h2, .order-banner h2 { font-size: 34px; }
    .eyebrow { margin-bottom: 7px; font-size: 8px; }
    .text-link { font-size: 10px; }

    .featured-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 22px 2px 0; }
    .featured-grid::-webkit-scrollbar { display: none; }
    .featured-card, .featured-card:nth-child(4) { display: block; flex: 0 0 calc(100% - 42px); min-width: 0; scroll-snap-align: start; }
    .featured-card__image { height: auto; aspect-ratio: 4 / 3; padding: 10px; }
    .featured-card__body { padding: 11px 12px 13px; }
    .featured-card h3 { font-size: 15px; }
    .carousel-dots { display: flex; }

    .story__grid { gap: 16px; }
    .story__content > p { margin: 10px 0 0; font-size: 12px; }
    .story blockquote { display: none; }
    .story__image::before { display: none; }
    .story__image img { height: 205px; border-radius: 54px 14px 14px 14px; }
    .story__facts { margin-top: 2px; gap: 6px; }
    .story__facts span { padding-top: 9px; }
    .story__facts strong { font-size: 22px; }
    .story__facts small { font-size: 7px; line-height: 1.2; }

    .section-heading--shop { margin-bottom: 10px; }
    .shop-title-row { align-items: center; justify-content: space-between; gap: 8px; }
    .shop-title-row .product-count { margin: 0; font-size: 10px; }
    .section-heading--shop p { font-size: 11px; margin-top: 5px; }
    .catalogue-controls { position: sticky; z-index: 60; top: 80px; margin: 0 -10px 12px; padding: 8px 10px 7px; background: rgba(255,253,248,.97); border-block: 1px solid var(--line); box-shadow: 0 7px 20px rgba(44,25,12,.06); backdrop-filter: blur(12px); }
    .shop-search { margin-bottom: 7px; }
    .search-field { min-height: 40px; padding-inline: 12px; }
    .search-field input { font-size: 12px; }
    .filter-chips { width: calc(100vw - 20px); gap: 6px; }
    .filter-chip { min-height: 31px; padding-inline: 11px; font-size: 9px; }

    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .product-card { border-radius: 11px; }
    .product-card__media { aspect-ratio: 4 / 3; height: auto; padding: 7px; }
    .product-badge { left: 6px; top: 6px; font-size: 6px; padding: 3px 6px; }
    .product-card__body { min-height: 180px; padding: 8px; }
    .product-card__meta { min-height: 11px; margin-bottom: 5px; font-size: 6px; }
    .product-card .product-arabic { min-height: 14px; margin-bottom: 1px; font-size: 8px; }
    .product-card h3 { min-height: 31px; font-size: 13px; line-height: 1.18; }
    .product-card__body > p { min-height: 14px; margin-top: 3px; font-size: 8px; }
    .product-card__footer { display: grid; gap: 6px; padding-top: 8px; }
    .price-request { font-size: 7px; }
    .card-cart-actions { width: 100%; }
    .product-card .button--small { width: 100%; min-height: 42px; font-size: 9px; }
    .card-cart-actions .quantity-control { width: 100%; grid-template-columns: 42px 1fr 42px; min-height: 42px; }
    .card-cart-actions .quantity-control button { width: 42px; height: 42px; font-size: 18px; }

    .order-banner__inner { min-height: 0; padding: 22px 18px; gap: 14px; border-radius: 18px; }
    .order-banner p { margin-top: 8px; font-size: 11px; line-height: 1.4; }
    .order-banner__inner .button { width: 100%; min-height: 43px; }

    .site-footer { padding: 30px 0 14px; }
    .footer__grid { grid-template-columns: 1fr; gap: 13px; }
    .footer__brand { padding-bottom: 10px; }
    .footer__brand img { width: 112px; height: 52px; margin-bottom: 8px; }
    .footer__brand p { font-size: 9px; margin-bottom: 2px; }
    .footer__brand span { font-size: 12px; }
    .footer-group { border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
    .footer-group__content { padding: 10px 0 2px; }
    .site-footer a, .site-footer p, .footer-link { margin-bottom: 6px; font-size: 10px; }
    .footer__bottom { margin-top: 14px; padding-top: 12px; flex-direction: row; align-items: center; }
    .footer__bottom p, .footer__bottom a { font-size: 7px; }

    .mobile-bottom-nav { position: fixed; z-index: 220; left: 0; right: 0; bottom: 0; min-height: 58px; padding: 5px max(7px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,253,248,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px rgba(44,25,12,.1); backdrop-filter: blur(14px); }
    .mobile-bottom-nav a, .mobile-bottom-nav button { position: relative; min-width: 0; border: 0; background: transparent; color: var(--ink); text-decoration: none; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 2px; font-size: 8px; font-weight: 700; cursor: pointer; }
    .mobile-bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-bottom-nav b { position: absolute; top: 0; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; display: grid; place-items: center; background: var(--gold); font-size: 8px; }
    .toast { bottom: calc(72px + env(safe-area-inset-bottom)); max-width: calc(100% - 28px); text-align: center; font-size: 11px; }

    .product-modal, .checkout-modal, .quote-modal { max-height: 92dvh; }
    .product-modal__image { min-height: 210px; max-height: 230px; padding: 18px; }
    .product-modal__content { padding: 26px 18px 20px; }
    .product-modal h2, .checkout-modal h2 { font-size: 34px; }
    .modal-description { margin: 12px 0 16px; font-size: 12px; }
    .product-details div { grid-template-columns: 92px 1fr; padding: 9px 0; }
    .product-details dt { font-size: 8px; }
    .product-details dd { font-size: 10px; }
    .modal-order-row { margin-top: 16px; }
    .checkout-modal__content { padding: 30px 18px 20px; }
    .form-grid { gap: 10px; margin: 18px 0; }
    .form-grid label { font-size: 10px; }
    .form-grid input, .form-grid textarea { padding: 10px 11px; font-size: 12px; }
    .form-help { font-size: 8px; }
}

@media (max-width: 380px) {
    .hero h1 { font-size: 35px; }
    .hero__mobile-row { grid-template-columns: 1fr 112px; }
    .hero__actions .button { font-size: 9px; }
    .product-card__body { min-height: 174px; padding: 7px; }
    .product-card h3 { font-size: 12px; }
    .catalogue-controls { top: 78px; }
}

/* =========================================================
   Mobile polish v1.2.1
   Fixes sticky toolbar gap and improves two-column readability.
   ========================================================= */
@media (max-width: 560px) {
    /* The announcement scrolls away, so the catalogue toolbar must sit
       directly below the 54px sticky header rather than leaving a 26px gap. */
    .catalogue-controls {
        top: 54px;
        z-index: 90;
        margin-bottom: 10px;
        padding-top: 9px;
        padding-bottom: 8px;
        background: #fffdf8;
        box-shadow: 0 8px 22px rgba(44,25,12,.08);
    }

    .filter-chips {
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding-right: 18px;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-chip { scroll-snap-align: start; }

    /* Keep two products per row, but restore comfortable reading sizes. */
    .product-grid { gap: 10px; }
    .product-card { border-radius: 13px; }
    .product-card__media { padding: 8px; }
    .product-card__body {
        min-height: 198px;
        padding: 10px;
    }
    .product-card__meta {
        min-height: 13px;
        margin-bottom: 6px;
        font-size: 7.5px;
        line-height: 1.25;
    }
    .product-card .product-arabic {
        min-height: 16px;
        margin-bottom: 2px;
        font-size: 9.5px;
        line-height: 1.25;
    }
    .product-card h3 {
        min-height: 35px;
        font-size: 14px;
        line-height: 1.22;
    }
    .product-card__body > p {
        min-height: 17px;
        margin-top: 5px;
        font-size: 9.5px;
        line-height: 1.35;
    }
    .product-card__footer {
        gap: 8px;
        padding-top: 10px;
    }
    .price-request {
        font-size: 8.5px;
        line-height: 1.25;
    }
    .product-card .button--small {
        min-height: 44px;
        font-size: 10.5px;
        letter-spacing: 0;
    }
    .card-cart-actions .quantity-control {
        min-height: 44px;
        grid-template-columns: 44px 1fr 44px;
    }
    .card-cart-actions .quantity-control button {
        width: 44px;
        height: 44px;
    }

    /* Keep the bottom navigation from visually crowding the last row. */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .product-grid { padding-bottom: 8px; }
}

@media (max-width: 380px) {
    .catalogue-controls { top: 54px; }
    .product-card__body { min-height: 192px; padding: 9px; }
    .product-card h3 { font-size: 13px; }
    .product-card .button--small { font-size: 10px; }
}

@media (max-width: 335px) {
    .product-grid { grid-template-columns: 1fr; }
    .product-card__media { aspect-ratio: 4 / 3; }
    .product-card__body { min-height: 176px; }
}

/* =========================================================
   Final desktop and responsive polish v1.3.0
   Keeps the header on one row, improves catalogue readability,
   centres incomplete product rows and removes excess page space.
   ========================================================= */

/* Header actions are one unit, preventing the basket from dropping to a new row. */
.header__inner {
    grid-template-columns: auto minmax(280px, 1fr) auto;
    gap: 26px;
}
.header-actions {
    justify-self: end;
    flex-wrap: nowrap;
}
.header-actions .cart-button { flex: 0 0 auto; }

/* Refine the hero balance without increasing page height. */
@media (min-width: 821px) {
    .hero__grid {
        grid-template-columns: 1.13fr .87fr;
        gap: 42px;
        min-height: 500px;
        padding-block: 38px;
    }
    .hero__mobile-row > p { max-width: 640px; }
    .hero__visual {
        width: 100%;
        max-width: 400px;
        justify-self: center;
        padding-right: 0;
    }
    .hero__image-frame { max-height: 440px; }
    .hero__trust {
        margin-top: 20px;
        padding-top: 14px;
    }
}

/* The featured card title area is now a proper, keyboard-accessible details control. */
.featured-card__body { align-items: center; }
.featured-card__details {
    appearance: none;
    min-width: 0;
    flex: 1;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.featured-card__details:focus-visible,
.featured-card__image:focus-visible,
.product-card__media:focus-visible,
.round-add:focus-visible,
.button:focus-visible,
.icon-button:focus-visible,
.cart-button:focus-visible {
    outline: 3px solid rgba(201, 153, 46, .52);
    outline-offset: 3px;
}
.featured-card__image img,
.product-card__media img { object-position: center; }

/* Replace the unreadable brochure page with a clean, single product scene. */
.story__image img {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 390px;
    object-fit: cover;
    object-position: center;
    border-radius: 34px;
}
.story__image::before {
    width: 130px;
    height: 130px;
    right: -34px;
    top: -34px;
}
.story__facts { margin-top: 12px; }

/* Give the catalogue heading a clear visual start and improve desktop scanning. */
.shop.section {
    padding-top: 78px;
    padding-bottom: 50px;
}
@media (min-width: 821px) {
    .product-card__meta { font-size: 9.5px; }
    .product-card .product-arabic {
        min-height: 20px;
        font-size: 12px;
    }
    .product-card h3 {
        min-height: 44px;
        font-size: 18px;
        line-height: 1.22;
    }
    .product-card__body > p {
        min-height: 19px;
        font-size: 11.5px;
    }
    .price-request {
        max-width: 118px;
        font-size: 11px;
        line-height: 1.25;
    }
    .product-card .button--small {
        min-height: 40px;
        padding-inline: 14px;
        font-size: 11.5px;
    }
}

/* JavaScript applies this to the first card in an incomplete final row. */
.product-card.is-orphan-start {
    grid-column-start: var(--orphan-start, auto);
}

/* Compact and better-align the wholesale callout. */
.order-banner.section {
    padding-top: 22px;
    padding-bottom: 52px;
}
.order-banner__inner {
    min-height: 164px;
    padding: 28px 38px;
}
.order-banner__inner > div { max-width: 720px; }
.order-banner p {
    color: rgba(255,255,255,.84);
    line-height: 1.5;
}
.order-banner__inner > .button {
    min-width: 210px;
    min-height: 46px;
}

/* Larger, clearer footer text with less unused space. */
.site-footer { padding: 44px 0 18px; }
.footer__grid {
    grid-template-columns: 1.35fr repeat(3, minmax(145px, 1fr));
    gap: 36px;
}
.footer__brand img {
    width: 150px;
    height: 70px;
    margin-bottom: 14px;
}
.site-footer a,
.site-footer p,
.footer-link {
    font-size: 12px;
    line-height: 1.55;
}
.footer-whatsapp {
    display: inline-flex !important;
    width: max-content;
    align-items: center;
    min-height: 38px;
    margin-top: 4px;
    padding: 0 13px;
    border: 1px solid rgba(230, 200, 102, .42);
    border-radius: 999px;
    background: rgba(230, 200, 102, .08);
    text-decoration: none;
}
.footer__bottom {
    margin-top: 28px;
    padding-top: 16px;
}
.footer__bottom p,
.footer__bottom a { font-size: 10px; }

@media (max-width: 1050px) and (min-width: 821px) {
    .header__inner { gap: 18px; }
    .primary-nav { gap: 20px; }
    .primary-nav a { font-size: 13px; }
    .hero__visual { max-width: 370px; }
    .footer__grid {
        grid-template-columns: 1.25fr repeat(3, 1fr);
        gap: 26px;
    }
}

@media (max-width: 820px) {
    .header__inner {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
    }
    .header-actions {
        grid-column: 3;
        gap: 7px;
    }
    .story__image img {
        aspect-ratio: 4 / 3;
        height: 300px;
        max-height: none;
        border-radius: 28px;
    }
    .shop.section {
        padding-top: 56px;
        padding-bottom: 40px;
    }
    .order-banner.section {
        padding-top: 12px;
        padding-bottom: 42px;
    }
}

@media (max-width: 560px) {
    .header__inner {
        grid-template-columns: auto 1fr auto;
        gap: 6px;
    }
    .header-actions {
        grid-column: 3;
        gap: 5px;
    }
    .featured-card__details h3 { font-size: 15px; }
    .story__image img {
        height: 205px;
        border-radius: 20px;
    }
    .shop.section {
        padding-top: 40px;
        padding-bottom: 28px;
    }
    .order-banner.section {
        padding-top: 8px;
        padding-bottom: 30px;
    }
    .order-banner__inner > .button {
        min-width: 0;
        min-height: 44px;
    }
    .footer-whatsapp {
        min-height: 36px;
        padding-inline: 12px;
    }
}



/* v7: fixed footer columns — no accordion, plus or minus controls. */
.footer-group {
    min-width: 0;
}
.footer-group > h2 {
    margin: 0 0 14px;
}
.footer-group__content {
    padding-top: 0;
}
.footer-group__content > * {
    display: block;
}

@media (max-width: 560px) {
    .site-footer {
        padding: 28px 0 14px;
    }
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }
    .footer__brand,
    .footer-group--location {
        grid-column: 1 / -1;
    }
    .footer__brand {
        padding-bottom: 4px;
    }
    .footer-group {
        border-top: 1px solid rgba(255,255,255,.12);
        padding-top: 12px;
    }
    .footer-group > h2 {
        margin-bottom: 9px;
        font-size: 9px;
    }
    .footer-group__content {
        padding: 0;
    }
    .footer-group--shop .footer-group__content,
    .footer-group--contact .footer-group__content {
        min-width: 0;
    }
    .site-footer a,
    .site-footer p,
    .footer-link {
        overflow-wrap: anywhere;
    }
    .footer-whatsapp {
        width: 100%;
        justify-content: center;
        padding-inline: 8px;
        text-align: center;
    }
}

/* =========================================================
   v8: lighter typography and flatter button styling
   Reduces heavy bold weights and removes raised button shadows
   while preserving contrast, touch sizes and accessibility.
   ========================================================= */

/* Use medium weights for navigation, labels, product copy and actions. */
.primary-nav a,
.cart-button,
.button,
.text-link,
.filter-chip,
.product-badge,
.product-card__view,
.price-request,
.quantity-control span,
.product-details dd,
.modal-order-row label,
.form-grid label,
.round-add__count,
.footer-whatsapp,
.mobile-bottom-nav a,
.mobile-bottom-nav button {
    font-weight: 600;
}

.eyebrow,
.category-tile strong,
.hero__trust strong,
.featured-card h3,
.product-card h3,
.site-footer h2,
.footer-group > h2 {
    font-weight: 600;
}

.product-count strong,
.story__facts strong {
    font-weight: 500;
}

/* Flat, restrained buttons: no drop shadow or hover jump. */
.button,
.cart-button,
.icon-button,
.round-add,
.filter-chip,
.footer-whatsapp,
.quantity-control,
.quantity-control button,
.clear-cart,
.search-clear {
    box-shadow: none !important;
    text-shadow: none !important;
}

.button {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.button:hover {
    transform: none;
}
.button--gold {
    background: #d8af45;
}
.button--gold:hover {
    background: #c99a2f;
}
.button--dark,
.button--small,
.cart-button,
.round-add {
    background: #2f1d16;
}
.button--dark:hover,
.button--small:hover,
.cart-button:hover,
.round-add:hover {
    background: #43291f;
}
.button--ghost:hover,
.icon-button:hover,
.filter-chip:hover {
    background: #f7efe1;
}

/* Keep action labels readable without appearing oversized or heavy. */
.product-card .button--small,
.order-banner__inner > .button,
.hero__actions .button,
.footer-whatsapp {
    letter-spacing: 0;
}

@media (max-width: 560px) {
    .product-card h3,
    .featured-card__details h3 {
        font-weight: 600;
    }
    .product-card .button--small,
    .hero__actions .button,
    .order-banner__inner > .button {
        font-weight: 600;
    }
}

/* =========================================================
   v9: mobile WhatsApp navigation icon correction
   Uses a filled, high-contrast WhatsApp mark so the icon stays
   clear at small mobile sizes and at browser preview scaling.
   ========================================================= */
@media (max-width: 760px) {
    .mobile-bottom-nav .mobile-nav__whatsapp-icon {
        width: 21px;
        height: 21px;
        overflow: visible;
        fill: currentColor;
        stroke: none;
    }

    .mobile-bottom-nav .mobile-nav__whatsapp-bubble {
        fill: #239b56;
    }

    .mobile-bottom-nav .mobile-nav__whatsapp-phone {
        fill: #fffdf8;
    }

    .mobile-bottom-nav .mobile-nav__whatsapp {
        color: var(--ink);
    }

    .mobile-bottom-nav .mobile-nav__whatsapp span {
        line-height: 1.05;
    }
}

/* =========================================================
   v10: mobile header and hero refinement
   Creates one clear sticky header, improves logo/action spacing,
   and rebalances the hero so products appear sooner on mobile.
   ========================================================= */
@media (max-width: 560px) {
    /* WhatsApp remains in the menu and bottom navigation, so the extra
       announcement strip is removed from the compact mobile header. */
    .announcement { display: none; }

    html { scroll-padding-top: 72px; }
    .site-header {
        top: 0;
        background: rgba(255, 253, 248, .98);
        border-bottom-color: var(--line);
        box-shadow: 0 7px 22px rgba(44, 25, 12, .07);
        backdrop-filter: blur(18px);
    }
    .header__inner {
        min-height: 64px;
        grid-template-columns: minmax(112px, 1fr) auto;
        gap: 12px;
        padding-block: 5px;
    }
    .brand {
        width: 118px;
        max-width: 100%;
    }
    .brand img {
        width: 118px;
        height: 50px;
        object-fit: cover;
        object-position: center 11%;
        border-radius: 10px;
    }
    .header-actions {
        grid-column: 2;
        justify-self: end;
        gap: 7px;
    }
    .icon-button {
        width: 40px;
        height: 40px;
        background: #fffdf8;
        border-color: rgba(63, 38, 22, .18);
    }
    .nav-toggle { background: #f7efe1; }
    .header-search svg,
    .nav-toggle svg { width: 19px; height: 19px; }
    .cart-button {
        position: relative;
        width: 44px;
        min-width: 44px;
        min-height: 40px;
        padding: 0;
        border-radius: 14px;
        justify-content: center;
    }
    .cart-button svg { width: 19px; height: 19px; }
    .cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 19px;
        height: 19px;
        padding: 0 4px;
        border: 2px solid #fffdf8;
        font-size: 8px;
    }
    .primary-nav {
        top: calc(100% + 8px);
        left: 10px;
        right: 10px;
        border-radius: 16px;
        padding: 10px;
        box-shadow: 0 18px 45px rgba(44, 25, 12, .16);
    }
    .primary-nav a {
        padding: 12px 11px;
        font-size: 13px;
    }

    /* Compact, balanced hero: headline first, then readable copy beside a
       larger product image, followed by consistent actions and benefits. */
    .hero {
        background:
            radial-gradient(circle at 92% 18%, rgba(211, 169, 68, .2), transparent 34%),
            linear-gradient(145deg, #fffdf8 0%, #f8ecd7 100%);
    }
    .hero__grid {
        min-height: 0;
        padding-block: 23px 25px;
    }
    .hero__content { text-align: left; }
    .eyebrow {
        margin-bottom: 8px;
        font-size: 8.5px;
        line-height: 1.25;
        letter-spacing: .16em;
    }
    .hero h1 {
        max-width: 100%;
        font-size: clamp(36px, 10.3vw, 42px);
        line-height: .96;
        letter-spacing: -.042em;
    }
    .hero__mobile-row {
        grid-template-columns: minmax(0, 1fr) 144px;
        align-items: stretch;
        gap: 14px;
        margin-top: 14px;
    }
    .hero__mobile-row > p {
        align-self: center;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.48;
        color: #594238;
        text-align: left;
    }
    .hero__visual-mobile {
        aspect-ratio: 4 / 5;
        border: 1px solid rgba(63, 38, 22, .12);
        border-radius: 18px 18px 48px 18px;
        box-shadow: 0 14px 30px rgba(44, 25, 12, .13);
    }
    .hero__visual-mobile img {
        object-position: center 36%;
        transform: scale(1.015);
    }
    .hero__visual-mobile span { display: none; }
    .hero__actions {
        grid-template-columns: 1.06fr .94fr;
        gap: 8px;
        margin-top: 14px;
    }
    .hero__actions .button {
        min-height: 44px;
        padding-inline: 7px;
        border-radius: 999px;
        font-size: 10.5px;
        line-height: 1.2;
        white-space: nowrap;
    }
    .hero__trust {
        margin-top: 14px;
        padding-top: 11px;
        gap: 0;
    }
    .hero__trust span { padding-inline: 7px; }
    .hero__trust strong {
        font-size: 9.5px;
        line-height: 1.2;
    }
    .hero__trust small {
        margin-top: 1px;
        font-size: 7.5px;
        line-height: 1.25;
    }

    /* Sticky catalogue controls now sit below the taller refined header. */
    .catalogue-controls { top: 64px; }
}

@media (max-width: 380px) {
    .header__inner { min-height: 60px; gap: 7px; }
    .brand { width: 108px; }
    .brand img { width: 108px; height: 46px; }
    .header-actions { gap: 5px; }
    .icon-button { width: 38px; height: 38px; }
    .cart-button { width: 42px; min-width: 42px; min-height: 38px; }
    .catalogue-controls { top: 60px; }

    .hero__grid { padding-block: 20px 23px; }
    .hero h1 { font-size: 35px; }
    .hero__mobile-row {
        grid-template-columns: minmax(0, 1fr) 126px;
        gap: 10px;
        margin-top: 12px;
    }
    .hero__mobile-row > p { font-size: 11.5px; }
    .hero__actions .button { font-size: 9.5px; }
    .hero__trust span { padding-inline: 4px; }
    .hero__trust strong { font-size: 8.8px; }
    .hero__trust small { font-size: 7px; }
}

@media (max-width: 335px) {
    .brand { width: 100px; }
    .brand img { width: 100px; height: 43px; }
    .header-actions { gap: 4px; }
    .icon-button { width: 36px; height: 36px; }
    .cart-button { width: 39px; min-width: 39px; min-height: 36px; }
    .hero h1 { font-size: 33px; }
    .hero__mobile-row { grid-template-columns: minmax(0, 1fr) 116px; }
    .hero__mobile-row > p { font-size: 11px; }
}

/* =========================================================
   v11: stacked mobile hero
   Replaces the cramped side-by-side composition with a full-width
   product banner, readable copy and clearer benefit icons.
   ========================================================= */
.hero__trust-icon {
    display: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 560px) {
    .hero {
        background:
            radial-gradient(circle at 100% 12%, rgba(211, 169, 68, .18), transparent 32%),
            linear-gradient(155deg, #fffdf9 0%, #f8ecd7 100%);
    }

    .hero__grid {
        display: block;
        min-height: 0;
        padding-block: 22px 24px;
    }

    .hero__content {
        text-align: left;
    }

    .hero .eyebrow {
        margin-bottom: 8px;
        font-size: 8.5px;
        letter-spacing: .17em;
    }

    .hero h1 {
        max-width: 360px;
        font-size: clamp(35px, 9.9vw, 41px);
        line-height: .98;
        letter-spacing: -.042em;
    }

    .hero__mobile-row {
        display: flex;
        flex-direction: column;
        gap: 11px;
        margin-top: 15px;
    }

    .hero__visual-mobile {
        order: 1;
        display: block;
        width: 100%;
        aspect-ratio: 45 / 28;
        max-height: none;
        overflow: hidden;
        border: 1px solid rgba(63, 38, 22, .13);
        border-radius: 21px 21px 58px 21px;
        background: var(--ink);
        box-shadow: 0 14px 30px rgba(44, 25, 12, .14);
    }

    .hero__visual-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }

    .hero__mobile-row > p {
        order: 2;
        align-self: auto;
        max-width: 100%;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.48;
        color: #594238;
        text-align: left;
    }

    .hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 14px;
    }

    .hero__actions .button {
        min-height: 44px;
        padding-inline: 8px;
        font-size: 10.5px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .hero__trust {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 14px;
        padding-top: 12px;
        gap: 0;
        text-align: center;
    }

    .hero__trust span {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: start;
        gap: 2px;
        min-width: 0;
        padding-inline: 6px;
    }

    .hero__trust-icon {
        display: block;
        width: 17px;
        height: 17px;
        margin-bottom: 2px;
        color: #a87412;
    }

    .hero__trust strong {
        font-size: 9.5px;
        line-height: 1.2;
    }

    .hero__trust small {
        margin-top: 0;
        font-size: 7.5px;
        line-height: 1.25;
    }
}

@media (max-width: 380px) {
    .hero__grid { padding-block: 19px 22px; }
    .hero h1 { max-width: 320px; font-size: 34px; }
    .hero__mobile-row { gap: 10px; margin-top: 13px; }
    .hero__mobile-row > p { font-size: 11.75px; }
    .hero__actions .button { font-size: 9.6px; }
    .hero__trust span { padding-inline: 4px; }
    .hero__trust-icon { width: 16px; height: 16px; }
    .hero__trust strong { font-size: 8.9px; }
    .hero__trust small { font-size: 7px; }
}

@media (max-width: 335px) {
    .hero h1 { font-size: 32px; }
    .hero__mobile-row > p { font-size: 11.25px; }
    .hero__actions { gap: 6px; }
    .hero__actions .button { min-height: 42px; font-size: 8.9px; }
}

/* =========================================================
   v12: mobile hero image clipping correction
   Uses a natural-width image frame with even corners so the
   dates artwork is not cut by the oversized lower-right radius.
   ========================================================= */
@media (max-width: 560px) {
    .hero__visual-mobile {
        aspect-ratio: 45 / 28;
        border-radius: 18px;
        box-shadow: 0 10px 24px rgba(44, 25, 12, .12);
    }

    .hero__visual-mobile img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background: #231713;
    }
}

@media (max-width: 335px) {
    .hero__visual-mobile { border-radius: 15px; }
}

/* =========================================================
   v14: shared desktop/mobile hero artwork
   Mobile now uses the same Zahara Dates hero artwork as desktop.
   The full portrait is shown without cropping inside a compact,
   centered frame so every branded element remains visible.
   ========================================================= */
@media (max-width: 560px) {
    .hero__visual-mobile {
        width: min(100%, 310px);
        aspect-ratio: 900 / 1090;
        margin-inline: auto;
        overflow: visible;
        border: 0;
        border-radius: 22px;
        background: transparent;
        box-shadow: 0 12px 28px rgba(44, 25, 12, .14);
    }

    .hero__visual-mobile img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 900 / 1090;
        object-fit: contain;
        object-position: center;
        border-radius: 22px;
        background: #211713;
    }
}

@media (max-width: 380px) {
    .hero__visual-mobile { width: min(100%, 286px); }
}

@media (max-width: 335px) {
    .hero__visual-mobile {
        width: min(100%, 260px);
        border-radius: 18px;
    }
    .hero__visual-mobile img { border-radius: 18px; }
}

/* =========================================================
   v15: logo safe-area correction
   Prevents the Zahara logo/mark from being cropped in the
   desktop header, mobile header, footer and browser/app icons.
   ========================================================= */
.brand,
.footer__brand img {
    background: #241b1d;
}

.brand {
    overflow: hidden;
    border-radius: 10px;
}

.brand img,
.footer__brand img {
    display: block;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box;
}

.brand img {
    padding: 2px 6px;
    border-radius: inherit;
}

.footer__brand img {
    padding: 4px 8px;
}

@media (max-width: 560px) {
    .brand img { padding: 2px 5px; }
}

/* =========================================================
   v16: clean horizontal logo lockup
   Uses a transparent gold lockup instead of a pre-cropped
   rectangular photograph, so the mark and ZAHARA word remain
   clear and unclipped in every responsive header/footer size.
   ========================================================= */
.brand {
    width: 168px;
    height: 62px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #281814;
    box-sizing: border-box;
}
.brand img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center !important;
}
.footer__brand img {
    width: 176px;
    height: auto;
    max-height: 58px;
    margin: 0 0 14px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 820px) {
    .brand { width: 146px; height: 56px; padding: 7px 10px; }
}

@media (max-width: 560px) {
    .header__inner { grid-template-columns: minmax(126px, 1fr) auto; }
    .brand { width: 126px; height: 50px; padding: 7px 9px; border-radius: 10px; }
    .footer__brand img { width: 152px; max-height: 52px; }
}

@media (max-width: 380px) {
    .header__inner { grid-template-columns: minmax(116px, 1fr) auto; }
    .brand { width: 116px; height: 46px; padding: 6px 8px; }
}

@media (max-width: 335px) {
    .header__inner { grid-template-columns: minmax(108px, 1fr) auto; }
    .brand { width: 108px; height: 44px; padding: 6px 7px; }
}

/* =========================================================
   v17: official supplied Zahara logo
   Uses the exact user-supplied vertical lockup, keeps every
   line visible, and prevents clipping in header and footer.
   ========================================================= */
.brand {
    width: 112px;
    height: 72px;
    padding: 3px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #281814;
    box-sizing: border-box;
}
.brand img {
    width: 66px !important;
    height: 66px !important;
    max-width: 100%;
    max-height: 100%;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center !important;
}
.footer__brand img {
    width: 148px !important;
    height: 148px !important;
    max-width: 100%;
    max-height: none !important;
    margin: -10px 0 4px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 820px) {
    .brand { width: 102px; height: 64px; padding: 3px 17px; }
    .brand img { width: 58px !important; height: 58px !important; }
}

@media (max-width: 560px) {
    .header__inner { grid-template-columns: minmax(90px, 1fr) auto; }
    .brand { width: 90px; height: 54px; padding: 2px 18px; border-radius: 10px; }
    .brand img { width: 50px !important; height: 50px !important; }
    .footer__brand img {
        width: 112px !important;
        height: 112px !important;
        margin: -8px 0 2px !important;
    }
}

@media (max-width: 380px) {
    .header__inner { grid-template-columns: minmax(84px, 1fr) auto; }
    .brand { width: 84px; height: 50px; padding: 2px 17px; }
    .brand img { width: 46px !important; height: 46px !important; }
}

@media (max-width: 335px) {
    .header__inner { grid-template-columns: minmax(80px, 1fr) auto; }
    .brand { width: 80px; height: 48px; padding: 2px 16px; }
    .brand img { width: 44px !important; height: 44px !important; }
}

/* =========================================================
   v18: transparent logo presentation
   Removes the dark badge behind the official Zahara lockup.
   The logo now sits directly on the cream header with safe
   spacing and no clipping on desktop, tablet, or mobile.
   ========================================================= */
.brand {
    width: 122px;
    height: 74px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.brand img {
    width: auto !important;
    height: 72px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.footer__brand img {
    width: auto !important;
    height: 124px !important;
    max-width: 150px !important;
    max-height: 124px !important;
    margin: -8px 0 6px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 820px) {
    .brand { width: 108px; height: 66px; }
    .brand img { height: 64px !important; }
}

@media (max-width: 560px) {
    .header__inner { grid-template-columns: minmax(94px, 1fr) auto; }
    .brand { width: 94px; height: 54px; }
    .brand img { height: 52px !important; }
    .footer__brand img {
        height: 102px !important;
        max-width: 124px !important;
        max-height: 102px !important;
        margin: -5px 0 4px !important;
    }
}

@media (max-width: 380px) {
    .header__inner { grid-template-columns: minmax(88px, 1fr) auto; }
    .brand { width: 88px; height: 50px; }
    .brand img { height: 48px !important; }
}

@media (max-width: 335px) {
    .header__inner { grid-template-columns: minmax(82px, 1fr) auto; }
    .brand { width: 82px; height: 48px; }
    .brand img { height: 46px !important; }
}

/* =========================================================
   v23: approved Zahara Dates, Sweets & Nuts identity
   Uses a readable horizontal lockup in the header, a compact
   wordmark on small screens, and the full stacked logo in the
   footer. All variants retain transparent edges and safe space.
   ========================================================= */
.brand {
    width: 252px !important;
    height: 74px !important;
    min-width: 0;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.brand picture {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.brand img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.footer__brand img {
    display: block;
    width: 174px !important;
    height: auto !important;
    max-width: 174px !important;
    max-height: none !important;
    margin: -10px 0 12px !important;
    padding: 11px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fffaf0 !important;
    border: 1px solid rgba(225, 185, 89, .55);
    border-radius: 18px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .16) !important;
}

@media (min-width: 821px) {
    .header__inner {
        grid-template-columns: 252px minmax(280px, 1fr) auto;
        gap: 24px;
    }
}

@media (max-width: 1050px) and (min-width: 821px) {
    .brand { width: 220px !important; height: 68px !important; }
    .header__inner { grid-template-columns: 220px minmax(240px, 1fr) auto; gap: 18px; }
    .primary-nav { gap: 20px; }
}

@media (max-width: 820px) {
    .brand { width: 210px !important; height: 64px !important; }
    .header__inner { grid-template-columns: minmax(190px, 1fr) auto !important; gap: 12px; }
    .footer__brand img {
        width: 154px !important;
        max-width: 154px !important;
        padding: 10px !important;
    }
}

@media (max-width: 560px) {
    .header__inner {
        min-height: 62px;
        grid-template-columns: minmax(132px, 1fr) auto !important;
        gap: 9px;
        padding-block: 5px;
    }
    .brand {
        width: 150px !important;
        height: 50px !important;
    }
    .brand picture { height: 50px; }
    .brand img {
        width: 100% !important;
        height: 100% !important;
        object-position: left center !important;
    }
    .footer__brand img {
        width: 132px !important;
        max-width: 132px !important;
        margin: -5px 0 10px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 380px) {
    .header__inner { grid-template-columns: minmax(118px, 1fr) auto !important; gap: 7px; }
    .brand { width: 132px !important; height: 46px !important; }
    .brand picture { height: 46px; }
}

@media (max-width: 335px) {
    .header__inner { grid-template-columns: minmax(108px, 1fr) auto !important; gap: 6px; }
    .brand { width: 118px !important; height: 43px !important; }
    .brand picture { height: 43px; }
}
/* =========================================================
   v26: exact user-approved Zahara logo placement
   Use the same full logo artwork in the header and footer.
   ========================================================= */
.brand {
    width: 122px !important;
    height: 86px !important;
    min-width: 0;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.brand picture {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.brand img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.footer__brand img {
    display: block;
    width: 230px !important;
    height: auto !important;
    max-width: 230px !important;
    max-height: none !important;
    margin: -4px 0 14px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 821px) {
    .header__inner {
        grid-template-columns: 122px minmax(280px, 1fr) auto;
        min-height: 86px;
        gap: 20px;
    }
}

@media (max-width: 1050px) and (min-width: 821px) {
    .brand { width: 112px !important; height: 80px !important; }
    .header__inner { grid-template-columns: 112px minmax(240px, 1fr) auto; gap: 16px; }
    .primary-nav { gap: 20px; }
    .footer__brand img { width: 210px !important; max-width: 210px !important; }
}

@media (max-width: 820px) {
    .brand { width: 102px !important; height: 74px !important; }
    .header__inner {
        min-height: 74px;
        grid-template-columns: minmax(102px, 1fr) auto !important;
        gap: 10px;
    }
    .footer__brand img {
        width: 192px !important;
        max-width: 192px !important;
    }
}

@media (max-width: 560px) {
    .header__inner {
        min-height: 66px;
        grid-template-columns: minmax(86px, 1fr) auto !important;
        gap: 8px;
        padding-block: 4px;
    }
    .brand {
        width: 88px !important;
        height: 64px !important;
    }
    .brand picture { height: 64px; }
    .brand img {
        width: 100% !important;
        height: 100% !important;
        object-position: left center !important;
    }
    .footer__brand img {
        width: 170px !important;
        max-width: 170px !important;
        margin: -2px 0 10px !important;
    }
}

@media (max-width: 380px) {
    .header__inner { grid-template-columns: minmax(80px, 1fr) auto !important; gap: 6px; }
    .brand { width: 82px !important; height: 60px !important; }
    .brand picture { height: 60px; }
}

@media (max-width: 335px) {
    .header__inner { grid-template-columns: minmax(74px, 1fr) auto !important; gap: 5px; }
    .brand { width: 76px !important; height: 56px !important; }
    .brand picture { height: 56px; }
}

/* =========================================================
   v29: professional catalogue photography
   New 4:3 studio images fill each product media area cleanly.
   ========================================================= */
.featured-card__image,
.product-card__media {
    padding: 0 !important;
    background: #f6eee2 !important;
}
.featured-card__image img,
.product-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}
.product-card:hover .product-card__media img {
    transform: scale(1.025);
}

/* =========================================================
   v34: compact header branding
   Removes the repeated “Zahara Dates / The Taste of Tradition”
   line from the header logo while keeping the full logo in footer.
   ========================================================= */
.brand {
    width: 196px !important;
    height: 58px !important;
}
.brand picture {
    width: 100%;
    height: 100%;
}
.brand img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (min-width: 821px) {
    .header__inner {
        grid-template-columns: 196px minmax(280px, 1fr) auto !important;
        min-height: 72px !important;
    }
}

@media (max-width: 1050px) and (min-width: 821px) {
    .brand { width: 174px !important; height: 54px !important; }
    .header__inner { grid-template-columns: 174px minmax(240px, 1fr) auto !important; }
}

@media (max-width: 820px) {
    .brand { width: 116px !important; height: 64px !important; }
    .header__inner {
        min-height: 68px !important;
        grid-template-columns: minmax(116px, 1fr) auto !important;
    }
}

@media (max-width: 560px) {
    .brand { width: 106px !important; height: 62px !important; }
    .brand picture { height: 62px !important; }
    .header__inner {
        min-height: 66px !important;
        grid-template-columns: minmax(106px, 1fr) auto !important;
    }
}

@media (max-width: 380px) {
    .brand { width: 96px !important; height: 58px !important; }
    .brand picture { height: 58px !important; }
    .header__inner { grid-template-columns: minmax(96px, 1fr) auto !important; }
}


/* =========================================================
   v35: compact header tagline
   Adds “The Taste of Tradition” below the compact logo without
   bringing back the duplicated “Zahara Dates” wording.
   ========================================================= */
.brand {
    height: 68px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    overflow: visible !important;
}
.brand picture {
    height: 50px !important;
    flex: 0 0 50px;
}
.brand__tagline {
    display: block;
    width: 100%;
    margin-top: -3px;
    color: #c99a22;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
}

@media (min-width: 821px) {
    .header__inner { min-height: 78px !important; }
}

@media (max-width: 1050px) and (min-width: 821px) {
    .brand { height: 66px !important; }
    .brand picture { height: 48px !important; flex-basis: 48px; }
    .brand__tagline { font-size: 10.5px; }
    .header__inner { min-height: 76px !important; }
}

@media (max-width: 820px) {
    .brand { height: 72px !important; }
    .brand picture { height: 57px !important; flex-basis: 57px; }
    .brand__tagline {
        margin-top: -4px;
        font-size: 9.5px;
        letter-spacing: 0;
    }
    .header__inner { min-height: 76px !important; }
}

@media (max-width: 560px) {
    .brand { width: 112px !important; height: 72px !important; }
    .brand picture { height: 57px !important; flex-basis: 57px; }
    .brand__tagline { font-size: 9px; }
    .header__inner {
        min-height: 76px !important;
        grid-template-columns: minmax(112px, 1fr) auto !important;
    }
}

@media (max-width: 380px) {
    .brand { width: 102px !important; height: 68px !important; }
    .brand picture { height: 54px !important; flex-basis: 54px; }
    .brand__tagline { font-size: 8.4px; }
    .header__inner {
        min-height: 72px !important;
        grid-template-columns: minmax(102px, 1fr) auto !important;
    }
}

/* =========================================================
   v38: exact approved Zahara logo in the website header
   Uses the new stacked transparent logo directly and removes
   the older compact header lockup/tagline combination.
   ========================================================= */
.brand {
    width: 108px !important;
    height: 98px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}
.brand picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
}
.brand img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.brand__tagline {
    display: none !important;
}

@media (min-width: 821px) {
    .header__inner {
        grid-template-columns: 124px minmax(280px, 1fr) auto !important;
        min-height: 104px !important;
    }
}

@media (max-width: 1050px) and (min-width: 821px) {
    .brand {
        width: 100px !important;
        height: 92px !important;
    }
    .header__inner {
        grid-template-columns: 112px minmax(240px, 1fr) auto !important;
        min-height: 98px !important;
    }
}

@media (max-width: 820px) {
    .brand {
        width: 82px !important;
        height: 80px !important;
    }
    .header__inner {
        grid-template-columns: minmax(82px, 1fr) auto !important;
        min-height: 86px !important;
    }
}

@media (max-width: 560px) {
    .brand {
        width: 76px !important;
        height: 74px !important;
    }
    .brand picture {
        height: 74px !important;
    }
    .header__inner {
        grid-template-columns: minmax(76px, 1fr) auto !important;
        min-height: 80px !important;
    }
}

@media (max-width: 380px) {
    .brand {
        width: 70px !important;
        height: 68px !important;
    }
    .brand picture {
        height: 68px !important;
    }
    .header__inner {
        grid-template-columns: minmax(70px, 1fr) auto !important;
        min-height: 74px !important;
    }
}

/* =========================================================
   v42: database-managed price and stock display
   ========================================================= */
.product-commerce {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.product-price {
    color: var(--ink, #28170f);
    font-size: 13px;
    line-height: 1.2;
}
.product-stock {
    color: #6c745d;
    font-size: 10px;
    line-height: 1.3;
}
.product-stock.is-out { color: #a03d35; }
.card-add:disabled,
.round-add:disabled,
.modal-order-row button:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none !important;
}
.cart-item__price {
    display: block;
    margin-top: 3px;
    color: #8c6c24;
    font-size: 10px;
    font-weight: 700;
}
@media (max-width: 560px) {
    .product-price { font-size: 11px; }
    .product-stock { font-size: 9px; }
}

/* =========================================================
   v43: selected category filter visibility
   Prevent mobile/touch hover rules from washing out the
   active filter while its text remains white.
   ========================================================= */
.filter-chip.is-active,
.filter-chip.is-active:hover,
.filter-chip.is-active:focus,
.filter-chip.is-active:focus-visible {
    background: #2f1d16 !important;
    border-color: #2f1d16 !important;
    color: #ffffff !important;
}

/* =========================================================
   v44: strong selected product filter state on mobile/touch
   ========================================================= */
button.filter-chip.is-active,
button.filter-chip.is-active:hover,
button.filter-chip.is-active:focus,
button.filter-chip.is-active:focus-visible,
button.filter-chip[aria-pressed="true"],
button.filter-chip[aria-pressed="true"]:hover,
button.filter-chip[aria-pressed="true"]:focus,
button.filter-chip[aria-pressed="true"]:focus-visible {
    background-color: #2b170f !important;
    background-image: none !important;
    border-color: #2b170f !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(43, 23, 15, .16) !important;
    opacity: 1 !important;
}

button.filter-chip.is-active *,
button.filter-chip[aria-pressed="true"] * {
    color: #ffffff !important;
}

/* Checkout delivery location + preferred-time controls (v1.9.2) */
.location-field {
    display: grid;
    gap: 6px;
}
.location-field > label {
    font-size: 12px;
    font-weight: 800;
}
.location-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}
.location-control input {
    min-width: 0;
}
.location-button {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 16px;
    background: var(--cream);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.location-button:hover {
    border-color: var(--gold);
    background: white;
    transform: translateY(-1px);
}
.location-button:focus-visible {
    outline: 3px solid rgba(201,153,46,.22);
    outline-offset: 2px;
}
.location-button:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}
.location-status {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

@media (max-width: 680px) {
    .location-field > label { font-size: 10px; }
    .location-control { grid-template-columns: 1fr; }
    .location-button { width: 100%; min-height: 42px; }
}


/* Checkout required current location + payment method (v1.9.3) */
.field-optional {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}
.location-control input[readonly] {
    background: #faf8f2;
    cursor: default;
}
.payment-field {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.payment-field legend {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
}
.payment-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.form-grid .payment-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}
.form-grid .payment-option:has(input:checked) {
    border-color: var(--gold);
    background: var(--cream);
    box-shadow: 0 0 0 3px rgba(201,153,46,.10);
}
.form-grid .payment-option input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--gold);
    box-shadow: none;
    flex: 0 0 auto;
}
.payment-help {
    display: block;
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

@media (max-width: 680px) {
    .payment-field legend { font-size: 10px; }
    .payment-options { grid-template-columns: 1fr 1fr; }
    .form-grid .payment-option { min-height: 42px; font-size: 11px; }
}

/* Hero collection artwork replacement (v1.9.4) */
.hero__visual {
    max-width: 620px;
}
.hero__image-frame {
    aspect-ratio: 3 / 2;
    max-height: none;
    border-radius: 38px 38px 100px 38px;
    background: #000;
}
.hero__image-frame img {
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 680px) {
    .hero__mobile-row {
        grid-template-columns: 1fr 132px;
    }
    .hero__visual-mobile {
        aspect-ratio: 3 / 2;
        border-radius: 16px 16px 32px 16px;
        background: #000;
    }
    .hero__visual-mobile img {
        object-fit: cover;
        object-position: center center;
    }
}


/* Professional hero artwork final polish (v2.1.0) */
.hero__visual {
    max-width: 640px !important;
    padding: 0 !important;
}
.hero__image-frame {
    aspect-ratio: 3 / 2 !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hero__image-frame::after {
    display: none !important;
}
.hero__image-frame img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
}
.hero__badge {
    left: -28px !important;
    bottom: 28px !important;
}

@media (max-width: 680px) {
    .hero__mobile-row {
        grid-template-columns: 1fr 136px !important;
        align-items: center !important;
    }
    .hero__visual-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 3 / 2 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .hero__visual-mobile img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: transparent !important;
    }
    .hero__visual-mobile span {
        display: none !important;
    }
}


/* Zahara brand story redesign (v2.2.0) */
.story--brand {
    position: relative;
    background:
        radial-gradient(circle at 88% 18%, rgba(212, 165, 55, .11), transparent 28%),
        linear-gradient(180deg, #fbf6eb 0%, #f8f0df 100%);
    overflow: hidden;
}
.story--brand::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(166, 119, 26, .14);
    border-radius: 50%;
    right: -210px;
    top: -180px;
    pointer-events: none;
}
.story__grid--brand {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(330px, .92fr) minmax(0, 1.08fr) !important;
    grid-template-areas: none !important;
    gap: clamp(48px, 6vw, 90px) !important;
    align-items: center !important;
}
.story__image--brand {
    grid-area: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.story__image--brand::before {
    display: none !important;
}
.story__visual-card {
    position: relative;
    isolation: isolate;
    padding: 12px 12px 54px;
    border: 1px solid rgba(126, 83, 24, .14);
    border-radius: 180px 34px 34px 34px;
    background: rgba(255, 253, 248, .78);
    box-shadow: 0 24px 55px rgba(56, 34, 18, .10);
}
.story__visual-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 168px 25px 25px 25px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
    pointer-events: none;
    z-index: 2;
}
.story__visual-card img {
    display: block;
    width: 100% !important;
    height: clamp(370px, 37vw, 500px) !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 32% !important;
    border-radius: 168px 25px 25px 25px !important;
    box-shadow: none !important;
}
.story__visual-caption {
    position: absolute;
    left: 34px;
    right: 24px;
    bottom: 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    color: #4a2b18;
}
.story__visual-caption span {
    color: #a87818;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}
.story__visual-caption strong {
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 600;
}
.story__content--brand {
    grid-area: auto !important;
    align-self: center !important;
    max-width: 760px;
}
.story__content--brand .eyebrow {
    margin-bottom: 14px;
}
.story__content--brand h2 {
    max-width: 690px;
    margin: 0;
    font-size: clamp(44px, 5vw, 66px) !important;
    line-height: .98;
    letter-spacing: -.035em;
}
.story__content--brand h2 em {
    color: var(--gold);
    font-weight: 500;
}
.story__category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 22px;
}
.story__category-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(160, 113, 27, .25);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: #5f3b20;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.story__content--brand > p {
    max-width: 720px !important;
    margin: 0 !important;
    color: #624936 !important;
    font-size: 15px !important;
    line-height: 1.72;
}
.story__content--brand > p strong {
    color: #301d14;
    letter-spacing: .025em;
}
.story__promise {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 28px 0 24px;
    border-top: 1px solid rgba(116, 79, 32, .18);
    border-bottom: 1px solid rgba(116, 79, 32, .18);
}
.story__promise span {
    position: relative;
    padding: 18px 18px 18px 0;
    color: #3d271b;
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.35;
}
.story__promise span + span {
    padding-left: 18px;
    border-left: 1px solid rgba(116, 79, 32, .16);
}
.story__signature {
    color: #8d671d !important;
    font-family: Georgia, serif;
    font-size: 14px !important;
    letter-spacing: .015em;
}
.story__signature em {
    color: #40271a;
    font-size: 16px;
}

@media (max-width: 920px) {
    .story__grid--brand {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }
    .story__image--brand {
        width: min(100%, 650px);
        justify-self: center;
    }
    .story__visual-card img {
        height: 390px !important;
    }
    .story__content--brand {
        max-width: 760px;
    }
}

@media (max-width: 680px) {
    .story--brand {
        padding-block: 46px !important;
    }
    .story__grid--brand {
        gap: 26px !important;
    }
    .story__visual-card {
        padding: 8px 8px 44px;
        border-radius: 92px 22px 22px 22px;
    }
    .story__visual-card::after {
        inset: 8px;
        border-radius: 84px 16px 16px 16px;
    }
    .story__visual-card img {
        height: 245px !important;
        border-radius: 84px 16px 16px 16px !important;
        object-position: center 30% !important;
    }
    .story__visual-caption {
        left: 20px;
        right: 16px;
        bottom: 12px;
    }
    .story__visual-caption span {
        font-size: 8px;
    }
    .story__visual-caption strong {
        font-size: 11px;
    }
    .story__content--brand .eyebrow {
        margin-bottom: 9px;
    }
    .story__content--brand h2 {
        font-size: clamp(36px, 11vw, 46px) !important;
    }
    .story__category-strip {
        gap: 6px;
        margin: 17px 0 16px;
    }
    .story__category-strip span {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 8px;
    }
    .story__content--brand > p {
        font-size: 12px !important;
        line-height: 1.62;
    }
    .story__promise {
        grid-template-columns: 1fr;
        margin: 19px 0 16px;
    }
    .story__promise span {
        padding: 11px 0;
        font-size: 13px;
    }
    .story__promise span + span {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(116, 79, 32, .13);
    }
    .story__signature {
        font-size: 11px !important;
    }
    .story__signature em {
        font-size: 13px;
    }
}


/* Snapchat social link (v2.3.0) */
.footer-social {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.footer-social__label {
    display: block;
    margin-bottom: 9px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.site-footer .footer-social__link {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(255,252,0,.62);
    border-radius: 999px;
    background: #fffc00;
    color: #17110e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.site-footer .footer-social__link:hover {
    color: #17110e;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(255,252,0,.16);
}
.footer-social__mark {
    display: inline-grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    background: #17110e;
    color: #fffc00;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: -.02em;
}
.footer-social__arrow {
    font-size: 13px;
    line-height: 1;
}
@media (max-width: 560px) {
    .footer-social {
        margin-top: 11px;
        padding-top: 11px;
    }
    .site-footer .footer-social__link {
        width: 100%;
        justify-content: center;
        min-height: 36px;
    }
}


/* Snapchat official icon + header link (v2.4.0) */
.snapchat-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none !important;
}
.social-icon-button--snapchat {
    color: #17110e;
    background: #fffc00;
    border-color: #ece34a;
}
.social-icon-button--snapchat:hover {
    background: #f2ea00;
    color: #17110e;
}
.header-actions .social-icon-button--snapchat {
    text-decoration: none;
}
.footer-social__link--snapchat {
    gap: 9px;
}
.footer-social__icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #17110e;
    flex: 0 0 20px;
}
.footer-social__mark {
    display: none;
}
@media (max-width: 820px) {
    .header-actions {
        gap: 6px;
    }
}
@media (max-width: 560px) {
    .header-actions {
        gap: 4px;
    }
    .header-actions .social-icon-button--snapchat {
        width: 36px;
        height: 36px;
    }
    .footer-social__icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}


/* Use the supplied official Snapchat app icon (v2.4.1) */
.snapchat-official-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.header-actions .social-icon-button--snapchat {
    width: 42px;
    height: 42px;
    padding: 2px;
    border: 0;
    border-radius: 11px;
    background: transparent !important;
    overflow: hidden;
}
.header-actions .social-icon-button--snapchat:hover {
    background: transparent !important;
    transform: none;
}
.header-actions .social-icon-button--snapchat .snapchat-official-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.footer-social__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    overflow: hidden;
}
.footer-social__icon .snapchat-official-icon {
    width: 22px;
    height: 22px;
}
@media (max-width: 560px) {
    .header-actions .social-icon-button--snapchat {
        width: 36px;
        height: 36px;
        padding: 1px;
        border-radius: 9px;
    }
    .header-actions .social-icon-button--snapchat .snapchat-official-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
}