/* Sky scene: a visual configuration layer for the existing vault storefront. */
/* The supplied wallpaper, its focal point and surface materials are configured here. */
#app .vault-scope, body.vault-tokens.vault-tokens {
  --scene-desktop: url('/storefront-style/sky-wallpaper-wide.webp');
  --scene-mobile: url('/storefront-style/sky-wallpaper-mobile.webp');
  --scene-position: 54% 50%;
  --scene-ink: #183449;
  --scene-muted: #506c7d;
  --scene-line: rgba(255,255,255,.58);
  --scene-glass: rgba(242,249,252,.54);
  --scene-soft: rgba(239,248,254,.26);
  --scene-hover: rgba(255,255,255,.68);
  --scene-shadow: 0 15px 42px -22px rgba(12,44,72,.36), inset 0 1px 0 rgba(255,255,255,.82);
  --font-head: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: var(--font-head);
  --bg: #c1dfed; --bg-warm: #d4e7ef; --surface: #f0f7fb; --surface-2: #e3f0f7;
  --ink: var(--scene-ink); --ink-2: #3b586c; --ink-3: var(--scene-muted);
  --border: rgba(255,255,255,.46); --border-strong: rgba(30,85,119,.24);
  --red: #205e88; --red-strong: #164969; --red-soft: #d8ebf6; --on-red: #f5fbff;
  --plum: #427c9e; --plum-soft: #e4f0f6;
  --teal: #267d82; --teal-strong: #21666b; --teal-soft: #d8eeed;
  --gold: #b39561; --gold-strong: #80683f; --gold-soft: #f0e8d8;
  --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 32px;
  --shadow: var(--scene-shadow); --shadow-lg: 0 24px 60px -28px rgba(10,39,60,.38);
  --ring: 0 0 0 4px rgba(37,107,154,.18);
}
.dark #app .vault-scope, .dark body.vault-tokens.vault-tokens {
  --scene-ink: #eef7fc; --scene-muted: #b7cbd9;
  --scene-line: rgba(220,242,255,.22);
  --scene-glass: rgba(16,40,60,.65);
  --scene-soft: rgba(30,61,83,.4);
  --scene-hover: rgba(52,86,110,.66);
  --scene-shadow: 0 15px 42px -22px rgba(0,12,28,.62), inset 0 1px 0 rgba(230,247,255,.22);
  --bg: #112b40; --bg-warm: #17354b; --surface: #1c3b53; --surface-2: #264b65;
  --ink: var(--scene-ink); --ink-2: #d0e1ec; --ink-3: var(--scene-muted);
  --border: rgba(220,242,255,.18); --border-strong: rgba(214,239,255,.34);
  --red: #8fc5e7; --red-strong: #b1ddf7; --red-soft: #244e69; --on-red: #102d42;
  --teal: #82c8c5; --teal-strong: #b1e3df; --teal-soft: #244b54;
  --gold: #dac59c; --gold-strong: #ebd9b8; --gold-soft: #4b4b42;
}
#app .vault-scope.has-backdrop {
  background: transparent; color: var(--scene-ink);
  --ui-bg-elevated: var(--scene-glass);
  --ui-bg-soft: var(--scene-soft);
  --ui-bg-muted: var(--scene-soft);
  --ui-bg-overlay: color-mix(in srgb,var(--surface) 76%,transparent);
  --ui-bg-overlay-strong: color-mix(in srgb,var(--surface) 88%,transparent);
}
#app .vault-scope .vault-backdrop {
  background: #71a6c4 var(--scene-desktop) var(--scene-position) / cover no-repeat;
}
.vault-backdrop picture { display: none; }
#app .vault-scope .vault-backdrop__scrim {
  background: linear-gradient(90deg,rgba(226,241,250,.43) 0%,rgba(224,241,250,.16) 34%,transparent 58%),
              linear-gradient(180deg,rgba(16,54,88,.03) 40%,rgba(20,58,82,.09) 100%);
}
.dark #app .vault-scope .vault-backdrop__scrim {
  background: linear-gradient(90deg,rgba(8,30,51,.6),rgba(10,33,54,.2) 55%,rgba(9,32,54,.12)),
              linear-gradient(180deg,rgba(7,25,43,.22),rgba(7,25,43,.38));
}

/* A floating glass navigation bar keeps the sky visible around it. */
#app .vault-scope.has-backdrop > header {
  top: 20px; width: calc(100% - 64px); max-width: 1180px; margin: 20px auto 0;
  border: 1px solid var(--scene-line); border-radius: 24px;
  background: color-mix(in srgb,var(--surface) 46%,transparent);
  -webkit-backdrop-filter: blur(26px) saturate(145%); backdrop-filter: blur(26px) saturate(145%);
  box-shadow: var(--scene-shadow);
}
#app .vault-scope > header > div { height: 64px; padding-left: 18px; padding-right: 18px; gap: 16px; }
#app .vault-scope > header a[title]:has(> img) { flex-shrink: 0; gap: 10px; }
#app .vault-scope > header a[title]:has(> img)::after {
  content: attr(title); font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--scene-ink);
}
#app .vault-scope > header a[title] > img { width: 34px; height: 34px; border-radius: 12px; box-shadow: 0 2px 9px rgba(23,58,83,.12); }
#app .vault-scope > header nav { gap: 3px; }
#app .vault-scope > header nav a { font-size: 13px; font-weight: 550; padding: 9px 13px; color: var(--ink-2); }
#app .vault-scope > header :is(a,button).rounded-full {
  border: 1px solid transparent; background: transparent; box-shadow: none; color: var(--ink-2);
  transition: background-color .2s ease,border-color .2s ease,transform .2s ease;
}
#app .vault-scope > header .ml-auto { gap: 6px; }
#app .vault-scope > header :is(a,button).grid.rounded-full {
  width: 36px; height: 36px; background: var(--scene-soft); border-color: rgba(255,255,255,.18);
}
#app .vault-scope > header a.bg-primary {
  padding: 9px 17px; background: #235d82; color: #f5fbff; border-color: rgba(255,255,255,.28);
  box-shadow: 0 4px 12px -5px rgba(11,56,88,.5),inset 0 1px 0 rgba(255,255,255,.22);
}
.dark #app .vault-scope > header a.bg-primary { background: #9bcdeb; color: #133a54; }
#app .vault-scope > header div.absolute:has(> button), #app .vault-scope > header div.absolute:has(> a) {
  border: 1px solid var(--scene-line); border-radius: 20px;
  background: color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); box-shadow: var(--scene-shadow);
}
#app .vault-scope > header div.absolute :is(a,button) { border-radius: 12px; }
#app .vault-scope.has-backdrop .text-muted-foreground { text-shadow: none; }

/* Homepage composition: content occupies the open sky to the left of the portrait. */
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) > main {
  width: calc(100% - 112px); max-width: 1136px; margin: 0 auto; flex: initial;
  min-height: calc(100svh - 86px); padding: 46px 0 44px;
}
#app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) {
  width: min(416px,100%); display: flex; flex-direction: column; gap: 26px;
}
#app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) > section {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
#app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) > section > div:first-child {
  margin-bottom: 14px; align-items: center; gap: 12px;
}
#app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) > section > div:first-child h2 {
  font-size: 24px; font-weight: 650; letter-spacing: -.035em; color: var(--scene-ink);
}
#app .vault-scope > main > div > section:has(a[href^="/categories/"]) > div:first-child h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ink-2);
}
#app .vault-scope > main > div > section:has(a[href^="/categories/"]) > div.grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
#app .vault-scope > main > div > section > div.grid > a[href^="/categories/"] {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px;
  min-height: 0; min-width: 150px; max-width: 100%; padding: 12px 17px 12px 12px;
  border: 1px solid var(--scene-line); border-radius: 18px;
  background: var(--scene-soft); color: var(--scene-ink);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--scene-shadow);
}
#app .vault-scope > main > div > section > div.grid > a[href^="/categories/"] > span {
  width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.24);
  border: 1px solid rgba(255,255,255,.36);
}
#app .vault-scope > main > div > section > div.grid > a[href^="/categories/"] > div { font-size: 13px; }
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) main a.rounded-full {
  height: 30px; padding: 0 11px; border: 1px solid var(--scene-line); border-radius: 999px;
  background: var(--scene-soft); color: var(--ink-2); font-size: 11px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
}
#app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) > section > div.grid:has(a.vault-glass-card) {
  grid-template-columns: 1fr; gap: 16px;
}

/* Existing product cards use a quiet, translucent surface rather than an opaque tile. */
#app .vault-scope .vault-glass-card {
  position: relative; isolation: isolate; border: 1px solid var(--scene-line); border-radius: 26px; padding: 15px;
  background: linear-gradient(145deg,rgba(255,255,255,.18),transparent 52%),var(--scene-glass);
  -webkit-backdrop-filter: blur(25px) saturate(145%); backdrop-filter: blur(25px) saturate(145%);
  box-shadow: var(--scene-shadow); color: var(--scene-ink); gap: 12px;
}
#app .vault-scope .vault-glass-card::before { content: none; }
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 15px; }
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child > span { height: 112px; border-radius: 17px; }
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child > span > img { object-fit: contain; object-position: center; }
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child > span > div { max-width: calc(100% - 8px); top: 4px; right: 4px; gap: 2px; }
#app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child > span > div > span { font-size: 9px; padding: 1px 4px; }
#app .vault-scope .vault-glass-card h3 { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
#app .vault-scope .vault-glass-card .text-xs { font-size: 10px; letter-spacing: .03em; }
#app .vault-scope .vault-glass-card > div:nth-child(2) > span {
  border: 1px solid rgba(255,255,255,.18); font-weight: 550; font-size: 10px;
}
#app .vault-scope .vault-glass-card > div:last-child { padding-top: 4px; align-items: center; }
#app .vault-scope .vault-glass-card .text-xl { font-size: 23px; font-weight: 650; letter-spacing: -.045em; }
#app .vault-scope .vault-glass-card button.bg-primary {
  padding: 10px 17px; min-height: 38px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #f5fbff;
  background: linear-gradient(145deg,#337fa8,#235b81);
  box-shadow: 0 5px 14px -6px rgba(11,55,88,.45),inset 0 1px 0 rgba(255,255,255,.28);
}
.dark #app .vault-scope .vault-glass-card button.bg-primary { background: linear-gradient(145deg,#a3d6ed,#83b8db); color: #143951; }

/* Footer is an existing glass dock, visually part of the same scene. */
#app .vault-scope.has-backdrop > footer {
  width: calc(100% - 64px); max-width: 1180px; margin: 20px auto 24px; border: 1px solid var(--scene-line); border-radius: 28px;
  background: color-mix(in srgb,var(--surface) 62%,transparent);
  -webkit-backdrop-filter: blur(28px) saturate(135%); backdrop-filter: blur(28px) saturate(135%); box-shadow: var(--scene-shadow);
}
#app .vault-scope > footer > div:first-child { padding: 26px 28px 22px; gap: 26px; }
#app .vault-scope > footer > div:last-child { padding: 14px 28px 18px; border-color: var(--scene-line); font-size: 11px; }
#app .vault-scope > footer h4 { font-size: 12px; margin-bottom: 10px; letter-spacing: .08em; }
#app .vault-scope > footer a:not(:has(img)) { width: fit-content; font-size: 12px; padding: 4px 0; border-radius: 6px; color: var(--ink-2); }
#app .vault-scope > footer p { font-size: 12px; max-width: 28ch; color: var(--scene-muted); }
#app .vault-scope > footer a:has(img) img { width: 36px; height: 36px; border-radius: 12px; }

/* Existing purchase surfaces keep their selection, disabled and numeric states. */
body.vault-tokens.vault-tokens [role="dialog"] {
  background: linear-gradient(145deg,rgba(255,255,255,.13),transparent 60%),color-mix(in srgb,var(--surface) 85%,transparent);
  border-color: var(--scene-line); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: var(--scene-shadow),0 28px 80px -30px rgba(7,30,48,.5);
}
body.vault-tokens.vault-tokens [role="dialog"] button { border-radius: 12px; }
body.vault-tokens.vault-tokens [role="dialog"] button.bg-primary { background: #235e86; color: #f5fbff; border: 1px solid rgba(255,255,255,.32); }
.dark body.vault-tokens.vault-tokens [role="dialog"] button.bg-primary { background: #97cdea; color: #14374e; }
#app .vault-scope .buy-panel, #app .vault-scope .vault-glass-sub, #app .vault-scope .vault-glass-pill {
  background: var(--scene-glass); border-color: var(--scene-line); box-shadow: var(--scene-shadow);
}
#app .vault-scope .sku-card { background: var(--scene-soft); border-color: var(--scene-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
#app .vault-scope .sku-card.is-on { background: color-mix(in srgb,var(--red) 13%,var(--scene-glass)); border-color: var(--red); box-shadow: 0 0 0 1px color-mix(in srgb,var(--red) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.2); }
#app .vault-scope .sku-card.is-on .sku-card__price { color: var(--red-strong); }
#app .vault-scope .vault-glass-primary { background: linear-gradient(145deg,#337fa8,#235b81); border-color: rgba(255,255,255,.34); color: #f5fbff; box-shadow: 0 6px 16px -8px rgba(9,50,79,.48),inset 0 1px 0 rgba(255,255,255,.23); }
.dark #app .vault-scope .vault-glass-primary { background: linear-gradient(145deg,#a3d6ed,#83b8db); color: #143951; }

@media (hover:hover) and (pointer:fine) {
  #app .vault-scope > header :is(a,button).rounded-full:hover { background-color: var(--scene-hover); border-color: var(--scene-line); }
  #app .vault-scope > header a.bg-primary:hover { background: #164d73; color: white; }
  #app .vault-scope .vault-glass-card:hover {
    background: linear-gradient(145deg,rgba(255,255,255,.2),transparent 52%),var(--scene-hover);
    border-color: var(--scene-line); box-shadow: var(--scene-shadow),0 18px 36px -26px rgba(9,42,65,.4); transform: translateY(-3px);
  }
  #app .vault-scope > main > div > section > div.grid > a[href^="/categories/"]:hover { background: var(--scene-hover); transform: translateY(-2px); }
  #app .vault-scope .vault-glass-card button.bg-primary:hover { background: #174f77; color: white; }
  #app .vault-scope .vault-glass-primary:hover:not(:disabled) { background: #174f77; color: white; box-shadow: 0 8px 20px -10px rgba(9,50,79,.5); }
  #app .vault-scope > footer a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
}
#app .vault-scope :is(a,button,input):focus-visible, body.vault-tokens.vault-tokens [role="dialog"] :is(button,input):focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
#app .vault-scope button:active:not(:disabled) { transform: scale(.97); }

@media (min-width:1600px) {
  #app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) > main { padding-top: 70px; }
}
@media (max-width:1100px) {
  #app .vault-scope > header a[title]:has(> img)::after { display: none; }
  #app .vault-scope > header > div { gap: 10px; }
  #app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) > main { width: calc(100% - 80px); }
  #app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) { width: min(372px,100%); }
}
@media (max-width:720px) {
  #app .vault-scope .vault-backdrop { background-image: var(--scene-mobile); background-position: 50% 28%; }
  #app .vault-scope .vault-backdrop__scrim { background: linear-gradient(180deg,rgba(22,65,99,.06),rgba(16,58,85,.04) 38%,rgba(214,235,244,.24) 75%,rgba(218,237,245,.48)); }
  .dark #app .vault-scope .vault-backdrop__scrim { background: linear-gradient(180deg,rgba(8,29,49,.28),rgba(8,29,49,.16) 38%,rgba(8,29,49,.64)); }
  #app .vault-scope.has-backdrop > header { width: calc(100% - 28px); margin-top: 14px; top: 12px; border-radius: 22px; }
  #app .vault-scope > header > div { height: 58px; padding: 0 12px; }
  #app .vault-scope > header .ml-auto { gap: 5px; }
  #app .vault-scope > header :is(a,button).grid.rounded-full { width: 34px; height: 34px; }
  #app .vault-scope > header a[title] > img { width: 32px; height: 32px; }
  #app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) > main {
    width: calc(100% - 36px); padding-top: clamp(220px,33svh,320px); padding-bottom: 24px; min-height: auto;
  }
  #app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) { width: 100%; gap: 22px; }
  #app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) > section:has(> div.grid > a[href^="/categories/"]) {
    border: 1px solid var(--scene-line); border-radius: 24px; padding: 17px;
    background: var(--scene-glass); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: var(--scene-shadow);
  }
  #app .vault-scope > main > div > section:has(a[href^="/categories/"]) > div:first-child { margin-bottom: 11px; }
  #app .vault-scope > main > div > section > div.grid > a[href^="/categories/"] { padding: 8px 13px 8px 9px; border-radius: 14px; min-width: 132px; }
  #app .vault-scope > main > div:has(> section > div.grid > a[href^="/categories/"]) > section:has(a.vault-glass-card) > div:first-child h2 { color: #f3fbff; text-shadow: 0 1px 9px rgba(8,40,65,.65); font-size: 23px; }
  #app .vault-scope .vault-glass-card { padding: 13px; border-radius: 25px; background: color-mix(in srgb,var(--surface) 74%,transparent); }
  #app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child { grid-template-columns: 92px minmax(0,1fr); gap: 12px; }
  #app .vault-scope:has(> main > div > section > div.grid > a[href^="/categories/"]) .vault-glass-card > div:first-child > span { height: 92px; }
  #app .vault-scope.has-backdrop > footer { width: calc(100% - 28px); margin-top: 8px; margin-bottom: 16px; border-radius: 25px; background: color-mix(in srgb,var(--surface) 75%,transparent); }
  #app .vault-scope > footer > div:first-child { padding: 22px 20px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 20px; }
  #app .vault-scope > footer > div:first-child > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 13px; }
  #app .vault-scope > footer p { margin-top: 0; max-width: 27ch; }
  #app .vault-scope > footer > div:last-child { padding: 14px 20px; gap: 9px; }
}
@media (max-width:360px) { #app .vault-scope > header .ml-auto { gap: 3px; } #app .vault-scope > header :is(a,button).grid.rounded-full { width: 30px; height: 32px; } }
@media (prefers-reduced-motion:reduce) { #app .vault-scope *,body.vault-tokens.vault-tokens [role="dialog"] * { transition:none!important; animation:none!important; } #app .vault-scope :is(a,button):is(:hover,:active) { transform:none!important; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #app .vault-scope,body.vault-tokens.vault-tokens { --scene-glass: var(--surface); --scene-soft: var(--surface-2); }
  #app .vault-scope.has-backdrop > header,#app .vault-scope.has-backdrop > footer { background: var(--surface); }
}