/* ============================================================
   Saudi Oriental Lifestyle House — SOLH
   设计系统: 黑金 × 沙色 × 木质 × 玉石绿 | 高端 · 宁静 · 文化 · 奢华不浮夸
   ============================================================ */

:root{
  --bg:#0d0b08;
  --bg2:#141109;
  --bg3:#1b160d;
  --bg4:#241d10;
  --gold:#c9a45c;
  --gold-bright:#ecd39b;
  --gold-deep:#8a7140;
  --sand:#e9dcc3;
  --sand-mut:#bfae8e;
  --wood:#8a5a34;
  --wood-soft:#b0805a;
  --jade:#6d9b7f;
  --jade-soft:#a3c4b0;
  --text:#f2ebda;
  --text-mut:#b6a688;
  --text-dim:#83755c;
  --line:rgba(201,164,92,.22);
  --line-soft:rgba(201,164,92,.12);
  --serif:'Cormorant Garamond','Amiri',Georgia,serif;
  --sans:'Manrope','Noto Kufi Arabic',system-ui,sans-serif;
  --maxw:1240px;
  --radius:2px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html[dir="rtl"]{--serif:'Amiri','Cormorant Garamond',Georgia,serif}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:#141109}

/* ---------- 布局 ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:96px;position:relative}
.section-tight{padding-block:64px}
@media(max-width:768px){.section{padding-block:64px}}

/* ---------- 排版 ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:14px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.6}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.6}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--text)}
h1{font-size:clamp(40px,6vw,72px)}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:clamp(22px,2.6vw,30px)}
.lead{color:var(--sand-mut);font-size:clamp(16px,1.6vw,19px);max-width:640px;font-weight:300}
.lead.center{margin-inline:auto;text-align:center}
.center{text-align:center}
.gold{color:var(--gold-bright)}
.divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--gold);margin-block:22px;
}
.divider::before,.divider::after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--gold));}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.divider span{font-size:11px;letter-spacing:.5em}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--gold-bright);
  transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.btn::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#141109}
.btn-solid{background:var(--gold);color:#141109;border-color:var(--gold)}
.btn-solid::after{background:var(--gold-bright)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost::after{background:var(--text);}
.btn-ghost:hover{color:#141109}
.btn-sm{padding:10px 22px;font-size:11px}
.btn-block{width:100%}

/* ---------- 顶栏 ---------- */
.topbar{
  background:linear-gradient(180deg,#16120b,#0f0c07);
  border-bottom:1px solid var(--line-soft);
  font-size:12px;letter-spacing:.08em;color:var(--sand-mut);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;flex-wrap:wrap}
.topbar span{display:inline-flex;align-items:center;gap:6px}
.topbar .sep{opacity:.4}
.topbar a{color:var(--gold-bright);transition:opacity .3s}
.topbar a:hover{opacity:.8}

/* ---------- 主导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(13,11,8,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:40px;height:40px;border:1px solid var(--gold);color:var(--gold-bright);
  display:grid;place-items:center;font-family:var(--serif);font-size:20px;
  transform:rotate(45deg);
}
.logo-mark span{transform:rotate(-45deg)}
.logo-text{font-family:var(--serif);font-size:20px;letter-spacing:.06em;line-height:1.1}
.logo-text small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.42em;color:var(--gold);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand-mut);position:relative;transition:color .3s;padding-block:6px}
.nav-links a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--gold-bright)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--gold-bright)}
.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:14px}
.icon-btn{
  position:relative;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--sand);transition:all .3s;
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-bright)}
.cart-count{
  position:absolute;top:-7px;inset-inline-end:-7px;min-width:19px;height:19px;
  background:var(--gold);color:#141109;font-size:10px;font-weight:700;
  display:grid;place-items:center;border-radius:50%;padding-inline:4px;
}
.lang-btn{font-size:12px;letter-spacing:.18em;color:var(--gold-bright);border:1px solid var(--line);padding:10px 16px;transition:all .3s}
.lang-btn:hover{border-color:var(--gold);background:rgba(201,164,92,.08)}
.hamburger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line)}
.hamburger i{width:20px;height:1px;background:var(--sand);transition:all .3s}

/* 移动端菜单 */
.mobile-menu{
  position:fixed;inset:0;z-index:950;background:rgba(13,11,8,.98);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--serif);font-size:30px;color:var(--text);padding:10px;transition:color .3s}
.mobile-menu a:hover{color:var(--gold-bright)}
.mobile-menu .close{position:absolute;top:24px;inset-inline-end:24px;font-size:30px;color:var(--gold)}
.mobile-menu .lang-line{margin-top:20px;display:flex;gap:14px;align-items:center}
.mobile-menu .lang-line button{border:1px solid var(--line);padding:10px 22px;color:var(--gold-bright);font-size:12px;letter-spacing:.2em}

/* ---------- Hero ---------- */
.hero{
  min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(201,164,92,.14), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(109,155,127,.10), transparent 55%),
    var(--bg);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(201,164,92,.10) 1px, transparent 1px);
  background-size:34px 34px;opacity:.35;mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2;padding-block:80px}
.hero-copy h1{margin-block:14px 22px}
.hero-copy .lead{margin-bottom:36px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.trust-strip{display:flex;gap:0;margin-top:52px;border:1px solid var(--line-soft);background:rgba(20,17,9,.6)}
.trust-item{flex:1;padding:16px 14px;text-align:center;border-inline-end:1px solid var(--line-soft)}
.trust-item:last-child{border-inline-end:none}
.trust-item b{display:block;font-family:var(--serif);font-size:17px;color:var(--gold-bright);margin-bottom:2px}
.trust-item small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:560px;height:auto;filter:drop-shadow(0 40px 80px rgba(0,0,0,.55))}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--text-dim);font-size:10px;letter-spacing:.4em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint::after{content:"";width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:drip 2.2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 通用区块 ---------- */
.section-head{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:60px}
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-3,.grid-2{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}}

.card{
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border:1px solid var(--line-soft);
  padding:34px 28px;transition:all .4s var(--ease);position:relative;
}
.card:hover{border-color:var(--line);transform:translateY(-4px)}
.card .icon{color:var(--gold);margin-bottom:20px}
.card h3{margin-bottom:12px}
.card p{color:var(--text-mut);font-size:14.5px;font-weight:300}
.card .more{margin-top:18px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px;transition:gap .3s}
.card .more:hover{gap:14px}

/* ---------- 产品卡 ---------- */
.product-card{
  background:var(--bg2);border:1px solid var(--line-soft);
  overflow:hidden;transition:all .4s var(--ease);display:flex;flex-direction:column;
}
.product-card:hover{border-color:var(--line);transform:translateY(-5px);box-shadow:var(--shadow)}
.product-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0f0c08}
.product-media img,.product-media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.product-card:hover .product-media img{transform:scale(1.05)}
.badge{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;
}
.badge-gold{background:var(--gold);color:#141109}
.badge-jade{background:var(--jade);color:#0d0b08}
.badge-sand{background:var(--sand);color:#141109}
.product-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-cat{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.product-name{font-family:var(--serif);font-size:21px;line-height:1.2}
.product-short{font-size:13px;color:var(--text-dim);font-weight:300}
.product-price{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px}
.price{font-family:var(--serif);font-size:24px;color:var(--gold-bright)}
.price-old{font-size:13px;color:var(--text-dim);text-decoration:line-through}
.price-cur{font-size:11px;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase}
.product-actions{display:flex;gap:10px;margin-top:12px}
.product-actions .btn{flex:1;padding:12px 10px;font-size:10.5px}
.rating{font-size:12px;color:var(--gold);letter-spacing:2px}
.rating .n{color:var(--text-dim);letter-spacing:0;font-size:11px;margin-inline-start:6px}

/* ---------- 三大文化馆 ---------- */
.hall{
  position:relative;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;
  border:1px solid var(--line-soft);transition:all .45s var(--ease);
}
.hall:hover{border-color:var(--gold);transform:translateY(-6px)}
.hall-art{position:absolute;inset:0;z-index:0}
.hall-art svg{width:100%;height:100%;object-fit:cover}
.hall-body{position:relative;z-index:2;padding:36px 30px;width:100%;background:linear-gradient(180deg,transparent,rgba(13,11,8,.92) 55%)}
.hall-body h3{font-size:clamp(26px,3vw,36px);margin-bottom:8px}
.hall-body p{color:var(--sand-mut);font-size:14px;font-weight:300;max-width:420px;margin-bottom:18px}
.hall-num{position:absolute;top:20px;inset-inline-end:22px;font-family:var(--serif);font-size:60px;color:rgba(201,164,92,.28);z-index:2}

/* ---------- 直播区 ---------- */
.live-section{background:linear-gradient(180deg,var(--bg2),var(--bg) 30%,var(--bg2))}
.live-card{
  display:grid;grid-template-columns:1fr 1.2fr;border:1px solid var(--line);overflow:hidden;background:var(--bg2);
}
.live-visual{position:relative;min-height:380px;background:radial-gradient(500px 300px at 50% 20%,rgba(201,164,92,.18),transparent 65%),#0f0c08}
.live-visual svg{position:absolute;inset:0;width:100%;height:100%}
.live-tag{
  position:absolute;top:18px;inset-inline-start:18px;z-index:3;
  background:#a33;color:#fff;font-size:10px;letter-spacing:.22em;padding:7px 12px;
  display:flex;align-items:center;gap:8px;animation:pulse 2s infinite;
}
.live-tag i{width:8px;height:8px;border-radius:50%;background:#fff;display:block}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(170,51,51,.5)}50%{box-shadow:0 0 0 12px rgba(170,51,51,0)}}
.live-info{padding:48px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.live-info h3{font-size:clamp(26px,3vw,38px)}
.live-meta{display:flex;gap:26px;color:var(--text-dim);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.live-meta b{display:block;color:var(--gold-bright);font-size:16px;font-family:var(--serif);letter-spacing:0;text-transform:none}
.live-products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:900px){.live-card{grid-template-columns:1fr}.live-products{grid-template-columns:1fr}}
@media(max-width:640px){.live-products{grid-template-columns:1fr 1fr}}

/* ---------- 信任体系 ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}}
.trust-item-big{text-align:center;padding:40px 22px;border:1px solid var(--line-soft);background:var(--bg2);transition:all .4s}
.trust-item-big:hover{border-color:var(--line);transform:translateY(-4px)}
.trust-item-big .icon{width:56px;height:56px;margin-inline:auto;margin-bottom:18px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);border-radius:50%}
.trust-item-big h4{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.trust-item-big p{font-size:13px;color:var(--text-dim);font-weight:300}

/* ---------- 品牌故事 ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story-art{position:relative}
.story-art svg{width:100%;border:1px solid var(--line-soft)}
.story-copy p{color:var(--sand-mut);font-weight:300;margin-bottom:18px}
.story-values{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap}
.story-values div{flex:1;min-width:130px}
.story-values b{font-family:var(--serif);color:var(--gold-bright);font-size:26px;display:block}
.story-values small{color:var(--text-dim);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
@media(max-width:900px){.story{grid-template-columns:1fr}}

/* ---------- 评价 ---------- */
.review{background:var(--bg2);border:1px solid var(--line-soft);padding:30px;position:relative}
.review::before{content:"“";position:absolute;top:6px;inset-inline-start:18px;font-family:var(--serif);font-size:80px;color:rgba(201,164,92,.25)}
.review p{color:var(--sand-mut);font-weight:300;font-size:14.5px;margin-bottom:18px}
.review .who{display:flex;align-items:center;gap:12px}
.review .ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--wood),var(--gold-deep));display:grid;place-items:center;font-family:var(--serif);color:#141109;font-size:16px}
.review .who b{font-size:14px;display:block}
.review .who small{color:var(--text-dim);font-size:11px}

/* ---------- 促销横幅 ---------- */
.festival{
  border:1px solid var(--gold);background:
    radial-gradient(700px 300px at 85% 0%, rgba(201,164,92,.16), transparent 60%),
    linear-gradient(180deg,#191307,#120e06);
  text-align:center;padding:56px 30px;position:relative;overflow:hidden;
}
.festival h2{font-size:clamp(28px,4vw,44px)}
.festival p{color:var(--sand-mut);margin-block:10px 26px}

/* ---------- 页脚 ---------- */
.site-footer{border-top:1px solid var(--line-soft);background:#0a0805;padding-top:80px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:56px}
.footer-grid h5{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-family:var(--sans)}
.footer-grid a,.footer-grid p{display:block;color:var(--text-dim);font-size:13.5px;padding-block:5px;transition:color .3s;font-weight:300}
.footer-grid a:hover{color:var(--gold-bright)}
.footer-brand p{color:var(--text-dim);font-size:13.5px;font-weight:300;max-width:300px;margin-top:14px}
.newsletter{display:flex;margin-top:18px;border:1px solid var(--line)}
.newsletter input{flex:1;background:transparent;border:none;outline:none;color:var(--text);padding:12px 14px;font-family:inherit;font-size:13px}
.newsletter button{background:var(--gold);color:#141109;padding:12px 20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.footer-bottom{border-top:1px solid var(--line-soft);padding-block:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text-dim);font-size:12px}
.footer-bottom .pay{display:flex;gap:10px;align-items:center}
.footer-bottom .pay span{border:1px solid var(--line);padding:6px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-mut)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- 悬浮组件 ---------- */
.wa-float{
  position:fixed;bottom:96px;inset-inline-end:20px;z-index:800;
  width:56px;height:56px;border-radius:50%;background:#1fa855;color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(31,168,85,.4);
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px}

/* 移动端底部导航 */
.bottom-nav{
  display:none;position:fixed;bottom:0;inset-inline:0;z-index:850;
  background:rgba(13,11,8,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
  grid-template-columns:repeat(5,1fr);
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 12px;color:var(--text-dim);font-size:9.5px;letter-spacing:.06em}
.bottom-nav a.active,.bottom-nav a:hover{color:var(--gold-bright)}
.bottom-nav svg{width:21px;height:21px}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .bottom-nav{display:grid}
  .wa-float{bottom:88px}
  body{padding-bottom:64px}
}

/* ---------- 产品详情 ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-block:70px}
.detail-media{position:sticky;top:100px;align-self:start}
.detail-media .product-media{aspect-ratio:4/5;border:1px solid var(--line-soft)}
.detail-info h1{font-size:clamp(32px,4vw,52px);margin-block:14px 10px}
.detail-info .price-row{display:flex;align-items:baseline;gap:14px;margin-block:18px}
.detail-info .price{font-size:34px}
.detail-desc{color:var(--sand-mut);font-weight:300;margin-bottom:24px}
.detail-feats{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding-block:18px;margin-bottom:24px}
.detail-feats li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding-block:8px;color:var(--text-mut);font-size:14px}
.detail-feats li svg{flex:none;width:18px;height:18px;color:var(--gold);margin-top:3px}
.qty{display:flex;align-items:center;border:1px solid var(--line);margin-block:24px;width:max-content}
.qty button{width:44px;height:46px;color:var(--gold-bright);font-size:18px}
.qty input{width:56px;height:46px;background:transparent;border:none;text-align:center;color:var(--text);font-family:var(--serif);font-size:18px;outline:none}
.detail-cta{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:900px){.detail{grid-template-columns:1fr}.detail-media{position:static}}

/* 文化故事块 */
.story-block{border:1px solid var(--line-soft);background:var(--bg2);padding:44px 40px;margin-top:26px}
.story-block h3{margin-bottom:16px}
.story-block p{color:var(--sand-mut);font-weight:300;margin-bottom:14px}

/* 视频占位 */
.video-box{
  aspect-ratio:16/9;border:1px solid var(--line-soft);background:var(--bg2);
  display:grid;place-items:center;color:var(--text-dim);position:relative;overflow:hidden;cursor:pointer;
}
.video-box::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 50% 30%,rgba(201,164,92,.12),transparent 65%)}
.video-box .play{width:64px;height:64px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold-bright);transition:all .3s;position:relative;z-index:2}
.video-box:hover .play{background:var(--gold);color:#141109}

/* FAQ */
.faq-item{border:1px solid var(--line-soft);background:var(--bg2);margin-bottom:12px}
.faq-q{width:100%;text-align:start;padding:20px 24px;font-size:15px;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-q .pm{color:var(--gold);font-size:20px;transition:transform .3s}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 24px 22px;color:var(--text-mut);font-size:14px;font-weight:300}

/* ---------- 场景横幅 (灯具空间场景化) ---------- */
.scene-banner{
  display:none;grid-template-columns:260px 1fr;align-items:center;gap:30px;
  border:1px solid var(--gold);margin-bottom:40px;overflow:hidden;
  background:linear-gradient(90deg,#1a1308,var(--bg2));
}
.scene-banner svg{width:100%;height:100%;min-height:180px}
.scene-banner h3{font-size:26px;margin-bottom:8px}
.scene-banner p{color:var(--sand-mut);font-size:14px;font-weight:300;max-width:520px}
.scene-banner > div{padding:26px 30px 26px 0}
html[dir="rtl"] .scene-banner > div{padding:26px 0 26px 30px}
@media(max-width:768px){.scene-banner{grid-template-columns:1fr}.scene-banner > div{padding:0 22px 22px}.scene-banner svg{min-height:130px}}

/* ---------- 商城页 ---------- */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:40px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  padding:11px 22px;border:1px solid var(--line);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-mut);transition:all .3s;
}
.tab:hover,.tab.active{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,164,92,.07)}
.search-box{display:flex;border:1px solid var(--line);min-width:240px}
.search-box input{flex:1;background:transparent;border:none;outline:none;color:var(--text);padding:12px 14px;font-family:inherit;font-size:13.5px}
.search-box button{color:var(--gold);padding-inline:16px}
.empty{text-align:center;padding:80px 20px;color:var(--text-dim);display:none}
.empty.show{display:block}

/* ---------- 直播页 ---------- */
.stream-card{border:1px solid var(--line-soft);background:var(--bg2);overflow:hidden;transition:all .4s}
.stream-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.stream-thumb{position:relative;aspect-ratio:16/9;background:radial-gradient(400px 220px at 50% 20%,rgba(201,164,92,.15),transparent 65%),#0f0c08;display:grid;place-items:center}
.stream-thumb .play{width:54px;height:54px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold-bright)}
.stream-body{padding:22px}
.stream-body .when{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.stream-body h3{font-size:21px;margin-block:8px}
.stream-body p{color:var(--text-dim);font-size:13px;font-weight:300}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{text-align:center;padding:40px 24px;border:1px solid var(--line-soft);background:var(--bg2);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--serif);font-size:44px;color:rgba(201,164,92,.35);display:block;margin-bottom:12px}
.step h4{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.step p{color:var(--text-dim);font-size:13px;font-weight:300}
@media(max-width:768px){.steps{grid-template-columns:1fr}}

/* ---------- 购物车 ---------- */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.cart-item{display:grid;grid-template-columns:90px 1fr auto;gap:18px;align-items:center;padding:20px;border:1px solid var(--line-soft);background:var(--bg2);margin-bottom:14px}
.cart-item .thumb{width:90px;height:112px;overflow:hidden;background:#0f0c08}
.cart-item .thumb svg{width:100%;height:100%}
.cart-item h4{font-family:var(--serif);font-size:18px}
.cart-item .cat{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cart-item .remove{color:var(--text-dim);font-size:12px;border-bottom:1px solid transparent}
.cart-item .remove:hover{color:#d88;border-color:#d88}
.cart-summary{border:1px solid var(--line);background:var(--bg2);padding:30px;position:sticky;top:110px}
.cart-summary h3{margin-bottom:20px}
.sum-row{display:flex;justify-content:space-between;padding-block:10px;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--text-mut)}
.sum-row.total{border:none;font-size:20px;color:var(--text);font-family:var(--serif);padding-top:18px}
.sum-row.total .v{color:var(--gold-bright)}
.cod-note{margin-top:16px;padding:14px;border:1px dashed var(--line);color:var(--text-dim);font-size:12.5px;line-height:1.6}
.checkout-fields{display:grid;gap:12px;margin-top:18px}
.checkout-fields input,.checkout-fields textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:13px 14px;font-family:inherit;font-size:14px;outline:none;transition:border-color .3s}
.checkout-fields input:focus,.checkout-fields textarea:focus{border-color:var(--gold)}
.checkout-fields textarea{min-height:70px;resize:vertical}
.orders-list{margin-top:30px}
.order-row{border:1px solid var(--line-soft);background:var(--bg2);padding:18px 22px;margin-bottom:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.order-row .oid{font-size:11px;letter-spacing:.14em;color:var(--text-dim)}
.order-row .stat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);color:var(--gold-bright)}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}}

/* ---------- 账户页 ---------- */
.account-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start}
.profile-box{border:1px solid var(--line);background:var(--bg2);padding:34px}
.profile-box label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin:16px 0 8px}
.profile-box input,.profile-box textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:13px 14px;font-family:inherit;font-size:14px;outline:none}
.profile-box input:focus,.profile-box textarea:focus{border-color:var(--gold)}
@media(max-width:900px){.account-layout{grid-template-columns:1fr}}

/* ---------- 动画 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero-inner .reveal{animation:none}

/* ---------- RTL 微调 ---------- */
html[dir="rtl"] .eyebrow::before{margin-inline-end:0}
html[dir="rtl"] .logo-text{letter-spacing:.02em}
html[dir="rtl"] h1,html[dir="rtl"] h2{letter-spacing:0}
html[dir="rtl"] .price,.html[dir="rtl"] .price-old{direction:ltr;unicode-bidi:embed}

/* ---------- 页眉页面 ---------- */
.page-hero{padding-block:110px 70px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(800px 400px at 50% -10%, rgba(201,164,92,.13), transparent 60%),var(--bg);}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(201,164,92,.08) 1px,transparent 1px);background-size:34px 34px;opacity:.3}

/* ---------- 加购 Toast ---------- */
.toast{
  position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--gold);color:#141109;padding:13px 26px;font-size:13px;letter-spacing:.08em;
  z-index:999;opacity:0;pointer-events:none;transition:all .35s var(--ease);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 焦点可见性 ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .scroll-hint::after{animation:none}
}

@media(max-width:768px){
  .topbar .container{justify-content:center;min-height:32px}
  .trust-strip{flex-wrap:wrap}
  .trust-item{flex:1 1 45%}
  .hero-inner{grid-template-columns:1fr;padding-block:50px}
  .hero-art{order:-1;max-width:420px;margin-inline:auto}
}

/* ---------- 移动端首页顺序 (Mobile First) ----------
   需求顺序: LOGO → 直播入口 → 爆款 → 三大馆 → 用户评价 → WhatsApp客服 → 品牌故事 */
@media(max-width:768px){
  .page-stack{display:flex;flex-direction:column}
  .page-stack .brand-film{order:1}
  .page-stack .hero{order:2}
  .page-stack .live-sec{order:3}
  .page-stack .bestsellers{order:4}
  .page-stack .halls{order:5}
  .page-stack .reviews-sec{order:6}
  .page-stack .trust-sec{order:7}
  .page-stack .story-sec{order:8}
  .page-stack .festival-sec{order:9}
  .page-stack .philosophy{order:10}
  .hero{min-height:0}
  .scroll-hint{display:none}
}

/* ---------- 品牌视频区 (Mobile 首屏) ---------- */
.brand-film{display:none}
@media(max-width:768px){
  .brand-film{
    display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
    border-bottom:1px solid var(--line-soft);
    background:radial-gradient(600px 260px at 50% 20%,rgba(201,164,92,.16),transparent 65%),#0c0a06;
  }
  .film-stage{position:absolute;inset:0;animation:filmZoom 9s ease-in-out infinite alternate}
  .film-stage svg{width:100%;height:100%}
  .film-tag{
    position:absolute;top:12px;inset-inline-start:12px;z-index:3;
    font-size:9px;letter-spacing:.26em;text-transform:uppercase;
    background:rgba(13,11,8,.72);border:1px solid var(--line);color:var(--gold-bright);
    padding:6px 10px;display:flex;align-items:center;gap:7px;
  }
  .film-tag i{width:7px;height:7px;border-radius:50%;background:#b35959;animation:pulse 2s infinite}
  .film-play{
    position:absolute;inset:0;margin:auto;width:64px;height:64px;z-index:4;
    border:1px solid var(--gold);border-radius:50%;color:var(--gold-bright);
    display:grid;place-items:center;background:rgba(13,11,8,.5);backdrop-filter:blur(4px);
    transition:all .3s;
  }
  .film-play:hover{background:var(--gold);color:#141109}
  .brand-film.playing .film-play{opacity:0;pointer-events:none}
  .brand-film.playing .film-stage{animation-duration:1.2s;opacity:.35}
  .brand-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:2}
  .brand-film.playing .brand-video{display:block}
  .film-caption{position:absolute;bottom:12px;inset-inline:12px;z-index:3;font-size:10px;letter-spacing:.1em;color:var(--text-mut);background:rgba(13,11,8,.6);padding:6px 10px;display:flex;align-items:center;gap:8px}
  .film-caption::before{content:"✦";color:var(--gold)}
}
@keyframes filmZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes fsmoke{
  0%{transform:translateY(0);opacity:.85}
  60%{transform:translateY(-16px);opacity:.5}
  100%{transform:translateY(-30px);opacity:0}
}
@keyframes fglow{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes fsteam{
  0%{transform:translateY(0);opacity:.7}
  100%{transform:translateY(-14px);opacity:0}
}
.fsmoke{animation:fsmoke 3.4s ease-in infinite}
.fsmoke2{animation:fsmoke 4.2s ease-in infinite;animation-delay:.9s}
.fglow{animation:fglow 3.8s ease-in-out infinite}
.fsteam{animation:fsteam 3s ease-in infinite}