body.cs-experience.cs-christmas {
    --cs-cream: #fff7e7;
    --cs-gold: #f2cd83;
    --cs-soft: #b9ccbf;
    --cs-line: #58756480;
    --cs-panel: #142b22;
    --cs-raised: #1c392e;
    --cs-deep: #0b1d16;
    --cs-red: #a31936;
    --cs-red-hover: #bd2544;
    --cs-red-line: #d26d77;
    --outfit-ink: var(--cs-cream);
    --outfit-muted: var(--cs-soft);
    --outfit-paper: var(--cs-panel);
    --outfit-line: var(--cs-line);
    --outfit-blue: var(--cs-gold);
    background: radial-gradient(ellipse at 86% 6%, #254a35 0%, transparent 42rem),
                radial-gradient(ellipse at 5% 22%, #411c243d, transparent 30rem),
                var(--cs-deep);
    color: var(--cs-cream);
    color-scheme: dark;
}

.cs-christmas .cs-reading-progress { background: linear-gradient(90deg, var(--cs-red), var(--cs-gold)); }
.cs-christmas :is(.cs-topline, .cs-brand small, .cs-kicker, .cs-small-label) { color: var(--cs-gold); }
.cs-christmas :is(.cs-topline button, .cs-desktop-nav a, .cs-mobile-dock > a, .cs-mobile-dock > button) { color: var(--cs-soft); }
.cs-christmas :is(.cs-nav-frame, .cs-mobile-dock) { background: #142b22f2; border-color: var(--cs-line); }
.cs-christmas .cs-nav-frame::before {
    background: conic-gradient(from var(--cs-border-angle), transparent 18%, #b23e53a0 32%, #f2cd83 41%, transparent 50%, transparent 72%, #bc904b80 87%, transparent 96%);
}
.cs-christmas .cs-nav-frame::after {
    content: "";
    position: absolute;
    inset: auto 19px -6px;
    height: 12px;
    background-image: radial-gradient(6px 6px at 9px 5px, #ffe2a2 24%, #efba5a50 49%, transparent),
                      radial-gradient(6px 6px at 28px 7px, #ff8b96 24%, #ed4c6350 49%, transparent),
                      radial-gradient(6px 6px at 47px 5px, #a7ead1 24%, #66cfa150 49%, transparent);
    background-size: 57px 12px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.cs-christmas :is(.cs-desktop-nav a:hover, .cs-desktop-nav a[aria-current], .cs-mobile-dock [aria-current]) {
    background: #612238;
    color: var(--cs-cream);
    box-shadow: inset 0 0 0 1px #d26d775c;
}
.cs-christmas .cs-brand strong span { color: var(--cs-gold); }

.cs-christmas .cs-hero-copy h1 em { background-image: linear-gradient(#fff1bf, #e3ae53); }
.cs-christmas :is(.cs-hero-copy > p:not(.cs-kicker), .cs-hero-stats span, .cs-agent-card small,
                  .cs-section-heading > span, .cs-how-grid p, .cs-directory-links a, .cs-fit-banner p:not(.cs-kicker)) {
    color: var(--cs-soft);
}
.cs-christmas :is(.cs-hero-stats, .cs-how-grid article, .cs-directory-links) { border-color: var(--cs-line); }
.cs-christmas .cs-christmas-art {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid #efc98688;
    border-radius: 25px;
    background: var(--cs-panel);
    box-shadow: 0 22px 60px #06120ba6;
    overflow: hidden;
}
.cs-christmas-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-christmas-art::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid #fff3cc65;
    border-radius: 17px;
    pointer-events: none;
}
.cs-christmas :is(.cs-agent-card, .cs-poison-card, .cs-fit-banner) {
    background: linear-gradient(140deg, var(--cs-raised), var(--cs-panel));
    border-color: var(--cs-line);
    box-shadow: 0 6px 0 #07170f;
}
.cs-christmas .cs-poison-card:nth-child(2) { background: radial-gradient(ellipse at center, #73394366, var(--cs-panel) 75%); }
.cs-christmas :is(.cs-poison-card > span, .cs-how-grid b) { color: var(--cs-gold); }
.cs-christmas .cs-fit-banner { background: radial-gradient(ellipse at 85% 50%, #7d294159, transparent 65%), var(--cs-panel); }

.cs-christmas :is(.cs-home-search, .cs-menu-trigger, .cs-menu-links a, .cs-agent-switch a, .cs-menu-secondary a),
.cs-experience.cs-christmas :is(.search-line, .cs-budget-control, .cs-sort-control, .cs-small-button, .cs-catalog-browse .category-btn, .gender-btn) {
    background: var(--cs-panel);
    border-color: var(--cs-line);
    color: var(--cs-soft);
}
.cs-christmas .cs-agent-tabs a { color: var(--cs-soft); border-color: var(--cs-line); }
.cs-experience.cs-christmas .cs-catalog-browse .cs-category-more > summary {
    background: linear-gradient(110deg, #233d31, #3a3527);
    border-color: #bfa267a0;
    color: var(--cs-cream);
}
.cs-christmas .cs-category-more > summary > span > span { margin-inline-start: 5px; color: var(--cs-gold); }
.cs-experience.cs-christmas :is(.cs-agent-tabs a[aria-current], .cs-catalog-browse .category-btn.active, .gender-btn.active, .cs-preview-tabs [aria-selected="true"]) {
    background: #552338;
    color: var(--cs-cream);
    border-color: var(--cs-red-line);
    box-shadow: none;
}
.cs-experience.cs-christmas :is(.cs-home-search input, .search-line input[type="search"], .cs-inline-controls input[type="number"], .cs-inline-controls select) { color: var(--cs-cream); }
.cs-christmas input::placeholder { color: var(--cs-soft); opacity: 1; }
.cs-christmas .cs-inline-controls select option { background: var(--cs-panel); color: var(--cs-cream); }
.cs-christmas :is(.cs-inline-controls label > span, .cs-result-line, .cs-result-line > span, .cs-catalog-note) { color: var(--cs-soft); }
.cs-experience.cs-christmas :is(.cs-home-search button, .search-line button, .cs-primary-action, .catalog-buy-button, .catalog-qc-buy,
                                .outfit-product-copy > a:not(.listing-report-link), .outfits-coupon-banner > b),
.cs-christmas #external-product-continue {
    background: var(--cs-red);
    border-color: var(--cs-red-line);
    color: #fff7ed;
    box-shadow: none;
}
.cs-experience.cs-christmas :is(.cs-home-search button, .search-line button, .cs-primary-action, .catalog-buy-button, .catalog-qc-buy,
                                .outfit-product-copy > a:not(.listing-report-link)):hover,
.cs-christmas #external-product-continue:hover { background: var(--cs-red-hover); }
.cs-experience.cs-christmas .cs-catalog-browse .category-options { scrollbar-color: #bfa267 var(--cs-panel); }
@supports selector(::-webkit-scrollbar) {
    .cs-experience.cs-christmas .cs-catalog-browse .category-options { scrollbar-color: auto; }
    .cs-christmas .category-options::-webkit-scrollbar-track { background: var(--cs-panel); }
    .cs-christmas .category-options::-webkit-scrollbar-thumb { background: #bfa267; }
}

.cs-experience.cs-christmas :is(.catalog-product-card, .product-card, .outfit-card, .outfit-product-card, .outfit-modal,
                                .favorites-toolbar, .favorites-capture, .favorites-empty, .cs-list-card, .cs-empty,
                                .listing-notice, .legal-shell, .info-card, .faq-card, .content-shell, .seo-links,
                                .cs-sheet, .external-product-dialog, .catalog-qc-dialog, .catalog-qc-footer) {
    background: var(--cs-panel);
    border-color: var(--cs-line);
    color: var(--cs-cream);
}
.cs-christmas :is(.catalog-product-meta span, .catalog-qc-status, .catalog-qc-footer p, .legal-shell p, .legal-shell li,
                  .content-shell p, .info-card p, .faq-card p, .listing-notice, .listing-notice p),
.cs-christmas #external-product-copy p { color: var(--cs-soft); }
.cs-christmas :is(.catalog-product-meta strong, .sheet-card-title span, .catalog-qc-header span, .listing-notice a, .listing-report-link) { color: var(--cs-gold); }
.cs-christmas :is(.catalog-qc-button, .catalog-qc-close, .external-product-close, .external-product-back, .cs-preview-tabs button) {
    background: var(--cs-raised);
    border-color: var(--cs-line);
    color: var(--cs-cream);
}
.cs-christmas :is(.catalog-qc-header, .catalog-qc-footer) { border-color: var(--cs-line); }
.cs-christmas.cs-catalog-restored .catalog-product-media .favorite-toggle { background: #142b22ed; border-color: var(--cs-line); }
.cs-christmas.cs-catalog-restored .catalog-product-media .favorite-toggle[aria-pressed="true"] { background: var(--cs-red); }
.cs-christmas .catalog-sheet-preview { background: linear-gradient(145deg, #723044, var(--cs-raised)); }
.cs-christmas .sheet-preview-badge { background: var(--cs-gold); color: var(--cs-deep); }
.cs-christmas .outfits-intro { background: transparent; }
.cs-christmas .outfits-coupon-banner { background: linear-gradient(115deg, #522334, #322932 54%, var(--cs-panel)); border-color: var(--cs-line); }
.cs-christmas .outfit-card .outfit-card-copy > b { background: var(--cs-raised); color: var(--cs-gold); }
.cs-christmas .outfit-product-copy > .listing-report-link { background: transparent; color: var(--cs-gold); }
.cs-christmas .site-footer { background: #091710; border-color: var(--cs-line); color: var(--cs-soft); }
.cs-christmas .site-footer a { color: var(--cs-soft); }

.cs-christmas-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 175px;
    margin-bottom: 24px;
    padding: 22px 28px;
    overflow: hidden;
    border: 1px solid #a48650;
    border-radius: 18px;
    background: var(--cs-panel);
    color: var(--cs-cream);
}
.cs-christmas-banner img { position: absolute; inset: 0 0 0 auto; width: 70%; height: 100%; object-fit: cover; z-index: -2; }
.cs-christmas-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--cs-panel) 26%, #142b22df 44%, #142b2200 77%);
}
.cs-christmas .cs-christmas-banner p { margin: 7px 0 0; color: var(--cs-cream); font: 800 clamp(21px, 3vw, 36px)/1.12 var(--font-title); }
.cs-christmas-banner strong { color: var(--cs-gold); }
.cs-christmas.beacons-link-page .bio-page { --bio-text: var(--cs-cream); --bio-card: var(--cs-panel); --bio-border: var(--cs-line); background: transparent; }
.cs-christmas.beacons-link-page .bio-shell { background: transparent; }
.cs-christmas.beacons-link-page :is(.bio-feature-card, .bio-link-card) { background: var(--cs-panel); border: 1px solid var(--cs-line); }
.cs-christmas.beacons-link-page .bio-feature-brand { background: linear-gradient(145deg, #5c2438, var(--cs-red)); }
.cs-bio-effects {
    display: block;
    margin: 0 0 12px auto;
    padding: 6px 10px;
    border: 1px solid var(--cs-line);
    border-radius: 8px;
    background: var(--cs-panel);
    color: var(--cs-soft);
    font-size: 11px;
    cursor: pointer;
}

.cs-winter-sky,
.cs-snow {
    position: fixed;
    inset: 0;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
}
/* The sleigh and distant snow sit below main (z-index: 1). */
.cs-winter-sky { z-index: 0; background: radial-gradient(ellipse at 60% 0%, #64c6a018, transparent 60%); }
.cs-santa-flight {
    position: absolute;
    z-index: 1;
    top: clamp(100px, 32vh, 310px);
    left: 0;
    width: clamp(290px, 34vw, 600px);
    animation: cs-santa-crossing 26s linear -3s infinite;
}
.cs-catalog-restored .cs-santa-flight { top: min(460px, calc(100vh - 100px)); }
.cs-santa-flight img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 9px #efbc7070);
    animation: cs-santa-glide 4.6s ease-in-out infinite;
}
@keyframes cs-santa-crossing {
    from { transform: translate3d(calc(-100% - 2rem), 18px, 0); }
    68%, to { transform: translate3d(calc(100vw + 2rem), -28px, 0); }
}
@keyframes cs-santa-glide { 50% { transform: translateY(-10px) rotate(-1deg); } }

/* Staggered textures drift at different speeds without changing layout. */
.cs-snow { z-index: 8; }
.cs-winter-sky::before,
.cs-snow::before,
.cs-snow::after {
    content: "";
    position: absolute;
    inset: calc(0px - var(--snow-step)) -42px 0;
    background-size: var(--snow-width) var(--snow-step);
    animation: cs-snow-fall var(--snow-duration) linear var(--snow-delay) infinite;
}
.cs-winter-sky::before {
    --snow-width: 285px;
    --snow-step: 300px;
    --snow-drift: 12px;
    --snow-duration: 25s;
    --snow-delay: -8s;
    opacity: .52;
    background-image: radial-gradient(1.6px 1.6px at 8% 19%, #e2fff4 45%, transparent),
                      radial-gradient(1.2px 1.2px at 21% 67%, #e2fff4 40%, transparent),
                      radial-gradient(1.4px 1.4px at 35% 36%, #fff 40%, transparent),
                      radial-gradient(1px 1px at 48% 92%, #fff 40%, transparent),
                      radial-gradient(1.2px 1.2px at 64% 12%, #e2fff4 40%, transparent),
                      radial-gradient(1.6px 1.6px at 75% 58%, #fff 38%, transparent),
                      radial-gradient(1.2px 1.2px at 88% 84%, #fff 40%, transparent),
                      radial-gradient(1px 1px at 97% 30%, #e2fff4 40%, transparent);
}
.cs-snow::before {
    --snow-width: 355px;
    --snow-step: 370px;
    --snow-drift: 28px;
    --snow-duration: 15s;
    --snow-delay: -6s;
    opacity: .63;
    background-image: radial-gradient(2.4px 2.4px at 9% 29%, #fff 39%, transparent),
                      radial-gradient(1.9px 1.9px at 20% 79%, #e6fff5 40%, transparent),
                      radial-gradient(2.2px 2.2px at 37% 49%, #fff 43%, transparent),
                      radial-gradient(1.7px 1.7px at 56% 15%, #fff 38%, transparent),
                      radial-gradient(2.5px 2.5px at 68% 86%, #e6fff5 36%, transparent),
                      radial-gradient(2px 2px at 82% 57%, #fff 39%, transparent),
                      radial-gradient(2.4px 2.4px at 95% 22%, #fff 34%, transparent);
}
.cs-snow::after {
    --snow-width: 470px;
    --snow-step: 465px;
    --snow-drift: -38px;
    --snow-duration: 11s;
    --snow-delay: -4s;
    opacity: .64;
    background-image: radial-gradient(4px 4px at 12% 24%, #fff 28%, #fff8 61%, transparent),
                      radial-gradient(3px 3px at 31% 69%, #e9fff7 33%, transparent),
                      radial-gradient(3.6px 3.6px at 62% 17%, #fff 28%, #fff7 59%, transparent),
                      radial-gradient(3.2px 3.2px at 86% 77%, #fff 33%, transparent);
}
@keyframes cs-snow-fall {
    50% { transform: translate3d(var(--snow-drift), calc(var(--snow-step) / 2), 0); }
    to { transform: translate3d(0, var(--snow-step), 0); }
}
.cs-experience:is([data-effects-paused], [data-page-hidden]) :is(.cs-winter-sky, .cs-snow) { display: none; }
@media (prefers-reduced-motion: reduce) {
    :is(.cs-winter-sky, .cs-snow) { display: none; }
}
@media (max-width: 760px) {
    .cs-christmas .cs-home-hero { padding-top: 5px; }
    .cs-christmas .cs-christmas-art { order: -1; aspect-ratio: 16 / 9; margin: 0 0 24px; border-radius: 18px; }
    .cs-christmas-art img { object-position: center 55%; }
    .cs-santa-flight { width: min(70vw, 390px); }
}
@media (max-width: 650px) {
    .cs-catalog-restored .cs-santa-flight { top: min(540px, calc(100vh - 100px)); }
}
@media (max-width: 620px) {
    .cs-christmas-banner { min-height: 125px; padding: 16px 18px; }
    .cs-snow::after { opacity: .45; }
}
@media (max-width: 360px) {
    .cs-experience.cs-christmas .cs-catalog-heading h1 { font-size: 21px; }
    .cs-experience.cs-christmas .cs-catalog-heading .cs-text-action { font-size: 8px; }
}
