/* =============================================================
 *  PURE MO-JA — PAGE TEMPLATE STYLES
 *  Version 2.0.0
 *
 *  Styles for the five hand-coded PHP page templates. Loads
 *  AFTER pure-moja-system.css and inherits all its tokens.
 *
 *  Mobile-first throughout — breakpoints upgrade at 600, 900,
 *  and 1200.
 *
 *  STRUCTURE
 *    A. Shared page header (eyebrow / lead / meta row)
 *    B. Flavours page
 *    C. Process page
 *    D. About page
 *    E. Recipes page
 *    F. Stockists page
 *    G. Shared closing patterns (big CTA, marquee container)
 * ============================================================= */


/* =============================================================
 *  A. SHARED PAGE HEADER
 *  Used at the top of every PHP template.
 * ============================================================= */
.pmoja-page-hero {
    padding: calc(var(--pmoja-header-h) + 48px) var(--pmoja-gutter) clamp(48px, 8vw, 80px);
    border-bottom: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
}
@media (min-width: 900px) {
    .pmoja-page-hero { padding-top: calc(var(--pmoja-header-h) + 80px); }
}

.pmoja-page-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: end;
    max-width: 1640px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .pmoja-page-hero__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
}

.pmoja-page-hero__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-xl);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -.04em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 24px 0 0;
}
.pmoja-page-hero__title .em {
    font-style: italic;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}

.pmoja-page-hero__copy {
    font-size: var(--pmoja-body-l);
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    max-width: 46ch;
    margin: 0;
}

.pmoja-page-hero__meta {
    display: flex;
    gap: 16px 24px;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
    flex-wrap: wrap;
}


/* =============================================================
 *  B. FLAVOURS PAGE
 * ============================================================= */
.pmoja-flav-story {
    padding: clamp(60px, 10vw, 160px) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    transition: background 1s var(--pmoja-ease-soft);
}
@media (min-width: 900px) {
    .pmoja-flav-story {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        min-height: 90vh;
    }
    .pmoja-flav-story--reverse { direction: rtl; }
    .pmoja-flav-story--reverse > * { direction: ltr; }
}

.pmoja-flav-story__visual {
    position: relative;
    aspect-ratio: 1/1.05;
    border-radius: clamp(20px, 2.5vw, 28px);
    background: var(--pmoja-accent-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 1s var(--pmoja-ease-soft);
}
.pmoja-flav-story__visual::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: clamp(14px, 2vw, 22px);
    pointer-events: none;
}
.pmoja-flav-story__visual img,
.pmoja-flav-story__visual svg {
    width: 50%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(31,26,18,.25));
    transition: transform .8s var(--pmoja-ease);
}
.pmoja-flav-story__visual:hover img,
.pmoja-flav-story__visual:hover svg {
    transform: translateY(-10px) rotate(-3deg);
}

.pmoja-flav-story__bignum {
    position: absolute;
    top: 20px;
    left: 24px;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(56px, 10vw, 80px);
    color: var(--pmoja-accent);
    opacity: .35;
    line-height: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-flav-story__tag {
    position: absolute;
    bottom: 20px;
    right: 24px;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pmoja-accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-flav-story__tag::before {
    content: "";
    width: 20px; height: 1px;
    background: var(--pmoja-accent);
    transition: background 1s var(--pmoja-ease-soft);
}

.pmoja-flav-story__body > .pmoja-eyebrow { margin-bottom: 20px; }
.pmoja-flav-story__body h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-m);
    line-height: .95;
    font-weight: 400;
    letter-spacing: -.03em;
    margin: 0 0 20px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flav-story__body h2 .em {
    font-style: italic;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-flav-story__body > p {
    font-size: var(--pmoja-body-l);
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    margin: 0 0 28px;
    max-width: 44ch;
}

.pmoja-flav-spec {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    padding: 20px 0;
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
}
.pmoja-flav-spec__v {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    color: var(--pmoja-accent);
    line-height: 1;
    font-style: italic;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-flav-spec__v .unit { font-size: .55em; }
.pmoja-flav-spec__l {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
    margin-top: 8px;
    line-height: 1.3;
}

.pmoja-flav-story__cta-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.pmoja-flav-story__price {
    font-size: 13px;
    color: var(--pmoja-ink-mute);
}


/* =============================================================
 *  C. PROCESS PAGE
 *  Most rules already exist in system.css (.pmoja-proc-chapter).
 *  This section just adds page-level scaffolding.
 * ============================================================= */
.pmoja-process-page {
    position: relative;
    z-index: 2;
}


/* =============================================================
 *  D. ABOUT PAGE
 * ============================================================= */
.pmoja-about-lead {
    padding: calc(var(--pmoja-header-h) + 56px) var(--pmoja-gutter) clamp(64px, 10vw, 100px);
    position: relative;
    z-index: 2;
}
@media (min-width: 900px) {
    .pmoja-about-lead { padding-top: calc(var(--pmoja-header-h) + 120px); }
}
.pmoja-about-lead__wrap { max-width: 1640px; margin: 0 auto; }
.pmoja-about-lead__text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(32px, 6vw, 100px);
    line-height: 1.02;
    font-weight: 400;
    letter-spacing: -.03em;
    max-width: 18ch;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 0;
}
.pmoja-about-lead__text .em {
    font-style: italic;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-about-lead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--pmoja-line);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
}
@media (min-width: 700px) {
    .pmoja-about-lead__meta { justify-content: space-between; gap: 16px 32px; }
}

.pmoja-about-cols {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--pmoja-line);
    max-width: 1640px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .pmoja-about-cols { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.pmoja-about-cols h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-s);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 0;
}
.pmoja-about-cols h2 .em { font-style: italic; color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
.pmoja-about-cols p {
    font-size: var(--pmoja-body-l);
    line-height: 1.55;
    color: var(--pmoja-ink-soft);
    margin: 0 0 18px;
    max-width: 50ch;
}
.pmoja-about-cols p:first-of-type {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.4;
    color: var(--pmoja-ink);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

/* Values grid */
.pmoja-values {
    padding: var(--pmoja-section) 0;
    position: relative;
    z-index: 2;
    background: var(--pmoja-custard);
    border-top: 1px solid var(--pmoja-line);
}
.pmoja-values__head { padding: 0 var(--pmoja-gutter); max-width: 1640px; margin: 0 auto; }
.pmoja-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 48px;
    background: var(--pmoja-line);
}
@media (min-width: 600px) { .pmoja-values__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pmoja-values__grid { grid-template-columns: repeat(4, 1fr); } }

.pmoja-value {
    background: var(--pmoja-custard);
    padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 28px);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background .5s var(--pmoja-ease);
    cursor: default;
}
.pmoja-value:hover { background: var(--pmoja-cream); }
.pmoja-value__mark {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    color: var(--pmoja-accent);
    font-size: 28px;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-value h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 500;
    margin: 0 0 8px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-value p { font-size: 14px; color: var(--pmoja-ink-soft); line-height: 1.5; margin: 0; }


/* =============================================================
 *  E. RECIPES PAGE
 * ============================================================= */
.pmoja-recipe-filters {
    padding: 32px var(--pmoja-gutter) 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    max-width: 1640px;
    margin: 0 auto;
}
@media (min-width: 700px) { .pmoja-recipe-filters { padding-top: 48px; } }

.pmoja-recipe-filter {
    padding: 10px 18px;
    border: 1px solid var(--pmoja-line);
    border-radius: 100px;
    font-size: 13px;
    background: var(--pmoja-paper);
    cursor: pointer;
    transition: all .4s var(--pmoja-ease);
    font-family: inherit;
    color: var(--pmoja-ink);
}
.pmoja-recipe-filter:hover { border-color: var(--pmoja-ink); }
.pmoja-recipe-filter.is-active {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-color: var(--pmoja-ink);
}

.pmoja-recipes-grid {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    position: relative;
    z-index: 2;
    max-width: 1640px;
    margin: 0 auto;
}
@media (min-width: 700px)  { .pmoja-recipes-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) { .pmoja-recipes-grid { grid-template-columns: repeat(3, 1fr); } }

.pmoja-recipe-card {
    border-radius: clamp(20px, 2.4vw, 28px);
    overflow: hidden;
    position: relative;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 3.5vw, 36px);
    border: 1px solid var(--pmoja-line);
    background: var(--pmoja-custard);
    transition: all .6s var(--pmoja-ease);
    cursor: pointer;
    text-decoration: none;
    color: var(--pmoja-ink);
}
@media (min-width: 700px) { .pmoja-recipe-card { min-height: 460px; } }

.pmoja-recipe-card--featured { background: linear-gradient(135deg, var(--pmoja-cream) 0%, var(--pmoja-guava-tint) 100%); }
.pmoja-recipe-card--purple   { background: linear-gradient(135deg, var(--pmoja-passion-tint) 0%, var(--pmoja-lychee-tint) 100%); }
.pmoja-recipe-card--melon    { background: linear-gradient(135deg, var(--pmoja-watermelon-tint) 0%, var(--pmoja-blush) 100%); }
.pmoja-recipe-card--pine     { background: linear-gradient(135deg, var(--pmoja-pineapple-tint) 0%, var(--pmoja-cream) 100%); }
.pmoja-recipe-card--lychee   { background: linear-gradient(135deg, var(--pmoja-blush) 0%, var(--pmoja-lychee-tint) 100%); }
.pmoja-recipe-card--guava    { background: linear-gradient(135deg, var(--pmoja-guava-tint) 0%, var(--pmoja-cream) 100%); }

.pmoja-recipe-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(31,26,18,.25);
}

.pmoja-recipe-tag {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pmoja-recipe-tag__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}
.pmoja-recipe-card h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(24px, 3vw, 44px);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 20px 0 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-recipe-card h3 .it { font-style: italic; }
.pmoja-recipe-meta {
    display: flex;
    gap: 20px;
    margin-top: 24px;
    font-size: 12px;
    color: var(--pmoja-ink-soft);
    letter-spacing: .06em;
    flex-wrap: wrap;
}
.pmoja-recipe-meta span { display: inline-flex; align-items: center; gap: 6px; }


/* =============================================================
 *  F. STOCKISTS PAGE
 * ============================================================= */
.pmoja-stock-split {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--pmoja-line);
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
}
@media (min-width: 900px) {
    .pmoja-stock-split {
        grid-template-columns: 1fr 1fr;
        padding: var(--pmoja-section) 0;
    }
}
.pmoja-stock-split__card {
    background: var(--pmoja-paper);
    padding: clamp(32px, 6vw, 80px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background .6s var(--pmoja-ease);
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: var(--pmoja-ink);
}
.pmoja-stock-split__card:nth-child(1):hover { background: var(--pmoja-custard); }
.pmoja-stock-split__card:nth-child(2):hover { background: var(--pmoja-blush); }
.pmoja-stock-split__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(64px, 12vw, 180px);
    color: var(--pmoja-accent);
    line-height: .85;
    letter-spacing: -.04em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-stock-split__card h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-s);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.02em;
    margin: 28px 0 16px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-stock-split__card h2 .em {
    font-style: italic;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-stock-split__card p {
    font-size: var(--pmoja-body-l);
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 0 24px;
}
.pmoja-stock-split__meta {
    display: flex;
    gap: 10px 20px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.pmoja-stock-split__meta span {
    display: inline-flex; align-items: center; gap: 8px;
}
.pmoja-stock-split__meta span::before {
    content: ""; width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    transition: background 1s var(--pmoja-ease-soft);
}

/* Find a stockist — search + grid */
.pmoja-find {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    max-width: 1640px;
    margin: 0 auto;
}
.pmoja-find__searchrow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: clamp(32px, 6vw, 48px);
    align-items: end;
}
@media (min-width: 800px) {
    .pmoja-find__searchrow { grid-template-columns: 1fr auto; gap: 24px; }
}
.pmoja-stockist-search {
    display: flex;
    border: 1px solid var(--pmoja-line);
    border-radius: 100px;
    background: var(--pmoja-paper);
    padding: 6px 6px 6px 20px;
    align-items: center;
    transition: all .4s var(--pmoja-ease);
    max-width: 540px;
}
.pmoja-stockist-search:focus-within {
    border-color: var(--pmoja-ink);
    box-shadow: 0 8px 24px -10px rgba(31,26,18,.2);
}
.pmoja-stockist-search input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    padding: 12px 0;
    color: var(--pmoja-ink);
    width: 100%;
    min-width: 0;
}
.pmoja-stockist-search input:focus { outline: none; }
.pmoja-stockist-search input::placeholder { color: var(--pmoja-ink-mute); }
.pmoja-stockist-search button {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    padding: 12px 22px;
    border-radius: 100px;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all .4s var(--pmoja-ease);
    flex-shrink: 0;
}
.pmoja-stockist-search button:hover {
    background: var(--pmoja-accent-deep);
    transform: translateX(2px);
}

.pmoja-stockist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--pmoja-line);
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
}
@media (min-width: 700px)  { .pmoja-stockist-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pmoja-stockist-grid { grid-template-columns: repeat(3, 1fr); } }

.pmoja-stockist-tile {
    background: var(--pmoja-paper);
    padding: clamp(24px, 3.5vw, 32px) clamp(22px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 200px;
    transition: background .4s var(--pmoja-ease);
    cursor: pointer;
    text-decoration: none;
    color: var(--pmoja-ink);
}
.pmoja-stockist-tile:hover { background: var(--pmoja-custard); }

.pmoja-stockist-tile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pmoja-stockist-tile__name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.05;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-stockist-tile__name .it { font-style: italic; }
.pmoja-stockist-tile__type {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-accent);
    white-space: nowrap;
    margin-top: 6px;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-stockist-tile__meta {
    font-size: 13px;
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
}
.pmoja-stockist-tile__meta strong { color: var(--pmoja-ink); font-weight: 500; }

/* Wholesale pitch */
.pmoja-pitch {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    background: var(--pmoja-custard);
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
}
.pmoja-pitch__inner { max-width: 1640px; margin: 0 auto; }
.pmoja-pitch__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: end;
    margin-bottom: clamp(48px, 8vw, 80px);
}
@media (min-width: 900px) { .pmoja-pitch__head { grid-template-columns: 1fr 1fr; gap: 60px; } }
.pmoja-pitch__head h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-m);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.03em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 0;
}
.pmoja-pitch__head h2 .em { font-style: italic; color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
.pmoja-pitch__head p {
    font-size: var(--pmoja-body-l);
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    max-width: 44ch;
    margin: 0;
}

.pmoja-pitch__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 700px) { .pmoja-pitch__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pmoja-pitch__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.pmoja-pitch-card {
    background: var(--pmoja-paper);
    padding: clamp(28px, 4vw, 40px) clamp(24px, 3.5vw, 32px);
    border: 1px solid var(--pmoja-line);
    border-radius: 24px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .5s var(--pmoja-ease);
}
.pmoja-pitch-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(31,26,18,.18);
    background: var(--pmoja-cream);
}
.pmoja-pitch-card__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(28px, 4vw, 36px);
    color: var(--pmoja-accent);
    line-height: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-pitch-card h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 12px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-pitch-card p { font-size: 14px; color: var(--pmoja-ink-soft); line-height: 1.55; margin: 0; }


/* Apply form */
.pmoja-apply {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
    max-width: 1640px;
    margin: 0 auto;
}
@media (min-width: 1000px) { .pmoja-apply { grid-template-columns: 1fr 1.15fr; gap: 80px; } }

.pmoja-apply__left h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-m);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.03em;
    margin: 16px 0 20px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-apply__left h2 .em { font-style: italic; color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
.pmoja-apply__left > p {
    font-size: var(--pmoja-body-l);
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    margin: 0 0 28px;
    max-width: 40ch;
}
.pmoja-apply__steps {
    list-style: none;
    margin: 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--pmoja-line);
}
.pmoja-apply__steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pmoja-line-soft);
    align-items: baseline;
}
.pmoja-apply__steps .num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 20px;
    color: var(--pmoja-accent);
    min-width: 32px;
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-apply__steps strong {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
    color: var(--pmoja-ink);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-apply__steps span:not(.num) {
    font-size: 14px;
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
}

.pmoja-apply__form {
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: 28px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 30px 60px -30px rgba(31,26,18,.15);
    position: relative;
    overflow: hidden;
}
.pmoja-apply__form::before {
    content: "Mo-JA";
    position: absolute;
    bottom: -30px;
    right: -10px;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(120px, 18vw, 160px);
    font-weight: 400;
    color: var(--pmoja-cream);
    opacity: .25;
    line-height: 1;
    pointer-events: none;
    letter-spacing: -.04em;
    z-index: 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-apply__form > * { position: relative; z-index: 1; }
.pmoja-apply__form h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 2.6vw, 26px);
    font-weight: 500;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-apply__form > p { font-size: 14px; color: var(--pmoja-ink-soft); margin: 0 0 24px; }
.pmoja-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 700px) { .pmoja-form-row { grid-template-columns: 1fr 1fr; } }
.pmoja-form-field { display: flex; flex-direction: column; }
.pmoja-form-field--full { grid-column: 1 / -1; }
.pmoja-form-submit { margin-top: 20px; }
.pmoja-form-submit .pmoja-cta { width: 100%; justify-content: center; }

/* Wholesale quotes */
.pmoja-quotes {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--pmoja-line);
    max-width: 1640px;
    margin: 0 auto;
}
.pmoja-quotes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: clamp(40px, 6vw, 60px);
}
@media (min-width: 700px)  { .pmoja-quotes__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pmoja-quotes__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.pmoja-quote-card {
    padding: clamp(24px, 3.5vw, 32px);
    border-left: 2px solid var(--pmoja-accent);
    background: var(--pmoja-blush);
    border-radius: 0 20px 20px 0;
    transition: all .5s var(--pmoja-ease);
}
.pmoja-quote-card:hover { background: var(--pmoja-cream); border-left-color: var(--pmoja-ink); }
.pmoja-quote-card blockquote {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.35;
    color: var(--pmoja-ink);
    margin: 0 0 18px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-quote-card cite {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
    font-style: normal;
    font-family: 'Inter Tight', sans-serif;
}
.pmoja-quote-card cite strong { color: var(--pmoja-ink); display: block; margin-bottom: 2px; font-weight: 500; }


/* =============================================================
 *  G. SHARED CLOSING PATTERNS
 * ============================================================= */
.pmoja-big-cta {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1640px;
    margin: 0 auto;
}
.pmoja-big-cta h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-l);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.04em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 0;
}
.pmoja-big-cta h2 .em { font-style: italic; color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
/* Defensive: if the visual editor wraps heading text in <p>, keep the
   heading scale instead of collapsing to body size. */
.pmoja-big-cta h2 p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    max-width: none;
}
.pmoja-big-cta p {
    margin: 28px auto 40px;
    max-width: 50ch;
    font-size: var(--pmoja-body-l);
    color: var(--pmoja-ink-soft);
}
/* CTA button on the closing section — guarantee readable contrast
   (dark pill, light text) regardless of any global link-colour rules,
   with the accent fill + dark text on hover. */
.pmoja-big-cta .pmoja-cta,
.pmoja-big-cta .pmoja-cta:link,
.pmoja-big-cta .pmoja-cta:visited,
.pmoja-big-cta .pmoja-cta > span {
    color: var(--pmoja-paper) !important;
}
.pmoja-big-cta .pmoja-cta:hover,
.pmoja-big-cta .pmoja-cta:hover > span {
    color: var(--pmoja-ink) !important;
}



/* =============================================================
 *  H. v3.0.0 ADDITIONS
 *  Components for home, shop, contact, flavour-nav, plus utility
 *  classes that replace inline styles previously in templates.
 * ============================================================= */

/* --- Utility / stagger -------------------------------------- */
.pmoja-stagger[data-i="0"] { transition-delay: 0s; }
.pmoja-stagger[data-i="1"] { transition-delay: .1s; }
.pmoja-stagger[data-i="2"] { transition-delay: .2s; }
.pmoja-stagger[data-i="3"] { transition-delay: .3s; }
.pmoja-stagger[data-i="4"] { transition-delay: .4s; }
.pmoja-stagger[data-i="5"] { transition-delay: .5s; }

.pmoja-mt-md { margin-top: 20px; }
.pmoja-mb-md { margin-bottom: 24px; }

.pmoja-section-head__meta {
    font-size: 13px;
    color: var(--pmoja-ink-mute);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pmoja-section-head__title { margin: 0; }
.pmoja-section-head__link { display: flex; justify-content: flex-end; align-items: end; }

/* Recipe-dot per flavour (drives .pmoja-recipe-tag__dot[data-color="…"]) */
.pmoja-recipe-tag__dot[data-color="mango"]      { background: var(--pmoja-mango); }
.pmoja-recipe-tag__dot[data-color="guava"]      { background: var(--pmoja-guava); }
.pmoja-recipe-tag__dot[data-color="lychee"]     { background: var(--pmoja-lychee); }
.pmoja-recipe-tag__dot[data-color="passion"]    { background: var(--pmoja-passion); }
.pmoja-recipe-tag__dot[data-color="watermelon"] { background: var(--pmoja-watermelon); }
.pmoja-recipe-tag__dot[data-color="pineapple"]  { background: var(--pmoja-pineapple); }
.pmoja-recipe-tag__dot.pmoja-world-mango      { background: var(--pmoja-mango); }
.pmoja-recipe-tag__dot.pmoja-world-guava      { background: var(--pmoja-guava); }
.pmoja-recipe-tag__dot.pmoja-world-lychee     { background: var(--pmoja-lychee); }
.pmoja-recipe-tag__dot.pmoja-world-passion    { background: var(--pmoja-passion); }
.pmoja-recipe-tag__dot.pmoja-world-watermelon { background: var(--pmoja-watermelon); }
.pmoja-recipe-tag__dot.pmoja-world-pineapple  { background: var(--pmoja-pineapple); }


/* --- HOME — Hero ------------------------------------------- */
.pmoja-home-hero {
    padding: calc(var(--pmoja-header-h) + 56px) var(--pmoja-gutter) clamp(60px, 9vw, 110px);
    background: linear-gradient(180deg, var(--pmoja-paper) 0%, var(--pmoja-custard) 100%);
    position: relative;
    z-index: 2;
    min-height: 96vh;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 64px);
}
@media (min-width: 900px) {
    .pmoja-home-hero { padding-top: calc(var(--pmoja-header-h) + 96px); }
}

.pmoja-home-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1640px;
    margin: 0 auto;
    width: 100%;
}
.pmoja-home-hero__meta {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
}

.pmoja-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--pmoja-line);
    border-radius: 100px;
    font-size: 12px;
    color: var(--pmoja-ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pmoja-pill__pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    box-shadow: 0 0 0 0 var(--pmoja-accent);
    animation: pmoja-pulse 2.4s ease-out infinite;
}
@keyframes pmoja-pulse {
    0%   { box-shadow: 0 0 0 0 var(--pmoja-accent); opacity: 1; }
    70%  { box-shadow: 0 0 0 10px transparent; opacity: .6; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.pmoja-home-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 60px);
    align-items: center;
    max-width: 1640px;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 900px) {
    .pmoja-home-hero__grid {
        grid-template-columns: 1fr auto 1fr;
        gap: clamp(48px, 5vw, 80px);
    }
}

.pmoja-home-hero__col--center { display: flex; justify-content: center; }
.pmoja-home-hero__col--right { text-align: left; }
@media (min-width: 900px) { .pmoja-home-hero__col--right { text-align: right; } }

.pmoja-home-hero__lead { max-width: 28ch; margin: 28px 0; }
.pmoja-home-hero__sub  { max-width: 38ch; margin: 0 0 28px; }
@media (min-width: 900px) {
    .pmoja-home-hero__col--right .pmoja-home-hero__sub { margin-left: auto; }
}

.pmoja-home-hero__stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (min-width: 900px) {
    .pmoja-home-hero__col--right .pmoja-home-hero__stat { align-items: flex-end; }
}
.pmoja-home-hero__stat .pmoja-stat {
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-stat-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
    margin-top: 6px;
}

/* Hero can stage sizing — overrides system.css default for home */
.pmoja-home-hero__col--center .pmoja-can-stage {
    width: clamp(220px, 26vw, 380px);
    aspect-ratio: 1 / 1.35;
    position: relative;
}
.pmoja-can__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 40px 60px rgba(31,26,18,.25));
}

.pmoja-droplet--1 { width: 8px;  height: 8px;  top: 35%; left: -4%;  animation-delay: 0s; }
.pmoja-droplet--2 { width: 6px;  height: 6px;  top: 60%; left: -8%;  animation-delay: 1.2s; }
.pmoja-droplet--3 { width: 10px; height: 10px; top: 25%; right: -6%; animation-delay: .6s; }
.pmoja-droplet--4 { width: 7px;  height: 7px;  top: 55%; right: -2%; animation-delay: 1.8s; }


/* --- HOME — section spacing -------------------------------- */
.pmoja-home-section {
    padding: var(--pmoja-section) 0;
    position: relative;
    z-index: 2;
}
.pmoja-home-section + .pmoja-home-section { border-top: 1px solid var(--pmoja-line); }


/* --- HOME — Flavour grid (6 cards) ------------------------- */
.pmoja-flav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
}
@media (min-width: 600px)  { .pmoja-flav-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 900px)  { .pmoja-flav-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.pmoja-flav {
    background: var(--pmoja-accent-tint, var(--pmoja-custard));
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(20px, 2.4vw, 28px);
    padding: clamp(24px, 3.4vw, 32px);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .6s var(--pmoja-ease), background 1s var(--pmoja-ease-soft);
    text-decoration: none;
    color: var(--pmoja-ink);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
@media (min-width: 900px) { .pmoja-flav { min-height: 460px; } }
.pmoja-flav:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 70px -30px rgba(31,26,18,.3);
}

.pmoja-flav__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.pmoja-flav__index {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 28px;
    color: var(--pmoja-accent);
    line-height: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flav__tag {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-accent);
    padding: 4px 10px;
    border: 1px solid var(--pmoja-accent);
    border-radius: 100px;
}

.pmoja-flav__can {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    transition: transform .6s var(--pmoja-ease);
}
.pmoja-flav:hover .pmoja-flav__can { transform: translateY(-6px) rotate(-3deg); }
.pmoja-flav__can img {
    width: 100%;
    max-width: 430px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(31,26,18,.2));
}

.pmoja-flav__name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 400;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flav__stat {
    font-size: 13px;
    color: var(--pmoja-ink-soft);
    margin: 0 0 14px;
}
.pmoja-flav__stat strong { color: var(--pmoja-ink); font-weight: 500; }
.pmoja-flav__cta {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pmoja-flav__cta .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    transition: transform .4s var(--pmoja-ease);
}
.pmoja-flav:hover .pmoja-flav__cta .dot { transform: scale(1.6); }


/* --- HOME — Why grid + Recipes teaser ---------------------- */
.pmoja-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}
@media (min-width: 700px) { .pmoja-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .pmoja-why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.pmoja-why-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 320px;
}
.pmoja-why-card__h { font-weight: 500; margin: 0 0 8px; }
.pmoja-why-card__body { font-size: 14px; color: var(--pmoja-ink-soft); line-height: 1.55; margin: 0; }

.pmoja-home-recipes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}
@media (min-width: 700px)  { .pmoja-home-recipes__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; } }


/* --- HOME — Stockists strip -------------------------------- */
.pmoja-stockists-strip {
    background: var(--pmoja-custard);
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
    padding: 40px var(--pmoja-gutter);
    position: relative;
    z-index: 2;
}
.pmoja-stockists-strip__inner {
    max-width: 1640px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
}
@media (min-width: 900px) {
    .pmoja-stockists-strip__inner {
        grid-template-columns: auto 1fr auto;
        gap: 40px;
    }
}
.pmoja-stockists-strip__logos {
    display: flex;
    gap: 20px 40px;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 22px);
    color: var(--pmoja-ink-mute);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
@media (min-width: 900px) { .pmoja-stockists-strip__logos { justify-content: center; } }


/* --- SHOP — Three case-type cards -------------------------- */
.pmoja-shop-cases {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media (min-width: 800px)  { .pmoja-shop-cases { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) { .pmoja-shop-cases { grid-template-columns: repeat(3, 1fr); } }

.pmoja-shop-case {
    background: var(--pmoja-custard);
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(20px, 2.4vw, 28px);
    padding: clamp(28px, 4vw, 44px);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all .6s var(--pmoja-ease);
    position: relative;
    overflow: hidden;
}
.pmoja-shop-case:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 70px -30px rgba(31,26,18,.3);
    background: var(--pmoja-cream);
}
.pmoja-shop-case--single { --case-tint: var(--pmoja-mango-tint, #FDE9CC); }
.pmoja-shop-case--two    { --case-tint: var(--pmoja-guava-tint, #FBD9E4); }
.pmoja-shop-case--mix    { --case-tint: var(--pmoja-pineapple-tint, #FDF1C4); }
.pmoja-shop-case::before {
    content: "";
    position: absolute;
    top: -30%; right: -30%;
    width: 70%; aspect-ratio: 1;
    background: var(--case-tint);
    border-radius: 50%;
    z-index: 0;
    transition: transform .8s var(--pmoja-ease);
}
.pmoja-shop-case:hover::before { transform: scale(1.3); }
.pmoja-shop-case > * { position: relative; z-index: 1; }

.pmoja-shop-case__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(48px, 6vw, 80px);
    color: var(--pmoja-accent);
    line-height: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-shop-case__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: .95;
    letter-spacing: -.02em;
    margin: 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-shop-case__desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--pmoja-ink-soft);
    margin: 0;
}
.pmoja-shop-case__specs {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
}
.pmoja-shop-case__specs span { display: inline-flex; align-items: center; gap: 8px; }
.pmoja-shop-case__specs span::before {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--pmoja-accent);
}

.pmoja-shop-case__bottom {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--pmoja-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.pmoja-shop-case__price {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 22px);
    color: var(--pmoja-ink);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}


/* --- CONTACT — Layout -------------------------------------- */
.pmoja-contact-body {
    padding: var(--pmoja-section) var(--pmoja-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 80px);
    max-width: 1640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media (min-width: 900px) {
    .pmoja-contact-body {
        grid-template-columns: 1fr 1.4fr;
        align-items: start;
    }
}

.pmoja-contact-details h2 { font-weight: 500; margin: 0 0 8px; }
.pmoja-contact-details__intro { margin: 0 0 32px; max-width: 38ch; }

.pmoja-contact-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--pmoja-line);
    border: 1px solid var(--pmoja-line);
    border-radius: 16px;
    overflow: hidden;
}
@media (min-width: 500px) { .pmoja-contact-cards { grid-template-columns: 1fr 1fr; } }

.pmoja-contact-card {
    background: var(--pmoja-paper);
    padding: clamp(20px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background .4s var(--pmoja-ease);
}
.pmoja-contact-card:hover { background: var(--pmoja-custard); }
.pmoja-contact-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pmoja-contact-card__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    color: var(--pmoja-accent);
    font-size: 20px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-contact-card__tag {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
}
.pmoja-contact-card__label {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: var(--pmoja-ink-soft);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-contact-card__value {
    font-size: 15px;
    color: var(--pmoja-ink);
    font-weight: 500;
    text-decoration: none;
    transition: color .3s;
}
a.pmoja-contact-card__value:hover { color: var(--pmoja-accent); }
.pmoja-contact-card__value--address {
    font-weight: 400;
    color: var(--pmoja-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}

.pmoja-contact-details__socials {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--pmoja-line);
}
.pmoja-contact-details__socials .pmoja-eyebrow { margin-bottom: 12px; display: flex; }
.pmoja-contact-socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pmoja-social {
    padding: 8px 16px;
    border: 1px solid var(--pmoja-line);
    border-radius: 100px;
    font-size: 13px;
    color: var(--pmoja-ink);
    text-decoration: none;
    transition: all .4s var(--pmoja-ease);
}
.pmoja-social:hover {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-color: var(--pmoja-ink);
    transform: translateY(-2px);
}

/* Form col */
.pmoja-contact-form-wrap {
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(20px, 2.4vw, 28px);
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 30px 60px -30px rgba(31,26,18,.15);
}
.pmoja-contact-form__intro { margin-bottom: 32px; }
.pmoja-contact-form__intro .pmoja-eyebrow { display: flex; margin-bottom: 12px; }
.pmoja-contact-form__intro h2 { margin: 0 0 12px; }
.pmoja-contact-form__intro .pmoja-lead { margin: 0; max-width: 50ch; }

.pmoja-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}
.pmoja-form-opt {
    color: var(--pmoja-ink-mute);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.pmoja-form-msg {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    min-height: 1em;
}
.pmoja-form-msg.is-loading { color: var(--pmoja-ink-mute); }
.pmoja-form-msg.is-success { color: var(--pmoja-mango-deep); }
.pmoja-form-msg.is-error   { color: var(--pmoja-watermelon-deep); }

/* Submission banner */
.pmoja-form-banner {
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid;
}
.pmoja-form-banner__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pmoja-form-banner--success {
    background: var(--pmoja-mango-tint, #FDE9CC);
    border-left-color: var(--pmoja-mango);
    color: var(--pmoja-mango-deep);
}
.pmoja-form-banner--success .pmoja-form-banner__dot { background: var(--pmoja-mango); }
.pmoja-form-banner--error {
    background: var(--pmoja-watermelon-tint, #F8D6DC);
    border-left-color: var(--pmoja-watermelon);
    color: var(--pmoja-watermelon-deep);
}
.pmoja-form-banner--error .pmoja-form-banner__dot { background: var(--pmoja-watermelon); }

/* Loading state on submit button */
.pmoja-cta.is-loading { opacity: .65; cursor: wait; }


/* --- WOOCOMMERCE — Flavour navigator on product pages ------ */
.pmoja-flav-nav {
    padding: clamp(48px, 7vw, 96px) var(--pmoja-gutter);
    background: var(--pmoja-paper);
    border-top: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
    max-width: 1640px;
    margin: clamp(40px, 6vw, 80px) auto 0;
}
.pmoja-flav-nav__head {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 40px);
}
.pmoja-flav-nav__head .pmoja-eyebrow {
    justify-content: center;
    display: inline-flex;
    margin-bottom: 12px;
}
.pmoja-flav-nav__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -.02em;
    margin: 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

.pmoja-flav-nav__pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: clamp(40px, 6vw, 64px);
}
@media (min-width: 600px)  { .pmoja-flav-nav__pills { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .pmoja-flav-nav__pills { grid-template-columns: repeat(6, 1fr); gap: 12px; } }

.pmoja-flav-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--pmoja-custard);
    border: 1px solid var(--pmoja-line);
    border-radius: 100px;
    text-decoration: none;
    color: var(--pmoja-ink);
    font-size: 14px;
    font-weight: 500;
    transition: all .4s var(--pmoja-ease);
    position: relative;
}
.pmoja-flav-pill:hover {
    background: var(--pmoja-cream);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(31,26,18,.25);
}
.pmoja-flav-pill__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}
.pmoja-flav-pill__label { flex: 1; }
.pmoja-flav-pill.is-current {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-color: var(--pmoja-ink);
}
.pmoja-flav-pill.is-current .pmoja-flav-pill__dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}
.pmoja-flav-pill__current {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 8px;
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    border-radius: 100px;
    margin-left: auto;
}

.pmoja-flav-nav__types-label {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.pmoja-flav-nav__type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 700px)  { .pmoja-flav-nav__type-grid { grid-template-columns: repeat(3, 1fr); } }

.pmoja-flav-nav__type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid var(--pmoja-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--pmoja-ink);
    background: var(--pmoja-paper);
    transition: all .4s var(--pmoja-ease);
}
.pmoja-flav-nav__type:hover {
    background: var(--pmoja-cream);
    transform: translateY(-2px);
    border-color: var(--pmoja-accent);
}
.pmoja-flav-nav__type-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flav-nav__type-desc {
    font-size: 12px;
    color: var(--pmoja-ink-soft);
    margin-top: 4px;
    line-height: 1.4;
}
.pmoja-flav-nav__type-arrow {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 24px;
    color: var(--pmoja-accent);
    transition: transform .4s var(--pmoja-ease);
}
.pmoja-flav-nav__type:hover .pmoja-flav-nav__type-arrow { transform: translateX(6px); }


/* --- SCOPE GUARD: opt the design system OUT of product pages
       so existing WooCommerce styling is not affected. Only the
       header, footer, and .pmoja-flav-nav components apply. ----- */
body.pmoja-product .woocommerce > *:not(.pmoja-flav-nav),
body.pmoja-product .product > *:not(.pmoja-flav-nav) {
    /* Inherit the WooCommerce / Astra defaults — our generic
       component styles deliberately don't override here. */
}



/* =============================================================
 *  I. v3.1.0 ADDITIONS
 *  Video hero, 4-product showcase, flavour landing page,
 *  buycards. Mobile-first.
 * ============================================================= */

/* --- VIDEO HERO --------------------------------------------- */
.pmoja-video-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--pmoja-header-h) + 24px) var(--pmoja-gutter) 80px;
    color: var(--pmoja-paper);
    isolation: isolate;
}
.pmoja-video-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.pmoja-video-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(31,26,18,.15) 0%, rgba(31,26,18,.55) 50%, rgba(31,26,18,.85) 100%),
        radial-gradient(ellipse at center, transparent 0%, rgba(31,26,18,.35) 100%);
    pointer-events: none;
}

.pmoja-video-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 40px);
}
.pmoja-video-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pmoja-pill--on-video {
    background: rgba(255,251,241,.12);
    border-color: rgba(255,251,241,.25);
    color: var(--pmoja-paper);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pmoja-video-hero__eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,251,241,.7);
    display: none;
}
@media (min-width: 700px) { .pmoja-video-hero__eyebrow { display: inline; } }

.pmoja-video-hero__title {
    color: var(--pmoja-paper);
    margin: 0;
    max-width: 16ch;
    line-height: .92;
}
.pmoja-video-hero__title .pmoja-em {
    color: var(--pmoja-cream);
}
.pmoja-video-hero__sub {
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.5;
    color: rgba(255,251,241,.85);
    max-width: 40ch;
    margin: 0;
}

.pmoja-video-hero__ctas {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pmoja-cta--on-video {
    background: var(--pmoja-paper);
    color: var(--pmoja-ink);
}
.pmoja-cta--on-video:hover { color: var(--pmoja-ink); }
.pmoja-cta--on-video::before { background: var(--pmoja-cream); }
.pmoja-cta--on-video .pmoja-arrow { background: var(--pmoja-ink); color: var(--pmoja-paper); }
.pmoja-cta--on-video:hover .pmoja-arrow { background: var(--pmoja-ink); color: var(--pmoja-cream); }

.pmoja-link--on-video {
    color: var(--pmoja-paper);
    border-bottom-color: rgba(255,251,241,.35);
}
.pmoja-link--on-video:hover {
    border-bottom-color: var(--pmoja-paper);
}

.pmoja-video-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: rgba(255,251,241,.7);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: color .4s;
}
.pmoja-video-hero__scroll:hover { color: var(--pmoja-paper); }
.pmoja-video-hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, currentColor 50%, transparent);
    animation: pmoja-scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes pmoja-scroll-pulse {
    0%, 100% { opacity: .3; transform: translateY(0); }
    50%      { opacity: 1;  transform: translateY(6px); }
}


/* --- PRODUCT SHOWCASE — 4 case-type cards ------------------ */
.pmoja-product-showcase {
    padding: var(--pmoja-section) 0;
    position: relative;
    z-index: 2;
    background: var(--pmoja-paper);
}
.pmoja-product-showcase__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
}
@media (min-width: 600px)  { .pmoja-product-showcase__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .pmoja-product-showcase__grid { grid-template-columns: repeat(4, 1fr); } }

.pmoja-prodcard {
    background: var(--pmoja-custard);
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(20px, 2.4vw, 28px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-decoration: none;
    color: var(--pmoja-ink);
    position: relative;
    overflow: hidden;
    transition: all .5s var(--pmoja-ease);
    min-height: 380px;
}
.pmoja-prodcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -25px rgba(31,26,18,.28);
    border-color: var(--pmoja-accent);
}
.pmoja-prodcard__pill {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    padding: 6px 14px;
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    border-radius: 100px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
}
.pmoja-prodcard__art {
    position: relative;
    flex: 1;
    border-radius: clamp(16px, 2vw, 20px);
    overflow: hidden;
    background: var(--pmoja-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.pmoja-prodcard__art-bg {
    position: absolute;
    inset: 0;
    background: var(--pmoja-accent-tint);
    opacity: .55;
}
.pmoja-prodcard__img {
    position: relative;
    z-index: 1;
    max-width: 80%;
    max-height: 80%;
    transition: transform .6s var(--pmoja-ease);
}
.pmoja-prodcard:hover .pmoja-prodcard__img {
    transform: scale(1.06) translateY(-4px);
}

.pmoja-prodcard__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px 4px;
}
.pmoja-prodcard__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-prodcard__price {
    font-size: 13px;
    color: var(--pmoja-ink-soft);
}


/* --- FLAVOUR LANDING PAGE — Hero --------------------------- */
.pmoja-flavour-hero {
    padding: calc(var(--pmoja-header-h) + 48px) var(--pmoja-gutter) clamp(60px, 8vw, 100px);
    background: linear-gradient(180deg, var(--pmoja-paper) 0%, var(--pmoja-accent-tint) 100%);
    position: relative;
    z-index: 2;
    overflow: hidden;
}
@media (min-width: 900px) {
    .pmoja-flavour-hero { padding-top: calc(var(--pmoja-header-h) + 80px); }
}

.pmoja-flavour-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 60px);
    align-items: center;
    max-width: 1640px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .pmoja-flavour-hero__grid { grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 5vw, 80px); }
}

.pmoja-flavour-hero__title { margin: 20px 0 24px; }
.pmoja-flavour-hero__lead { margin: 0 0 28px; max-width: 50ch; }
.pmoja-flavour-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0 0 32px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
}
.pmoja-flavour-hero__cta {
    align-self: flex-start;
}
/* Guarantee the hero CTA label is readable on the coloured flavour
   hero (dark pill + light text by default; dark text on the accent
   fill on hover), regardless of any global link-colour rules. */
.pmoja-flavour-hero__cta,
.pmoja-flavour-hero__cta:link,
.pmoja-flavour-hero__cta:visited,
.pmoja-flavour-hero__cta > span {
    color: var(--pmoja-paper) !important;
}
.pmoja-flavour-hero__cta:hover,
.pmoja-flavour-hero__cta:hover > span {
    color: var(--pmoja-ink) !important;
}
.pmoja-flavour-hero__cta .pmoja-arrow {
    background: var(--pmoja-paper);
    color: var(--pmoja-ink) !important;
}

.pmoja-flavour-hero__visual {
    position: relative;
}
.pmoja-flavour-hero__card {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: clamp(20px, 2.5vw, 32px);
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 50px 80px -40px rgba(31,26,18,.3);
}
.pmoja-flavour-hero__bignum {
    position: absolute;
    top: 22px; left: 28px;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(60px, 9vw, 90px);
    color: var(--pmoja-accent);
    opacity: .35;
    line-height: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flavour-hero__tag {
    position: absolute;
    bottom: 24px; right: 28px;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pmoja-accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pmoja-flavour-hero__can {
    max-width: 55%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(31,26,18,.25));
}

.pmoja-flavour-hero__statblock {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-radius: 100px;
    padding: 14px 28px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    box-shadow: 0 20px 30px -10px rgba(31,26,18,.4);
    white-space: nowrap;
}
.pmoja-flavour-hero__stat-v {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--pmoja-accent);
    line-height: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flavour-hero__stat-l {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,251,241,.7);
}


/* --- FLAVOUR PAGE — Process note --------------------------- */
.pmoja-flavour-process {
    padding: var(--pmoja-section) 0;
    border-top: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
}
.pmoja-flavour-process__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 900px) {
    .pmoja-flavour-process__grid { grid-template-columns: 1fr 1.2fr; gap: 60px; }
}
.pmoja-flavour-process__grid p { margin: 0 0 18px; }


/* --- FLAVOUR PAGE — Benefits grid -------------------------- */
.pmoja-flavour-benefits {
    padding: var(--pmoja-section) 0;
    background: var(--pmoja-custard);
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
}
.pmoja-flavour-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: clamp(32px, 5vw, 48px);
}
@media (min-width: 600px) { .pmoja-flavour-benefits__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1000px){ .pmoja-flavour-benefits__grid { grid-template-columns: repeat(3, 1fr); } }

.pmoja-flavour-benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 24px;
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: 20px;
    transition: all .5s var(--pmoja-ease);
}
.pmoja-flavour-benefit:hover {
    transform: translateY(-4px);
    border-color: var(--pmoja-accent);
    box-shadow: 0 20px 40px -20px rgba(31,26,18,.2);
}
.pmoja-flavour-benefit__mark {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 1s var(--pmoja-ease-soft);
}
.pmoja-flavour-benefit__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 6px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-flavour-benefit__body {
    font-size: 14px;
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    margin: 0;
}


/* --- FLAVOUR PAGE — Buy section ---------------------------- */
.pmoja-flavour-buy {
    padding: var(--pmoja-section) 0;
    position: relative;
    z-index: 2;
}
.pmoja-flavour-buy__head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto clamp(40px, 6vw, 60px);
}
.pmoja-flavour-buy__head .pmoja-eyebrow { display: inline-flex; margin-bottom: 16px; }
.pmoja-flavour-buy__head h2 { margin: 0 0 16px; }
.pmoja-flavour-buy__sub { margin: 0 auto; max-width: 56ch; }

.pmoja-flavour-buy__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 600px)  { .pmoja-flavour-buy__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .pmoja-flavour-buy__grid { grid-template-columns: repeat(4, 1fr); } }

.pmoja-flavour-buy__footnote {
    text-align: center;
    margin: clamp(28px, 4vw, 40px) auto 0;
    font-size: 13px;
    color: var(--pmoja-ink-mute);
}

.pmoja-buycard {
    background: var(--pmoja-custard);
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(18px, 2vw, 24px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: var(--pmoja-ink);
    transition: all .5s var(--pmoja-ease);
    position: relative;
    overflow: hidden;
    min-height: 320px;
}
.pmoja-buycard:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 70px -30px rgba(31,26,18,.3);
    border-color: var(--pmoja-accent);
}
.pmoja-buycard__pill {
    align-self: flex-start;
    padding: 4px 12px;
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    border-radius: 100px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
}
.pmoja-buycard__art {
    position: relative;
    flex: 1;
    min-height: 100px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pmoja-buycard__art-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pmoja-accent-tint), var(--pmoja-paper));
}
.pmoja-buycard__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    margin: 0;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-buycard__desc {
    font-size: 13px;
    color: var(--pmoja-ink-soft);
    line-height: 1.5;
    margin: 0;
}
.pmoja-buycard__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--pmoja-line);
    margin-top: auto;
}
.pmoja-buycard__price {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: var(--pmoja-ink);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-buycard__cta {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .3s var(--pmoja-ease);
}
.pmoja-buycard:hover .pmoja-buycard__cta { gap: 10px; color: var(--pmoja-accent-deep); }


/* --- FLAVOUR PAGE — Other flavours grid -------------------- */
.pmoja-other-flavours {
    padding: var(--pmoja-section) 0;
    border-top: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
}
.pmoja-other-flavours__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
}
@media (min-width: 600px) { .pmoja-other-flavours__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pmoja-other-flavours__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .pmoja-other-flavours__grid { grid-template-columns: repeat(5, 1fr); } }

.pmoja-other-flavour {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--pmoja-ink);
    transition: all .4s var(--pmoja-ease);
    position: relative;
}
.pmoja-other-flavour:hover {
    background: var(--pmoja-accent-tint);
    transform: translateY(-3px);
    border-color: var(--pmoja-accent);
}
.pmoja-other-flavour__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--pmoja-accent);
    line-height: 1;
    flex-shrink: 0;
    transition: color 1s var(--pmoja-ease-soft);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-other-flavour__name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.1;
    margin: 0;
    flex: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-other-flavour__arrow {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--pmoja-accent);
    transition: transform .4s var(--pmoja-ease), color 1s var(--pmoja-ease-soft);
}
.pmoja-other-flavour:hover .pmoja-other-flavour__arrow { transform: translateX(6px); }

/* v3.2 — Flavour images inside Try-another-flavour cards */
.pmoja-other-flavour {
    /* Re-tune: number on top-left, image centred, name below, arrow corner. */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 18px 18px 22px;
    min-height: 380px;
    gap: 8px;
    overflow: hidden;
}
.pmoja-other-flavour__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    width: 100%;
    margin: 4px 0 14px;
    position: relative;
}
.pmoja-other-flavour__img {
    width: 100%;
    max-width: 300px;
    max-height: 260px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(31,26,18,.2));
    transition: transform .5s var(--pmoja-ease);
}
.pmoja-other-flavour:hover .pmoja-other-flavour__img {
    transform: translateY(-6px) scale(1.06) rotate(-2deg);
}
.pmoja-other-flavour__name {
    text-align: center;
    font-size: 17px;
    margin-top: 2px;
}
.pmoja-other-flavour__num {
    position: absolute;
    top: 14px;
    left: 18px;
    font-size: 18px;
    line-height: 1;
}
.pmoja-other-flavour__arrow {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 16px;
}


/* --- Reduce video bandwidth on mobile ---------------------- */
@media (max-width: 700px) {
    .pmoja-video-hero { min-height: 90vh; min-height: 90dvh; }
    .pmoja-video-hero__scroll { display: none; }
}

/* --- Reduced motion: hold the video on first frame ---------- */
@media (prefers-reduced-motion: reduce) {
    .pmoja-video-hero__video { display: none; }
    .pmoja-video-hero {
        background: linear-gradient(135deg, var(--pmoja-ink) 0%, var(--pmoja-mango-deep) 100%);
    }
}


/* =============================================================
 *  END
 * ============================================================= */

/* v3.2 — Contact form field error highlighting + smooth-scroll target offset */
.pmoja-form-row input.has-error,
.pmoja-form-row select.has-error,
.pmoja-form-row textarea.has-error {
    border-color: var(--pmoja-watermelon, #D8425A) !important;
    background: rgba(216, 66, 90, .04);
}

/* Give #buy-now and #products clear scroll-margin so the smooth scroll
   lands cleanly below the fixed header. */
#buy-now,
#products,
[id] { scroll-margin-top: 100px; }
@media (max-width: 700px) { [id] { scroll-margin-top: 80px; } }


/* =============================================================
 *  J. v3.2.0 ADDITIONS
 *  Shop redesign, cart/checkout layouts, trust panels.
 * ============================================================= */

/* --- SHOP PAGE — prodcard body + desc + bottom -------------- */
.pmoja-prodcard__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pmoja-ink-soft);
    margin: 0 0 14px;
}
.pmoja-prodcard__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--pmoja-line);
    margin-top: auto;
}
.pmoja-prodcard__cta {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .3s var(--pmoja-ease), color .3s var(--pmoja-ease);
}
.pmoja-prodcard:hover .pmoja-prodcard__cta { gap: 10px; color: var(--pmoja-accent-deep, var(--pmoja-ink)); }

/* When shop prodcards are used, they need a bit more vertical room
   to accommodate the description + bottom row that home doesn't have. */
.pmoja-shop-cases ~ .pmoja-prodcard,
section.pmoja-product-showcase .pmoja-prodcard { min-height: 420px; }


/* --- SHOP TRUST SIGNALS ------------------------------------- */
.pmoja-shop-trust {
    padding: clamp(48px, 7vw, 96px) 0;
    background: var(--pmoja-custard);
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
}
.pmoja-shop-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 800px) { .pmoja-shop-trust__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.pmoja-shop-trust__card {
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: 18px;
    padding: 28px;
    transition: all .5s var(--pmoja-ease);
}
.pmoja-shop-trust__card:hover {
    transform: translateY(-4px);
    border-color: var(--pmoja-accent);
    box-shadow: 0 30px 50px -28px rgba(31,26,18,.22);
}
.pmoja-shop-trust__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 28px;
    color: var(--pmoja-accent);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    line-height: 1;
    display: block;
    margin-bottom: 16px;
}
.pmoja-shop-trust__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 19px;
    margin: 0 0 8px;
    line-height: 1.2;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-shop-trust__body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--pmoja-ink-soft);
    margin: 0;
}


/* --- CART + CHECKOUT shared layout -------------------------- */
.pmoja-page-hero--compact { padding: calc(var(--pmoja-header-h) + 48px) var(--pmoja-gutter) 40px; }

.pmoja-shop-page-body {
    padding: clamp(32px, 5vw, 60px) 0 var(--pmoja-section);
    background: var(--pmoja-paper);
}
.pmoja-shop-page-body__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 1000px) {
    .pmoja-shop-page-body__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 48px;
        align-items: start;
    }
    /* Cart + checkout: trust-panel sidebar removed (v3.11.0) —
       collapse to a single readable column. */
    .pmoja-shop-page-body__grid--single {
        grid-template-columns: minmax(0, 1fr);
        max-width: 1080px;
        margin: 0 auto;
    }
}

.pmoja-shop-page-body__main {
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(18px, 2vw, 24px);
    padding: clamp(24px, 4vw, 40px);
    min-height: 200px;
}

/* WooCommerce shortcode output — gentle style nudges, no hard
   override. We let WC own the layout but match colours and radii. */
.pmoja-shop-page-body__main .woocommerce a,
.pmoja-shop-page-body__main .wc-block-cart a { color: var(--pmoja-ink); }
.pmoja-shop-page-body__main .button,
.pmoja-shop-page-body__main .wc-block-cart__submit-button,
.pmoja-shop-page-body__main .checkout-button {
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 14px 28px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    transition: all .4s var(--pmoja-ease) !important;
}
.pmoja-shop-page-body__main .button:hover,
.pmoja-shop-page-body__main .wc-block-cart__submit-button:hover,
.pmoja-shop-page-body__main .checkout-button:hover {
    background: var(--pmoja-accent) !important;
    color: var(--pmoja-ink) !important;
    transform: translateY(-2px);
}
.pmoja-shop-page-body__main table.shop_table,
.pmoja-shop-page-body__main .woocommerce-cart-form table {
    border: 1px solid var(--pmoja-line);
    border-radius: 16px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.pmoja-shop-page-body__main input[type="text"],
.pmoja-shop-page-body__main input[type="email"],
.pmoja-shop-page-body__main input[type="tel"],
.pmoja-shop-page-body__main input[type="number"],
.pmoja-shop-page-body__main select,
.pmoja-shop-page-body__main textarea {
    border: 1px solid var(--pmoja-line) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 14px !important;
    background: var(--pmoja-paper) !important;
}


/* --- TRUST PANEL — sidebar component ------------------------ */
.pmoja-shop-page-body__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pmoja-trust-panel {
    background: var(--pmoja-custard);
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(16px, 1.8vw, 20px);
    padding: 24px;
}
.pmoja-trust-panel .pmoja-eyebrow { margin-bottom: 14px; display: flex; }

.pmoja-trust-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pmoja-trust-panel__list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pmoja-ink-soft);
    padding-left: 18px;
    position: relative;
}
.pmoja-trust-panel__list li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    position: absolute;
    left: 0; top: 7px;
}
.pmoja-trust-panel__list li strong { color: var(--pmoja-ink); font-weight: 600; }

.pmoja-trust-panel__steps {
    list-style: none;
    counter-reset: pmoja-step;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pmoja-trust-panel__steps li {
    counter-increment: pmoja-step;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pmoja-ink-soft);
    padding-left: 30px;
    position: relative;
}
.pmoja-trust-panel__steps li::before {
    content: counter(pmoja-step);
    position: absolute;
    left: 0; top: 0;
    width: 22px; height: 22px;
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

.pmoja-trust-panel--secure {
    text-align: center;
    padding: 28px 24px;
}
.pmoja-trust-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-radius: 50%;
    margin-bottom: 12px;
}
.pmoja-trust-panel__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 6px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-trust-panel__small {
    font-size: 12px;
    line-height: 1.5;
    color: var(--pmoja-ink-soft);
    margin: 0;
}

.pmoja-trust-panel__email {
    display: inline-block;
    color: var(--pmoja-ink);
    font-weight: 500;
    border-bottom: 1px solid var(--pmoja-line);
    padding-bottom: 2px;
    transition: border-color .3s;
    text-decoration: none;
}
.pmoja-trust-panel__email:hover { border-bottom-color: var(--pmoja-accent); }

.pmoja-trust-panel__hint {
    font-size: 12px;
    color: var(--pmoja-ink-soft);
    text-align: center;
    margin: 8px 0 0;
}
.pmoja-trust-panel__hint a { color: var(--pmoja-ink); border-bottom: 1px solid var(--pmoja-line); }


/* =============================================================
 *  v3.4.0 — WOOCOMMERCE WRAPPER (theme-owned chrome)
 *  Wraps single product, cart, checkout, account and taxonomy
 *  archives so they sit inside the Pure Mo-JA header/footer with
 *  correct spacing below the sticky header. The Pure Moja Bundles
 *  plugin keeps full control of the product builder UI (.pmb-*);
 *  we only own the outer chassis.
 * ============================================================= */
.pmoja-wc-main {
    position: relative;
    z-index: 2;
    background: var(--pmoja-paper);
    padding-top: calc(var(--pmoja-header-h, 80px) + 24px);
    padding-bottom: var(--pmoja-section, 96px);
    min-height: 60vh;
}
.pmoja-wc-wrap {
    width: 100%;
}
.pmoja-wc-archive-head {
    margin: 0 0 32px;
}
.pmoja-wc-archive-title {
    margin: 0 0 12px;
}

/* Single product: the bundle plugin renders .pmb-bundle-page with
   its own internal max-width. Don't double-constrain it. */
body.single-product .pmoja-wc-wrap {
    max-width: none;
    padding: 0;
}

/* Cart / checkout / account — give WooCommerce shortcode output a
   readable measure and brand-consistent spacing without fighting
   WooCommerce's own table styles. */
body.woocommerce-cart .pmoja-wc-wrap,
body.woocommerce-checkout .pmoja-wc-wrap,
body.woocommerce-account .pmoja-wc-wrap {
    max-width: 1200px;
    margin: 0 auto;
}
body.woocommerce-cart .pmoja-wc-main h1,
body.woocommerce-checkout .pmoja-wc-main h1,
body.woocommerce-account .pmoja-wc-main h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* WooCommerce primary buttons in the brand aesthetic (cart,
   checkout, account). Scoped to our wrapper so it never touches
   the bundle builder's own buttons. */
.pmoja-wc-main .button,
.pmoja-wc-main button.button,
.pmoja-wc-main a.button,
.pmoja-wc-main .wc-block-components-button {
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 14px 28px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    transition: background .3s var(--pmoja-ease), transform .3s var(--pmoja-ease) !important;
}
.pmoja-wc-main .button:hover,
.pmoja-wc-main button.button:hover,
.pmoja-wc-main a.button:hover {
    background: var(--pmoja-accent-deep, #b8721f) !important;
    transform: translateY(-1px);
}


/* =============================================================
 *  v3.8.0 — STOCKED-AT LOGO CAROUSEL + SHAKE TO APPRECIATE
 * ============================================================= */

/* ---- Client logo carousel (auto-rotating marquee) ---- */
.pmoja-logos {
    padding: clamp(40px, 6vw, 72px) 0;
    background: var(--pmoja-paper);
    position: relative;
    z-index: 2;
    overflow: hidden;
}
/* Sits flush under the hero — tighter top padding, subtle divider below */
.pmoja-logos--top {
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--pmoja-line);
}
.pmoja-logos__eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 28px;
}
.pmoja-logos__viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pmoja-logos__track {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
    width: max-content;
    animation: pmoja-logos-scroll 36s linear infinite;
}
.pmoja-logos:hover .pmoja-logos__track {
    animation-play-state: paused;
}
.pmoja-logos__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}
.pmoja-logos__item img {
    max-height: 60px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .65;
    transition: filter .4s var(--pmoja-ease), opacity .4s var(--pmoja-ease);
}
.pmoja-logos__item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
@keyframes pmoja-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* set is duplicated, so -50% loops seamlessly */
}
@media (prefers-reduced-motion: reduce) {
    .pmoja-logos__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---- Shake to Appreciate gallery ---- */
.pmoja-shake {
    padding: var(--pmoja-section) 0;
    position: relative;
    z-index: 2;
    background: var(--pmoja-paper);
}
.pmoja-shake__title {
    text-align: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-l);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.03em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    text-transform: uppercase;
    margin: 0 0 clamp(28px, 4vw, 48px);
}
/* ---- Shared media carousel (Shake to Appreciate + Stockists) ----
   4 in view on desktop via --mcar-n; JS reads the variable so CSS is
   the single source of truth for the per-view count. */
.pmoja-mcar {
    position: relative;
    padding: 0 clamp(16px, 4vw, 48px);
    max-width: 1640px;
    margin: 0 auto;
}
.pmoja-mcar__viewport {
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}
.pmoja-mcar--live .pmoja-mcar__viewport:active { cursor: grabbing; }
.pmoja-mcar__track {
    --mcar-n: 4;
    --mcar-gap: clamp(14px, 1.6vw, 22px);
    display: flex;
    gap: var(--mcar-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
}
.pmoja-mcar__item {
    flex: 0 0 calc((100% - (var(--mcar-n) - 1) * var(--mcar-gap)) / var(--mcar-n));
    min-width: 0;
}
.pmoja-mcar__card {
    position: relative;
    margin: 0;
    border-radius: clamp(18px, 2vw, 28px);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--pmoja-accent);
    box-shadow: 0 20px 40px -24px rgba(31,26,18,.5);
    transition: transform .5s var(--pmoja-ease), box-shadow .5s var(--pmoja-ease);
}
.pmoja-mcar__card--a { background: #F26B21; }   /* warm orange */
.pmoja-mcar__card--b { background: #F4892B; }   /* lighter orange */
.pmoja-mcar__card:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 30px 60px -24px rgba(31,26,18,.55);
}
.pmoja-mcar__mediawrap {
    position: absolute;
    inset: 0;
}
.pmoja-mcar__mediawrap .pmoja-mcar__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pmoja-mcar__card:hover .pmoja-mcar__media {
    transform: scale(1.04);
    transition: transform 1.2s var(--pmoja-ease);
}
.pmoja-mcar__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 20px 20px;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(to top, rgba(20,12,4,.72), transparent);
}
/* Static fallbacks: reduced motion / too few items → native scroller. */
.pmoja-mcar--static .pmoja-mcar__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: default;
}
.pmoja-mcar--static .pmoja-mcar__viewport::-webkit-scrollbar { display: none; }
.pmoja-mcar--few .pmoja-mcar__track { justify-content: center; }

/* Per-view breakpoints (mobile keeps a peek of the next card). */
@media (max-width: 1180px) { .pmoja-mcar__track { --mcar-n: 3; } }
@media (max-width: 820px)  { .pmoja-mcar__track { --mcar-n: 2; } }
@media (max-width: 520px)  { .pmoja-mcar__track { --mcar-n: 1.2; } }

/* Stockists-page carousel section wrapper */
.pmoja-stkcar {
    padding: var(--pmoja-section) 0;
    background: var(--pmoja-paper);
    position: relative;
    z-index: 2;
}
/* Section is full-bleed for the carousel, so the head needs its own
   gutter + max-width (siblings get this from their section padding). */
.pmoja-stkcar .pmoja-section-head {
    padding: 0 var(--pmoja-gutter);
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================
 *  404 PAGE (v3.11.0)
 * ============================================================= */
.pmoja-404 {
    min-height: 72vh;
    display: flex;
    align-items: center;
    background: var(--pmoja-paper);
    padding: calc(var(--pmoja-section) * .8) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
}
.pmoja-404__inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.pmoja-404__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(52px, 9vw, 132px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.03em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin: 22px 0 26px;
    color: var(--pmoja-ink);
}
.pmoja-404__copy {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--pmoja-ink-soft);
    max-width: 520px;
    margin: 0 auto 36px;
}
.pmoja-404__actions {
    display: flex;
    gap: 26px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* v3.12.0 — flavour-page buy cards now show the product image
   (same CMS image as the homepage cards, SVG fallback). */
.pmoja-buycard__img {
    position: relative;
    z-index: 1;
    max-width: 78%;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(31,26,18,.22));
    transition: transform .6s var(--pmoja-ease);
}
.pmoja-buycard:hover .pmoja-buycard__img { transform: translateY(-6px) scale(1.03); }

/* v3.13.0 — carousel arrows (homepage Shake + Stockists). Hidden in
   static/few-items mode where there's nothing to navigate. */
.pmoja-mcar__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border: 1px solid var(--pmoja-line);
    border-radius: 999px;
    background: var(--pmoja-paper);
    color: var(--pmoja-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -12px rgba(31,26,18,.4);
    transition: background .3s var(--pmoja-ease), color .3s var(--pmoja-ease), transform .3s var(--pmoja-ease);
}
.pmoja-mcar--live .pmoja-mcar__arrow { display: inline-flex; }
.pmoja-mcar__arrow--prev { left: clamp(2px, 1vw, 14px); }
.pmoja-mcar__arrow--next { right: clamp(2px, 1vw, 14px); }
.pmoja-mcar__arrow:hover {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    transform: translateY(-50%) scale(1.06);
}
@media (max-width: 600px) {
    .pmoja-mcar__arrow { width: 38px; height: 38px; font-size: 15px; }
}

/* v3.14.0 — quotes carousel variant: 3 wide cards in view, static
   centred row when three or fewer quotes. Uses the existing
   .pmoja-quote-card design inside carousel items. */
.pmoja-mcar--quotes { padding: 0 clamp(16px, 4vw, 48px); }
.pmoja-mcar--quotes .pmoja-mcar__track { --mcar-n: 3; align-items: stretch; }
.pmoja-mcar--quotes .pmoja-mcar__item { display: flex; }
.pmoja-mcar--quotes .pmoja-quote-card { flex: 1; height: 100%; }
@media (max-width: 1000px) { .pmoja-mcar--quotes .pmoja-mcar__track { --mcar-n: 2; } }
@media (max-width: 640px)  { .pmoja-mcar--quotes .pmoja-mcar__track { --mcar-n: 1.1; } }

/* =============================================================
 *  SINGLE RECIPE (v3.18.0 — PDF layout)
 *  Flavour-tinted feature section: can render + giant watermark
 *  letters behind, title/short description, Ingredients and
 *  Instructions lists with accent dot markers.
 * ============================================================= */
.pmoja-recipe-feature {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: var(--pmoja-accent-tint, var(--pmoja-paper));
    padding: calc(var(--pmoja-section) * .75) var(--pmoja-gutter);
}
.pmoja-recipe-feature__mark {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(160px, 30vw, 480px);
    letter-spacing: .02em;
    line-height: 1;
    color: var(--pmoja-accent-deep);
    opacity: .10;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.pmoja-recipe-feature__grid {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.pmoja-recipe-feature__media {
    position: relative;
    display: flex;
    justify-content: center;
}
.pmoja-recipe-feature__can {
    max-width: min(100%, 380px);
    max-height: 620px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 34px 44px rgba(31,26,18,.32));
    transition: transform .7s var(--pmoja-ease);
}
.pmoja-recipe-feature__media:hover .pmoja-recipe-feature__can { transform: translateY(-8px) rotate(-1.5deg); }
.pmoja-recipe-feature__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(36px, 5.2vw, 68px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: var(--pmoja-ink);
    margin: 16px 0 10px;
}
.pmoja-recipe-feature__tagline {
    font-size: clamp(15.5px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--pmoja-ink-soft);
    max-width: 560px;
    margin: 0 0 26px;
}
.pmoja-recipe-feature__h {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--pmoja-accent-deep);
    margin: 26px 0 10px;
}
.pmoja-recipe-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 620px;
}
.pmoja-recipe-list li {
    position: relative;
    padding: 7px 0 7px 26px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--pmoja-ink);
}
.pmoja-recipe-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pmoja-accent-deep);
}
.pmoja-recipe-list--steps { counter-reset: pmoja-step; }
.pmoja-recipe-list--steps li { counter-increment: pmoja-step; }
.pmoja-recipe-feature .pmoja-cta { margin-top: 30px; }
@media (max-width: 900px) {
    .pmoja-recipe-feature__grid { grid-template-columns: 1fr; }
    .pmoja-recipe-feature__media { order: -1; }
    .pmoja-recipe-feature__can { max-height: 420px; }
    .pmoja-recipe-feature__mark { font-size: clamp(120px, 42vw, 260px); top: 12%; }
}

.pmoja-recipe-content { margin-top: 34px; font-size: 16px; line-height: 1.7; color: var(--pmoja-ink-soft); }
@media (max-width: 860px) {
    .pmoja-recipe-body__grid { grid-template-columns: 1fr; }
    .pmoja-recipe-ing { position: static; }
}

.pmoja-recipe-more {
    background: var(--pmoja-paper);
    padding: 0 var(--pmoja-gutter) var(--pmoja-section);
    position: relative;
    z-index: 2;
}
.pmoja-recipe-more__grid {
    max-width: 1640px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}
.pmoja-recipe-more__card {
    display: block;
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(16px, 2vw, 24px);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    transition: transform .45s var(--pmoja-ease), box-shadow .45s var(--pmoja-ease);
}
.pmoja-recipe-more__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(31,26,18,.4);
}
.pmoja-recipe-more__media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.pmoja-recipe-more__body { padding: 18px 20px 22px; }
.pmoja-recipe-more__tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pmoja-accent-deep);
    margin-bottom: 8px;
}
.pmoja-recipe-more__body h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--pmoja-ink);
    margin: 0;
}
@media (max-width: 820px) {
    .pmoja-recipe-more__grid { grid-template-columns: 1fr; }
}

/* v3.18.1 — recipe listing cards now show the featured can image
   (transparent render, contain-fit) between the tag and the title. */
.pmoja-recipe-card__media {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 150px;
    margin: 10px 0 14px;
}
.pmoja-recipe-card__media img {
    max-height: 170px;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(31,26,18,.3));
    transition: transform .5s var(--pmoja-ease);
}
.pmoja-recipe-card:hover .pmoja-recipe-card__media img {
    transform: translateY(-6px) scale(1.04);
}
/* v3.19.4 — featured-card image size overrides removed: all recipe
   card images render at one uniform size (client feedback: the first
   card's can was noticeably larger than the rest). */
.pmoja-recipe-card__media { min-height: 165px; }
.pmoja-recipe-card__media img { max-height: 180px; }

/* =============================================================
 *  LEGAL PAGES (Privacy / Returns / Terms) — v3.19.0
 * ============================================================= */
.pmoja-legal-hero {
    background: var(--pmoja-paper);
    padding: calc(var(--pmoja-section) * .6) var(--pmoja-gutter) 24px;
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.pmoja-legal-hero__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(38px, 5.4vw, 66px);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.02;
    color: var(--pmoja-ink);
    margin: 14px 0 10px;
}
.pmoja-legal-hero__updated { margin: 0; font-size: 14px; color: var(--pmoja-ink-soft); }
.pmoja-legal-body {
    background: var(--pmoja-paper);
    padding: 10px var(--pmoja-gutter) var(--pmoja-section);
    position: relative;
    z-index: 2;
}
.pmoja-legal-body__inner { max-width: 880px; margin: 0 auto; }
.pmoja-legal-body__inner h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--pmoja-ink);
    margin: 40px 0 12px;
    padding-top: 26px;
    border-top: 1px solid var(--pmoja-line);
}
.pmoja-legal-body__inner p,
.pmoja-legal-body__inner li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--pmoja-ink-soft);
}
.pmoja-legal-body__inner a { color: var(--pmoja-accent-deep); }

/* =============================================================
 *  MY ACCOUNT — v3.19.0 (nav + endpoints restyle, dashboard cards)
 * ============================================================= */
.woocommerce-account .woocommerce {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--pmoja-section) * .5) var(--pmoja-gutter) var(--pmoja-section);
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    position: relative;
    z-index: 2;
}
/* v3.19.6 — logged-out My Account: modern branded login/register.
   Pure CSS (no Woo template overrides, update-safe). Two cards side by
   side when registration is on, one centred card otherwise. */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 520px;
}
.woocommerce-account:not(.logged-in) .woocommerce:has(.u-columns.col2-set) {
    max-width: 1040px;
}
/* v3.19.7 — same fault family as the dashboard fix: WooCommerce's
   layout CSS floats .col-1/.col-2 at 48%, which broke the columns out
   of the grid and stacked them. Assert the grid and PIN each column to
   its cell, resetting float/width on every wrapper variant Woo emits. */
.woocommerce-account:not(.logged-in) #customer_login,
.woocommerce-account:not(.logged-in) .woocommerce .u-columns.col2-set {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 32px);
    align-items: start;
}
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .col-1 {
    grid-column: 1;
    grid-row: 1;
}
.woocommerce-account:not(.logged-in) #customer_login .u-column2,
.woocommerce-account:not(.logged-in) #customer_login .col-2 {
    grid-column: 2;
    grid-row: 1;
}
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2,
.woocommerce-account:not(.logged-in) #customer_login .col-1,
.woocommerce-account:not(.logged-in) #customer_login .col-2,
.woocommerce-account:not(.logged-in) .woocommerce > h2 + form.woocommerce-form-login {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
}
/* Standalone login (registration disabled): centred comfortable card
   even without :has() support. */
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login {
    max-width: 520px !important;
    margin: 0 auto;
}

/* v3.19.8 — lost/reset password: WooCommerce marks the email row
   .form-row-first (47% wide, floated) which shrank the field to a
   sliver. Full-width rows + the same card treatment as login. */
.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-ResetPassword {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(18px, 2.4vw, 28px);
    padding: clamp(26px, 4vw, 44px);
    box-shadow: 0 24px 48px -30px rgba(31, 26, 18, .35);
}
.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-ResetPassword .form-row,
.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-ResetPassword .form-row-first,
.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-ResetPassword .form-row-last {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
}
.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-ResetPassword > p:not(.form-row) {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pmoja-ink-soft);
    margin: 0 0 18px;
}
/* Card treatment for each form (and the standalone login form) */
.woocommerce-account:not(.logged-in) #customer_login > div,
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login {
    background: #fff;
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(18px, 2.4vw, 28px);
    padding: clamp(26px, 4vw, 44px);
    box-shadow: 0 24px 48px -30px rgba(31, 26, 18, .35);
}
.woocommerce-account:not(.logged-in) .woocommerce h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -.02em;
    color: var(--pmoja-ink);
    margin: 0 0 18px;
}
/* Labels: small caps, breathing room */
.woocommerce-account:not(.logged-in) .woocommerce form .form-row label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
    margin: 0 0 7px;
}
.woocommerce-account:not(.logged-in) .woocommerce form .form-row label .required { color: var(--pmoja-accent-deep, #8A3F08); }
/* Inputs: tall, rounded, calm focus */
.woocommerce-account:not(.logged-in) .woocommerce form .form-row {
    padding: 0;
    margin: 0 0 18px;
}
.woocommerce-account:not(.logged-in) .woocommerce form .form-row input.input-text {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--pmoja-line);
    border-radius: 14px;
    background: var(--pmoja-paper);
    font-size: 15px;
    color: var(--pmoja-ink);
    box-sizing: border-box;
    transition: border-color .25s var(--pmoja-ease), box-shadow .25s var(--pmoja-ease), background .25s var(--pmoja-ease);
}
.woocommerce-account:not(.logged-in) .woocommerce form .form-row input.input-text:focus {
    outline: none;
    background: #fff;
    border-color: var(--pmoja-ink);
    box-shadow: 0 0 0 3px rgba(31, 26, 18, .08);
}
/* Password field keeps Woo's show-password eye aligned */
.woocommerce-account:not(.logged-in) .password-input { display: block; position: relative; }
.woocommerce-account:not(.logged-in) .show-password-input {
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
}
/* Remember me + submit */
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--pmoja-ink) !important;
    margin: 2px 0 14px;
    cursor: pointer;
}
.woocommerce-account:not(.logged-in) .woocommerce form button.button {
    width: 100%;
    height: 54px;
    border-radius: 999px !important;
    font-size: 15px !important;
    margin-top: 4px;
}
/* Lost password + register hint text */
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword,
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text p {
    font-size: 13.5px;
    color: var(--pmoja-ink-soft);
    line-height: 1.6;
    margin: 14px 0 0;
    text-align: center;
}
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a { color: var(--pmoja-accent-deep, #8A3F08); font-weight: 600; }
/* Registration email-only hint spacing */
.woocommerce-account:not(.logged-in) .woocommerce-form-register p:not(.form-row) {
    font-size: 14px;
    color: var(--pmoja-ink-soft);
    line-height: 1.6;
}
@media (max-width: 640px) {
    .woocommerce-account:not(.logged-in) #customer_login,
    .woocommerce-account:not(.logged-in) .woocommerce .u-columns.col2-set {
        grid-template-columns: 1fr;
    }
    .woocommerce-account:not(.logged-in) #customer_login .u-column1,
    .woocommerce-account:not(.logged-in) #customer_login .u-column2,
    .woocommerce-account:not(.logged-in) #customer_login .col-1,
    .woocommerce-account:not(.logged-in) #customer_login .col-2 {
        grid-column: 1;
        grid-row: auto;
    }
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 18px;
    border: 1px solid var(--pmoja-line);
    border-radius: 999px;
    color: var(--pmoja-ink) !important;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .3s var(--pmoja-ease), color .3s var(--pmoja-ease);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper) !important;
    border-color: var(--pmoja-ink);
}
.woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid var(--pmoja-line);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(22px, 3vw, 40px);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--pmoja-ink);
}
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button,
.woocommerce-account a.button {
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-weight: 600 !important;
    border: 0 !important;
}
.woocommerce-account table.shop_table { border: 0; }
.woocommerce-account table.shop_table th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pmoja-ink-soft); }
.woocommerce-account table.shop_table td, 
.woocommerce-account table.shop_table th { border-color: var(--pmoja-line); }
@media (max-width: 860px) {
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; }
}

/* Dashboard cards */
.pmoja-account-dash__hello h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 400;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}
.pmoja-account-dash__hello h2 .em { font-style: italic; color: var(--pmoja-accent, #F08A1F); }
.pmoja-account-dash__hello p { color: var(--pmoja-ink-soft); margin: 0 0 26px; }
.pmoja-account-dash__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.pmoja-account-dash__card {
    position: relative;
    display: block;
    padding: 20px 22px 22px;
    border: 1px solid var(--pmoja-line);
    border-radius: 16px;
    background: var(--pmoja-paper);
    text-decoration: none !important;
    transition: transform .35s var(--pmoja-ease), box-shadow .35s var(--pmoja-ease);
}
.pmoja-account-dash__card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgba(31,26,18,.4); }
.pmoja-account-dash__card h3 { margin: 0 0 6px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 20px; color: var(--pmoja-ink); }
.pmoja-account-dash__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pmoja-ink-soft); }
.pmoja-account-dash__go { position: absolute; top: 18px; right: 20px; color: var(--pmoja-accent-deep, #8A3F08); font-size: 18px; }
.pmoja-account-dash__card--shop { background: var(--pmoja-ink); border-color: var(--pmoja-ink); }
.pmoja-account-dash__card--shop h3, .pmoja-account-dash__card--shop .pmoja-account-dash__go { color: var(--pmoja-paper); }
.pmoja-account-dash__card--shop p { color: rgba(255,251,241,.75); }
@media (max-width: 640px) { .pmoja-account-dash__grid { grid-template-columns: 1fr; } }

/* v3.19.1 — My Account layout repair. WooCommerce's stylesheet floats
   the navigation (width 30%) and content (width 68%); inside our CSS
   grid those widths squashed the columns and broke alignment. Reset
   them: the grid owns the layout. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}

/* Dashboard cards: equal heights per row, arrow pinned, text flowing. */
.pmoja-account-dash__grid { grid-auto-rows: 1fr; align-items: stretch; }
.pmoja-account-dash__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    box-sizing: border-box;
    padding-right: 46px; /* clear the arrow */
}

/* v3.19.1 — "More to mix" cards: show the whole can render, uncropped,
   at its natural proportions on a soft flavour-tint backdrop (was
   object-fit:cover in a fixed 190px rectangle, which cropped the cans). */
.pmoja-recipe-more__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--pmoja-accent-tint, #FDF3E3);
    padding: 18px 18px 0;
    min-height: 230px;
}
.pmoja-recipe-more__media img {
    width: auto;
    max-width: 72%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 18px 24px rgba(31,26,18,.28));
    transition: transform .5s var(--pmoja-ease);
}
.pmoja-recipe-more__card:hover .pmoja-recipe-more__media img {
    transform: translateY(-6px) scale(1.03);
}

/* v3.19.2 — My Account grid: the .woocommerce wrapper has THREE
   children (notices wrapper, navigation, content). Without explicit
   placement the notices div occupied the first grid cell, pushing the
   navigation into the content column and the content underneath —
   "tabs up, content down". Same fault class as the WSF account fix:
   pin every child to its cell. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
    grid-column: 1;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 2;
}
@media (max-width: 860px) {
    .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
        grid-column: 1;
    }
}

/* =============================================================
 *  OUR FLAVOURS (v3.20.0)
 * ============================================================= */
.pmoja-flavours-hero {
    background: var(--pmoja-paper);
    padding: calc(var(--pmoja-section) * .6) var(--pmoja-gutter) calc(var(--pmoja-section) * .4);
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
.pmoja-flavours-hero__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(42px, 6.5vw, 88px);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: .98;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: var(--pmoja-ink);
    margin: 16px 0 14px;
}
.pmoja-flavours-hero__title .pmoja-em { font-style: italic; color: var(--pmoja-accent, #F08A1F); }
.pmoja-flavours-hero__lead {
    max-width: 560px;
    margin: 0 auto;
    font-size: clamp(15.5px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--pmoja-ink-soft);
}

.pmoja-flav-panel {
    background: var(--pmoja-accent-tint, var(--pmoja-paper));
    padding: calc(var(--pmoja-section) * .5) var(--pmoja-gutter);
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.pmoja-flav-panel__grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
}
.pmoja-flav-panel--flip .pmoja-flav-panel__grid { direction: rtl; }
.pmoja-flav-panel--flip .pmoja-flav-panel__grid > * { direction: ltr; }
.pmoja-flav-panel__media {
    position: relative;
    display: flex;
    justify-content: center;
}
.pmoja-flav-panel__media img {
    max-height: 380px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 28px 36px rgba(31,26,18,.3));
    transition: transform .6s var(--pmoja-ease);
}
.pmoja-flav-panel:hover .pmoja-flav-panel__media img { transform: translateY(-8px) rotate(-1.2deg); }
.pmoja-flav-panel__num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(140px, 22vw, 300px);
    font-weight: 600;
    color: var(--pmoja-accent-deep);
    opacity: .1;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.pmoja-flav-panel__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--pmoja-ink);
    margin: 0 0 12px;
}
.pmoja-flav-panel__tag {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--pmoja-ink-soft);
    max-width: 460px;
    margin: 0 0 20px;
}
@media (max-width: 820px) {
    .pmoja-flav-panel__grid { grid-template-columns: 1fr; }
    .pmoja-flav-panel--flip .pmoja-flav-panel__grid { direction: ltr; }
    .pmoja-flav-panel__media img { max-height: 280px; }
}

.pmoja-flavours-cta {
    background: var(--pmoja-paper);
    padding: var(--pmoja-section) var(--pmoja-gutter);
    text-align: center;
    position: relative;
    z-index: 2;
}
.pmoja-flavours-cta p { color: var(--pmoja-ink-soft); margin: 12px 0 24px; }