/* Blue Sky Scent — Sky Atelier visual level-up, 2026
   Loaded last on purpose: this is the canonical visual finish for public UI. */

:root {
  --atelier-ink: #10151f;
  --atelier-paper: #f6f8fc;
  --atelier-blue: #2f6fed;
  --atelier-violet: #7a45e0;
  --atelier-line: rgba(32, 49, 78, .12);
  --atelier-glass: rgba(255, 255, 255, .78);
  --atelier-shadow: 0 26px 80px rgba(31, 57, 105, .14);
  --atelier-shadow-soft: 0 14px 42px rgba(31, 57, 105, .09);
  --atelier-radius: clamp(24px, 2.4vw, 38px);
}

html[data-theme="dark"] {
  --atelier-ink: #f4f6fb;
  --atelier-paper: #0a0b0e;
  --atelier-line: rgba(255, 255, 255, .11);
  --atelier-glass: rgba(21, 24, 29, .78);
  --atelier-shadow: 0 30px 90px rgba(0, 0, 0, .52);
  --atelier-shadow-soft: 0 16px 48px rgba(0, 0, 0, .34);
}

/* Shared visual finish -------------------------------------------------- */
body[data-bss-levelup="ready"] {
  background-color: var(--atelier-paper);
}

.bss-levelup-progress {
  position: fixed;
  z-index: 2100;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--bss-scroll-progress, 0));
  transform-origin: right center;
  background: linear-gradient(90deg, var(--atelier-blue), #5f8dfb 52%, var(--atelier-violet));
  box-shadow: 0 0 18px rgba(95, 141, 251, .5);
}

body.commerce-page :where(.shop-button, .shop-icon-button, .shop-account-link),
body.access-page :where(.btn, .access-card),
body.login-page :where(button, .btn),
body.customer-auth-page :where(button, .btn),
body.visitor-login-body :where(button, .btn),
body.register-page :where(button, .btn) {
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 260ms cubic-bezier(.22, 1, .36, 1),
    transform 260ms cubic-bezier(.22, 1, .36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.commerce-page :where(.shop-button, .shop-account-link):hover,
  body.access-page .btn:hover,
  body.login-page :where(button, .btn):hover,
  body.customer-auth-page :where(button, .btn):hover,
  body.visitor-login-body :where(button, .btn):hover,
  body.register-page :where(button, .btn):hover {
    transform: translateY(-2px);
  }
}

/* Storefront shell ----------------------------------------------------- */
body.commerce-home {
  --hero-pointer-x: 50%;
  --hero-pointer-y: 25%;
  color: var(--atelier-ink);
  background:
    radial-gradient(circle at 8% 18%, rgba(47, 111, 237, .08), transparent 30rem),
    radial-gradient(circle at 92% 44%, rgba(122, 69, 224, .065), transparent 32rem),
    var(--atelier-paper) !important;
}

body.commerce-home .shop-container {
  width: min(100% - 40px, 1380px);
}

body.commerce-home .shop-announcement {
  min-height: 38px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 22%, transparent 78%, rgba(255, 255, 255, .08)),
    linear-gradient(100deg, #245fe0, #4f67ee 48%, #7943df) !important;
}

body.commerce-home .shop-announcement .shop-container {
  min-height: 38px;
}

body.commerce-home .shop-announcement :where(p, a, a:hover, a:visited) {
  color: #fff !important;
}

body.commerce-home .shop-announcement a {
  text-decoration-color: rgba(255, 255, 255, .52) !important;
}

body.commerce-home .shop-header {
  min-height: 96px;
  padding-block: 12px;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

body.commerce-home .shop-header::before {
  inset: 8px max(14px, calc((100vw - 1420px) / 2));
  border: 1px solid var(--atelier-line) !important;
  border-radius: 26px !important;
  background: color-mix(in srgb, var(--bss-surface) 82%, transparent) !important;
  box-shadow: var(--atelier-shadow-soft), inset 0 1px rgba(255, 255, 255, .26) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
}

body.commerce-home .shop-header-row {
  min-height: 72px;
}

body.commerce-home .shop-brand img {
  width: 48px;
  height: 48px;
  padding: 7px;
  border: 1px solid var(--atelier-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bss-surface) 82%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .22);
}

body.commerce-home .shop-brand strong {
  letter-spacing: .07em;
}

body.commerce-home .shop-nav {
  gap: 3px;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--bss-surface-muted) 58%, transparent) !important;
}

body.commerce-home .shop-nav :where(a, button) {
  min-height: 40px;
  padding-inline: 14px !important;
  border-radius: 12px !important;
}

body.commerce-home .shop-nav .active {
  box-shadow: 0 8px 24px rgba(47, 111, 237, .28), inset 0 1px rgba(255, 255, 255, .25);
}

body.commerce-home .shop-header-actions {
  gap: 7px;
}

body.commerce-home .shop-icon-button,
body.commerce-home .shop-account-link,
body.commerce-home .theme-toggle {
  border-color: var(--atelier-line) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--bss-surface) 72%, transparent) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
}

@media (hover: hover) and (pointer: fine) {
  body.commerce-home .shop-icon-button:hover {
    color: var(--bss-primary) !important;
    border-color: color-mix(in srgb, var(--bss-primary) 38%, var(--atelier-line)) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--bss-primary) 14%, transparent);
  }
}

/* Hero — editorial, sculptural, theme-safe ---------------------------- */
body.commerce-home .shop-home-hero-v12 {
  position: relative;
  isolation: isolate;
  min-height: min(790px, calc(100svh - 38px));
  overflow: hidden;
  border: 1px solid var(--atelier-line) !important;
  border-inline: 0 !important;
  border-radius: 0 0 clamp(38px, 5vw, 72px) clamp(38px, 5vw, 72px) !important;
  background:
    radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(95, 141, 251, .15), transparent 23rem),
    radial-gradient(circle at 8% 16%, rgba(47, 111, 237, .17), transparent 31rem),
    radial-gradient(circle at 91% 13%, rgba(122, 69, 224, .15), transparent 29rem),
    linear-gradient(135deg, #f8fbff 0%, #edf3ff 50%, #f7f0ff 100%) !important;
}

body.commerce-home .shop-home-hero-v12::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .32;
  pointer-events: none;
  background-image:
    linear-gradient(var(--atelier-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--atelier-line) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 86%);
}

body.commerce-home .shop-home-hero-v12::after {
  content: "BLUE SKY";
  position: absolute;
  z-index: -1;
  inset-inline-start: -1.5vw;
  inset-block-end: -2.5vw;
  color: rgba(47, 111, 237, .055);
  font: 900 clamp(96px, 17vw, 260px)/.74 sans-serif;
  letter-spacing: -.08em;
  white-space: nowrap;
  pointer-events: none;
}

body.commerce-home .premium-hero-shell {
  grid-template-columns: minmax(0, .98fr) minmax(440px, 1.02fr) !important;
  gap: clamp(50px, 7vw, 110px) !important;
  min-height: 630px !important;
  padding-block: 38px 88px;
}

body.commerce-home .shop-home-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

body.commerce-home .shop-home-hero-copy::before {
  content: "SIGNATURE COLLECTION";
  display: block;
  width: max-content;
  margin-block-end: 18px;
  color: var(--bss-primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
  direction: ltr;
}

body.commerce-home .premium-hero-label {
  width: min(100%, 440px);
  margin-block-end: 24px;
}

body.commerce-home .premium-hero-label i {
  height: 1px;
  background: linear-gradient(90deg, var(--atelier-line), var(--bss-primary));
}

body.commerce-home .shop-home-hero-copy h1,
html[data-theme="light"] body.commerce-home .shop-home-hero-copy h1,
html[data-theme="dark"] body.commerce-home .shop-home-hero-copy h1 {
  position: relative;
  max-width: 760px !important;
  margin-block: 0 28px;
  color: #16213a !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  box-shadow: none !important;
  font-size: clamp(54px, 5.7vw, 86px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 16px 45px rgba(40, 74, 134, .10);
}

body.commerce-home .shop-home-hero-copy h1::after {
  content: "";
  display: block;
  width: 86px;
  height: 7px;
  margin-block-start: 24px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--atelier-blue), var(--atelier-violet));
  box-shadow: 0 8px 22px rgba(47, 111, 237, .25);
}

body.commerce-home .shop-home-hero-copy > p {
  max-width: 650px !important;
  margin-block: 0 30px;
  color: #556176 !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 2 !important;
}

body.commerce-home .shop-home-hero-actions {
  gap: 12px;
}

body.commerce-home .shop-home-hero-actions .shop-button {
  min-height: 56px !important;
  padding-inline: 24px !important;
  border-radius: 16px !important;
}

body.commerce-home .premium-primary-cta {
  border: 0 !important;
  background: linear-gradient(120deg, #2462e5, #3978ef 55%, #7548e2) !important;
  box-shadow: 0 16px 36px rgba(47, 111, 237, .28), inset 0 1px rgba(255, 255, 255, .3) !important;
}

body.commerce-home .shop-home-hero-actions .shop-button-ghost {
  color: var(--atelier-ink) !important;
  border: 1px solid var(--atelier-line) !important;
  background: color-mix(in srgb, var(--bss-surface) 74%, transparent) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28);
  backdrop-filter: blur(14px);
}

body.commerce-home .premium-hero-stage {
  position: relative;
  perspective: 1200px;
}

body.commerce-home .premium-hero-stage::before,
body.commerce-home .premium-hero-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

body.commerce-home .premium-hero-stage::before {
  inset-inline-start: -24px;
  inset-block-start: 46px;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  box-shadow: inset 0 0 0 12px rgba(255, 255, 255, .07), 0 14px 34px rgba(23, 56, 111, .20);
}

body.commerce-home .premium-hero-stage::after {
  content: "01";
  inset-inline-end: -18px;
  inset-block-end: 86px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 48px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(10, 18, 38, .66);
  box-shadow: 0 16px 38px rgba(20, 41, 82, .30);
  backdrop-filter: blur(16px);
  font: 800 12px/1 sans-serif;
  letter-spacing: .2em;
}

body.commerce-home .premium-product-sculpture,
html[data-theme="light"] body.commerce-home .premium-product-sculpture,
html[data-theme="dark"] body.commerce-home .premium-product-sculpture {
  position: relative;
  min-height: 540px !important;
  overflow: hidden;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-radius: 44px 16px 44px 16px !important;
  background:
    radial-gradient(circle at 74% 18%, rgba(191, 169, 255, .40), transparent 27%),
    radial-gradient(circle at 18% 78%, rgba(109, 205, 255, .19), transparent 29%),
    linear-gradient(145deg, #173870 0%, #2366dc 46%, #7541de 100%) !important;
  box-shadow:
    0 45px 100px rgba(35, 79, 170, .31),
    inset 0 1px rgba(255, 255, 255, .42),
    inset 0 -60px 90px rgba(18, 26, 65, .18) !important;
  transform: rotateY(-2deg) rotateX(1deg);
}

body.commerce-home .premium-product-sculpture::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(255, 255, 255, .23) !important;
  border-radius: 34px 10px 34px 10px !important;
  background:
    linear-gradient(110deg, transparent 0 35%, rgba(255, 255, 255, .09) 43%, transparent 51%) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none;
}

body.commerce-home .premium-product-sculpture::after {
  content: "EAU DE PARFUM · BLUE SKY";
  position: absolute;
  inset-inline-start: 24px;
  inset-block-start: 50%;
  color: rgba(255, 255, 255, .62);
  font: 800 9px/1 sans-serif;
  letter-spacing: .22em;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
}

body.commerce-home .shop-bottle-scene-large {
  filter: drop-shadow(0 30px 22px rgba(10, 24, 54, .28));
}

body.commerce-home .shop-bottle {
  box-shadow:
    inset 18px 0 26px rgba(255, 255, 255, .34),
    inset -18px 0 28px rgba(47, 111, 237, .12),
    0 28px 56px rgba(9, 29, 72, .30) !important;
}

body.commerce-home .premium-product-notes span {
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(12px);
}

body.commerce-home .premium-hero-footer {
  position: relative;
  z-index: 4;
  transform: translateY(-46px) !important;
}

body.commerce-home .premium-hero-trust {
  min-height: 80px;
  padding: 9px !important;
  border: 1px solid var(--atelier-line) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--bss-surface) 78%, transparent) !important;
  box-shadow: var(--atelier-shadow-soft), inset 0 1px rgba(255, 255, 255, .32) !important;
  backdrop-filter: blur(22px) saturate(140%);
}

body.commerce-home .premium-hero-trust > span {
  min-height: 60px;
  border-radius: 16px;
}

body.commerce-home .premium-hero-trust svg {
  color: var(--bss-primary);
}

body.commerce-home .premium-marquee {
  margin-block-start: -1px;
  border-block: 0 !important;
  background: linear-gradient(90deg, #265ee0, #4f6bec 48%, #7540dc) !important;
  box-shadow: 0 14px 32px rgba(47, 111, 237, .16);
}

/* Store sections ------------------------------------------------------- */
body.commerce-home .shop-section {
  position: relative;
  padding-block: clamp(82px, 9vw, 144px) !important;
}

body.commerce-home .premium-section-head {
  gap: clamp(24px, 4vw, 64px);
  margin-block-end: clamp(38px, 5vw, 66px);
}

body.commerce-home .premium-section-head h2,
body.commerce-home .premium-guide-intro h2,
body.commerce-home .premium-story-copy h2,
body.commerce-home .home-selected-copy h2 {
  color: var(--atelier-ink) !important;
  font-size: clamp(34px, 4vw, 64px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body.commerce-home .premium-section-head > div > span,
body.commerce-home .home-selected-label,
body.commerce-home .premium-guide-intro > span,
body.commerce-home .premium-story-copy > span {
  color: var(--bss-primary) !important;
  font-weight: 900;
  letter-spacing: .15em;
}

/* Dark section bands only in dark theme — light mode uses stability tokens. */
html[data-theme="dark"] body.commerce-home .premium-categories {
  color: #f4f6fb !important;
  border-color: rgba(140, 176, 255, .10) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(95, 141, 251, .14), transparent 30%),
    radial-gradient(circle at 16% 84%, rgba(147, 102, 239, .11), transparent 27%),
    linear-gradient(135deg, #0c1425, #101b31 58%, #151526) !important;
}

html[data-theme="dark"] body.commerce-home .premium-categories .premium-category-head h2,
html[data-theme="dark"] body.commerce-home .premium-categories .premium-category-head p {
  color: #f4f6fb !important;
}

html[data-theme="dark"] body.commerce-home .premium-categories .premium-category-head p {
  opacity: .72;
}

html[data-theme="dark"] body.commerce-home .premium-categories .shop-empty-state {
  color: #f4f6fb !important;
  border-color: rgba(140, 176, 255, .28) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 141, 251, .16), transparent 58%),
    rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
}

html[data-theme="dark"] body.commerce-home .premium-categories .shop-empty-state :where(h3, p, a) {
  color: #f4f6fb !important;
}

html[data-theme="dark"] body.commerce-home .premium-featured,
html[data-theme="dark"] body.commerce-home .premium-discovery {
  color: #f4f6fb !important;
  border-color: rgba(140, 176, 255, .10) !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(95, 141, 251, .12), transparent 29%),
    radial-gradient(circle at 14% 88%, rgba(147, 102, 239, .09), transparent 27%),
    linear-gradient(135deg, #0c1425, #101b31 58%, #151526) !important;
}

html[data-theme="dark"] body.commerce-home .premium-featured .premium-section-head h2,
html[data-theme="dark"] body.commerce-home .premium-featured .premium-section-head p,
html[data-theme="dark"] body.commerce-home .premium-discovery .premium-section-head h2,
html[data-theme="dark"] body.commerce-home .premium-discovery .premium-section-head p {
  color: #f4f6fb !important;
}

html[data-theme="dark"] body.commerce-home :where(.premium-featured, .premium-discovery) .premium-section-head p {
  opacity: .72;
}

html[data-theme="dark"] body.commerce-home .premium-featured .shop-empty-state {
  color: #f4f6fb !important;
  border-color: rgba(140, 176, 255, .28) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 141, 251, .16), transparent 58%),
    rgba(255, 255, 255, .055) !important;
}

html[data-theme="dark"] body.commerce-home .premium-featured .shop-empty-state :where(h3, p, a) {
  color: #f4f6fb !important;
}

body.commerce-home :where(.shop-category-grid, .shop-product-grid) > [role="status"],
body.commerce-home :where(.shop-category-grid, .shop-product-grid) > .shop-empty-state {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 42px;
  border: 1px dashed color-mix(in srgb, var(--bss-primary) 34%, var(--atelier-line));
  border-radius: var(--atelier-radius);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bss-primary) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--bss-surface) 76%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .22);
}

body.commerce-home .premium-category-grid > *,
body.commerce-home .premium-product-grid > * {
  border-radius: var(--atelier-radius) !important;
  box-shadow: var(--atelier-shadow-soft);
}

body.commerce-home .home-selected-section {
  padding-block: clamp(40px, 6vw, 96px) !important;
}

body.commerce-home .home-selected-card {
  min-height: 680px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: clamp(34px, 4vw, 58px) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(176, 144, 246, .30), transparent 25rem),
    radial-gradient(circle at 88% 82%, rgba(95, 180, 251, .18), transparent 28rem),
    linear-gradient(135deg, #14336b, #2464d8 58%, #6840ca) !important;
  box-shadow: 0 42px 100px rgba(27, 67, 146, .27), inset 0 1px rgba(255, 255, 255, .28) !important;
}

body.commerce-home .home-selected-copy h2,
body.commerce-home .home-selected-copy p {
  color: #fff !important;
}

body.commerce-home .home-selected-label {
  color: #dbe7ff !important;
  opacity: .86;
}

body.commerce-home .home-selected-copy p {
  opacity: .78;
}

body.commerce-home .home-selected-highlights span {
  border-color: rgba(255, 255, 255, .20) !important;
  background: rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(12px);
}

body.commerce-home .premium-discovery-grid > * {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  border: 1px solid var(--atelier-line) !important;
  border-radius: var(--atelier-radius) !important;
  background: color-mix(in srgb, var(--bss-surface) 88%, transparent) !important;
  box-shadow: var(--atelier-shadow-soft) !important;
}

body.commerce-home .premium-discovery-grid > *::after {
  content: "";
  position: absolute;
  inset-inline-end: -46px;
  inset-block-end: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bss-primary) 18%, transparent), transparent 66%);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}

body.commerce-home .premium-discovery-main {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .2) !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .18), transparent 28%),
    linear-gradient(135deg, #205bd6, #7040d6) !important;
}

body.commerce-home .premium-discovery-grid > a,
body.commerce-home .premium-discovery-grid > a :where(h3, p, span, small) {
  color: var(--atelier-ink) !important;
}

body.commerce-home .premium-discovery-grid > a :where(p, small) {
  opacity: .68;
}

body.commerce-home .premium-discovery-main,
body.commerce-home .premium-discovery-main :where(h3, p, span, small, u, b) {
  color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
  body.commerce-home .premium-discovery-grid > *:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--bss-primary) 44%, var(--atelier-line)) !important;
    box-shadow: var(--atelier-shadow) !important;
  }

  body.commerce-home .premium-discovery-grid > *:hover::after {
    transform: scale(1.28);
  }
}

body.commerce-home .premium-guide-shell {
  overflow: hidden;
  border: 1px solid var(--atelier-line) !important;
  border-radius: clamp(34px, 4vw, 58px) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(47, 111, 237, .10), transparent 26rem),
    color-mix(in srgb, var(--bss-surface) 88%, transparent) !important;
  box-shadow: var(--atelier-shadow) !important;
}

body.commerce-home .premium-guide-notes li {
  border-color: var(--atelier-line) !important;
}

body.commerce-home .premium-guide-shell :where(.premium-guide-intro h2, .premium-guide-notes strong) {
  color: var(--atelier-ink) !important;
}

body.commerce-home .premium-guide-shell :where(.premium-guide-intro p, .premium-guide-notes em) {
  color: var(--bss-text-soft) !important;
}

body.commerce-home .premium-guide-shell .premium-guide-notes small {
  color: var(--bss-primary) !important;
}

body.commerce-home .premium-story {
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(44px, 6vw, 86px) clamp(44px, 6vw, 86px) 0 0;
}

html[data-theme="dark"] body.commerce-home .premium-story {
  background:
    radial-gradient(circle at 12% 15%, rgba(95, 141, 251, .20), transparent 30rem),
    radial-gradient(circle at 88% 78%, rgba(147, 102, 239, .18), transparent 28rem),
    #0a0b0e !important;
}

body.commerce-home .premium-story::after {
  content: "MANIFESTO";
  position: absolute;
  z-index: -1;
  inset-inline-end: -2vw;
  inset-block-end: -1vw;
  color: rgba(47, 111, 237, .05);
  font: 900 clamp(100px, 18vw, 280px)/.75 sans-serif;
  letter-spacing: -.08em;
  direction: ltr;
}

html[data-theme="dark"] body.commerce-home .premium-story::after {
  color: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] body.commerce-home .premium-story-copy h2,
html[data-theme="dark"] body.commerce-home .premium-story-copy p {
  color: #f4f6fb !important;
}

html[data-theme="dark"] body.commerce-home .shop-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #0a0b0e !important;
}

/* Dark mode: true charcoal, readable type, controlled light ------------ */
html[data-theme="dark"] body.commerce-home {
  background:
    radial-gradient(circle at 6% 14%, rgba(95, 141, 251, .08), transparent 31rem),
    radial-gradient(circle at 94% 48%, rgba(147, 102, 239, .07), transparent 34rem),
    #0a0b0e !important;
}

html[data-theme="dark"] body.commerce-home .shop-home-hero-v12 {
  background:
    radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(95, 141, 251, .12), transparent 23rem),
    radial-gradient(circle at 10% 16%, rgba(47, 111, 237, .14), transparent 31rem),
    radial-gradient(circle at 90% 12%, rgba(122, 69, 224, .12), transparent 28rem),
    linear-gradient(135deg, #0a0b0e 0%, #101216 56%, #17151f 100%) !important;
}

html[data-theme="dark"] body.commerce-home .shop-home-hero-v12::after {
  color: rgba(140, 176, 255, .035);
}

html[data-theme="dark"] body.commerce-home .shop-home-hero-copy h1 {
  color: #f4f6fb !important;
  -webkit-text-fill-color: #f4f6fb !important;
  background: none !important;
  text-shadow: 0 16px 50px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] body.commerce-home .shop-home-hero-copy > p {
  color: #b2bac8 !important;
}

html[data-theme="dark"] body.commerce-home .premium-section-head h2,
html[data-theme="dark"] body.commerce-home .premium-guide-intro h2 {
  color: #f4f6fb !important;
}

html[data-theme="dark"] body.commerce-home .shop-home-hero-actions .shop-button-ghost {
  color: #f4f6fb !important;
  background: rgba(21, 24, 29, .76) !important;
}

/* Access and authentication ------------------------------------------- */
body:is(.access-page, .login-page, .customer-auth-page, .visitor-login-body, .register-page) {
  min-height: 100dvh;
  color: var(--atelier-ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(47, 111, 237, .19), transparent 30rem),
    radial-gradient(circle at 92% 86%, rgba(122, 69, 224, .16), transparent 32rem),
    linear-gradient(135deg, #f8fbff, #eef3ff 52%, #f6efff) !important;
}

body:is(.access-page, .login-page, .customer-auth-page, .visitor-login-body, .register-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(var(--atelier-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--atelier-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

html[data-theme="dark"] body:is(.access-page, .login-page, .customer-auth-page, .visitor-login-body, .register-page) {
  background:
    radial-gradient(circle at 10% 8%, rgba(47, 111, 237, .15), transparent 30rem),
    radial-gradient(circle at 92% 86%, rgba(122, 69, 224, .12), transparent 32rem),
    #0a0b0e !important;
}

body.access-page .access-shell,
body.login-page .role-login-shell,
body.customer-auth-page .customer-auth-shell,
body.visitor-login-body .visitor-login-layout,
body.register-page .register-shell {
  position: relative;
  z-index: 1;
}

body.access-page .access-shell {
  width: min(1180px, calc(100% - 32px));
}

body.access-page .access-card,
body.login-page .role-login-shell,
body.customer-auth-page :where(.customer-auth-story, .customer-auth-card),
body.visitor-login-body :where(.visitor-login-brand, .visitor-login-card),
body.register-page .register-card {
  border: 1px solid var(--atelier-line) !important;
  border-radius: clamp(26px, 3vw, 42px) !important;
  background: color-mix(in srgb, var(--bss-surface) 80%, transparent) !important;
  box-shadow: var(--atelier-shadow) !important;
  backdrop-filter: blur(24px) saturate(145%);
}

body.access-page .access-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
}

body.access-page .access-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -54px;
  inset-block-end: -54px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bss-primary) 18%, transparent), transparent 67%);
}

@media (hover: hover) and (pointer: fine) {
  body.access-page .access-card:hover {
    border-color: color-mix(in srgb, var(--bss-primary) 42%, var(--atelier-line)) !important;
    transform: translateY(-8px);
    box-shadow: 0 34px 90px rgba(31, 57, 105, .19) !important;
  }
}

body.login-page .role-login-visual,
body.customer-auth-page .customer-auth-story,
body.visitor-login-body .visitor-login-brand {
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 255, 255, .18), transparent 28%),
    linear-gradient(145deg, #173a78, #2869e1 55%, #7141d7) !important;
}

body.login-page .role-login-visual :where(h1, h2, h3, p, small, strong, span, a, li),
body.customer-auth-page .customer-auth-story :where(h1, h2, h3, p, small, strong, span, a, li),
body.visitor-login-body .visitor-login-brand :where(h1, h2, h3, p, small, strong, span, a, li) {
  color: #fff !important;
}

body.login-page .role-login-visual :where(p, small, li),
body.customer-auth-page .customer-auth-story :where(p, small, li),
body.visitor-login-body .visitor-login-brand :where(p, small, li) {
  opacity: .78;
}

body:is(.login-page, .customer-auth-page, .visitor-login-body, .register-page) :where(input, select, textarea) {
  border: 1px solid var(--atelier-line) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--bss-surface) 88%, transparent) !important;
  color: var(--atelier-ink) !important;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
}

body:is(.login-page, .customer-auth-page, .visitor-login-body, .register-page) :where(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--bss-primary) 62%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bss-primary) 14%, transparent) !important;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1120px) {
  body.commerce-home .premium-hero-shell {
    grid-template-columns: minmax(0, .94fr) minmax(360px, .78fr) !important;
    gap: 38px !important;
  }

  body.commerce-home .shop-home-hero-copy h1,
  html[data-theme="dark"] body.commerce-home .shop-home-hero-copy h1 {
    font-size: clamp(48px, 6.3vw, 72px) !important;
  }
}

@media (max-width: 820px) {
  body.commerce-home .shop-container {
    width: min(100% - 20px, 1380px);
  }

  body.commerce-home .shop-header {
    min-height: 80px;
    padding-block: 6px;
  }

  body.commerce-home .shop-header::before {
    inset: 5px 8px;
    border-radius: 20px !important;
  }

  body.commerce-home .shop-header-row {
    min-height: 66px;
  }

  body.commerce-page.commerce-home .shop-header-luxury .shop-theme-slot,
  body.commerce-page.commerce-home .shop-header-luxury .shop-theme-slot .theme-control {
    display: block !important;
  }

  body.commerce-home .shop-theme-slot .theme-control {
    position: relative;
  }

  body.commerce-home .shop-theme-slot .theme-trigger {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--atelier-line) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--bss-surface) 74%, transparent) !important;
    color: var(--atelier-ink) !important;
  }

  body.commerce-home .shop-theme-slot :where(.theme-current-label, .theme-chevron) {
    display: none !important;
  }

  body.commerce-home .shop-theme-slot .theme-current-icon,
  body.commerce-home .shop-theme-slot .theme-current-icon svg {
    width: 20px;
    height: 20px;
  }

  body.commerce-home .shop-theme-slot .theme-menu {
    position: fixed !important;
    z-index: 1200 !important;
    inset-inline: 10px !important;
    inset-block-start: 116px !important;
    width: auto !important;
    max-height: calc(100dvh - 132px);
    overflow-y: auto;
    border: 1px solid var(--atelier-line) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--bss-surface) 96%, transparent) !important;
    box-shadow: var(--atelier-shadow) !important;
    backdrop-filter: blur(24px) saturate(145%);
  }

  body.commerce-home .shop-nav {
    top: calc(100% - 2px) !important;
    border: 1px solid var(--atelier-line) !important;
    background: color-mix(in srgb, var(--bss-surface) 94%, transparent) !important;
    box-shadow: var(--atelier-shadow) !important;
    backdrop-filter: blur(24px);
  }

  body.commerce-home .shop-home-hero-v12 {
    min-height: 0;
    border-radius: 0 0 38px 38px !important;
  }

  body.commerce-home .premium-hero-shell {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
    min-height: 0 !important;
    padding-block: 52px 92px;
  }

  body.commerce-home .shop-home-hero-copy {
    max-width: 680px;
    text-align: center;
    margin-inline: auto;
  }

  body.commerce-home .shop-home-hero-copy::before,
  body.commerce-home .premium-hero-label {
    margin-inline: auto;
  }

  body.commerce-home .shop-home-hero-copy h1::after {
    margin-inline: auto;
  }

  body.commerce-home .premium-product-sculpture {
    width: min(100%, 560px);
    min-height: 500px !important;
    margin-inline: auto;
    transform: none !important;
  }

  body.commerce-home .premium-hero-stage::before {
    inset-inline-start: max(0px, calc(50% - 300px));
  }

  body.commerce-home .premium-hero-stage::after {
    inset-inline-end: max(0px, calc(50% - 300px));
  }

  body.commerce-home .premium-section-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  body.commerce-home .shop-container {
    width: min(100% - 16px, 1380px);
  }

  body.commerce-home .shop-announcement p {
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.commerce-home .shop-brand img {
    width: 42px;
    height: 42px;
  }

  body.commerce-home .shop-header-actions {
    gap: 3px;
  }

  body.commerce-home .shop-home-hero-v12::before {
    background-size: 54px 54px;
  }

  body.commerce-home .premium-hero-shell {
    padding-block: 40px 76px;
  }

  body.commerce-home .shop-home-hero-copy::before {
    font-size: 9px;
  }

  body.commerce-home .shop-home-hero-copy h1,
  html[data-theme="dark"] body.commerce-home .shop-home-hero-copy h1 {
    margin-block-end: 22px;
    font-size: clamp(39px, 12.4vw, 54px) !important;
    line-height: 1.08 !important;
  }

  body.commerce-home .shop-home-hero-copy > p {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  body.commerce-home .shop-home-hero-actions {
    grid-template-columns: 1fr;
  }

  body.commerce-home .premium-product-sculpture {
    min-height: 410px !important;
    border-radius: 30px 12px 30px 12px !important;
  }

  body.commerce-home .premium-hero-stage::before {
    width: 60px;
    height: 60px;
  }

  body.commerce-home .premium-hero-stage::after {
    inset-block-end: 42px;
    width: 64px;
  }

  body.commerce-home .premium-hero-footer {
    transform: translateY(-28px) !important;
  }

  body.commerce-home .premium-hero-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.commerce-home .premium-hero-trust > span {
    min-height: 70px;
  }

  body.commerce-home .shop-section {
    padding-block: 72px !important;
  }

  body.commerce-home .premium-section-head h2,
  body.commerce-home .premium-guide-intro h2,
  body.commerce-home .premium-story-copy h2,
  body.commerce-home .home-selected-copy h2 {
    font-size: clamp(32px, 9.5vw, 45px) !important;
  }

  body.commerce-home .home-selected-card {
    min-height: 0;
    border-radius: 30px !important;
  }

  body.access-page .access-shell {
    width: min(100% - 16px, 1180px);
  }

  body.access-page .access-card {
    min-height: 250px;
  }

  body:is(.access-page, .login-page, .customer-auth-page, .visitor-login-body, .register-page)::before {
    background-size: 48px 48px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-bss-levelup="ready"] [data-levelup-section] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 620ms cubic-bezier(.22, 1, .36, 1), transform 620ms cubic-bezier(.22, 1, .36, 1);
  }

  body[data-bss-levelup="ready"] [data-levelup-section][data-levelup-visible="true"] {
    opacity: 1;
    transform: translateY(0);
  }

  body.commerce-home .premium-product-sculpture {
    animation: atelier-float 8s ease-in-out infinite;
  }
}

@keyframes atelier-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}