:root{
  --cream:#fff8f5;
  --paper:#fffdfb;
  --pink:#f6dde3;
  --rose:#bd7380;
  --skin:#d8b6a4;
  --lav:#d8cadf;
  --ink:#151314;
  --muted:#6e6268;
  --line:#eadad7;
  --shadow:0 18px 50px rgba(77,47,55,.12);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,"Microsoft YaHei",sans-serif;line-height:1.6}
#app{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,248,245,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(234,218,215,.75)}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;gap:22px;padding:14px 20px}
.brand{display:flex;align-items:center}
.brand img{display:block;width:auto;height:28px;max-width:150px;object-fit:contain}
.links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.links a{padding:9px 11px;border-radius:8px;color:#3d3337;font-size:14px}
.links a:hover,.links a.active{background:#fff;color:var(--rose);box-shadow:0 6px 18px rgba(189,115,128,.12)}
.lang-select{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--rose)}
.lang-select select{appearance:none;border:1px solid var(--line);border-radius:8px;background:#fff;color:#3d3337;padding:9px 32px 9px 12px;font:inherit;font-size:14px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--rose) 50%),linear-gradient(135deg,var(--rose) 50%,transparent 50%);background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.menu{display:none;border:0;background:#fff;border-radius:8px;padding:8px 10px}
.wrap{max-width:1180px;margin:auto;padding:0 20px}
.hero{min-height:640px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:42px;padding:44px 20px 58px;max-width:1240px;margin:auto}
.hero-copy{padding:36px 0}
.eyebrow{font-size:13px;font-weight:800;color:var(--rose);text-transform:uppercase;letter-spacing:.12em}
h1{font-size:clamp(42px,6vw,76px);line-height:1.04;margin:12px 0 22px;letter-spacing:0}
h2{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:0 0 14px}
h3{font-size:21px;line-height:1.25;margin:0 0 10px}
p{margin:0;color:var(--muted)}
.lead{font-size:18px;max-width:620px;color:#594b51}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid var(--ink);font-weight:800;background:var(--ink);color:#fff}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost{background:transparent;color:var(--ink);border-color:transparent}
.hero-media{position:relative}
.hero-media img{height:min(68vh,650px);width:100%;object-fit:cover;border-radius:8px;box-shadow:var(--shadow)}
.hero-slider{position:relative;min-height:640px;overflow:hidden;background:#111}
.slides,.slide{min-height:640px}
.slide{position:absolute;inset:0;display:grid;align-items:center;background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity .65s ease}
.slide.active{opacity:1;pointer-events:auto}
.slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,248,245,.96) 0%,rgba(255,248,245,.78) 40%,rgba(255,248,245,.28) 68%,rgba(21,19,20,.08) 100%)}
.slide-soft:before{background:linear-gradient(90deg,rgba(21,19,20,.62),rgba(21,19,20,.28),rgba(21,19,20,.08))}
.slide-soft .slide-content,.slide-soft .slide-content p,.slide-soft .slide-content .notice{color:#fff}
.slide-soft .eyebrow{color:#fff}
.slide-content{position:relative;z-index:1;max-width:1180px;width:100%;margin:auto;padding:76px 20px 92px}
.slide-content h1{max-width:680px}
.slide-content .lead{max-width:620px}
.slider-btn{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(255,255,255,.78);color:var(--ink);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 10px 28px rgba(21,19,20,.12)}
.slider-btn:hover{background:#fff}
.slider-btn.prev{left:22px}
.slider-btn.next{right:22px}
.slider-dots{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:10px}
.slider-dots button{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.slider-dots button.active{width:30px;background:#fff}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.quick a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;font-weight:800;color:#594b51}
section{padding:72px 0}
.band{background:var(--paper);border-block:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head p{max-width:580px}
.grid{display:grid;gap:18px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;box-shadow:0 10px 30px rgba(90,58,65,.06)}
.card.tinted{background:linear-gradient(135deg,#fff,#fff4f6)}
.product-card{min-height:250px;display:flex;flex-direction:column;justify-content:space-between}
.product-thumb{aspect-ratio:1/1;width:100%;border-radius:8px;background:linear-gradient(135deg,var(--pink),#fff,var(--lav));background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid var(--line);margin-bottom:16px;position:relative;overflow:hidden}
.product-thumb:after{content:"";position:absolute;inset:18px;border:1px solid rgba(189,115,128,.22);border-radius:50% 50% 45% 45%;transform:rotate(-10deg)}
.product-thumb[style*="background-image"]:after{display:none}
.meta{font-size:13px;color:var(--rose);font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:13px;color:#675a5f}
.category-strip{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.category-strip img{border-radius:8px;box-shadow:var(--shadow)}
.page-hero{padding:56px 0 34px}
.page-hero h1{font-size:clamp(38px,5vw,62px)}
.product-hero-lead{max-width:none;white-space:nowrap}
.subnav{display:flex;gap:10px;overflow:auto;padding:0 0 16px;margin-bottom:12px}
.subnav a{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-weight:800;font-size:14px}
.subnav a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.product-count{margin:0 0 16px;color:var(--muted);font-size:14px}
.pagination{display:flex;justify-content:center;gap:10px;margin:28px 0 0}
.pagination a{min-width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#594b51}
.pagination a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.detail{display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:start}
.detail-visual{position:sticky;top:92px}
.detail-photo{aspect-ratio:1/1;border-radius:8px;background:linear-gradient(140deg,#fff,#f6dde3 45%,#d8cadf);background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.detail-photo:before{content:"Goobras";position:absolute;left:28px;bottom:22px;font-size:38px;font-weight:900;color:rgba(255,255,255,.78)}
.detail-photo:after{content:"";position:absolute;right:16%;top:18%;width:48%;height:58%;border:2px solid rgba(189,115,128,.35);border-radius:50% 50% 44% 44%;transform:rotate(-8deg)}
.detail-photo[style*="background-image"]:before,.detail-photo[style*="background-image"]:after{display:none}
.list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.list li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px 15px;color:#594b51}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;color:#594b51}
.table th{color:var(--ink);background:#fff5f7}
.size-guide{padding-bottom:72px}
.size-visual{margin-top:28px;background:linear-gradient(180deg,#fff,#fff8f5);border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:var(--shadow)}
.size-visual .section-head{margin-bottom:18px}
.size-visual img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid rgba(189,115,128,.18);box-shadow:0 16px 42px rgba(90,58,65,.1)}
.measure-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.measure-card{background:linear-gradient(180deg,#fff,#fff6f4);border:1px solid rgba(189,115,128,.18);border-radius:8px;padding:18px;box-shadow:0 16px 42px rgba(90,58,65,.08)}
.measure-demo{aspect-ratio:1/1;border-radius:8px;background:#fff;border:1px solid rgba(189,115,128,.14);position:relative;overflow:hidden}
.measure-demo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.measure-card h3{margin:16px 0 8px;text-align:center;color:var(--ink)}
.measure-card p{text-align:center;line-height:1.65}
.form{display:grid;gap:12px;max-width:760px}
input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:13px 14px;font:inherit}
textarea{min-height:150px;resize:vertical}
.footer{padding:40px 20px;background:#151314;color:#fff}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-main{padding-bottom:22px}
.footer-brand{display:block;font-size:32px;font-style:italic;font-weight:800;line-height:1;margin-bottom:10px}
.footer-info{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:14px}
.footer p,.footer a{color:#d8cfd2}
.footer-info span{color:#d8cfd2}
.notice{font-size:13px;color:#8a7d82;margin-top:10px}
.shop-message{min-height:22px;margin-top:12px;font-size:14px;color:var(--rose);font-weight:800}
.creator-video-section{padding-top:10px;padding-bottom:72px}
.creator-video-grid{display:grid;grid-template-columns:repeat(3,minmax(325px,1fr));gap:16px;align-items:start}
.creator-video-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;box-shadow:0 10px 30px rgba(90,58,65,.06);min-width:0;overflow:visible}
.creator-video-frame{border-radius:8px;overflow:visible;background:linear-gradient(180deg,#151314,#3d3337);position:relative}
.creator-video-card .tiktok-embed{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;border:0!important;overflow:visible!important}
.creator-video-card iframe{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;border:0!important;overflow:visible!important}
.creator-video-card [style*="max-width"]{max-width:none!important}
.tiktok-click-guard{position:absolute;z-index:5;background:rgba(255,255,255,0);pointer-events:auto}
.tiktok-click-guard.profile{top:14px;right:12px;width:42%;height:48px}
.tiktok-click-guard.cta{left:0;right:0;bottom:0;height:62px}
.creator-video-card h3{font-size:18px;margin:14px 0 8px}
.creator-video-card>p{font-size:13px;line-height:1.55}
.wear-hero{padding:0;min-height:460px;background:linear-gradient(90deg,rgba(255,248,245,.94),rgba(255,248,245,.44),rgba(255,248,245,.08)),url('assets/home-category-banner.png');background-size:cover;background-position:center;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.wear-hero-inner{width:100%;padding-top:72px;padding-bottom:72px}
.wear-hero-inner>div{max-width:680px}
.wear-hero h1{max-width:680px}
.care-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-44px;position:relative;z-index:2}
.care-menu-item{min-height:150px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.care-menu-item:after{content:"";position:absolute;right:-28px;bottom:-34px;width:110px;height:110px;border-radius:50%;background:rgba(246,221,227,.75)}
.care-menu-item span{font-size:22px;font-weight:900;position:relative;z-index:1}
.care-menu-item small{font-size:13px;color:var(--muted);line-height:1.5;position:relative;z-index:1}
.care-feature-list{padding:64px 0 18px}
.care-feature{max-width:1180px;margin:0 auto 26px;padding:0 20px;display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch}
.care-feature.reverse{grid-template-columns:1.1fr .9fr}
.care-feature.reverse .care-art{order:2}
.care-feature.reverse .care-copy{order:1}
.care-art{min-height:360px;border-radius:8px;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;background:linear-gradient(135deg,#fff,var(--pink),var(--lav));display:flex;align-items:flex-end;padding:28px}
.care-art:before{content:"";position:absolute;inset:44px 70px;border:2px solid rgba(189,115,128,.25);border-radius:50% 50% 42% 42%;transform:rotate(-8deg)}
.care-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.care-art:has(img):before{display:none}
.care-art.day{background:linear-gradient(135deg,#fff8f5,#f6dde3 48%,#d8b6a4)}
.care-art.night{background:linear-gradient(135deg,#f7f2ff,#d8cadf 42%,#151314)}
.care-art.method{background:linear-gradient(135deg,#fff,#d8b6a4,#f6dde3)}
.care-art span{font-size:74px;line-height:1;font-weight:900;color:rgba(255,255,255,.78);position:relative;z-index:1;text-shadow:0 8px 24px rgba(76,45,52,.18)}
.care-copy{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px;box-shadow:0 10px 30px rgba(90,58,65,.06)}
.care-copy .list li{background:#fffafb}
@media (max-width:900px){
  .menu{display:block;margin-left:auto}
  .links{display:none;position:absolute;left:14px;right:14px;top:60px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .links.open{display:flex}
  .links a{padding:11px}
  .lang-select{margin-left:0}
  .lang-select span{display:none}
  .hero,.category-strip,.detail{grid-template-columns:1fr}
  .hero{padding-top:22px;min-height:0}
  .hero-media img{height:auto;max-height:460px}
  .hero-slider,.slides,.slide{min-height:560px}
  .slide:before{background:linear-gradient(90deg,rgba(255,248,245,.96),rgba(255,248,245,.72))}
  .slide-content{padding:62px 58px 82px}
  .grid.three,.grid.four{grid-template-columns:1fr 1fr}
  .care-menu{grid-template-columns:1fr 1fr;margin-top:-28px}
  .care-feature,.care-feature.reverse{grid-template-columns:1fr}
  .care-feature.reverse .care-art,.care-feature.reverse .care-copy{order:initial}
  .care-art{min-height:260px}
  .section-head{display:block}
  .detail-visual{position:static}
}
@media (max-width:560px){
  body{font-size:15px}
  .nav{gap:8px;padding:10px 12px;flex-wrap:wrap}
  .brand img{height:24px;max-width:132px}
  .menu{order:3;width:100%;margin-left:0}
  .links{top:96px}
  .lang-select select{max-width:118px;padding:8px 28px 8px 10px}
  h1{font-size:clamp(34px,11vw,46px)}
  h2{font-size:clamp(26px,8vw,34px)}
  h3{font-size:19px}
  .lead{font-size:16px}
  .actions{gap:10px}
  .btn{width:100%;min-height:42px;padding:10px 14px}
  .hero-slider,.slides,.slide{min-height:560px}
  .slide-content{padding:50px 18px 82px}
  .slide:before{background:linear-gradient(180deg,rgba(255,248,245,.96),rgba(255,248,245,.8))}
  .slider-btn{width:36px;height:36px;font-size:24px}
  .slider-btn.prev{left:10px}
  .slider-btn.next{right:10px}
  .grid.three,.grid.four,.quick{grid-template-columns:1fr}
  .creator-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card{min-height:0}
  .page-hero{padding:38px 0 24px}
  .product-hero-lead{white-space:normal}
  .subnav{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .detail{gap:22px}
  .detail-photo{aspect-ratio:1/1}
  .detail-photo:before{font-size:28px}
  .category-strip{gap:18px}
  .section-head{margin-bottom:20px}
  .card,.care-copy{padding:18px}
  .size-visual{padding:16px;margin-top:20px}
  .measure-panels{grid-template-columns:1fr;gap:14px}
  .measure-card{padding:14px}
  .list li{padding:11px 12px}
  .wear-hero{min-height:430px}
  .wear-hero-inner{padding-top:52px;padding-bottom:70px}
  .care-menu{grid-template-columns:1fr;margin-top:-34px;padding-left:16px;padding-right:16px}
  .care-menu-item{min-height:126px}
  .care-feature-list{padding-top:42px}
  .care-feature{padding:0 16px;margin-bottom:18px;gap:16px}
  .care-art{min-height:210px;padding:20px}
  .care-art:before{inset:34px 48px}
  .care-art span{font-size:52px}
  .footer{padding:30px 16px}
  .creator-video-grid{grid-template-columns:1fr}
  section{padding:48px 0}
  .hero{padding-inline:16px}
}