/*
Theme Name: Primecrabtech 3C
Theme URI: https://www.primecrabtech.com
Author: Primecrabtech
Description: 3C 跨境独立站 - 工厂直供优质 3C 数码产品,纯白杂志风设计, 视觉规范 #2374FF 科技蓝/ #FF7828 暖橙.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: primecrabtech-3c
*/

/*
 * Primecrabtech 3C - Global Design System v3
 * 视觉规范: 纯白底 / 科技蓝 #2374FF / 暖橙 #FF7828 / 无硬分割线
 */

/* ===== GLOBAL TOKENS ===== */
:root{
  --c-bg:#FFFFFF;
  --c-bg-soft:#F7F9FC;
  --c-text:#333333;
  --c-text-2:#555555;
  --c-text-3:#777777;
  --c-border:#EBEBEB;
  --c-brand:#2374FF;
  --c-brand-dark:#1D62D9;
  --c-brand-soft:rgba(35,116,255,0.07);
  --c-action:#2374FF;
  --c-action-dark:#1D62D9;
  --c-rating:#FFB400;
  --c-video:#0B1220;

  --r-card:16px;
  --r-section:24px;
  --r-btn:12px;
  --r-tag:8px;
  --r-pill:999px;

  --p-sides:40px;
  --p-section:80px;
  --p-card:24px;
  --p-card-h:20px;
  --gap-lg:64px;
  --gap-md:48px;
  --gap-sm:24px;
  --gap-xs:16px;

  --sh-card:0 0 0 1px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.08);
  --sh-hover:0 0 0 1px rgba(0,0,0,0.04),0 6px 18px rgba(0,0,0,0.11);
  --sh-btn-action:0 6px 18px rgba(255,120,40,0.32);
  --sh-btn-brand:0 6px 18px rgba(35,116,255,0.2);
  --sh-brand-sm:0 3px 10px rgba(35,116,255,0.2);

  --fs-disp:42px;--fs-h1:30px;--fs-h2:22px;--fs-h3:18px;
  --fs-body:15px;--fs-small:13px;--fs-tiny:12px;
  --fw-b:700;--fw-s:600;--fw-m:500;--fw-r:400;

  --max-w:1440px;
  --max-w-content:1200px;
}
@media(max-width:900px){:root{--p-sides:28px;--p-section:60px;--p-card:20px;--gap-lg:48px;--gap-md:36px}}
@media(max-width:600px){:root{--p-sides:20px;--p-section:48px;--gap-lg:36px;--gap-md:28px;--fs-disp:30px;--fs-h1:24px;--fs-h2:20px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.6;color:var(--c-text);
  background:var(--c-bg);-webkit-font-smoothing:antialiased;margin:0;
}
a{color:var(--c-brand);text-decoration:none}a:hover{color:var(--c-brand-dark)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}

.container{max-width:var(--max-w);margin:0 auto;padding-left:var(--p-sides);padding-right:var(--p-sides);width:100%}
.container--narrow{max-width:var(--max-w-content)}
.section{padding:var(--p-section) 0}
.section--sm{padding:var(--gap-md) 0}

.display{font-size:var(--fs-disp);font-weight:var(--fw-b);line-height:1.15;letter-spacing:-0.02em}
.h1{font-size:var(--fs-h1);font-weight:var(--fw-b);line-height:1.2;letter-spacing:-0.015em}
.h2{font-size:var(--fs-h2);font-weight:var(--fw-b);line-height:1.25;letter-spacing:-0.01em}
.h3{font-size:var(--fs-h3);font-weight:var(--fw-s);line-height:1.3}
.text-muted{color:var(--c-text-3)}

/* 主按钮：暖橙底+白字+12px */
.btn-primary,.btn-action{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 28px;
  font-size:var(--fs-body);font-weight:var(--fw-s);
  border-radius:var(--r-btn);border:none;cursor:pointer;
  background:var(--c-action);color:#fff;
  box-shadow:var(--sh-btn-action);text-decoration:none;
  transition:all .2s ease;font-family:inherit;white-space:nowrap;
}
.btn-primary:hover,.btn-action:hover{background:var(--c-action-dark);transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,120,40,0.4)}
.btn-primary:active,.btn-action:active{transform:translateY(0)}

/* 次级按钮：白底+科技蓝边框 */
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;
  font-size:var(--fs-body);font-weight:var(--fw-s);
  border-radius:var(--r-btn);border:1.5px solid var(--c-brand);
  background:#fff;color:var(--c-brand);cursor:pointer;
  text-decoration:none;transition:all .2s ease;font-family:inherit;white-space:nowrap;
}
.btn-secondary:hover{background:var(--c-brand);color:#fff;box-shadow:var(--sh-brand-sm)}

.card{background:var(--c-bg);border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card);transition:box-shadow .25s ease,transform .25s ease}
.card:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}

.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-tag);font-size:var(--fs-tiny);font-weight:var(--fw-s);background:var(--c-brand);color:#fff}
.tag--outline{background:transparent;border:1px solid var(--c-border);color:var(--c-text-3)}
.tag--action{background:var(--c-action)}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:var(--fw-b);color:var(--c-text);letter-spacing:-0.01em}
.logo:hover{color:var(--c-brand)}
.logo-img{height:38px;width:auto;display:block}
.logo-text{font-size:20px;font-weight:700}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:var(--fs-body);color:var(--c-text-2);font-weight:var(--fw-m);transition:color .2s}
.nav a:hover,.nav a.active{color:var(--c-brand)}
.header-actions{display:flex;align-items:center;gap:12px}
.header-search{display:flex;align-items:center;gap:8px;width:220px;height:38px;padding:0 14px;border:1.5px solid var(--c-border);border-radius:19px;background:var(--c-bg);color:var(--c-text-3);transition:border-color .2s}
.header-search:focus-within{border-color:var(--c-brand)}
.header-search input{flex:1;border:0;background:transparent;outline:none;font-size:var(--fs-small);color:var(--c-text)}
.header-search input::placeholder{color:var(--c-text-3)}
.ha-icon{position:relative;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--c-text-2);transition:all .2s}
.ha-icon:hover{background:var(--c-bg-soft);color:var(--c-brand)}
.ha-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--c-brand);color:#fff;font-size:10px;font-weight:var(--fw-b);display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.header-search{display:none}.nav{display:none}}

/* ===== VIDEO CARDS ===== */
.video-section{background:var(--c-bg-soft)}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.video-grid{grid-template-columns:1fr;gap:16px}}
.video-card{background:var(--c-bg);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--c-border)}
.video-header{padding:14px 16px;font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text-3);border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center}
.video-wrap{position:relative;padding-top:56.25%;background:#0B1220;overflow:hidden}
.video-wrap--placeholder{background:#0B1220;padding-top:56.25%;position:relative}
.video-wrap--placeholder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-thumb-wrap{position:relative;padding-top:56.25%;background:#0B1220;overflow:hidden}
.video-thumb-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(11,18,32,0.5)}
.video-play-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;backdrop-filter:blur(4px)}
.video-cta-badge{font-size:var(--fs-small);color:rgba(255,255,255,0.9);font-weight:var(--fw-s)}
.video-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#0B1220;font-size:12px;color:rgba(255,255,255,0.6)}
.vb-step{font-size:16px}
.vb-label{flex:1;font-size:11px}
.vb-bar{flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;position:relative}
.vb-fill{height:100%;width:0;background:var(--c-brand);border-radius:2px}
.vb-knob{position:absolute;top:-2px;right:0;width:8px;height:8px;border-radius:50%;background:#fff}
.vb-icon{font-size:14px}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,0.4);cursor:pointer;text-decoration:none}
.video-play{font-size:32px;color:#fff}
.video-cta{font-size:var(--fs-small);color:rgba(255,255,255,0.9);font-weight:var(--fw-s)}

/* SHOP HERO */
.shop-hero{padding:64px 0 0}
.shop-hero-tag{font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-brand);margin-bottom:10px;display:block}
.shop-hero-title{font-size:var(--fs-disp);font-weight:var(--fw-b);color:var(--c-text);line-height:1.12;letter-spacing:-0.02em;margin-bottom:14px}
.shop-hero-desc{font-size:var(--fs-body);color:var(--c-text-3);line-height:1.65;max-width:560px;margin-bottom:36px}

/* ===== HOME HERO ===== */
.hero{padding:80px 0 64px;background:var(--c-bg)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:32px}}
.hero-content{}.hero-tagline{display:inline-block;font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-brand);padding:6px 14px;background:var(--c-brand-soft);border-radius:var(--r-pill);margin-bottom:20px}
.hero-title{font-size:var(--fs-disp);font-weight:var(--fw-b);color:var(--c-text);line-height:1.1;letter-spacing:-0.02em;margin-bottom:18px}
.hero-desc{font-size:17px;color:var(--c-text-3);line-height:1.65;margin-bottom:32px;max-width:520px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-image{display:flex;align-items:center;justify-content:center;background:var(--c-bg-soft);border-radius:var(--r-section);min-height:400px;padding:24px}
.hero-image img{max-width:100%;max-height:440px;width:auto;height:auto;display:block}
.shop-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px}
.shop-tab{height:40px;padding:0 20px;border-radius:var(--r-pill);border:1.5px solid var(--c-border);background:#fff;font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text-2);cursor:pointer;transition:all .2s;font-family:inherit}
.shop-tab:hover{border-color:var(--c-brand);color:var(--c-brand)}
.shop-tab.active{background:var(--c-brand);border-color:var(--c-brand);color:#fff}

/* MASONRY */
.shop-masonry{columns:3 280px;column-gap:24px;margin-bottom:var(--gap-md)}
@media(max-width:900px){.shop-masonry{columns:2 240px}}
@media(max-width:600px){.shop-masonry{columns:1}}

.shop-card{break-inside:avoid;margin-bottom:24px;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;display:flex;flex-direction:column}
.shop-card:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
/* 耳机左上浮 */
.shop-card--earphones{transform:translateY(-8px)}
/* 手表轻微下沉 */
.shop-card--watch{transform:translateY(4px)}
/* 充电宝通栏 */
@media(min-width:1100px){.shop-card--powerbank{column-span:all}}

.shop-card-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--c-bg-soft);display:flex;align-items:center;justify-content:center}
.shop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.shop-card:hover .shop-card-img img{transform:scale(1.03)}
.shop-card-placeholder{font-size:56px;opacity:0.4}
.shop-card-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.shop-card-tag{display:inline-block;padding:3px 8px;border-radius:var(--r-tag);font-size:var(--fs-tiny);font-weight:var(--fw-s);margin-bottom:10px}
.shop-card-tag--video{background:var(--c-brand);color:#fff}
.shop-card-tag--new{background:var(--c-action);color:#fff}
.shop-card-title{font-size:var(--fs-body);font-weight:var(--fw-s);color:var(--c-text);margin-bottom:8px;line-height:1.4}
.shop-card-sub{font-size:var(--fs-small);color:var(--c-text-3);margin-bottom:14px;line-height:1.5;flex:1}
.shop-card-price{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:14px}
.shop-card-price del{font-size:var(--fs-small);color:var(--c-text-3);font-weight:var(--fw-r);margin-left:6px}
.shop-card-actions{display:flex;gap:10px}
.shop-card-btn{flex:1;height:38px;padding:0 14px;font-size:var(--fs-small);border-radius:var(--r-btn)}

/* BLOG GUIDE INTERLUDE */
.guide-interlude{background:var(--c-bg-soft);border-radius:var(--r-section);padding:var(--gap-lg) var(--p-card);margin:var(--gap-md) 0}
.guide-interlude-inner{display:flex;align-items:center;gap:var(--gap-lg)}
.guide-interlude-text{flex:1}
.guide-interlude-title{font-size:var(--fs-h2);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:10px;letter-spacing:-0.01em}
.guide-interlude-desc{font-size:var(--fs-body);color:var(--c-text-3);margin-bottom:22px;line-height:1.6}
.guide-interlude-img{width:180px;height:140px;border-radius:var(--r-card);flex-shrink:0;background:var(--c-bg);display:flex;align-items:center;justify-content:center;font-size:64px;opacity:0.6}
@media(max-width:700px){.guide-interlude-inner{flex-direction:column}.guide-interlude-img{width:100%;height:120px}}

/* TRUST STRIP */
.trust-strip{padding:var(--gap-md) 0}
.trust-strip-inner{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.trust-strip-item{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text-2)}
.trust-strip-sep{width:4px;height:4px;border-radius:50%;background:var(--c-border)}
@media(max-width:600px){.trust-strip-inner{gap:20px;flex-direction:column}}

/* FOOTER */
.site-footer{padding:64px 0 40px;border-top:1px solid rgba(0,0,0,0.05);margin-top:var(--gap-lg)}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-md);margin-bottom:var(--gap-lg)}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-col-title{font-size:var(--fs-small);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px;letter-spacing:.02em;text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:var(--fs-small);color:var(--c-text-3);transition:color .15s}
.footer-links a:hover{color:var(--c-brand)}
.footer-bottom{text-align:center;padding-top:var(--gap-md);border-top:1px solid rgba(0,0,0,0.05);font-size:var(--fs-small);color:var(--c-text-3)}

/* PDP */
.pdp{padding:var(--gap-lg) 0 var(--gap-md)}
/* 黄金分栏 61.8:38.2 */
.pdp-hero{display:grid;grid-template-columns:61.8fr 38.2fr;gap:28px;align-items:start;margin-bottom:var(--gap-md)}
@media(max-width:900px){.pdp-hero{grid-template-columns:55fr 45fr;gap:20px}}
@media(max-width:700px){.pdp-hero{grid-template-columns:1fr}}
.pdp-main{display:flex;flex-direction:column;gap:var(--gap-md)}

.pdp-gallery{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card)}
.pdp-main-img{border-radius:var(--r-card);overflow:hidden;background:var(--c-bg-soft);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pdp-main-img img{width:85%;height:85%;object-fit:contain}
.pdp-card-placeholder{font-size:80px;opacity:0.4}
.pdp-thumbs{display:flex;gap:10px;margin-top:14px;padding:0 var(--p-card) var(--p-card);flex-wrap:wrap}
.pdp-thumb{width:68px;height:68px;border-radius:var(--r-tag);border:2px solid transparent;overflow:hidden;cursor:pointer;transition:border-color .2s;background:var(--c-bg-soft);display:flex;align-items:center;justify-content:center}
.pdp-thumb.active{border-color:var(--c-brand)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-thumb-placeholder{font-size:22px;opacity:0.4}

.pdp-info-card{background:#fff;border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.pdp-title{font-size:var(--fs-h1);font-weight:var(--fw-b);color:var(--c-text);line-height:1.2;letter-spacing:-0.015em;margin-bottom:14px}
.pdp-meta{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.pdp-stars{color:var(--c-rating);font-size:15px;letter-spacing:2px}
.pdp-stars-empty{color:#D1D5DB;letter-spacing:2px}
.pdp-rating-num{font-size:var(--fs-small);color:var(--c-text-3);font-weight:var(--fw-m)}
.pdp-divider{border:none;border-top:1px solid var(--c-border);margin:var(--gap-xs) 0}
.pdp-price{font-size:var(--fs-h1);font-weight:var(--fw-b);color:var(--c-text);letter-spacing:-0.01em;margin-bottom:10px}
.pdp-price del{font-size:var(--fs-h3);color:var(--c-text-3);font-weight:var(--fw-r);margin-left:8px}
.pdp-desc{font-size:var(--fs-body);color:var(--c-text-2);line-height:1.65;margin-bottom:8px}
.pdp-hint{font-size:var(--fs-small);color:var(--c-text-3);margin-bottom:20px}
.pdp-actions{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.pdp-add-cart{flex:1;height:52px;font-size:var(--fs-body)}
.pdp-icon-btns{display:flex;gap:8px}
.pdp-icon-btn{width:44px;height:44px;border-radius:var(--r-btn);border:1.5px solid var(--c-border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-text-3);transition:all .2s}
.pdp-icon-btn:hover{border-color:var(--c-brand);color:var(--c-brand)}
.pdp-icon-btn--heart{color:var(--c-action);border-color:rgba(255,120,40,0.3)}
.pdp-icon-btn--heart:hover{border-color:var(--c-action);color:var(--c-action)}

.spec-card{background:#fff;border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.spec-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px}
.spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--c-border);font-size:var(--fs-small)}
.spec-row:last-child{border-bottom:none}
.spec-key{color:var(--c-text-3)}
.spec-val{color:var(--c-text);font-weight:var(--fw-s)}

.policy-card{background:#fff;border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.policy-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px}
.policy-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--c-border)}
.policy-item:last-child{border-bottom:none}
.policy-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.policy-name{font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text);margin-bottom:3px}
.policy-desc{font-size:var(--fs-tiny);color:var(--c-text-3)}

.reviews-card{background:#fff;border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.reviews-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px}
.review-item{padding:16px 0;border-bottom:1px solid var(--c-border)}
.review-item:last-child{border-bottom:none}
.review-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.review-stars{color:var(--c-rating);font-size:13px;letter-spacing:1px}
.review-name{font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text)}
.review-text{font-size:var(--fs-small);color:var(--c-text-2);line-height:1.6}

.related-scroll{background:#fff;border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.related-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px}
.related-track{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.related-track::-webkit-scrollbar{height:4px}
.related-track::-webkit-scrollbar-track{background:var(--c-border);border-radius:2px}
.related-track::-webkit-scrollbar-thumb{background:var(--c-text-3);border-radius:2px}
.related-item{flex-shrink:0;width:160px;scroll-snap-align:start;background:var(--c-bg);border-radius:var(--r-card);overflow:hidden;transition:transform .2s}
.related-item:hover{transform:translateY(-2px)}
.related-img{aspect-ratio:1/1;overflow:hidden;background:var(--c-bg-soft);display:flex;align-items:center;justify-content:center}
.related-img img{width:100%;height:100%;object-fit:cover}
.related-img-placeholder{font-size:40px;opacity:0.4}
.related-item-body{padding:12px 12px 14px}
.related-item-title{font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-item-price{font-size:var(--fs-small);font-weight:var(--fw-b);color:var(--c-text)}

/* PDP ASIDE 38.2% */
.pdp-aside{display:flex;flex-direction:column;gap:var(--gap-md);position:sticky;top:80px}

.video-card{background:var(--c-video);border-radius:var(--r-card);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.25)}
.video-card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;color:#fff;font-size:var(--fs-small);font-weight:var(--fw-s)}
.video-card-header span:first-child{opacity:.9}
.video-card-header .arrow{color:rgba(255,255,255,0.4);font-size:20px;font-weight:300}
.video-thumb-wrap{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1a2540 0%,#0B1220 50%);cursor:pointer;overflow:hidden}
.video-thumb-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:background .2s}
.video-thumb-overlay:hover{background:rgba(0,0,0,0.15)}
.video-play-btn{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.16);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;border:2px solid rgba(255,255,255,0.35);box-shadow:0 8px 24px rgba(0,0,0,0.3);transition:all .25s}
.video-thumb-overlay:hover .video-play-btn{background:rgba(255,255,255,0.24);transform:scale(1.05)}
.video-cta-badge{padding:6px 16px;border-radius:var(--r-pill);background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);font-size:var(--fs-tiny);font-weight:var(--fw-s);color:#fff;border:1px solid rgba(255,255,255,0.1)}
.video-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#0B1220;color:rgba(255,255,255,0.55);font-size:var(--fs-tiny);border-top:1px solid rgba(255,255,255,0.05)}
.vb-step{opacity:.6}
.vb-label{flex:1;color:#fff;font-weight:var(--fw-s)}
.vb-bar{flex:1;height:3px;background:rgba(255,255,255,0.15);border-radius:2px;position:relative}
.vb-fill{position:absolute;left:0;top:0;height:100%;width:35%;background:rgba(255,255,255,0.65);border-radius:2px}
.vb-knob{position:absolute;left:35%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.vb-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px}

.guide-card{background:#fff;border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.guide-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px}
.guide-card-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--c-border);text-decoration:none}
.guide-card-item:last-child{border-bottom:none}
.guide-card-thumb{width:72px;height:72px;border-radius:var(--r-tag);flex-shrink:0;background:var(--c-bg-soft);overflow:hidden;display:flex;align-items:center;justify-content:center}
.guide-card-thumb img{width:100%;height:100%;object-fit:cover}
.guide-card-thumb-placeholder{font-size:28px;opacity:0.4}
.guide-card-text{flex:1;display:flex;flex-direction:column;justify-content:center}
.guide-card-item-title{font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-text);line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.guide-card-item-meta{font-size:var(--fs-tiny);color:var(--c-text-3)}
.guide-card-more{font-size:var(--fs-small);color:var(--c-brand);margin-top:14px;display:inline-flex;align-items:center;gap:4px}
.guide-card-more:hover{color:var(--c-brand-dark)}

.pdp-trust{margin-top:var(--gap-md)}

/* ===== HOME: TRUST BAR ===== */
.trust-bar{background:var(--c-bg);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:18px 0}
.trust-inner{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0}
.trust-item{display:flex;align-items:center;gap:8px;padding:0 28px;font-size:var(--fs-small);color:var(--c-text-3);font-weight:var(--fw-s)}
.trust-item+.trust-item{border-left:1px solid var(--c-border)}
.trust-icon{font-size:16px}
@media(max-width:600px){.trust-inner{flex-direction:column;gap:12px}.trust-item+.trust-item{border-left:none;border-top:1px solid var(--c-border);padding-top:12px}}

/* ===== HOME: CATEGORIES ===== */
#categories{padding:var(--p-section) 0}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cat-grid{grid-template-columns:1fr}}
.cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 20px;background:var(--c-bg);border-radius:var(--r-card);border:1.5px solid var(--c-border);text-decoration:none;transition:all .2s;box-shadow:var(--sh-card)}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:var(--c-brand)}
.cat-icon{font-size:42px;margin-bottom:14px}
.cat-icon svg{width:42px;height:42px}
.cat-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:8px}
.cat-desc{font-size:var(--fs-small);color:var(--c-text-3);line-height:1.55}

/* ===== HOME: BLOG GRID ===== */
#blog{padding:var(--p-section) 0;background:var(--c-bg-soft)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:flex;flex-direction:column;background:var(--c-bg);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);text-decoration:none;transition:transform .2s,box-shadow .2s}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.blog-thumb{aspect-ratio:16/9;background:var(--c-bg-soft);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--c-text-3)}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-thumb-placeholder{font-size:40px;opacity:0.4}
.blog-card-body{padding:20px}
.blog-card-cat{font-size:var(--fs-tiny);color:var(--c-brand);font-weight:var(--fw-s);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.blog-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:8px;line-height:1.4}
.blog-card-date{font-size:var(--fs-tiny);color:var(--c-text-3)}

/* ===== HOME: FAQ ===== */
#faq{padding:var(--p-section) 0}
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-item:first-child{border-top:1px solid var(--c-border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:var(--fs-body);font-weight:var(--fw-s);color:var(--c-text);cursor:pointer;gap:16px;background:none;border:none;width:100%;text-align:left}
.faq-q:hover{color:var(--c-brand)}
.faq-toggle{font-size:20px;color:var(--c-text-3);flex-shrink:0;transition:transform .2s}
.faq-a{padding:0 0 20px;font-size:var(--fs-small);color:var(--c-text-2);line-height:1.65;display:none}
.faq-item.open .faq-toggle{transform:rotate(45deg)}
.faq-item.open .faq-a{display:block}

/* ===== HOME: CONTACT ===== */
#contact{padding:var(--p-section) 0;background:var(--c-bg)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--c-bg);border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.contact-card h3{font-size:var(--fs-h2);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:12px}
.contact-card p{font-size:var(--fs-small);color:var(--c-text-3);line-height:1.65;margin-bottom:20px}
.contact-channels{display:flex;flex-direction:column;gap:12px}
.contact-channel{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--c-text-2)}
.contact-channel-icon{width:32px;height:32px;border-radius:8px;background:var(--c-brand-soft);display:flex;align-items:center;justify-content:center;font-size:16px}

/* ===== SECTIONS ===== */
.section{padding:var(--p-section) 0}
.section--sm{padding:calc(var(--p-section)/2) 0}
.section-header{text-align:center;max-width:600px;margin:0 auto var(--gap-md)}
.section-label{display:inline-block;font-size:var(--fs-small);font-weight:var(--fw-s);color:var(--c-brand);padding:5px 14px;background:var(--c-brand-soft);border-radius:var(--r-pill);margin-bottom:12px}
.section-title{font-size:var(--fs-disp);font-weight:var(--fw-b);color:var(--c-text);line-height:1.15;letter-spacing:-0.02em;margin-bottom:12px}
.section-desc{font-size:var(--fs-body);color:var(--c-text-3);line-height:1.65}

/* ===== SHOP ARCHIVE ===== */
.shop-page{background:var(--c-bg)}
.shop-tabs{display:flex;gap:8px;flex-wrap:wrap}
.shop-tab{padding:8px 18px;border-radius:var(--r-btn);border:1.5px solid var(--c-border);background:var(--c-bg);font-size:var(--fs-small);color:var(--c-text-3);cursor:pointer;transition:all .2s;font-weight:var(--fw-s)}
.shop-tab.active,.shop-tab:hover{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.shop-masonry{columns:4 240px;column-gap:20px}
@media(max-width:1200px){.shop-masonry{columns:3 200px}}
@media(max-width:768px){.shop-masonry{columns:2 160px}}
@media(max-width:480px){.shop-masonry{columns:1}}
.shop-card{break-inside:avoid;margin-bottom:20px;background:var(--c-bg);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);transition:transform .2s,box-shadow .2s;border:1px solid var(--c-border)}
.shop-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.shop-card--earphones{transform:translateY(-8px)}
.shop-card--watch{transform:translateY(4px)}
.shop-card--powerbank{column-span:all}
.shop-card-img{display:block;aspect-ratio:1/1;background:var(--c-bg-soft);overflow:hidden;position:relative}
.shop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.shop-card:hover .shop-card-img img{transform:scale(1.04)}
.shop-card-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;opacity:0.3}
.shop-card-placeholder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-card-body{padding:16px}
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-tag);font-size:var(--fs-tiny);font-weight:var(--fw-s)}
.tag--video{background:rgba(35,116,255,0.1);color:var(--c-brand)}
.tag--action{background:rgba(255,120,40,0.1);color:var(--c-action)}
.shop-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin:10px 0 6px;line-height:1.35}
.shop-card-price{font-size:var(--fs-body);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:12px}
.shop-card-price del{color:var(--c-text-3);font-weight:var(--fw-n);font-size:var(--fs-small)}
.shop-card-actions{display:flex;gap:8px}
.shop-card-btn{flex:1;padding:8px 0;border-radius:var(--r-btn);font-size:var(--fs-small);font-weight:var(--fw-s);text-align:center;text-decoration:none;display:inline-block;cursor:pointer}

/* GUIDE INTERLUDE */
.guide-interlude{background:var(--c-bg);border-radius:var(--r-section);padding:40px;border:1px solid var(--c-border)}
.guide-interlude-inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media(max-width:768px){.guide-interlude-inner{grid-template-columns:1fr}}
.guide-interlude-title{font-size:var(--fs-h1);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:12px}
.guide-interlude-desc{font-size:var(--fs-body);color:var(--c-text-3);line-height:1.65;margin-bottom:24px;max-width:480px}
.guide-interlude-img{font-size:80px;opacity:.3;flex-shrink:0}

/* PDP INFO CARD */
.pdp{padding:40px 0}
.pdp-info-card{background:var(--c-bg);border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card);margin-top:var(--gap-sm)}
.pdp-title{font-size:var(--fs-h1);font-weight:var(--fw-b);color:var(--c-text);line-height:1.2;margin-bottom:12px}
.pdp-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pdp-stars{color:var(--c-rating);font-size:16px;letter-spacing:1px}
.pdp-rating-num{font-size:var(--fs-small);color:var(--c-text-3)}
.pdp-price{font-size:var(--fs-h1);font-weight:var(--fw-b);color:var(--c-brand);margin-bottom:14px}
.pdp-desc{font-size:var(--fs-body);color:var(--c-text-2);line-height:1.65;margin-bottom:12px}
.pdp-hint{font-size:var(--fs-small);color:var(--c-text-3);font-style:italic;margin-bottom:16px}
.pdp-divider{border:none;border-top:1px solid var(--c-border);margin:16px 0}
.pdp-actions{display:flex;gap:10px;flex-wrap:wrap}
.pdp-icon-btns{display:flex;gap:8px}
.pdp-icon-btn{width:40px;height:40px;border-radius:var(--r-btn);border:1.5px solid var(--c-border);background:var(--c-bg);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--c-text-3);cursor:pointer;transition:all .2s}
.pdp-icon-btn:hover{color:var(--c-brand);border-color:var(--c-brand)}
.pdp-icon-btn--heart{color:#E8304C}
.pdp-icon-btn--heart:hover{border-color:#E8304C}

/* PDP GALLERY */
.pdp-gallery{background:var(--c-bg);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card)}
.pdp-main-img{aspect-ratio:1/1;background:var(--c-bg-soft);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pdp-main-img img{width:100%;height:100%;object-fit:cover}
.pdp-card-placeholder{font-size:60px;opacity:.3}
.pdp-thumbs{display:flex;gap:8px;padding:12px}
.pdp-thumb{width:64px;height:64px;border-radius:var(--r-tag);overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .2s;flex-shrink:0;background:var(--c-bg-soft);display:flex;align-items:center;justify-content:center}
.pdp-thumb.active,.pdp-thumb:hover{border-color:var(--c-brand)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-thumb-placeholder{font-size:24px;color:var(--c-text-3);opacity:.4}

/* PDP CARDS */
.spec-card,.policy-card,.reviews-card{margin-top:var(--gap-sm)}
.spec-card{background:var(--c-bg);border-radius:var(--r-card);padding:var(--p-card);box-shadow:var(--sh-card)}
.spec-card-title,.reviews-card-title{font-size:var(--fs-h3);font-weight:var(--fw-b);color:var(--c-text);margin-bottom:16px}
.spec-table{width:100%;border-collapse:collapse}
.spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--c-border)}
.spec-row:last-child{border-bottom:none}
.spec-key{color:var(--c-text-3)}
.spec-val{color:var(--c-text);font-weight:var(--fw-s)}

/* GUIDE CARD in PDP */
.guide-card-more{font-size:var(--fs-small);color:var(--c-brand);margin-top:14px;display:inline-flex;align-items:center;gap:4px}
.guide-card-more:hover{color:var(--c-brand-dark)}

/* UTILITY */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--r-btn);background:var(--c-action);color:#fff;font-size:var(--fs-body);font-weight:var(--fw-b);text-decoration:none;transition:all .2s;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(255,120,40,.25)}
.btn-primary:hover{background:var(--c-action-dark);box-shadow:0 6px 16px rgba(255,120,40,.35);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;border-radius:var(--r-btn);background:var(--c-bg);color:var(--c-brand);font-size:var(--fs-body);font-weight:var(--fw-b);text-decoration:none;transition:all .2s;border:1.5px solid var(--c-brand);cursor:pointer}
.btn-secondary:hover{background:var(--c-brand-soft)}
.btn-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.card{background:var(--c-bg);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card)}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--p-sides)}
.site-main{padding-top:0}

/* Logo Image */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 36px; width: auto; display: block; }