/* ==========================================================================
   Header / Nav / Burger / Button / CTA — matches demo style.css exactly
   ========================================================================== */

/* --- Wrapper --- */
.wrapper {
    margin: 0 auto;
    max-width: calc(100% - 4rem);
    width: 100%
}

@media(min-width:576px) {
    .wrapper {
        max-width: calc(100% - 4rem)
    }
}

/* --- Utility classes --- */
.fedro-sb {
    font-family: Fedro-Semibold
}

.montreal-m {
    font-family: PPNeueMontreal-Medium
}

.capi {
    text-transform: capitalize
}

.lower {
    text-transform: lowercase
}

.left {
    text-align: left
}

.right {
    text-align: right
}

.center {
    text-align: center
}

/* --- Color utilities --- */
.mood-milk {
    color: #fbf6ed !important
}

.bg-mood-milk {
    background-color: #fbf6ed !important
}

.fire-fruit {
    color: #fe431a !important
}

.bg-fire-fruit {
    background-color: #fe431a !important
}

.blood-orange {
    color: #9a1902 !important
}

.bg-blood-orange {
    background-color: #9a1902 !important
}

.wild-berries {
    color: #2f1948 !important
}

.bg-wild-berries {
    background-color: #2f1948 !important
}

/* --- Picture aspect ratio --- */
:root {
    --aspect: 56.25%
}

.ar,
.mw,
.mw-m {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%
}

.ar:before,
.mw-m:before,
.mw:before {
    content: "";
    display: block;
    padding-bottom: var(--aspect)
}

.mw canvas,
.mw iframe,
.mw img,
.mw picture,
.mw source,
.mw video,
.mw-m canvas,
.mw-m iframe,
.mw-m img,
.mw-m picture,
.mw-m source,
.mw-m video {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

/* --- Buttons (shared) --- */
.c-button,
.c-button__action,
.c-button__arrow,
.c-button__icon,
.c-button__icon--primary,
.c-button__icon--secondary,
.c-button__outline,
.c-button__outline--berries,
.c-button__solid,
.c-button__solid--berries,
.c-button__solid--black,
.c-button__solid--blood,
.c-button__solid--fire,
.c-button__solid--forest,
.c-button__solid--white {
    align-items: center;
    border-radius: 10rem;
    cursor: pointer;
    display: inline-flex;
    font-family: PPNeueMontreal-Bold;
    font-size: 1.4rem;
    gap: .6rem;
    isolation: isolate;
    letter-spacing: -.014rem;
    line-height: 1.58rem;
    position: relative;
    text-transform: uppercase
}

.c-button span,
.c-button svg,
.c-button__action span,
.c-button__action svg,
.c-button__arrow span,
.c-button__arrow svg,
.c-button__icon span,
.c-button__icon svg,
.c-button__icon--primary span,
.c-button__icon--primary svg,
.c-button__icon--secondary span,
.c-button__icon--secondary svg,
.c-button__outline span,
.c-button__outline svg,
.c-button__outline--berries span,
.c-button__outline--berries svg,
.c-button__solid span,
.c-button__solid svg,
.c-button__solid--berries span,
.c-button__solid--berries svg,
.c-button__solid--black span,
.c-button__solid--black svg,
.c-button__solid--blood span,
.c-button__solid--blood svg,
.c-button__solid--fire span,
.c-button__solid--fire svg,
.c-button__solid--forest span,
.c-button__solid--forest svg,
.c-button__solid--white span,
.c-button__solid--white svg {
    z-index: 2
}

.c-button svg,
.c-button__action svg,
.c-button__arrow svg,
.c-button__icon svg,
.c-button__icon--primary svg,
.c-button__icon--secondary svg,
.c-button__outline svg,
.c-button__outline--berries svg,
.c-button__solid svg,
.c-button__solid--berries svg,
.c-button__solid--black svg,
.c-button__solid--blood svg,
.c-button__solid--fire svg,
.c-button__solid--forest svg,
.c-button__solid--white svg {
    max-width: 2rem;
    width: 100%
}

.c-button__label {
    overflow: hidden;
    position: relative;
    white-space: nowrap
}

.c-button__label,
.c-button__label span {
    display: inline-block
}

.c-button__label__text {
    display: block;
    transition: .45s cubic-bezier(.645, .045, .355, 1)
}

.c-button__label__text:nth-of-type(2) {
    left: 0;
    position: absolute;
    top: 110%
}

@media(max-width:575.98px) {
    .c-button__label__text:nth-of-type(2) {
        display: none
    }
}

/* --- Button solid --- */
.c-button__solid,
.c-button__solid--berries,
.c-button__solid--black,
.c-button__solid--blood,
.c-button__solid--fire,
.c-button__solid--forest,
.c-button__solid--white {
    border: 2px solid transparent;
    justify-content: center;
    min-width: 9rem;
    padding: 1.3rem 1.67rem
}

.c-button__solid--berries:before,
.c-button__solid--black:before,
.c-button__solid--blood:before,
.c-button__solid--fire:before,
.c-button__solid--forest:before,
.c-button__solid--white:before,
.c-button__solid:before {
    background-color: #fff;
    border-radius: 10rem;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    inset: 0;
    transform: translate(-50%, -50%);
    transform: scale(0);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1)
}

.c-button__solid--berries:hover:before,
.c-button__solid--black:hover:before,
.c-button__solid--blood:hover:before,
.c-button__solid--fire:hover:before,
.c-button__solid--forest:hover:before,
.c-button__solid--white:hover:before,
.c-button__solid:hover:before {
    transform: scale(1)
}

.c-button__solid--fire {
    background: #fe431a;
    color: #fff
}

.c-button__solid--fire:hover {
    border-color: #fe431a;
    color: #fe431a
}

/* --- Button action (cart) --- */
.c-button__action {
    background-color: #fbf6ed;
    border: 1px solid #294A9F;
    border-radius: 7rem;
    color: #294A9F;
    font-size: 1.2rem;
    gap: .9rem;
    letter-spacing: -.024rem;
    line-height: 1.2rem;
    padding: .7rem 1.3rem
}

.c-button__action:hover {
    color: #fbf6ed
}

.c-button__action:hover .c-button__action-count {
    background: #fbf6ed;
    border-color: #294A9F;
    color: #294A9F
}

.c-button__action:hover:before {
    transform: scale(1)
}

.c-button__action:before {
    background-color: #294A9F;
    border-radius: 7rem;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    inset: -.2rem;
    transform: translate(-50%, -50%);
    transform: scale(0);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1)
}

.c-button__action svg {
    height: 1.6rem;
    width: 1.6rem
}

.c-button__action-count {
    align-items: center;
    background: #294A9F;
    border: 1px solid #fbf6ed;
    border-radius: 50%;
    color: #fbf6ed;
    display: inline-flex;
    font-size: .8rem;
    height: 1.2rem;
    justify-content: center;
    letter-spacing: -.0016rem;
    opacity: 0;
    position: absolute;
    right: .5rem;
    top: .4rem;
    transition: .4s cubic-bezier(.645, .045, .355, 1);
    width: 1.2rem;
    z-index: 3 !important
}

.c-button__action-count.active {
    opacity: 1
}

/* --- Burger --- */
.c-burger {
    align-items: center;
    background-color: #fbf6ed;
    border: 1px solid #2f1948;
    border-radius: 7rem;
    color: #2f1948;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.2rem;
    gap: .6rem;
    justify-content: space-between;
    letter-spacing: -.024rem;
    line-height: 1.2rem;
    padding: .7rem 1.3rem;
    position: relative
}

@media(min-width:576px) {
    .c-burger {
        display: none
    }
}

.c-burger__icon {
    position: relative;
    width: 1.4rem
}

.c-burger__line {
    background: currentColor;
    border-radius: 1rem;
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.4rem
}

.c-burger__line:first-of-type {
    top: calc(50% - .25rem)
}

.c-burger__line:last-of-type {
    top: calc(50% + .25rem)
}

/* --- CTA --- */
.c-cta,
.c-cta--primary,
.c-cta--secondary,
.c-cta--tertiary {
    --label-width: 12.3rem;
    --size: 5rem;
    --sweep: 50%;
    display: inline-flex;
    isolation: isolate;
    text-decoration: none
}

.c-cta__label {
    align-items: center;
    display: inline-flex;
    font-size: 1.4rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: -.056rem;
    line-height: 1.4rem;
    min-width: var(--label-width);
    z-index: 2
}

.c-cta__arrows,
.c-cta__label {
    border: 2px solid transparent;
    border-radius: 10rem;
    height: var(--size);
    transition: transform .4s cubic-bezier(.34, 1.6, .64, 1)
}

.c-cta__arrows {
    position: relative;
    width: var(--size)
}

.c-cta__arrows svg {
    height: 2rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    z-index: 2
}

.c-cta__arrows svg:first-child {
    transition: transform .3s cubic-bezier(.55, .055, .675, .19), opacity .3s cubic-bezier(.55, .055, .675, .19)
}

.c-cta__arrows svg:last-child {
    color: #fbf6ed;
    opacity: 0;
    transform: translate(calc(-50% - var(--sweep)), calc(-50% + var(--sweep)));
    transition: transform .4s cubic-bezier(.215, .61, .355, 1), opacity .4s cubic-bezier(.215, .61, .355, 1)
}

.c-cta__arrows:before {
    border-radius: 10rem;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    inset: -.2rem;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s cubic-bezier(.165, .84, .44, 1)
}

.c-cta--primary>* {
    border-color: #2f1948;
    color: #2f1948
}

.c-cta--primary>:before {
    background-color: #2f1948
}

.c-cta--secondary>* {
    border-color: #fe431a;
    color: #fe431a
}

.c-cta--secondary>:before {
    background-color: #fe431a
}

.c-cta--tertiary>* {
    border-color: #9a1902;
    color: #9a1902
}

.c-cta--tertiary>:before {
    background-color: #9a1902
}

.c-cta--primary:hover,
.c-cta--secondary:hover,
.c-cta--tertiary:hover,
.c-cta:hover {
    cursor: pointer
}

.c-cta--primary:hover .c-cta__label,
.c-cta--secondary:hover .c-cta__label,
.c-cta--tertiary:hover .c-cta__label,
.c-cta:hover .c-cta__label {
    transform: translateX(var(--size))
}

.c-cta--primary:hover .c-cta__arrows,
.c-cta--secondary:hover .c-cta__arrows,
.c-cta--tertiary:hover .c-cta__arrows,
.c-cta:hover .c-cta__arrows {
    transform: translateX(calc(var(--label-width)*-1))
}

.c-cta--primary:hover .c-cta__arrows svg:first-child,
.c-cta--secondary:hover .c-cta__arrows svg:first-child,
.c-cta--tertiary:hover .c-cta__arrows svg:first-child,
.c-cta:hover .c-cta__arrows svg:first-child {
    opacity: 0;
    transform: translate(calc(-50% + var(--sweep)), calc(-50% - var(--sweep)))
}

.c-cta--primary:hover .c-cta__arrows svg:last-child,
.c-cta--secondary:hover .c-cta__arrows svg:last-child,
.c-cta--tertiary:hover .c-cta__arrows svg:last-child,
.c-cta:hover .c-cta__arrows svg:last-child {
    opacity: 1;
    transform: translate(-50%, -50%)
}

.c-cta--primary:hover .c-cta__arrows:before,
.c-cta--secondary:hover .c-cta__arrows:before,
.c-cta--tertiary:hover .c-cta__arrows:before,
.c-cta:hover .c-cta__arrows:before {
    transform: scale(1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1)
}

/* --- Header --- */
.header {
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 100
}

/* Elementor Nav Bar widget — absolute, full-bleed.
   The widget wrapper collapses to zero height so the header floats over
   whatever follows it (hero). Menu left, logo centered, CTA right. */
.elementor-widget-joyrush-navbar {
    position: relative;
    z-index: 100
}

.header.el-navbar {
    color: #fbf6ed;
    left: 0;
    margin-inline-start: calc(50% - 50vw);
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 100
}

/* Nav text: white by default, blue on hover */
.header.el-navbar .header__nav__link {
    transition: color .4s ease
}

.header.el-navbar .header__nav__link:hover {
    color: #294a9f
}

/* Open states sit on the cream menu/dropdown bg — text goes blue */
.header.el-navbar.open .header__nav__li,
.header.el-navbar.open .c-burger {
    color: #294a9f
}

/* Mobile menu links are always on the cream panel — keep them blue */
.header.el-navbar .header__nav__mobile__inner {
    color: #294a9f
}

.header.el-navbar .wrapper {
    align-items: center;
    padding: 2rem
}

.header.el-navbar .header__logo {
    color: #fbf6ed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.8rem
}

/* logo turns blue on hover / while a dropdown is open */
.header.el-navbar .header__logo:hover,
.header.el-navbar.open .header__logo {
    color: #294a9f
}

.header.el-navbar .header__logo svg {
    display: block;
    height: auto;
    width: 100%
}

/* dropdown card image fills the product block, rounded like the blocks */
.header.el-navbar .header__nav__dropdown__product__img {
    border-radius: inherit;
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

/* hovering a sub-menu item fades the other items a little */
.header.el-navbar .header__nav__dropdown__list:hover .header__nav__dropdown__li {
    opacity: .45;
    transition: opacity .3s ease
}

.header.el-navbar .header__nav__dropdown__list:hover .header__nav__dropdown__li:hover {
    opacity: 1
}

/* Portaled header — header.js moves the widget's <header> to <body> while the
   mobile menu is open, so no Elementor container can clip or contain it. */
.header.el-navbar.is-portaled {
    height: 100dvh;
    inset: 0;
    margin-inline-start: 0;
    position: fixed;
    width: 100vw;
    z-index: 300
}

.header.el-navbar.is-portaled .header__nav {
    height: 100dvh;
    inset: 0;
    position: fixed;
    transform: none;
    width: 100vw;
    z-index: -1
}

/* keep the close button a little lower inside the open menu */
.header.el-navbar.is-portaled .wrapper {
    padding-top: 6.5rem
}

/* no logo inside the open mobile menu */
.header.el-navbar.is-portaled .header__logo {
    display: none
}

/* hide the 3D background logo while the menu is open */
html.nav-open .logo-stage--bg {
    display: none
}

/* lock page scroll while the mobile menu is open */
html.nav-open,
html.nav-open body {
    overflow: hidden
}

/* ---------- Widget nav responsive: hamburger from tablet down ---------- */
@media(max-width:1023.98px) {
    .header.el-navbar .header__nav__list,
    .header.el-navbar .header__nav__dropdowns {
        display: none
    }

    .header.el-navbar .c-burger {
        display: inline-flex;
        margin-left: -2rem
    }

    .header.el-navbar .header__nav {
        background-color: #fbf6ed;
        height: 0;
        left: 50%;
        overflow: hidden;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        transition: .4s ease;
        width: 100%;
        z-index: -1
    }

    /* open state fallback (JS portaled nav is the primary path) */
    .header.el-navbar.open {
        background-color: #fbf6ed;
        left: 0;
        margin-inline-start: 0;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 200
    }

    body.admin-bar .header.el-navbar.open {
        top: 0
    }

    .header.el-navbar .header__nav__mobile__inner {
        display: flex;
        flex-direction: column;
        max-height: 100dvh;
        min-height: 100dvh;
        overflow: hidden scroll;
        padding: 7.5rem 2.4rem 6rem;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .header.el-navbar .header__nav__mobile__inner::-webkit-scrollbar {
        display: none
    }

    /* top-level items and accordion heads — same size/font */
    .header.el-navbar .header__nav__mobile__primary > li > .header__nav__mobile__primary__link,
    .header.el-navbar .header__nav__mobile__accordion__head {
        font-size: 3.2rem;
        letter-spacing: -.128rem;
        line-height: 1.05
    }

    /* accordion body — sub links stacked; margin (not padding) on inner so the
       closed state collapses to 0 and nothing bleeds through */
    .header.el-navbar .header__nav__mobile__accordion__inner {
        display: flex;
        flex-direction: column;
        gap: 1.2rem
    }

    .header.el-navbar .header__nav__mobile__accordion__inner > :first-child {
        margin-top: 1.6rem
    }

    .header.el-navbar .header__nav__mobile__accordion__inner > :last-child {
        margin-bottom: 1.6rem
    }

    .header.el-navbar .header__nav__mobile__accordion__inner > .header__nav__mobile__primary__link {
        font-size: 2.2rem;
        letter-spacing: -.088rem;
        line-height: 1.1
    }
}

/* ---------- Tablet menu (576–1024px): centred column of left-aligned rows
   with › chevrons + row dividers, logo back on top, utility row with | separators. */
@media(min-width:576px) and (max-width:1023.98px) {
    .header.el-navbar .header__nav__mobile__inner {
        padding: 6rem 6rem 4rem
    }

    /* logo visible top-centre while the menu is open (like the reference) */
    .header.el-navbar.is-portaled .header__logo {
        display: block;
        top: 6.5rem;
        transform: translateX(-50%);
        width: 1.8rem
    }

    /* vertically centred column — auto margins collapse safely on overflow */
    .header.el-navbar .header__nav__mobile__primary {
        border-bottom: 0;
        gap: 0;
        margin-block: auto;
        margin-inline: auto;
        max-width: 62rem;
        padding: 0;
        text-align: left;
        width: 100%
    }

    .header.el-navbar .header__nav__mobile__primary > li {
        border-bottom: 1px solid rgba(41, 74, 159, .18);
        position: relative;
        width: 100%
    }

    .header.el-navbar .header__nav__mobile__primary > li > .header__nav__mobile__primary__link,
    .header.el-navbar .header__nav__mobile__accordion__head {
        align-items: center;
        display: flex;
        font-size: 4.4rem;
        justify-content: space-between;
        letter-spacing: -.18rem;
        line-height: 1.1;
        padding: 2.4rem 0;
        width: 100%
    }

    /* › chevron on plain rows (e.g. Order Now) */
    .header.el-navbar .header__nav__mobile__primary__li > a::after {
        border-bottom: .22rem solid currentColor;
        border-right: .22rem solid currentColor;
        content: "";
        height: 1.5rem;
        position: absolute;
        right: .4rem;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        width: 1.5rem
    }

    /* accordion + icon becomes a › chevron; flips to ⌄ when open */
    .header.el-navbar .header__nav__mobile__accordion__icon {
        height: 1.7rem;
        width: 1.7rem
    }

    .header.el-navbar .header__nav__mobile__accordion__icon:before {
        display: none
    }

    .header.el-navbar .header__nav__mobile__accordion__icon:after {
        background: transparent;
        border-bottom: .22rem solid currentColor;
        border-right: .22rem solid currentColor;
        height: 1.5rem;
        transform: rotate(-45deg);
        width: 1.5rem
    }

    .header.el-navbar .header__nav__mobile__accordion.is-open .header__nav__mobile__accordion__icon:after {
        transform: rotate(45deg)
    }

    /* opened sub-links stay left-aligned under the row */
    .header.el-navbar .header__nav__mobile__accordion__inner {
        align-items: flex-start
    }

    .header.el-navbar .header__nav__mobile__accordion__inner > .header__nav__mobile__primary__link {
        font-size: 2.4rem
    }

    /* utility links: centred row with | separators and a divider above */
    .header.el-navbar .header__nav__mobile__utility {
        border-top: 1px solid rgba(41, 74, 159, .18);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        justify-content: center;
        margin-top: 4rem;
        padding-top: 2.4rem
    }

    .header.el-navbar .header__nav__mobile__utility__li + .header__nav__mobile__utility__li {
        border-left: 1px solid rgba(41, 74, 159, .4);
        margin-left: 2.4rem;
        padding-left: 2.4rem
    }
}

.header.product {
    border-bottom: 1px solid #294A9F
}

.header.product .header__actions a,
.header.product .header__actions button {
    color: #2f1948 !important
}

.header.anim .header__logo svg {
    transition: .4s ease
}

@media(max-width:575.98px) {
    .header.open {
        position: fixed
    }
}

/* keep the fixed open header below the WP admin bar (mobile only —
   on non-fixed headers a `top` offset would shift the bar down) */
@media(max-width:575.98px) {
    body.admin-bar .header.open {
        top: 46px
    }
}

.header.open .wrapper {
    color: #294A9F !important
}

.header.open .wrapper:before {
    transform: translateX(-50%) translateY(0)
}

.header.open .header__logo {
    color: #fe431a
}

.header.open .header__actions a,
.header.open .header__actions button {
    background: #fbf6ed;
    color: #294A9F !important
}

@media(max-width:575.98px) {
    .header.open .header__nav {
        height: 96.6vh
    }
}

.header[data-template=index] .header__logo {
    width: calc(100vw - 4rem)
}

@media(max-width:575.98px) {
    .header[data-template=index] .header__logo {
        transform: translateY(7.1rem)
    }
}

.header:not([data-template=index]) .header__logo {
    transition: .4s ease
}

.header[data-color=light] .header__logo {
    color: #fbf6ed
}

.header[data-color=fire] .header__nav__li {
    color: #294A9F
}

.header[data-color=fire] .header__logo {
    color: #fe431a
}

.header .wrapper {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
    position: relative;
    z-index: 1
}

/* --- Header Logo --- */
.header__logo {
    color: #fbf6ed;
    left: 50%;
    position: absolute;
    top: 4.9rem;
    transform: translateX(-50%);
    z-index: 4;
    
    /* MOBILE SIZE: Adjust this value to resize logo on mobile */
    width: 6rem; 
}

/* Force the image inside the logo link to scale properly */
.header__logo img,
.header__logo svg {
    display: block;
    height: auto;
    width: 100%;
    max-width: 100%;
}

@media(min-width:576px) {
    .header__logo {
        top: 3.3rem;
        
        /* DESKTOP SIZE: Adjust this value to make it smaller or bigger */
        width: 3rem; /* (default was 14rem) */
    }
}

.header[data-color=light] .header__logo {
    color: #fbf6ed
}

.header[data-color=fire] .header__nav__li {
    color: #294A9F
}

.header[data-color=fire] .header__logo {
    color: #fe431a
}

@media(max-width:575.98px) {
    .header__nav {
        background-color: #fbf6ed;
        height: 0;
        left: 50%;
        overflow: hidden;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        transition: .4s ease;
        width: 100vw;
        z-index: -1
    }
}

@media(min-width:576px) {
    .header__nav {
        border-radius: 0 0 2rem 2rem;
        display: flex;
        height: 100%
    }
}

.header__nav__list {
    align-items: center;
    display: flex;
    gap: 2rem;
    position: relative;
    z-index: 1
}

@media(max-width:575.98px) {
    .header__nav__list {
        display: none
    }
}

.header__nav__link {
    color: currentColor;
    font-size: 1.4rem;
    gap: .3rem;
    letter-spacing: -.014rem;
    line-height: 1.58rem;
    transition: color .4s ease
}

.header__nav__link .c-button__label {
    overflow: visible
}

.header__nav__link.active svg {
    transform: scaleY(-1)
}

.header__nav__link svg {
    height: 1.4rem;
    max-width: unset;
    min-width: unset;
    transition: .4s ease;
    width: 1.4rem
}

.header__nav__dropdowns {
    color: #294A9F;
    flex-grow: 1;
    height: auto;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 100vw;
    will-change: height, transform
}

@media(max-width:575.98px) {
    .header__nav__dropdowns {
        display: none
    }
}

.header__nav__dropdowns__logo {
    color: #fe431a;
    display: block;
    left: 2rem;
    max-width: 11.7rem;
    position: absolute;
    top: 4.9rem;
    width: 100%;
    z-index: 1
}

@media(min-width:576px) {
    .header__nav__dropdowns__logo {
        top: 1.2rem
    }
}

.header__nav__dropdowns__holder {
    background: #fbf6ed;
    border-radius: 0 0 2rem 2rem;
    height: 100%;
    padding: 0 2rem;
    width: 100%
}

.header__nav__dropdown,
.header__nav__dropdown--learn,
.header__nav__dropdown--products {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: auto;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    transition: .4s ease;
    visibility: hidden;
    width: calc(100% - 4rem)
}

.header__nav__dropdown,
.header__nav__dropdown *,
.header__nav__dropdown--learn,
.header__nav__dropdown--learn *,
.header__nav__dropdown--products,
.header__nav__dropdown--products * {
    pointer-events: none
}

.active.header__nav__dropdown--learn,
.active.header__nav__dropdown--products,
.header__nav__dropdown.active {
    opacity: 1;
    visibility: visible
}

.active.header__nav__dropdown--learn,
.active.header__nav__dropdown--learn *,
.active.header__nav__dropdown--products,
.active.header__nav__dropdown--products *,
.header__nav__dropdown.active,
.header__nav__dropdown.active * {
    pointer-events: visible
}

.header__nav__dropdown--learn a,
.header__nav__dropdown--products a {
    font-size: 3rem;
    letter-spacing: -.12rem;
    line-height: 3rem
}

.header__nav__dropdown--learn a>span,
.header__nav__dropdown--products a>span {
    vertical-align: text-top
}

.header__nav__dropdown--products {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 2rem;
    padding-top: 15.6rem
}

.header__nav__dropdown--learn {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 1.6rem;
    padding-top: 15rem
}

.header__nav__dropdown__heading {
    font-size: 4rem;
    letter-spacing: -.16rem;
    line-height: 3.68rem
}

.header__nav__dropdown__collections {
    padding-bottom: 2.6rem;
    position: relative;
    width: 80%
}

.header__nav__dropdown__products {
    display: flex;
    gap: var(--dd-card-gap, 1rem);
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1);
    width: 100%;
    z-index: 1
}

.header__nav__dropdown__products.active {
    opacity: 1;
    z-index: 2
}

.header__nav__dropdown__products.anchor {
    position: relative
}

.header__nav__dropdown__product {
    align-items: center;
    display: flex;
    flex: 0 0 calc(20% - var(--dd-card-gap, 1rem) * .8);
    flex-direction: column;
    gap: 2rem
}

.header__nav__dropdown__product__title {
    font-size: 2.4rem;
    letter-spacing: -.096rem;
    line-height: 2.88rem;
    text-align: center;
    white-space: pre-line
}

.header__nav__dropdown__articles {
    display: flex;
    gap: 1.6rem;
    margin: 0;
    max-width: 69%;
    width: 100%
}

.header__nav__dropdown--learn .header__nav__dropdown__articles {
    justify-content: flex-end;
}

.header__nav__dropdown__article {
    isolation: isolate;
    max-width: calc(50% - .8rem);
    position: relative;
    width: 100%
}

.header__nav__dropdown__article:hover {
    cursor: pointer
}

.header__nav__dropdown__article:hover img {
    transform: scale(1.05)
}

.header__nav__dropdown__article__image {
    aspect-ratio: 471 / 377;
    background-color: #294a9f;
    height: auto;
    width: 100%;
    z-index: 1
}

.header__nav__dropdown__article__image,
.header__nav__dropdown__article__image picture {
    border-radius: 2rem
}

.header__nav__dropdown__article__image img {
    transition: transform .3s cubic-bezier(.215, .61, .355, 1)
}

.header__nav__dropdown__article__holder {
    display: flex;
    gap: 2.4rem;
    inset: 0;
    padding: 2.4rem;
    position: absolute;
    z-index: 2
}

.header__nav__dropdown__article__heading {
    font-size: 3rem;
    letter-spacing: -.12rem;
    line-height: 3rem;
    white-space: pre-wrap
}

.header__nav__dropdown__article__subhead {
    font-size: 1.4rem;
    letter-spacing: -.014rem;
    line-height: 1.72rem
}

.header__nav__dropdown__article--subscribe .header__nav__dropdown__article__holder {
    align-items: center;
    color: #fbf6ed;
    flex-direction: column;
    padding: 4rem;
    text-align: center
}

.header__nav__dropdown__article--article .header__nav__dropdown__article__holder {
    color: #fbf6ed;
    flex-direction: column-reverse;
    justify-content: space-between
}

.header__nav__dropdown__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0
}

.header__nav__dropdown__list:hover {
    color: #294A9F
}

.header__nav__dropdown__li {
    transition: all .4s ease
}

.header__nav__dropdown__li:hover {
    color: #294A9F
}

.header__nav__dropdown__li.align-end {
    color: #294A9F !important;
    margin-top: auto
}

.header__nav__dropdown__li.align-end .c-button__label {
    overflow: visible
}

.header__nav__dropdown__link {
    font-size: 2rem;
    letter-spacing: -.04rem;
    line-height: 1.8rem;
    overflow: hidden;
    position: relative
}

.header__nav__dropdown__link .c-button__label__text:nth-of-type(2) {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    vertical-align: middle
}

/* --- Mobile nav accordions --- */
.header__nav__mobile__accordions {
    border-bottom: 1px solid rgba(47, 25, 72, .2);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-bottom: 3rem
}

.header__nav__mobile__accordion__head {
    align-items: center;
    background: transparent;
    border: 0;
    color: currentColor;
    cursor: pointer;
    display: flex;
    font-size: 3.7rem;
    justify-content: space-between;
    letter-spacing: -.148rem;
    line-height: 3.47rem;
    width: 100%
}

.header__nav__mobile__accordion__title {
    align-items: center;
    display: inline-flex;
    gap: .8rem
}

.header__nav__mobile__accordion__title svg {
    color: #fe431a;
    height: 3rem;
    width: 3rem
}

.header__nav__mobile__accordion__icon {
    flex-shrink: 0;
    height: 1.4rem;
    position: relative;
    width: 1.4rem
}

.header__nav__mobile__accordion__icon:after,
.header__nav__mobile__accordion__icon:before {
    background: currentColor;
    content: "";
    height: .2rem;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s ease;
    width: 100%
}

.header__nav__mobile__accordion__icon:after {
    transform: translateY(-50%) rotate(90deg)
}

.header__nav__mobile__accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease
}

.header__nav__mobile__accordion__inner {
    min-height: 0;
    overflow: hidden
}

.header__nav__mobile__accordion.is-open .header__nav__mobile__accordion__panel {
    grid-template-rows: 1fr
}

.header__nav__mobile__accordion.is-open .header__nav__mobile__accordion__icon:after {
    transform: translateY(-50%) rotate(0)
}

.header__nav__mobile__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 2.4rem 0
}

.header__nav__mobile__item {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.header__nav__mobile__item__title {
    font-size: 2.4rem;
    letter-spacing: -.024rem;
    line-height: 2.28rem;
    white-space: pre-line
}

/* --- Mobile nav --- */
.header__nav__mobile {
    display: none
}

@media(max-width:575.98px) {
    .header__nav__mobile {
        display: block;
        height: 100%;
        width: 100%
    }
}

.header__nav__mobile__inner {
    display: none
}

@media(max-width:575.98px) {
    .header__nav__mobile__inner {
        display: flex;
        flex-direction: column;
        max-height: 96.6vh;
        min-height: 96.6vh;
        overflow: hidden scroll;
        padding: 12rem 2rem 8rem;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .header__nav__mobile__inner::-webkit-scrollbar {
        display: none
    }
}

.header__nav__mobile__primary {
    border-bottom: 1px solid rgba(47, 25, 72, .2);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 3rem 0 2.4rem
}

.header__nav__mobile__primary__link {
    color: currentColor;
    font-size: 2.8rem;
    letter-spacing: -.168rem;
    line-height: 2.968rem
}

.header__nav__mobile__utility {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding-top: 2.4rem
}

.header__nav__mobile__utility__link {
    color: currentColor;
    font-size: 1.4rem;
    letter-spacing: -.014rem;
    line-height: 1.72rem
}

.header__nav__mobile__shopall {
    bottom: 0;
    left: 50%;
    margin: 2rem 0;
    position: absolute;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    z-index: 5
}

.header__nav__mobile__shopall>* {
    border-radius: 10rem;
    display: flex;
    justify-content: center;
    width: 100%
}

@media(max-width:575.98px) {
    .header__actions>:first-child {
        display: none
    }
}

/* --- c-product --- */
.c-product {
    align-items: center;
    border-radius: 2.8rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    height: 37.1rem;
    isolation: isolate;
    justify-content: center;
    padding: 1rem 0;
    position: relative
}

@media(min-width:576px) {
    .c-product {
        height: 100%
    }
}

.c-product.p-menu,
.c-product__pattern {
    background-color: var(--p-bg-color)
}

.c-product__pattern {
    border-radius: inherit;
    inset: 0;
    object-fit: contain;
    object-position: center;
    position: absolute;
    z-index: 1
}

@media(min-width:576px) {
    .c-product__pattern {
        display: none
    }
}

.c-product__image {
    position: relative;
    transition: transform .4s ease;
    z-index: 2
}

.c-product__image:hover {
    cursor: pointer;
    transform: rotate(5.69deg) scale(1.05)
}

.c-product__image img {
    height: 100%;
    object-fit: contain;
    object-position: center center;
    width: 100%
}

.c-product__image--link {
    display: inline-block;
    max-width: 51%;
    overflow: visible;
    position: relative;
    width: 100%
}

.c-product.variety .c-product__image {
    transform: scale(1.2)
}

.c-product.variety .c-product__image img {
    object-position: center center
}

.c-product.variety .c-product__image:hover {
    cursor: pointer;
    transform: rotate(5.69deg) scale(1.3)
}

.header__nav__dropdown__product .c-product {
    background-color: #294a9f;
    height: 28.3rem;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    border: 0;
}

.header__nav__dropdown__product .c-product__pattern {
    display: none
}

.header__nav__dropdown__product .c-product__image--link {
    margin-bottom: 0;
    max-width: 100%
}