/* SHANX LIVING WEBSITE v1 — original themes + Companion 01 */
:root{
  --living-bg:#f7f2e8;
  --living-surface:rgba(255,253,248,.86);
  --living-surface-strong:#fffaf0;
  --living-ink:#17302a;
  --living-muted:#64736d;
  --living-accent:#2b6d55;
  --living-accent-2:#b96a4b;
  --living-glow:rgba(43,109,85,.18);
  --living-line:rgba(23,48,42,.10);
  --living-dark:#14382d;
  --living-hero-a:#f7f2e8;
  --living-hero-b:#eaf0e6;
  --living-hero-c:#d6e4d8;
}

html[data-theme="ivory"]{
  --living-bg:#f7f2e8;--living-surface:rgba(255,253,248,.88);--living-surface-strong:#fffaf0;--living-ink:#17302a;--living-muted:#69766f;--living-accent:#2b6d55;--living-accent-2:#b96a4b;--living-glow:rgba(43,109,85,.17);--living-line:rgba(23,48,42,.09);--living-dark:#173d31;--living-hero-a:#f8f3e9;--living-hero-b:#edf2e9;--living-hero-c:#dae6dc;
}
html[data-theme="forest"]{
  --living-bg:#e9f0e8;--living-surface:rgba(245,250,244,.86);--living-surface-strong:#f6fbf4;--living-ink:#12382c;--living-muted:#557164;--living-accent:#18704f;--living-accent-2:#a98256;--living-glow:rgba(24,112,79,.22);--living-line:rgba(18,56,44,.11);--living-dark:#0f3c2d;--living-hero-a:#eef6e9;--living-hero-b:#d7e8d4;--living-hero-c:#b9d2bd;
}
html[data-theme="midnight"]{
  --living-bg:#07121d;--living-surface:rgba(13,27,42,.84);--living-surface-strong:#0d1b2a;--living-ink:#eef6f8;--living-muted:#9fb3bc;--living-accent:#56d0bd;--living-accent-2:#89a9ff;--living-glow:rgba(86,208,189,.24);--living-line:rgba(225,243,247,.12);--living-dark:#06111b;--living-hero-a:#091521;--living-hero-b:#0d2230;--living-hero-c:#123545;
}
html[data-theme="ocean"]{
  --living-bg:#edf6f8;--living-surface:rgba(248,253,254,.87);--living-surface-strong:#fbfeff;--living-ink:#153746;--living-muted:#5d7883;--living-accent:#187fa2;--living-accent-2:#4e6fc2;--living-glow:rgba(24,127,162,.20);--living-line:rgba(21,55,70,.10);--living-dark:#123d4f;--living-hero-a:#f3fbfb;--living-hero-b:#dceff1;--living-hero-c:#bfdce3;
}
html[data-theme="shadow"]{
  --living-bg:#0d0c16;--living-surface:rgba(22,19,35,.86);--living-surface-strong:#171322;--living-ink:#f3edf9;--living-muted:#b5a9bf;--living-accent:#8e66e8;--living-accent-2:#cf6e91;--living-glow:rgba(142,102,232,.26);--living-line:rgba(242,235,249,.12);--living-dark:#0d0a16;--living-hero-a:#100d19;--living-hero-b:#1b1430;--living-hero-c:#2a1b45;
}
html[data-theme="voyager"]{
  --living-bg:#f8eee2;--living-surface:rgba(255,249,240,.88);--living-surface-strong:#fff9ef;--living-ink:#263f42;--living-muted:#6e7873;--living-accent:#147a78;--living-accent-2:#df794f;--living-glow:rgba(20,122,120,.20);--living-line:rgba(38,63,66,.10);--living-dark:#164e4b;--living-hero-a:#fff4e8;--living-hero-b:#e5f0e7;--living-hero-c:#b7d3cb;
}

html{scroll-behavior:smooth}
body{transition:background .55s ease,color .35s ease}
body:before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(circle at 20% 15%,var(--living-glow),transparent 28%),radial-gradient(circle at 80% 75%,color-mix(in srgb,var(--living-accent-2) 11%,transparent),transparent 30%);
  animation:shanxBreathe 13s ease-in-out infinite;
}
@keyframes shanxBreathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.055);opacity:.88}}

.site-header{transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.living-nav-action{
  appearance:none;border:1px solid var(--living-line);background:var(--living-surface);color:var(--living-ink);border-radius:999px;padding:9px 12px;font:inherit;font-size:10px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:transform .2s ease,background .3s ease,color .3s ease;
}
.living-nav-action:hover,.living-nav-action:focus-visible{transform:translateY(-1px);background:var(--living-ink);color:var(--living-bg)}

.hero{transition:background .65s ease,color .4s ease!important;background:radial-gradient(circle at 77% 16%,var(--living-glow),transparent 27%),linear-gradient(140deg,var(--living-hero-a) 0%,var(--living-hero-b) 48%,var(--living-hero-c) 100%)!important}
.hero-copy{color:var(--living-ink);transition:background .5s ease,color .4s ease!important}
.hero .lede{color:color-mix(in srgb,var(--living-ink) 74%,transparent)!important}
.hero h1 em{color:var(--living-accent-2)!important}
.hero .button.primary{background:var(--living-accent)!important;color:white!important;border-color:var(--living-accent)!important}
.hero .button.quiet{color:var(--living-accent-2)!important;border-bottom-color:var(--living-accent-2)!important}
.hero .actions:after{color:var(--living-accent)!important;background:color-mix(in srgb,var(--living-accent) 8%,transparent)!important;border-color:color-mix(in srgb,var(--living-accent) 13%,transparent)!important;box-shadow:0 0 0 0 var(--living-glow);animation:heartbeatHalo 2.4s ease-out infinite}
@keyframes heartbeatHalo{0%{box-shadow:0 0 0 0 var(--living-glow)}55%,100%{box-shadow:0 0 0 12px transparent}}

.living-experience{
  position:relative;overflow:hidden;padding:clamp(48px,7vw,86px) clamp(20px,6vw,86px);background:linear-gradient(180deg,var(--living-surface-strong),color-mix(in srgb,var(--living-bg) 88%,white));color:var(--living-ink);transition:background .55s ease,color .4s ease;
}
.living-experience:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 9% 18%,var(--living-glow),transparent 21%),radial-gradient(circle at 88% 65%,color-mix(in srgb,var(--living-accent-2) 9%,transparent),transparent 24%)}
.living-experience-head{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:28px}
.living-experience .eyebrow{color:var(--living-accent)!important}
.living-experience h2{margin:8px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,68px);font-weight:400;line-height:.98;letter-spacing:-.035em}
.living-experience p{max-width:720px;color:var(--living-muted);line-height:1.65}
.living-memory{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--living-muted);padding:10px 14px;border:1px solid var(--living-line);border-radius:999px;background:var(--living-surface);white-space:nowrap}
.theme-grid{position:relative;display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:12px}
.theme-card{appearance:none;text-align:left;min-height:176px;padding:16px;border:1px solid var(--living-line);border-radius:22px;background:var(--living-surface);color:var(--living-ink);cursor:pointer;box-shadow:0 12px 35px color-mix(in srgb,var(--living-dark) 7%,transparent);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .4s ease}
.theme-card:hover,.theme-card:focus-visible{transform:translateY(-4px);box-shadow:0 18px 45px color-mix(in srgb,var(--living-dark) 12%,transparent)}
.theme-card[aria-pressed="true"]{border-color:color-mix(in srgb,var(--living-accent) 60%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--living-accent) 12%,transparent),0 18px 45px color-mix(in srgb,var(--living-dark) 10%,transparent)}
.theme-card small{display:block;font-size:8px;font-weight:800;letter-spacing:.14em;color:var(--living-muted);margin-bottom:9px}
.theme-card strong{display:block;font-size:13px;letter-spacing:.06em;margin-bottom:6px}
.theme-card span{display:block;font-size:10px;line-height:1.5;color:var(--living-muted)}
.theme-swatch{height:52px;border-radius:15px;margin-top:17px;border:1px solid rgba(255,255,255,.22)}
.theme-card[data-theme-choice="ivory"] .theme-swatch{background:linear-gradient(135deg,#f8f3e9,#d7e5da,#b96a4b)}
.theme-card[data-theme-choice="forest"] .theme-swatch{background:linear-gradient(135deg,#eff6e9,#9fc7a7,#17684a)}
.theme-card[data-theme-choice="midnight"] .theme-swatch{background:linear-gradient(135deg,#07121d,#123545,#56d0bd)}
.theme-card[data-theme-choice="ocean"] .theme-swatch{background:linear-gradient(135deg,#f3fbfb,#8fc7d8,#187fa2)}
.theme-card[data-theme-choice="shadow"] .theme-swatch{background:linear-gradient(135deg,#0d0c16,#2a1b45,#8e66e8)}
.theme-card[data-theme-choice="voyager"] .theme-swatch{background:linear-gradient(135deg,#fff4e8,#9ac7bd,#df794f)}

.living-dock{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px}
.companion-launcher{appearance:none;display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--living-accent) 22%,transparent);background:color-mix(in srgb,var(--living-surface-strong) 94%,transparent);color:var(--living-ink);border-radius:999px;padding:8px 13px 8px 8px;box-shadow:0 18px 50px color-mix(in srgb,var(--living-dark) 20%,transparent);backdrop-filter:blur(18px);cursor:pointer;transition:transform .2s ease,background .4s ease,color .4s ease}
.companion-launcher:hover,.companion-launcher:focus-visible{transform:translateY(-2px)}
.companion-orb{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 28%,white 0 8%,var(--living-accent) 12% 48%,var(--living-dark) 75%);box-shadow:0 0 0 5px color-mix(in srgb,var(--living-accent) 9%,transparent),0 0 24px var(--living-glow)}
.companion-orb:before,.companion-orb:after{content:"";position:absolute;top:17px;width:5px;height:5px;border-radius:50%;background:white;box-shadow:0 0 9px white}
.companion-orb:before{left:12px}.companion-orb:after{right:12px}
.companion-pulse{position:absolute;inset:-5px;border:1px solid color-mix(in srgb,var(--living-accent) 52%,transparent);border-radius:50%;animation:companionPulse 2.2s ease-out infinite}
@keyframes companionPulse{0%{transform:scale(.82);opacity:.9}70%,100%{transform:scale(1.45);opacity:0}}
.companion-launcher-label{display:grid;text-align:left;line-height:1.05}
.companion-launcher-label strong{font-size:10px;letter-spacing:.12em}.companion-launcher-label small{font-size:8px;color:var(--living-muted);margin-top:4px}

.companion-panel,.theme-drawer{position:fixed;z-index:100;right:20px;bottom:82px;width:min(390px,calc(100vw - 32px));max-height:min(720px,calc(100svh - 110px));overflow:auto;border:1px solid var(--living-line);border-radius:28px;background:color-mix(in srgb,var(--living-surface-strong) 96%,transparent);color:var(--living-ink);box-shadow:0 30px 90px color-mix(in srgb,var(--living-dark) 28%,transparent);backdrop-filter:blur(22px);transform:translateY(18px) scale(.98);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease,background .4s ease,color .4s ease}
.companion-panel[data-open="true"],.theme-drawer[data-open="true"]{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.theme-drawer{right:auto;left:20px;width:min(520px,calc(100vw - 32px))}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 20px 16px;border-bottom:1px solid var(--living-line)}
.panel-head-title{display:flex;align-items:center;gap:12px}.panel-head h3{margin:0;font-size:12px;letter-spacing:.12em}.panel-head p{margin:4px 0 0;font-size:9px;color:var(--living-muted)}
.panel-close{appearance:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--living-line);background:transparent;color:inherit;font-size:18px;cursor:pointer}
.companion-body{padding:20px}.companion-greeting{padding:16px;border-radius:19px;background:color-mix(in srgb,var(--living-accent) 7%,var(--living-surface));border:1px solid color-mix(in srgb,var(--living-accent) 10%,transparent);line-height:1.6;font-size:13px}
.companion-greeting strong{color:var(--living-accent)}
.companion-actions{display:grid;gap:9px;margin-top:15px}
.companion-action{appearance:none;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1px solid var(--living-line);border-radius:15px;background:var(--living-surface);color:var(--living-ink);text-decoration:none;text-align:left;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:transform .18s ease,background .25s ease}
.companion-action:hover,.companion-action:focus-visible{transform:translateX(3px);background:color-mix(in srgb,var(--living-accent) 7%,var(--living-surface))}
.companion-status{display:flex;align-items:center;gap:8px;margin-top:17px;padding-top:15px;border-top:1px solid var(--living-line);font-size:8.5px;font-weight:800;letter-spacing:.09em;color:var(--living-muted)}
.companion-status i{display:block;width:8px;height:8px;border-radius:50%;background:#34a36e;box-shadow:0 0 12px rgba(52,163,110,.55);animation:statusBeat 1.7s ease-in-out infinite}
@keyframes statusBeat{0%,100%{transform:scale(.86);opacity:.65}50%{transform:scale(1.25);opacity:1}}

.theme-drawer-body{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-drawer .theme-card{min-height:150px}

html[data-theme="midnight"] body,html[data-theme="shadow"] body{background:var(--living-bg)!important;color:var(--living-ink)}
html[data-theme="midnight"] .site-header,html[data-theme="shadow"] .site-header{background:color-mix(in srgb,var(--living-surface-strong) 92%,transparent)!important;border-bottom-color:var(--living-line)!important}
html[data-theme="midnight"] .site-header a,html[data-theme="shadow"] .site-header a{color:var(--living-ink)!important}
html[data-theme="midnight"] .hero-copy,html[data-theme="shadow"] .hero-copy{background:linear-gradient(110deg,color-mix(in srgb,var(--living-surface) 74%,transparent),transparent)!important}
html[data-theme="midnight"] .hero .eyebrow,html[data-theme="shadow"] .hero .eyebrow{background:var(--living-surface)!important;color:var(--living-ink)!important;border-color:var(--living-line)!important}
html[data-theme="midnight"] .products,html[data-theme="shadow"] .products,html[data-theme="midnight"] .winter,html[data-theme="shadow"] .winter,html[data-theme="midnight"] .contact,html[data-theme="shadow"] .contact{background:linear-gradient(160deg,var(--living-bg),color-mix(in srgb,var(--living-dark) 82%,var(--living-accent)))!important;color:var(--living-ink)!important}
html[data-theme="midnight"] .product,html[data-theme="shadow"] .product{background:color-mix(in srgb,var(--living-surface-strong) 92%,transparent)!important;color:var(--living-ink)!important;border-color:var(--living-line)!important}
html[data-theme="midnight"] .product p,html[data-theme="shadow"] .product p,html[data-theme="midnight"] .section-heading .lede,html[data-theme="shadow"] .section-heading .lede{color:var(--living-muted)!important}

@media(max-width:1120px){.theme-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .living-nav-action{display:none}
  .living-experience{padding:44px 18px}
  .living-experience-head{grid-template-columns:1fr}.living-memory{width:fit-content;white-space:normal}
  .theme-grid{grid-template-columns:1fr 1fr}.theme-card{min-height:158px;padding:14px}
  .living-dock{right:12px;bottom:12px}.companion-launcher-label{display:none}.companion-launcher{padding:7px}
  .companion-panel{right:10px;bottom:68px;width:calc(100vw - 20px);border-radius:24px}
  .theme-drawer{left:10px;bottom:68px;width:calc(100vw - 20px);border-radius:24px}.theme-drawer-body{grid-template-columns:1fr 1fr}
}
@media(max-width:470px){.theme-grid,.theme-drawer-body{grid-template-columns:1fr}.theme-card{min-height:140px}.theme-swatch{height:44px}}
@media(prefers-reduced-motion:reduce){body:before,.companion-pulse,.companion-status i,.hero .actions:after{animation:none!important}.theme-card,.companion-launcher,.companion-panel,.theme-drawer{transition:none!important}}