/* MissterVerse Clone Styles */
:root{
  --pink:#ff0099;--cyan:#00ccff;--black:#0a0a0a;--white:#fff;
  --text:#232323;--muted:#666;--bg:#fff;--border:#e5e5e5;
  --maxw:1440px;--radius:8px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0;font-family:var(--ff);font-size:1.5rem;line-height:1.6;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.marquee{background:var(--black);color:#fff;overflow:hidden;white-space:nowrap;font-size:1.3rem;padding:.8rem 0}
.marquee span{display:inline-block;padding-left:100%;animation:marquee 20s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-top{padding:1.2rem 0}
.logo img{height:42px;width:auto}
.header-search{flex:1;max-width:520px;display:flex;border:1px solid var(--border);border-radius:50px;overflow:hidden;background:#f8f8f8}
.header-search input{flex:1;border:none;background:transparent;padding:1rem 1.8rem;outline:none;font-size:1.4rem}
.search-btn{border:none;background:var(--black);color:#fff;padding:0 2.2rem;cursor:pointer;font-weight:600}
.header-icons{display:flex;gap:1.6rem;font-size:1.4rem;font-weight:600}
.header-icons a:hover{color:var(--pink)}
.main-nav{border-top:1px solid var(--border);padding:.6rem 0;overflow-x:auto}
.nav-inner{display:flex;gap:2.4rem;white-space:nowrap}
.nav-inner a{font-size:1.4rem;font-weight:600;position:relative}
.nav-inner a:hover{color:var(--cyan)}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#00ccff22,#ff009922)}
.hero img{width:100%;display:block}
.hero-text{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:520px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.hero-text h1{font-size:4.2rem;line-height:1.05;margin:0 0 1.5rem}
.hero-text p{font-size:1.7rem;margin:0 0 2rem}
.btn{display:inline-block;background:var(--black);color:#fff;padding:1.3rem 2.8rem;border-radius:var(--radius);font-weight:700;border:2px solid var(--black);cursor:pointer;transition:.2s}
.btn:hover{background:var(--pink);border-color:var(--pink)}
.btn-outline{background:transparent;color:var(--black);border:2px solid var(--black)}
.btn-outline:hover{background:var(--black);color:#fff}

/* sections */
.section{padding:5rem 0}
/* 内容页正文（Pages / 博客） */
.content-body{max-width:900px;margin:0 auto;font-size:1.6rem;line-height:1.9;color:#333}
.content-body p{margin:0 0 1.6rem}
.content-body h2{font-size:2.2rem;margin:2.2rem 0 1.2rem}
.content-body h3{font-size:1.9rem;margin:2rem 0 1rem}
.content-body ul,.content-body ol{margin:0 0 1.6rem;padding-left:2.4rem}
.content-body li{margin-bottom:.6rem}
.content-body img{max-width:100%;border-radius:.6rem;margin:1rem 0}
.content-body a{color:#ff0099;text-decoration:underline}
.blog-hero{padding:4.5rem 0;background:linear-gradient(120deg,#ff009933,#00ccff33);text-align:center}
.blog-hero h1,.collection-hero h1{font-size:3.2rem;margin:0 0 1rem;line-height:1.25}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem}
.section-head h2{margin:0;font-size:2.6rem;font-weight:800}
.view-all{font-weight:700;border-bottom:2px solid var(--black)}
.view-all:hover{color:var(--pink);border-color:var(--pink)}

/* category */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cat-card:hover img{transform:scale(1.06)}
.cat-card span{position:absolute;left:0;bottom:0;width:100%;padding:1.4rem;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-weight:800;font-size:1.8rem}

/* product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2.4rem}
.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:box-shadow .2s}
.product-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.1)}
.card-img{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:#f4f4f4}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.card-img .img-secondary{opacity:0}
.card-img:hover .img-secondary{opacity:1}
.badge-new{position:absolute;top:1rem;left:1rem;background:var(--pink);color:#fff;font-size:1.1rem;font-weight:800;padding:.3rem .9rem;border-radius:4px}
.card-info{padding:1.5rem}
.card-title{display:block;font-weight:700;font-size:1.5rem;line-height:1.35;margin-bottom:.6rem;min-height:4rem}
.card-title:hover{color:var(--pink)}
.card-price{font-size:1.6rem;font-weight:800;margin-bottom:1rem}
.price-compare{text-decoration:line-through;color:var(--muted);font-weight:500;margin-left:.6rem;font-size:1.4rem}
.btn-add{width:100%;background:var(--black);color:#fff;border:none;padding:1rem;border-radius:var(--radius);font-weight:700;cursor:pointer}
.btn-add:hover{background:var(--pink)}

/* help / more */
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.help-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#fff}
.help-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.help-card div{padding:1.4rem}
.help-card h3{margin:0 0 .4rem;font-size:1.7rem}
.help-card p{margin:0;color:var(--muted)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text h2{font-size:3rem;margin:0 0 1.5rem}
.about-text p{color:var(--muted);font-size:1.6rem;margin:0 0 1.2rem}
.about-img{border-radius:var(--radius);overflow:hidden}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem}
.blog-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.blog-card h3{margin:0;padding:1.5rem;font-size:1.7rem}

/* faq */
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{padding:1.6rem 0;font-weight:800;font-size:1.7rem;cursor:pointer;display:flex;justify-content:space-between}
.faq-q::after{content:'+'}
.faq-a{padding-bottom:1.6rem;color:var(--muted);display:none}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q::after{content:'-'}

/* seo */
.seo-block{padding:4rem 0;background:#f9f9f9}
.seo-block h1{font-size:2.4rem;margin-bottom:1.5rem}
.seo-block p{font-size:1.5rem;color:var(--muted);margin-bottom:1rem}

/* footer */
.site-footer{background:var(--black);color:#fff;padding:5rem 0 0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:3rem}
.footer-grid h4{font-size:1.6rem;margin:0 0 1.2rem;color:#fff}
.footer-grid a{display:block;color:#aaa;font-size:1.4rem;margin-bottom:.8rem}
.footer-grid a:hover{color:var(--cyan)}
.newsletter input{width:100%;padding:1rem;border:none;border-radius:4px;margin-bottom:1rem}
.newsletter button{width:100%;background:var(--pink);color:#fff;border:none;padding:1rem;border-radius:4px;font-weight:700;cursor:pointer}
.footer-bottom{text-align:center;padding:2.5rem 0;border-top:1px solid #333;margin-top:3rem;color:#888;font-size:1.3rem}

/* collection page */
.collection-hero{padding:5rem 0;background:linear-gradient(90deg,#ff009922,#00ccff22);text-align:center}
.collection-hero h1{font-size:3.6rem;margin:0 0 1rem}
.collection-hero p{color:var(--muted);max-width:700px;margin:0 auto}

/* product page */
.product-page{padding:4rem 0}
.breadcrumbs{font-size:1.3rem;color:var(--muted);margin-bottom:2rem}
.breadcrumbs a{color:var(--muted)}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.gallery-main{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#f4f4f4}
.gallery-main img{width:100%;aspect-ratio:2/3;object-fit:cover}
.gallery-thumbs{display:flex;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.gallery-thumbs img{width:80px;height:80px;object-fit:cover;border-radius:4px;border:2px solid transparent;cursor:pointer}
.gallery-thumbs img.active{border-color:var(--pink)}
.product-info h1{font-size:3rem;margin:0 0 1rem;line-height:1.2}
.product-price{font-size:2.4rem;font-weight:800;margin-bottom:1.5rem}
.product-desc{margin:2rem 0;color:var(--muted)}
.product-desc h2,.product-desc h3,.product-desc h4{color:var(--text)}
/* 数量选择 + 加购按钮：按钮默认 width:100% 会挤压数量框，这里显式约束 */
.product-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:1.2rem;margin:2rem 0}
.product-actions .btn-add{width:auto;flex:1 1 220px;min-width:170px;padding:1rem 2rem;border-radius:var(--radius)}
.qty{flex:0 0 auto;display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.qty button{flex:0 0 auto;width:44px;min-height:44px;border:none;background:#f4f4f4;color:var(--text);font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.qty button:hover{background:var(--pink);color:#fff}
.qty button:disabled{opacity:.4;cursor:not-allowed;background:#f4f4f4;color:var(--text)}
.qty input{flex:0 0 auto;width:56px;min-height:44px;border:none;text-align:center;font-weight:700;font-size:1.6rem;background:transparent;color:inherit;font-family:inherit;padding:0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:420px){
  .product-actions{gap:.8rem}
  .product-actions .btn-add{flex:1 1 100%}
}
.accordion{border-top:1px solid var(--border);margin-top:3rem}
.accordion-item{border-bottom:1px solid var(--border)}
.accordion-head{padding:1.6rem 0;font-weight:800;cursor:pointer;display:flex;justify-content:space-between}
.accordion-body{padding-bottom:1.6rem;color:var(--muted);display:none}
.accordion-item.open .accordion-body{display:block}

/* responsive */
@media (max-width:900px){
  .about-grid,.product-layout{grid-template-columns:1fr}
  .hero-text h1{font-size:2.8rem}
  .header-search{display:none}
  .nav-inner{gap:1.6rem}
}
@media (max-width:600px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}