/* =============================================================
 *  PURE MO-JA — DESIGN SYSTEM
 *  Version 2.0.0
 *
 *  Single source of truth. Mobile-first. Loads after Astra and
 *  before Elementor so we cleanly override the parent without
 *  fighting Elementor's element-specific rules.
 *
 *  STRUCTURE
 *    01. Tokens (CSS custom properties)
 *    02. Reset (minimal — Astra handles the rest)
 *    03. Typography utilities
 *    04. Paper grain
 *    05. Layout helpers
 *    06. Brand wordmark + hyphen-droplet
 *    07. Primary CTA + link styles
 *    08. Eyebrow / section head
 *    09. Cards
 *    10. Marquee
 *    11. Manifesto
 *    12. Process strip + chapters
 *    13. Forms
 *    14. Per-flavour worlds + body-class skins
 *    15. HEADER + loading bar
 *    16. DESKTOP NAV + dropdowns
 *    17. CART pill
 *    18. HAMBURGER (animated morph)
 *    19. MOBILE DRAWER + staggered link entrance
 *    20. FOOTER
 *    21. Motion (scroll reveal, parallax can, droplets)
 *    22. Reduced motion + print
 * ============================================================= */


/* =============================================================
 *  01. TOKENS
 * ============================================================= */
:root {
    /* Brand palette */
    --pmoja-cream:        #F5D492;
    --pmoja-custard:      #FFFCDD;
    --pmoja-blush:        #FFF2F1;
    --pmoja-paper:        #FFFBF1;
    --pmoja-paper-deep:   #F5E9CC;
    --pmoja-ink:          #1F1A12;
    --pmoja-ink-soft:     #5C4F3D;
    --pmoja-ink-mute:     #9C8A6E;
    --pmoja-line:         rgba(31,26,18,.14);
    --pmoja-line-soft:    rgba(31,26,18,.07);

    /* Fruit worlds */
    --pmoja-mango:        #F08A1F;  --pmoja-mango-deep:        #B0530B;  --pmoja-mango-tint:        #FDE9CC;
    --pmoja-guava:        #E85A8E;  --pmoja-guava-deep:        #A52E5E;  --pmoja-guava-tint:        #FBD9E4;
    --pmoja-lychee:       #C28DA0;  --pmoja-lychee-deep:       #8A4C62;  --pmoja-lychee-tint:       #F5E6EC;
    --pmoja-passion:      #5C3A8C;  --pmoja-passion-deep:      #2E1A52;  --pmoja-passion-tint:      #E0D4F0;
    --pmoja-watermelon:   #D8425A;  --pmoja-watermelon-deep:   #8A1E2E;  --pmoja-watermelon-tint:   #F8D6DC;
    --pmoja-pineapple:    #E8B838;  --pmoja-pineapple-deep:    #A07814;  --pmoja-pineapple-tint:    #FDF1C4;

    /* Active accent (swapped by JS or body class) */
    --pmoja-accent:       var(--pmoja-mango);
    --pmoja-accent-deep:  var(--pmoja-mango-deep);
    --pmoja-accent-tint:  var(--pmoja-mango-tint);

    /* Type scale (fluid) */
    --pmoja-d-xl: clamp(56px, 5vw, 200px);
    --pmoja-d-l:  clamp(44px, 8vw,  130px);
    --pmoja-d-m:  clamp(32px, 5.5vw, 84px);
    --pmoja-d-s:  clamp(24px, 3.6vw, 52px);
    --pmoja-body-l: clamp(16px, 1.2vw, 21px);

    /* Rhythm */
    --pmoja-gutter:    clamp(20px, 4vw, 56px);
    --pmoja-section:   clamp(64px, 11vw, 160px);
    --pmoja-header-h:  72px;

    /* Motion */
    --pmoja-ease:      cubic-bezier(.2,.7,.2,1);
    --pmoja-ease-soft: cubic-bezier(.4,0,.2,1);
}

@media (min-width: 900px) {
    :root { --pmoja-header-h: 92px; }
}


/* =============================================================
 *  02. RESET — minimal
 * ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

body.pmoja-themed {
    background: var(--pmoja-paper);
    color: var(--pmoja-ink);
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 1s var(--pmoja-ease-soft);
}

body.pmoja-themed.pmoja-no-scroll { overflow: hidden; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* =============================================================
 *  03. TYPOGRAPHY UTILITIES
 * ============================================================= */
.pmoja-serif, .pmoja-display, .pmoja-display-l, .pmoja-display-xl, .pmoja-display-s {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1;
}
.pmoja-display-xl { font-size: var(--pmoja-d-xl); line-height: .88; }
.pmoja-display-l  { font-size: var(--pmoja-d-l);  line-height: .9; }
.pmoja-display    { font-size: var(--pmoja-d-m);  line-height: .95; }
.pmoja-display-s  { font-size: var(--pmoja-d-s);  line-height: 1; }

.pmoja-italic { font-style: italic; }
.pmoja-em     { font-style: italic; color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
.pmoja-strike {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--pmoja-accent);
    color: var(--pmoja-ink-mute);
}
.pmoja-lead {
    font-size: var(--pmoja-body-l);
    line-height: 1.5;
    color: var(--pmoja-ink-soft);
}
.pmoja-lead-italic {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.4;
    color: var(--pmoja-ink);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}


/* =============================================================
 *  04. PAPER GRAIN — fixed overlay
 * ============================================================= */
body.pmoja-themed::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .42;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.07 0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

.pmoja-main { position: relative; z-index: 2; }


/* =============================================================
 *  05. LAYOUT HELPERS
 * ============================================================= */
.pmoja-wrap {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 var(--pmoja-gutter);
    position: relative;
    z-index: 2;
}
.pmoja-section {
    padding: var(--pmoja-section) 0;
    position: relative;
    z-index: 2;
}


/* =============================================================
 *  06. BRAND WORDMARK + HYPHEN-DROPLET
 * ============================================================= */
.pmoja-mark, .pmoja-brand {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    text-decoration: none;
    color: inherit;
}
.pmoja-ja { font-style: italic; color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
.pmoja-hyphen {
    display: inline-block;
    width: .12em; height: .12em;
    background: var(--pmoja-accent);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg) translateY(-.6em);
    margin: 0 .05em;
    transition: background 1s var(--pmoja-ease-soft), transform .6s var(--pmoja-ease);
    vertical-align: middle;
}
.pmoja-mark:hover .pmoja-hyphen,
.pmoja-brand:hover .pmoja-hyphen {
    transform: rotate(-45deg) translateY(-.45em) scale(1.2);
}


/* =============================================================
 *  07. PRIMARY CTA + LINK
 * ============================================================= */
.pmoja-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-radius: 100px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .01em;
    transition: all .5s var(--pmoja-ease);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    text-decoration: none;
    line-height: 1;
}
.pmoja-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pmoja-accent);
    transform: translateY(101%);
    transition: transform .5s var(--pmoja-ease);
    z-index: 0;
}
.pmoja-cta:hover::before { transform: translateY(0); }
.pmoja-cta:hover {
    color: var(--pmoja-ink);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -10px rgba(31,26,18,.3);
}
.pmoja-cta > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 14px; }
.pmoja-arrow {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--pmoja-ease);
    flex-shrink: 0;
}
.pmoja-cta:hover .pmoja-arrow {
    background: var(--pmoja-ink);
    color: var(--pmoja-accent);
    transform: rotate(-45deg);
}

.pmoja-link {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pmoja-line);
    transition: all .4s var(--pmoja-ease);
    text-decoration: none;
    color: var(--pmoja-ink);
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font-family: inherit;
    cursor: pointer;
}
.pmoja-link:hover { border-bottom-color: var(--pmoja-ink); gap: 16px; }


/* =============================================================
 *  08. EYEBROW + SECTION HEAD
 * ============================================================= */
.pmoja-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
}
.pmoja-eyebrow__num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    color: var(--pmoja-accent);
    font-size: 14px;
    transition: color 1s var(--pmoja-ease-soft);
}

.pmoja-section-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 24px;
    margin-bottom: clamp(48px, 8vw, 80px);
}
@media (min-width: 900px) {
    .pmoja-section-head { grid-template-columns: auto 1fr auto; gap: 40px; }
}


/* =============================================================
 *  09. CARDS
 * ============================================================= */
.pmoja-card {
    padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 36px);
    border-radius: clamp(20px, 2vw, 28px);
    background: var(--pmoja-custard);
    border: 1px solid var(--pmoja-line);
    position: relative;
    overflow: hidden;
    transition: all .6s var(--pmoja-ease);
}
.pmoja-card--lift::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pmoja-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--pmoja-ease);
}
.pmoja-card--lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(31,26,18,.2);
    background: var(--pmoja-cream);
}
.pmoja-card--lift:hover::before { transform: scaleX(1); }

.pmoja-stat {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(64px, 9vw, 140px);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -.04em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-stat .pct, .pmoja-stat .it { color: var(--pmoja-accent); transition: color 1s var(--pmoja-ease-soft); }
.pmoja-stat .pct { font-size: .4em; vertical-align: super; }
.pmoja-stat .it  { font-style: italic; }


/* =============================================================
 *  10. MARQUEE
 * ============================================================= */
.pmoja-marquee {
    padding: 24px 0;
    border-top: 1px solid var(--pmoja-line);
    border-bottom: 1px solid var(--pmoja-line);
    overflow: hidden;
    background: var(--pmoja-cream);
    position: relative;
    z-index: 2;
}
.pmoja-marquee__track {
    display: flex;
    gap: 40px;
    animation: pmoja-marquee 40s linear infinite;
    white-space: nowrap;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 4vw, 52px);
    font-weight: 400;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-marquee__track > span { display: inline-flex; align-items: center; gap: 40px; }
.pmoja-marquee__mark { color: var(--pmoja-mango-deep); font-style: italic; }
@keyframes pmoja-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* =============================================================
 *  11. MANIFESTO
 * ============================================================= */
.pmoja-manifesto {
    padding: var(--pmoja-section) 0;
    text-align: center;
    background: var(--pmoja-blush);
    border-top: 1px solid var(--pmoja-line);
    position: relative;
    z-index: 2;
}
.pmoja-manifesto__text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--pmoja-d-m);
    line-height: 1.05;
    max-width: 16ch;
    margin: 0 auto;
    font-weight: 400;
    letter-spacing: -.025em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    padding: 0 var(--pmoja-gutter);
}
.pmoja-manifesto__sub {
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.pmoja-manifesto__sub::before, .pmoja-manifesto__sub::after {
    content: ""; width: 24px; height: 1px; background: var(--pmoja-ink-soft);
}
@media (min-width: 700px) {
    .pmoja-manifesto__sub::before, .pmoja-manifesto__sub::after { width: 40px; }
}


/* =============================================================
 *  12. PROCESS STRIP + CHAPTERS
 * ============================================================= */
.pmoja-process-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    position: relative;
}
@media (min-width: 900px) {
    .pmoja-process-strip {
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
    }
    .pmoja-process-strip::before {
        content: "";
        position: absolute;
        top: 32px;
        left: 10%; right: 10%;
        height: 1px;
        background: repeating-linear-gradient(to right, var(--pmoja-ink-mute) 0 6px, transparent 6px 12px);
    }
}
.pmoja-proc-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 16px;
}
.pmoja-proc-num {
    width: 56px; height: 56px;
    margin: 0 auto 20px;
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 20px;
    color: var(--pmoja-accent);
    transition: all .5s var(--pmoja-ease);
}
@media (min-width: 900px) {
    .pmoja-proc-num { width: 64px; height: 64px; font-size: 22px; }
}
.pmoja-proc-step:hover .pmoja-proc-num {
    background: var(--pmoja-ink);
    color: var(--pmoja-cream);
    border-color: var(--pmoja-ink);
    transform: rotate(-12deg) scale(1.1);
}
.pmoja-proc-step h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 8px;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
@media (min-width: 900px) {
    .pmoja-proc-step h4 { font-size: 20px; }
}
.pmoja-proc-step p { font-size: 13px; color: var(--pmoja-ink-soft); line-height: 1.5; margin: 0; }

/* Chapter */
.pmoja-proc-chapter {
    padding: clamp(60px, 10vw, 100px) var(--pmoja-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    border-top: 1px solid var(--pmoja-line);
}
@media (min-width: 900px) {
    .pmoja-proc-chapter {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        min-height: 70vh;
    }
    .pmoja-proc-chapter:nth-child(even) { direction: rtl; }
    .pmoja-proc-chapter:nth-child(even) > * { direction: ltr; }
}
.pmoja-proc-num--big {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(100px, 18vw, 280px);
    line-height: .85;
    color: var(--pmoja-accent);
    letter-spacing: -.04em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    transition: color 1s var(--pmoja-ease-soft);
}
/* Process step video (replaces the big numeral when uploaded) */
.pmoja-proc-video {
    width: 100%;
    border-radius: clamp(18px, 2vw, 28px);
    overflow: hidden;
    background: var(--pmoja-custard);
    box-shadow: 0 30px 60px -28px rgba(31,26,18,.45);
    aspect-ratio: 4 / 5;
}
.pmoja-proc-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 900px) {
    .pmoja-proc-video { max-width: 460px; margin-inline: auto; }
}
.pmoja-quote {
    margin-top: 24px;
    padding: 20px;
    border-left: 2px solid var(--pmoja-accent);
    background: var(--pmoja-custard);
    border-radius: 0 16px 16px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    transition: border-color 1s var(--pmoja-ease-soft);
}
.pmoja-quote__cite {
    display: block;
    margin-top: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-style: normal;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
}


/* =============================================================
 *  13. FORMS — global form theming
 * ============================================================= */
.pmoja-form-themed label,
.pmoja-form-themed .pmoja-field-label {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-soft);
    margin-bottom: 8px;
    font-weight: 500;
    font-family: 'Inter Tight', sans-serif;
}
.pmoja-form-themed input[type="text"],
.pmoja-form-themed input[type="email"],
.pmoja-form-themed input[type="tel"],
.pmoja-form-themed input[type="search"],
.pmoja-form-themed select,
.pmoja-form-themed textarea {
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    padding: 14px 16px;
    border-radius: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    color: var(--pmoja-ink);
    transition: all .3s var(--pmoja-ease);
    width: 100%;
}
.pmoja-form-themed textarea { min-height: 120px; resize: vertical; }

/* --- SELECT FIX: the native <select> was clipping its option text
       vertically (padding with no explicit line-height/height, and
       no appearance reset). Give it a proper line-height + min-height,
       remove the native chrome, and add our own caret so the selected
       text is never cut off. ------------------------------------------ */
.pmoja-form-themed select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1.4;
    min-height: 52px;
    height: auto;
    padding-right: 44px;                 /* room for the caret */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F1A12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    text-overflow: ellipsis;
}
/* The dropdown option list itself (where supported) */
.pmoja-form-themed select option {
    color: var(--pmoja-ink);
    background: var(--pmoja-paper);
    padding: 8px 10px;
}
.pmoja-form-themed input:focus,
.pmoja-form-themed select:focus,
.pmoja-form-themed textarea:focus {
    outline: none;
    border-color: var(--pmoja-ink);
    box-shadow: 0 0 0 3px rgba(31,26,18,.06);
}


/* =============================================================
 *  14. PER-FLAVOUR WORLDS + body-class skins
 * ============================================================= */
.pmoja-world-mango      { --pmoja-accent: var(--pmoja-mango);      --pmoja-accent-deep: var(--pmoja-mango-deep);      --pmoja-accent-tint: var(--pmoja-mango-tint); }
.pmoja-world-guava      { --pmoja-accent: var(--pmoja-guava);      --pmoja-accent-deep: var(--pmoja-guava-deep);      --pmoja-accent-tint: var(--pmoja-guava-tint); }
.pmoja-world-lychee     { --pmoja-accent: var(--pmoja-lychee-deep);--pmoja-accent-deep: var(--pmoja-lychee-deep);     --pmoja-accent-tint: var(--pmoja-lychee-tint); }
.pmoja-world-passion    { --pmoja-accent: var(--pmoja-passion);    --pmoja-accent-deep: var(--pmoja-passion-deep);    --pmoja-accent-tint: var(--pmoja-passion-tint); }
.pmoja-world-watermelon { --pmoja-accent: var(--pmoja-watermelon); --pmoja-accent-deep: var(--pmoja-watermelon-deep); --pmoja-accent-tint: var(--pmoja-watermelon-tint); }
.pmoja-world-pineapple  { --pmoja-accent: var(--pmoja-pineapple);  --pmoja-accent-deep: var(--pmoja-pineapple-deep);  --pmoja-accent-tint: var(--pmoja-pineapple-tint); }

body.pmoja-flavour-mango      { --pmoja-accent: var(--pmoja-mango);      --pmoja-accent-deep: var(--pmoja-mango-deep);      --pmoja-accent-tint: var(--pmoja-mango-tint); }
body.pmoja-flavour-guava      { --pmoja-accent: var(--pmoja-guava);      --pmoja-accent-deep: var(--pmoja-guava-deep);      --pmoja-accent-tint: var(--pmoja-guava-tint); }
body.pmoja-flavour-lychee     { --pmoja-accent: var(--pmoja-lychee-deep);--pmoja-accent-deep: var(--pmoja-lychee-deep);     --pmoja-accent-tint: var(--pmoja-lychee-tint); }
body.pmoja-flavour-passion    { --pmoja-accent: var(--pmoja-passion);    --pmoja-accent-deep: var(--pmoja-passion-deep);    --pmoja-accent-tint: var(--pmoja-passion-tint); }
body.pmoja-flavour-watermelon { --pmoja-accent: var(--pmoja-watermelon); --pmoja-accent-deep: var(--pmoja-watermelon-deep); --pmoja-accent-tint: var(--pmoja-watermelon-tint); }
body.pmoja-flavour-pineapple  { --pmoja-accent: var(--pmoja-pineapple);  --pmoja-accent-deep: var(--pmoja-pineapple-deep);  --pmoja-accent-tint: var(--pmoja-pineapple-tint); }


/* =============================================================
 *  15. LOADING BAR
 * ============================================================= */
.pmoja-loadbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    z-index: 200;
    pointer-events: none;
    overflow: hidden;
}
.pmoja-loadbar__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--pmoja-accent) 0%, var(--pmoja-accent-deep) 100%);
    transform-origin: left;
    transition: width .25s var(--pmoja-ease);
    box-shadow: 0 0 12px var(--pmoja-accent);
}
.pmoja-loadbar.is-active .pmoja-loadbar__fill { animation: pmoja-loadbar-anim 1.6s var(--pmoja-ease) forwards; }
@keyframes pmoja-loadbar-anim {
    0%   { width: 0; }
    40%  { width: 75%; }
    80%  { width: 92%; }
    100% { width: 100%; }
}


/* =============================================================
 *  16. HEADER
 * ============================================================= */
.pmoja-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 14px var(--pmoja-gutter);
    transition: padding .4s var(--pmoja-ease), background .4s var(--pmoja-ease);
}
.pmoja-header__inner {
    max-width: 1640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-radius: 100px;
    border: 1px solid transparent;
    transition: all .5s var(--pmoja-ease);
    gap: 16px;
}
.pmoja-header.is-scrolled .pmoja-header__inner {
    background: rgba(255,251,241,.82);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-color: var(--pmoja-line);
    box-shadow: 0 10px 40px -20px rgba(31,26,18,.18);
}
@media (min-width: 900px) {
    .pmoja-header { padding: 18px var(--pmoja-gutter); }
    .pmoja-header.is-scrolled { padding: 12px var(--pmoja-gutter); }
    .pmoja-header__inner { padding: 12px 24px; }
}

/* Brand inside header */
.pmoja-header .pmoja-brand { font-size: 18px; }
@media (min-width: 900px) {
    .pmoja-header .pmoja-brand { font-size: 22px; }
}
.pmoja-brand__pure { display: none; }
@media (min-width: 500px) {
    .pmoja-brand__pure { display: inline; }
}

.pmoja-header__right { display: flex; align-items: center; gap: 8px; }


/* =============================================================
 *  17. DESKTOP NAV + DROPDOWNS
 * ============================================================= */
.pmoja-nav { display: none; }
@media (min-width: 1024px) {
    .pmoja-nav { display: block; }
}
.pmoja-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
}
.pmoja-nav__item {
    position: relative;
}
.pmoja-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pmoja-ink);
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    transition: color .3s;
}
.pmoja-nav__link-text { position: relative; }
.pmoja-nav__link-text::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 1px;
    background: var(--pmoja-ink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s var(--pmoja-ease);
}
.pmoja-nav__item:hover .pmoja-nav__link-text::after,
.pmoja-nav__item.is-current .pmoja-nav__link-text::after {
    transform: scaleX(1);
    transform-origin: left;
}
.pmoja-nav__caret {
    transition: transform .4s var(--pmoja-ease);
    color: var(--pmoja-ink-mute);
}
.pmoja-nav__item:hover .pmoja-nav__caret { transform: rotate(180deg); color: var(--pmoja-accent); }

/* Dropdown panel */
.pmoja-nav__sub {
    position: absolute;
    /* No visible gap — use padding-top as a transparent hover bridge so
       the cursor never leaves the hover area when moving from menu item
       to dropdown panel. */
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    /* 14px transparent padding-top creates the visual gap, but keeps
       the element fully hoverable. */
    padding: 14px 0 0;
    min-width: 260px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .4s var(--pmoja-ease), transform .4s var(--pmoja-ease), visibility 0s .4s;
    z-index: 5;
}
.pmoja-nav__sub-inner {
    position: relative;
    background: rgba(255,251,241,.96);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--pmoja-line);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 30px 60px -30px rgba(31,26,18,.25);
}
.pmoja-nav__sub::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: rgba(255,251,241,.96);
    border-top: 1px solid var(--pmoja-line);
    border-left: 1px solid var(--pmoja-line);
    border-radius: 4px 0 0 0;
}
.pmoja-nav__item.has-sub:hover .pmoja-nav__sub,
.pmoja-nav__item.has-sub:focus-within .pmoja-nav__sub {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity .4s var(--pmoja-ease), transform .4s var(--pmoja-ease), visibility 0s 0s;
}
.pmoja-nav__sub-inner { position: relative; }
.pmoja-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pmoja-nav__sublist li a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pmoja-ink);
    text-decoration: none;
    border-radius: 10px;
    transition: all .3s var(--pmoja-ease);
    position: relative;
}
.pmoja-nav__sublist li a::before {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--pmoja-accent);
    display: inline-block;
    margin-right: 10px;
    opacity: 0;
    transform: translateX(-6px);
    transition: all .3s var(--pmoja-ease);
}
.pmoja-nav__sublist li a:hover {
    background: var(--pmoja-cream);
    padding-left: 18px;
}
.pmoja-nav__sublist li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}


/* =============================================================
 *  17. CART PILL
 * ============================================================= */
.pmoja-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 100px;
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .4s var(--pmoja-ease);
    position: relative;
    line-height: 1;
}
@media (min-width: 900px) {
    .pmoja-cart { padding: 10px 18px; gap: 10px; }
}
.pmoja-cart:hover {
    background: var(--pmoja-accent-deep);
    transform: translateY(-1px);
}
.pmoja-cart__icon { display: inline-flex; line-height: 1; }
.pmoja-cart__label { display: none; }
@media (min-width: 500px) {
    .pmoja-cart__label { display: inline; }
}
.pmoja-cart__count {
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
    transition: background 1s var(--pmoja-ease-soft);
}


/* =============================================================
 *  18. HAMBURGER (CSS-only morph)
 * ============================================================= */
.pmoja-burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 10px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--pmoja-line);
    color: var(--pmoja-ink);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: .04em;
    cursor: pointer;
    transition: all .4s var(--pmoja-ease);
    position: relative;
    line-height: 1;
    z-index: 110;
}
@media (min-width: 1024px) { .pmoja-burger { display: none; } }
.pmoja-burger:hover {
    background: var(--pmoja-cream);
    border-color: var(--pmoja-cream);
    transform: translateY(-1px);
}
.pmoja-burger__lines {
    position: relative;
    width: 18px;
    height: 14px;
    display: inline-block;
    flex-shrink: 0;
}
.pmoja-burger__lines span {
    position: absolute;
    left: 0;
    height: 1.6px;
    background: currentColor;
    border-radius: 2px;
    transition: all .45s var(--pmoja-ease);
}
.pmoja-burger__lines span:nth-child(1) { top: 2px;  width: 100%; }
.pmoja-burger__lines span:nth-child(2) { top: 7px;  width: 70%; }
.pmoja-burger__lines span:nth-child(3) { top: 12px; width: 100%; }
.pmoja-burger:hover .pmoja-burger__lines span:nth-child(2) { width: 100%; }

/* When the drawer is open, the burger morphs into an X */
body.pmoja-drawer-open .pmoja-burger__lines span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
    width: 100%;
}
body.pmoja-drawer-open .pmoja-burger__lines span:nth-child(2) {
    opacity: 0;
    transform: translateX(-12px);
}
body.pmoja-drawer-open .pmoja-burger__lines span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
    width: 100%;
}
body.pmoja-drawer-open .pmoja-burger__label { opacity: 0; transform: translateX(-4px); }

.pmoja-burger__label { transition: all .35s var(--pmoja-ease); }
@media (max-width: 380px) {
    .pmoja-burger__label { display: none; }
    .pmoja-burger { padding: 8px 10px; }
}


/* =============================================================
 *  19. MOBILE DRAWER
 * ============================================================= */
.pmoja-drawer {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--pmoja-paper);
    z-index: 105;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .55s var(--pmoja-ease), transform .55s var(--pmoja-ease), visibility 0s .55s;
}
body.pmoja-drawer-open .pmoja-drawer {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition: opacity .55s var(--pmoja-ease), transform .55s var(--pmoja-ease), visibility 0s 0s;
}

/* drawer paper grain */
.pmoja-drawer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='nd'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.07 0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23nd)'/></svg>");
}

.pmoja-drawer__header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px var(--pmoja-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,251,241,.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--pmoja-line);
}
.pmoja-drawer__header .pmoja-brand { font-size: 18px; }
.pmoja-drawer__close {
    background: transparent;
    border: 1px solid var(--pmoja-line);
    width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--pmoja-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--pmoja-ease);
}
.pmoja-drawer__close:hover {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-color: var(--pmoja-ink);
    transform: rotate(90deg);
}

.pmoja-drawer__body {
    position: relative;
    z-index: 2;
    padding: clamp(32px, 8vw, 56px) var(--pmoja-gutter) calc(var(--pmoja-gutter) + 40px);
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 70px);
}

/* Big drawer watermark */
.pmoja-drawer__watermark {
    position: absolute;
    bottom: -40px;
    right: -20px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(200px, 60vw, 480px);
    line-height: .8;
    color: var(--pmoja-cream);
    opacity: .35;
    pointer-events: none;
    letter-spacing: -.05em;
    z-index: 1;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

/* drawer nav list */
.pmoja-drawer__nav {
    margin-bottom: clamp(32px, 6vw, 48px);
}
.pmoja-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pmoja-drawer__item {
    border-bottom: 1px solid var(--pmoja-line);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--pmoja-ease), transform .6s var(--pmoja-ease);
    transition-delay: calc(.08s * var(--i, 1) + .1s);
}
body.pmoja-drawer-open .pmoja-drawer__item {
    opacity: 1;
    transform: translateY(0);
}
.pmoja-drawer__link {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 22px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(34px, 8vw, 56px);
    font-weight: 400;
    color: var(--pmoja-ink);
    text-decoration: none;
    line-height: 1;
    letter-spacing: -.02em;
    transition: color .4s var(--pmoja-ease), padding-left .4s var(--pmoja-ease);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    position: relative;
}
.pmoja-drawer__link:active,
.pmoja-drawer__link:hover {
    color: var(--pmoja-accent);
    padding-left: 8px;
}
.pmoja-drawer__num {
    font-style: italic;
    font-size: .42em;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
    flex-shrink: 0;
    min-width: 1.4em;
}
.pmoja-drawer__title { font-style: italic; }
.pmoja-drawer__caret {
    margin-left: auto;
    color: var(--pmoja-ink-mute);
    transition: transform .4s var(--pmoja-ease);
    align-self: center;
}
.pmoja-drawer__item.is-open .pmoja-drawer__caret { transform: rotate(-180deg); }

/* drawer sublist (accordion) */
.pmoja-drawer__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 12px 0;
    display: none;
}
.pmoja-drawer__item.is-open .pmoja-drawer__sublist { display: block; }
.pmoja-drawer__subitem { padding: 6px 0; }
.pmoja-drawer__sublink {
    display: block;
    padding: 8px 0 8px 56px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    color: var(--pmoja-ink-soft);
    text-decoration: none;
    transition: all .3s;
}
.pmoja-drawer__sublink::before {
    content: "→";
    margin-right: 8px;
    color: var(--pmoja-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: all .3s;
    display: inline-block;
}
.pmoja-drawer__sublink:hover {
    color: var(--pmoja-ink);
    padding-left: 64px;
}
.pmoja-drawer__sublink:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* drawer meta */
.pmoja-drawer__meta {
    margin-top: auto;
    padding-top: clamp(24px, 5vw, 40px);
    border-top: 1px solid var(--pmoja-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--pmoja-ease), transform .6s var(--pmoja-ease);
    transition-delay: .8s;
}
body.pmoja-drawer-open .pmoja-drawer__meta {
    opacity: 1;
    transform: translateY(0);
}

.pmoja-drawer__cta {
    margin-top: 24px;
    align-self: flex-start;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--pmoja-ease), transform .6s var(--pmoja-ease);
    transition-delay: .95s;
}
body.pmoja-drawer-open .pmoja-drawer__cta {
    opacity: 1;
    transform: translateY(0);
}

.pmoja-drawer__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--pmoja-line);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pmoja-ink-mute);
    opacity: 0;
    transition: opacity .6s var(--pmoja-ease);
    transition-delay: 1.05s;
}
body.pmoja-drawer-open .pmoja-drawer__footer { opacity: 1; }


/* =============================================================
 *  20. FOOTER
 * ============================================================= */
.pmoja-footer {
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    padding: clamp(56px, 9vw, 80px) var(--pmoja-gutter) 32px;
    position: relative;
    z-index: 2;
}
.pmoja-footer__wrap {
    max-width: 1640px;
    margin: 0 auto;
}
.pmoja-footer-mark {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(64px, 18vw, 260px);
    line-height: .85;
    font-weight: 400;
    letter-spacing: -.05em;
    margin-bottom: clamp(48px, 8vw, 80px);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pmoja-footer-mark__hy {
    font-style: italic;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}
.pmoja-footer-mark__r {
    font-size: .2em;
    vertical-align: top;
    font-style: italic;
    margin-left: 12px;
    letter-spacing: 0;
}

.pmoja-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: clamp(40px, 6vw, 60px);
    border-top: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 600px) {
    .pmoja-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 900px) {
    .pmoja-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; }
}
.pmoja-footer__col--news { grid-column: 1 / -1; }
@media (min-width: 900px) { .pmoja-footer__col--news { grid-column: auto; } }

.pmoja-footer__heading {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin: 0 0 20px;
    font-weight: 500;
    font-family: 'Inter Tight', sans-serif;
}
.pmoja-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pmoja-footer__list li a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--pmoja-paper);
    text-decoration: none;
    transition: color .3s, padding-left .4s var(--pmoja-ease);
}
.pmoja-footer__list li a:hover {
    color: var(--pmoja-accent);
    padding-left: 8px;
}

/* Newsletter */
.pmoja-newsletter input {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    padding: 14px 18px;
    border-radius: 100px;
    color: var(--pmoja-paper);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    margin-bottom: 12px;
    transition: all .3s;
}
.pmoja-newsletter input::placeholder { color: rgba(255,255,255,.45); }
.pmoja-newsletter input:focus {
    outline: none;
    border-color: var(--pmoja-accent);
    background: rgba(255,255,255,.12);
}
.pmoja-newsletter__submit {
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    padding: 14px 26px;
    border-radius: 100px;
    border: 0;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    cursor: pointer;
    transition: all .4s var(--pmoja-ease);
}
.pmoja-newsletter__submit:hover {
    background: var(--pmoja-cream);
    transform: translateY(-2px);
}
.pmoja-newsletter__msg {
    font-size: 13px;
    margin-top: 8px;
    color: rgba(255,255,255,.7);
    min-height: 18px;
}
.pmoja-newsletter__msg.is-success { color: var(--pmoja-accent); }
.pmoja-newsletter__msg.is-error { color: #ff8a8a; }

.pmoja-footer__hint {
    margin-top: 20px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
    max-width: 32ch;
}

.pmoja-footer__meta {
    margin-top: clamp(40px, 7vw, 60px);
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.4);
}
@media (min-width: 700px) {
    .pmoja-footer__meta { flex-direction: row; justify-content: space-between; }
}


/* =============================================================
 *  21. MOTION — scroll reveal + droplet
 * ============================================================= */
.pmoja-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--pmoja-ease), transform 1s var(--pmoja-ease);
}
.pmoja-reveal.in { opacity: 1; transform: translateY(0); }

.pmoja-can-stage {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
}
.pmoja-can {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1.2s var(--pmoja-ease-soft);
    transform-style: preserve-3d;
    animation: pmoja-bob 6s ease-in-out infinite;
}
@keyframes pmoja-bob {
    0%, 100% { transform: translateY(0) rotateY(var(--rY,0deg)) rotateX(var(--rX,0deg)); }
    50%      { transform: translateY(-8px) rotateY(var(--rY,0deg)) rotateX(var(--rX,0deg)); }
}
.pmoja-droplet {
    position: absolute;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.4));
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: inset 1px 1px 2px rgba(255,255,255,.8), 0 2px 4px rgba(31,26,18,.1);
    animation: pmoja-float 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pmoja-float {
    0%, 100% { transform: rotate(-45deg) translateY(0); }
    50%      { transform: rotate(-45deg) translateY(-6px); }
}


/* =============================================================
 *  22. REDUCED MOTION + PRINT
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    body.pmoja-themed::before { display: none; }
    .pmoja-header, .pmoja-footer, .pmoja-marquee, .pmoja-burger, .pmoja-drawer { display: none; }
}


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


/* =============================================================
 *  v3.0.0 PATCHES — small additions for centralised footer + drawer
 * ============================================================= */
.pmoja-drawer__watermark-hy {
    font-style: italic;
    color: inherit;
}

.pmoja-footer__social-wrap {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.pmoja-footer__social-wrap .pmoja-footer__heading {
    margin-bottom: 12px;
}
.pmoja-footer__socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pmoja-footer__socials .pmoja-social {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color: var(--pmoja-paper);
}
.pmoja-footer__socials .pmoja-social:hover {
    background: var(--pmoja-accent);
    color: var(--pmoja-ink);
    border-color: var(--pmoja-accent);
}

.pmoja-footer__contact {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
}
.pmoja-footer__contact a {
    color: var(--pmoja-accent);
    text-decoration: none;
    transition: color .3s;
}
.pmoja-footer__contact a:hover { color: var(--pmoja-cream); }


/* SCOPE GUARD: opt design-system component styles OUT of single
   product pages so existing WooCommerce CSS keeps control. The
   body.pmoja-flavour-{slug} accent variables still cascade (so
   colors theme correctly), but our component rules below stop
   firing inside the product summary / images / tabs blocks.
   Header, footer, and .pmoja-flav-nav remain styled.            */
body.pmoja-product .product .pmoja-card,
body.pmoja-product .product .pmoja-cta:not(.pmoja-flav-nav .pmoja-cta) {
    /* Intentionally left blank — placeholder for if conflicts
       crop up. WooCommerce template buttons keep their own
       styling. */
}


/* =============================================================
 *  v3.2.0 — FIXES
 * ============================================================= */

/* SMOOTH SCROLL — site-wide. Honours reduced-motion preference. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Account for fixed header when anchor-scrolling */
html { scroll-padding-top: 90px; }
@media (max-width: 700px) { html { scroll-padding-top: 70px; } }

/* MOBILE BURGER VISIBILITY — keep header above the drawer so the
   burger's X-morph stays visible when the drawer is open. */
body.pmoja-drawer-open .pmoja-header {
    z-index: 110;
}

/* HOVER LINK COLOURS — v3.2 added a blanket override here that was
   bleeding into the cart pill SVG, brand link, and CTA buttons.
   The v3.3 block at the end of this file replaces it with scoped
   selectors that only target the intended text-link surfaces. */
a:visited { color: inherit; }

/* LOGO IMAGE — sizing in header and footer */
.pmoja-brand--has-logo {
    display: inline-flex;
    align-items: center;
}
.pmoja-brand__logo {
    height: 32px;
    width: auto;
    max-width: 180px;
    display: block;
    transition: opacity .3s var(--pmoja-ease);
}
@media (min-width: 900px) {
    .pmoja-brand__logo { height: 36px; max-width: 200px; }
}
.pmoja-brand--has-logo:hover .pmoja-brand__logo { opacity: .85; }

.pmoja-footer__logo {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    margin-bottom: 28px;
    /* Logo is dark by default; the footer is dark, so invert for
       contrast unless a light-on-dark logo variant is provided. */
    filter: brightness(0) invert(1);
}


/* =============================================================
 *  v3.3.0 — POST-LAUNCH FIXES
 *  Fixes reported against the live site v3.2 build.
 * ============================================================= */

/* --- LOGO SIZING — !important to defeat WC / Astra image resets
       (WooCommerce sets `.woocommerce img { max-width: 100%;
       height: auto }` which has higher specificity than our class
       alone, blowing the logo up on product / cart / checkout
       pages). --------------------------------------------------- */
.pmoja-brand--has-logo {
    display: inline-flex !important;
    align-items: center !important;
}
.pmoja-brand__logo {
    height: 36px !important;
    width: auto !important;
    max-width: 160px !important;
    max-height: 36px !important;
    display: block !important;
    object-fit: contain !important;
    transition: opacity .3s var(--pmoja-ease);
}
@media (min-width: 900px) {
    .pmoja-brand__logo {
        height: 42px !important;
        max-height: 42px !important;
        max-width: 200px !important;
    }
}
.pmoja-brand--has-logo:hover .pmoja-brand__logo { opacity: .85; }

/* --- FOOTER BRAND — logo only, properly sized, wordmark removed - */
.pmoja-footer__brand {
    display: flex;
    align-items: center;
    margin: 0 0 40px;
}
.pmoja-footer__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.pmoja-footer__logo {
    display: block !important;
    height: 56px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    margin: 0 !important;
    /* The supplied logo is dark; the footer is dark → invert for
       contrast. If you swap to a light-on-dark variant, set
       `filter: none !important;` here. */
    filter: brightness(0) invert(1);
}
@media (min-width: 900px) {
    .pmoja-footer__logo { height: 64px !important; max-height: 64px !important; max-width: 240px !important; }
}
.pmoja-footer__brand-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 32px;
    color: var(--pmoja-paper);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

/* Hide the legacy wordmark class if anything still references it */
.pmoja-footer-mark { display: none !important; }


/* --- HOVER OVERRIDE: tighten scope so it doesn't bleed into the
       cart pill, brand link, CTA buttons, or any other icon-bearing
       link. Only target text-link surfaces we know about. ------- */

/* Apply black hover only on LIGHT-background text-link surfaces.
   The footer is dark, so its links are handled separately (they
   hover to the accent / cream). Cart pill, brand, CTAs, prodcards,
   buycards and flav cards keep their own colour behaviour. */
.pmoja-nav__link:hover,
.pmoja-nav__link:hover .pmoja-nav__link-text,
.pmoja-nav__sub a:hover,
.pmoja-link:hover,
p a:hover,
li a:hover,
.entry-content a:hover {
    color: var(--pmoja-ink) !important;
}

/* Footer links — readable hover on the dark footer. */
.pmoja-footer__list a:hover,
.pmoja-footer__list li a:hover,
.pmoja-footer__col a:hover,
.pmoja-drawer__list a:hover {
    color: var(--pmoja-accent) !important;
}
.pmoja-footer__contact a:hover {
    color: var(--pmoja-cream) !important;
}

/* SVG icons inside any link — always currentColor of the parent link */
a svg { color: inherit; }

/* --- "SHOP NOW" ON VIDEO — pin colours in both states to defeat
       any leftover hover override. ----------------------------- */
.pmoja-video-hero .pmoja-cta--on-video,
.pmoja-video-hero .pmoja-cta--on-video:hover,
.pmoja-video-hero .pmoja-cta--on-video:focus {
    background: var(--pmoja-paper) !important;
    color: var(--pmoja-ink) !important;
}
.pmoja-video-hero .pmoja-cta--on-video > span,
.pmoja-video-hero .pmoja-cta--on-video:hover > span,
.pmoja-video-hero .pmoja-cta--on-video:focus > span {
    color: var(--pmoja-ink) !important;
}
.pmoja-video-hero .pmoja-cta--on-video::before {
    background: var(--pmoja-cream) !important;
}
.pmoja-video-hero .pmoja-cta--on-video .pmoja-arrow {
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
}

/* --- FOOTER NEWSLETTER INPUT — was unreadable (dark on dark) -- */
.pmoja-newsletter input[type="email"],
.pmoja-newsletter input[type="text"],
.pmoja-newsletter input {
    background: rgba(255, 251, 241, 0.08) !important;
    border: 1px solid rgba(255, 251, 241, 0.18) !important;
    color: var(--pmoja-paper) !important;
    padding: 14px 16px !important;
    border-radius: 100px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 14px !important;
    transition: border-color .3s, background .3s;
}
.pmoja-newsletter input::placeholder { color: rgba(255, 251, 241, 0.45) !important; }
.pmoja-newsletter input:focus {
    outline: none !important;
    border-color: var(--pmoja-accent) !important;
    background: rgba(255, 251, 241, 0.12) !important;
}
/* Autofill killer — many browsers force their own background colour */
.pmoja-newsletter input:-webkit-autofill,
.pmoja-newsletter input:-webkit-autofill:hover,
.pmoja-newsletter input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pmoja-paper) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(31,26,18,.95) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* --- DRAWER LAYOUT — v3.3 has no internal header/close button.
       Push the body content down past where the page header sits
       (which now stays visible above the drawer). --------------- */
.pmoja-drawer {
    padding-top: 0 !important;
}
.pmoja-drawer__body {
    padding-top: calc(var(--pmoja-header-h, 70px) + 32px) !important;
}
@media (min-width: 900px) {
    .pmoja-drawer__body {
        padding-top: calc(var(--pmoja-header-h, 80px) + 40px) !important;
    }
}

/* On WC pages, prevent the body class `.woocommerce` from forcing
   strange styling on our header / footer assets. */
body.woocommerce .pmoja-header img,
body.woocommerce-page .pmoja-header img,
body.woocommerce .pmoja-footer img,
body.woocommerce-page .pmoja-footer img {
    max-width: none !important;
    height: auto;
}
body.woocommerce .pmoja-brand__logo,
body.woocommerce-page .pmoja-brand__logo {
    height: 36px !important;
    max-height: 36px !important;
    max-width: 160px !important;
}
@media (min-width: 900px) {
    body.woocommerce .pmoja-brand__logo,
    body.woocommerce-page .pmoja-brand__logo {
        height: 42px !important;
        max-height: 42px !important;
        max-width: 200px !important;
    }
}
body.woocommerce .pmoja-footer__logo,
body.woocommerce-page .pmoja-footer__logo {
    height: 56px !important;
    max-height: 56px !important;
    max-width: 200px !important;
}
@media (min-width: 900px) {
    body.woocommerce .pmoja-footer__logo,
    body.woocommerce-page .pmoja-footer__logo {
        height: 64px !important;
        max-height: 64px !important;
        max-width: 240px !important;
    }
}


/* =============================================================
 *  v3.4.0 — POST-LAUNCH FIXES (round 2)
 *  - Cart pill icon + label forced white on normal state
 *  - Custom shop archive layout support
 *  - Variety product navigator (4 case types)
 * ============================================================= */

/* --- CART PILL — icon + "Cart" label white on normal state.
       Astra's global link colour was cascading onto the pill's
       currentColor icon and the label text. Force paper colour
       with enough specificity (and cover the WooCommerce body
       classes) so it stays white everywhere. -------------------- */
.pmoja-header .pmoja-cart,
.pmoja-header .pmoja-cart:link,
.pmoja-header .pmoja-cart:visited,
body.woocommerce .pmoja-header .pmoja-cart,
body.woocommerce-page .pmoja-header .pmoja-cart {
    color: var(--pmoja-paper) !important;
}
.pmoja-header .pmoja-cart .pmoja-cart__icon,
.pmoja-header .pmoja-cart .pmoja-cart__icon svg,
.pmoja-header .pmoja-cart .pmoja-cart__label {
    color: var(--pmoja-paper) !important;
}
.pmoja-header .pmoja-cart .pmoja-cart__icon svg path,
.pmoja-header .pmoja-cart .pmoja-cart__icon svg circle {
    stroke: currentColor;
}
.pmoja-header .pmoja-cart .pmoja-cart__icon svg circle[fill] {
    fill: currentColor;
}
/* Count bubble keeps its accent colours (dark text on accent) */
.pmoja-header .pmoja-cart .pmoja-cart__count {
    color: var(--pmoja-ink) !important;
}
/* On hover the pill goes accent-deep; keep contents white */
.pmoja-header .pmoja-cart:hover,
.pmoja-header .pmoja-cart:hover .pmoja-cart__icon,
.pmoja-header .pmoja-cart:hover .pmoja-cart__icon svg,
.pmoja-header .pmoja-cart:hover .pmoja-cart__label {
    color: var(--pmoja-paper) !important;
}


/* =============================================================
 *  v3.9.0 — HEADER CONTRAST OVER DARK / VIDEO HERO (hardened)
 *  Keep the header pill an opaque cream bar at all times so the
 *  dark logo + nav stay readable over a dark/black video hero.
 *  Forced with !important + backdrop blur so no cache layer or
 *  later cascade can let the video bleed through and black-out
 *  the header.
 * ============================================================= */
.pmoja-header .pmoja-header__inner {
    background: var(--pmoja-paper, #FFFBF1) !important;
    -webkit-backdrop-filter: saturate(1.1) blur(6px);
            backdrop-filter: saturate(1.1) blur(6px);
    border: 1px solid var(--pmoja-line) !important;
    box-shadow: 0 10px 34px -18px rgba(31,26,18,.28) !important;
}
/* Brand text + nav links forced to dark ink (readable on cream). */
.pmoja-header .pmoja-brand__text,
.pmoja-header .pmoja-brand__pure,
.pmoja-header .pmoja-ja,
.pmoja-header .pmoja-nav__link,
.pmoja-header .pmoja-nav__link-text {
    color: var(--pmoja-ink, #1F1A12) !important;
}
/* The uploaded logo SVG is dark; never invert it in the header
   (only the footer inverts, for its dark background). */
.pmoja-header .pmoja-brand__logo {
    filter: none !important;
}


/* =============================================================
 *  ASTRA SCROLL-TO-TOP OVERRIDE (v3.10.1, reworked v3.12.1)
 *  Restyles Astra's back-to-top as a small ink pill with a cream
 *  arrow. IMPORTANT CONSTRAINT: Astra's JS shows/hides the button
 *  via INLINE style.display = 'block'/'none'. We must NOT set
 *  display on the root (inline always wins without !important, and
 *  !important would keep the button visible at the top of the
 *  page). So the icon is centred with absolute positioning instead
 *  of flex — layout that inline display:block cannot break.
 *  Covers both Astra markups: SVG (4.x) and the legacy icon font.
 * ============================================================= */
#ast-scroll-top {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 28px -14px rgba(31,26,18,.55) !important;
    right: 18px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    opacity: .95;
    transition: transform .35s var(--pmoja-ease), opacity .35s var(--pmoja-ease), box-shadow .35s var(--pmoja-ease);
}
/* v3.20.3 — on bundle product pages at mobile widths the back-to-top
   is HIDDEN entirely: the purchase bar owns the bottom edge, and the
   v3.20.2 "lift it above the bar" approach still crowded the button
   (confirmed by client screenshot). A scroll shortcut is expendable on
   a buy page; the add-to-basket button is not. */
@media (max-width: 760px) {
    body.pmb-bundle-product #ast-scroll-top {
        display: none !important;
    }
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
    transform: translateY(-3px);
    opacity: 1;
    box-shadow: 0 20px 36px -14px rgba(31,26,18,.6) !important;
}
/* Centre the icon absolutely — works whatever display value Astra's
 * inline style puts on the root. Covers svg direct child and Astra's
 * .ast-icon wrapper (which itself contains the svg). */
#ast-scroll-top > svg,
#ast-scroll-top .ast-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    line-height: 1 !important;
}
#ast-scroll-top .ast-icon svg {
    width: 15px !important;
    height: 15px !important;
    display: block;
}
#ast-scroll-top svg,
#ast-scroll-top svg path {
    fill: currentColor !important;
    color: inherit !important;
}
/* Legacy icon-font variant */
#ast-scroll-top .ast-icon-up-arrow:before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}
@media (max-width: 600px) {
    #ast-scroll-top {
        width: 40px !important;
        height: 40px !important;
        right: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #ast-scroll-top { transition: none; }
}


/* =============================================================
 *  WELCOME POPUP (v3.11.0)
 * ============================================================= */
.pmoja-popup-lock { overflow: hidden; }
.pmoja-popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* CRITICAL: .pmoja-popup's display:flex out-specifies the UA's
 * [hidden]{display:none} rule, so without this the closed popup is an
 * invisible full-viewport overlay that swallows every click on the
 * site. The [hidden] state must always win. */
.pmoja-popup[hidden] {
    display: none !important;
}
.pmoja-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(31,26,18,.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .35s var(--pmoja-ease);
}
.pmoja-popup__card {
    position: relative;
    width: min(440px, 100%);
    background: var(--pmoja-paper);
    border: 1px solid var(--pmoja-line);
    border-radius: 22px;
    padding: clamp(30px, 5vw, 44px) clamp(24px, 4vw, 38px);
    text-align: center;
    box-shadow: 0 40px 80px -30px rgba(31,26,18,.55);
    transform: translateY(24px) scale(.97);
    opacity: 0;
    transition: transform .45s var(--pmoja-ease), opacity .45s var(--pmoja-ease);
}
.pmoja-popup.is-open .pmoja-popup__overlay { opacity: 1; }
.pmoja-popup.is-open .pmoja-popup__card    { transform: none; opacity: 1; }
.pmoja-popup__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    /* v3.19.5 — neutralise theme/Woo button inheritance (padding +
       min-height stretch the circle into an oval; baseline layout
       drifts the × glyph). Flex-centre and pin the box. */
    padding: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pmoja-ink-mute);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s var(--pmoja-ease), color .25s var(--pmoja-ease);
}
.pmoja-popup__close:hover { background: var(--pmoja-paper-deep); color: var(--pmoja-ink); }
.pmoja-popup__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 999px;
    background: var(--pmoja-accent);
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}
.pmoja-popup__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: var(--pmoja-ink);
    margin: 0 0 10px;
}
.pmoja-popup__sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--pmoja-ink-soft);
    margin: 0 0 22px;
}
.pmoja-popup__form { display: grid; gap: 12px; }
.pmoja-popup__field input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--pmoja-line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--pmoja-ink);
    transition: border-color .25s var(--pmoja-ease);
}
.pmoja-popup__field input:focus {
    outline: none;
    border-color: var(--pmoja-accent);
}
.pmoja-popup__submit { width: 100%; justify-content: center; }
.pmoja-popup__submit.is-busy { opacity: .6; pointer-events: none; }
.pmoja-popup__error {
    color: #B02A2A;
    font-size: 13.5px;
    margin: 2px 0 0;
}
/* Honeypot: visually removed but still in the DOM for bots */
.pmoja-popup__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .pmoja-popup__overlay, .pmoja-popup__card { transition: none; }
}

/* v3.13.0 — cart pill hover: pin the background. Something outside
   this sheet (Astra/Woo dynamic CSS prints after us) was painting the
   pill white on hover, hiding the white icon + label. Same hardening
   pattern as the colour rules above. */
.pmoja-header .pmoja-cart,
body.woocommerce .pmoja-header .pmoja-cart,
body.woocommerce-page .pmoja-header .pmoja-cart {
    background: var(--pmoja-ink) !important;
}
.pmoja-header .pmoja-cart:hover,
.pmoja-header .pmoja-cart:focus,
body.woocommerce .pmoja-header .pmoja-cart:hover,
body.woocommerce-page .pmoja-header .pmoja-cart:hover {
    background: var(--pmoja-accent-deep, #8A3F08) !important;
}

/* v3.16.1 — italic accent for <span class="em"> inside ANY display
 * heading. The stylesheet previously styled .em per-section (hero,
 * pitch, apply, about…) and the Process chapter headings were never
 * given a rule, so their em spans rendered plain black. The generic
 * rule below matches the convention every scoped rule already uses,
 * and prevents the same gap in future sections. */
.pmoja-display .em,
.pmoja-proc-chapter h2 .em {
    font-style: italic;
    color: var(--pmoja-accent);
    transition: color 1s var(--pmoja-ease-soft);
}

/* =============================================================
 *  ACCOUNT ICON (header + drawer) — v3.19.0
 * ============================================================= */
.pmoja-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--pmoja-line);
    background: transparent;
    color: var(--pmoja-ink) !important;
    margin-right: 10px;
    transition: background .3s var(--pmoja-ease), color .3s var(--pmoja-ease), transform .3s var(--pmoja-ease);
}
.pmoja-account:hover,
.pmoja-account:focus-visible {
    background: var(--pmoja-ink) !important;
    color: var(--pmoja-paper) !important;
    transform: translateY(-1px);
}
.pmoja-account__icon { display: block; line-height: 0; }
.pmoja-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 4px;
    padding: 11px 20px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: inherit !important;
    font-size: 15px;
    text-decoration: none;
}

/* =============================================================
 *  COOKIE CONSENT BANNER — v3.19.0
 * ============================================================= */
.pmoja-cookies {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9998;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: pmojaCookiesIn .5s var(--pmoja-ease) both;
}
@keyframes pmojaCookiesIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pmoja-cookies.is-leaving { opacity: 0; transform: translateY(16px); transition: all .3s var(--pmoja-ease); }
.pmoja-cookies__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 720px;
    padding: 16px 20px;
    background: var(--pmoja-ink);
    color: var(--pmoja-paper);
    border-radius: 18px;
    box-shadow: 0 24px 48px -20px rgba(31,26,18,.6);
}
.pmoja-cookies__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,251,241,.9); }
.pmoja-cookies__text a { color: var(--pmoja-paper) !important; text-decoration: underline; }
.pmoja-cookies__actions { display: flex; gap: 8px; flex-shrink: 0; }
.pmoja-cookies__btn {
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .25s var(--pmoja-ease), background .25s var(--pmoja-ease);
}
.pmoja-cookies__btn--accept { background: var(--pmoja-paper); color: var(--pmoja-ink); border: 1px solid var(--pmoja-paper); }
.pmoja-cookies__btn--decline { background: transparent; color: var(--pmoja-paper); border: 1px solid rgba(255,251,241,.4); }
.pmoja-cookies__btn:hover { transform: translateY(-1px); }
@media (max-width: 620px) {
    .pmoja-cookies__inner { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
}