:root[data-theme="winter"] {
  --theme-site-rgb: 250 252 252;
  --theme-page-rgb: 250 252 252;
  --theme-surface-rgb: 255 255 253;
  --theme-surface-elevated-rgb: 255 255 255;
  --theme-surface-secondary-rgb: 242 247 246;
  --theme-text-rgb: 0 0 0;
  --theme-text-secondary-rgb: 62 86 76;
  --theme-muted-rgb: 84 104 94;
  --theme-accent-rgb: 164 32 42;
  --theme-accent-hover-rgb: 133 24 33;
  --theme-accent-strong-rgb: 105 20 28;
  --theme-border-rgb: 222 231 229;
  --theme-border-strong-rgb: 187 155 104;
  --theme-header-rgb: 20 62 49;
  --theme-footer-rgb: 234 241 238;
  --surface-muted: #ecf3f2;
  --surface-hover: #eef5f4;
  --surface-active: #faece9;
  --accent-soft: #f5e2e2;
  --accent-border: #a66b70;
  --divider: #e2e8e6;
  --shadow-sm: 0 7px 22px rgba(28, 52, 46, 0.06);
  --shadow-md: 0 14px 34px rgba(24, 52, 44, 0.09);
  --shadow-lg: 0 22px 50px rgba(20, 49, 42, 0.14);
  --shadow-overlay: 0 28px 72px rgba(11, 41, 32, 0.3);
  --focus-ring: rgba(133, 24, 33, 0.94);
  --focus-halo: rgba(246, 220, 219, 0.9);
  --overlay: rgba(13, 43, 32, 0.5);
  --success: #2d6b48;
  --success-soft: #e1f1e6;
  --warning: #7c5b18;
  --warning-soft: #fff0ca;
  --error: #9c303b;
  --error-soft: #f9e4e6;
  --info: #356b68;
  --info-soft: #e2f0ed;
  --disabled-bg: #ced9d0;
  --disabled-text: #697b70;
  --header-bg-strong: #082f25;
  --header-text: #fff9e9;
  --header-border: rgba(225, 184, 104, 0.52);
  --footer-text: #294a3a;
  --footer-muted: #5a7164;
  --footer-border: #d6e0d7;
  --control-border-hover: #8da192;
  --badge-bg: #eef3ec;
  --badge-text: #425f50;
  --scrollbar-thumb: #8ca593;
  --decor-color-1: rgba(202, 224, 226, 0.42);
  --decor-color-2: rgba(193, 219, 213, 0.22);
  --decor-color-3: rgba(255, 255, 255, 0.85);
  --decor-opacity: 0.72;
  --page-gradient: radial-gradient(ellipse 96% 480px at 50% -9%, rgb(200 225 227 / 0.6), transparent 72%), radial-gradient(ellipse 58% 320px at 50% -2%, rgb(20 82 62 / 0.11), transparent 70%), radial-gradient(circle at 2% 70%, rgb(210 231 229 / 0.22), transparent 30%), radial-gradient(circle at 98% 64%, rgb(202 224 226 / 0.2), transparent 30%), linear-gradient(180deg, #fbfdfd 0%, #f5faf9 54%, #edf5f3 100%);
  --header-gradient: linear-gradient(176deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 34%), linear-gradient(108deg, #072d23 0%, #0c3c2e 21%, #16543f 42%, #1c6650 52%, #16543f 62%, #0c3c2e 80%, #072d23 100%);
  --accent-highlight-gradient: linear-gradient(90deg, #f4e5e5, #e7f1ef);
  --interactive-border-hover: #86a79b;
  --shadow-popover: 0 20px 46px rgba(20, 54, 43, 0.16);
  --winter-shell-width: min(calc(100% - clamp(48px, 10vw, 180px)), 1650px);
}

:root[data-theme="winter"] [data-site-header] {
  background: transparent;
  box-shadow: 0 5px 22px rgba(17, 48, 37, 0.09);
}

:root[data-theme="winter"] [data-top-header-stack] {
  background-color: #072d23;
  background-image:
    linear-gradient(90deg, rgb(8 44 33 / 0) 0%, rgb(8 44 33 / 0.32) 11%, rgb(10 50 38 / 0.86) 32%, rgb(11 53 40 / 0.92) 50%, rgb(10 50 38 / 0.86) 68%, rgb(8 44 33 / 0.32) 89%, rgb(8 44 33 / 0) 100%),
    url("/themes/winter/winter-header-v2.avif");
  background-repeat: no-repeat;
  background-position: center, center 72%;
  background-size: 100% 100%, 100% auto;
}

:root[data-theme="winter"] [data-top-promo-bar] {
  border-bottom: 1px solid rgba(226, 188, 109, 0.58);
  background: transparent;
  box-shadow: inset 0 -1px 0 rgba(255, 248, 222, 0.1), 0 4px 14px rgba(8, 38, 29, 0.18);
}

:root[data-theme="winter"] [data-top-promo-bar] > div:first-child[aria-hidden="true"] {
  background-image: none;
}

:root[data-theme="winter"] [data-top-promo-bar] > div[aria-hidden="true"]:not(:first-child) {
  opacity: 0;
}

:root[data-theme="winter"] :is([data-desktop-utility-bar], [data-mobile-utility-bar], [data-primary-header]) {
  border-bottom: 1px solid rgb(var(--theme-border-strong-rgb) / 0.28);
}

/* No backdrop-filter on the desktop crown: it sits over the fixed snow layer,
   so the browser re-blurred the full-width band on every particle frame and
   during the scroll collapse. The bands are opaque enough to not need it. */
:root[data-theme="winter"] [data-mobile-utility-bar] {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

:root[data-theme="winter"] [data-desktop-utility-bar] {
  --header-text: #fff9e9;
  border-bottom-color: rgba(225, 184, 104, 0.44);
  background: linear-gradient(180deg, rgb(6 39 30 / 0.16) 0%, rgb(7 44 34 / 0.38) 100%);
  color: var(--header-text);
  box-shadow: inset 0 1px 0 rgba(255, 252, 233, 0.1);
}

:root[data-theme="winter"] [data-mobile-utility-bar] {
  --header-text: #17372b;
  background: linear-gradient(90deg, rgb(255 254 250 / 0.62) 0%, rgb(255 254 250 / 0.86) 20% 80%, rgb(255 254 250 / 0.62) 100%);
  color: rgb(var(--theme-text-rgb));
}

:root[data-theme="winter"] [data-primary-header] {
  background-color: rgb(var(--theme-surface-rgb) / 0.94);
  background-image:
    linear-gradient(90deg, rgb(253 255 255 / 0.5) 0%, rgb(255 255 255 / 0.9) 12%, rgb(255 255 255 / 0.96) 22% 78%, rgb(255 255 255 / 0.9) 88%, rgb(253 255 255 / 0.5) 100%),
    url("/themes/winter/fir-top-left.avif"),
    url("/themes/winter/fir-top-right.avif");
  background-repeat: no-repeat;
  background-position: center, left -88px top -130px, right -88px top -130px;
  background-size: 100% 100%, clamp(250px, 23vw, 380px) auto, clamp(250px, 23vw, 380px) auto;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.7), 0 1px 0 rgb(var(--theme-border-strong-rgb) / 0.22);
}

:root[data-theme="winter"] .ui-card {
  border-color: rgb(var(--theme-border-rgb) / 0.95);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98) 0%, rgb(250 253 253 / 0.97) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 12px 30px rgba(22, 52, 44, 0.08);
}

:root[data-theme="winter"] :is(.ui-primary-button, .ui-ghost-button) {
  border-radius: 9999px;
  transition-duration: 200ms;
}

:root[data-theme="winter"] [data-header-search] {
  border-color: rgb(var(--theme-border-strong-rgb) / 0.62);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.98);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 7px 20px rgba(24, 48, 40, 0.07);
}

:root[data-theme="winter"] [data-header-search-submit] {
  background: rgb(var(--theme-accent-rgb));
  color: #fff;
}

:root[data-theme="winter"] [data-header-search-submit]:hover {
  background: rgb(var(--theme-accent-hover-rgb));
}

:root[data-theme="winter"] [data-header-search-suggestions] {
  border-radius: 0.75rem;
}

.winter-decor__glow {
  background: radial-gradient(ellipse 92% 500px at 50% -6%, rgba(196, 223, 226, 0.6), transparent 70%), radial-gradient(ellipse 54% 320px at 50% 0%, rgba(21, 84, 63, 0.13), transparent 68%), radial-gradient(circle at 0% 74%, rgba(206, 228, 226, 0.16), transparent 28%), radial-gradient(circle at 100% 70%, rgba(200, 224, 226, 0.16), transparent 29%), linear-gradient(180deg, #fbfdfd 0%, #f5faf9 58%, #edf5f3 100%);
}

.winter-decor__sky {
  height: clamp(250px, 23vw, 360px);
  background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.96) 0 3px, transparent 5px), radial-gradient(circle at 72% 31%, rgba(255, 255, 255, 0.9) 0 2px, transparent 4px), radial-gradient(ellipse 72% 80% at 50% 0%, rgba(205, 229, 231, 0.7), transparent 74%), linear-gradient(105deg, rgba(240, 248, 249, 0.96) 0%, rgba(219, 236, 238, 0.9) 36%, rgba(228, 240, 238, 0.82) 68%, rgba(244, 250, 250, 0.94) 100%);
  background-size: 138px 118px, 174px 151px, 100% 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(#000 0 68%, transparent 100%);
  mask-image: linear-gradient(#000 0 68%, transparent 100%);
}

.winter-decor__frost {
  height: clamp(90px, 13vw, 190px);
  background: radial-gradient(ellipse 22% 62% at 7% 100%, rgba(255, 255, 255, 0.96), transparent 74%), radial-gradient(ellipse 24% 60% at 93% 100%, rgba(255, 255, 255, 0.95), transparent 74%), linear-gradient(0deg, rgba(244, 250, 249, 0.94), transparent 78%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 46%, #000 100%);
  mask-image: linear-gradient(transparent 0%, #000 46%, #000 100%);
}

.winter-decor__item {
  filter: saturate(0.9) contrast(1.02) brightness(1.04) drop-shadow(0 6px 18px rgba(28, 58, 48, 0.1));
  image-rendering: auto;
}

[data-winter-decor-item="top-left"] {
  top: clamp(30px, 3vw, 48px);
  left: clamp(-126px, -6.2vw, -78px);
  width: clamp(280px, 25vw, 405px);
  opacity: 0.82;
  z-index: 200 !important;
}

[data-winter-decor-item="top-right"] {
  top: clamp(30px, 3vw, 48px);
  right: clamp(-126px, -6.2vw, -78px);
  width: clamp(275px, 24vw, 395px);
  opacity: 0.8;
  z-index: 200 !important;
}

[data-winter-decor-item="bottom-left"] {
  bottom: clamp(-64px, -3vw, -30px);
  left: clamp(-96px, -4.5vw, -54px);
  width: clamp(285px, 27vw, 440px);
  opacity: 0.94;
}

[data-winter-decor-item="bottom-right"] {
  right: clamp(-96px, -4.5vw, -54px);
  bottom: clamp(-64px, -3vw, -30px);
  display: none;
  width: clamp(280px, 26vw, 430px);
  opacity: 0.94;
}

@media (min-width: 640px) {
  [data-winter-decor-item="bottom-right"] {
    display: block;
  }
}

:root[data-theme="winter"] [data-home-shell],
:root[data-theme="winter"] :is(
  [data-top-promo-content],
  [data-desktop-utility-bar] > div,
  [data-mobile-utility-bar] > div,
  [data-primary-header] > div:first-child,
  [data-desktop-catalog-nav]
) {
  width: var(--winter-shell-width);
  max-width: 1650px;
}

:root[data-theme="winter"] [data-home-hero] {
  isolation: isolate;
  border: 1px solid rgb(var(--theme-border-strong-rgb) / 0.42);
  border-radius: 1.125rem;
  box-shadow: 0 16px 38px rgba(21, 50, 38, 0.1), 0 2px 7px rgba(133, 24, 33, 0.05);
}

:root[data-theme="winter"] [data-home-hero]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("/themes/winter/fir-top-left.avif"), url("/themes/winter/fir-top-right.avif");
  background-repeat: no-repeat;
  background-position: left -56px top -72px, right -56px top -72px;
  background-size: clamp(150px, 16vw, 235px) auto, clamp(150px, 16vw, 235px) auto;
  opacity: 0.32;
  filter: saturate(0.84) brightness(1.1);
  pointer-events: none;
}

:root[data-theme="winter"] [data-testid="product-card"] {
  border-color: rgb(var(--theme-border-rgb) / 0.95);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98) 0%, rgb(250 253 253 / 0.97) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 12px 30px rgba(22, 52, 44, 0.08);
}

:root[data-theme="winter"] [data-testid^="home-feed-"] > div:first-child h2 {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding-bottom: 0.35rem;
  color: #000000;
}

/* `ui.sectionTitle` is also used by the brand strip and other home sections,
   which are rendered over the side firs on mobile. */
:root[data-theme="winter"] .text-site-heading {
  color: #000000;
}

/* Only frost a legibility plate behind headings where the fixed side firs sit
   under content (small viewports); desktop keeps the type clean on the page. */
@media (max-width: 860px) {
  :root[data-theme="winter"] :is(
    [data-testid^="home-feed-"] > div:first-child h2,
    .text-site-heading
  ) {
    padding: 0.15rem 0.4rem;
    border-radius: 0.3rem;
    background: rgb(250 253 253 / 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

:root[data-theme="winter"] [data-testid^="home-feed-"] > div:first-child h2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #b9853e 0%, #dcb972 55%, rgba(220, 185, 114, 0) 100%);
}

:root[data-theme="winter"] [data-desktop-catalog-nav] :is(a[href="/new"], a[href="/sales"], a[href="/clearance"]) {
  border-color: rgb(var(--theme-border-strong-rgb) / 0.72);
  background: rgb(255 254 250 / 0.86);
}

@media (min-width: 861px) {
  :root[data-theme="winter"] [data-top-header-stack]:not([aria-hidden="true"]) {
    height: 68px;
  }

  :root[data-theme="winter"] [data-top-promo-bar] {
    height: 34px;
  }

  :root[data-theme="winter"] [data-desktop-utility-bar] {
    height: 34px;
  }

  :root[data-theme="winter"] [data-top-promo-content] {
    visibility: hidden;
    opacity: 0;
  }

  :root[data-theme="winter"] [data-primary-header-row] {
    height: 80px;
    gap: 1rem;
  }

  :root[data-theme="winter"] [data-brand-logo] {
    font-size: 30px;
    letter-spacing: 0.065em;
  }

  :root[data-theme="winter"] [data-desktop-catalog-nav] {
    height: 54px;
  }

  :root[data-theme="winter"] [data-desktop-category-links] {
    gap: 0;
  }

  :root[data-theme="winter"] [data-desktop-catalog-nav] [data-menu-key]:not([data-menu-key="nails"]),
  :root[data-theme="winter"] :is(
    #desktop-mega-menu-hair,
    #desktop-mega-menu-brows-lashes,
    #desktop-mega-menu-waxing,
    #desktop-mega-menu-cosmetics
  ) {
    display: none;
  }

  :root[data-theme="winter"] [data-desktop-catalog-nav] [data-menu-key="nails"] {
    height: 44px;
    font-size: 14px;
  }

  :root[data-theme="winter"] [data-desktop-promo-links] {
    display: flex;
    gap: 0.625rem;
  }

  :root[data-theme="winter"] [data-desktop-promo-links] > a {
    height: 40px;
    min-width: 112px;
    padding-inline: 0.875rem;
    font-size: 14px;
  }

  :root[data-theme="winter"] [data-desktop-user-actions] {
    gap: 1rem;
  }
}

@media (max-width: 620px) {
  :root[data-theme="winter"] {
    --winter-shell-width: min(calc(100% - 24px), 560px);
    --decor-opacity: 0.54;
  }

  [data-winter-decor-item="top-left"] {
    top: 76px;
    left: -72px;
    width: 190px;
    opacity: 0.84;
  }

  [data-winter-decor-item="top-right"] {
    top: 76px;
    right: -72px;
    width: 185px;
    opacity: 0.84;
  }

  [data-winter-decor-item="bottom-left"] {
    bottom: -38px;
    left: -45px;
    width: 245px;
    opacity: 0.86;
  }

  :root[data-theme="winter"] [data-home-hero] {
    border-radius: 0.75rem;
  }

  :root[data-theme="winter"] [data-home-hero]::before {
    background-position: left -44px top -52px, right -44px top -52px;
    background-size: 128px auto, 128px auto;
    opacity: 0.22;
  }

  :root[data-theme="winter"] [data-primary-header] {
    background-position: center, left -62px top -82px, right -62px top -82px, 0 0, 34px 16px;
    background-size: 100% 100%, 170px auto, 170px auto, 92px 92px, 124px 124px;
  }
}

:root[data-theme="spring"] {
  --theme-site-rgb: 255 253 248;
  --theme-page-rgb: 255 253 248;
  --theme-surface-rgb: 255 255 252;
  --theme-surface-elevated-rgb: 255 255 255;
  --theme-surface-secondary-rgb: 244 248 238;
  --theme-text-rgb: 39 55 38;
  --theme-text-secondary-rgb: 73 94 68;
  --theme-muted-rgb: 85 105 80;
  --theme-accent-rgb: 67 105 57;
  --theme-accent-hover-rgb: 54 88 47;
  --theme-accent-strong-rgb: 42 72 38;
  --theme-border-rgb: 220 231 209;
  --theme-border-strong-rgb: 130 157 111;
  --theme-header-rgb: 255 254 249;
  --theme-footer-rgb: 240 245 233;
  --surface-muted: #f7f3ed;
  --surface-hover: #f4f8ef;
  --surface-active: #e7f0e0;
  --accent-soft: #eaf3e5;
  --accent-border: #829d6f;
  --divider: #e5ecdc;
  --shadow-sm: 0 8px 28px rgba(55, 88, 48, 0.05);
  --shadow-md: 0 10px 30px rgba(55, 88, 48, 0.075);
  --shadow-lg: 0 14px 38px rgba(55, 88, 48, 0.11);
  --shadow-overlay: 0 28px 72px rgba(29, 53, 26, 0.22);
  --focus-ring: rgba(54, 88, 47, 0.94);
  --focus-halo: rgba(220, 235, 207, 0.9);
  --overlay: rgba(29, 50, 27, 0.45);
  --success: #376d42;
  --success-soft: #e2f1e3;
  --warning: #8a601d;
  --warning-soft: #fff0cd;
  --error: #914456;
  --error-soft: #fbe7eb;
  --info: #3d6c7c;
  --info-soft: #e3f0f2;
  --disabled-bg: #d2dec8;
  --disabled-text: #667460;
  --header-bg-strong: #355d30;
  --header-text: #2b4826;
  --header-border: rgba(67, 105, 57, 0.12);
  --footer-text: #30462e;
  --footer-muted: #566b52;
  --footer-border: #d9e4d0;
  --control-border-hover: #829d6f;
  --badge-bg: #edf3e8;
  --badge-text: #496044;
  --scrollbar-thumb: #a7bd94;
  --decor-color-1: rgba(198, 219, 157, 0.34);
  --decor-color-2: rgba(246, 197, 209, 0.25);
  --decor-color-3: rgba(249, 231, 177, 0.28);
  --decor-opacity: 0.74;
  --page-gradient: radial-gradient(ellipse 78% 330px at 50% -4%, rgb(205 224 164 / 0.46), transparent 72%), radial-gradient(circle at 0% 34%, rgb(246 197 209 / 0.13), transparent 26%), radial-gradient(circle at 100% 76%, rgb(191 211 155 / 0.1), transparent 28%), linear-gradient(180deg, #fffdf4 0%, #fffdfa 58%, #faf8ef 100%);
  --header-gradient: linear-gradient(105deg, #fff9ec 0%, #dfeac2 32%, #edf2d8 68%, #fff8e9 100%);
  --accent-highlight-gradient: linear-gradient(90deg, #eaf3e5, #fde9ec);
  --interactive-border-hover: #829d6f;
  --shadow-popover: 0 20px 44px rgba(55, 88, 48, 0.11);
  --spring-shell-width: min(calc(100% - clamp(64px, 11.1vw, 160px)), 1510px);
}

:root[data-theme="spring"] [data-site-header] {
  background: transparent;
  box-shadow: 0 2px 14px rgba(55, 88, 48, 0.04);
}

:root[data-theme="spring"] [data-top-promo-bar] {
  border-bottom: 1px solid rgb(var(--theme-accent-rgb) / 0.1);
  background: transparent;
}

:root[data-theme="spring"] :is([data-desktop-utility-bar], [data-mobile-utility-bar], [data-primary-header]) {
  border-bottom: 1px solid rgb(var(--theme-accent-rgb) / 0.1);
  background: linear-gradient(90deg, rgb(var(--theme-surface-rgb) / 0.08) 0%, rgb(var(--theme-surface-rgb) / 0.78) 9%, rgb(var(--theme-surface-rgb) / 0.95) 22%, rgb(var(--theme-surface-rgb) / 0.95) 78%, rgb(var(--theme-surface-rgb) / 0.78) 91%, rgb(var(--theme-surface-rgb) / 0.08) 100%);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

:root[data-theme="spring"] .ui-card {
  border-color: rgb(var(--theme-accent-strong-rgb) / 0.1);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.92);
}

:root[data-theme="spring"] :is(.ui-primary-button, .ui-ghost-button) {
  border-radius: 9999px;
  transition-duration: 200ms;
}

:root[data-theme="spring"] .ui-card-hover {
  transition-duration: 300ms;
}

:root[data-theme="spring"] .ui-ghost-button {
  border-color: rgb(var(--theme-accent-rgb) / 0.34);
  background: rgb(var(--theme-surface-rgb) / 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

:root[data-theme="spring"] [data-header-search] {
  border-color: rgb(var(--theme-accent-strong-rgb) / 0.12);
  border-radius: 0.75rem;
  background: rgb(255 253 246 / 0.92);
}

:root[data-theme="spring"] [data-header-search-submit] {
  background: rgb(var(--theme-accent-rgb));
  color: #fff;
}

:root[data-theme="spring"] [data-header-search-submit]:hover {
  background: rgb(var(--theme-accent-hover-rgb));
}

:root[data-theme="spring"] [data-header-search-suggestions] {
  border-radius: 0.75rem;
}

.spring-decor__glow {
  background: radial-gradient(ellipse 78% 360px at 50% -5%, rgba(205, 224, 164, 0.5), transparent 72%), radial-gradient(circle at 0% 28%, rgba(246, 197, 209, 0.14), transparent 27%), radial-gradient(circle at 100% 74%, rgba(191, 211, 155, 0.11), transparent 29%), linear-gradient(180deg, #fffdf4 0%, #fffdfa 58%, #faf8ef 100%);
}

.spring-decor__sky {
  background: linear-gradient(105deg, rgba(255, 250, 236, 0.96) 0%, rgba(222, 235, 194, 0.9) 30%, rgba(239, 243, 217, 0.84) 66%, rgba(255, 248, 234, 0.94) 100%);
  -webkit-mask-image: linear-gradient(#000 0 64%, transparent 100%);
  mask-image: linear-gradient(#000 0 64%, transparent 100%);
}

:root[data-theme="spring"] [data-home-shell],
:root[data-theme="spring"] :is(
  [data-top-promo-content],
  [data-desktop-utility-bar] > div,
  [data-mobile-utility-bar] > div,
  [data-primary-header] > div:first-child,
  [data-desktop-catalog-nav]
) {
  width: var(--spring-shell-width);
  max-width: 1510px;
}

:root[data-theme="spring"] [data-home-hero] {
  border-radius: 1rem;
  box-shadow: 0 10px 32px rgba(55, 88, 48, 0.07);
}

@media (max-width: 620px) {
  :root[data-theme="spring"] {
    --spring-shell-width: min(calc(100% - 24px), 560px);
    --decor-opacity: 0.58;
  }

  :root[data-theme="spring"] [data-home-hero] {
    border-radius: 0.625rem;
  }
}

:root[data-theme="summer"] {
  --theme-site-rgb: 255 253 247;
  --theme-page-rgb: 255 253 247;
  --theme-surface-rgb: 255 255 252;
  --theme-surface-elevated-rgb: 255 255 255;
  --theme-surface-secondary-rgb: 247 250 242;
  --theme-text-rgb: 31 70 49;
  --theme-text-secondary-rgb: 65 99 76;
  --theme-muted-rgb: 84 112 94;
  --theme-accent-rgb: 49 95 67;
  --theme-accent-hover-rgb: 39 78 54;
  --theme-accent-strong-rgb: 33 72 50;
  --theme-border-rgb: 220 232 216;
  --theme-border-strong-rgb: 142 170 140;
  --theme-header-rgb: 255 255 252;
  --theme-footer-rgb: 247 250 242;
  --surface-muted: #f4f7f0;
  --surface-hover: #f3f8ef;
  --surface-active: #eef6e9;
  --accent-soft: #e4efe3;
  --accent-border: #8eaa8c;
  --divider: #e2eadc;
  --shadow-sm: 0 8px 30px rgba(36, 78, 53, 0.06);
  --shadow-md: 0 10px 28px rgba(36, 78, 53, 0.08);
  --shadow-lg: 0 12px 35px rgba(36, 78, 53, 0.1);
  --shadow-overlay: 0 28px 72px rgba(24, 57, 38, 0.24);
  --focus-ring: rgba(49, 95, 67, 0.94);
  --focus-halo: rgba(220, 239, 221, 0.9);
  --overlay: rgba(24, 57, 38, 0.46);
  --success: #2d6942;
  --success-soft: #e1f2e4;
  --warning: #7b5a12;
  --warning-soft: #fff0cb;
  --error: #96404b;
  --error-soft: #fde9eb;
  --info: #27677a;
  --info-soft: #e2f4f6;
  --disabled-bg: #cfddca;
  --disabled-text: #6a7c6f;
  --header-bg-strong: #234d36;
  --header-text: #1f4631;
  --header-border: rgba(49, 95, 67, 0.12);
  --footer-text: #294d38;
  --footer-muted: #54705e;
  --footer-border: #dce8d8;
  --control-border-hover: #779b7b;
  --badge-bg: #edf4e9;
  --badge-text: #46634e;
  --scrollbar-thumb: #98b497;
  --decor-color-1: rgba(154, 223, 231, 0.22);
  --decor-color-2: rgba(120, 153, 79, 0.14);
  --decor-color-3: rgba(246, 217, 137, 0.16);
  --decor-opacity: 0.62;
  --page-gradient: radial-gradient(ellipse 80% 420px at 58% 0%, rgb(77 188 220 / 0.18), transparent 72%), radial-gradient(circle at 0% 61%, rgb(244 218 145 / 0.16), transparent 31%), radial-gradient(circle at 100% 68%, rgb(129 171 91 / 0.11), transparent 28%), linear-gradient(180deg, #fffdf2 0%, #fffdf7 54%, #fff9ed 100%);
  --header-gradient: linear-gradient(105deg, rgb(255 253 238 / 0.34) 0%, rgb(189 231 229 / 0.78) 28%, rgb(74 181 220 / 0.92) 64%, rgb(140 211 226 / 0.76) 90%, rgb(255 253 238 / 0.3) 100%);
  --accent-highlight-gradient: linear-gradient(90deg, #e4efe3, #f8f4df);
  --interactive-border-hover: #779b7b;
  --shadow-popover: 0 20px 44px rgba(36, 78, 53, 0.12);
  --summer-shell-width: min(calc(100% - clamp(64px, 11.1vw, 160px)), 1510px);
}

:root[data-theme="summer"] [data-site-header] {
  background: transparent;
  box-shadow: 0 2px 14px rgba(36, 78, 53, 0.045);
}

:root[data-theme="summer"] [data-top-promo-bar] {
  border-bottom: 1px solid rgb(var(--theme-accent-rgb) / 0.1);
  background: transparent;
}

:root[data-theme="summer"] :is([data-desktop-utility-bar], [data-mobile-utility-bar], [data-primary-header]) {
  border-bottom: 1px solid rgb(var(--theme-accent-rgb) / 0.1);
  background: linear-gradient(90deg, rgb(var(--theme-surface-rgb) / 0.2) 0%, rgb(var(--theme-surface-rgb) / 0.84) 8%, rgb(var(--theme-surface-rgb) / 0.94) 22%, rgb(var(--theme-surface-rgb) / 0.94) 78%, rgb(var(--theme-surface-rgb) / 0.84) 92%, rgb(var(--theme-surface-rgb) / 0.2) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

:root[data-theme="summer"] .ui-card {
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.9);
}

:root[data-theme="summer"] :is(.ui-primary-button, .ui-ghost-button) {
  border-radius: 9999px;
  transition-duration: 200ms;
}

:root[data-theme="summer"] .ui-card-hover {
  transition-duration: 300ms;
}

:root[data-theme="summer"] .ui-ghost-button {
  border-color: rgb(var(--theme-accent-rgb) / 0.3);
  background: rgb(var(--theme-surface-rgb) / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

:root[data-theme="summer"] [data-header-search] {
  border-radius: 0.75rem;
  background: rgb(255 253 244 / 0.9);
}

:root[data-theme="summer"] [data-header-search-submit] {
  background: rgb(var(--theme-accent-rgb));
  color: #fff;
}

:root[data-theme="summer"] [data-header-search-submit]:hover {
  background: rgb(var(--theme-accent-hover-rgb));
}

:root[data-theme="summer"] [data-header-search-suggestions] {
  border-radius: 0.75rem;
}

.summer-decor__glow {
  background: radial-gradient(circle at 55% -5%, rgba(83, 199, 225, 0.2), transparent 36%), radial-gradient(circle at 0% 72%, rgba(244, 218, 145, 0.14), transparent 31%), radial-gradient(circle at 100% 76%, rgba(129, 171, 91, 0.1), transparent 28%);
}

.summer-decor__sky {
  background: linear-gradient(105deg, rgba(255, 253, 238, 0.94) 0%, rgba(189, 231, 229, 0.86) 30%, rgba(74, 181, 220, 0.92) 66%, rgba(140, 211, 226, 0.82) 100%);
  -webkit-mask-image: linear-gradient(#000 0 68%, transparent 100%);
  mask-image: linear-gradient(#000 0 68%, transparent 100%);
}

:root[data-theme="summer"] [data-home-shell],
:root[data-theme="summer"] :is(
  [data-top-promo-content],
  [data-desktop-utility-bar] > div,
  [data-mobile-utility-bar] > div,
  [data-primary-header] > div:first-child,
  [data-desktop-catalog-nav]
) {
  width: var(--summer-shell-width);
  max-width: 1510px;
}

:root[data-theme="summer"] [data-home-hero] {
  border-radius: 1rem;
  box-shadow: 0 10px 32px rgba(36, 78, 53, 0.08);
}

@media (max-width: 620px) {
  :root[data-theme="summer"] {
    --summer-shell-width: min(calc(100% - 24px), 560px);
  }

  :root[data-theme="summer"] [data-home-hero] {
    border-radius: 0.625rem;
  }
}

:root[data-theme="autumn"] {
  --theme-site-rgb: 255 249 239;
  --theme-page-rgb: 255 249 239;
  --theme-surface-rgb: 255 253 248;
  --theme-surface-elevated-rgb: 255 255 255;
  --theme-surface-secondary-rgb: 253 244 229;
  --theme-text-rgb: 82 52 31;
  --theme-text-secondary-rgb: 112 78 50;
  --theme-muted-rgb: 135 98 66;
  --theme-accent-rgb: 172 91 28;
  --theme-accent-hover-rgb: 150 80 28;
  --theme-accent-strong-rgb: 106 64 37;
  --theme-border-rgb: 236 216 184;
  --theme-border-strong-rgb: 185 120 56;
  --theme-header-rgb: 255 253 248;
  --theme-footer-rgb: 249 236 215;
  --surface-muted: #faf0df;
  --surface-hover: #fff7eb;
  --surface-active: #fff4e3;
  --accent-soft: #fff6ea;
  --accent-border: #b97838;
  --divider: #efe0c7;
  --shadow-sm: 0 8px 30px rgba(119, 72, 25, 0.055);
  --shadow-md: 0 10px 30px rgba(119, 72, 25, 0.075);
  --shadow-lg: 0 12px 35px rgba(119, 72, 25, 0.1);
  --shadow-overlay: 0 28px 72px rgba(72, 43, 20, 0.24);
  --focus-ring: rgba(172, 91, 28, 0.94);
  --focus-halo: rgba(250, 222, 179, 0.86);
  --overlay: rgba(72, 43, 20, 0.46);
  --success: #4d6f38;
  --success-soft: #e8efd9;
  --warning: #8c5910;
  --warning-soft: #f8e6c2;
  --error: #8d3740;
  --error-soft: #f5dfe1;
  --info: #4f6875;
  --info-soft: #e2eaeb;
  --disabled-bg: #ead7bb;
  --disabled-text: #846d57;
  --header-bg-strong: #99541e;
  --header-text: #55351f;
  --header-border: rgba(106, 64, 37, 0.1);
  --footer-text: #5d3b25;
  --footer-muted: #876242;
  --footer-border: #ead3ad;
  --control-border-hover: #b97838;
  --badge-bg: #fff1dc;
  --badge-text: #72441f;
  --scrollbar-thumb: #d2a15d;
  --decor-color-1: rgba(240, 169, 78, 0.16);
  --decor-color-2: rgba(255, 205, 118, 0.14);
  --decor-color-3: rgba(129, 130, 75, 0.08);
  --decor-opacity: 0.64;
  --page-gradient: radial-gradient(circle at 15% 15%, rgb(240 169 78 / 0.14), transparent 30%), radial-gradient(circle at 85% 10%, rgb(255 205 118 / 0.13), transparent 32%), radial-gradient(circle at 50% 100%, rgb(169 112 52 / 0.055), transparent 36%), linear-gradient(180deg, #fffaf1 0%, #fff9ef 58%, #fbf3e5 100%);
  --header-gradient: linear-gradient(110deg, #fff8e8 0%, #f9e8c0 38%, #f3d393 70%, #edc06d 100%);
  --accent-highlight-gradient: linear-gradient(90deg, #fff1dc, #fff8ec);
  --interactive-border-hover: #b97838;
  --shadow-popover: 0 20px 44px rgba(119, 72, 25, 0.12);
  --autumn-shell-width: min(calc(100% - clamp(64px, 11.1vw, 160px)), 1510px);
}

:root[data-theme="autumn"] [data-site-header] {
  background: transparent;
  box-shadow: 0 2px 14px rgba(119, 72, 25, 0.045);
}

:root[data-theme="autumn"] [data-top-promo-bar] {
  border-bottom: 1px solid rgb(var(--theme-accent-strong-rgb) / 0.1);
  background: transparent;
}

:root[data-theme="autumn"] :is([data-desktop-utility-bar], [data-mobile-utility-bar], [data-primary-header]) {
  border-bottom: 1px solid rgb(var(--theme-accent-strong-rgb) / 0.1);
  background: linear-gradient(90deg, rgb(var(--theme-surface-rgb) / 0.32) 0%, rgb(var(--theme-surface-rgb) / 0.9) 9%, rgb(var(--theme-surface-rgb) / 0.96) 23%, rgb(var(--theme-surface-rgb) / 0.96) 77%, rgb(var(--theme-surface-rgb) / 0.9) 91%, rgb(var(--theme-surface-rgb) / 0.32) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

:root[data-theme="autumn"] .ui-card {
  border-color: rgb(var(--theme-accent-strong-rgb) / 0.1);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.92);
}

:root[data-theme="autumn"] :is(.ui-primary-button, .ui-ghost-button) {
  border-radius: 9999px;
  transition-duration: 200ms;
}

:root[data-theme="autumn"] .ui-card-hover {
  transition-duration: 300ms;
}

:root[data-theme="autumn"] .ui-ghost-button {
  border-color: rgb(var(--theme-accent-rgb) / 0.4);
  background: rgb(var(--theme-surface-rgb) / 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

:root[data-theme="autumn"] [data-header-search] {
  border-color: rgb(var(--theme-accent-strong-rgb) / 0.15);
  border-radius: 0.75rem;
  background: rgb(255 248 234 / 0.94);
}

:root[data-theme="autumn"] [data-header-search-submit] {
  background: rgb(var(--theme-accent-rgb));
  color: #fff;
}

:root[data-theme="autumn"] [data-header-search-submit]:hover {
  background: rgb(var(--theme-accent-hover-rgb));
}

:root[data-theme="autumn"] [data-header-search-suggestions] {
  border-radius: 0.75rem;
}

.autumn-decor__glow {
  background: radial-gradient(circle at 14% 12%, rgba(240, 169, 78, 0.15), transparent 30%), radial-gradient(circle at 86% 8%, rgba(255, 205, 118, 0.14), transparent 31%), radial-gradient(circle at 52% 100%, rgba(129, 130, 75, 0.055), transparent 34%);
}

.autumn-decor__sky {
  height: clamp(150px, 16vw, 230px);
  background: linear-gradient(110deg, rgba(255, 250, 239, 0.96) 0%, rgba(250, 232, 193, 0.88) 42%, rgba(246, 211, 148, 0.76) 72%, rgba(255, 246, 225, 0.9) 100%);
  -webkit-mask-image: linear-gradient(#000 0 64%, transparent 100%);
  mask-image: linear-gradient(#000 0 64%, transparent 100%);
}

[data-autumn-decor-item="top-left"] {
  top: -3rem;
  left: -2.5rem;
  width: clamp(170px, 25vw, 420px);
  opacity: 0.7;
  filter: saturate(0.86) brightness(1.04);
}

[data-autumn-decor-item="top-right"] {
  top: -2.5rem;
  right: -2.5rem;
  width: clamp(145px, 21vw, 350px);
  opacity: 0.58;
  filter: saturate(0.82) brightness(1.06);
}

[data-autumn-decor-item="bottom-left"] {
  bottom: -3rem;
  left: -3.5rem;
  width: clamp(205px, 28vw, 450px);
  opacity: 0.72;
  filter: saturate(0.82) brightness(1.05);
}

[data-autumn-decor-item="bottom-right"] {
  right: -4rem;
  bottom: -4rem;
  display: none;
  width: clamp(250px, 30vw, 480px);
  opacity: 0.78;
  filter: saturate(0.8) brightness(1.06);
}

.autumn-decor__shadow {
  bottom: -170px;
  left: 14%;
  display: none;
  width: clamp(360px, 34vw, 560px);
  opacity: 0.045;
  filter: grayscale(1) blur(2px);
  transform: rotate(9deg);
  mix-blend-mode: multiply;
}

@media (min-width: 640px) {
  [data-autumn-decor-item="top-left"] {
    top: -4rem;
    left: -3rem;
    opacity: 0.8;
  }

  [data-autumn-decor-item="top-right"] {
    top: -3.5rem;
    right: -3rem;
    opacity: 0.72;
  }

  [data-autumn-decor-item="bottom-left"] {
    bottom: -4rem;
    left: -4rem;
    opacity: 0.82;
  }

  [data-autumn-decor-item="bottom-right"] {
    display: block;
  }
}

@media (min-width: 768px) {
  .autumn-decor__shadow {
    display: block;
  }
}

@media (min-width: 1024px) {
  [data-autumn-decor-item="top-left"] {
    top: -5rem;
    left: -4rem;
    opacity: 0.9;
  }

  [data-autumn-decor-item="top-right"] {
    top: -4rem;
    right: -4rem;
    opacity: 0.82;
  }

  [data-autumn-decor-item="bottom-left"],
  [data-autumn-decor-item="bottom-right"] {
    right: auto;
    bottom: -5rem;
    left: -5rem;
    opacity: 0.9;
  }

  [data-autumn-decor-item="bottom-right"] {
    right: -5rem;
    left: auto;
  }
}

:root[data-theme="autumn"] [data-home-shell],
:root[data-theme="autumn"] :is(
  [data-top-promo-content],
  [data-desktop-utility-bar] > div,
  [data-mobile-utility-bar] > div,
  [data-primary-header] > div:first-child,
  [data-desktop-catalog-nav]
) {
  width: var(--autumn-shell-width);
  max-width: 1510px;
}

:root[data-theme="autumn"] [data-home-hero] {
  border-radius: 1rem;
  box-shadow: 0 10px 32px rgba(119, 72, 25, 0.075);
}

/* Side ornaments are separate from the four corner anchors. They only mount
   visually on narrow viewports, so the desktop compositions stay unchanged.
   Gated on (pointer: coarse) too, so a resized/narrow desktop browser window
   (mouse/trackpad) never shows them - only real phones/tablets do. */
.seasonal-mobile-side {
  display: none;
}

@media (max-width: 860px) and (pointer: coarse) {
  .seasonal-mobile-side {
    display: block;
    max-width: none;
  }
}

@media (max-width: 620px) {
  :root[data-theme="autumn"] {
    --autumn-shell-width: min(calc(100% - 24px), 560px);
    --decor-opacity: 0.52;
  }

  :root[data-theme="autumn"] [data-home-hero] {
    border-radius: 0.625rem;
  }
}

/* Mobile seasonal composition: the storefront chrome stays readable while the
   fixed decorative layer remains visible at the viewport edges during scroll. */
@media (max-width: 860px) {
  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) {
    --seasonal-mobile-glass: rgb(var(--theme-surface-rgb) / 0.74);
    --seasonal-mobile-glass-strong: rgb(var(--theme-surface-rgb) / 0.8);
    --seasonal-mobile-glass-border: rgb(var(--theme-border-strong-rgb) / 0.24);
    --seasonal-mobile-glass-shadow: 0 8px 24px rgb(var(--theme-text-rgb) / 0.08);
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) [data-site-header] {
    border-bottom: 1px solid var(--seasonal-mobile-glass-border);
    background: transparent;
    box-shadow: var(--seasonal-mobile-glass-shadow);
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is([data-mobile-utility-bar], [data-primary-header]) {
    border-bottom-color: var(--seasonal-mobile-glass-border);
    background: linear-gradient(
      180deg,
      var(--seasonal-mobile-glass-strong) 0%,
      var(--seasonal-mobile-glass) 100%
    );
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.46);
    -webkit-backdrop-filter: saturate(1.14) blur(14px);
    backdrop-filter: saturate(1.14) blur(14px);
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) [data-mobile-bottom-nav] {
    isolation: isolate;
    border-top-color: var(--seasonal-mobile-glass-border);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(
      180deg,
      rgb(var(--theme-surface-rgb) / 0.8) 0%,
      rgb(var(--theme-surface-rgb) / 0.7) 100%
    );
    box-shadow:
      0 -10px 28px rgb(var(--theme-text-rgb) / 0.08),
      inset 0 1px 0 rgb(255 255 255 / 0.5);
    -webkit-backdrop-filter: saturate(1.16) blur(18px);
    backdrop-filter: saturate(1.16) blur(18px);
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) [data-mobile-bottom-nav]::after {
    background: rgb(var(--theme-surface-rgb) / 0.7);
    -webkit-backdrop-filter: saturate(1.12) blur(18px);
    backdrop-filter: saturate(1.12) blur(18px);
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is([data-winter-decor], [data-spring-decor], [data-summer-decor], [data-autumn-decor]) {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    contain: layout paint;
    pointer-events: none;
    user-select: none;
  }

  :root[data-theme="summer"] :is(
    [data-summer-decor-item="flowers-bottom-left"],
    [data-summer-decor-item="flowers-bottom-right"],
    [data-summer-decor-item="palm-shadow-left"],
    [data-summer-decor-item="palm-shadow-right"]
  ) {
    display: none;
  }
}

@media (max-width: 639px) {
  :root[data-theme="winter"] {
    --page-gradient:
      radial-gradient(circle at -8% 34%, rgb(203 226 221 / 0.3), transparent 30%),
      radial-gradient(circle at 108% 76%, rgb(229 202 145 / 0.18), transparent 28%),
      linear-gradient(180deg, #fffefa 0%, #fbfdf9 56%, #f5faf7 100%);
  }

  :root[data-theme="spring"] {
    --page-gradient:
      radial-gradient(circle at -8% 32%, rgb(246 197 209 / 0.22), transparent 28%),
      radial-gradient(circle at 108% 70%, rgb(190 216 154 / 0.24), transparent 30%),
      linear-gradient(180deg, #fffdf4 0%, #fffdfa 56%, #faf8ef 100%);
  }

  :root[data-theme="summer"] {
    --page-gradient:
      radial-gradient(circle at 108% 20%, rgb(92 199 226 / 0.22), transparent 31%),
      radial-gradient(circle at -8% 58%, rgb(244 211 107 / 0.2), transparent 29%),
      radial-gradient(circle at 108% 82%, rgb(111 157 112 / 0.16), transparent 27%),
      linear-gradient(180deg, #fffdf4 0%, #fffdf7 54%, #fff9ed 100%);
  }

  :root[data-theme="autumn"] {
    --page-gradient:
      radial-gradient(circle at -8% 28%, rgb(240 169 78 / 0.22), transparent 29%),
      radial-gradient(circle at 108% 72%, rgb(205 139 66 / 0.17), transparent 30%),
      linear-gradient(180deg, #fffaf1 0%, #fff9ef 58%, #fbf2e2 100%);
  }

  :root[data-theme="winter"] [data-winter-decor-item="top-left"] {
    top: calc(var(--nevis-safe-top) - 26px);
    left: -122px;
    width: 320px;
    opacity: 0.88;
  }

  :root[data-theme="winter"] [data-winter-decor-item="top-right"] {
    top: calc(var(--nevis-safe-top) - 30px);
    right: -128px;
    width: 314px;
    opacity: 0.85;
  }

  :root[data-theme="winter"] [data-winter-decor-item="bottom-left"] {
    top: auto;
    bottom: calc(var(--nevis-mobile-nav-height) - 22px);
    left: -52px;
    width: 246px;
    opacity: 0.88;
  }

  :root[data-theme="winter"] [data-winter-decor-item="bottom-right"] {
    top: auto;
    right: -54px;
    bottom: calc(var(--nevis-mobile-nav-height) - 16px);
    display: block;
    width: 250px;
    opacity: 0.88;
  }

  :root[data-theme="winter"] [data-winter-decor-item="side-left"] {
    top: 0;
    left: -16px;
    width: auto;
    height: 100vh;
    height: 100dvh;
    opacity: 0.86;
  }

  :root[data-theme="winter"] [data-winter-decor-item="side-right"] {
    top: 0;
    right: -16px;
    width: auto;
    height: 100vh;
    height: 100dvh;
    opacity: 0.86;
  }

  :root[data-theme="spring"] [data-spring-decor-item="top-left"] {
    top: calc(var(--nevis-safe-top) - 32px);
    left: -128px;
    width: 320px;
    opacity: 0.88;
  }

  :root[data-theme="spring"] [data-spring-decor-item="top-right"] {
    top: calc(var(--nevis-safe-top) - 26px);
    right: -134px;
    width: 312px;
    opacity: 0.85;
  }

  :root[data-theme="spring"] [data-spring-decor-item="bottom-left"] {
    top: auto;
    bottom: calc(var(--nevis-mobile-nav-height) - 24px);
    left: -58px;
    width: 240px;
    opacity: 0.85;
  }

  :root[data-theme="spring"] [data-spring-decor-item="bottom-right"] {
    top: auto;
    right: -56px;
    bottom: calc(var(--nevis-mobile-nav-height) - 20px);
    width: 238px;
    opacity: 0.85;
  }

  :root[data-theme="spring"] [data-spring-decor-item="side-left"] {
    top: 36vh;
    top: 36dvh;
    left: -158px;
    width: 210px;
    opacity: 0.48;
    transform: rotate(7deg);
  }

  :root[data-theme="spring"] [data-spring-decor-item="side-right"] {
    top: 64vh;
    top: 64dvh;
    right: -154px;
    width: 208px;
    opacity: 0.5;
    transform: rotate(-6deg);
  }

  :root[data-theme="summer"] [data-summer-decor-item="top-left"] {
    top: calc(var(--nevis-safe-top) - 24px);
    left: -132px;
    width: 300px;
    opacity: 0.85;
  }

  :root[data-theme="summer"] [data-summer-decor-item="top-right"] {
    top: calc(var(--nevis-safe-top) - 30px);
    right: -140px;
    width: 296px;
    opacity: 0.82;
  }

  :root[data-theme="summer"] [data-summer-decor-item="bottom-left"] {
    top: auto;
    bottom: calc(var(--nevis-mobile-nav-height) - 22px);
    left: -70px;
    display: block;
    width: 226px;
    opacity: 0.85;
  }

  :root[data-theme="summer"] [data-summer-decor-item="bottom-right"] {
    top: auto;
    right: -72px;
    bottom: calc(var(--nevis-mobile-nav-height) - 20px);
    display: block;
    width: 250px;
    opacity: 0.85;
  }

  :root[data-theme="summer"] [data-summer-decor-item="side-left"] {
    top: 36vh;
    top: 36dvh;
    left: -132px;
    width: 176px;
    opacity: 0.54;
    transform: rotate(11deg);
  }

  :root[data-theme="summer"] [data-summer-decor-item="side-right"] {
    top: 63vh;
    top: 63dvh;
    right: -142px;
    width: 186px;
    opacity: 0.56;
    transform: rotate(-10deg);
  }

  :root[data-theme="autumn"] [data-autumn-decor-item="top-left"] {
    top: calc(var(--nevis-safe-top) - 28px);
    left: -124px;
    width: 306px;
    opacity: 0.86;
  }

  :root[data-theme="autumn"] [data-autumn-decor-item="top-right"] {
    top: calc(var(--nevis-safe-top) - 26px);
    right: -128px;
    width: 300px;
    opacity: 0.83;
  }

  :root[data-theme="autumn"] [data-autumn-decor-item="bottom-left"] {
    top: auto;
    bottom: calc(var(--nevis-mobile-nav-height) - 22px);
    left: -54px;
    width: 236px;
    opacity: 0.85;
  }

  :root[data-theme="autumn"] [data-autumn-decor-item="bottom-right"] {
    top: auto;
    right: -52px;
    bottom: calc(var(--nevis-mobile-nav-height) - 16px);
    display: block;
    width: 240px;
    opacity: 0.85;
  }

  :root[data-theme="autumn"] [data-autumn-decor-item="side-left"] {
    top: 37vh;
    top: 37dvh;
    left: -140px;
    width: 188px;
    opacity: 0.5;
    transform: rotate(9deg);
  }

  :root[data-theme="autumn"] [data-autumn-decor-item="side-right"] {
    top: 65vh;
    top: 65dvh;
    right: -146px;
    width: 198px;
    opacity: 0.52;
    transform: rotate(-8deg);
  }
}

/* On touch devices, compositing large blurred layers during scroll is costly. */
@media (max-width: 860px) and (pointer: coarse) {
  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is([data-mobile-utility-bar], [data-primary-header], [data-mobile-bottom-nav]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) [data-mobile-bottom-nav]::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .seasonal-promo__particle {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 860px) {
  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) {
    --seasonal-mobile-glass: rgb(var(--theme-surface-rgb) / 0.72);
    --seasonal-mobile-glass-strong: rgb(var(--theme-surface-rgb) / 0.78);
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is(
    [data-winter-decor-item="top-left"],
    [data-spring-decor-item="top-left"],
    [data-summer-decor-item="top-left"],
    [data-autumn-decor-item="top-left"]
  ) {
    top: calc(var(--nevis-safe-top) + 12px);
    left: -104px;
    width: 340px;
    opacity: 0.88;
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is(
    [data-winter-decor-item="top-right"],
    [data-spring-decor-item="top-right"],
    [data-summer-decor-item="top-right"],
    [data-autumn-decor-item="top-right"]
  ) {
    top: calc(var(--nevis-safe-top) + 4px);
    right: -110px;
    width: 330px;
    opacity: 0.85;
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is(
    [data-winter-decor-item="bottom-left"],
    [data-spring-decor-item="bottom-left"],
    [data-summer-decor-item="bottom-left"],
    [data-autumn-decor-item="bottom-left"]
  ) {
    top: auto;
    bottom: calc(var(--nevis-mobile-nav-height) - 34px);
    left: -96px;
    display: block;
    width: 320px;
    opacity: 0.85;
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is(
    [data-winter-decor-item="bottom-right"],
    [data-spring-decor-item="bottom-right"],
    [data-summer-decor-item="bottom-right"],
    [data-autumn-decor-item="bottom-right"]
  ) {
    top: auto;
    right: -92px;
    bottom: calc(var(--nevis-mobile-nav-height) - 28px);
    display: block;
    width: 328px;
    opacity: 0.85;
  }

  :root:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is(
    [data-spring-decor-item="side-left"],
    [data-summer-decor-item="side-left"],
    [data-autumn-decor-item="side-left"]
  ) {
    top: 37vh;
    top: 37dvh;
    left: -218px;
    width: 300px;
    opacity: 0.5;
  }

  :root:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) :is(
    [data-spring-decor-item="side-right"],
    [data-summer-decor-item="side-right"],
    [data-autumn-decor-item="side-right"]
  ) {
    top: 64vh;
    top: 64dvh;
    right: -224px;
    width: 306px;
    opacity: 0.54;
  }

  /* Winter uses dedicated fir-side-left/right art (feathered top AND bottom,
     see WinterDecorations.tsx) instead of reusing the corner crops, so it can
     be shown larger here without exposing a hard edge. */
  :root[data-theme="winter"] [data-winter-decor-item="side-left"] {
    top: 0;
    left: -22px;
    width: auto;
    height: 100vh;
    height: 100dvh;
    opacity: 0.86;
  }

  :root[data-theme="winter"] [data-winter-decor-item="side-right"] {
    top: 0;
    right: -22px;
    width: auto;
    height: 100vh;
    height: 100dvh;
    opacity: 0.86;
  }
}

:root:is(
  [data-theme="winter"],
  [data-theme="spring"],
  [data-theme="summer"],
  [data-theme="autumn"]
) ::selection {
  color: var(--selection-text);
  background: var(--selection-bg);
}

:root:is(
  [data-theme="winter"],
  [data-theme="spring"],
  [data-theme="summer"],
  [data-theme="autumn"]
) {
  --text-heading: var(--text-primary);
  --text-body-strong: var(--text-primary);
  --text-control-strong: var(--text-primary);
  --text-helper: var(--text-secondary);
  --text-subtle: var(--text-secondary);
  --text-faint: var(--text-secondary);
  --text-copy: var(--text-secondary);
  --text-label: var(--text-secondary);
  --text-placeholder-soft: var(--text-secondary);
  --text-neutral-strong: var(--text-primary);
  --text-neutral-body: var(--text-secondary);
  --text-neutral-label: var(--text-secondary);
  --text-neutral-label-alt: var(--text-secondary);
  --text-neutral-soft: var(--text-secondary);
  --text-neutral-muted: var(--text-secondary);
  --text-neutral-badge: var(--text-secondary);
  --text-neutral-caption: var(--text-secondary);
  --text-neutral-dismiss: var(--text-secondary);
  --text-neutral-disabled: var(--text-secondary);
  --text-title-compact: var(--text-primary);
  --text-caption-muted: var(--text-secondary);
  --text-progress-muted: var(--text-secondary);
  --text-feature-strong: var(--text-primary);
  --text-summary-label: var(--text-secondary);
  --text-form-row: var(--text-secondary);
  --text-intro: var(--text-secondary);
  --text-benefit-copy: var(--text-secondary);
  --text-filter-meta: var(--text-secondary);
  --brand-logo: var(--text-primary);
  --brand-wordmark: var(--text-primary);
  --brand-wordmark-strong: var(--text-primary);
  --border-soft: var(--border);
  --border-soft-alt: var(--border);
  --divider-soft: var(--divider);
  --skeleton-bg: var(--surface-muted);
  --control-soft-bg: var(--surface);
  --content-soft-bg: var(--surface);
  --surface-subtle: var(--surface-secondary);
  --surface-wash: var(--surface-secondary);
  --surface-quiet: var(--surface-secondary);
  --surface-cloud: var(--surface-secondary);
  --skeleton-strong: var(--surface-muted);
  --skeleton-soft: var(--surface-muted);
  --skeleton-pale: var(--surface-muted);
  --disabled-surface: var(--disabled-bg);
  --border-faint: var(--divider);
  --border-faint-alt: var(--divider);
  --border-muted: var(--border);
  --border-dashed: var(--border-strong);
  --border-accent-muted: var(--border-strong);
  --border-hairline: var(--divider);
  --border-neutral: var(--border);
  --divider-dashed-alt: var(--border-strong);
  --border-benefit: var(--border);
  --surface-step-muted: var(--surface-secondary);
  --control-disabled-icon: var(--disabled-text);
  --placeholder-subtle: var(--placeholder);
  --swatch-border: var(--surface-elevated);
  --swatch-product-ring: rgb(var(--theme-accent-rgb) / 0.18);
  --swatch-filter-ring: rgb(var(--theme-text-rgb) / 0.18);
  --placeholder: var(--text-secondary);
  --theme-promo-card-rgb: var(--theme-accent-strong-rgb);
  --accent-alt: var(--accent-hover);
  --legacy-wine: var(--accent-strong);
  --validation-error: var(--error);
  --promo-error-bg: var(--error-soft);
  --promo-error-text: var(--error);
  --promo-link: var(--accent);
  --accent-vivid: var(--accent-hover);
  --accent-marker: var(--accent);
  --stock-error: var(--error);
  --stock-success: var(--success);
  --stock-success-alt: var(--success);
  --stock-success-dot: var(--success);
  --warning-panel: var(--warning-soft);
  --warning-panel-text: var(--warning);
  --rating-track: var(--accent-soft);
  --verified-text: var(--info);
  --verified-bg: var(--info-soft);
  --control-border-soft: var(--border-strong);
  --option-border: var(--border);
  --option-border-hover: var(--interactive-border-hover);
  --shadow-control-focus: 0 8px 22px rgb(var(--theme-accent-rgb) / 0.12);
  --shadow-selection-inset: inset 0 0 0 1px var(--accent-strong);
  --shadow-ui-action: var(--shadow-md);
  --shadow-dialog-soft: var(--shadow-popover);
  --shadow-form-card: var(--shadow-md);
  --shadow-form-action: var(--shadow-accent);
  --shadow-breadcrumb: var(--shadow-md);
  --shadow-header-fallback: var(--shadow-md);
  --shadow-error-panel: var(--shadow-lg);
  --skeleton-header-search: var(--surface-muted);
  --shadow-accent-inset: inset 3px 0 0 var(--accent);
  --shadow-rating-card: var(--shadow-md);
  --shadow-rating-score: var(--shadow-accent);
  --avatar-gradient: radial-gradient(circle at 30% 22%, var(--accent), var(--accent-strong));
  --promo-gradient: radial-gradient(circle at 17% 50%, rgb(var(--theme-surface-elevated-rgb) / 0.18), transparent 23%), linear-gradient(105deg, var(--accent), var(--accent-hover) 44%, var(--header-bg-strong));
  --story-ring-gradient: conic-gradient(from 180deg, var(--accent), var(--accent-border), var(--accent-soft), var(--accent));
  --hero-fallback-gradient: radial-gradient(circle at 72% 24%, rgb(var(--theme-surface-elevated-rgb) / 0.38) 0 12%, transparent 28%), radial-gradient(circle at 46% 44%, rgb(var(--theme-accent-rgb) / 0.34), transparent 34%), var(--header-gradient);
  --feature-hero-gradient: var(--header-gradient);
  --not-found-gradient: radial-gradient(circle at 78% 22%, rgb(var(--theme-surface-elevated-rgb) / 0.38) 0 13%, transparent 30%), var(--header-gradient);
  --hero-overlay-rgb: var(--theme-accent-strong-rgb);
  --hero-dot-active: rgb(var(--theme-accent-rgb) / 0.35);
  --hero-action-shadow: var(--shadow-accent);
  --hero-action-shadow-hover: var(--shadow-lg);
  --promo-art-gradient: linear-gradient(90deg, transparent 42%, rgb(var(--theme-surface-elevated-rgb) / 0.92) 43% 56%, transparent 57%), linear-gradient(var(--accent-soft), var(--accent-border));
  --promo-art-handle: var(--accent-soft);
  --promo-art-shadow: var(--shadow-lg);
  --promo-action-shadow: var(--shadow-accent);
  --promo-action-shadow-hover: var(--shadow-lg);
  --burger-ripple: rgb(var(--theme-accent-rgb) / 0.1);
  --burger-shadow: var(--shadow-control-focus);
  --google-button-border: var(--control-border-soft);
  --shadow-google-button: var(--shadow-sm);
  --shadow-sort-control: var(--shadow-sm);
  --shadow-sort-control-hover: var(--shadow-md);
  --shadow-sort-control-open: var(--shadow-lg);
  --shadow-checkout-control: var(--shadow-sm);
  --checkout-error-bg: var(--error-soft);
  --checkout-error-text: var(--error);
  --checkout-quote-bg: var(--info-soft);
  --checkout-quote-text: var(--info);
  --checkout-quote-diff-border: var(--warning);
  --checkout-quote-diff-bg: var(--warning-soft);
  --checkout-quote-diff-text: var(--warning);
  --checkout-quote-confirm-border: var(--accent);
  --checkout-quote-confirm-bg: var(--surface);
  --checkout-quote-confirm-text: var(--accent);
  --toast-info-border: var(--info-soft);
  --toast-info-text: var(--info);
  --toast-info-icon: var(--info);
  --toast-success-border: var(--success-soft);
  --toast-success-text: var(--success);
  --toast-success-icon: var(--success);
  --toast-error-border: var(--error-soft);
  --toast-error-text: var(--error);
  --toast-error-icon: var(--error);
  --toast-shadow: var(--shadow-popover);
  --api-status-bg: var(--error-soft);
  --api-status-text: var(--error);
  --pwa-title: var(--text-primary);
  --pwa-update-border: var(--info-soft);
  --pwa-update-icon-bg: var(--info-soft);
  --pwa-update-icon: var(--info);
  --pwa-success-border: var(--success-soft);
  --pwa-success-icon-bg: var(--success-soft);
  --pwa-success-icon: var(--success);
  --pwa-offline-border: var(--warning-soft);
  --pwa-offline-icon-bg: var(--warning-soft);
  --pwa-offline-icon: var(--warning);
  --pwa-shadow: var(--shadow-popover);
  --admin-focus-halo: var(--focus-halo);
  --admin-control-disabled-bg: var(--disabled-bg);
  --admin-danger-border: var(--error-soft);
  --admin-danger-hover: var(--error);
  --admin-danger-hover-bg: var(--error-soft);
  --dirty-warning-bg: var(--warning-soft);
  --dirty-warning-text: var(--warning);
  --dirty-success-bg: var(--success-soft);
  --dirty-success-text: var(--success);
  --confirm-danger-border: var(--error-soft);
  --confirm-danger-bg: var(--error-soft);
  --confirm-danger-text: var(--error);
  --confirm-api-bg: var(--error-soft);
  --confirm-api-text: var(--error);
  --confirm-overlay: var(--overlay);
  --confirm-shadow: var(--shadow-overlay);
  --confirm-danger-hover: var(--error);
}

:root:is(
  [data-theme="winter"],
  [data-theme="spring"],
  [data-theme="summer"],
  [data-theme="autumn"]
) :is(
  .text-site-accent,
  .hover\:text-site-accent:hover,
  .focus-visible\:text-site-accent:focus-visible,
  .group:hover .group-hover\:text-site-accent
) {
  color: var(--accent-hover);
}

:root:is(
  [data-theme="winter"],
  [data-theme="spring"],
  [data-theme="summer"],
  [data-theme="autumn"]
) {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  --shadow-icon: 0 7px 18px rgb(var(--theme-accent-rgb) / 0.14);
  --shadow-control: 0 7px 20px rgb(var(--theme-accent-rgb) / 0.1);
  --shadow-accent: 0 11px 22px rgb(var(--theme-accent-rgb) / 0.2);
  --footer-link: var(--footer-muted);
  --footer-control-bg: var(--surface-elevated);
  --footer-control-border: var(--border-strong);
  --footer-divider: var(--footer-border);
}

:root:is([data-theme="winter"], [data-theme="spring"], [data-theme="summer"], [data-theme="autumn"]) ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

:root:is([data-theme="winter"], [data-theme="spring"], [data-theme="summer"], [data-theme="autumn"]) ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

:root:is([data-theme="winter"], [data-theme="spring"], [data-theme="summer"], [data-theme="autumn"]) ::-webkit-scrollbar-thumb {
  border: 3px solid var(--scrollbar-track);
  border-radius: 999px;
  background: var(--scrollbar-thumb);
}

:root:is([data-theme="winter"], [data-theme="spring"], [data-theme="summer"], [data-theme="autumn"]) ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Keep every native chooser aligned with the shared site palette. Browsers
   without customizable selects still receive themed option states. */
:where(select) {
  color-scheme: light;
  cursor: pointer;
}

:where(select:disabled) {
  cursor: not-allowed;
}

:where(select option, select optgroup) {
  background-color: var(--surface-elevated);
  color: var(--text-primary);
}

:where(select option) {
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
}

:where(select option:checked) {
  background-color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  color: var(--text-inverse);
}

:where(select option:disabled) {
  background-color: var(--disabled-bg, var(--surface-muted));
  color: var(--disabled-text, var(--text-muted));
}

@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    select:not([multiple]),
    ::picker(select) {
      appearance: base-select;
    }

    select:not([multiple]) {
      align-items: center;
    }

    select:not([multiple])::picker-icon {
      align-self: center;
      flex: 0 0 auto;
      margin-inline-start: 0.5rem;
      color: var(--accent);
      transition: rotate 160ms ease, color 160ms ease;
    }

    select:not([multiple]):open::picker-icon {
      rotate: 180deg;
    }

    /* A few icon controls already render their own Lucide chevron. */
    select.appearance-none::picker-icon {
      display: none;
    }

    select.appearance-none + svg {
      transition: color 160ms ease, transform 160ms ease;
    }

    select.appearance-none:open + svg {
      color: var(--accent);
      transform: rotate(180deg);
    }

    ::picker(select) {
      max-width: calc(100vw - 1rem);
      max-height: min(22rem, calc(100dvh - 2rem));
      margin-block: 0.375rem;
      padding: 0.375rem;
      overflow-y: auto;
      border: 1px solid var(--border-strong);
      border-radius: 0.75rem;
      background: var(--surface-elevated);
      box-shadow: var(--shadow-popover);
      color: var(--text-primary);
      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
      opacity: 0;
      transform: translateY(-4px) scale(0.985);
      transform-origin: top center;
      transition:
        opacity 150ms ease,
        transform 150ms ease,
        display 150ms allow-discrete,
        overlay 150ms allow-discrete;
    }

    ::picker(select):popover-open {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    @starting-style {
      ::picker(select):popover-open {
        opacity: 0;
        transform: translateY(-4px) scale(0.985);
      }
    }

    select:not([multiple]) option {
      display: flex;
      min-height: 2.75rem;
      align-items: center;
      gap: 0.625rem;
      padding: 0.625rem 0.75rem;
      border-radius: 0.5rem;
      background: transparent;
      color: var(--text-primary);
      font-weight: 500;
      cursor: pointer;
      transition: color 140ms ease, background-color 140ms ease;
    }

    select:not([multiple]) option:is(:hover, :focus-visible) {
      background: var(--surface-active);
      color: var(--accent-strong);
    }

    select:not([multiple]) option:checked {
      background: var(--accent-soft);
      color: var(--accent-strong);
      font-weight: 700;
    }

    select:not([multiple]) option:disabled {
      background: transparent;
      color: var(--disabled-text, var(--text-muted));
      cursor: not-allowed;
    }

    select:not([multiple]) option::checkmark {
      color: var(--accent);
    }

    select:not([multiple]) optgroup {
      padding: 0.375rem;
      color: var(--text-secondary);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
  }
}

[data-theme-transition="true"] :where(
  body,
  .app,
  .app-content,
  header,
  nav,
  footer,
  main,
  section,
  article,
  aside,
  button,
  input,
  select,
  textarea
) {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 280ms;
  transition-timing-function: ease;
}

.seasonal-decor,
.seasonal-decor__backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  contain: strict;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 12%, transparent 34%, transparent 66%, #000 88%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 12%, transparent 34%, transparent 66%, #000 88%, #000 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.seasonal-decor {
  z-index: 2;
}

.seasonal-decor__backdrop {
  z-index: 0;
}

:root:is([data-theme="winter"], [data-theme="spring"], [data-theme="summer"], [data-theme="autumn"]) :is(.seasonal-decor, .seasonal-decor__backdrop) {
  opacity: var(--decor-opacity);
  visibility: visible;
}

.seasonal-decor__backdrop::before,
.seasonal-decor__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.seasonal-decor__backdrop::before {
  background:
    radial-gradient(circle at 7% 12%, var(--decor-color-1), transparent 21%),
    radial-gradient(circle at 92% 24%, var(--decor-color-2), transparent 18%),
    radial-gradient(circle at 86% 91%, var(--decor-color-3), transparent 20%);
}

.seasonal-decor__backdrop::after {
  inset: auto -12vw -22vh auto;
  width: min(52vw, 720px);
  height: min(52vw, 720px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--decor-color-1), transparent 67%);
  opacity: 0.58;
}

.seasonal-decor__particle {
  --particle-size: 12px;
  --particle-sway: 18px;
  --particle-sway-back: -10px;
  --particle-end: 8px;
  position: absolute;
  top: -12vh;
  left: 4%;
  width: var(--particle-size);
  aspect-ratio: 1;
  opacity: 0;
  animation: none;
  will-change: auto;
}

.seasonal-decor__particle:nth-child(n + 9) {
  display: none;
}

:root:is([data-theme="winter"], [data-theme="spring"], [data-theme="summer"], [data-theme="autumn"]) .seasonal-decor__particle {
  will-change: transform;
}

:root[data-theme="winter"] .seasonal-decor__particle {
  --snow-opacity: 0.64;
  display: block;
  width: calc(var(--particle-size) * 1.32);
  height: 2.4px;
  aspect-ratio: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 5px rgba(223, 238, 240, 0.65), 0 0 2px rgba(255, 255, 255, 0.7);
  animation: seasonal-snow-fall 19s linear infinite;
}

:root[data-theme="winter"] .seasonal-decor__particle:nth-child(n + 17) {
  display: none;
}

:root[data-theme="winter"] .seasonal-decor {
  -webkit-mask-image: none;
  mask-image: none;
}

:root[data-theme="winter"] .seasonal-decor__particle:nth-child(even) {
  animation-name: seasonal-snow-fall-alt;
}

:root[data-theme="winter"] .seasonal-decor__particle::before,
:root[data-theme="winter"] .seasonal-decor__particle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  box-shadow: inherit;
  transform: rotate(60deg);
}

:root[data-theme="winter"] .seasonal-decor__particle::after {
  transform: rotate(120deg);
}

:root[data-theme="winter"] [data-winter-decor-item="side-left"],
:root[data-theme="winter"] [data-winter-decor-item="side-right"] {
  filter: none;
  opacity: 0.86;
}

:root[data-theme="spring"] .seasonal-decor__particle {
  --flower-opacity: 0.5;
  --flower-visibility: min(0.76, calc(var(--flower-opacity) * 1.35));
  display: block;
  width: calc(var(--particle-size) * 1.5);
  height: calc(var(--particle-size) * 0.88);
  aspect-ratio: auto;
  border-radius: 92% 16% 86% 20%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.96) 0 18%, transparent 48%), linear-gradient(145deg, #fff8f5 0%, #f8d6dc 52%, #efb9c7 100%);
  box-shadow: inset -1px -1px 2px rgba(183, 95, 119, 0.13);
  filter: saturate(0.88) drop-shadow(0 1px 2px rgba(137, 91, 99, 0.18));
  transform-origin: center;
  animation: seasonal-petal-fall 22s ease-in-out infinite;
}

:root[data-theme="spring"] .seasonal-decor__particle:nth-child(3n) {
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.94) 0 16%, transparent 46%), linear-gradient(145deg, #fffaf4 0%, #f5d1d8 50%, #eeb3c1 100%);
}

:root[data-theme="spring"] .seasonal-decor {
  -webkit-mask-image: none;
  mask-image: none;
}

:root[data-theme="spring"] .seasonal-decor__particle:nth-child(even) {
  animation-name: seasonal-flower-fall-alt;
}

:root[data-theme="spring"] .seasonal-decor__particle--1 { left: 3%; --particle-size: 10px; --flower-opacity: 0.38; animation-delay: -3.7s; animation-duration: 18.3s; }
:root[data-theme="spring"] .seasonal-decor__particle--2 { left: 9%; --particle-size: 15px; --flower-opacity: 0.54; animation-delay: -14.6s; animation-duration: 26.1s; }
:root[data-theme="spring"] .seasonal-decor__particle--3 { left: 16%; --particle-size: 8px; --flower-opacity: 0.34; animation-delay: -8.2s; animation-duration: 21.4s; }
:root[data-theme="spring"] .seasonal-decor__particle--4 { left: 23%; --particle-size: 13px; --flower-opacity: 0.48; animation-delay: -20.9s; animation-duration: 28.7s; }
:root[data-theme="spring"] .seasonal-decor__particle--5 { left: 30%; --particle-size: 9px; --flower-opacity: 0.36; animation-delay: -1.8s; animation-duration: 19.6s; }
:root[data-theme="spring"] .seasonal-decor__particle--6 { left: 37%; --particle-size: 16px; --flower-opacity: 0.56; animation-delay: -18.1s; animation-duration: 30.2s; }
:root[data-theme="spring"] .seasonal-decor__particle--7 { left: 44%; --particle-size: 11px; --flower-opacity: 0.42; animation-delay: -11.3s; animation-duration: 23.5s; }
:root[data-theme="spring"] .seasonal-decor__particle--8 { left: 51%; --particle-size: 7px; --flower-opacity: 0.31; animation-delay: -25.1s; animation-duration: 31.4s; }
:root[data-theme="spring"] .seasonal-decor__particle--9 { left: 58%; --particle-size: 14px; --particle-sway: -35px; --particle-sway-back: 19px; --particle-end: -24px; --flower-opacity: 0.52; animation-delay: -6.1s; animation-duration: 27.2s; }
:root[data-theme="spring"] .seasonal-decor__particle--10 { left: 64%; --particle-size: 8px; --particle-sway: 24px; --particle-sway-back: -14px; --particle-end: 17px; --flower-opacity: 0.35; animation-delay: -19.2s; animation-duration: 22.1s; }
:root[data-theme="spring"] .seasonal-decor__particle--11 { left: 70%; --particle-size: 12px; --particle-sway: -29px; --particle-sway-back: 16px; --particle-end: -20px; --flower-opacity: 0.46; animation-delay: -12.6s; animation-duration: 29.1s; }
:root[data-theme="spring"] .seasonal-decor__particle--12 { left: 76%; --particle-size: 7px; --particle-sway: 19px; --particle-sway-back: -11px; --particle-end: 13px; --flower-opacity: 0.3; animation-delay: -2.9s; animation-duration: 20.4s; }
:root[data-theme="spring"] .seasonal-decor__particle--13 { left: 82%; --particle-size: 15px; --particle-sway: -38px; --particle-sway-back: 22px; --particle-end: -27px; --flower-opacity: 0.55; animation-delay: -22.8s; animation-duration: 32.3s; }
:root[data-theme="spring"] .seasonal-decor__particle--14 { left: 88%; --particle-size: 9px; --particle-sway: 27px; --particle-sway-back: -16px; --particle-end: 19px; --flower-opacity: 0.38; animation-delay: -9.1s; animation-duration: 24.7s; }
:root[data-theme="spring"] .seasonal-decor__particle--15 { left: 93%; --particle-size: 13px; --particle-sway: -32px; --particle-sway-back: 18px; --particle-end: -22px; --flower-opacity: 0.49; animation-delay: -16.2s; animation-duration: 27.8s; }
:root[data-theme="spring"] .seasonal-decor__particle--16 { left: 98%; --particle-size: 7px; --particle-sway: 21px; --particle-sway-back: -12px; --particle-end: 15px; --flower-opacity: 0.32; animation-delay: -1.1s; animation-duration: 21.6s; }

:root[data-theme="autumn"] .seasonal-decor {
  -webkit-mask-image: none;
  mask-image: none;
}

:root[data-theme="autumn"] .seasonal-decor__particle {
  display: block;
  left: var(--particle-left);
  width: calc(var(--particle-size) * 2);
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f0bc55 0%, #d17a2d 58%, #a95c35 100%);
  -webkit-clip-path: polygon(50% 0%, 60% 25%, 76% 15%, 70% 39%, 96% 36%, 77% 55%, 88% 67%, 58% 64%, 50% 100%, 42% 64%, 12% 67%, 23% 55%, 4% 36%, 30% 39%, 24% 15%, 40% 25%);
  clip-path: polygon(50% 0%, 60% 25%, 76% 15%, 70% 39%, 96% 36%, 77% 55%, 88% 67%, 58% 64%, 50% 100%, 42% 64%, 12% 67%, 23% 55%, 4% 36%, 30% 39%, 24% 15%, 40% 25%);
  filter: saturate(0.88) drop-shadow(0 2px 2px rgba(106, 64, 37, 0.2));
  transform-origin: 50% 56%;
  animation: seasonal-leaf-fall 22s ease-in-out infinite;
}

:root[data-theme="autumn"] .seasonal-decor__particle:nth-child(3n + 2) {
  background: linear-gradient(135deg, #e5b45a, #c8752d 62%, #8c8a45);
}

:root[data-theme="autumn"] .seasonal-decor__particle:nth-child(4n) {
  background: linear-gradient(135deg, #efb34d, #c86d35 58%, #98513b);
}

.seasonal-decor__particle--1 {
  left: 4%;
  --particle-sway: 17px;
  --particle-sway-back: -9px;
  --particle-end: 12px;
  animation-delay: -3s;
  animation-duration: 18s;
}

.seasonal-decor__particle--2 {
  --particle-size: 8px;
  --particle-sway: -20px;
  --particle-sway-back: 9px;
  --particle-end: -13px;
  left: 12%;
  animation-delay: -12s;
  animation-duration: 22s;
}

.seasonal-decor__particle--3 {
  --particle-size: 15px;
  --particle-sway: 26px;
  --particle-sway-back: -15px;
  --particle-end: 18px;
  left: 21%;
  animation-delay: -7s;
  animation-duration: 25s;
}

.seasonal-decor__particle--4 {
  --particle-size: 9px;
  --particle-sway: -25px;
  --particle-sway-back: 13px;
  --particle-end: -17px;
  left: 30%;
  animation-delay: -18s;
  animation-duration: 24s;
}

.seasonal-decor__particle--5 {
  --particle-size: 13px;
  --particle-sway: 25px;
  --particle-sway-back: -14px;
  --particle-end: 16px;
  left: 70%;
  animation-delay: -9s;
  animation-duration: 21s;
}

.seasonal-decor__particle--6 {
  --particle-size: 7px;
  --particle-sway: -18px;
  --particle-sway-back: 10px;
  --particle-end: -11px;
  left: 79%;
  animation-delay: -15s;
  animation-duration: 26s;
}

.seasonal-decor__particle--7 {
  --particle-size: 14px;
  --particle-sway: 23px;
  --particle-sway-back: -12px;
  --particle-end: 15px;
  left: 88%;
  animation-delay: -5s;
  animation-duration: 23s;
}

.seasonal-decor__particle--8 {
  --particle-size: 10px;
  --particle-sway: -16px;
  --particle-sway-back: 8px;
  --particle-end: -10px;
  left: 96%;
  animation-delay: -20s;
  animation-duration: 27s;
}

:root[data-theme="winter"] .seasonal-decor__particle--1 {
  --particle-size: 7px;
  --snow-opacity: 0.4;
  left: 3%;
  animation-delay: -4.7s;
  animation-duration: 17.3s;
}

:root[data-theme="winter"] .seasonal-decor__particle--2 {
  --particle-size: 12px;
  --snow-opacity: 0.64;
  left: 9%;
  animation-delay: -15.2s;
  animation-duration: 25.7s;
}

:root[data-theme="winter"] .seasonal-decor__particle--3 {
  --particle-size: 5px;
  --snow-opacity: 0.34;
  left: 16%;
  animation-delay: -8.9s;
  animation-duration: 20.6s;
}

:root[data-theme="winter"] .seasonal-decor__particle--4 {
  --particle-size: 10px;
  --snow-opacity: 0.56;
  left: 23%;
  animation-delay: -21.4s;
  animation-duration: 28.1s;
}

:root[data-theme="winter"] .seasonal-decor__particle--5 {
  --particle-size: 6px;
  --snow-opacity: 0.38;
  left: 30%;
  animation-delay: -2.1s;
  animation-duration: 18.8s;
}

:root[data-theme="winter"] .seasonal-decor__particle--6 {
  --particle-size: 14px;
  --snow-opacity: 0.68;
  left: 37%;
  animation-delay: -18.6s;
  animation-duration: 30.4s;
}

:root[data-theme="winter"] .seasonal-decor__particle--7 {
  --particle-size: 8px;
  --snow-opacity: 0.48;
  left: 44%;
  animation-delay: -11.7s;
  animation-duration: 23.2s;
}

:root[data-theme="winter"] .seasonal-decor__particle--8 {
  --particle-size: 5px;
  --snow-opacity: 0.32;
  left: 51%;
  animation-delay: -25.3s;
  animation-duration: 31.6s;
}

:root[data-theme="winter"] .seasonal-decor__particle--9 {
  --particle-size: 11px;
  --particle-sway: -31px;
  --particle-sway-back: 17px;
  --particle-end: -20px;
  --snow-opacity: 0.61;
  left: 58%;
  animation-delay: -6.4s;
  animation-duration: 26.8s;
}

:root[data-theme="winter"] .seasonal-decor__particle--10 {
  --particle-size: 6px;
  --particle-sway: 20px;
  --particle-sway-back: -12px;
  --particle-end: 14px;
  --snow-opacity: 0.36;
  left: 64%;
  animation-delay: -19.8s;
  animation-duration: 22.4s;
}

:root[data-theme="winter"] .seasonal-decor__particle--11 {
  --particle-size: 9px;
  --particle-sway: -24px;
  --particle-sway-back: 13px;
  --particle-end: -16px;
  --snow-opacity: 0.53;
  left: 70%;
  animation-delay: -13.1s;
  animation-duration: 29.3s;
}

:root[data-theme="winter"] .seasonal-decor__particle--12 {
  --particle-size: 4px;
  --particle-sway: 15px;
  --particle-sway-back: -8px;
  --particle-end: 10px;
  --snow-opacity: 0.3;
  left: 76%;
  animation-delay: -3.5s;
  animation-duration: 19.7s;
}

:root[data-theme="winter"] .seasonal-decor__particle--13 {
  --particle-size: 13px;
  --particle-sway: -34px;
  --particle-sway-back: 19px;
  --particle-end: -23px;
  --snow-opacity: 0.66;
  left: 82%;
  animation-delay: -23.9s;
  animation-duration: 32.2s;
}

:root[data-theme="winter"] .seasonal-decor__particle--14 {
  --particle-size: 7px;
  --particle-sway: 23px;
  --particle-sway-back: -14px;
  --particle-end: 17px;
  --snow-opacity: 0.43;
  left: 88%;
  animation-delay: -9.6s;
  animation-duration: 24.5s;
}

:root[data-theme="winter"] .seasonal-decor__particle--15 {
  --particle-size: 10px;
  --particle-sway: -27px;
  --particle-sway-back: 15px;
  --particle-end: -18px;
  --snow-opacity: 0.57;
  left: 93%;
  animation-delay: -16.9s;
  animation-duration: 27.6s;
}

:root[data-theme="winter"] .seasonal-decor__particle--16 {
  --particle-size: 5px;
  --particle-sway: 18px;
  --particle-sway-back: -10px;
  --particle-end: 12px;
  --snow-opacity: 0.33;
  left: 98%;
  animation-delay: -1.3s;
  animation-duration: 21.9s;
}

@keyframes seasonal-snow-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }

  12% {
    opacity: var(--snow-opacity);
  }

  38% {
    transform: translate3d(var(--particle-sway), 38vh, 0) rotate(105deg);
  }

  72% {
    opacity: calc(var(--snow-opacity) * 0.86);
    transform: translate3d(var(--particle-sway-back), 80vh, 0) rotate(218deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--particle-end), 116vh, 0) rotate(320deg);
  }
}

@keyframes seasonal-snow-fall-alt {
  0% {
    opacity: 0;
    transform: translate3d(0, -16vh, 0) rotate(24deg);
  }

  8% {
    opacity: calc(var(--snow-opacity) * 0.78);
  }

  27% {
    transform: translate3d(var(--particle-sway-back), 21vh, 0) rotate(-72deg);
  }

  54% {
    opacity: var(--snow-opacity);
    transform: translate3d(var(--particle-sway), 56vh, 0) rotate(-176deg);
  }

  83% {
    opacity: calc(var(--snow-opacity) * 0.7);
    transform: translate3d(var(--particle-sway-back), 91vh, 0) rotate(-258deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--particle-end), 118vh, 0) rotate(-340deg);
  }
}

@keyframes seasonal-petal-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(0deg) rotateY(0deg);
  }

  14% {
    opacity: var(--flower-visibility);
  }

  36% {
    transform: translate3d(var(--particle-sway), 34vh, 0) rotate(112deg) rotateY(68deg);
  }

  68% {
    opacity: calc(var(--flower-visibility) * 0.9);
    transform: translate3d(var(--particle-sway-back), 76vh, 0) rotate(258deg) rotateY(150deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--particle-end), 116vh, 0) rotate(410deg) rotateY(220deg);
  }
}

@keyframes seasonal-flower-fall-alt {
  0% {
    opacity: 0;
    transform: translate3d(0, -16vh, 0) rotate(28deg) rotateY(18deg);
  }

  9% {
    opacity: calc(var(--flower-visibility) * 0.82);
  }

  28% {
    transform: translate3d(var(--particle-sway-back), 24vh, 0) rotate(-94deg) rotateY(76deg);
  }

  55% {
    opacity: var(--flower-visibility);
    transform: translate3d(var(--particle-sway), 58vh, 0) rotate(-216deg) rotateY(154deg);
  }

  82% {
    opacity: calc(var(--flower-visibility) * 0.82);
    transform: translate3d(var(--particle-sway-back), 91vh, 0) rotate(-338deg) rotateY(224deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--particle-end), 118vh, 0) rotate(-470deg) rotateY(292deg);
  }
}

@keyframes seasonal-leaf-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -14vh, 0) rotate(0deg) rotateY(0deg) scale(0.78);
  }

  12% {
    opacity: var(--leaf-opacity);
  }

  34% {
    transform: translate3d(var(--particle-sway), 32vh, 0) rotate(148deg) rotateY(72deg) scale(1);
  }

  68% {
    opacity: calc(var(--leaf-opacity) * 0.88);
    transform: translate3d(var(--particle-sway-back), 76vh, 0) rotate(354deg) rotateY(156deg) scale(0.72);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--particle-end), 118vh, 0) rotate(570deg) rotateY(230deg) scale(0.86);
  }
}

@media (max-width: 620px) {
  .seasonal-decor,
  .seasonal-decor__backdrop {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 8%, transparent 30%, transparent 70%, #000 92%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 8%, transparent 30%, transparent 70%, #000 92%, #000 100%);
  }

  .seasonal-decor__particle:nth-child(n + 3):nth-child(-n + 6) {
    display: none;
  }

  :root[data-theme="winter"] .seasonal-decor__particle {
    display: none;
  }

  :root[data-theme="spring"] .seasonal-decor__particle {
    display: none;
  }

  :root[data-theme="autumn"] .seasonal-decor__particle:nth-child(n + 9) {
    display: none;
  }

  :root[data-theme="spring"] :is(
    .seasonal-decor__particle--1,
    .seasonal-decor__particle--3,
    .seasonal-decor__particle--5,
    .seasonal-decor__particle--7,
    .seasonal-decor__particle--9,
    .seasonal-decor__particle--11,
    .seasonal-decor__particle--13,
    .seasonal-decor__particle--15
  ) {
    display: block;
  }

  :root[data-theme="spring"] .seasonal-decor__particle--1 { left: 5%; }
  :root[data-theme="spring"] .seasonal-decor__particle--3 { left: 18%; }
  :root[data-theme="spring"] .seasonal-decor__particle--5 { left: 31%; }
  :root[data-theme="spring"] .seasonal-decor__particle--7 { left: 44%; }
  :root[data-theme="spring"] .seasonal-decor__particle--9 { left: 57%; }
  :root[data-theme="spring"] .seasonal-decor__particle--11 { left: 70%; }
  :root[data-theme="spring"] .seasonal-decor__particle--13 { left: 83%; }
  :root[data-theme="spring"] .seasonal-decor__particle--15 { left: 96%; }

  :root[data-theme="winter"] :is(
    .seasonal-decor__particle--1,
    .seasonal-decor__particle--3,
    .seasonal-decor__particle--5,
    .seasonal-decor__particle--7,
    .seasonal-decor__particle--9,
    .seasonal-decor__particle--11,
    .seasonal-decor__particle--13,
    .seasonal-decor__particle--15
  ) {
    display: block;
  }

  .seasonal-decor__particle--1 {
    --particle-size: 9px;
    left: 5%;
  }

  .seasonal-decor__particle--2 {
    left: 16%;
  }

  .seasonal-decor__particle--7 {
    --particle-size: 10px;
    left: 84%;
  }

  .seasonal-decor__particle--8 {
    --particle-size: 8px;
    left: 95%;
  }

  .seasonal-decor__backdrop::before {
    background:
      radial-gradient(circle at 0 10%, var(--decor-color-1), transparent 24%),
      radial-gradient(circle at 100% 34%, var(--decor-color-2), transparent 21%),
      radial-gradient(circle at 90% 96%, var(--decor-color-3), transparent 22%);
  }

}

/* The compact delivery strip gets a recognisable scene for every seasonal theme. */
.seasonal-promo {
  --promo-season-color: rgba(255, 255, 255, 0.92);
  --promo-season-accent: rgba(255, 255, 255, 0.72);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  color: var(--promo-season-color);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 45%, transparent 55%, #000 66%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 45%, transparent 55%, #000 66%, #000 100%);
}

:root:is(
  [data-theme="winter"],
  [data-theme="spring"],
  [data-theme="summer"],
  [data-theme="autumn"]
) .seasonal-promo {
  display: block;
}

:root[data-theme="winter"] [data-top-promo-content] {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.seasonal-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 50%, var(--promo-season-color), transparent 19%),
    radial-gradient(circle at 92% 50%, var(--promo-season-accent), transparent 19%);
  opacity: 0.14;
}

:root[data-theme="winter"] .seasonal-promo {
  --promo-season-color: #fff8df;
  --promo-season-accent: #d9b968;
}

:root[data-theme="spring"] .seasonal-promo {
  --promo-season-color: #ffe1ef;
  --promo-season-accent: #fff0a8;
}

:root[data-theme="summer"] .seasonal-promo {
  --promo-season-color: #315f43;
  --promo-season-accent: #78994f;
}

:root[data-theme="autumn"] .seasonal-promo {
  --promo-season-color: #8c4c1e;
  --promo-season-accent: #d79a43;
}

.seasonal-promo__cluster {
  position: absolute;
  top: 50%;
  left: clamp(14px, 8vw, 138px);
  display: flex;
  height: 100%;
  align-items: center;
  transform: translateY(-50%);
}

.seasonal-promo__cluster--end {
  right: clamp(14px, 8vw, 138px);
  left: auto;
}

.seasonal-promo__motif {
  position: relative;
  display: none;
  height: 100%;
  min-width: 76px;
  align-items: center;
  gap: 9px;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.32));
}

:root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__motif {
  opacity: 0.62;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.14));
}

:root[data-theme="summer"] .seasonal-promo__motif--summer {
  filter: drop-shadow(0 2px 5px rgba(49, 95, 67, 0.12));
}

.seasonal-promo__cluster--end .seasonal-promo__motif {
  flex-direction: row-reverse;
}

:root[data-theme="winter"] .seasonal-promo__motif--winter,
:root[data-theme="spring"] .seasonal-promo__motif--spring,
:root[data-theme="summer"] .seasonal-promo__motif--summer,
:root[data-theme="autumn"] .seasonal-promo__motif--autumn {
  display: flex;
}

.seasonal-promo__icon {
  flex: none;
}

:root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__icon {
  stroke-width: 1.45;
}

.seasonal-promo__icon--primary {
  --promo-primary-rotate: 0deg;
  width: 29px;
  height: 29px;
  animation: seasonal-promo-breathe 4.8s ease-in-out infinite;
}

:root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__icon--primary {
  width: 24px;
  height: 24px;
}

.seasonal-promo__icon--secondary {
  width: 17px;
  height: 17px;
  color: var(--promo-season-accent);
  animation: seasonal-promo-drift 5.4s ease-in-out infinite;
}

:root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__icon--secondary {
  width: 14px;
  height: 14px;
}

:root[data-theme="winter"] .seasonal-promo__icon--secondary {
  width: 19px;
  height: 19px;
}

.seasonal-promo__icon--sparkle {
  position: absolute;
  top: 2px;
  left: 22px;
  width: 11px;
  height: 11px;
  color: var(--promo-season-accent);
  animation: seasonal-promo-twinkle 2.6s ease-in-out infinite;
}

.seasonal-promo__cluster--end .seasonal-promo__icon--sparkle {
  right: 22px;
  left: auto;
}

:root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__icon--sparkle {
  width: 8px;
  height: 8px;
}

:root[data-theme="summer"] .seasonal-promo::before {
  opacity: 0.07;
}

:root[data-theme="autumn"] .seasonal-promo__motif--autumn {
  filter: none;
}

.seasonal-promo__particles {
  position: absolute;
  inset: 0;
}

.seasonal-promo__particle {
  --promo-particle-drift: 5px;
  position: absolute;
  top: -7px;
  left: 5%;
  display: block;
  width: 4px;
  height: 4px;
  opacity: 0.8;
}

.seasonal-promo__particle--1 { left: 3%; animation-delay: -1.2s !important; }
.seasonal-promo__particle--2 { left: 12%; --promo-particle-drift: -6px; animation-delay: -3.7s !important; }
.seasonal-promo__particle--3 { left: 21%; animation-delay: -2.4s !important; }
.seasonal-promo__particle--4 { left: 30%; --promo-particle-drift: -4px; animation-delay: -5.1s !important; }
.seasonal-promo__particle--5 { left: 39%; animation-delay: -0.7s !important; }
.seasonal-promo__particle--6 { left: 46%; --promo-particle-drift: -5px; animation-delay: -4.3s !important; }
.seasonal-promo__particle--7 { left: 54%; animation-delay: -2.9s !important; }
.seasonal-promo__particle--8 { left: 61%; --promo-particle-drift: -7px; animation-delay: -5.8s !important; }
.seasonal-promo__particle--9 { left: 70%; animation-delay: -1.8s !important; }
.seasonal-promo__particle--10 { left: 79%; --promo-particle-drift: -4px; animation-delay: -4.9s !important; }
.seasonal-promo__particle--11 { left: 88%; animation-delay: -3.1s !important; }
.seasonal-promo__particle--12 { left: 97%; --promo-particle-drift: -6px; animation-delay: -0.4s !important; }

:root[data-theme="winter"] .seasonal-promo__particle {
  border-radius: 50%;
  background: var(--promo-season-color);
  box-shadow: 0 0 5px rgba(255, 244, 203, 0.82);
  animation: seasonal-promo-fall 4.6s linear infinite;
}

:root[data-theme="winter"] .seasonal-promo__particle:nth-child(3n) {
  width: 2px;
  height: 2px;
  animation-duration: 3.7s;
}

:root[data-theme="spring"] .seasonal-promo__particle {
  width: 6px;
  height: 4px;
  border-radius: 90% 12% 82% 18%;
  background: var(--promo-season-color);
  box-shadow: 0 0 4px rgba(255, 215, 236, 0.54);
  animation: seasonal-promo-petal 5.8s ease-in-out infinite;
}

:root[data-theme="spring"] .seasonal-promo__particle:nth-child(3n) {
  background: var(--promo-season-accent);
}

:root[data-theme="summer"] .seasonal-promo__particle {
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, var(--promo-season-accent) 30%, transparent 72%);
  box-shadow: 0 0 7px rgba(120, 153, 79, 0.24);
  animation: seasonal-promo-mote 3.8s ease-in-out infinite;
}

:root[data-theme="autumn"] .seasonal-promo__particle {
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--promo-season-color);
  box-shadow: 0 0 6px rgba(172, 91, 28, 0.22);
  opacity: 0.42;
  animation: seasonal-promo-mote 4.4s ease-in-out infinite;
}

:root[data-theme="autumn"] .seasonal-promo__particle:nth-child(3n) {
  background: var(--promo-season-accent);
}

@keyframes seasonal-promo-breathe {
  0%,
  100% {
    opacity: 0.78;
    transform: translateY(1px) rotate(var(--promo-primary-rotate)) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translateY(-1px) rotate(var(--promo-primary-rotate)) scale(1.05);
  }
}

@keyframes seasonal-promo-drift {
  0%,
  100% {
    opacity: 0.7;
    translate: 0 2px;
  }

  50% {
    opacity: 1;
    translate: 2px -2px;
  }
}

@keyframes seasonal-promo-twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.72) rotate(-8deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.08) rotate(8deg);
  }
}

@keyframes seasonal-promo-fall {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0) scale(0.75);
  }

  18% {
    opacity: 0.88;
  }

  to {
    opacity: 0;
    transform: translate3d(var(--promo-particle-drift), 46px, 0) scale(1.05);
  }
}

@keyframes seasonal-promo-petal {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0) rotate(0deg);
  }

  20%,
  78% {
    opacity: 0.84;
  }

  to {
    opacity: 0;
    transform: translate3d(var(--promo-particle-drift), 45px, 0) rotate(240deg);
  }
}

@keyframes seasonal-promo-mote {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(5px) scale(0.68);
  }

  50% {
    opacity: 0.95;
    transform: translateY(-6px) scale(1.25);
  }
}

@media (max-width: 620px) {
  .seasonal-promo {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 18%, transparent 31%, transparent 69%, #000 82%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 18%, transparent 31%, transparent 69%, #000 82%, #000 100%);
  }

  .seasonal-promo__cluster {
    left: 5px;
  }

  .seasonal-promo__cluster--end {
    right: 5px;
    left: auto;
  }

  .seasonal-promo__motif {
    min-width: 37px;
    gap: 0;
  }

  .seasonal-promo__icon--primary {
    width: 25px;
    height: 25px;
  }

  :root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__icon--primary {
    width: 22px;
    height: 22px;
  }

  .seasonal-promo__icon--secondary {
    display: none;
  }

  :root[data-theme="winter"] .seasonal-promo__motif--winter {
    gap: 3px;
  }

  :root[data-theme="winter"] .seasonal-promo__icon--secondary {
    display: block;
    width: 15px;
    height: 15px;
  }

  .seasonal-promo__icon--sparkle {
    top: 1px;
    left: 18px;
    width: 9px;
    height: 9px;
  }

  .seasonal-promo__cluster--end .seasonal-promo__icon--sparkle {
    right: 18px;
    left: auto;
  }

  :root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__icon--sparkle {
    left: 16px;
    width: 7px;
    height: 7px;
  }

  :root:is([data-theme="winter"], [data-theme="spring"]) .seasonal-promo__cluster--end .seasonal-promo__icon--sparkle {
    right: 16px;
    left: auto;
  }

  .seasonal-promo__particle:nth-child(even) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme-transition="true"] :where(
    body,
    .app,
    .app-content,
    header,
    nav,
    footer,
    main,
    section,
    article,
    aside,
    button,
    input,
    select,
    textarea
  ),
  .seasonal-decor,
  .seasonal-decor__backdrop {
    transition-duration: 0.01ms;
  }

  :root:is(
    [data-theme="winter"],
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"]
  ) .seasonal-decor__particle {
    animation: none;
    will-change: auto;
  }

  .seasonal-promo__icon,
  .seasonal-promo__particle {
    animation: none;
    will-change: auto;
  }

}