/* ==========================================================================
   Healza — art direction layer
   Loaded after healza-theme-override.css.

   Concept: "the capsule and the helix". Healza's own bottle is a capsule and its
   mark is a helix that grows into a leaf, so those two shapes carry the page:
   product photography sits in capsule frames, a fine helix thread runs through
   the hero, and everything else is type, hairlines and space instead of cards.

   Palette (small on purpose):
     ivory  — page ground
     mist   — one quieter ground for the product shelf
     pine   — the single immersive dark (hero stage, science section)
     ink    — text
     cyan   — Healza cyan, reserved for the primary action
     leaf   — the logo green, only as a hairline accent on pine
   ========================================================================== */
:root {
    --hzh-ivory: #f7f5ef;
    --hzh-ivory-deep: #efede4;
    --hzh-mist: #e9ece3;
    --hzh-pine: #103a33;
    --hzh-pine-deep: #0b2a25;
    --hzh-ink: #10262b;
    --hzh-ink-soft: #4a5d5f;
    --hzh-line: rgba(16, 38, 43, .14);
    --hzh-cyan: #007dbd;
    --hzh-cyan-deep: #00618f;
    --hzh-leaf: #a9d15c;
    --hzh-on-pine: #eef3ea;
    --hzh-on-pine-soft: rgba(238, 243, 234, .72);
    --hzh-amber-soft: #f6ecd6;
    --hzh-amber-ink: #7a4f0d;
    --hzh-ease: .25s ease;
    --hzh-font-display: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --hzh-scale: 1;
    --hzh-gutter: max(24px, calc((100vw - 1240px) / 2));
    /* One measure for the space between a page's last block and the footer. */
    --hzh-page-end: clamp(56px, 6vw, 88px);
    /* One vertical rhythm for the homepage's sections. */
    --hzh-section: clamp(36px, 4vw, 56px);
    /* Height of the sticky header row (68px; 60px from 980px down). Sticky panels, the add-to-cart
       bar and in-page jumps are placed from it. */
    --hzh-header-h: 68px;
}
@media (max-width: 980px) {
    :root {
        --hzh-header-h: 60px;
    }
}

/* The site container narrows to a 14px gutter (max 420px wide) on small screens;
   full-bleed compositions follow the same edge. */
@media (max-width: 640px) {
    :root {
        --hzh-gutter: max(14px, calc((100vw - 420px) / 2));
    }
}

/* Arabic headings use the interface's own clear Arabic face (Cairo, already loaded for the
   body text) instead of a calligraphic one, so headings and text read as one family. Cairo
   runs optically larger than Lora, so display sizes are not scaled up; tracking is never
   applied to Arabic. */
html[lang="ar"] {
    --hzh-font-display: "Cairo", "Readex Pro", system-ui, sans-serif;
    --hzh-scale: 1;
}

.hzh-display {
    font-family: var(--hzh-font-display);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--hzh-ink);
    text-wrap: balance;
    /* The body turns on tabular figures site-wide; in a display serif that also widens
       the word space, so display type opts back out. */
    font-feature-settings: normal;
    font-variant-numeric: normal;
}
html[lang="ar"] .hzh-display {
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Header + footer finish (site-wide, quiet)
   -------------------------------------------------------------------------- */
.hz-header {
    /* Near-solid ivory instead of a blur: quieter, and a backdrop-filter here would turn the
       header into the containing block for the fixed mobile drawer and its backdrop. */
    background: rgba(247, 245, 239, .97);
    border-bottom: 1px solid var(--hzh-line);
    box-shadow: none;
    backdrop-filter: none;
    transition: border-color .2s ease;
}
.hz-header.is-scrolled {
    background: var(--hzh-ivory);
    border-bottom-color: rgba(16, 38, 43, .22);
    box-shadow: none;
    backdrop-filter: none;
}
.hz-commerce-nav {
    grid-template-columns: 1fr auto 1fr;
    min-height: var(--hzh-header-h);
    padding-block: 8px;
    font-family: "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;
}
html[dir="rtl"] .hz-commerce-nav {
    font-family: "Cairo", "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0;
}
.hz-commerce-nav .hz-brand-full img {
    height: 52px;
    width: auto;
}
/* The header keeps one height while scrolling, so sticky never shifts the page. */
.hz-header.is-scrolled .hz-commerce-nav {
    min-height: var(--hzh-header-h);
}
.hz-header.is-scrolled .hz-commerce-nav .hz-brand-full img {
    height: 52px;
}

/* Utility controls: language, account, cart */
.hz-commerce-nav .hz-nav-actions {
    gap: 10px;
}
.hz-commerce-nav .hz-lang-switch,
.hz-commerce-nav .hz-login-button,
.hz-commerce-nav .hz-cart-link {
    min-height: 44px;
    height: 44px;
    min-width: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--hzh-ink);
    font-size: .9375rem;
    font-weight: 600;
    transition: background-color .18s ease;
}
.hz-commerce-nav .hz-lang-switch,
.hz-commerce-nav .hz-login-button {
    gap: 8px;
    padding-inline: 12px;
}
.hz-commerce-nav .hz-login-button span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hz-commerce-nav .hz-lang-switch i,
.hz-commerce-nav .hz-login-button i,
.hz-commerce-nav .hz-cart-link i {
    width: 18px;
    color: var(--hzh-ink);
    font-size: 1.0625rem;
    line-height: 1;
    text-align: center;
}
.hz-commerce-nav .hz-lang-switch .hz-lang-short {
    display: none;
}
.hz-commerce-nav .hz-lang-switch:hover,
.hz-commerce-nav .hz-login-button:hover,
.hz-commerce-nav .hz-login-button:focus,
.hz-commerce-nav .hz-login-button[aria-expanded="true"],
.hz-commerce-nav .hz-cart-link:hover {
    border-color: transparent;
    background: rgba(16, 38, 43, .06);
    color: var(--hzh-ink);
    transform: none;
}
/* The cart is the one action that is only an icon: a hairline ring gives it a visible target. */
.hz-commerce-nav .hz-cart-link {
    width: 44px;
    border: 1px solid var(--hzh-line);
}
.hz-commerce-nav .hz-cart-link:hover,
.hz-commerce-nav .hz-cart-link[aria-current="page"] {
    border-color: var(--hzh-ink);
}
.hz-commerce-nav .hz-cart-link span {
    top: -5px;
    right: auto;
    left: auto;
    inset-inline-end: -5px;
    box-shadow: 0 0 0 2px var(--hzh-ivory);
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--hzh-ink);
    color: #fff;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}
.hz-commerce-nav .hz-dropdown-menu {
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--hzh-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 38, 43, .10);
    font-size: .9375rem;
}
.hz-commerce-nav .hz-dropdown-menu .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    color: var(--hzh-ink);
}
.hz-commerce-nav .hz-dropdown-menu .dropdown-item:hover,
.hz-commerce-nav .hz-dropdown-menu .dropdown-item:focus {
    background: rgba(16, 38, 43, .06);
    color: var(--hzh-ink);
}
.hz-commerce-nav a:focus-visible,
.hz-commerce-nav button:focus-visible {
    outline: 2px solid var(--hzh-cyan);
    outline-offset: 3px;
}
.hz-header .hz-menu-toggle {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--hzh-ink);
}
.hz-header .hz-menu-toggle svg {
    width: 24px;
    height: 24px;
}
/* No JavaScript: the drawer cannot be opened, so the menu button is hidden and the links sit in
   one row under the logo and controls (html.hz-js is set by a one-line script in the layout). */
@media (max-width: 980px) {
    html:not(.hz-js) .hz-commerce-nav {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    html:not(.hz-js) .hz-header .hz-menu-toggle,
    html:not(.hz-js) .hz-commerce-nav .hz-nav-links-head {
        display: none;
    }
    html:not(.hz-js) .hz-commerce-nav .hz-brand-full {
        margin-inline-start: 0;
    }
    html:not(.hz-js) .hz-commerce-nav .hz-nav-links {
        position: static;
        grid-column: 1 / -1;
        order: 9;
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
        height: auto;
        padding: 0 0 8px;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        visibility: visible;
        transform: none;
    }
    html:not(.hz-js) .hz-commerce-nav .hz-nav-links > a {
        min-height: 44px;
        padding: 0 10px;
        border-bottom: 0;
        font-size: .95rem;
    }
}
/* Keyboard focus looks like hover on the three utility controls. */
.hz-commerce-nav .hz-lang-switch:focus-visible,
.hz-commerce-nav .hz-login-button:focus-visible,
.hz-commerce-nav .hz-cart-link:focus-visible {
    background: rgba(16, 38, 43, .06);
}
/* Phones: language, account and cart become three equal 44px round controls (the account's
   name stays in its aria-label), so they fit beside the logo from 360px. */
@media (max-width: 560px) {
    .hz-commerce-nav .hz-lang-switch {
        width: 44px;
        padding-inline: 0;
        justify-content: center;
    }
    .hz-commerce-nav .hz-lang-switch i {
        display: none;
    }
}

@media (min-width: 981px) {
    .hz-commerce-nav .hz-nav-links {
        gap: clamp(20px, 2.6vw, 40px);
    }
    .hz-commerce-nav .hz-nav-links > a {
        position: relative;
        min-height: 44px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--hzh-ink-soft);
        font-size: 1rem;
        font-weight: 600;
        transition: color .18s ease;
    }
    .hz-commerce-nav .hz-nav-links > a::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 7px;
        height: 1.5px;
        background: var(--hzh-ink);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .22s ease;
    }
    /* Hover only darkens the word. The underline (and the weight) belong to the current page,
       so a pointer resting on another link never makes two links look current. */
    .hz-commerce-nav .hz-nav-links > a:hover {
        background: transparent;
        color: var(--hzh-ink);
    }
    .hz-commerce-nav .hz-nav-links > a.is-active {
        background: transparent;
        color: var(--hzh-ink);
        font-weight: 700;
    }
    .hz-commerce-nav .hz-nav-links > a.is-active::after {
        transform: scaleX(1);
    }
    /* Keyboard focus: a ring around the link, never the current-page underline. */
    .hz-commerce-nav .hz-nav-links > a:focus-visible {
        outline: 2px solid var(--hzh-cyan);
        outline-offset: 4px;
        border-radius: 4px;
    }
}

/* Compact desktop: icon-only account, short language code. */
@media (min-width: 981px) and (max-width: 1180px) {
    .hz-commerce-nav .hz-nav-links {
        gap: 22px;
    }
    .hz-commerce-nav .hz-nav-links > a {
        padding: 0;
        font-size: .9375rem;
    }
}
@media (max-width: 1180px) {
    .hz-commerce-nav .hz-lang-switch .hz-lang-full {
        display: none;
    }
    .hz-commerce-nav .hz-lang-switch .hz-lang-short {
        display: inline;
    }
    .hz-commerce-nav .hz-login-button.dropdown-toggle::after {
        display: none;
    }
    .hz-commerce-nav .hz-login-button span {
        display: none;
    }
    .hz-commerce-nav .hz-login-button {
        width: 44px;
        padding-inline: 0;
        justify-content: center;
    }
}

/* Mobile header + drawer */
@media (max-width: 980px) {
    .hz-commerce-nav,
    .hz-header.is-scrolled .hz-commerce-nav {
        min-height: var(--hzh-header-h);
        padding-block: 6px;
    }
    .hz-commerce-nav .hz-brand-full {
        margin-inline-start: 52px;
    }
    .hz-commerce-nav .hz-brand-full img,
    .hz-header.is-scrolled .hz-commerce-nav .hz-brand-full img {
        height: 46px;
    }
    .hz-commerce-nav .hz-nav-actions {
        gap: 0;
    }
    .hz-commerce-nav .hz-lang-switch {
        padding-inline: 10px;
    }

    .hz-commerce-nav .hz-nav-links {
        width: min(84vw, 340px);
        height: 100vh;
        height: 100dvh;
        gap: 0;
        padding: 14px 20px 28px;
        background: var(--hzh-ivory);
        box-shadow: 0 0 0 1px var(--hzh-line), 0 0 32px rgba(16, 38, 43, .12);
        /* Closed drawer is taken out of the tab order, not just moved off-canvas. */
        visibility: hidden;
        transition: transform .26s ease, visibility 0s linear .26s;
    }
    .hz-commerce-nav .hz-nav-links.is-open {
        visibility: visible;
        transition: transform .26s ease, visibility 0s;
    }
    .hz-commerce-nav .hz-nav-links-head {
        padding-bottom: 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--hzh-line);
    }
    .hz-commerce-nav .hz-nav-links .hz-brand img {
        height: 48px;
        width: auto;
        aspect-ratio: auto;
    }
    .hz-commerce-nav .hz-nav-close {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: transparent;
        color: var(--hzh-ink);
    }
    .hz-commerce-nav .hz-nav-close svg {
        width: 22px;
        height: 22px;
    }
    .hz-commerce-nav .hz-nav-links > a {
        min-height: 56px;
        padding: 0 4px;
        border-radius: 0;
        border-bottom: 1px solid var(--hzh-line);
        background: transparent;
        color: var(--hzh-ink-soft);
        font-size: 1.0625rem;
        font-weight: 600;
        white-space: normal;
    }
    .hz-commerce-nav .hz-nav-links > a:hover,
    .hz-commerce-nav .hz-nav-links > a.is-active {
        background: transparent;
        color: var(--hzh-ink);
    }
    .hz-commerce-nav .hz-nav-links > a.is-active {
        padding-inline-start: 14px;
        box-shadow: none;
        border-inline-start: 2px solid var(--hzh-cyan);
    }
    .hz-nav-backdrop {
        background: rgba(16, 38, 43, .36);
    }
}
@media (max-width: 430px) {
    .hz-commerce-nav .hz-brand-full {
        margin-inline-start: 48px;
    }
    .hz-commerce-nav .hz-brand-full img,
    .hz-header.is-scrolled .hz-commerce-nav .hz-brand-full img {
        height: 42px;
    }
    .hz-commerce-nav .hz-lang-switch i {
        display: none;
    }
    .hz-commerce-nav .hz-lang-switch {
        padding-inline: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hz-header,
    .hz-commerce-nav .hz-nav-links,
    .hz-commerce-nav .hz-nav-links.is-open,
    .hz-commerce-nav .hz-lang-switch,
    .hz-commerce-nav .hz-login-button,
    .hz-commerce-nav .hz-cart-link {
        transition: none;
    }
}

/* Footer: the brand story's last page — pine ground, ivory type, hairlines. */
.hz-footer {
    margin: 0;
    padding: clamp(56px, 7vw, 92px) 0 0;
    border: 0;
    background: var(--hzh-pine);
    color: var(--hzh-on-pine);
}
.hzf-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 40px clamp(24px, 4vw, 64px);
    padding-bottom: clamp(44px, 5vw, 68px);
}
.hz-footer .hzf-logo {
    display: block;
    width: auto;
    height: 64px;
}
.hz-footer .hzf-logo-link {
    display: inline-block;
    margin: 0;
}
.hz-footer .hzf-slogan {
    margin: 22px 0 10px;
    color: var(--hzh-on-pine);
    font-family: var(--hzh-font-display);
    font-size: calc(1.5rem * var(--hzh-scale));
    font-weight: 500;
    line-height: 1.3;
}
html[lang="ar"] .hz-footer .hzf-slogan {
    font-weight: 700;
    line-height: 1.45;
}
.hz-footer .hzf-tagline {
    max-width: 24rem;
    margin: 0;
    color: var(--hzh-on-pine-soft);
    font-size: .95rem;
    line-height: 1.75;
}
.hz-footer .hzf-group h2 {
    margin: 6px 0 18px;
    color: var(--hzh-leaf);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}
.hz-footer .hzf-group ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hz-footer .hzf-group a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 36px;
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--hzh-on-pine);
    font-size: .95rem;
    font-weight: 500;
    transition: color .18s ease;
}
.hz-footer .hzf-group a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: none;
}
.hz-footer .hzf-group a bdi {
    min-width: 0;
}
.hz-footer .hzf-group a i {
    flex: 0 0 auto;
    width: 16px;
    color: var(--hzh-on-pine-soft);
    text-align: center;
}
/* Social profiles: one row of round icon links under the brand text. */
.hz-footer .hzf-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.hz-footer .hzf-social a {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    height: 44px;
    border: 1px solid rgba(238, 243, 234, .22);
    border-radius: 50%;
    color: var(--hzh-on-pine);
}
.hz-footer .hzf-social a:hover {
    border-color: var(--hzh-on-pine);
    text-decoration: none;
}
.hz-footer a:focus-visible {
    outline: 2px solid var(--hzh-leaf);
    outline-offset: 3px;
}
.hz-footer .hzf-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 22px 28px;
    border-top: 1px solid rgba(238, 243, 234, .14);
    color: var(--hzh-on-pine-soft);
    font-size: .85rem;
}
@media (max-width: 980px) {
    .hzf-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .hzf-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .hzf-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
    .hzf-inner > .hzf-group:last-child {
        grid-column: 1 / -1;
    }
    .hz-footer .hzf-logo {
        height: 56px;
    }
    .hz-footer .hzf-bottom {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Shared commerce atoms (homepage shelf, Shop, Product Details).
   Functional type on purpose: prices, tags and availability stay in the UI face.
   -------------------------------------------------------------------------- */
.hz-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}
.hz-price strong {
    color: var(--hzh-ink);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hz-price strong small {
    color: var(--hzh-ink-soft);
    font-size: .5em;
    font-weight: 700;
}
.hz-price del {
    color: var(--hzh-ink-soft);
    font-size: .95rem;
    font-weight: 600;
}
.hz-price-lg strong {
    font-size: clamp(2.2rem, 3.4vw, 2.9rem);
}
.hz-offer-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--hzh-amber-soft);
    color: var(--hzh-amber-ink);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.4;
}
.hz-avail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hzh-pine);
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}
.hz-avail::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3fa46a;
}
.hz-avail.is-out {
    color: var(--hzh-ink-soft);
}
.hz-avail.is-out::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--hzh-ink-soft);
}

/* --------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------- */
body.hz-shell.hz-home-page {
    background: var(--hzh-ivory);
    color: var(--hzh-ink);
}

/* Actions: the capsule is the one place a pill shape is used. */
.hzh-btn {
    min-height: 54px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: var(--hzh-cyan);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.hzh-btn:hover,
.hzh-btn:focus-visible {
    background: var(--hzh-cyan-deep);
    color: #fff;
}
.hzh-btn-ink {
    min-height: 48px;
    padding: 0 22px;
    background: var(--hzh-ink);
    font-size: .95rem;
}
.hzh-btn-ink:hover:not(:disabled),
.hzh-btn-ink:focus-visible:not(:disabled) {
    background: var(--hzh-pine);
}
.hzh-btn:disabled {
    cursor: not-allowed;
    background: transparent;
    color: var(--hzh-ink-soft);
    box-shadow: inset 0 0 0 1px var(--hzh-line);
}
.hzh-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 8px;
    border-bottom: 1px solid currentColor;
    color: var(--hzh-ink);
    font-weight: 700;
}
.hzh-link:hover,
.hzh-link:focus-visible {
    color: var(--hzh-cyan-deep);
}
.hzh-link .hz-dir-arrow {
    font-size: .85em;
    transition: transform .25s ease;
}
html[dir="rtl"] .hzh-link:hover .hz-dir-arrow,
html[dir="rtl"] .hzh-goal:hover .hz-dir-arrow {
    transform: translateX(-5px);
}
html[dir="ltr"] .hzh-link:hover .hz-dir-arrow,
html[dir="ltr"] .hzh-goal:hover .hz-dir-arrow {
    transform: scaleX(-1) translateX(-5px);
}
.hzh-link-light {
    color: var(--hzh-on-pine);
}
.hzh-link-light:hover,
.hzh-link-light:focus-visible {
    color: var(--hzh-leaf);
}
.hzh-btn:focus-visible,
.hzh-link:focus-visible,
.hzh-goal:focus-visible,
.hzh-product h3 a:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 4px;
}

/* Shop by goal: two large typographic doors. */
.hzh-goals {
    padding: var(--hzh-section) 0;
}
.hzh-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: end;
    gap: 16px clamp(28px, 6vw, 96px);
    margin-bottom: clamp(24px, 3vw, 40px);
}
.hzh-head h2 {
    margin: 0;
    font-size: calc(clamp(1.9rem, 3.2vw, 2.8rem) * var(--hzh-scale));
}
.hzh-head p {
    max-width: 30rem;
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.8;
}
.hzh-goal-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hzh-ink);
}
.hzh-goal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px clamp(14px, 2vw, 24px);
    padding: clamp(12px, 1.4vw, 18px) 0;
    border-bottom: 1px solid var(--hzh-line);
    color: var(--hzh-ink);
    transition: background-color .3s ease, padding .3s ease;
}
.hzh-goal:hover {
    background: linear-gradient(90deg, rgba(233, 236, 227, 0), var(--hzh-mist) 18%, var(--hzh-mist) 82%, rgba(233, 236, 227, 0));
    color: var(--hzh-ink);
}
.hzh-goal:hover h3 {
    color: var(--hzh-pine);
}
.hzh-goal-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.hzh-goal h3 {
    margin: 0 0 4px;
    font-size: calc(clamp(1.2rem, 1.7vw, 1.5rem) * var(--hzh-scale));
}
.hzh-goal-text {
    max-width: 40rem;
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.6;
}
/* The thumbnail and the product name are placed in the row's own grid. */
.hzh-goal-product {
    display: contents;
}
.hzh-goal-meta {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow-wrap: anywhere;
}
.hzh-goal-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 54px;
    aspect-ratio: 10 / 19;
    overflow: hidden;
    border-radius: 999px;
    background: var(--hzh-mist);
}
.hzh-goal-thumb.is-packshot {
    background: radial-gradient(70% 60% at 50% 45%, #fff, var(--hzh-mist));
}
.hzh-goal-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px 7px;
    object-fit: contain;
    transition: transform .5s ease;
}
.hzh-goal:hover .hzh-goal-thumb img {
    transform: scale(1.07);
}
.hzh-goal-meta small {
    color: var(--hzh-ink-soft);
    font-size: .84rem;
}
.hzh-goal-meta b {
    margin-inline-start: 6px;
    font-size: .9rem;
    font-weight: 700;
}
.hzh-goal-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hzh-line);
    border-radius: 50%;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.hzh-goal:hover .hzh-goal-arrow,
.hzh-goal:focus-visible .hzh-goal-arrow {
    border-color: var(--hzh-ink);
    background: var(--hzh-ink);
    color: #fff;
}

/* Featured products: a small shelf with room, staggered instead of gridded. */
.hzh-shelf {
    padding: var(--hzh-section) 0;
    background: var(--hzh-mist);
}
.hzh-product {
    min-width: 0;
}
.hzh-product:nth-child(even) {
    margin-top: clamp(44px, 6.5vw, 104px);
}
.hzh-product-frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px 14px 14px;
    background: radial-gradient(80% 62% at 50% 42%, #fbfaf6 0%, #e4e8dc 100%);
}
/* Packshots are never cropped: the image keeps its whole silhouette inside a padded
   area of the frame. Sized by its own box so the rounded corners and shadow follow a
   rectangular photo today and a transparent cut-out later. */
.hzh-product-frame img {
    position: absolute;
    inset: 15% 13% 9%;
    display: block;
    width: auto;
    height: auto;
    max-width: 74%;
    max-height: 76%;
    margin: auto;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 22px 26px rgba(11, 42, 37, .2));
    transition: transform .6s ease;
}
.hzh-product-frame.is-packshot img {
    inset: 12% 18% 9%;
    max-width: 64%;
    max-height: 79%;
    border-radius: 0;
    filter: drop-shadow(0 18px 16px rgba(11, 42, 37, .2));
}
/* No approved image: a deliberate brand frame, never an invented packshot. */
.hzh-product-frame.is-empty {
    background: var(--hzh-ivory-deep);
    box-shadow: inset 0 0 0 1px var(--hzh-line);
}
.hzh-product-frame b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--hzh-pine);
    font-family: var(--hzh-font-display);
    font-size: 3rem;
    font-weight: 500;
}
.hzh-product-frame .hz-offer-tag {
    position: absolute;
    bottom: 16px;
    inset-inline-start: 16px;
    z-index: 1;
}
.hzh-product-info {
    padding-top: 22px;
}
.hzh-product h3 {
    margin: 0 0 6px;
    font-size: calc(clamp(1.5rem, 2.3vw, 2.1rem) * var(--hzh-scale));
}
.hzh-product h3 a {
    color: inherit;
}
.hzh-product h3 a:hover {
    color: var(--hzh-cyan-deep);
}
.hzh-product-info > p {
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.75;
}
.hzh-product-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hzh-line);
}
.hzh-shelf-empty h3 {
    margin: 0 0 10px;
    font-size: calc(1.8rem * var(--hzh-scale));
}
.hzh-shelf-empty p {
    margin: 0;
    color: var(--hzh-ink-soft);
}

@media (max-width: 980px) {
    .hzh-head {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Mobile: recomposed, not stacked. Words first, then a short pine band that the
   capsules rise out of; trust becomes a two-by-two; goals stay typographic.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .hzh-goal {
        gap: 4px 12px;
    }
    .hzh-goal:hover {
        padding-inline: 0;
        background: transparent;
    }
    .hzh-goal-thumb {
        width: 46px;
    }
    .hzh-product:nth-child(even) {
        margin-top: 44px;
    }
    .hzh-product-buy {
        flex-direction: column;
        align-items: stretch;
    }
    .hzh-product-buy .hzh-btn {
        width: 100%;
        padding-inline: 12px;
    }

}

@media (max-width: 420px) {
    .hzh-product:nth-child(even) {
        margin-top: 0;
        padding-inline-start: 14%;
    }
    .hzh-product:nth-child(odd) {
        padding-inline-end: 14%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hzh-goal,
    .hzh-goal-thumb img,
    .hzh-goal-arrow,
    .hzh-product-frame img,
    .hzh-link .hz-dir-arrow,
    .hz-commerce-nav .hz-nav-links > a::after {
        transition: none;
    }
    .hzh-goal:hover .hzh-goal-thumb img {
        transform: none;
    }
    html[dir="rtl"] .hzh-link:hover .hz-dir-arrow,
    html[dir="rtl"] .hzh-goal:hover .hz-dir-arrow {
        transform: none;
    }
    html[dir="ltr"] .hzh-link:hover .hz-dir-arrow,
    html[dir="ltr"] .hzh-goal:hover .hz-dir-arrow {
        transform: scaleX(-1);
    }
}

/* Submitting state (site.js double-submit guard): visibly busy, not "disabled-grey". */
button.is-submitting,
input.is-submitting {
    cursor: progress;
    opacity: .72;
}
/* The guard disables the button, and .hzh-btn:disabled would turn it into a grey outline.
   While submitting it keeps its own colour and shows a small ring instead. */
.hzh-btn.is-submitting:disabled {
    background: var(--hzh-cyan);
    color: #fff;
    box-shadow: none;
}
.hzh-btn-ink.is-submitting:disabled {
    background: var(--hzh-ink);
}
/* The ring sits in the button's own padding, so the label does not move and the button
   does not change width when it appears. */
.hzh-btn.is-submitting {
    position: relative;
}
.hzh-btn.is-submitting::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 8px;
    margin-block-start: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: hzh-spin .7s linear infinite;
}
@keyframes hzh-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hzh-btn.is-submitting::after {
        animation: none;
        border-inline-end-color: currentColor;
        opacity: .6;
    }
}

/* =========================================================================
   Phase C9 — refinement of the existing design (no new identity, no new tokens)
   ========================================================================= */

/* Keyboard users can jump past the header; invisible until focused. */
.hz-skip {
    position: absolute;
    inset-inline-start: 16px;
    top: -64px;
    z-index: 1000;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--hzh-pine);
    color: var(--hzh-on-pine);
    font-weight: 700;
}
.hz-skip:focus {
    top: 12px;
    color: var(--hzh-on-pine);
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 3px;
}
.hz-main:focus {
    outline: 0;
}

/* E-mail addresses, phone links and postal addresses wrap on narrow screens instead of widening
   the page (they are written without spaces, so normal wrapping cannot break them). */
.hz-main address,
.hz-main a[href^="mailto:"],
.hz-main a[href^="tel:"],
.hz-main a[href^="https://wa.me/"] {
    overflow-wrap: anywhere;
}

/* In-page jumps and focused fields are not hidden under the sticky header. */
html {
    scroll-padding-top: calc(var(--hzh-header-h) + 20px);
}
::selection {
    background: rgba(16, 58, 51, .16);
    color: var(--hzh-ink);
}

/* One visible focus ring for anything that has no ring of its own. :where() keeps the
   specificity at zero, so every existing component focus style still wins. */
:where(.hz-main, .hz-footer, .hz-header) :where(a, button, summary, select, [tabindex]):focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 3px;
}

/* Primary action: a little depth on hover and a tactile press. Colours are unchanged. */
.hzh-btn:hover:not(:disabled) {
    box-shadow: 0 10px 22px -10px rgba(0, 97, 143, .55);
}
.hzh-btn-ink:hover:not(:disabled) {
    box-shadow: 0 10px 22px -12px rgba(16, 38, 43, .5);
}
.hzh-btn:active:not(:disabled) {
    box-shadow: none;
    transform: translateY(1px);
}

/* Paragraphs avoid a lonely last word where the browser supports it. */
.hz-main p {
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .hzh-btn {
        transition: background .2s ease;
    }
    .hzh-btn:active:not(:disabled) {
        transform: none;
    }
}

/* A pine band that ends the page (class set by the view) would merge with the footer. */
.hz-footer.is-after-pine {
    padding-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid rgba(238, 243, 234, .16);
}
@media (max-width: 640px) {
    .hz-footer {
        padding-top: 44px;
    }
    /* Footer links are tapped with a thumb on phones. */
    .hz-footer .hzf-group a {
        min-height: 44px;
    }
}

/* =========================================================================
   Short pages and tall windows (C9.3, corrected in C10.3). The body is a column at least as
   tall as the window. Whatever height is left over must not open up between blocks: <main>
   never grows, and the footer keeps its content together (copyright line directly under the
   links). Any spare height is plain pine after the copyright line, at the very end of the page.
   ========================================================================= */
/* Footer 2.0: the footer is exactly as tall as its content. On a page shorter than the window
   the spare height now belongs to <main> (ivory), not to an empty pine area under the copyright. */
.hz-main {
    flex: 1 0 auto;
}
.hz-footer {
    flex: 0 0 auto;
}

/* Phase C11 — homepage product card: the name is the single link, stretched over the card
   (see the same pattern in healza-commerce.css). Add to cart stays its own action above it. */
.hzh-product {
    position: relative;
}
.hzh-product h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.hzh-product-buy form {
    position: relative;
    z-index: 1;
}

/* Phase C14 — homepage shelf: a product without a photograph shows its name, not the icon. */
.hzh-noimg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 14%;
    color: var(--hzh-ink-soft);
    font-size: clamp(.8rem, .95vw, .92rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Phase C15 — empty states (cart, shop) open with the same pine rule as the status pages, so
   the heading and its action read as one deliberate block. The account's empty states lead
   with an icon instead (healza-account.css). */
.hzk-empty,
.hzs-empty {
    margin-top: clamp(8px, 2vw, 24px);
    padding-top: 26px;
    border-top: 2px solid var(--hzh-pine);
}

/* =========================================================================
   Interaction layer (site-wide). Small, purposeful motion on top of the existing
   components: press and lift on actions, card and row feedback, entrance of page
   intros, and the scroll rise applied by site.js. All of it is switched off under
   prefers-reduced-motion at the end of this block.
   ========================================================================= */

/* Actions: a slight lift on hover, a press on click. */
.hzh-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -14px rgba(0, 125, 189, .75);
}
.hzh-btn-ink:hover:not(:disabled) {
    box-shadow: 0 12px 22px -14px rgba(16, 58, 51, .7);
}
.hzh-btn:active:not(:disabled) {
    transform: scale(.985);
    box-shadow: none;
}
.hzh-btn.is-submitting:disabled {
    transform: none;
}

/* Product cards (home and shop): the card's edge darkens with a soft shadow, the name draws its
   underline. */
.hzh-product {
    transition: border-color .25s ease, box-shadow .25s ease;
}
.hzh-product:hover,
.hzh-product:focus-within {
    border-color: rgba(16, 38, 43, .28);
    box-shadow: 0 10px 24px -18px rgba(16, 58, 51, .35);
}
.hzh-product h3 a {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size .35s ease, color .2s ease;
}
html[dir="rtl"] .hzh-product h3 a {
    background-position: 100% 100%;
}
.hzh-product:hover h3 a {
    background-size: 100% 1px;
}

/* Goals: the row opens slightly toward its arrow, and answers the keyboard the same way. */
.hzh-goal:hover,
.hzh-goal:focus-visible {
    padding-inline: clamp(10px, 1.4vw, 20px);
}
.hzh-goal:focus-visible {
    background: var(--hzh-mist);
}
.hzh-goal:focus-visible h3 {
    color: var(--hzh-pine);
}

/* Forms: the label of the field being edited takes the brand colour. */
.hzk-field > label {
    transition: color .2s ease;
}
.hzk-field:focus-within > label {
    color: var(--hzh-pine);
}

/* Footer: links step toward the reading direction; social marks lift. */
.hz-footer .hzf-group a {
    transition: color .18s ease, translate .2s ease;
}
html[dir="ltr"] .hz-footer .hzf-group li a:hover { translate: 3px 0; }
html[dir="rtl"] .hz-footer .hzf-group li a:hover { translate: -3px 0; }
.hz-footer .hzf-social a {
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.hz-footer .hzf-social a:hover,
.hz-footer .hzf-social a:focus-visible {
    background: rgba(238, 243, 234, .1);
    transform: translateY(-2px);
}

/* Cart count: arrives with a small pop so a new item is noticed. */
@keyframes hz-pop {
    0% { transform: scale(.4); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.hz-commerce-nav .hz-cart-link span {
    animation: hz-pop .45s cubic-bezier(.2, .7, .2, 1) .15s both;
}

/* Page intros (home hero, shop, public pages, cart/checkout): the words settle in. */
@keyframes hz-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.hzs-intro-head > *,
.hzw-intro-head > *,
.hzk-intro-head > * {
    animation: hz-enter .7s cubic-bezier(.2, .7, .2, 1) both;
}

.hzs-intro-head > :nth-child(2),
.hzw-intro-head > :nth-child(2),
.hzk-intro-head > :nth-child(2) { animation-delay: .08s; }

/* Mobile drawer: links follow the panel in. */
@media (max-width: 980px) {
    .hz-commerce-nav .hz-nav-links.is-open > a {
        animation: hz-enter .35s ease both;
    }
    .hz-commerce-nav .hz-nav-links.is-open > a:nth-of-type(2) { animation-delay: .04s; }
    .hz-commerce-nav .hz-nav-links.is-open > a:nth-of-type(3) { animation-delay: .08s; }
    .hz-commerce-nav .hz-nav-links.is-open > a:nth-of-type(4) { animation-delay: .12s; }
    .hz-commerce-nav .hz-nav-links.is-open > a:nth-of-type(5) { animation-delay: .16s; }
}

/* Scroll rise: site.js adds .hz-rise only to blocks that start below the fold, then swaps in
   .hz-rise-in when they arrive. Only a short slide, never transparency: content that the
   observer has not reached yet (a full-page capture, a skipped section) is still visible. */
.hz-rise {
    transform: translateY(18px);
}
.hz-rise-in {
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--hz-rise-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .hzh-btn:hover:not(:disabled),
.hzh-btn:active:not(:disabled),
.hz-footer .hzf-social a:hover,
.hz-footer .hzf-social a:focus-visible {
        transform: none;
    }
    .hz-footer .hzf-group li a:hover {
        translate: none !important;
    }
    .hzh-product,
.hzh-product h3 a,
.hzh-goal,
.hzk-field > label,
.hz-footer .hzf-group a,
.hz-footer .hzf-social a,
.hz-rise-in {
        transition: none;
    }
    .hz-commerce-nav .hz-cart-link span,
    .hzs-intro-head > *,
    .hzw-intro-head > *,
    .hzk-intro-head > *,
    .hz-commerce-nav .hz-nav-links.is-open > a {
        animation: none;
    }
    .hz-rise {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================================
   Phase 3 — homepage flow: products follow the hero, goals follow the range, and a
   consultation invitation precedes the closing statement.
   ========================================================================= */

/* Last section before the footer, so it carries the page's closing space. */
.hzh-consult {
    padding: var(--hzh-section) 0 var(--hzh-page-end);
}
.hzh-consult-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px clamp(24px, 4vw, 56px);
    padding: clamp(28px, 4.4vw, 60px);
    border: 1px solid var(--hzh-line);
    border-radius: 20px;
    background: var(--hzh-mist);
}
.hzh-consult-kicker {
    margin: 0 0 12px;
    color: var(--hzh-pine);
    font-size: .9rem;
    font-weight: 700;
}
.hzh-consult h2 {
    max-width: 18ch;
    margin: 0;
    font-size: calc(clamp(1.7rem, 2.8vw, 2.4rem) * var(--hzh-scale));
    line-height: 1.12;
}
html[lang="ar"] .hzh-consult h2 {
    max-width: 14em;
}
/* The description and action form one block beside the heading, tied to it by a hairline. */
.hzh-consult-side {
    padding-inline-start: clamp(24px, 4vw, 56px);
    border-inline-start: 1px solid var(--hzh-line);
}
.hzh-consult-side p {
    max-width: 34rem;
    margin: 0 0 22px;
    color: var(--hzh-ink-soft);
    font-size: 1.05rem;
    line-height: 1.8;
}
@media (max-width: 760px) {
    .hzh-consult-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .hzh-consult-side {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
    .hzh-consult-side .hzh-btn {
        width: 100%;
    }
}

/* =========================================================================
   Brand pass — homepage: category links in the range header, a fuller brand statement,
   a framed consultation invitation and a two-action close.
   ========================================================================= */

/* Category links (shared partial; also used on About). */
.hzh-cats {
    display: grid;
    margin-top: clamp(20px, 2.6vw, 32px);
    border-top: 1px solid var(--hzh-ink);
}
.hzh-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--hzh-line);
    color: var(--hzh-ink);
    font-weight: 600;
    transition: color var(--hzh-ease), padding var(--hzh-ease);
}
.hzh-cats a .hz-dir-arrow {
    color: var(--hzh-ink-soft);
    font-size: .8em;
}
.hzh-cats a:hover,
.hzh-cats a:focus-visible {
    padding-inline: 10px;
    color: var(--hzh-pine);
}
.hzh-cats a:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .hzh-consult-grid {
        border-radius: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hzh-cats a {
        transition: none;
    }
}

/* =========================================================================
   Homepage 2.0 — new hero (hzx-hero), full-width range (hzx-range), editorial brand story
   and a capsule-led consultation invitation. Scoped to the homepage.
   ========================================================================= */

/* ---- Hero: words on ivory, a pine arch bleeding off the edge, bottles breaking its outline */
.hzx-hero {
    position: relative;
    background: var(--hzh-ivory);
    overflow: hidden;
}
.hzx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(20px, 3vw, 56px);
    min-height: clamp(540px, 80vh, 780px);
    padding-inline-start: var(--hzh-gutter);
}
.hzx-hero-top {
    grid-column: 1;
    grid-row: 2;
    padding-top: clamp(28px, 4vw, 56px);
}
.hzx-hero-bottom {
    grid-column: 1;
    grid-row: 3;
    padding-bottom: clamp(28px, 4vw, 56px);
}
.hzx-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 clamp(16px, 2vw, 26px);
    color: var(--hzh-pine);
    font-size: .92rem;
    font-weight: 700;
}
.hzx-hero-kicker::before {
    content: "";
    width: 44px;
    height: 2px;
    background: var(--hzh-pine);
}
.hzx-hero h1 {
    max-width: 13ch;
    margin: 0;
    color: var(--hzh-ink);
    font-size: calc(clamp(2.5rem, 4.8vw, 4.6rem) * var(--hzh-scale));
    line-height: 1.02;
    letter-spacing: -.01em;
    text-wrap: balance;
}
html[lang="ar"] .hzx-hero h1 {
    max-width: 11em;
    font-size: calc(clamp(2.1rem, 3.8vw, 3.6rem) * var(--hzh-scale));
    line-height: 1.38;
    letter-spacing: 0;
}
.hzx-hero-text {
    max-width: 30rem;
    margin: clamp(18px, 2.2vw, 28px) 0 0;
    padding-inline-start: clamp(16px, 2vw, 26px);
    border-inline-start: 2px solid var(--hzh-pine);
    color: var(--hzh-ink-soft);
    font-size: 1.05rem;
    line-height: 1.75;
}
.hzx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 30px;
    margin-top: clamp(24px, 3vw, 38px);
}
.hzx-hero-actions .hzh-btn {
    min-height: 56px;
    padding-inline: 34px;
    font-size: 1rem;
}

/* Visual column: runs to the viewport edge and to the bottom of the hero. */
.hzx-hero-visual {
    position: relative;
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: clamp(420px, 62vh, 640px);
}
.hzx-hero-arch {
    position: absolute;
    inset-block: 7% 0;
    inset-inline: 18% 0;
    border-start-start-radius: 999px;
    border-start-end-radius: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 200' preserveAspectRatio='none'%3E%3Cpath d='M8,0 C8,50 36,50 36,100 S8,150 8,200 M36,0 C36,50 8,50 8,100 S36,150 36,200' fill='none' stroke='%23a9d15c' stroke-opacity='.32' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") repeat-y right 12% top / 44px 200px,
        radial-gradient(60% 46% at 44% 40%, rgba(238, 243, 234, .16) 0%, rgba(238, 243, 234, 0) 70%),
        linear-gradient(180deg, var(--hzh-pine) 0%, var(--hzh-pine-deep) 100%);
}
html[dir="rtl"] .hzx-hero-arch {
    background-position: left 12% top, 0 0, 0 0;
}
.hzx-hero-pack {
    position: absolute;
    bottom: 0;
    margin: 0;
}
.hzx-hero-pack img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
}
/* Leading bottle: inside the arch, tall. */
.hzx-hero-pack.is-slim {
    inset-inline-start: 34%;
    height: 80%;
    z-index: 2;
    filter: drop-shadow(0 30px 28px rgba(4, 22, 19, .45));
}
/* Second bottle: half out of the arch, on the page, slightly forward. */
.hzx-hero-pack.is-vite {
    inset-inline-start: 4%;
    height: 56%;
    z-index: 3;
    filter: drop-shadow(0 24px 22px rgba(4, 22, 19, .32));
}
.hzx-hero-slogan {
    position: absolute;
    top: clamp(18px, 3vw, 40px);
    inset-inline-start: 0;
    max-width: 14ch;
    margin: 0;
    color: var(--hzh-pine);
    font-family: var(--hzh-font-display);
    font-size: calc(clamp(1rem, 1.3vw, 1.25rem) * var(--hzh-scale));
    font-style: italic;
    line-height: 1.4;
}
html[lang="ar"] .hzx-hero-slogan {
    font-style: normal;
    line-height: 1.55;
}

/* Hero slider (Home:HeroSlides).
   Height: on desktop the box has the --hzx-ratio proportions (Home:HeroAspectRatio) from the
   start, so nothing below moves when the first picture loads; on phones the first picture keeps
   its own proportions (the ratio is only its placeholder). Every other slide fills the same box, shown whole (contain), so changing slides never
   moves the page. Slides cross-fade. overlay = localized copy over the picture's clear left side;
   banner = the picture alone, with an optional caption in its own band under the pictures.
   The stage is a grid: row 1 holds the pictures (and, on desktop, the overlay copy laid on
   them); row 2 holds every caption in one shared cell, so it is as tall as the longest. */
.hzx-slider-stage {
    position: relative;
    display: grid;
}
.hzx-hero.is-slider .hzx-slides {
    position: relative;
    grid-area: 1 / 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
}
/* The slider sits in the same column as the page content instead of running edge to edge, so
   the pictures (shown whole, at their own 1983 / 793 ratio) are about 496px tall at 1240px. */
.hzx-hero.is-slider {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
    padding-top: 16px;
}
@media (max-width: 640px) {
    .hzx-hero.is-slider {
        width: min(100% - 28px, 420px);
        padding-top: 10px;
    }
    .hzx-hero.is-slider .hzx-slides {
        border-radius: 12px;
    }
}
/* Above the ivory wash and the copy of other slides. */
.hzx-slide:not(:first-child) {
    z-index: 1;
}
.hzx-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.hzx-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease;
}
.hzx-slide picture,
.hzx-slide picture img {
    display: block;
    width: 100%;
}
/* The first slide is in the flow and defines the height: a fixed box in the configured ratio
   (Home:HeroAspectRatio), reserved before the picture loads so nothing moves. Set it to the
   pictures' own ratio and a picture shown whole (contain) fills it with no ivory bands... */
.hzx-slide:first-child picture img {
    height: auto;
    aspect-ratio: var(--hzx-ratio, 2 / 1);
    max-height: min(82vh, 760px);
    object-fit: contain;
}
/* ...the others are laid over it. */
.hzx-slide:not(:first-child),
.hzx-slide:not(:first-child) picture,
.hzx-slide:not(:first-child) picture img {
    position: absolute;
    inset: 0;
    height: 100%;
}
.hzx-slide:not(:first-child) picture img {
    object-fit: contain;
    object-position: center;
}
/* Overlay slides fill the box edge to edge, anchored to the picture's busy (right) side, under a
   soft ivory wash where the copy sits. */
.hzx-slide.is-overlay picture img {
    object-fit: cover;
    object-position: right center;
}
.hzx-slide.is-overlay:first-child picture img {
    min-height: 440px;
}
/* The copy column (left 38%) is solid ivory, then the picture fades in, so a pack that reaches
   into that side is covered instead of showing through the words. */
.hzx-slide.is-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--hzh-ivory) 0%, var(--hzh-ivory) 38%, rgba(247, 245, 239, .86) 44%, rgba(247, 245, 239, 0) 56%);
    pointer-events: none;
}
/* Copy: on the left in both languages (the picture is not mirrored); the text inside follows
   the page direction, so Arabic stays right-aligned within the block. */
.hzx-hero.is-slider .hzx-slide-copy {
    grid-area: 1 / 1;
    margin-left: clamp(20px, 3vw, 40px);
    z-index: 2;
    align-self: center;
    justify-self: left;
    width: min(36%, 30rem);
    padding-block: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.hzx-hero.is-slider .hzx-slide-copy.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease;
}
.hzx-hero.is-slider h1,
.hzx-slide-title {
    max-width: 14ch;
    margin: 0;
    color: var(--hzh-pine);
    font-size: calc(clamp(1.9rem, 2.8vw, 3rem) * var(--hzh-scale));
    line-height: 1.08;
    text-wrap: balance;
}
/* Arabic needs its own leading here: the rule above outranks the general Arabic display rule. */
html[lang="ar"] .hzx-hero.is-slider h1,
html[lang="ar"] .hzx-slide-title {
    max-width: 12em;
    line-height: 1.4;
}
.hzx-hero.is-slider .hzx-slide-copy .hzx-hero-text {
    margin: 0;
}
/* Overlay copy carries full and short wording; the short one is for phones and tablets (below). */
.hzx-copy-short {
    display: none;
}
/* Banner captions, under the picture (never over it): title and line as one group, the button
   right after it - the text column is only as wide as its words (up to 48rem). Captions share one
   cell; a shorter one sits centred in it, so it reads with the picture and the controls instead
   of hanging at the top of an empty band. */
.hzx-slide-captions {
    display: grid;
    grid-area: 2 / 1;
    min-width: 0;
}
.hzx-slide-caption {
    display: grid;
    grid-area: 1 / 1;
    grid-template-columns: fit-content(48rem) auto;
    align-self: center;
    align-items: center;
    justify-content: start;
    gap: 14px 28px;
    padding: 14px 0 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.hzx-slide-caption.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease;
}
.hzx-slide-caption-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.hzx-slide-caption-title {
    margin: 0;
    color: var(--hzh-pine);
    font-family: var(--hzh-font-display);
    font-size: calc(clamp(1.5rem, 2.2vw, 2rem) * var(--hzh-scale));
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
html[lang="ar"] .hzx-slide-caption-title {
    line-height: 1.5;
}
.hzx-slide-caption-body {
    max-width: 62ch;
    margin: 0;
    color: var(--hzh-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
}
.hzx-slide-caption .hzh-btn {
    justify-self: start;
}
/* A slider with captions keeps one content band for every slide: the overlay slide's copy moves
   out of its picture into the same band (desktop here; phones and tablets below), so the band is
   never empty and no slide's text covers a pack. Sliders without captions are unchanged. */
@media (min-width: 1024px) {
    .hzx-hero.is-slider.has-captions .hzx-slide.is-overlay picture img {
        object-fit: contain;
        object-position: center;
    }
    .hzx-hero.is-slider.has-captions .hzx-slide.is-overlay:first-child picture img {
        min-height: 0;
    }
    .hzx-hero.is-slider.has-captions .hzx-slide.is-overlay::after {
        display: none;
    }
    /* Same composition as a caption: heading and text as one group (up to 48rem, so the long
       first-slide copy takes two short lines rather than a tall column), the buttons right after
       it. The kicker is left out here, as it is on phones, to keep the band close to the
       captions' height. */
    .hzx-hero.is-slider.has-captions .hzx-slide-copy {
        grid-area: 2 / 1;
        grid-template-columns: fit-content(48rem) auto;
        align-content: center;
        align-self: center;
        justify-content: start;
        justify-self: stretch;
        gap: 6px 28px;
        width: auto;
        margin-inline: 0;
        padding-block: 14px 0;
    }
    .hzx-hero.is-slider.has-captions .hzx-slide-copy .hzx-hero-kicker {
        display: none;
    }
    .hzx-hero.is-slider.has-captions .hzx-slide-copy > :not(.hzx-hero-actions) {
        grid-column: 1;
    }
    .hzx-hero.is-slider.has-captions .hzx-slide-copy .hzx-hero-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        margin: 0;
    }
    .hzx-hero.is-slider.has-captions .hzx-slide-copy :is(h1, .hzx-slide-title) {
        max-width: none;
        font-size: calc(clamp(1.5rem, 2vw, 2rem) * var(--hzh-scale));
    }
    .hzx-hero.is-slider.has-captions .hzx-slide-copy .hzx-hero-text {
        max-width: none;
    }
}
/* Picture motion (data-motion, from the slide's "Motion" setting). Only the picture inside the
   slide moves - never the slide itself (it cross-fades), the copy or the controls. The motion
   runs while the slide is active, is held while the slide fades out (.is-leaving), and is gone,
   and so reset, once it is hidden. Transform and opacity only. */
.hzx-slide picture {
    overflow: hidden;
}
@keyframes hzx-motion-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.02); }
}
@keyframes hzx-motion-reveal {
    from { opacity: .72; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}
/* The pan keeps a constant 1.4% enlargement so its 8px of travel never shows an empty edge. */
@keyframes hzx-motion-pan {
    from { transform: scale(1.014) translateX(4px); }
    to { transform: scale(1.014) translateX(-4px); }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    .hzx-slide[data-motion="zoom"]:is(.is-active, .is-leaving) picture img {
        animation: hzx-motion-zoom 6s linear both;
    }
    .hzx-slide[data-motion="reveal"]:is(.is-active, .is-leaving) picture img {
        animation: hzx-motion-reveal 1.2s ease-out both;
    }
    .hzx-slide[data-motion="pan"]:is(.is-active, .is-leaving) picture img {
        animation: hzx-motion-pan 6s ease-in-out both;
    }
    /* Tab hidden: hold the frame instead of running unseen. */
    .hzx-hero.is-slider.is-paused .hzx-slide picture img {
        animation-play-state: paused;
    }
}

/* Controls: one slim row under the pictures, so nothing is ever drawn over a product or a label. */
.hzx-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
}
.hzx-slider-arrow,
.hzx-slider-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hzh-line);
    border-radius: 50%;
    background: transparent;
    color: var(--hzh-pine);
    font-size: .85rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hzx-slider-toggle[hidden] {
    display: none;
}
/* The pause icon while playing, the play icon while paused. */
.hzx-slider-toggle .hzx-icon-play,
.hzx-slider-toggle.is-playing .hzx-icon-pause {
    display: inline;
}
.hzx-slider-toggle .hzx-icon-pause,
.hzx-slider-toggle.is-playing .hzx-icon-play {
    display: none;
}
.hzx-slider-arrow:hover,
.hzx-slider-toggle:hover {
    border-color: var(--hzh-cyan);
    background: var(--hzh-cyan);
    color: #fff;
}
.hzx-slider-dots {
    display: flex;
    align-items: center;
}
.hzx-slider-dots button {
    position: relative;
    width: 32px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
}
.hzx-slider-dots button::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--hzh-pine);
    opacity: .28;
    transform: translate(-50%, -50%);
    transition: width .25s ease, opacity .25s ease, background-color .25s ease;
}
.hzx-slider-dots button:hover::before {
    opacity: .6;
}
.hzx-slider-dots button[aria-current="true"]::before {
    width: 24px;
    background: var(--hzh-cyan);
    opacity: 1;
}
.hzx-slider-arrow:focus-visible,
.hzx-slider-toggle:focus-visible,
.hzx-slider-dots button:focus-visible {
    outline: 3px solid var(--hzh-pine);
    outline-offset: 2px;
}
/* The dot's focus ring hugs the visible pill instead of the larger hit area. */
.hzx-slider-dots button:focus-visible {
    outline: 0;
}
.hzx-slider-dots button:focus-visible::before {
    outline: 3px solid var(--hzh-pine);
    outline-offset: 3px;
    opacity: 1;
}
.hzx-slider-actions {
    justify-content: center;
    padding: 8px 0 24px;
}
@media (max-width: 1023px) {
    /* Phone and tablet: the first slide is its picture (full width, own proportions, never cropped) with its
       copy underneath, and that pair sets the slider's height. The other slides are laid over
       the whole pair and shown whole, centred - so the height never changes between slides and
       a banner never has the first slide's copy under it. */
    .hzx-slide:first-child picture img,
    .hzx-slide.is-overlay:first-child picture img {
        max-height: none;
        min-height: 0;
        aspect-ratio: var(--hzx-ratio, 2 / 1);
        object-fit: contain;
    }
    .hzx-slide.is-overlay picture img {
        object-fit: contain;
        object-position: center;
    }
    .hzx-slide.is-overlay::after {
        display: none;
    }
    /* Picture, then the controls, then the text: the pictures share one height, so the dots
       never move, and the text cell (as tall as the longest copy) starts right under them. Any
       spare height of a short caption falls at the end of the slider, not between its parts.
       Overlay copy moves into that text cell; only the current slide's copy or caption shows
       there, so nothing is repeated and the height stays the same. */
    .hzx-hero.is-slider {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .hzx-hero.is-slider .hzx-slider-stage {
        display: contents;
    }
    .hzx-hero.is-slider .hzx-slide-copy {
        grid-area: 3 / 1;
        align-self: start;
        justify-self: stretch;
        gap: 12px;
        width: auto;
        margin-inline: 0;
        padding-block: 8px 20px;
    }
    .hzx-hero.is-slider .hzx-slide-copy :is(h1, .hzx-slide-title) {
        font-size: calc(1.6rem * var(--hzh-scale));
    }
    .hzx-hero.is-slider .hzx-slide-copy .hzx-hero-actions {
        margin-top: 4px;
    }
    /* Short wording and the shop button only, so the first slide's copy is about as tall as a
       product caption. The full wording is display: none - not read, not focusable. */
    .hzx-hero.is-slider .hzx-copy-full {
        display: none;
    }
    .hzx-hero.is-slider .hzx-copy-short {
        display: inline;
    }
    .hzx-slide-captions {
        grid-area: 3 / 1;
    }
    .hzx-hero.is-slider .hzx-slide-copy .hzx-hero-kicker {
        display: none;
    }
    .hzx-slide-caption {
        grid-template-columns: minmax(0, 1fr);
        align-self: start;
        justify-items: start;
        gap: 12px;
        padding-block: 8px 20px;
    }
    .hzx-slide-caption-text {
        width: 100%;
    }
    .hzx-slider-controls {
        grid-area: 2 / 1;
        padding-block: 4px;
    }
    .hzx-slider-arrow {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hzx-slide,
    .hzx-slide.is-active,
    .hzx-hero.is-slider .hzx-slide-copy,
    .hzx-hero.is-slider .hzx-slide-copy.is-active,
    .hzx-slide-caption,
    .hzx-slide-caption.is-active,
    .hzx-slider-dots button::before {
        transition: none;
    }
}

/* Photograph hero (only when Home:HeroImageUrl is configured). The picture fills the band; the
   copy sits on its clear left side in both languages, on a soft ivory wash for contrast. */
.hzx-hero.is-image .hzx-hero-photo {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(440px, 42vw, 620px);
    isolation: isolate;
}
.hzx-hero.is-image picture,
.hzx-hero.is-image picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hzx-hero.is-image picture img {
    object-fit: cover;
    object-position: right center;
}
.hzx-hero.is-image .hzx-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--hzh-ivory) 0%, var(--hzh-ivory) 38%, rgba(247, 245, 239, .86) 44%, rgba(247, 245, 239, 0) 56%);
    pointer-events: none;
}
.hzx-hero-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
    justify-items: start;
    width: min(36%, 30rem);
    margin-left: var(--hzh-gutter);
    padding-block: clamp(36px, 5vw, 72px);
}
.hzx-hero.is-image h1 {
    color: var(--hzh-pine);
    font-size: calc(clamp(2.1rem, 3.6vw, 3.5rem) * var(--hzh-scale));
}
.hzx-hero.is-image .hzx-hero-text {
    margin: 0;
}
@media (max-width: 1023px) {
    /* Phone and tablet: the picture first, uncropped on its busy side; the copy below on plain ivory. */
    .hzx-hero.is-image .hzx-hero-photo {
        display: block;
        min-height: 0;
    }
    .hzx-hero.is-image picture,
    .hzx-hero.is-image picture img {
        position: static;
        display: block;
        height: auto;
    }
    .hzx-hero.is-image picture img {
        aspect-ratio: 4 / 3;
    }
    .hzx-hero.is-image .hzx-hero-photo::after {
        display: none;
    }
    .hzx-hero-panel {
        width: auto;
        margin-inline: var(--hzh-gutter);
        margin-left: var(--hzh-gutter);
        padding-block: 28px 32px;
    }
}

@keyframes hzx-rise {
    from { transform: translateY(26px); }
    to { transform: none; }
}
.hzx-hero-top,
.hzx-hero-bottom {
    animation: hz-enter .7s cubic-bezier(.2, .7, .2, 1) both;
}
.hzx-hero-bottom { animation-delay: .1s; }
.hzx-hero-pack { animation: hzx-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hzx-hero-pack.is-vite { animation-delay: .12s; }

/* ---- The range: header row, category chips, four-across grid */
.hz-home-page .hzx-range-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
    gap: 16px clamp(28px, 6vw, 96px);
    padding-bottom: clamp(16px, 2vw, 24px);
    border-bottom: 1px solid var(--hzh-line);
}
.hz-home-page .hzx-range-head h2 {
    margin: 0;
    font-size: calc(clamp(1.9rem, 3.2vw, 2.8rem) * var(--hzh-scale));
}
.hz-home-page .hzx-range-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 28px;
}
.hz-home-page .hzx-range-side p {
    max-width: 24rem;
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.7;
}
.hz-home-page .hzx-range .hzh-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    border-top: 0;
}
.hz-home-page .hzx-range .hzh-cats a {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--hzh-line);
    border-radius: 999px;
    background: transparent;
    font-size: .92rem;
    white-space: nowrap;
}
.hz-home-page .hzx-range .hzh-cats a .hz-dir-arrow {
    display: none;
}
.hz-home-page .hzx-range .hzh-cats a:hover,
.hz-home-page .hzx-range .hzh-cats a:focus-visible {
    padding-inline: 18px;
    border-color: var(--hzh-pine);
    color: var(--hzh-pine);
}
.hz-home-page .hzx-range .hzh-cats a[aria-current="true"] {
    border-color: var(--hzh-pine);
    background: var(--hzh-pine);
    color: var(--hzh-on-pine);
    font-weight: 700;
}
/* A card hidden by the homepage filter leaves the grid (it outranks the card's display: flex). */
.hzh-cards > .hzh-product:nth-child(n)[hidden] {
    display: none;
}
.hzx-range-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin: 20px 0 0;
    color: var(--hzh-ink-soft);
}
.hzx-range-empty[hidden] {
    display: none;
}
/* Product grid (home and shop): cards of up to 224px, as many per row as fit (five at 1240px,
   four at 1024px, three on tablets, two on phones; auto-fit counts columns at that width). Only the cards on the page make columns (auto-fit,
   so hidden or missing cards leave no empty tracks), and the group is centred - one, two or
   three products sit in the middle instead of at one edge. DOM order and RTL are unchanged. */
.hz-home-page .hzx-range-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 224px));
    justify-content: center;
    gap: 32px 20px;
    margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 640px) {
    .hz-home-page .hzx-range-items {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 160px));
        gap: 24px 12px;
    }
}
.hzh-cards > .hzh-product:nth-child(n) {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding: 10px 10px 12px;
    border: 1px solid var(--hzh-line);
    border-radius: 14px;
    background: #fff;
}
/* One square frame per product; the pack is contained (never cropped or stretched) in the same
   padded area whatever the photograph's proportions. */
.hzh-cards .hzh-product-frame {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: #fff;
}
.hzh-cards .hzh-product-frame.is-empty {
    background: var(--hzh-ivory-deep);
}
.hzh-cards .hzh-product-frame img,
.hzh-cards .hzh-product-frame.is-packshot img {
    /* Every card keeps the same top strip free for an offer tag, so packs line up and keep one
       size whether the product is discounted or not. */
    inset: 18% 6% 6%;
    max-width: 88%;
    max-height: 76%;
    border-radius: 6px;
    filter: drop-shadow(0 10px 14px rgba(23, 47, 59, .14));
}
.hzh-cards .hzh-product-frame.is-packshot img {
    border-radius: 0;
}
.hzh-cards .hzh-product-frame .hz-offer-tag {
    top: 8px;
    bottom: auto;
    inset-inline-start: 8px;
}
.hzh-cards .hzh-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 2px 0;
}
.hzh-cards .hzh-product h3 {
    margin-bottom: 4px;
    font-size: calc(1.12rem * var(--hzh-scale));
    line-height: 1.3;
    overflow-wrap: anywhere;
}
html[lang="ar"] .hzh-cards .hzh-product h3 {
    line-height: 1.5;
}
.hzh-cards .hzh-product-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.hzh-cards .hzh-product-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}
/* The buy block is pushed to the bottom (prices line up across a row); the text above it keeps
   a fixed distance from its rule even in the row's tallest card. */
.hzh-cards .hzh-product-info > :has(+ .hzh-product-buy) {
    margin-bottom: 12px;
}
.hzh-cards .hzh-product-buy {
    gap: 10px;
    padding-top: 12px;
}
.hzh-cards .hzh-product-buy .hzh-btn {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-size: .92rem;
}
/* Current price, then the old price and availability, wrapping onto a second line in a narrow
   card rather than shrinking. */
.hzh-cards .hz-price {
    gap: 2px 8px;
}
.hzh-cards .hz-price strong {
    font-size: 1.25rem;
}
.hzh-cards .hz-price del {
    font-size: .88rem;
    font-weight: 500;
}
/* Shop extras: category line above the name and the stock line beside the price. */
.hzh-cards .hzh-product-cat {
    margin: 0 0 4px;
    color: var(--hzh-pine);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
}
.hzh-cards .hzh-product-priceline {
    display: grid;
    justify-items: start;
    gap: 4px;
}
.hzh-cards .hzh-product-priceline .hz-avail {
    font-size: .8rem;
}
.hzh-cards .hzh-product.is-out .hzh-product-frame img {
    opacity: .55;
}
/* Prices and buttons line up across a row because every card stretches to the row's height and
   its buy block is pushed to the bottom (margin-top: auto); the name and description stay together. */

/* ---- About Healza in brief: who the brand is and its trust points, on one light band */
.hzh-about {
    padding: var(--hzh-section) 0;
    background: var(--hzh-mist);
}
.hzh-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 32px clamp(32px, 6vw, 96px);
}
.hzh-about-kicker {
    margin: 0 0 12px;
    color: var(--hzh-pine);
    font-size: .9rem;
    font-weight: 700;
}
.hzh-about h2 {
    max-width: 14ch;
    margin: 0;
    font-size: calc(clamp(1.9rem, 3.2vw, 2.8rem) * var(--hzh-scale));
}
html[lang="ar"] .hzh-about h2 {
    max-width: 12em;
}
.hzh-about-text {
    max-width: 32rem;
    margin: 16px 0 0;
    color: var(--hzh-ink-soft);
    font-size: 1.05rem;
    line-height: 1.8;
}
.hzh-about-quote {
    margin: 24px 0 14px;
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--hzh-cyan);
}
.hzh-about-quote blockquote {
    margin: 0;
}
.hzh-about-quote p {
    margin: 0;
    color: var(--hzh-ink);
    font-family: var(--hzh-font-display);
    font-size: calc(1.2rem * var(--hzh-scale));
    font-style: italic;
    line-height: 1.45;
}
html[lang="ar"] .hzh-about-quote p {
    font-style: normal;
    font-weight: 700;
    line-height: 1.6;
}
.hzh-about-quote figcaption {
    margin-top: 6px;
    color: var(--hzh-ink-soft);
    font-size: .85rem;
    font-weight: 600;
}
.hzh-about-fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hzh-line);
    color: var(--hzh-ink);
    font-weight: 700;
    line-height: 1.6;
}
.hzh-about-fact i {
    color: var(--hzh-cyan);
}
.hzh-about-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(20px, 3vw, 40px);
    margin: 0;
}
.hzh-about-points > div {
    padding: 18px 0;
    border-bottom: 1px solid var(--hzh-line);
}
.hzh-about-points dt {
    margin: 0 0 4px;
    color: var(--hzh-pine);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
}
.hzh-about-points dd {
    margin: 0;
    color: var(--hzh-ink-soft);
    font-size: 1rem;
    line-height: 1.7;
}
@media (max-width: 860px) {
    .hzh-about-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 480px) {
    .hzh-about-points {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Tablet */

/* ---- Phone: its own composition. Headline, then a short pine band the bottles stand in with
   the slogan beside them, then the text and a full-width action. */
@media (max-width: 760px) {
    .hzx-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        min-height: 0;
        padding-inline: 0;
    }
    .hzx-hero-top,
    .hzx-hero-bottom,
    .hzx-hero-visual {
        grid-column: 1;
        grid-row: auto;
    }
    .hzx-hero-top {
        padding: 26px var(--hzh-gutter) 18px;
    }
    .hzx-hero h1,
    html[lang="ar"] .hzx-hero h1 {
        max-width: none;
        font-size: calc(clamp(2.3rem, 10.5vw, 3.2rem) * var(--hzh-scale));
    }
    .hzx-hero-visual {
        min-height: 0;
        height: clamp(230px, 62vw, 300px);
        margin-top: 34px;
    }
    .hzx-hero-arch {
        inset-block: 0;
        inset-inline: 0;
        border-radius: 0;
    }
    .hzx-hero-pack.is-slim {
        inset-inline-start: auto;
        inset-inline-end: 8%;
        height: 116%;
    }
    .hzx-hero-pack.is-vite {
        inset-inline-start: auto;
        inset-inline-end: 38%;
        height: 96%;
    }
    .hzx-hero-slogan {
        top: 50%;
        inset-inline-start: var(--hzh-gutter);
        max-width: 9ch;
        transform: translateY(-50%);
        color: var(--hzh-on-pine);
        font-size: calc(1.05rem * var(--hzh-scale));
    }
    .hzx-hero-bottom {
        padding: 22px var(--hzh-gutter) 26px;
    }
    .hzx-hero-text {
        margin-top: 0;
        font-size: 1rem;
    }
    .hzx-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .hzx-hero-actions .hzh-btn {
        width: 100%;
        min-height: 56px;
    }
    .hzx-hero-actions .hzh-link {
        align-self: center;
    }

    .hz-home-page .hzx-range-head {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Category chips wrap onto more rows; a long name wraps inside its chip. */
    .hz-home-page .hzx-range .hzh-cats a {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
    .hzh-cards .hzh-product h3 {
        font-size: calc(1.02rem * var(--hzh-scale));
    }
    .hzh-cards .hzh-product-desc {
        font-size: .85rem;
    }
    .hzh-cards .hz-price strong {
        font-size: 1.12rem;
    }
    .hzh-cards .hzh-product-buy .hzh-btn {
        padding-inline: 8px;
        font-size: .88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hzx-hero-top,
    .hzx-hero-bottom,
    .hzx-hero-pack {
        animation: none;
    }
}

/* =========================================================================
   Journey — add-to-cart confirmation bar and the current-page state of the cart icon.
   ========================================================================= */
.hz-added {
    position: fixed;
    top: calc(var(--hzh-header-h) + 8px);
    inset-inline-end: max(14px, calc(var(--hzh-gutter) - 10px));
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    max-width: min(440px, calc(100vw - 28px));
    padding: 14px 18px;
    border-inline-start: 4px solid var(--hzh-pine);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(16, 58, 51, .45), 0 0 0 1px var(--hzh-line);
    color: var(--hzh-ink);
    font-weight: 700;
    animation: hz-enter .35s ease both;
}
.hz-added[hidden] {
    display: none;
}
.hz-added > i {
    color: var(--hzh-pine);
}
.hz-added > span {
    flex: 1 1 auto;
}
.hz-added a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--hzh-ink);
    font-size: .92rem;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.hz-added a.is-primary {
    padding: 0 16px;
    border-radius: 999px;
    background: var(--hzh-cyan);
    color: #fff;
    text-decoration: none;
}
.hz-added a.is-primary:hover {
    background: var(--hzh-cyan-deep);
    color: #fff;
}
.hz-added a:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 3px;
}
.hz-commerce-nav .hz-cart-link[aria-current="page"] {
    color: var(--hzh-pine);
    box-shadow: inset 0 -2px 0 var(--hzh-pine);
}
@media (max-width: 640px) {
    .hz-added {
        inset-inline: 14px;
        max-width: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hz-added {
        animation: none;
    }
}

/* =========================================================================
   Footer 3.0 — compact close: one section (brand + three link columns) and a thin last line.
   These rules replace the layout values of the first footer block above; tokens are unchanged.
   No decoration, no accent colour: ivory on pine only.
   ========================================================================= */
.hz-footer,
.hz-footer.is-after-pine {
    padding: 44px 0 0;
}
.hzf-inner {
    grid-template-columns: minmax(0, 35fr) minmax(0, 20fr) minmax(0, 20fr) minmax(0, 25fr);
    gap: 28px 40px;
    padding-bottom: 20px;
}
.hz-footer .hzf-logo {
    height: 60px;
}
.hz-footer .hzf-tagline {
    max-width: 22rem;
    margin-top: 16px;
    font-size: .92rem;
    line-height: 1.7;
}
.hz-footer .hzf-origin {
    margin: 12px 0 0;
    color: var(--hzh-on-pine-soft);
    font-size: .85rem;
    font-weight: 600;
}
.hz-footer .hzf-group h2 {
    margin: 0 0 8px;
    color: var(--hzh-on-pine-soft);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.hz-footer .hzf-group ul {
    gap: 0;
}
.hz-footer .hzf-group a {
    min-height: 34px;
    font-size: .95rem;
}
.hz-footer .hzf-touch a {
    overflow-wrap: anywhere;
}
.hz-footer .hzf-social {
    margin-top: 14px;
}
.hz-footer .hzf-bottom {
    padding-block: 16px 22px;
    font-size: .82rem;
}

/* Four columns, then two by two (the brand and each group take one cell, so no group is left
   alone on a row), then one column on narrow phones. */
@media (max-width: 980px) {
    .hzf-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .hz-footer,
    .hz-footer.is-after-pine {
        padding-top: 32px;
    }
    .hzf-inner {
        gap: 24px 20px;
        padding-bottom: 18px;
    }
}
@media (max-width: 520px) {
    .hzf-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 640px) {
    .hz-footer .hzf-logo {
        height: 56px;
    }
    .hz-footer .hzf-group a {
        min-height: 44px;
    }
}