/*
Theme Name: VapeLux
Theme URI: https://example.com/vapelux
Author: Your Name
Description: 1:1 复原着陆页风格的电子烟销售主题（含 WooCommerce 支持）
Version: 1.0.0
Text Domain: vapelux
*/

:root{--primary:#2256d6;--text:#111;--muted:#666;--bg:#ffffff;--max:1280px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg)}
a,body,html{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.site-header{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(10px);z-index:50;border-bottom:1px solid #eee}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px}
.logo{position:absolute;left:50%;transform:translateX(-50%);height:28px}
.spacer{height:64px}

.hero{position:relative}
.hero.full-bleed img{display:block;width:100vw;margin-left:calc(50% - 50vw);height:auto}
.hero .headline{position:absolute;left:10%;bottom:18%;font-size:48px;line-height:1.1;color:#fff;max-width:940px;letter-spacing:.5px;font-weight:600;opacity:.98}
.hero .partners{display:none !important}
.partners{background:var(--primary);color:#fff;position:relative;z-index:100}
.partners .strip{position:relative;overflow:hidden;padding:0 120px;line-height:0;height:var(--bar-h,80px);display:flex;align-items:center}
.partners.full-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.partners .track{display:flex;gap:0;align-items:center;justify-content:flex-start;white-space:nowrap;flex-wrap:nowrap;will-change:transform}
.partners .track.animate{animation:marquee var(--marquee-duration,26s) linear infinite}
.partners .item{color:#fff;opacity:.95;font-weight:600}
/* 蓝条商标尺寸与间距 */
.partners .item{display:block;position:relative;flex:0 0 var(--slot-w,180px);width:var(--slot-w,180px);height:var(--bar-h,80px)}
.partners .item img{height:var(--logo-h,70px);width:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;object-fit:contain}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:72px 0}
.bleed-split{padding:0}
.section h2{font-size:40px;margin:0 0 8px}
.section .sub{color:var(--muted);margin-bottom:32px;font-size:16px;opacity:.9}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.card{display:block}
.card .meta{margin-top:12px}
.rating{color:#000}

/* 图片悬停蓝色透明遮罩 */
.card{position:relative;overflow:hidden}
.card .img{position:relative;display:block}
.card .img::after{content:"";position:absolute;inset:0;background:rgba(34,86,214,.28);opacity:0;transition:opacity .2s ease}
.card:hover .img::after{opacity:1}
.card img{transition:transform .25s ease}
.card:hover img{transform:scale(1.02)}

/* 产品卡微调 */
.product-card{position:relative;display:block;background:#fff}
.product-card .badges{position:absolute;left:12px;top:12px;display:flex;gap:6px;z-index:2}
.badge{background:#111;color:#fff;padding:4px 8px;border-radius:14px;font-size:12px}
.badge.sale{background:#d42222}
.badge.tag{background:#2256d6}
.product-card .meta{display:flex;flex-direction:column;gap:6px}
.product-card .price{font-weight:600}
.product-card .stars{color:#ffb400;letter-spacing:1px}
.product-card .labels{display:flex;gap:6px;flex-wrap:wrap}
.product-card{position:relative;overflow:hidden}
.product-card .img{position:relative;display:block}
.product-card .img::after{content:"";position:absolute;inset:0;background:rgba(34,86,214,.28);opacity:0;transition:opacity .2s ease}
.product-card:hover .img::after{opacity:1}
.product-card img{transition:transform .25s ease}
.product-card:hover img{transform:scale(1.02)}

.split{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:48px}
.split.reverse{grid-template-columns:1fr 1.2fr}
.split .title{font-size:60px;margin:0 0 10px;font-weight:600;letter-spacing:.3px}
/* 标题在新布局下放大 10 个字号 */
.bleed-split .title{font-size:80px;margin:0 0 10px;font-weight:600;letter-spacing:.3px}
.split .desc{color:var(--muted);margin-bottom:20px;font-size:15px;line-height:1.7}
/* 文本态 → 悬停变为蓝色矩形按钮 */
.btn-link{display:inline-block;position:relative;padding:10px 0;color:var(--text);transition:all .2s ease;line-height:1;border:0;background:transparent}
.btn-link::after{content:"";display:block;height:2px;width:120px;max-width:60%;margin:8px auto 0;background:#cfd3dc;transition:opacity .2s ease,background .2s ease}
.btn-link:hover,.btn-link:focus{color:#fff;background:var(--primary);padding:10px 16px;border-radius:0}
.btn-link:hover::after,.btn-link:focus::after{opacity:0}
.btn-link:active{transform:translateY(1px)}

.news-row{background:var(--primary);color:#fff}
.partners{--marquee-duration:26s}
@media(min-width:1280px){.partners{--marquee-duration:22s}}
@media(max-width:640px){.partners{--marquee-duration:30s}}
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.news-item{padding:24px}
.news-item .date{opacity:.8;font-size:13px;margin-bottom:10px}

.cta-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cta-3 .tile{position:relative}
.cta-3 .label{position:absolute;left:24px;bottom:24px;color:#fff;font-size:24px}
.cta-3 .tile img{display:block;width:100%;height:520px;object-fit:cover}

/* 让区块全宽贴边出血 */
.full-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
/* 单侧贴边工具类 */
.bleed-left{margin-left:calc(50% - 50vw);width:50vw}
.bleed-right{margin-right:calc(50% - 50vw);width:50vw;margin-left:auto}
.bleed-left img,.bleed-right img{display:block;width:50vw;height:auto}

/* 中线对齐的全宽双列：两侧各 50vw，无间距 */
.bleed-split{display:grid;grid-template-columns:50vw 50vw;align-items:center;gap:0}
.bleed-split.reverse{grid-template-columns:50vw 50vw}
.bleed-split .textpad{padding:0 48px}
/* 进入双列模式时，取消单侧贴边的负边距与固定宽度，确保右/左边缘与中线对齐 */
.bleed-split .bleed-left,.bleed-split .bleed-right{margin:0;width:100%}
.bleed-split .bleed-left img,.bleed-split .bleed-right img{width:100%;height:auto}
@media(max-width:1024px){.bleed-split{grid-template-columns:1fr}.bleed-left,.bleed-right{margin:0;width:100%}.bleed-left img,.bleed-right img{width:100%}.bleed-split .textpad{padding:24px}.bleed-split .title{font-size:56px}}

.site-footer{background:#e9eef4;color:#222;padding:28px 0;margin-top:24px}
.site-footer .nav{justify-content:center;gap:48px}

@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .cta-3{grid-template-columns:1fr}
  .hero .headline{font-size:36px;left:8%;bottom:12%}
}
@media(max-width:640px){
  .hero .headline{left:6%;bottom:10%;font-size:24px;max-width:88vw;font-weight:600}
  .partners .item{flex:0 0 var(--slot-w,180px);width:var(--slot-w,180px);height:var(--bar-h,64px)}
  .partners .item img{height:var(--logo-h-sm,60px)}
  .bleed-split .title{font-size:36px}
}

/* Mobile visual refinements */
@media(max-width:768px){
  .container{padding:0 16px}
  .section{padding:56px 0}
  .grid-4{grid-template-columns:1fr;gap:20px}
  .cta-3 .tile img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
}

@media(max-width:640px){
  .hero.full-bleed img{width:100vw;height:100vh;height:100svh;object-fit:cover;object-position:center}
  .section{padding:48px 0}
  .bleed-split .textpad{padding:16px}
  /* Enlarge split-section images on mobile similar to hero */
  .bleed-split .bleed-left img,
  .bleed-split .bleed-right img{width:100%;height:60vh;object-fit:cover;object-position:center}
}