/* =====================================================
   YUSO — Theme "Lumière"  (violet / lavender / glass)
   Loaded AFTER style.css & commerce.css. Pure override.
   ===================================================== */

:root{
  /* palette — LUMIÈRE: white base, lavender gradients, violet accent */
  --cream:      #FFFFFF;
  --cream-2:    #F6F4FD;
  --cream-3:    #EDE9FB;
  --paper:      #FFFFFF;
  --ink:        #2D2D53;
  --ink-soft:   #4B4B72;
  --muted:      #8E8EA8;
  --green:      #7C3AED;   /* primary violet */
  --green-deep: #232144;   /* deep indigo (dark sections / footer) */
  --green-mist: #F1EDFE;
  --sage:       #A78BFA;
  --gold:       #7C3AED;
  --rose:       #C4B5FD;
  --line:       #E6E2F4;
  --line-soft:  #F1EEFA;
  --danger:     #E11D48;

  /* type — geometric sans everywhere (template uses Poppins-like) */
  --serif: "Poppins", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans:  "Poppins", -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  /* geometry — soft rounded, friendly */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* elevation — soft violet shadows */
  --sh-1: 0 1px 2px rgba(45,45,83,.05);
  --sh-2: 0 18px 44px rgba(45,45,83,.10);
  --sh-3: 0 30px 70px rgba(124,58,237,.16);
}

/* ---------- typography ---------- */
body{ font-weight:400; }

.display, .h1, .h2, .h3{
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--ink);
}
.display{ font-weight:700; }
.display em, .h1 em, .h2 em, .marquee-track span em{
  font-style:normal;
  color:var(--green);
}
.display em, .h1 em, .h2 em{ font-weight:700; }
.h4{ font-weight:600; }

.eyebrow{
  color:var(--green);
  font-weight:600;
  letter-spacing:.22em;
  font-size:11px;
}

.lead{ color:var(--ink-soft); }

/* ---------- buttons ---------- */
.btn{
  height:52px; padding:0 34px;
  border-radius:12px;
  background:linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%);
  color:#fff;
  font-size:14px; letter-spacing:.01em; text-transform:none; font-weight:600;
  box-shadow:0 12px 26px rgba(124,58,237,.26);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.btn:hover{
  box-shadow:0 16px 34px rgba(124,58,237,.36);
  transform:translateY(-1px);
  background:linear-gradient(135deg,#7C3AED 0%,#5B21B6 100%);
}
.btn.ghost{
  background:#fff; color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.btn.ghost:hover{ border-color:var(--green); color:var(--green); transform:translateY(-1px); }
.btn.light{ background:#fff; color:var(--ink); box-shadow:none; }
.btn.sm{ height:44px; padding:0 24px; font-size:13px; border-radius:10px; }

/* ---------- announce bar ---------- */
.announce{
  background:linear-gradient(90deg,#6D28D9,#8B5CF6 55%,#A78BFA);
  color:#fff;
  letter-spacing:.06em;
  text-transform:none;
  font-size:12px;
  font-weight:500;
}
.announce b{ color:#EDE9FE; }

/* ---------- header ---------- */
.site-head{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-head.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 24px rgba(45,45,83,.07);
}
.site-head .brand{ font-weight:700; letter-spacing:.06em; }
.site-head .brand span{ color:var(--green); }
.nav a{ letter-spacing:.01em; font-weight:500; text-transform:none; font-size:14px; }

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(58% 68% at 78% 18%, rgba(167,139,250,.20) 0%, rgba(167,139,250,0) 62%),
    radial-gradient(50% 60% at 12% 82%, rgba(196,181,253,.18) 0%, rgba(196,181,253,0) 60%),
    linear-gradient(180deg,#F6F4FE 0%,#FDFCFF 62%,#FFFFFF 100%);
}
.hero-plate{
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
}

/* ---------- product cards ---------- */
.p-media{ border-radius:var(--r-md) var(--r-md) 0 0; }
.p-card{
  border-radius:var(--r-md);
  transition:transform .45s var(--ease);
}
.p-card:hover{ transform:translateY(-6px); }
.p-card:hover .p-media{ box-shadow:var(--sh-2); }
.p-name{ font-weight:600; }
.p-price{ color:var(--green); font-weight:700; font-size:15px; }
.p-stars b{ color:var(--gold); }
.p-tag{ background:var(--green); border-radius:999px; }

/* ---------- category tiles ---------- */
.cat-tile{ border-radius:var(--r-lg); overflow:hidden; }
.cat-tile .inner b{ font-weight:600; }

/* ---------- marquee ---------- */
.marquee-track span{
  font-family:var(--sans);
  font-weight:600;
  font-style:normal;
  letter-spacing:0;
}

/* ---------- dark sections ---------- */
.reviews{ background:var(--green-deep); }
.reviews .rev-card{ background:var(--green-deep); }
.reviews .eyebrow{ color:var(--sage); }

/* ---------- newsletter ---------- */
.newsletter{
  border-top:0;
  background:linear-gradient(180deg,#F6F4FE 0%,#FFFFFF 100%);
}
.news-form{ border-bottom-color:var(--ink); }

/* ---------- footer ---------- */
.site-foot{ background:var(--green-deep); }
.site-foot .brand span{ color:var(--sage); }
.site-foot .brand small,
.foot-about,
.foot-col a{ color:#B4B2D4; }
.foot-col a:hover{ color:#fff; }
.site-foot .brand{ font-weight:700; letter-spacing:.06em; }

/* ---------- ritual / values / story ---------- */
.ritual-step .num, .step-num{ color:var(--sage); }
.quote blockquote, .story blockquote{ font-style:normal; }

/* ---------- commerce (checkout / account / login) ---------- */
.summary, .ac-card, .refund, .pay-sheet{
  border-radius:var(--r-md);
}
.card-visual{
  background:linear-gradient(135deg,#3B3670 0%,#2D2D53 55%,#232144 100%);
  color:#EFEDFC;
  border-radius:var(--r-md);
  border:0;
  box-shadow:0 20px 44px rgba(45,45,83,.28);
}
.card-visual .meta{ color:#A9A6CF; }
.card-visual .meta b{ color:#EFEDFC; }

/* login split art */
.login-art{ background:linear-gradient(160deg,#3B3670,#7C3AED); }

/* selection color */
::selection{ background:rgba(124,58,237,.18); }

/* focus rings — violet */
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--green) !important;
  box-shadow:0 0 0 3px rgba(124,58,237,.14);
}

/* mobile safety: let product cards shrink inside grid tracks */
@media (max-width:640px){
  .p-grid > *{ min-width:0; }
  .p-row{ flex-wrap:wrap; row-gap:4px; }
  .p-cat{ letter-spacing:.18em; }
}

/* ---------- liquid glass hosts ---------- */
.site-head.liquid-glass{
  position:sticky; top:0;
  background:rgba(255,255,255,.30);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.45);
  box-shadow:none;
}
.site-head.liquid-glass.stuck{ background:rgba(255,255,255,.34); border-bottom-color:rgba(255,255,255,.55); }

.hero-badge.liquid-glass{
  position:absolute;
  background:rgba(255,255,255,.22);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0; border-radius:16px;
  box-shadow:0 14px 36px rgba(45,45,83,.14);
}

.summary.liquid-glass{
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
}

.ac-nav.liquid-glass{
  padding:18px 22px;
  background:rgba(255,255,255,.35);
  border-radius:16px;
}
.ac-nav.liquid-glass button{ border-bottom-color:var(--line-soft); }
.ac-nav.liquid-glass button:last-child{ border-bottom:0; }

.login-box.liquid-glass{
  padding:34px 32px;
  background:rgba(255,255,255,.45);
  border-radius:22px;
  box-shadow:0 18px 48px rgba(45,45,83,.10);
}

/* ---------- real product photos ---------- */
.p-media .p-img{
  width:100%; height:100%; object-fit:contain;
  display:block; padding:8%;
  transition:transform .6s var(--ease);
}
.p-card:hover .p-img{ transform:scale(1.05); }
.thumb .p-img{ padding:4px; }
.pdp-main .pdp-img, .pdp-thumb .p-img{
  width:100%; height:100%; object-fit:contain; display:block; padding:6%;
}
.cart-line .thumb .p-img{ padding:4px; }
.cat-art .p-img{ width:70%; height:auto; object-fit:contain; }

/* ---------- search overlay ---------- */
.search-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; justify-content:center; align-items:flex-start;
  padding:12vh 20px 40px;
  background:rgba(35,33,68,.32);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.search-modal.on{ opacity:1; visibility:visible; }
.sm-panel{
  width:min(660px,100%);
  background:#fff;
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px rgba(35,33,68,.28);
  overflow:hidden;
  transform:translateY(-14px);
  transition:transform .34s var(--ease);
}
.search-modal.on .sm-panel{ transform:translateY(0); }
.sm-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
}
.sm-head svg{ width:18px; height:18px; flex:none; fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; }
.sm-head input{
  flex:1; min-width:0; border:0 !important; background:transparent;
  font-family:var(--sans); font-size:15.5px; color:var(--ink);
  box-shadow:none !important; padding:4px 0;
}
.sm-head input::placeholder{ color:var(--muted); }
.sm-close{
  flex:none; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:999px; padding:5px 10px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.sm-close:hover{ border-color:var(--green); color:var(--green); }
.sm-body{ max-height:54vh; overflow:auto; padding:6px 10px 14px; }
.sm-label{
  padding:14px 12px 8px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.sm-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 12px 12px; }
.sm-chip{
  cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:8px 15px; font-family:var(--sans); font-size:12.5px;
}
.sm-chip:hover{ border-color:var(--green); color:var(--green); }
.sm-row{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:var(--r-md); }
.sm-row:hover{ background:rgba(124,58,237,.06); }
.sm-thumb{
  width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; border:1px solid var(--line-soft);
}
.sm-thumb img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.sm-name{ flex:1; min-width:0; font-size:13.5px; color:var(--ink); line-height:1.35; }
.sm-name em{ display:block; font-style:normal; font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:3px; }
.sm-price{ flex:none; font-size:13px; color:var(--ink); }
.sm-empty{ padding:34px 16px 40px; text-align:center; font-size:13px; line-height:2; color:var(--muted); }
.sm-foot{
  padding:12px 22px 16px; border-top:1px solid var(--line-soft);
  font-size:11px; letter-spacing:.05em; color:var(--muted);
}
@media (max-width:640px){
  .search-modal{ padding:8vh 14px 20px; }
  .sm-body{ max-height:58vh; }
}

/* ---------- PDP option hint ---------- */
.opt-hint{
  margin:-4px 0 18px;
  font-size:11.5px; letter-spacing:.02em; color:var(--muted); line-height:1.7;
}

/* ---------- empty bag on checkout ---------- */
.co-empty-wrap{ display:none; }
.co-empty-wrap.on{ display:block; padding:120px 0 150px; }
.co-empty-wrap .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){
  .co-empty-wrap.on{ padding:80px 0 100px; }
}

/* ---------- shop search chip ---------- */
.shop-toolbar #searchChip{ flex:1; margin-left:16px; }
.q-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 8px 7px 14px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--cream-2);
  font-size:11.5px; color:var(--ink); letter-spacing:.02em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.q-chip button{
  flex:none; width:20px; height:20px; border-radius:50%;
  border:0; background:#fff; color:var(--muted);
  font-size:10px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.q-chip button:hover{ background:var(--green); color:#fff; }
@media (max-width:640px){
  .shop-toolbar{ flex-wrap:wrap; }
  .shop-toolbar #searchChip{ flex-basis:100%; margin-left:0; order:3; }
}