@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Outfit:wght@300;400;500;600;700&display=swap");

:root {
  --c-primary: #6b3e1d;
  --c-accent: #c4a35a;
  --c-bg: #f6efe4;
  --c-text: #2a1c12;
  --radius: 22px;
  --shadow: 0 24px 60px rgba(42, 28, 18, .16);
  --glass: rgba(255, 248, 238, .72);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --scroll-track: rgba(42, 28, 18, .06);
  --scroll-thumb: color-mix(in srgb, var(--c-primary) 55%, var(--c-accent));
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 99px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-accent), var(--c-primary));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4b56a, var(--c-primary));
  background-clip: padding-box;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Outfit, "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 50%),
    radial-gradient(900px 400px at 110% 0%, color-mix(in srgb, var(--c-primary) 22%, transparent), transparent 45%),
    var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, .brand { font-family: "Cormorant Garamond", Georgia, serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(1180px, calc(100% - 24px)); margin: 0 auto; }
.store-frame {
  width: calc(100% - 28px);
  margin: 0 auto;
}
.site-header {
  position: sticky; top: 14px; z-index: 40;
  width: 100%; margin: 14px 0 0;
  overflow: visible;
  backdrop-filter: blur(22px);
  background: linear-gradient(180deg, rgba(255,252,246,.94), rgba(255,246,232,.82));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 36px;
  box-shadow: 0 16px 50px rgba(42,28,18,.1);
  transition: top .4s var(--ease), border-radius .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 42%, transparent);
  border-radius: 30px;
  pointer-events: none;
}
.topbar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  padding: 12px 20px;
  transition: padding .4s var(--ease), gap .4s var(--ease);
}
.topbar .brand { justify-self: start; }
.nav-desk { min-width: 0; display: flex; justify-content: center; }
.header-actions { justify-self: end; }
.icon-btn.menu-toggle, .nav-mobile { display: none; }
.site-header.compact {
  top: 8px;
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(42,28,18,.16);
}
.site-header.compact::before { inset: 4px; border-radius: 999px; }
.site-header.compact .topbar { padding: 6px 16px; gap: 8px 12px; }
.site-header.compact .brand { font-size: 1.05rem; gap: 8px; }
.site-header.compact .brand-mark { width: 32px; height: 32px; border-radius: 11px; }
.site-header.compact .menu a { padding: 6px 12px; font-size: 14px; }
.site-header.compact .icon-btn { width: 34px; height: 34px; }
.site-header.compact .icon-btn svg { width: 16px; height: 16px; }
.site-header.compact .cart-count {
  width: 18px; min-width: 18px; height: 18px; font-size: 9px;
  top: -5px; right: -5px; border-width: 1.5px;
}
.brand { display: flex; gap: 12px; align-items: center; font-weight: 700; letter-spacing: .02em; font-size: 1.35rem; line-height: 1.1; transition: font-size .4s var(--ease), gap .4s var(--ease); }
.brand-name { white-space: nowrap; }
.brand-logo {
  height: 48px; width: auto; max-width: 200px; object-fit: contain;
  flex-shrink: 0; display: block;
  transition: height .4s var(--ease), max-width .4s var(--ease);
}
.site-header.compact .brand-logo { height: 36px; max-width: 150px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c-primary) 40%, transparent);
  animation: spinGlow 8s linear infinite;
  transition: width .4s var(--ease), height .4s var(--ease), border-radius .4s var(--ease);
}
@keyframes spinGlow {
  0%, 100% { filter: saturate(1); transform: rotate(0deg); }
  50% { filter: saturate(1.25); transform: rotate(6deg); }
}
.menu { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; justify-content: center; margin: 0; padding: 0; }
.menu > li { list-style: none; position: relative; }
.menu > li[hidden] { display: none !important; }
.menu a {
  padding: 8px 13px; display: block; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  color: var(--c-text); white-space: nowrap;
  transition: background .25s, transform .25s var(--ease), font-size .4s, padding .4s;
}
.menu a:hover, .drop:hover > a { background: color-mix(in srgb, var(--c-primary) 10%, transparent); transform: translateY(-1px); }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px);
  border-radius: 16px; box-shadow: var(--shadow); padding: 8px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: .28s var(--ease); z-index: 5;
}
.submenu a { font-size: 15px; font-weight: 700; padding: 10px 14px; border-radius: 12px; white-space: normal; }
.drop:hover .submenu,
.drop.is-open .submenu { opacity: 1; transform: none; pointer-events: auto; }
.menu-more { flex-shrink: 0; }
.menu-more .submenu { left: auto; right: 0; min-width: 240px; max-height: min(70vh, 420px); overflow: auto; }
.more-btn {
  padding: 8px 13px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--c-accent) 18%, transparent);
  color: var(--c-text); font: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .25s, transform .25s var(--ease);
}
.more-btn:hover, .menu-more.is-open .more-btn {
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  transform: translateY(-1px);
}
.site-header.compact .more-btn { padding: 6px 12px; font-size: 14px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 4px 2px 4px 0; }
.float-docks {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 46;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 18px; pointer-events: none;
}
.float-lang { pointer-events: auto; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
.float-lang-list {
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.float-lang.is-open .float-lang-list { opacity: 1; transform: none; pointer-events: auto; }
.float-orb {
  pointer-events: auto;
  width: 54px; height: 54px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
  background: #fff;
  color: var(--c-text);
  box-shadow: none;
  outline: 1px solid color-mix(in srgb, var(--c-accent) 35%, #ddd);
  transition: transform .3s var(--ease), outline-color .3s ease;
}
.float-orb:hover { transform: scale(1.06); outline-color: var(--c-accent); }
.float-wa {
  color: #fff;
  background: #25D366;
  outline: 0;
  animation: waSoft 2.8s ease-in-out infinite;
}
.float-wa svg { width: 26px; height: 26px; display: block; }
.float-wa-wrap {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.float-wa-wrap.is-talking .float-wa {
  animation: waTalk 1.4s ease-in-out infinite;
}
.wa-bubble {
  position: absolute;
  right: calc(100% + 14px);
  bottom: 4px;
  width: max-content;
  max-width: min(280px, calc(100vw - 98px));
  padding: 11px 14px 12px;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  color: var(--c-text);
  text-decoration: none;
  outline: 1px solid rgba(18, 140, 126, .18);
  transform-origin: right center;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.wa-bubble::before {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  outline: 1px solid rgba(18, 140, 126, .18);
}
.wa-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.7) 50%, transparent 75%);
  transform: translateX(-120%);
  pointer-events: none;
}
.wa-bubble.is-on {
  pointer-events: auto;
  animation: waIn .7s cubic-bezier(.16, 1, .3, 1) both;
}
.wa-bubble.is-on::after { animation: waSweep .9s .15s ease both; }
.wa-bubble.is-out {
  animation: waOut .45s cubic-bezier(.7, 0, .84, 0) both;
}
.wa-bubble-name {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #128C7E;
  margin-bottom: 5px;
}
.wa-bubble-body { position: relative; z-index: 1; }
.wa-bubble-text {
  display: none;
  font-size: 14px;
  line-height: 1.4;
  animation: waText .45s ease both;
}
.wa-bubble.is-ready .wa-dots { display: none; }
.wa-bubble.is-ready .wa-bubble-text { display: block; }
.wa-dots { display: flex; gap: 4px; padding: 5px 0 2px; }
.wa-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: #25D366;
  animation: waDot 1s ease-in-out infinite;
}
.wa-dots i:nth-child(2) { animation-delay: .16s; }
.wa-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes waIn {
  0% { opacity: 0; transform: translateX(42px) scale(.55); }
  62% { opacity: 1; transform: translateX(-8px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes waOut {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(36px) scale(.6); }
}
@keyframes waSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes waText {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes waTalk {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.1); }
}
@keyframes waDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-3px); opacity: 1; }
}
@media (max-width: 960px) {
  .wa-bubble {
    right: calc(100% + 10px);
    max-width: min(220px, calc(100vw - 86px));
    padding: 10px 12px 11px;
    border-radius: 16px 16px 4px 16px;
  }
  .wa-bubble-text { font-size: 13px; }
}
@media (max-width: 560px) {
  .wa-bubble {
    right: calc(100% + 8px);
    bottom: 2px;
    max-width: min(196px, calc(100vw - 78px));
  }
  .wa-bubble-name { font-size: 9px; }
  @keyframes waIn {
    0% { opacity: 0; transform: translateX(28px) scale(.62); }
    64% { opacity: 1; transform: translateX(-5px) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-bubble.is-on, .wa-bubble.is-out, .wa-bubble.is-on::after, .wa-bubble-text, .wa-dots i {
    animation: none !important;
  }
  .wa-bubble.is-on { opacity: 1; }
}
@keyframes waSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.flag {
  width: 26px; height: 26px; border-radius: 50%; display: block;
}
.flag-es { background: linear-gradient(180deg, #c60b1e 0 28%, #ffc400 28% 72%, #c60b1e 72%); }
.flag-en {
  background:
    radial-gradient(circle, #fff 0.8px, transparent 1px) 2px 2px / 6px 6px no-repeat,
    linear-gradient(#3c3b6e, #3c3b6e) 0 0 / 42% 54% no-repeat,
    repeating-linear-gradient(180deg, #b22234 0 7.7%, #fff 7.7% 15.4%);
}
.flag-fr { background: linear-gradient(90deg, #002395 33.3%, #fff 33.3% 66.6%, #ed2939 66.6%); }
.float-lang-list a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  outline: 1px solid rgba(0,0,0,.08);
  box-shadow: none;
}
.float-lang-list a.on { outline: 1.5px solid var(--c-accent); }
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 8px 18px rgba(42,28,18,.1);
  transition: transform .25s var(--ease), box-shadow .25s, width .4s var(--ease), height .4s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; transition: width .4s var(--ease), height .4s var(--ease); }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn.cart-btn {
  background: var(--c-primary); color: #fff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--c-primary) 32%, transparent);
}
.cart-count {
  position: absolute; top: -5px; right: -5px; z-index: 2;
  width: 20px; min-width: 20px; height: 20px; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #1a120a;
  font-size: 10px; font-weight: 800; line-height: 1;
  border: 2px solid rgba(255,248,238,.96);
  box-shadow: 0 4px 10px rgba(42,28,18,.2);
  pointer-events: none;
}
.cart-count[hidden] { display: none; }
.account-tabs { display: flex; gap: 8px; margin: 18px 0; }
.account-tabs a {
  padding: 10px 18px; border-radius: 999px; font-weight: 700;
  background: rgba(255,255,255,.7);
}
.account-tabs a.on { background: var(--c-primary); color: #fff; }
.account-form { max-width: 440px; }

.hero {
  position: relative; height: min(78vh, 680px); overflow: hidden;
  margin: 16px 0 0; border-radius: 36px;
  box-shadow: var(--shadow);
}
.hero::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 26px;
  pointer-events: none; z-index: 5;
}
.slides { height: 100%; }
.slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.12);
  transition: opacity 1.1s ease;
}
.slide.active { opacity: 1; z-index: 1; }
.slide.active img { animation: ken 8s ease forwards; }
@keyframes ken { from { transform: scale(1.12) translateY(12px); } to { transform: scale(1) translateY(0); } }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide .veil {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,8,3,.78) 8%, rgba(18,8,3,.22) 70%);
}
.slide-copy {
  position: absolute; z-index: 2; left: 8%; bottom: 15%;
  color: #fff; max-width: min(680px, 78%);
}
.kicker {
  display: inline-block; letter-spacing: .28em; text-transform: uppercase; font-size: 11px;
  opacity: .8; margin-bottom: 10px;
}
.slide.active .slide-copy > * {
  animation: rise .9s var(--ease) both;
}
.slide.active .slide-copy > *:nth-child(2) { animation-delay: .12s; }
.slide.active .slide-copy > *:nth-child(3) { animation-delay: .22s; }
.slide.active .slide-copy > *:nth-child(4) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.slide-copy h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); margin: 0 0 12px; line-height: 1.02; font-weight: 600; overflow-wrap: anywhere; }
.slide-copy p { font-size: 1.12rem; opacity: .92; max-width: 36ch; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; background: var(--c-accent); color: #1a120a;
  padding: 13px 24px; border-radius: 999px; font-weight: 700; border: 0; cursor: pointer; font: inherit;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn-hero {
  position: relative; overflow: hidden;
  animation: heroCta 2.2s ease-in-out infinite;
}
.btn-hero::after {
  content: "";
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: heroShine 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroCta {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
  50% { transform: translateY(-4px) scale(1.05); box-shadow: 0 18px 40px color-mix(in srgb, var(--c-accent) 60%, transparent); }
}
@keyframes heroShine {
  0% { transform: translateX(0); }
  100% { transform: translateX(320%); }
}
.btn.ghost { background: transparent; color: inherit; border: 1px solid currentColor; box-shadow: none; }
.hero-nav {
  position: absolute; z-index: 3; right: 5%; bottom: 16%; display: flex; flex-direction: column; gap: 10px;
}
.hero-nav button {
  width: 58px; height: 7px; border: 0; border-radius: 99px; background: rgba(255,255,255,.32); cursor: pointer;
  transition: width .35s, background .35s;
}
.hero-nav button.on { background: var(--c-accent); width: 72px; }
.progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--c-accent), #fff); z-index: 4; animation: bar 7s linear;
}
@keyframes bar { from { width: 0 } to { width: 100% } }
.orbs span {
  position: absolute; border-radius: 50%; filter: blur(2px); opacity: .22; pointer-events: none; z-index: 2;
  background: #fff; animation: float 9s ease-in-out infinite;
}
.orbs span:nth-child(1) { width: 90px; height: 90px; right: 18%; top: 18%; animation-delay: -2s; }
.orbs span:nth-child(2) { width: 40px; height: 40px; right: 28%; bottom: 22%; animation-delay: -4s; }
.orbs span:nth-child(3) { width: 22px; height: 22px; left: 46%; top: 22%; animation-delay: -1s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

.section { padding: 78px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.section h1, .section h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.catalog-hero {
  margin: 0 0 40px;
  padding: 8px 0 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 28%, transparent);
}
.catalog-hero .kicker {
  color: var(--c-accent);
  opacity: 1;
  margin-bottom: 12px;
}
.catalog-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -.035em;
  line-height: .95;
  margin: 0 0 14px;
}
.catalog-lead {
  margin: 0 0 18px;
  max-width: 38ch;
  font-size: 1.08rem;
  line-height: 1.5;
  opacity: .62;
}
.catalog-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.product-card { cursor: pointer; }
.card {
  background: rgba(255,255,255,.78); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(42,28,18,.2); }
}
.thumb {
  height: 188px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c-accent) 70%, #fff), transparent 42%),
    linear-gradient(145deg, var(--c-primary), var(--c-accent) 55%, #e8d5a8);
}
.thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}
.card-badges {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.badge-off, .badge-low {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1;
}
.badge-off {
  position: relative; overflow: hidden;
  color: #1a120a;
  background: linear-gradient(115deg, #f3d48a, var(--c-accent) 45%, #c9a24d);
  outline: 1px solid color-mix(in srgb, var(--c-accent) 55%, #fff);
  animation: offPulse 1.7s ease-in-out infinite;
}
.badge-off em { font-style: normal; font-size: 12px; letter-spacing: .02em; }
.badge-off::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 48%, transparent 66%);
  transform: translateX(-140%);
  animation: offShine 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes offPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes offShine {
  0%, 35% { transform: translateX(-140%); }
  70%, 100% { transform: translateX(140%); }
}
.badge-low { background: rgba(255,255,255,.92); color: var(--c-primary); }
.badge-sold { background: #2a1c12; color: #fff; }
.dot.is-empty { opacity: .32; }
.js-add.is-sold, .js-add:disabled {
  opacity: .42; cursor: not-allowed; pointer-events: none;
}
.qty-btn:disabled { opacity: .32; cursor: not-allowed; }
.price s { opacity: .45; margin-right: 8px; font-weight: 500; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; }
.card-body h3 { margin: 0 0 4px; font-size: 1.22rem; line-height: 1.2; }
.colors { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.dot {
  width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc; transition: transform .2s, box-shadow .2s;
}
.dot.on { box-shadow: 0 0 0 2px var(--c-primary); transform: scale(1.12); }
.price { font-weight: 700; color: var(--c-primary); letter-spacing: .02em; }
.card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.btn.add-cart {
  margin-top: 0; width: 100%; padding: 11px 14px; font-size: 14px;
  box-shadow: none;
  transition: transform .28s var(--ease), background .28s, color .28s, outline-color .28s;
}
.product-card .add-cart-desk {
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff;
  color: var(--c-text);
  outline: 1px solid color-mix(in srgb, var(--c-accent) 45%, #ddd);
}
.product-card .add-cart-desk:hover {
  background: var(--c-accent); color: #1a120a; outline-color: var(--c-accent);
  transform: none; box-shadow: none;
}
.product-card .add-fab { display: none; }
.btn.add-cart.is-added {
  background: #2f6b45; color: #fff;
  transform: scale(1.03);
  box-shadow: 0 10px 22px rgba(47,107,69,.28);
}
.icon-btn.cart-btn.cart-pop { animation: cartPop .45s var(--ease); }
@keyframes cartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-link { display: block; height: 100%; }
.product-card .thumb { display: block; }
.add-fab {
  position: absolute; z-index: 4; right: 12px; bottom: 12px;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--c-text);
  background: #fff;
  outline: 1px solid color-mix(in srgb, var(--c-accent) 50%, #ddd);
  box-shadow: none;
  animation: fabSoft 2.6s ease-in-out infinite;
  transition: background .25s, color .25s, outline-color .25s, transform .25s var(--ease);
}
.add-fab::before {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
  animation: fabRing 2.2s ease-out infinite;
  pointer-events: none;
}
.add-fab svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.add-fab:hover { animation: none; transform: scale(1.08); outline-color: var(--c-accent); background: var(--c-accent); color: #1a120a; }
.add-fab.is-added {
  animation: fabPop .45s var(--ease);
  background: #2f6b45;
  color: #fff;
  outline-color: #2f6b45;
}
@keyframes fabSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes fabRing {
  0% { transform: scale(.92); opacity: .55; }
  100% { transform: scale(1.2); opacity: 0; }
}
@keyframes fabPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.reveal { opacity: 0; transform: translateY(28px); animation: rise .8s var(--ease) forwards; }
.grid .card:nth-child(1) { animation-delay: .05s; }
.grid .card:nth-child(2) { animation-delay: .12s; }
.grid .card:nth-child(3) { animation-delay: .19s; }
.grid .card:nth-child(4) { animation-delay: .26s; }
.grid .card:nth-child(5) { animation-delay: .33s; }
.grid .card:nth-child(6) { animation-delay: .4s; }

.product-layout {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
  overflow: hidden;
}
.product-layout .thumb { height: min(72vh, 560px); border-radius: 0; }
.pdp-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px;
  align-items: start; margin-bottom: 56px;
}
.pdp-stage {
  border-radius: 28px; overflow: hidden;
  background: #efe6d6;
  aspect-ratio: 1 / 1;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pdp-thumbs button {
  width: 72px; height: 72px; padding: 0; border: 0; border-radius: 16px;
  overflow: hidden; cursor: pointer; background: #efe6d6;
  outline: 1px solid transparent;
}
.pdp-thumbs button.on { outline-color: var(--c-accent); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-buy .kicker { text-decoration: none; color: var(--c-accent); opacity: 1; }
.pdp-buy h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: -.03em; line-height: .95; margin: 8px 0 12px;
}
.pdp-score { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.stars { display: inline-flex; gap: 1px; letter-spacing: 0; color: #d8c8b0; }
.stars i { font-style: normal; font-size: 15px; }
.stars i.on { color: var(--c-accent); }
.pdp-badges { position: relative; top: auto; left: auto; margin: 0 0 14px; flex-direction: row; }
.fx-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .02em;
  opacity: .55;
}
.pdp-price { margin: 0 0 8px; font-size: 1.7rem; }
.pdp-price s { opacity: .4; margin-right: 8px; font-size: 1.05rem; }
.pdp-price small { font-size: 13px; opacity: .5; margin-left: 6px; }
.pdp-label { margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.pdp-colors .dot { width: 26px; height: 26px; }
.pdp-stock { margin: 8px 0 18px; font-size: 13px; opacity: .65; }
.pdp-buy .btn { margin-top: 0; width: 100%; max-width: 320px; box-shadow: none; }
.pdp-block {
  padding: 36px 0 8px;
  border-top: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.pdp-block h2 { margin: 0 0 16px; }
.pdp-copy { max-width: 62ch; line-height: 1.7; opacity: .8; font-size: 1.05rem; }
.pdp-reviews { display: grid; gap: 12px; }
.pdp-review {
  padding: 18px 20px; border-radius: 20px; background: #fff;
  outline: 1px solid rgba(42,28,18,.05);
}
.pdp-review header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pdp-review p { margin: 0; line-height: 1.55; opacity: .78; }

footer.site-foot {
  position: relative;
  overflow: hidden;
  color: var(--c-text);
  padding: 72px 0 32px;
  margin-top: 72px;
  border-radius: 44px 44px 0 0;
  background:
    radial-gradient(900px 280px at 50% -40px, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #fffdf8 0%, #f6ecdc 100%);
  border: 1px solid rgba(255,255,255,.85);
  border-bottom: 0;
  box-shadow: 0 -30px 80px rgba(42, 28, 18, .08);
}
footer.site-foot::before {
  content: "";
  position: absolute; inset: 14px 14px 0;
  border: 1px solid color-mix(in srgb, var(--c-accent) 42%, transparent);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  pointer-events: none;
}
.foot-glow {
  position: absolute; left: 50%; top: 0; width: 480px; height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.foot-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.foot-brand { display: inline-flex; margin-bottom: 12px; }
.foot-slogan {
  margin: 0 0 28px;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.45;
  opacity: .58;
}
.foot-brand img {
  height: 70px; width: auto; max-width: min(240px, 70vw);
  object-fit: contain;
}
.foot-mark { width: 72px; height: 72px; border-radius: 22px; }
.foot-acc { width: 100%; max-width: 920px; display: flex; flex-direction: column; align-items: center; }
.foot-acc-btn { display: none; }
.foot-contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 920px;
  margin-bottom: 32px;
}
.foot-line {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 28px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.foot-line + .foot-line::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 38%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, var(--c-accent), transparent);
}
.foot-line span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
}
.foot-line strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  opacity: .78;
}
a.foot-line:hover strong { color: var(--c-primary); opacity: 1; }
.foot-policies {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 0;
  margin-bottom: 28px;
}
.foot-policies a {
  color: var(--c-text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  padding: 0 16px;
  transition: opacity .25s, color .25s;
}
.foot-policies a + a { border-left: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent); }
.foot-policies a:hover { opacity: 1; color: var(--c-primary); }
.foot-copy {
  margin: 0;
  width: 100%;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--c-accent) 26%, transparent);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .42;
}
.legal-page { max-width: 760px; }
.legal-lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 36px;
  opacity: .78;
}
.legal-body { display: grid; gap: 26px; }
.legal-body article {
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
}
.legal-body h2 {
  margin: 0 0 8px;
  font-size: 1.45rem;
}
.legal-body p { margin: 0; line-height: 1.65; opacity: .82; }
.muted { opacity: .72; }

.backdrop {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(18, 10, 6, .42);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.backdrop.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; right: 0; top: 0; width: min(430px, 100%); height: 100%;
  height: 100dvh;
  background: #f7f1e8;
  z-index: 50;
  transform: translateX(108%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: none; pointer-events: auto; }
.cart-drawer { padding: 0; }
.cart-sheet {
  display: none;
  width: 42px; height: 4px; margin: 10px auto 0;
  border-radius: 99px; background: rgba(42,28,18,.16);
}
.cart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 22px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.cart-head .kicker {
  color: var(--c-accent); opacity: 1; margin-bottom: 6px;
}
.cart-head h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.55rem);
  letter-spacing: -.03em;
  display: flex; align-items: center; gap: 10px;
}
.cart-head-count {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 99px;
  font-family: Outfit, sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
  background: var(--c-accent); color: #1a120a;
}
.cart-x {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--c-text);
  outline: 1px solid rgba(0,0,0,.06);
  transition: background .25s, transform .25s var(--ease);
}
.cart-x:hover { background: var(--c-accent); transform: rotate(90deg); }
.cart-x svg { width: 18px; height: 18px; }
.cart-items {
  flex: 1; min-height: 0; overflow-x: visible; overflow-y: auto; padding: 16px 16px 12px;
  display: grid; align-content: start; gap: 12px;
}
.cart-empty {
  text-align: center; padding: 56px 18px;
  animation: cartEnter .55s var(--ease) both;
}
.cart-empty .kicker { color: var(--c-accent); opacity: 1; }
.cart-empty p:last-child {
  margin: 8px 0 0;
  font-size: 1.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.cart-item {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px 14px;
  align-items: start;
  position: relative;
  padding: 14px 52px 14px 12px;
  border-radius: 20px;
  background: #fff;
  outline: 1px solid rgba(42,28,18,.05);
  overflow: visible;
  transform-origin: center;
}
.cart-item.is-enter { animation: cartEnter .5s var(--ease) both; }
.cart-item.is-tick { animation: cartTick .42s var(--ease); }
.cart-item.is-drop { animation: cartDrop .38s var(--ease); }
@keyframes cartEnter {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes cartTick {
  0% { transform: scale(1); outline-color: rgba(42,28,18,.05); }
  40% { transform: scale(1.018); outline-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
  100% { transform: scale(1); outline-color: rgba(42,28,18,.05); }
}
@keyframes cartDrop {
  0% { transform: scale(1); }
  40% { transform: scale(.985); }
  100% { transform: scale(1); }
}
.qty-box span {
  display: inline-block; min-width: 1.2em;
  text-align: center; font-weight: 700; font-size: 13px;
}
.qty-box span.is-flip { animation: qtyFlip .4s var(--ease); }
@keyframes qtyFlip {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); color: var(--c-accent); }
  100% { transform: scale(1); }
}
.cart-line.is-flash { animation: lineFlash .45s var(--ease); }
@keyframes lineFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); color: var(--c-accent); }
  100% { transform: scale(1); }
}
.cart-head-count.is-pop, #cart-total.is-pop { animation: countPop .4s var(--ease); }
@keyframes countPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.cart-photo {
  width: 84px; height: 84px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(145deg, var(--c-primary), var(--c-accent));
}
.cart-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: flex; flex-direction: column; min-width: 0; overflow: visible; }
.cart-info h4 { margin: 0 0 4px; font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.cart-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 13px; opacity: .7; }
.cart-swatch { width: 11px; height: 11px; border-radius: 50%; outline: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.cart-row {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.cart-line { font-size: 14px; font-weight: 800; }
.qty-box {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f4eee4; border-radius: 999px; padding: 3px;
}
.qty-btn {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--c-text); font-size: 16px; line-height: 1;
}
.cart-trash {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  color: #c62828; background: #fdecea;
  box-shadow: 0 8px 16px rgba(198, 40, 40, .16);
  transition: transform .2s var(--ease), background .2s, color .2s;
}
.cart-trash:hover { background: #c62828; color: #fff; transform: scale(1.06); }
.cart-trash svg { display: block; }
.cart-remove { display: none; }
.cart-foot {
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--c-accent) 24%, transparent);
  background: rgba(255,255,255,.62);
  flex-shrink: 0;
}
.cart-total-row {
  display: flex; justify-content: space-between; align-items: flex-end;
}
.cart-total-row span { display: grid; gap: 2px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.cart-total-row small { font-size: 11px; letter-spacing: .12em; opacity: .8; }
.cart-total-row strong { display: inline-block; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; }
.cart-note { margin: 10px 0 14px; font-size: 13px; line-height: 1.45; }
.cart-cta {
  width: 100%; margin-top: 0;
  box-shadow: none;
}
.cart-cta:hover { transform: none; }
.cart-keep {
  display: block; width: 100%; margin-top: 10px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .5;
}
.cart-keep:hover { opacity: 1; }
.cart-drawer.is-empty .cart-note,
.cart-drawer.is-empty .cart-cta { display: none; }

.checkout h1 { margin-bottom: 18px; }
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  list-style: none; padding: 0; margin: 0 0 28px;
}
.steps li {
  text-align: center; font-size: 13px; font-weight: 700;
  padding: 10px 8px; border-radius: 999px;
  background: rgba(255,255,255,.55); opacity: .5;
}
.steps li.on { opacity: 1; background: var(--c-primary); color: #fff; }
.check-layout { display: grid; grid-template-columns: 1.4fr .7fr; gap: 22px; align-items: start; }
.check-panel, .check-side {
  background: rgba(255,255,255,.86); border-radius: 24px; padding: 22px;
  box-shadow: var(--shadow);
}
.step-pane { display: none; }
.step-pane.on { display: block; animation: rise .45s var(--ease); }
.check-panel label { display: block; margin: 12px 0 6px; font-size: 13px; }
.check-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.pay-options { display: grid; gap: 10px; }
.pay-opt {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px; border-radius: 16px; background: #fff; cursor: pointer;
  border: 1px solid rgba(42,28,18,.08);
}
.pay-opt:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 28%, transparent); }
.pay-opt input { width: auto; margin-top: 4px; }
.pay-opt span { display: block; font-size: 13px; opacity: .65; }
.check-side .kicker { margin-bottom: 8px; }
.mini-line { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(42,28,18,.06); font-size: 14px; }
.check-total { display: flex; justify-content: space-between; font-size: 1.15rem; margin-top: 12px; }
.deposit-box { background: #fff; border-radius: 16px; padding: 16px; margin-top: 12px; }
.pay-switch { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.pay-switch input { width: auto; margin-top: 6px; }
.pay-switch h2 { margin: 0; }
.pay-dash { margin: 0 0 18px; }
.pay-dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pay-dash h2 { margin: 0; }
.pay-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pay-pill {
  padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(42,28,18,.06);
}
.pay-pill.on { background: color-mix(in srgb, var(--c-accent) 35%, #fff); }
@media (max-width: 900px) {
  .check-layout, .steps { grid-template-columns: 1fr; }
}

.admin-shell {
  display: grid; grid-template-columns: minmax(240px, 280px) 1fr; min-height: 100vh;
  transition: grid-template-columns .4s var(--ease);
  background:
    radial-gradient(900px 400px at 0% 0%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent),
    #0f0b08;
  color: #f4eadc;
}
html.rail .admin-shell { grid-template-columns: 92px 1fr; }
.aside {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(280px 180px at 20% -10%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #1a120e 0%, #120c09 100%);
  border-right: 1px solid rgba(196,163,90,.16);
  padding: 0;
  overflow: hidden;
}
.aside-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 16px 14px; flex-shrink: 0;
}
.rail-btn {
  width: 36px; height: 36px; border: 0; cursor: pointer; flex-shrink: 0;
  border-radius: 12px; display: grid; place-items: center; color: #f4eadc;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  transition: transform .35s var(--ease), background .25s, border-color .25s;
}
.rail-btn:hover { background: rgba(196,163,90,.2); border-color: rgba(196,163,90,.35); }
html.rail .rail-btn { transform: rotate(180deg); }
.aside-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 12px; background: #fff; flex-shrink: 0; }
html.rail .aside-logo { width: 36px; height: 36px; }
.aside .logo-row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.aside .logo-row strong {
  font-family: "Cormorant Garamond", serif; font-size: 1.28rem; display: block; line-height: 1.1;
}
.logo-copy span {
  display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .45; margin-top: 3px;
}
.logo-copy, .nav-txt {
  overflow: hidden; white-space: nowrap;
  transition: opacity .28s var(--ease), max-width .35s var(--ease);
  max-width: 180px;
}
.aside nav {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-accent) 55%, transparent) transparent;
}
.aside nav::-webkit-scrollbar { width: 3px; }
.aside nav::-webkit-scrollbar-track { background: transparent; }
.aside nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-accent) 65%, transparent);
  border-radius: 99px;
}
.nav-group { margin-bottom: 8px; }
.nav-label {
  margin: 12px 10px 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  opacity: .38;
}
.aside nav a, .aside-foot a {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 14px; margin-bottom: 2px;
  color: rgba(255,255,255,.82); transition: background .2s, color .2s;
  position: relative; text-decoration: none;
}
.aside nav a:hover, .aside-foot a:hover {
  background: rgba(255,255,255,.07); color: #fff;
}
.aside nav a.active {
  background: rgba(196,163,90,.16);
  color: #f3e6c8;
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.nav-ico {
  width: 38px; height: 38px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
}
.aside nav a.active .nav-ico {
  background: linear-gradient(145deg, var(--c-accent), var(--c-primary));
  color: #1a120a; border-color: transparent;
}
.aside-foot { display: none; }
.aside-dock {
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px 12px 16px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.28) 18%),
    radial-gradient(180px 80px at 50% 100%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 70%);
  border-top: 1px solid rgba(196,163,90,.18);
}
html.rail .aside-head { flex-direction: column; padding: 16px 10px 10px; }
html.rail .logo-copy,
html.rail .nav-txt { max-width: 0; opacity: 0; }
html.rail .nav-label {
  font-size: 0; margin: 10px auto; height: 0; padding-top: 8px;
  width: 18px; border-top: 1px solid rgba(196,163,90,.28); opacity: 1;
}
html.rail .aside nav { padding: 4px 8px 12px; }
html.rail .aside nav a, html.rail .aside-out {
  justify-content: center; padding: 8px; margin-bottom: 4px;
}
html.rail .aside nav a.active { box-shadow: none; background: transparent; }
html.rail .aside nav a.active .nav-ico {
  box-shadow: 0 8px 20px rgba(196,163,90,.28);
}
html.rail .aside nav a[data-tip]:hover::after,
html.rail .aside-out[data-tip]:hover::after,
html.rail .rail-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%);
  background: rgba(18,12,9,.96); color: #f6efe4; font-size: 12px;
  padding: 9px 13px; border-radius: 12px; white-space: nowrap; z-index: 90;
  box-shadow: 0 14px 32px rgba(0,0,0,.4);
  border: 1px solid rgba(196,163,90,.3);
  pointer-events: none;
}
html.rail .rail-btn { position: relative; }
.aside-scrim {
  display: none; position: fixed; inset: 0; background: rgba(10,6,3,.5); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.nav-toggle { display: none; }
.main {
  padding: 22px 28px 48px;
  background: linear-gradient(180deg, #f7f1e8, #efe4d4);
  color: var(--c-text);
  border-radius: 28px 0 0 0;
  margin-top: 12px;
  min-height: calc(100vh - 12px);
  animation: rise .7s var(--ease);
  min-width: 0;
}
.admin-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.admin-crumb { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.live-dot {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.live-dot i {
  width: 9px; height: 9px; border-radius: 50%; background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61,220,132,.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55); }
  70% { box-shadow: 0 0 0 10px rgba(61,220,132,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); }
}
.page-head { margin-bottom: 8px; }
.page-head h1 { margin: 4px 0 6px; }
body.is-inventory .admin-top { display: none !important; }
.inv-menu { display: none; }
.inventory-actions { display: flex; align-items: center; gap: 10px; }
.admin-body .btn {
  margin-top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
}
.admin-body .btn.ghost, .btn-ghost {
  background: transparent; color: inherit; border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  box-shadow: none;
}
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.btn-danger { background: #8b2e1e; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow);
  margin: 14px 0 22px;
}
.panel-card h2, .panel-card h3 { margin-top: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
.admin-body table { min-width: 560px; }
.badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--c-accent) 22%, #fff);
}
.color-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.color-swatches label { display: grid; gap: 6px; }
.color-swatches input[type=color] { height: 48px; padding: 4px; cursor: pointer; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0 28px; }
.kpi {
  background: #fff; border-radius: 20px; padding: 18px 18px 16px; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.8);
  position: relative; overflow: hidden;
  animation: rise .7s var(--ease) both;
}
.kpi:nth-child(2) { animation-delay: .06s; }
.kpi:nth-child(3) { animation-delay: .12s; }
.kpi:nth-child(4) { animation-delay: .18s; }
.kpi:nth-child(5) { animation-delay: .24s; }
.kpi:nth-child(6) { animation-delay: .3s; }
.kpi::before {
  content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 28%, transparent);
}
.kpi span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.kpi b { font-size: 1.65rem; display: block; margin-top: 8px; font-family: "Cormorant Garamond", serif; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: color-mix(in srgb, var(--c-accent) 12%, #fff); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-grid label, .stack label { display: block; font-size: 13px; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #d9cbb8; border-radius: 12px; font: inherit; background: #fff;
  transition: border .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 25%, transparent);
}
.stack { display: grid; gap: 10px; max-width: 920px; }
.notice { background: #fff3d6; padding: 10px 14px; border-radius: 12px; display: flex; gap: 8px; align-items: center; }

.login-body {
  min-height: 100vh; display: grid; place-items: center; position: relative;
  background: #140c08;
}
.login-body::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 20% 20%, color-mix(in srgb, var(--c-accent) 45%, transparent), transparent),
    radial-gradient(500px 280px at 80% 80%, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent);
  animation: float 10s ease-in-out infinite;
}
.login-card {
  position: relative; z-index: 1; width: min(420px, 92vw);
  padding: 36px 32px; border-radius: 28px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px); color: #fff; box-shadow: var(--shadow);
  animation: rise .8s var(--ease);
}
.login-card h1 { margin-top: 0; font-size: 2.4rem; }
.login-card input { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.login-card label { display: block; margin: 12px 0 6px; }

@media (max-width: 1100px) {
  .form-grid.three { grid-template-columns: 1fr 1fr; }
  .color-swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .admin-shell, html.rail .admin-shell { grid-template-columns: 1fr; }
  .aside, html.rail .aside {
    position: fixed; left: 0; top: 0; z-index: 60; width: min(320px, 90vw); height: 100vh;
    transform: translateX(-105%); transition: transform .35s var(--ease);
  }
  html.rail .logo-copy,
  html.rail .nav-txt { max-width: 180px; opacity: 1; }
  html.rail .nav-label {
    font-size: 10px; margin: 12px 10px 8px; height: auto; width: auto;
    padding-top: 0; border: 0; opacity: .38;
  }
  html.rail .aside nav a, html.rail .aside-foot a { justify-content: flex-start; padding: 8px 10px; }
  html.rail .aside-head { flex-direction: row; padding: 18px 16px 14px; }
  html.rail .rail-btn { display: none; }
  html.rail .aside nav a.active { box-shadow: inset 3px 0 0 var(--c-accent); background: rgba(196,163,90,.16); }
  .aside-scrim { display: block; }
  body.nav-open .aside { transform: none; }
  body.nav-open .aside-scrim { opacity: 1; pointer-events: auto; }
  .nav-toggle { display: inline-flex; }
  .main { margin: 0; border-radius: 0; padding: 14px 14px 40px; min-height: 100vh; }
  .form-grid, .form-grid.three, .product-layout, .pdp-grid { grid-template-columns: 1fr; }
  .pdp-stage { aspect-ratio: 4 / 3; border-radius: 22px; }
  .pdp-thumbs button { width: 58px; height: 58px; }
  .pdp-buy .btn { max-width: none; }
  .store-frame { width: calc(100% - 16px); }
  .site-header, .hero { border-radius: 26px; }
  footer.site-foot {
    padding: 28px 0 18px;
    margin-top: 36px;
    border-radius: 32px 32px 20px 20px;
  }
  footer.site-foot::before { inset: 8px 8px 0; border-radius: 24px 24px 0 0; }
  .foot-brand { margin-bottom: 16px; }
  .foot-brand img { height: 48px; }
  .foot-acc {
    margin-bottom: 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
    overflow: hidden;
  }
  .foot-acc-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 16px; border: 0; background: transparent;
    font: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-text); cursor: pointer;
  }
  .foot-acc-btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); opacity: .55; }
  .foot-acc.is-open .foot-acc-btn svg { transform: rotate(180deg); }
  .foot-contacts, .foot-policies { display: none; margin-bottom: 0; }
  .foot-acc.is-open .foot-contacts,
  .foot-acc.is-open .foot-policies { display: grid; }
  .foot-contacts {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 0 8px 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .foot-line { padding: 12px 14px; }
  .foot-line + .foot-line::before {
    left: 50%; top: 0;
    width: 36px; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  }
  .foot-line span { font-size: 9px; }
  .foot-line strong { font-size: 14px; }
  .foot-policies {
    width: 100%;
    gap: 0;
    padding: 0 8px 10px;
  }
  .foot-policies a {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    background: transparent;
    letter-spacing: .08em;
    font-size: 11px;
    opacity: .75;
  }
  .foot-policies a + a { border-left: 0; }
  .foot-copy {
    font-size: 10px;
    letter-spacing: .08em;
    line-height: 1.5;
    padding-top: 12px;
  }
  .site-header::before { inset: 6px; border-radius: 20px; }
  .hero::after {
    inset: 8px;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--c-accent) 55%, rgba(255,255,255,.35));
  }
  .icon-btn.menu-toggle { display: inline-flex; }
  .nav-desk { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 10px 12px; gap: 8px; }
  .topbar .brand { justify-self: center; font-size: 1.15rem; }
  .nav-mobile {
    display: none; padding: 4px 16px 16px;
  }
  .site-header.menu-open { border-radius: 28px; }
  .site-header.menu-open .nav-mobile { display: block; }
  .site-header.menu-open::before { border-radius: 22px; }
  .nav-mobile .menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-mobile .menu a { white-space: normal; padding: 11px 12px; font-size: 16px; }
  .mobile-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
  .mobile-subs a { font-size: 13px !important; background: rgba(255,255,255,.55); }
  .float-orb { width: 52px; height: 52px; }
  .float-docks { bottom: 16px; padding: 0 12px; }
  .hero { height: min(58vh, 440px); margin-top: 12px; }
  .slide-copy {
    left: 20px; right: 20px; bottom: 20px;
    max-width: none;
    padding: 16px 16px 38px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20,10,4,.28), rgba(20,10,4,.62));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
  }
  .slide-copy .kicker { font-size: 9px; letter-spacing: .16em; margin-bottom: 6px; }
  .slide-copy h2 { font-size: clamp(1.22rem, 5.8vw, 1.65rem); margin-bottom: 6px; line-height: 1.18; }
  .slide-copy p {
    font-size: .88rem; max-width: none; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .slide-copy .btn { margin-top: 10px; padding: 9px 16px; font-size: 13px; }
  .hero-nav {
    flex-direction: row; right: auto; left: 50%; bottom: 28px;
    transform: translateX(-50%);
    z-index: 6;
  }
  .hero-nav button { width: 22px; height: 4px; }
  .hero-nav button.on { width: 34px; }
  .orbs { display: none; }
  .section { padding: 40px 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-card .thumb { height: 140px; }
  .card-body { padding: 10px 11px 12px; }
  .card-body h3 { font-size: 1.02rem; }
  .colors { margin: 4px 0 6px; }
  .product-card .add-fab { display: grid; }
  .product-card .add-cart-desk { display: none; }
  .add-fab { width: 42px; height: 42px; right: 8px; bottom: 8px; }
  .drawer.cart-drawer {
    width: 100%;
    max-width: none;
    height: min(90dvh, 100%);
    top: auto; bottom: 0; right: 0;
    padding: 0;
    border-radius: 28px 28px 0 0;
    transform: translateY(110%);
  }
  .drawer.cart-drawer.open { transform: none; }
  .cart-sheet { display: block; }
  .cart-head { padding: 8px 16px 14px; }
  .cart-item { grid-template-columns: 68px minmax(0, 1fr); padding: 12px 48px 12px 10px; }
  .cart-photo { width: 68px; height: 68px; }
  .cart-trash { width: 38px; height: 38px; top: 10px; right: 10px; }
  .site-header { border-radius: 28px; }
  .admin-body table { min-width: 480px; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .color-swatches { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .brand-name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .hero { height: min(52vh, 380px); border-radius: 22px; }
  .hero::after { inset: 7px; border-radius: 16px; }
  .slide-copy { left: 16px; right: 16px; bottom: 16px; padding: 14px 14px 34px; border-radius: 16px; }
  .slide-copy h2 { font-size: clamp(1.12rem, 6vw, 1.42rem); }
  .hero-nav { bottom: 24px; }
  .product-card .thumb { height: 124px; }
  .product-card .card-body { padding: 8px 10px 10px; }
  .product-card .card-body h3 { font-size: .98rem; }
  .add-fab { width: 40px; height: 40px; }
  .account-form, .stack { width: 100%; }
  .btn { width: auto; }
  .grid { grid-template-columns: 1fr 1fr; }
  .wrap { width: min(1180px, calc(100% - 20px)); }
  .cart-info h4 { font-size: 1.02rem; }
  .cart-head h3 { font-size: 1.7rem; }
  .float-docks { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 58px minmax(0, 1fr); }
  .cart-photo { width: 58px; height: 58px; border-radius: 12px; }
}

.dash-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.dash-hero h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.02em; }
.premium-clock {
  display: flex; align-items: baseline; gap: 2px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: tabular-nums;
  padding: 8px 16px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,236,.7));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 30px rgba(42,28,18,.08);
}
.premium-clock .h,
.premium-clock .m { font-size: 2.05rem; font-weight: 600; line-height: 1; color: var(--c-text); }
.premium-clock .s { font-size: 1.05rem; opacity: .45; width: 1.6ch; }
.premium-clock .colon {
  font-size: 1.8rem; opacity: .35; animation: colonBlink 1s steps(2) infinite;
  padding: 0 1px;
}
.premium-clock .colon.dim { animation: none; opacity: .22; font-size: 1.1rem; }
.premium-clock .ampm {
  margin-left: 10px; font-family: Outfit, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .22em; color: var(--c-primary);
}
@keyframes colonBlink { 50% { opacity: .08; } }
.dash-card .live-dot { font-size: 11px; letter-spacing: .14em; font-family: Outfit, sans-serif; font-weight: 600; }
body.is-dash .admin-top .admin-crumb,
body.is-dash .admin-top .live-dot { display: none; }
@media (min-width: 961px) {
  body.is-dash .admin-top { display: none; }
}
.dash-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0 22px;
}
.dash-kpi {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 24px; padding: 20px 18px 18px;
  box-shadow: var(--shadow); min-height: 132px;
  border: 1px solid rgba(255,255,255,.8);
  animation: rise .75s var(--ease) both;
}
.dash-kpi:nth-child(2) { animation-delay: .08s; }
.dash-kpi:nth-child(3) { animation-delay: .16s; }
.dash-kpi:nth-child(4) { animation-delay: .24s; }
.dash-kpi .kpi-ico {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff;
  margin-bottom: 12px;
}
.dash-kpi .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.dash-kpi .val {
  font-family: "Cormorant Garamond", serif; font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  display: block; margin-top: 4px; line-height: 1.1;
}
.dash-kpi .hint { font-size: 12px; opacity: .55; margin-top: 6px; }
.dash-kpi.flash .val { animation: kpiPop .55s var(--ease); }
@keyframes kpiPop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.dash-grid + .dash-grid { margin-top: 16px; }
.dash-card {
  background: rgba(255,255,255,.92); border-radius: 24px; padding: 20px;
  box-shadow: var(--shadow); min-width: 0;
  animation: rise .8s var(--ease) both;
}
.dash-card h2 {
  margin: 0 0 14px; font-size: 1.45rem;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.week-chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.week-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.week-col .bar-track {
  flex: 1; width: 100%; border-radius: 14px 14px 8px 8px;
  background: color-mix(in srgb, var(--c-primary) 8%, #fff);
  display: flex; align-items: flex-end; overflow: hidden;
}
.week-col .bar {
  width: 100%; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-primary));
  transition: height 1s var(--ease);
  box-shadow: 0 -8px 18px color-mix(in srgb, var(--c-primary) 25%, transparent);
}
.week-col small { font-size: 11px; opacity: .6; text-align: center; }
.pipe { display: grid; gap: 12px; }
.pipe-row { display: grid; grid-template-columns: 92px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; }
.pipe-track { height: 10px; border-radius: 99px; background: #efe6d8; overflow: hidden; }
.pipe-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width 1s var(--ease);
}
.feed { display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.feed-item {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start;
  padding: 10px 8px; border-radius: 14px; background: color-mix(in srgb, var(--c-bg) 70%, #fff);
  animation: rise .5s var(--ease);
}
.feed-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--c-accent); }
.feed-item.invoice .feed-dot { background: #3ddc84; }
.feed-item.quote .feed-dot { background: var(--c-primary); }
.feed-item.lead .feed-dot { background: #7aa2ff; }
.low-row, .mix-row { display: grid; gap: 6px; margin-bottom: 12px; }
.low-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mix-track { height: 8px; border-radius: 99px; background: #efe6d8; overflow: hidden; }
.mix-fill { height: 100%; width: 0; border-radius: 99px; background: var(--c-primary); transition: width 1s var(--ease); }
.pulse-line { height: 2px; width: 100%; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.06); margin-top: 10px; }
.pulse-line i {
  display: block; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  animation: scan 1.6s linear infinite;
}
@keyframes scan { from { transform: translateX(-120%); } to { transform: translateX(400%); } }

@media (max-width: 1100px) {
  .dash-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-kpis { grid-template-columns: 1fr; }
}
.live-floor { min-height: 320px; }
.vis-grid { display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.vis-card {
  display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center;
  padding: 12px; border-radius: 18px;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--c-bg) 55%, #fff));
  border: 1px solid rgba(255,255,255,.8);
  animation: rise .45s var(--ease);
}
.vis-ava {
  width: 48px; height: 48px; border-radius: 16px; color: #fff; font-weight: 700;
  display: grid; place-items: center; letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(42,28,18,.18);
}
.vis-doing { font-size: 14px; margin: 2px 0 4px; }
.empty-live { padding: 28px 8px; }
.doing-list { margin-top: 16px; display: grid; gap: 8px; }
.doing-row { display: flex; gap: 8px; align-items: start; font-size: 13px; }
.vibe-card { position: relative; overflow: hidden; min-height: 220px; }
.vibe-num {
  font-family: "Cormorant Garamond", serif; font-size: 4.5rem; margin: 8px 0 0; line-height: .9;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vibe-orbs span {
  position: absolute; border-radius: 50%; opacity: .18; background: var(--c-accent);
  animation: float 7s ease-in-out infinite;
}
.vibe-orbs span:nth-child(1) { width: 120px; height: 120px; right: -20px; bottom: -20px; }
.vibe-orbs span:nth-child(2) { width: 60px; height: 60px; right: 80px; top: 40px; animation-delay: -2s; }
.vibe-orbs span:nth-child(3) { width: 28px; height: 28px; left: 24px; bottom: 28px; animation-delay: -4s; }
.salon-card { min-height: 340px; }
.salon { display: grid; gap: 10px; max-height: 360px; overflow: auto; padding-right: 4px; }
.salon-row {
  display: grid; grid-template-columns: 12px 1fr; gap: 14px; align-items: start;
  padding: 16px 16px 16px 14px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,255,255,.95), color-mix(in srgb, var(--c-bg) 40%, #fff));
  border: 1px solid rgba(255,255,255,.7);
}
.salon-pulse {
  width: 8px; height: 8px; margin-top: 8px; border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61,220,132,.5);
  animation: pulse 1.8s infinite;
}
.salon-act {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem; margin: 0 0 4px; line-height: 1.2; font-weight: 600;
}
.salon-meta { margin: 0; font-size: 12px; letter-spacing: .04em; opacity: .55; }
.salon-cart {
  display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-primary);
}
.salon-empty {
  height: 220px; display: grid; place-items: center;
  font-family: "Cormorant Garamond", serif; font-size: 1.4rem; opacity: .45;
}

.inventory-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.inv-list { display: grid; gap: 12px; margin: 8px 0 36px; }
.inv-row {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 20px; align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  padding: 12px 16px 12px 12px;
  box-shadow: 0 10px 28px rgba(42,28,18,.06);
}
.inv-photo {
  width: 132px; height: 96px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(145deg, var(--c-primary), var(--c-accent));
}
.inv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-row { grid-template-columns: 200px 1fr auto; }
.banner-photo { width: 200px; height: 112px; border-radius: 16px; }
.cat-mark {
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--c-primary), var(--c-accent));
}
.cat-mark span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem; color: #fff; line-height: 1;
}
.cat-desc { margin: 0 0 8px; font-size: 14px; max-width: 62ch; }
.cat-subs { gap: 8px; }
.cat-chip {
  border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 10px 6px 12px;
  box-shadow: 0 4px 12px rgba(42,28,18,.06);
}
.cat-chip em { font-style: normal; font-size: 11px; opacity: .45; font-weight: 700; }
.inv-main h3 { margin: 4px 0 2px; font-size: 1.5rem; }
.inv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-sku { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .45; }
.inv-flag {
  background: var(--c-accent); color: #1a120a;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
}
.inv-price { margin: 0 0 8px; font-weight: 700; color: var(--c-primary); }
.inv-dots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-side { text-align: right; display: grid; justify-items: end; gap: 4px; min-width: 120px; }
.inv-side b { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; line-height: 1; }
.inv-side span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .45; }
.inv-vars { display: grid; gap: 8px; }
.inv-var {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center;
  background: color-mix(in srgb, var(--c-bg) 55%, #fff);
  border-radius: 14px; padding: 8px 10px;
}
.inv-var strong { display: block; font-size: 13px; }
.inv-var em { display: block; font-style: normal; font-size: 11px; opacity: .5; }
.inv-qty { display: flex; gap: 6px; }
.inv-qty a {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 4px 10px rgba(42,28,18,.08);
  font-weight: 700;
}
.edit-colors { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(42,28,18,.08); }
.edit-colors h3 { margin: 0 0 10px; font-size: 1.3rem; }
.edit-media { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(42,28,18,.08); }
.edit-media h3 { margin: 0 0 10px; font-size: 1.3rem; }
.edit-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.edit-img { width: 88px; }
.edit-img img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; display: block; }
.edit-img a, .edit-rev a { font-size: 11px; font-weight: 700; }
.edit-reviews { display: grid; gap: 10px; margin-bottom: 14px; }
.edit-rev { padding: 10px 12px; border-radius: 14px; background: #fff; }
.edit-rev p { margin: 6px 0; font-size: 13px; }
.review-form { display: grid; gap: 10px; }
.assign-color { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; margin-top: 12px; }
.lux-dialog-sm { width: min(460px, 100%); }
.lux-color-form { display: grid; gap: 12px; }
.palette-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.palette-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 10px 6px 6px;
  font-size: 13px; box-shadow: 0 4px 12px rgba(42,28,18,.06);
}
.palette-chip i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.inv-acts { display: flex; align-items: center; gap: 8px; }
.inv-acts .cat-kill {
  width: 38px; height: 38px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 12px;
}
.kill-dialog { text-align: center; width: min(440px, 94vw); }
.kill-dialog .lux-actions { justify-content: center; }
.kill-mark {
  width: 72px; height: 72px; margin: 8px auto 14px;
  display: grid; place-items: center;
  border-radius: 24px;
  color: #c62828;
  background: radial-gradient(circle at 30% 20%, #fff, #fdecea);
  box-shadow: 0 16px 36px rgba(198, 40, 40, .18);
  animation: killPulse 1.8s ease-in-out infinite;
}
.kill-mark svg { width: 28px; height: 28px; }
@keyframes killPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.cat-kill {
  background: #fdecea !important;
  color: #c62828 !important;
  border-color: transparent !important;
}
.cat-kill:hover { background: #c62828 !important; color: #fff !important; }
.inv-row.is-off { opacity: .62; }
.lux-open { animation: luxPulse 2.8s ease-in-out infinite; }
.btn-glow {
  position: relative; overflow: hidden;
  animation: luxPulse 2.4s ease-in-out infinite;
}
.btn-glow svg { animation: luxIcon 1.8s ease-in-out infinite; }
.btn.ghost.btn-glow {
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.btn-glow::after {
  content: "";
  position: absolute; top: 0; left: -40%; width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: btnShine 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes luxPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.16); transform: translateY(0); }
  50% { box-shadow: 0 16px 36px color-mix(in srgb, var(--c-accent) 50%, transparent); transform: translateY(-2px); }
}
@keyframes luxIcon {
  0%, 100% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(12deg) scale(1.12); }
  60% { transform: rotate(-6deg) scale(1.05); }
}
@keyframes btnShine {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(420%); opacity: 0; }
}
body.lux-lock { overflow: hidden; }
.lux-modal {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  place-items: center;
  padding: 22px;
  visibility: hidden; pointer-events: none;
}
.lux-modal.is-on { display: grid; visibility: visible; pointer-events: auto; }
.lux-scrim {
  position: absolute; inset: 0;
  background: rgba(16, 9, 4, .55);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.lux-modal.is-on .lux-scrim { opacity: 1; }
.lux-modal.is-out .lux-scrim { opacity: 0; }
.lux-dialog {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  max-height: min(92vh, 860px);
  overflow: auto;
  padding: 32px 28px 26px;
  border-radius: 32px;
  background:
    radial-gradient(500px 180px at 10% 0%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 50%),
    linear-gradient(180deg, #fffdf8, #f7efe3);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 40px 90px rgba(20,10,4,.35);
  transform: translateY(36px) scale(.86) rotateX(8deg);
  opacity: 0;
  transform-origin: 50% 30%;
  transition: transform .55s var(--ease), opacity .4s ease;
}
.lux-modal.is-on .lux-dialog { transform: none; opacity: 1; }
.lux-modal.is-out .lux-dialog { transform: translateY(20px) scale(.94); opacity: 0; }
.lux-orbit {
  position: absolute; inset: 10px; border-radius: 24px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  animation: luxSpin 10s linear infinite;
}
@keyframes luxSpin {
  0% { filter: hue-rotate(0deg); opacity: .55; }
  50% { opacity: 1; }
  100% { filter: hue-rotate(18deg); opacity: .55; }
}
.lux-shine {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden;
}
.lux-shine::before {
  content: "";
  position: absolute; top: -20%; left: -40%; width: 40%; height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: rotate(18deg);
  animation: luxSweep 2.2s var(--ease) both;
}
.lux-modal.is-on .lux-shine::before { animation: luxSweep 1.8s .15s var(--ease) both; }
@keyframes luxSweep {
  from { transform: translateX(0) rotate(18deg); }
  to { transform: translateX(420%) rotate(18deg); }
}
.lux-x {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fff; color: var(--c-text); font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 18px rgba(42,28,18,.1);
}
.lux-dialog .lux-kicker { margin: 0 0 6px; }
.lux-dialog h2 {
  margin: 0 0 6px;
  font-size: clamp(2rem, 4vw, 2.8rem);
  animation: luxRise .7s var(--ease) both;
}
.lux-lead { margin: 0 0 18px; }
.lux-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lux-modal .lux-field,
.lux-modal .lux-check,
.lux-modal .lux-actions,
.lux-modal .lux-drop {
  opacity: 0; transform: translateY(16px);
}
.lux-modal.is-on .lux-field,
.lux-modal.is-on .lux-check,
.lux-modal.is-on .lux-actions,
.lux-modal.is-on .lux-drop {
  animation: luxRise .6s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes luxRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.lux-field span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; opacity: .62; }
.lux-wide { display: block; margin-top: 12px; }
.lux-grid .lux-wide { grid-column: 1 / -1; margin-top: 0; }
.lux-check { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-weight: 600; }
.lux-check input { width: auto; }
.lux-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lux-dialog-banner { width: min(820px, 100%); }
.lux-drop {
  --d: .08s;
  position: relative;
  grid-column: 1 / -1;
  display: block;
  cursor: pointer;
  overflow: hidden;
  min-height: 220px;
  margin-bottom: 28px;
  border-radius: 26px;
  border: 1.5px dashed color-mix(in srgb, var(--c-accent) 55%, #d8c4a4);
  background:
    radial-gradient(420px 140px at 20% 0%, color-mix(in srgb, var(--c-accent) 32%, transparent), transparent 55%),
    linear-gradient(160deg, #fffaf1, #f3e6d2 55%, #efe0c8);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 18px 40px rgba(90, 50, 10, .1);
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .25s ease;
}
.lux-drop:hover, .lux-drop.is-over {
  transform: translateY(-2px) scale(1.01);
  border-color: var(--c-accent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 0 0 6px color-mix(in srgb, var(--c-accent) 18%, transparent),
    0 22px 50px rgba(90, 50, 10, .16);
}
.lux-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.lux-drop-core {
  position: relative; z-index: 1;
  display: grid; place-items: center; gap: 10px;
  min-height: 220px; padding: 28px 20px;
  text-align: center; pointer-events: none;
}
.lux-drop-orb {
  position: relative;
  width: 78px; height: 78px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #ffe7b0, var(--c-accent) 55%, #8a5a18);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c-accent) 45%, transparent);
  animation: dropPulse 2.4s ease-in-out infinite;
}
.lux-drop-orb::before,
.lux-drop-orb::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
  animation: dropRing 2.4s ease-out infinite;
}
.lux-drop-orb::after { inset: -20px; animation-delay: .7s; opacity: .5; }
.lux-drop-orb svg { width: 30px; height: 30px; }
.lux-drop-core strong { font-size: 1.15rem; letter-spacing: .02em; }
.lux-drop-core em { font-style: normal; font-size: 13px; opacity: .62; }
.lux-drop.has-file .lux-drop-core { display: none; }
.lux-drop-preview {
  display: none;
  position: absolute; inset: 8px;
  border-radius: 20px; overflow: hidden;
}
.lux-drop.has-file .lux-drop-preview { display: block; }
.lux-drop-preview img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05);
}
.lux-drop-preview span {
  position: absolute; left: 14px; bottom: 14px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(20,10,4,.62); color: #fff;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
@keyframes dropPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes dropRing {
  0% { transform: scale(.85); opacity: .7; }
  100% { transform: scale(1.2); opacity: 0; }
}
.lux-drop-logo { min-height: 200px; margin-bottom: 0; }
.lux-drop-logo.has-file .lux-drop-preview img {
  object-fit: contain;
  background:
    linear-gradient(45deg, #f3efe6 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #f3efe6 25%, transparent 25%) 0 8px / 16px 16px,
    #fff;
}
.look-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: stretch; }
.look-card {
  background:
    radial-gradient(420px 140px at 8% 0%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 50%),
    linear-gradient(180deg, #fffdf8, #f7efe3);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 28px;
  padding: 24px 22px 22px;
  box-shadow: var(--shadow);
  margin: 0 0 16px;
}
.look-kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .5; margin-bottom: 6px;
}
.look-card h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.look-card .muted { margin: 0 0 16px; }
.look-live { display: flex; flex-direction: column; }
.look-preview {
  --p: var(--c-primary); --a: var(--c-accent); --b: var(--c-bg); --t: var(--c-text);
  flex: 1; min-height: 220px;
  border-radius: 22px; padding: 22px;
  background:
    radial-gradient(280px 120px at 90% 0%, color-mix(in srgb, var(--a) 40%, transparent), transparent 50%),
    linear-gradient(160deg, var(--b), color-mix(in srgb, var(--p) 18%, var(--b)));
  color: var(--t);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.look-preview-bar { display: flex; align-items: center; gap: 12px; }
.look-preview-mark {
  width: 48px; height: 48px; border-radius: 16px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--p), var(--a));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--p) 35%, transparent);
  display: grid; place-items: center;
}
.look-preview-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.look-preview strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; line-height: 1.1; }
.look-preview p { margin: 0; opacity: .7; min-height: 1.2em; }
.look-preview-btn {
  align-self: flex-start;
  padding: 8px 14px; border-radius: 999px;
  background: var(--p); color: #fff; font-size: 13px; font-weight: 600;
}
.look-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.look-swatch {
  position: relative; display: block; overflow: hidden;
  min-height: 118px; border-radius: 22px; cursor: pointer;
  box-shadow: 0 12px 28px rgba(42, 28, 18, .1);
  transition: transform .3s var(--ease);
}
.look-swatch:hover { transform: translateY(-3px); }
.look-swatch input[type="color"] {
  position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px);
  border: 0; padding: 0; cursor: pointer;
}
.look-swatch span {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.86); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; pointer-events: none;
}
@media (max-width: 900px) {
  .look-split { grid-template-columns: 1fr; }
  .look-colors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .lux-grid { grid-template-columns: 1fr; }
  .lux-dialog { padding: 26px 18px 20px; border-radius: 24px; }
  .inventory-head { align-items: stretch; }
  .inventory-actions { width: 100%; }
  .inventory-actions .lux-open { flex: 1; justify-content: center; }
  .inv-row { grid-template-columns: 92px 1fr; }
  .banner-row { grid-template-columns: 1fr; }
  .banner-photo { width: 100%; height: 140px; }
  .inv-photo { width: 92px; height: 92px; }
  .inv-side { grid-column: 1 / -1; text-align: left; justify-items: start; grid-template-columns: auto 1fr auto; align-items: center; }
  .assign-color { grid-template-columns: 1fr; }
}

#adminView { min-height: 48vh; }
#adminView.admin-swap { opacity: .35; pointer-events: none; transition: opacity .18s ease; }
.lux-dialog-wide { width: min(980px, 96vw); max-width: 980px; }
.lux-lines { margin: 16px 0; overflow: auto; border-radius: 16px; }
.lead-cart { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.lead-cart span {
  display: inline-flex; padding: 5px 10px; border-radius: 999px;
  background: rgba(42, 28, 18, .06); font-size: 12px; font-weight: 600;
}
.atelier-sheet { width: min(1080px, 96vw); max-width: 1080px; }
.atelier-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; }
.atelier-block {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 28px rgba(42,28,18,.05);
}
.atelier-block-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.atelier-block-h strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; }
.atelier-block-h span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .45; }
.atelier-swatches { display: grid; gap: 8px; max-height: 280px; overflow: auto; padding-right: 4px; }
.atelier-swatch {
  display: grid; grid-template-columns: 22px 1fr 72px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 6px 16px rgba(42,28,18,.05);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease;
}
.atelier-swatch i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.atelier-swatch em { font-style: normal; font-size: 13px; font-weight: 600; }
.atelier-swatch input[type="checkbox"] { display: none; }
.atelier-swatch input[type="number"] {
  width: 72px; border: 0; background: color-mix(in srgb, var(--c-bg) 70%, #fff);
  border-radius: 10px; padding: 6px 8px; font: inherit; text-align: center;
}
.atelier-swatch:has(input:checked), .atelier-swatch.is-used {
  border-color: color-mix(in srgb, var(--c-accent) 70%, transparent);
  transform: translateX(2px);
}
.atelier-swatch.is-btn { width: 100%; font: inherit; color: inherit; text-align: left; grid-template-columns: 22px 1fr; }
.atelier-swatch.is-used { opacity: .45; pointer-events: none; }
.atelier-swatch.is-busy { opacity: .6; }
.atelier-swatches-mini { max-height: 190px; }
.atelier-stock-mini { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; }
.atelier-stock-mini input { width: 80px; }
.atelier-drop {
  display: grid; place-items: center; text-align: center; gap: 6px;
  min-height: 148px; padding: 22px;
  border-radius: 22px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--c-accent) 55%, #c9b49a);
  background:
    radial-gradient(180px 80px at 20% 0%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #fff, #f6efe4);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.atelier-drop:hover, .atelier-drop.is-over {
  transform: translateY(-2px);
  border-color: var(--c-accent);
  box-shadow: 0 16px 36px rgba(42,28,18,.1);
}
.atelier-drop.is-busy { opacity: .55; pointer-events: none; }
.atelier-drop-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(42,28,18,.08); }
.atelier-drop b { font-size: 15px; }
.atelier-drop small { opacity: .5; font-size: 12px; }
.atelier-thumbs, .atelier-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.atelier-thumbs figure, .atelier-shot {
  position: relative; width: 92px; height: 92px; margin: 0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(42,28,18,.12);
}
.atelier-thumbs img, .atelier-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atelier-x {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(20,10,4,.72); color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
}
.atelier-live-vars { display: grid; gap: 8px; margin-bottom: 12px; }
.atelier-var {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center;
  background: #fff; border-radius: 14px; padding: 8px 10px;
}
.atelier-var em { display: block; font-style: normal; font-size: 11px; opacity: .5; }
.atelier-qty { display: flex; gap: 6px; }
.atelier-qty button {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--c-bg) 60%, #fff);
  font-weight: 700; cursor: pointer;
}
button.linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--c-primary); }
@media (max-width: 900px) {
  .atelier-layout { grid-template-columns: 1fr; }
}
.aside-me {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.aside-avatar {
  position: relative;
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem; color: #1a120a; font-weight: 700;
  background: linear-gradient(145deg, var(--c-accent), var(--c-primary));
  box-shadow: 0 8px 18px rgba(196,163,90,.28);
}
.aside-avatar .live-dot {
  position: absolute; right: -2px; bottom: -2px;
  border: 2px solid #120c09;
}
.aside-me-copy { min-width: 0; }
.aside-me strong {
  display: block; font-size: 14px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aside-me em {
  display: block; font-style: normal; font-size: 11px; opacity: .58;
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aside-out {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px; padding: 12px 14px;
  border-radius: 16px; text-decoration: none;
  color: #f6efe4; font-weight: 700; font-size: 13px; letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.aside-out:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c-accent) 55%, #3a2014), var(--c-primary));
  box-shadow: 0 12px 26px rgba(196,163,90,.28);
  color: #1a120a;
}
.aside-out svg { width: 18px; height: 18px; }
html.rail .aside-dock { padding: 10px 8px 14px; }
html.rail .aside-me { justify-content: center; padding: 8px; }
html.rail .aside-me-copy, html.rail .aside-out span, html.rail .aside-live { display: none; }
html.rail .aside-out { padding: 10px; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #8a7a6a;
}
.live-dot.is-on {
  background: #3dcc6a;
  box-shadow: 0 0 0 0 rgba(61,204,106,.55);
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(61,204,106,.45); }
  70% { box-shadow: 0 0 0 8px rgba(61,204,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,204,106,0); }
}
.aside-live { margin: 0 12px 8px; display: grid; gap: 8px; }
.aside-live-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.aside-live-row b { display: block; }
.aside-live-row i { display: block; font-style: normal; opacity: .55; font-size: 11px; }