:root {
    --season-accent: #a4532c;
    --season-deep: #3c241b;
    --season-wash: #efe2d4;
    --season-paper: #f7f3ee;
    --season-leaf: #7f5837;
}

body[data-seasonal-theme="winter"] {
    --season-accent: #54707d;
    --season-deep: #263f4a;
    --season-wash: #e6edf1;
    --season-paper: #f5f8f9;
    --season-leaf: #7893a0;
}

body[data-seasonal-theme="spring"] {
    --season-accent: #7d8d50;
    --season-deep: #344028;
    --season-wash: #edf0df;
    --season-paper: #f8f8f1;
    --season-leaf: #a2ad72;
}

body[data-seasonal-theme="summer"] {
    --season-accent: #d0783d;
    --season-deep: #57331f;
    --season-wash: #f5e8c9;
    --season-paper: #fffaf0;
    --season-leaf: #daa45d;
}

.header-action em,
.menu-button em,
.menu-button b {
    font-style: normal;
}

.mobile-drawer__head,
.mobile-drawer__footer {
    display: none;
}

.delivery-status-rail,
.back-to-top {
    display: none;
}

.season-eyebrow,
.auth-card__eyebrow {
    display: block;
    color: var(--season-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
}

.hero-media > picture,
.hero-media > picture > img {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-media > picture > img {
    object-fit: cover;
    transform: translate3d(0, var(--hero-shift, 0), 0) scale(1.035);
    transition: transform .12s linear;
}

.motion-ready [data-motion-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.985);
    transition: opacity .72s cubic-bezier(.2,.72,.2,1), transform .82s cubic-bezier(.2,.72,.2,1);
    transition-delay: calc(var(--reveal-index, 0) * 55ms);
    will-change: opacity, transform;
}

.motion-ready [data-motion-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.editorial-category img {
    transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0) scale(1.04);
}

.editorial-category:hover img {
    transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0) scale(1.09);
}

.style-community__viewport:hover .style-community__track,
.style-community__viewport:focus-within .style-community__track {
    animation-play-state: paused;
}

.back-to-top:not([hidden]) {
    animation: ico-back-top-in .35s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes ico-back-top-in {
    from { opacity: 0; transform: translateY(12px) scale(.88); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-media > picture > img,
    .editorial-category img,
    .editorial-category:hover img { transform: none; }
    .motion-ready [data-motion-reveal] { opacity: 1; transform: none; }
}

@media (min-width: 1051px) {
    body {
        background: #fbfaf8;
    }

    .announcement {
        min-height: 34px;
        display: grid;
        place-items: center;
        color: var(--season-deep);
        background: var(--season-wash);
        border-bottom: 1px solid color-mix(in srgb, var(--season-accent) 18%, transparent);
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 70;
        height: 118px;
        grid-template-columns: 1fr auto 1fr;
        padding-inline: max(42px, calc((100vw - 1580px) / 2));
        background: rgba(251, 250, 248, .93);
        border-bottom: 0;
        backdrop-filter: blur(18px);
    }

    .site-header::after {
        content: "";
        position: absolute;
        inset-inline: max(42px, calc((100vw - 1580px) / 2));
        bottom: 0;
        height: 1px;
        background: rgba(37, 29, 24, .09);
    }

    .site-header .brand {
        grid-column: 2;
        justify-self: center;
    }

    .site-header .brand img {
        width: 170px;
        height: 58px;
        object-fit: contain;
    }

    .desktop-nav {
        display: none;
    }

    .header-actions {
        grid-column: 1;
        display: flex;
        justify-self: start;
        align-items: center;
        gap: 20px;
        direction: ltr;
    }

    .header-action {
        width: auto;
        height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #1e1b18;
    }

    .header-action svg {
        width: 23px;
        height: 23px;
    }

    .header-action em {
        color: #302a25;
        font-size: 12px;
        font-weight: 650;
    }

    .header-action:hover em {
        color: var(--season-accent);
    }

    .header-action.cart-link > span {
        top: 2px;
        left: 14px;
        background: var(--season-accent);
    }

    .menu-button {
        position: absolute;
        inset-inline-start: auto;
        inset-inline-end: max(42px, calc((100vw - 1580px) / 2));
        top: 50%;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: auto;
        height: 44px;
        border: 0;
        background: transparent;
        transform: translateY(-50%);
    }

    .menu-button em {
        font-size: 13px;
        font-weight: 750;
    }

    .menu-button b {
        color: var(--season-accent);
        font-size: 23px;
        font-weight: 400;
        line-height: 1;
        transition: transform .3s ease;
    }

    .menu-button:hover b,
    .menu-button[aria-expanded="true"] b {
        transform: rotate(45deg);
    }

    .menu-button > span {
        display: none;
    }

    .header-search {
        top: 118px;
        z-index: 72;
        padding: 22px max(8vw, calc((100vw - 1280px) / 2));
        border-block: 1px solid rgba(37, 29, 24, .1);
        background: rgba(251, 250, 248, .98);
    }

    .header-search input {
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid #81756d;
        background: transparent;
        font-size: 17px;
    }

    .mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 95;
        display: grid;
        grid-template-rows: auto 1fr auto;
        padding: 28px max(7vw, calc((100vw - 1380px) / 2)) 38px;
        overflow: auto;
        color: #f8f3ec;
        background:
            radial-gradient(circle at 14% 82%, color-mix(in srgb, var(--season-accent) 35%, transparent), transparent 28%),
            var(--season-deep);
    }

    .mobile-drawer[hidden] {
        display: none;
    }

    .mobile-drawer__head,
    .mobile-drawer__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        direction: ltr;
    }

    .mobile-drawer__head {
        padding-bottom: 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .mobile-drawer__head span {
        color: rgba(255, 255, 255, .68);
        font-size: 12px;
        letter-spacing: .19em;
    }

    .mobile-drawer__head button {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 50%;
        color: #fff;
        background: transparent;
        font-size: 30px;
        line-height: 1;
    }

    .mobile-drawer nav {
        align-self: center;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10vw;
        padding-block: 35px;
    }

    .mobile-drawer nav a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 68px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
        color: #f8f3ec;
        font-size: clamp(20px, 2.2vw, 34px);
        font-weight: 550;
        transition: color .2s, padding .2s;
    }

    .mobile-drawer nav a::after {
        content: "←";
        margin-inline-start: auto;
        color: var(--season-leaf);
        font-size: 20px;
        opacity: 0;
        transform: translateX(8px);
        transition: opacity .2s, transform .2s;
    }

    .mobile-drawer nav a:hover,
    .mobile-drawer nav a[aria-current="page"] {
        padding-inline-start: 10px;
        color: var(--season-wash);
    }

    .mobile-drawer nav a:hover::after,
    .mobile-drawer nav a[aria-current="page"]::after {
        opacity: 1;
        transform: none;
    }

    .mobile-drawer__footer {
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, .16);
        color: rgba(255, 255, 255, .68);
        font-size: 13px;
    }

    .mobile-drawer__footer a {
        color: inherit;
    }

    body.menu-open {
        overflow: hidden;
    }

    .hero.container-wide {
        width: min(1580px, calc(100% - 56px));
        height: min(700px, calc(100vh - 185px));
        min-height: 570px;
        margin-top: 26px;
        grid-template-columns: 1.08fr .92fr;
        border-radius: 30px;
        color: #fff;
        background: var(--season-deep);
        overflow: hidden;
    }

    .hero-media {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .hero-media::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg, transparent 58%, color-mix(in srgb, var(--season-deep) 72%, transparent));
        pointer-events: none;
    }

    .hero-media > picture > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .12s linear;
    }

    .hero:hover .hero-media > picture > img {
        transform: translate3d(0, var(--hero-shift, 0), 0) scale(1.055);
    }

    .hero-copy {
        position: relative;
        z-index: 2;
        padding: 72px 6vw 65px 4.5vw;
        background:
            linear-gradient(145deg, transparent 55%, color-mix(in srgb, var(--season-accent) 28%, transparent)),
            var(--season-deep);
    }

    .hero-copy::after {
        content: "✦";
        position: absolute;
        inset-inline-end: 7%;
        bottom: 8%;
        color: color-mix(in srgb, var(--season-wash) 24%, transparent);
        font-size: 110px;
        line-height: 1;
    }

    .hero-copy h1 {
        max-width: 560px;
        margin: 14px 0 18px;
        color: #fff;
        font-size: clamp(46px, 5vw, 82px);
        line-height: 1.18;
        letter-spacing: -.055em;
    }

    .hero-copy p {
        max-width: 460px;
        margin-bottom: 35px;
        color: rgba(255, 255, 255, .72);
        font-size: 16px;
        line-height: 2;
    }

    .hero-copy .button.primary {
        position: relative;
        z-index: 2;
        color: var(--season-deep);
        background: var(--season-wash);
        border-color: var(--season-wash);
    }

    .season-eyebrow {
        color: var(--season-leaf);
    }

    .categories-section {
        display: none;
    }

    .editorial-categories {
        width: min(1580px, calc(100% - 56px));
        padding-block: 85px 45px;
    }

    .editorial-categories__head,
    .style-community > header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
        margin-bottom: 28px;
    }

    .editorial-categories__head span,
    .style-community > header span {
        color: var(--season-accent);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .17em;
    }

    .editorial-categories__head h2,
    .style-community > header h2 {
        margin: 5px 0 0;
        font-size: clamp(30px, 3.4vw, 52px);
        letter-spacing: -.04em;
    }

    .editorial-categories__head > a {
        display: flex;
        align-items: center;
        gap: 22px;
        padding-bottom: 7px;
        border-bottom: 1px solid #28231f;
        font-size: 13px;
    }

    .editorial-categories__grid {
        display: grid;
        grid-template-columns: 1fr .72fr 1.35fr;
        grid-template-rows: repeat(6, 96px);
        gap: 18px;
    }

    .editorial-category {
        position: relative;
        display: block;
        min-height: 0;
        overflow: hidden;
        border-radius: 24px;
        background: var(--season-wash);
    }

    .editorial-category--1 {
        grid-column: 1;
        grid-row: 1 / 7;
    }

    .editorial-category--2 {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .editorial-category--3 {
        grid-column: 2;
        grid-row: 3 / 5;
    }

    .editorial-category--4 {
        grid-column: 2;
        grid-row: 5 / 7;
    }

    .editorial-category--5 {
        grid-column: 3;
        grid-row: 1 / 7;
    }

    .editorial-category picture,
    .editorial-category img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .editorial-category img {
        object-fit: cover;
        transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .4s;
    }

    .editorial-category::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(22, 16, 12, .72), transparent 52%);
        pointer-events: none;
    }

    .editorial-category > span {
        position: absolute;
        z-index: 2;
        inset-inline: 25px;
        bottom: 24px;
        display: grid;
        grid-template-columns: 1fr auto;
        color: #fff;
    }

    .editorial-category > span strong {
        font-size: clamp(18px, 2vw, 30px);
    }

    .editorial-category > span small {
        grid-column: 1;
        color: rgba(255, 255, 255, .7);
        font-size: 12px;
        direction: ltr;
        text-align: right;
    }

    .editorial-category > span b {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: 50%;
        font-size: 18px;
        transition: color .25s, background .25s, transform .25s;
    }

    .editorial-category--2 > span,
    .editorial-category--3 > span,
    .editorial-category--4 > span {
        inset-inline: 17px;
        bottom: 14px;
    }

    .editorial-category--2 > span strong,
    .editorial-category--3 > span strong,
    .editorial-category--4 > span strong {
        font-size: 17px;
    }

    .editorial-category--2 > span b,
    .editorial-category--3 > span b,
    .editorial-category--4 > span b {
        width: 34px;
        height: 34px;
    }

    .editorial-category:hover img {
        transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0) scale(1.09);
        filter: saturate(1.08);
    }

    .editorial-category:hover > span b {
        color: var(--season-deep);
        background: #fff;
        transform: rotate(45deg);
    }

    .style-community {
        padding-block: 95px 100px;
        overflow: hidden;
        background: var(--season-paper);
    }

    .style-community > header p {
        max-width: 430px;
        margin: 0;
        color: #756b64;
        font-size: 13px;
        line-height: 1.9;
    }

    .style-community__viewport {
        display: flex;
        gap: 16px;
        width: max-content;
        direction: ltr;
        animation: ico-community-scroll 48s linear infinite;
    }

    .style-community__viewport:hover,
    .style-community__viewport:focus-within {
        animation-play-state: paused;
    }

    .style-community__track {
        display: flex;
        flex: 0 0 auto;
        gap: 16px;
        padding-inline-start: 16px;
    }

    .style-community__track a {
        position: relative;
        display: block;
        flex: 0 0 clamp(210px, 16vw, 310px);
        width: clamp(210px, 16vw, 310px);
        height: clamp(320px, 28vw, 500px);
        overflow: hidden;
        border-radius: 26px;
        background: #ddd4ca;
    }

    .style-community__track a:nth-child(3n + 2) {
        margin-top: 45px;
    }

    .style-community__track a:nth-child(4n) {
        height: clamp(280px, 24vw, 440px);
    }

    .style-community__track img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

    .style-community__track a > span {
        position: absolute;
        inset: auto 12px 12px;
        padding: 9px 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        color: #fff;
        background: rgba(25, 20, 17, .52);
        backdrop-filter: blur(12px);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .style-community__track a:hover img {
        transform: scale(1.04);
    }

    @keyframes ico-community-scroll {
        to { transform: translateX(calc(-50% - 8px)); }
    }

    .site-footer {
        padding: 78px max(6vw, calc((100vw - 1480px) / 2)) 35px;
        grid-template-columns: 1.4fr repeat(3, .75fr);
        gap: 5vw;
        border-radius: 0;
        color: #efe8df;
        background:
            radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--season-accent) 30%, transparent), transparent 30%),
            var(--season-deep);
    }

    .site-footer h2 {
        color: #fff;
        font-size: 14px;
    }

    .site-footer a,
    .site-footer span,
    .footer-brand p {
        color: rgba(255, 255, 255, .68);
    }

    .site-footer a:hover {
        color: #fff;
    }

    .footer-brand img {
        width: 190px;
        height: 64px;
        padding: 8px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .9);
    }

    .footer-brand p {
        max-width: 400px;
        font-size: 14px;
        line-height: 2;
    }

    .footer-socials a {
        border-color: rgba(255, 255, 255, .25);
        color: #fff;
    }

    .site-footer .trust img {
        height: 85px;
    }

    .copyright {
        margin-top: 24px;
        padding-top: 28px;
        border-color: rgba(255, 255, 255, .14);
    }

    .copyright a {
        color: var(--season-wash);
    }

    .delivery-status-rail {
        position: fixed;
        z-index: 58;
        right: 50%;
        bottom: 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: min(620px, calc(100vw - 190px));
        min-height: 48px;
        padding: 8px 12px 8px 20px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 999px;
        color: #fff;
        background: rgba(38, 29, 24, .9);
        box-shadow: 0 18px 45px rgba(32, 24, 18, .2);
        backdrop-filter: blur(15px);
        transform: translateX(50%);
    }

    .delivery-status-rail > span {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--season-deep);
        background: var(--season-wash);
    }

    .delivery-status-rail strong {
        flex: 1;
        font-size: 12px;
        text-align: center;
    }

    .delivery-status-rail em {
        padding: 7px 12px;
        border-radius: 999px;
        color: var(--season-deep);
        background: #fff;
        font-size: 12px;
        font-style: normal;
        font-weight: 800;
    }

    .back-to-top {
        position: fixed;
        z-index: 59;
        inset-inline-start: 24px;
        bottom: 18px;
        width: 50px;
        height: 50px;
        border: 1px solid rgba(38, 29, 24, .14);
        border-radius: 50%;
        color: var(--season-deep);
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 15px 35px rgba(32, 24, 18, .13);
        font-size: 21px;
        backdrop-filter: blur(12px);
    }

    .back-to-top:not([hidden]) {
        display: grid;
        place-items: center;
    }

    .auth-editorial {
        min-height: calc(100vh - 152px);
        display: grid;
        grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.05fr);
        gap: 0;
        padding: 0;
        background: var(--season-paper);
    }

    .auth-editorial__visual {
        position: relative;
        min-height: 760px;
        overflow: hidden;
    }

    .auth-editorial__visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(36, 24, 17, .78), transparent 56%);
    }

    .auth-editorial__visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .auth-editorial__visual > div {
        position: absolute;
        z-index: 1;
        inset: auto 7% 7%;
        display: grid;
        gap: 9px;
        color: #fff;
    }

    .auth-editorial__visual span {
        color: var(--season-wash);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .16em;
    }

    .auth-editorial__visual strong {
        max-width: 570px;
        font-size: clamp(30px, 3.2vw, 52px);
        line-height: 1.45;
    }

    .auth-editorial .auth-card {
        align-self: center;
        justify-self: center;
        width: min(520px, calc(100% - 80px));
        padding: 54px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .auth-editorial .auth-card h1 {
        margin: 8px 0 10px;
        font-size: 42px;
        letter-spacing: -.04em;
    }

    .auth-editorial .auth-card > p {
        line-height: 1.9;
    }

    .auth-editorial .auth-card input {
        min-height: 50px;
        border: 0;
        border-bottom: 1px solid #afa49b;
        border-radius: 0;
        background: transparent;
    }

    .auth-editorial .auth-card input:focus {
        border-color: var(--season-accent);
        box-shadow: none;
        outline: 0;
    }

    .auth-editorial .auth-card .button.primary {
        border-color: var(--season-deep);
        background: var(--season-deep);
    }

    .account-page > aside {
        position: sticky;
        top: 145px;
        border: 0;
        border-radius: 0;
        color: #fff;
        background: var(--season-deep);
    }

    .account-page > aside p,
    .account-page > aside a {
        color: rgba(255, 255, 255, .74);
    }

    .account-page > aside a:hover,
    .account-page > aside a[aria-current="page"] {
        color: #fff;
    }
}

@media (max-width: 1050px) {
    .header-action em,
    .menu-button em,
    .menu-button b,
    .editorial-categories,
    .style-community,
    .auth-editorial__visual {
        display: none;
    }

    .auth-editorial {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .style-community__viewport {
        width: 100%;
        overflow-x: auto;
        animation: none;
    }

    .style-community__track[aria-hidden="true"] {
        display: none;
    }
}