/* ==========================================================================
   Healza — commerce layer (Shop + Product Details)
   Loaded only by those two views through the layout's "Styles" section, after
   healza-editorial.css. It adds no palette or type of its own: tokens, display
   type, buttons, links, price, offer tag and availability all come from the
   editorial layer, so the storefront stays in the homepage's visual world.

   Structure: 1) commerce primitives  2) Shop  3) Product Details  4) responsive
   ========================================================================== */

body.hz-shell.hz-shop-page,
body.hz-shell.hz-product-details-page {
    background: var(--hzh-ivory);
    color: var(--hzh-ink);
}

/* 1) Commerce primitives --------------------------------------------------- */

.hzc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--hzh-ink-soft);
    font-size: .86rem;
    font-weight: 600;
}
.hzc-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hzc-crumbs li + li::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--hzh-line);
}
.hzc-crumbs a {
    color: var(--hzh-ink);
    transition: color var(--hzh-ease);
}
.hzc-crumbs a:hover,
.hzc-crumbs a:focus-visible {
    color: var(--hzh-cyan-deep);
}
.hzc-crumbs [aria-current] {
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Category / wellness-goal line: the homepage kicker, reused. */
.hzc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--hzh-pine);
    font-size: .92rem;
    font-weight: 600;
}
.hzc-kicker::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 1px;
    background: currentColor;
}
a.hzc-kicker:hover,
a.hzc-kicker:focus-visible {
    color: var(--hzh-cyan-deep);
}

/* Product stage: a calm tonal surface designed around the packshot. The image is
   never cropped — it is contained inside a padded area and keeps its whole
   silhouette. Rounded corners and the shadow follow the image's own shape, so a
   rectangular photo reads as a print resting on the surface today and a
   transparent cut-out simply stands on it later, with no layout change. */
.hzc-stage {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--hzh-mist);
}
.hzc-shot {
    position: absolute;
    inset: var(--hzc-shot-inset, 9% 14%);
    display: block;
}
.hzc-shot img {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 26px 30px rgba(11, 42, 37, .2));
    transition: transform .5s ease;
}
.hzc-shot img.is-packshot {
    border-radius: 0;
    filter: drop-shadow(0 18px 18px rgba(11, 42, 37, .18));
}
.hzc-shot b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--hzh-pine);
    font-family: var(--hzh-font-display);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 500;
}
/* Helix thread on the stage's quiet edge — never over the packaging. */
.hzc-stage::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--hzc-thread-offset, 6%);
    width: 44px;
    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='%23103a33' stroke-opacity='.16' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") repeat-y center top / 44px 200px;
    pointer-events: none;
}

/* Price + availability read as one line above the action. */
.hzc-buyline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
}

/* 2) Shop ------------------------------------------------------------------ */

.hzs-intro {
    padding: clamp(14px, 1.8vw, 22px) 0 0;
}
.hzs-intro-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: end;
    gap: 20px clamp(28px, 6vw, 96px);
    margin-top: clamp(28px, 4.4vw, 60px);
    padding-bottom: clamp(26px, 3.4vw, 44px);
    border-bottom: 1px solid var(--hzh-ink);
}
.hzs-intro-head h1 {
    max-width: 15ch;
    margin: 0;
    font-size: calc(clamp(2.4rem, 5.2vw, 4.6rem) * var(--hzh-scale));
}
html[lang="ar"] .hzs-intro-head h1 {
    max-width: 12em;
}
.hzs-intro-side {
    display: grid;
    gap: 18px;
    justify-items: start;
}
.hzs-intro-side p {
    max-width: 26rem;
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.8;
}

/* Categories: text navigation with a rule that thickens on the active item. */
.hzs-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(20px, 3vw, 40px);
}
.hzs-cats a {
    position: relative;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    color: var(--hzh-ink-soft);
    font-size: .95rem;
    font-weight: 600;
    transition: color var(--hzh-ease);
}
.hzs-cats a::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -1px;
    height: 3px;
    background: var(--hzh-ink);
    transform: scaleX(0);
    transition: transform var(--hzh-ease);
}
.hzs-cats a:hover,
.hzs-cats a.is-active {
    color: var(--hzh-ink);
}
.hzs-cats a.is-active::before {
    transform: scaleX(1);
}

.hzs-collection {
    padding: clamp(40px, 6vw, 88px) 0 var(--hzh-page-end);
}

.hzs-empty {
    display: grid;
    justify-items: start;
    gap: 14px;
    max-width: 38rem;
    padding: clamp(24px, 5vw, 64px) 0;
}
.hzs-empty h2 {
    margin: 8px 0 0;
    font-size: calc(clamp(2rem, 4vw, 3.2rem) * var(--hzh-scale));
}
.hzs-empty p {
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.8;
}

/* 3) Product Details ------------------------------------------------------- */

.hzp-top {
    padding-bottom: clamp(56px, 8vw, 120px);
}
.hzp-crumbs-row {
    padding: clamp(18px, 2.2vw, 28px) var(--hzh-gutter);
}
/* Mirror of the homepage hero: there a pine stage bleeds off the far edge; here the
   product's own stage enters from the near edge as half a capsule, and the purchase
   column stays narrow beside it. */
.hzp-hero {
    display: grid;
    grid-template-columns: minmax(0, 57%) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 5.5vw, 88px);
    padding-inline-end: var(--hzh-gutter);
}
.hzp-gallery {
    min-width: 0;
}
.hzp-stage {
    --hzc-shot-inset: 8% 18% 8% 22%;
    --hzc-thread-offset: 5%;
    height: clamp(440px, 72vh, 680px);
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
}
html[dir="rtl"] .hzp-stage {
    --hzc-shot-inset: 8% 22% 8% 18%;
}
.hzp-thumbs {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding-inline-start: var(--hzh-gutter);
    padding-bottom: 6px;
    overflow-x: auto;
}
.hzp-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 76px;
    padding: 6px 6px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: .6;
    transition: opacity var(--hzh-ease);
}
.hzp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hzp-thumb::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    bottom: 0;
    height: 2px;
    background: var(--hzh-ink);
    transform: scaleX(0);
    transition: transform var(--hzh-ease);
}
.hzp-thumb:hover,
.hzp-thumb.is-active {
    opacity: 1;
}
.hzp-thumb.is-active::after {
    transform: scaleX(1);
}
.hzp-info {
    min-width: 0;
    padding-top: clamp(8px, 3vw, 48px);
}
.hzp-info h1 {
    margin: 16px 0 16px;
    font-size: calc(clamp(2.3rem, 4.4vw, 4.2rem) * var(--hzh-scale));
    overflow-wrap: anywhere;
}
.hzp-lead {
    max-width: 32rem;
    margin: 0;
    color: var(--hzh-ink-soft);
    font-size: 1.08rem;
    line-height: 1.85;
}
/* Purchase system: one ruled block, no card. */
.hzp-buy {
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(20px, 2.4vw, 28px);
    border-top: 1px solid var(--hzh-ink);
}
.hzp-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 14px;
    margin-top: 22px;
}
.hzp-qty-field {
    display: grid;
    gap: 6px;
}
.hzp-qty-field label {
    color: var(--hzh-ink-soft);
    font-size: .82rem;
    font-weight: 600;
}
.hzp-qty {
    height: 54px;
    display: inline-grid;
    grid-template-columns: 48px 46px 48px;
    align-items: stretch;
    border: 1px solid var(--hzh-ink);
    border-radius: 999px;
    overflow: hidden;
}
.hzp-qty button {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hzh-ink);
    font-size: .8rem;
    transition: background var(--hzh-ease);
}
.hzp-qty button:hover:not(:disabled) {
    background: var(--hzh-mist);
}
.hzp-qty input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hzh-ink);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.hzp-qty input::-webkit-outer-spin-button,
.hzp-qty input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.hzp-qty:has(input:disabled) {
    border-color: var(--hzh-line);
}
.hzp-qty button:disabled,
.hzp-qty input:disabled {
    color: var(--hzh-ink-soft);
    opacity: .55;
    cursor: not-allowed;
}
.hzp-add {
    width: 100%;
}
.hzp-cartlink {
    margin-top: 12px;
    font-size: .92rem;
}
.hzp-trust {
    display: grid;
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hzh-line);
}
.hzp-trust li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hzh-line);
    color: var(--hzh-ink-soft);
    font-size: .9rem;
    line-height: 1.55;
}
.hzp-trust i {
    flex: 0 0 auto;
    width: 16px;
    color: var(--hzh-pine);
    font-size: .85rem;
    text-align: center;
}
.hzp-sku {
    margin: 14px 0 0;
    color: var(--hzh-ink-soft);
    font-size: .8rem;
}

.hzp-thumb:focus-visible,
.hzp-qty button:focus-visible,
.hzp-qty input:focus-visible,
.hzs-cats a:focus-visible,
.hzc-crumbs a:focus-visible,
a.hzc-kicker:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 3px;
}
.hzp-qty button:focus-visible,
.hzp-qty input:focus-visible {
    outline-offset: -4px;
    border-radius: 999px;
}

@media (min-width: 981px) {
    .hzp-gallery {
        position: sticky;
        top: calc(var(--hzh-header-h) + 20px);
    }
}

/* Product story: the description gets a reading column; the practical facts
   (usage, warnings, returns) follow as a ruled list. */
.hzp-story {
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid var(--hzh-line);
}
.hzp-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(20px, 4vw, 56px);
}
.hzp-story-grid > h2 {
    margin: 0;
    font-size: calc(clamp(1.6rem, 2.6vw, 2.2rem) * var(--hzh-scale));
}
.hzp-description p {
    max-width: 40rem;
    margin: 0;
    color: var(--hzh-ink);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.85;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.hzp-facts {
    border-top: 1px solid var(--hzh-ink);
}
.hzp-description + .hzp-facts {
    margin-top: clamp(20px, 2.6vw, 32px);
}
.hzp-fact {
    display: grid;
    grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px clamp(18px, 3vw, 40px);
    padding: clamp(12px, 1.6vw, 18px) 0;
    border-bottom: 1px solid var(--hzh-line);
}
.hzp-fact h3 {
    margin: 0;
    color: var(--hzh-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}
.hzp-fact p {
    max-width: 38rem;
    margin: 0;
    color: var(--hzh-ink-soft);
    line-height: 1.9;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.hzp-fact.is-warning {
    margin-inline: calc(clamp(14px, 1.8vw, 22px) * -1);
    padding-inline: clamp(14px, 1.8vw, 22px);
    background: var(--hzh-amber-soft);
}
.hzp-fact.is-warning h3 {
    color: var(--hzh-amber-ink);
}
.hzp-fact.is-warning p {
    color: #4a3a1c;
}
.hzp-lang-note {
    display: block;
    margin-bottom: 6px;
    color: var(--hzh-ink-soft);
    font-size: .8rem;
    font-weight: 600;
}

/* Closing gesture: the brand promise, set quietly on pine, pointing back to the range. */
.hzp-closing {
    padding: clamp(48px, 6vw, 88px) 0;
    background:
        radial-gradient(60% 70% at 86% 10%, rgba(169, 209, 92, .09) 0%, rgba(169, 209, 92, 0) 70%),
        linear-gradient(180deg, var(--hzh-pine) 0%, var(--hzh-pine-deep) 100%);
    color: var(--hzh-on-pine);
}
.hzp-closing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: end;
    gap: 24px clamp(28px, 6vw, 110px);
}
.hzp-closing-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    color: var(--hzh-leaf);
    font-size: .95rem;
    font-weight: 600;
}
.hzp-closing-kicker::before {
    content: "";
    width: 40px;
    height: 1px;
    background: currentColor;
}
.hzp-closing h2 {
    margin: 0;
    color: var(--hzh-on-pine);
    font-size: calc(clamp(1.8rem, 3.2vw, 2.6rem) * var(--hzh-scale));
}
.hzp-closing-side p {
    max-width: 28rem;
    margin: 0 0 18px;
    color: var(--hzh-on-pine-soft);
    line-height: 1.8;
}
.hzp-closing .hzh-link:focus-visible {
    outline-color: var(--hzh-leaf);
}

/* 4) Responsive ------------------------------------------------------------ */

@media (max-width: 980px) {
    .hzs-intro-head,
    .hzp-story-grid,
    .hzp-closing-grid {
        grid-template-columns: 1fr;
    }
    .hzs-intro-side {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }
    .hzp-hero {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-inline-end: 0;
    }
    .hzp-stage {
        --hzc-shot-inset: 8% 20% 8% 20%;
        height: clamp(300px, 56vw, 460px);
        margin-inline-end: var(--hzh-gutter);
    }
    html[dir="rtl"] .hzp-stage {
        --hzc-shot-inset: 8% 20% 8% 20%;
    }
    .hzp-thumbs {
        padding-inline: var(--hzh-gutter);
    }
    .hzp-info {
        padding: 0 var(--hzh-gutter);
    }
}

@media (max-width: 640px) {
    .hzs-intro-head {
        margin-top: 24px;
    }
    .hzs-cats {
        flex-wrap: nowrap;
        gap: 0 24px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .hzs-cats a {
        flex: 0 0 auto;
        min-height: 50px;
        white-space: nowrap;
    }

    .hzp-crumbs-row {
        padding-block: 14px;
    }
    .hzp-stage {
        height: min(88vw, 360px);
    }
    .hzp-info h1 {
        margin: 12px 0;
    }
    .hzp-fact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .hzp-form {
        grid-template-columns: 1fr;
    }
    .hzp-qty-field {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .hzp-qty-field label {
        font-size: .92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hzc-shot img,
    .hzp-thumb,
    .hzp-thumb::after,
    .hzs-cats a::before {
        transition: none;
    }
}

/* Phase C5 — product page: saving / low-stock notes and the mobile quick-purchase bar */
.hzp-buy-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 10px 0 0;
    font-size: .92rem;
    font-weight: 600;
}
.hzp-save { color: var(--hzh-pine, #15392f); }
.hzp-low { color: #8a5a12; }
.hzp-sticky { display: none; }
@media (max-width: 760px) {
    .hzp-sticky:not([hidden]) {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--hzh-line, #e4dfd4);
        background: var(--hzh-ivory, #f7f4ee);
        box-shadow: 0 -8px 24px rgba(21, 57, 47, .1);
        animation: hzp-sticky-in .22s ease-out;
    }
    .hzp-sticky-info { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
    .hzp-sticky-name { overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
    .hzp-sticky-info strong { font-size: 1rem; }
    .hzp-sticky-info small { font-weight: 600; }
    .hzp-sticky .hzh-btn { flex: 0 0 auto; min-height: 46px; padding-inline: 20px; white-space: nowrap; }
    body.hz-pd-sticky-on { padding-bottom: 76px; }
}
@keyframes hzp-sticky-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hzp-sticky:not([hidden]) { animation: none; }
}

/* Phase C8 — product page: return terms vs. product-problem reporting */
.hzp-return-notes { display: grid; gap: 6px; margin: 14px 0 0; color: var(--hzh-ink-soft); font-size: .88rem; line-height: 1.6; }
.hzp-return-notes p { margin: 0; }

/* =========================================================================
   Phase C9 — product card and product page refinement
   ========================================================================= */

/* Saving and low-stock notes read as two quiet labels instead of loose text. */
.hzp-buy-notes {
    gap: 8px;
    margin-top: 12px;
}
.hzp-save,
.hzp-low {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: .86rem;
    line-height: 1.4;
}
.hzp-save {
    background: var(--hzh-mist);
    color: var(--hzh-pine);
}
.hzp-low {
    background: var(--hzh-amber-soft);
    color: var(--hzh-amber-ink);
}

/* Return terms and problem reporting: set apart from the trust list as a side note. */
.hzp-return-notes {
    margin-top: 18px;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--hzh-line);
}
.hzp-return-notes .hzh-link {
    padding: 2px 0;
    font-size: inherit;
}

/* Quick-purchase bar on very narrow phones: the price stays, the name gives way. */
@media (max-width: 360px) {
    .hzp-sticky-name {
        display: none;
    }
    .hzp-sticky .hzh-btn {
        padding-inline: 16px;
    }
}

/* =========================================================================
   Phase C9.2 — shop cards. Classes come from the views (is-n4, is-empty);
   replaces the C9.1 :has() rules.
   ========================================================================= */

/* No approved image (Shop and product page): the same brand frame as the homepage. */
.hzc-stage.is-empty {
    background: var(--hzh-ivory-deep);
    box-shadow: inset 0 0 0 1px var(--hzh-line);
}
.hzc-stage.is-empty::after {
    display: none;
}

/* =========================================================================
   Phase C11 — one link per product card. The product name is the only link to the product;
   its hit area is stretched over the whole card, so the image and the text open the product
   as before. The purchase controls sit above that area and stay separate actions.
   ========================================================================= */

/* =========================================================================
   Phase C13 — shop: tighter hero, smaller stages, text placeholder, category nav.
   ========================================================================= */

/* Hero: a compact title and little air around it, so products start within the first screen. */
.hzs-intro-head {
    margin-top: clamp(10px, 1.6vw, 18px);
    padding-bottom: clamp(18px, 2.2vw, 28px);
}
.hzs-intro-head h1 {
    font-size: calc(clamp(1.6rem, 2.4vw, 2.1rem) * var(--hzh-scale));
}
.hzs-collection {
    padding-top: clamp(26px, 3.4vw, 44px);
}
@media (max-width: 980px) {
    /* The side column now holds the paragraph only. */
    .hzs-intro-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Product without a photograph: its name, set quietly on the plain surface. */
.hzs-noimg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 12%;
    /* A quiet caption, not a second title: the real name is the heading under the stage. */
    color: var(--hzh-ink-soft);
    font-size: clamp(.82rem, 1vw, .95rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Categories: lower row, clearer active item, a light rule on hover. */
.hzs-cats a {
    min-height: 48px;
}
.hzs-cats a.is-active {
    font-weight: 700;
}
.hzs-cats a:not(.is-active):hover::before {
    transform: scaleX(1);
    opacity: .28;
}
.hzs-cats a:focus-visible {
    outline-offset: -3px;
}
@media (max-width: 640px) {
    .hzs-cats {
        scroll-snap-type: x proximity;
    }
    .hzs-cats::-webkit-scrollbar {
        display: none;
    }
    .hzs-cats a {
        scroll-snap-align: start;
    }
}

/* Phase C14 — product page: the same name placeholder, larger on the main stage. */
.hzp-stage .hzs-noimg {
    font-size: clamp(.95rem, 1.4vw, 1.15rem);
}

/* =========================================================================
   Phase 2 — product page purchase panel and information accordions; shop grid on phones.
   ========================================================================= */

/* The purchase controls read as one unit, set on a quiet panel. */
.hzp-buy {
    padding: clamp(14px, 1.8vw, 20px);
    border-top: 2px solid var(--hzh-pine);
    background: var(--hzh-ivory-deep);
}
.hzp-buy .hzc-buyline {
    align-items: center;
}
.hzp-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hzh-line);
}
.hzp-qty {
    background: #fff;
}
.hzp-add {
    min-height: 54px;
}
.hzp-cartlink {
    margin-top: 14px;
}
@media (max-width: 420px) {
    .hzp-form {
        grid-template-columns: minmax(0, 1fr);
    }
    .hzp-qty-field {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

/* Usage, warnings and return terms: native disclosure rows (keyboard and screen-reader ready). */
details.hzp-fact {
    display: block;
}
details.hzp-fact > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
details.hzp-fact > summary::-webkit-details-marker {
    display: none;
}
details.hzp-fact > summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--hzh-ink);
    font-size: 1.1rem;
    line-height: 1;
}
details.hzp-fact[open] > summary::after {
    content: "\2212";
}
details.hzp-fact > summary:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 3px;
}
details.hzp-fact > :not(summary) {
    margin-top: 10px;
}
details.hzp-fact h3 {
    font-size: 1.06rem;
}

/* Phase 3 — shop on phones: a shorter intro so products start within the first screen. */
@media (max-width: 640px) {
    .hzs-intro-head {
        margin-top: 12px;
        padding-bottom: 14px;
        gap: 10px;
    }
    .hzs-intro-head h1 {
        font-size: calc(1.75rem * var(--hzh-scale));
    }
    .hzs-intro-side p {
        font-size: .95rem;
        line-height: 1.65;
    }
    .hzs-collection {
        padding-top: 22px;
    }
}

/* =========================================================================
   Shop — retail pass. Everything is scoped to the shop page (body.hz-shop-page), so it
   settles the earlier shop rules in one place without touching the product page.
   ========================================================================= */

/* Header: title and introduction on one rule; categories and the product count beneath. */
.hz-shop-page .hzs-intro-head {
    align-items: end;
    border-bottom: 0;
    padding-bottom: 12px;
}
.hz-shop-page .hzs-intro-side p {
    font-size: .98rem;
    line-height: 1.7;
}
/* Category chips and the product count share one bar; on narrow screens the count simply wraps
   under the chips. */
.hz-shop-page .hzs-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-block: 10px;
    border-block: 1px solid var(--hzh-line);
    border-top-color: var(--hzh-ink);
}
.hz-shop-page .hzs-count {
    flex: 0 0 auto;
    margin: 0;
    margin-inline-start: auto;
    color: var(--hzh-ink-soft);
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hz-shop-page .hzs-count b {
    color: var(--hzh-ink);
}

/* Categories: chips. The active one is filled, so the current filter is never in doubt. */
.hz-shop-page .hzs-cats {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.hz-shop-page .hzs-cats a {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--hzh-line);
    border-radius: 999px;
    background: transparent;
    color: var(--hzh-ink);
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--hzh-ease), border-color var(--hzh-ease), color var(--hzh-ease);
}
.hz-shop-page .hzs-cats a::before {
    content: none;
}
.hz-shop-page .hzs-cats a:hover {
    border-color: var(--hzh-pine);
    color: var(--hzh-pine);
}
.hz-shop-page .hzs-cats a.is-active {
    border-color: var(--hzh-pine);
    background: var(--hzh-pine);
    color: var(--hzh-on-pine);
    font-weight: 700;
}
.hz-shop-page .hzs-cats a:focus-visible {
    outline-offset: 2px;
}

.hz-shop-page .hzs-collection {
    padding-top: clamp(18px, 2.2vw, 28px);
}

/* Active filter: what the list is narrowed to, and one way back to the full range. */
.hz-shop-page .hzs-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 14px 0 0;
    color: var(--hzh-ink-soft);
    font-size: .9rem;
    font-weight: 600;
}
.hz-shop-page .hzs-active b {
    color: var(--hzh-ink);
}
.hz-shop-page .hzs-active a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--hzh-line);
    border-radius: 999px;
    color: var(--hzh-pine);
    font-weight: 700;
    transition: border-color var(--hzh-ease), background-color var(--hzh-ease);
}
.hz-shop-page .hzs-active a:hover {
    border-color: var(--hzh-cyan);
    background: rgba(0, 125, 189, .08);
}
.hz-shop-page .hzs-active a:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 2px;
}

/* Grid: the homepage card (.hzh-cards, healza-editorial.css) in the same columns of up to 224px as
   the homepage range, centred when there are fewer cards than a row holds; two on phones. */
.hz-shop-page .hzs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 224px));
    justify-content: center;
    gap: 32px 20px;
}
@media (max-width: 640px) {
    .hz-shop-page .hzs-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 160px));
        gap: 24px 12px;
    }
}

/* Empty category / empty shop: one calm panel with the way back. */
.hz-shop-page .hzs-empty {
    justify-items: center;
    max-width: none;
    margin-top: 0;
    padding: clamp(36px, 5vw, 64px) 20px;
    border: 0;
    border-radius: 16px;
    background: var(--hzh-mist);
    text-align: center;
}
.hz-shop-page .hzs-empty h2 {
    margin: 0;
    font-size: calc(clamp(1.6rem, 2.6vw, 2.2rem) * var(--hzh-scale));
}
.hz-shop-page .hzs-empty p {
    max-width: 30rem;
}
.hz-shop-page .hzs-empty .hzh-btn {
    margin-top: 6px;
}

@media (max-width: 640px) {
    /* Chips wrap onto more rows (nothing scrolls sideways); a long name wraps inside its chip. */
    .hz-shop-page .hzs-cats {
        flex-wrap: wrap;
        gap: 8px;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .hz-shop-page .hzs-cats a {
        flex: 0 1 auto;
        max-width: 100%;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hz-shop-page .hzs-cats a {
        transition: none;
    }
}

/* =========================================================================
   Product page 3.0 — contained two-column layout: square gallery with a thumbnail rail,
   purchase panel that stays in view. Scoped to the product page.
   ========================================================================= */
/* The gallery keeps to a bounded column (about 560px with its thumbnail rail); the
   information takes the rest of the row. */
.hz-product-details-page .hzp-hero {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: clamp(24px, 3.6vw, 56px);
    padding-inline: var(--hzh-gutter);
}
.hz-product-details-page .hzp-stage,
html[dir="rtl"] .hz-product-details-page .hzp-stage {
    --hzc-shot-inset: 7%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: min(78vh, 680px);
    margin-inline: auto;
    border-radius: 20px;
}
/* Larger view of the current picture: a button on the picture opens it in a light dialog. The
   picture is shown at most at its own size (never enlarged past it). */
.hzp-zoom-open {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hzh-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--hzh-ink);
    transition: border-color var(--hzh-ease), color var(--hzh-ease);
}
.hzp-zoom-open[hidden] {
    display: none;
}
.hzp-zoom-open:hover {
    border-color: var(--hzh-pine);
    color: var(--hzh-pine);
}
.hzp-zoom-open:focus-visible,
.hzp-zoom-close:focus-visible {
    outline: 3px solid rgba(0, 125, 189, .5);
    outline-offset: 2px;
}
.hzp-zoom {
    max-width: min(92vw, 960px);
    max-height: 92vh;
    padding: 44px 20px 20px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--hzh-ink);
}
.hzp-zoom::backdrop {
    background: rgba(16, 38, 43, .62);
}
/* The page behind the open dialog does not scroll; its position is kept for when it closes. */
html:has(.hzp-zoom[open]) {
    overflow: hidden;
}
.hzp-zoom img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(92vh - 64px);
    margin: 0 auto;
    object-fit: contain;
}
.hzp-zoom-close {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hzh-ink);
    font-size: 1.1rem;
}
.hzp-zoom-close:hover {
    background: var(--hzh-mist);
}
@media (prefers-reduced-motion: reduce) {
    .hzp-zoom-open {
        transition: none;
    }
}
.hz-product-details-page .hzp-stage .hzc-shot img {
    border-radius: 10px;
}
/* Thumbnails: a vertical rail beside the image. */
.hz-product-details-page .hzp-gallery.has-thumbs {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}
.hz-product-details-page .hzp-gallery.has-thumbs .hzp-stage {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}
.hz-product-details-page .hzp-thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    gap: 10px;
    max-height: min(78vh, 680px);
    margin-top: 0;
    padding: 2px;
    overflow: auto;
    scrollbar-width: thin;
}
.hz-product-details-page .hzp-thumb {
    width: 72px;
    height: 72px;
    padding: 6px;
    border: 1px solid var(--hzh-line);
    border-radius: 12px;
    background: #fff;
    opacity: 1;
    transition: border-color var(--hzh-ease), box-shadow var(--hzh-ease);
}
.hz-product-details-page .hzp-thumb::after {
    content: none;
}
.hz-product-details-page .hzp-thumb:hover {
    border-color: var(--hzh-ink);
}
.hz-product-details-page .hzp-thumb.is-active {
    border-color: var(--hzh-pine);
    box-shadow: 0 0 0 1px var(--hzh-pine);
}
/* The purchase column follows the gallery while the page scrolls. */
@media (min-width: 981px) {
    .hz-product-details-page .hzp-info {
        position: sticky;
        top: calc(var(--hzh-header-h) + 28px);
        padding-top: 0;
    }
}
.hz-product-details-page .hzp-info h1 {
    margin: 8px 0 10px;
    font-size: calc(clamp(1.5rem, 2.2vw, 2rem) * var(--hzh-scale));
    line-height: 1.15;
}
html[lang="ar"] .hz-product-details-page .hzp-info h1 {
    line-height: 1.45;
}
.hz-product-details-page .hzp-buy {
    margin-top: 18px;
}
.hz-product-details-page .hzp-add {
    min-height: 52px;
    font-size: 1rem;
}
@media (max-width: 980px) {
    .hz-product-details-page .hzp-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding-inline: var(--hzh-gutter);
    }
    /* Phones and tablets: the picture stays whole but leaves room for the name and price
       within the first screen. */
    .hz-product-details-page .hzp-stage,
    html[dir="rtl"] .hz-product-details-page .hzp-stage {
        height: auto;
        max-height: min(72vw, 340px);
        margin-inline: 0;
    }
    .hz-product-details-page .hzp-info {
        padding: 0;
    }
    /* Thumbnails go under the image as one swipeable row. */
    .hz-product-details-page .hzp-gallery.has-thumbs {
        grid-template-columns: minmax(0, 1fr);
    }
    .hz-product-details-page .hzp-gallery.has-thumbs .hzp-stage {
        grid-column: 1;
    }
    .hz-product-details-page .hzp-thumbs {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        max-height: none;
        padding: 2px;
    }
    .hz-product-details-page .hzp-thumb {
        width: 64px;
        height: 64px;
    }
}
@media (max-width: 420px) {
    .hz-product-details-page .hzp-qty {
        height: 52px;
        grid-template-columns: 52px 52px 52px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hz-product-details-page .hzp-thumb {
        transition: none;
    }
}

/* =========================================================================
   Product page — summary order (category, name, price and offer, availability, short
   description, then quantity and add to cart) and the same white image frame as the cards.
   ========================================================================= */
.hz-product-details-page .hzp-stage {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--hzh-line);
}
.hz-product-details-page .hzp-stage::after {
    display: none;
}
.hz-product-details-page .hzp-summary {
    margin-top: 16px;
}
.hz-product-details-page .hzp-summary .hzc-buyline {
    align-items: center;
}
.hz-product-details-page .hz-price-lg strong {
    font-size: clamp(1.6rem, 2.2vw, 1.95rem);
}
.hz-product-details-page .hzp-lead {
    margin-top: 14px;
}
/* The panel now holds only the purchase controls. */
.hz-product-details-page .hzp-buy > .hzp-form:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.hz-product-details-page .hzp-out-note {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--hzh-amber-soft);
    color: var(--hzh-amber-ink);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.6;
}