:root{
  --bg:#f5f6f8;--paper:#fff;--ink:#17191f;--muted:#737985;--line:#e6e8ed;
  --accent:#ff643f;--accent-soft:#fff0ea;--dark:#191b21;--shadow:0 16px 46px rgba(20,22,28,.08)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:linear-gradient(180deg,#fdfdfd 0,#f4f5f7 65%);
font-family:system-ui,-apple-system,"Noto Sans Thai","Segoe UI",sans-serif}
button,input{font:inherit}.app-shell{max-width:660px;min-height:100vh;margin:auto;padding:0 18px 44px}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between}
.logo-btn{border:0;background:transparent;padding:0;font-size:1.3rem;font-weight:950;letter-spacing:-.04em;cursor:pointer}
.icon-btn,.back-btn{width:43px;height:43px;border:1px solid var(--line);border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 5px 18px rgba(0,0,0,.025);cursor:pointer}
.hidden{display:none!important}.hero-copy{padding:28px 2px 8px}
.mini-pill{display:inline-flex;background:var(--accent-soft);color:var(--accent);padding:7px 10px;border-radius:999px;font-size:.74rem;font-weight:850}
.hero-copy h1{font-size:clamp(3.2rem,14vw,5.5rem);letter-spacing:-.06em;line-height:.9;margin:14px 0 20px}
.hero-copy h1 em{font-style:normal;color:var(--accent)}
.hero-copy p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.65;max-width:510px}
.search-box{margin-top:27px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:19px;padding:0 15px;box-shadow:0 9px 28px rgba(20,22,28,.05)}
.search-box>span{font-size:1.3rem;color:#9a9faa}.search-box input{flex:1;border:0;outline:0;padding:17px 0;background:transparent;font-size:1rem;min-width:0}
.clear{border:0;background:#eef0f3;width:28px;height:28px;border-radius:50%;cursor:pointer}
.search-suggest{background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:8px;padding:8px;box-shadow:var(--shadow)}
.suggest-item{width:100%;border:0;background:transparent;border-radius:11px;text-align:left;padding:11px;cursor:pointer}.suggest-item:hover{background:#f6f7f9}
.chips{display:flex;gap:8px;overflow:auto;padding:12px 0 2px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:10px 13px;border-radius:999px;font-weight:750;cursor:pointer}.disabled-chip{opacity:.5;cursor:default!important}
.featured{margin-top:25px;background:var(--dark);color:#fff;border-radius:29px;padding:24px;box-shadow:0 20px 50px rgba(20,22,28,.18);overflow:hidden;position:relative}
.featured:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;top:-90px;background:rgba(255,255,255,.055)}
.featured-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}.hot{color:var(--accent);font-size:.78rem;font-weight:900}
.featured h2{font-size:2rem;line-height:1.05;letter-spacing:-.045em;margin:8px 0}.featured p{color:#bdc1ca;line-height:1.55;font-size:.9rem;margin:12px 0 0;max-width:410px}
.fan-mark{width:66px;height:66px;background:#2b2e36;border-radius:22px;display:grid;place-items:center;color:#ff8b70;font-size:2rem}
.primary{position:relative;z-index:1;margin-top:21px;width:100%;border:0;border-radius:17px;padding:15px 17px;background:var(--accent);color:#fff;font-weight:900;display:flex;justify-content:center;gap:10px;cursor:pointer}
.why{margin-top:31px}.why h3{font-size:1.08rem;margin:0 0 13px}.why-grid{display:grid;gap:9px}
.why-grid article{display:grid;grid-template-columns:42px 1fr;column-gap:10px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px}
.why-grid article span{grid-row:1/3;width:37px;height:37px;background:#f4f5f7;border-radius:12px;display:grid;place-items:center;color:var(--muted);font-size:.7rem;font-weight:900}
.why-grid b{font-size:.92rem}.why-grid small{color:var(--muted);margin-top:2px}

/* Quiz */
.quiz-nav{display:flex;gap:14px;align-items:center;margin:10px 0 29px}.progress-block{flex:1}.progress-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:8px}.progress-label b{color:var(--ink)}
.track{height:7px;background:#e8eaef;border-radius:999px;overflow:hidden}.bar{height:100%;width:33%;background:var(--accent);border-radius:999px;transition:.22s}
.question-card{background:#fff;border:1px solid var(--line);border-radius:29px;padding:25px 20px 20px;box-shadow:var(--shadow);min-height:550px}
.question-icon{width:65px;height:65px;border-radius:20px;background:var(--accent-soft);display:grid;place-items:center;font-size:2rem;margin-bottom:24px}
.question-no{color:var(--accent);font-size:.77rem;font-weight:900}.question-card h2{font-size:2.3rem;line-height:1;letter-spacing:-.045em;margin:7px 0 9px}
.question-card>p{color:var(--muted);margin:0 0 24px}.options{display:grid;gap:10px}
.option{width:100%;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;transition:.16s}
.option:active{transform:scale(.99);border-color:#ffab96;background:#fffaf8}.option-left{display:flex;align-items:center;gap:12px}.emoji{width:34px;text-align:center;font-size:1.4rem}
.option b{display:block}.option small{display:block;color:var(--muted);font-size:.77rem;margin-top:3px}.chev{font-size:1.2rem;color:#a4a9b2}

/* Results */
.result-nav{display:flex;align-items:center;gap:14px;margin:10px 0 18px}.result-nav h2{margin:2px 0 0;font-size:1.65rem;letter-spacing:-.035em}
.summary-pills{display:flex;gap:7px;overflow:auto;margin-bottom:15px;scrollbar-width:none}.summary-pills span{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:#5e6470;font-size:.78rem;font-weight:750}
.winner{background:#fff;border:1px solid var(--line);border-radius:29px;padding:20px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.winner:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:var(--accent-soft);top:-82px;right:-66px}
.winner-badge{position:relative;display:inline-flex;background:var(--dark);color:#fff;border-radius:999px;padding:7px 10px;font-size:.73rem;font-weight:900}
.product-stage{height:190px;border-radius:22px;background:linear-gradient(145deg,#fff7f3,#f2f4f7);display:grid;place-items:center;margin:16px 0 13px;overflow:hidden}
.fan-illustration{position:relative;width:92px;height:160px}.fan-head{position:absolute;left:9px;top:0;width:75px;height:75px;border-radius:50%;background:#dce1e8;box-shadow:inset 0 0 0 12px #2f333c}
.fan-head:after{content:"";position:absolute;inset:25px;background:#0e1014;border-radius:50%;box-shadow:0 0 0 4px #555b66}.fan-handle{position:absolute;width:38px;height:95px;border-radius:14px;left:27px;top:65px;background:linear-gradient(#e5e9ee,#cdd3db)}
.product-stage.ultra .fan-head{border-radius:20px;width:89px;height:61px;background:#2d3036;box-shadow:inset 0 0 0 11px #17191e}.product-stage.ultra .fan-handle{background:#35383f;width:45px;left:22px}
.winner h3{font-size:1.65rem;letter-spacing:-.04em;margin:5px 0}.match-row{display:flex;justify-content:space-between;align-items:flex-end;margin:9px 0 15px}
.match{font-size:2rem;font-weight:950;color:var(--accent)}.match small{font-size:.7rem;color:var(--muted);font-weight:700;display:block}.budget-fit{font-weight:900;font-size:.9rem;background:#f5f6f8;border-radius:10px;padding:8px 10px}
.reason{background:#f7f8fa;border-radius:16px;padding:14px;margin:12px 0}.reason b{font-size:.85rem}.reason p{color:var(--muted);font-size:.84rem;line-height:1.5;margin:5px 0 0}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.spec{border:1px solid var(--line);border-radius:14px;padding:11px}.spec span{display:block;color:var(--muted);font-size:.7rem}.spec b{font-size:.85rem;display:block;margin-top:3px}
.buy{width:100%;border:0;background:var(--accent);color:white;border-radius:16px;padding:15px;font-weight:900;margin-top:15px;cursor:pointer}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:27px 2px 12px}.section-heading span{color:var(--accent);font-size:.73rem;font-weight:900}.section-heading h3{margin:2px 0 0}.section-heading small{color:var(--muted)}
.alternatives{display:grid;gap:9px}.alt{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px}
.alt-pic{width:57px;height:57px;border-radius:15px;background:linear-gradient(145deg,#fff3ee,#f0f2f5);display:grid;place-items:center;font-size:1.6rem}.alt-main{flex:1}.alt-main b{display:block;font-size:.9rem}.alt-main small{display:block;color:var(--muted);margin-top:3px;font-size:.74rem}.alt-score{font-weight:950;color:var(--accent)}
.compare{margin-top:25px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px}.compact{margin-top:0}.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;min-width:470px}th,td{padding:12px 9px;border-bottom:1px solid var(--line);font-size:.8rem;text-align:center}th:first-child,td:first-child{text-align:left;font-weight:850}
.ghost-btn{width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;margin-top:17px;font-weight:850;cursor:pointer}
@media(min-width:720px){body{padding:22px}.app-shell{background:rgba(255,255,255,.45);border-radius:32px}}

.product-stage{height:245px;background:#f6f7f9;padding:8px}
.product-photo{width:100%;height:100%;object-fit:contain;border-radius:18px;display:block}
.price-tag{font-weight:950;font-size:1.05rem;background:#fff0ea;color:#e64f2d;border-radius:12px;padding:9px 11px}
.buy{display:block;text-decoration:none;text-align:center}
.alt-photo{width:64px;height:64px;object-fit:cover;border-radius:15px;background:#f4f5f7;flex:0 0 auto}
.mini-link{display:inline-block;margin-top:5px;color:#ff643f;text-decoration:none;font-size:.75rem;font-weight:850}

button.buy{border:0;cursor:pointer}
button.mini-link{border:0;background:transparent;padding:0;cursor:pointer}


/* V5.1 Android Thai typography fixes */
.hero-copy h1{
  font-size:clamp(3rem,12.5vw,5rem) !important;
  line-height:1.06 !important;
  letter-spacing:-.035em !important;
  margin:14px 0 20px !important;
}
.hero-copy h1 em{
  display:block;
  margin-top:.04em;
}
.hero-copy p{
  font-size:1rem !important;
  line-height:1.75 !important;
}
.featured{
  padding:22px !important;
}
.featured h2{
  font-size:1.82rem !important;
  line-height:1.18 !important;
  letter-spacing:-.025em !important;
}
.featured p{
  line-height:1.7 !important;
}
@media(max-width:420px){
  .app-shell{padding-left:16px !important;padding-right:16px !important}
  .hero-copy{padding-top:24px !important}
  .hero-copy h1{
    font-size:3.45rem !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
  }
  .featured h2{
    font-size:1.72rem !important;
    line-height:1.2 !important;
  }
  .featured{
    border-radius:26px !important;
  }
}

.budget-note{margin:-5px 2px 15px;color:#6c727d;font-size:.75rem;line-height:1.5}.price-tag small{display:block;font-size:.62rem;font-weight:800;color:#8a5a4d;margin-bottom:2px}
a.buy{display:block;text-decoration:none;text-align:center}
a.mini-link{display:inline-block;text-decoration:none}
.data-note{color:#7a7f89;font-size:.72rem;line-height:1.55;margin:14px 4px 0}
.brand-browser{margin-top:30px}
.brand-card{width:100%;border:1px solid var(--line);background:#fff;border-radius:20px;padding:15px;display:flex;align-items:center;gap:13px;box-shadow:0 8px 24px rgba(23,25,31,.04)}
.brand-logo{width:54px;height:54px;border-radius:16px;background:#1263f3;color:#fff;display:grid;place-items:center;font-weight:950}
.brand-info{flex:1;text-align:left}.brand-info b{display:block;font-size:1rem}.brand-info small{display:block;color:var(--muted);margin-top:3px}
.brand-arrow{font-size:1.5rem;color:#a3a7b1}
.brand-summary{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px}
.brand-summary span{color:var(--muted);font-size:.78rem;text-align:right}
.brand-product-list{display:grid;gap:10px}
.brand-product{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center}
.brand-product img{width:86px;height:86px;border-radius:15px;object-fit:cover;background:#f5f6f8}
.brand-product h3{margin:0 0 4px;font-size:1rem}
.brand-product .bp-price{color:var(--accent);font-weight:900;font-size:.92rem}
.brand-product small{display:block;color:var(--muted);margin-top:4px;font-size:.74rem}
.bp-actions{display:flex;gap:8px;margin-top:9px}
.bp-actions a,.bp-actions button{border:0;border-radius:10px;padding:8px 10px;font-size:.75rem;font-weight:850;text-decoration:none}
.bp-actions a{background:var(--accent);color:#fff}.bp-actions button{background:#f1f2f4;color:var(--ink)}


/* V6 smart filter */
.smart-browser{margin-top:30px}
.smart-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.smart-head h3{margin:3px 0 0;font-size:1.08rem}
.tiny-reset{border:0;background:#eef0f3;border-radius:999px;padding:7px 10px;font-size:.74rem;font-weight:800;color:#626874}
.filter-card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:15px;margin-bottom:10px}
.filter-title-row{display:flex;justify-content:space-between;align-items:center}
.filter-title-row strong{color:var(--accent);font-size:1.18rem}
.budget-range{width:100%;accent-color:var(--accent);margin:15px 0 8px}
.quick-budget,.filter-chips{display:flex;gap:7px;overflow:auto;scrollbar-width:none;padding-bottom:2px}
.quick-budget::-webkit-scrollbar,.filter-chips::-webkit-scrollbar{display:none}
.quick-budget button,.filter-chips button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:.76rem;font-weight:800;color:#5e6470}
.quick-budget button.active,.filter-chips button.active{border-color:#ff9c85;background:var(--accent-soft);color:var(--accent)}
.filter-card>b{display:block;margin-bottom:10px}
.smart-result-head{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 10px}
.smart-result-head div{display:flex;align-items:baseline;gap:6px}
.smart-result-head span{color:var(--muted);font-size:.76rem}
.smart-result-head button{border:0;background:transparent;color:var(--accent);font-weight:850}
.smart-product-list{display:grid;gap:9px}
.smart-pick{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center}
.smart-pick img{width:86px;height:86px;border-radius:15px;object-fit:cover;background:#f4f5f7}
.smart-pick h4{margin:0 0 3px;font-size:.98rem;line-height:1.3}
.brand-mini{font-size:.67rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.smart-pick .meta{color:var(--muted);font-size:.72rem;line-height:1.45}
.pick-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.pick-tags span{background:#f3f4f6;border-radius:999px;padding:4px 7px;font-size:.66rem;font-weight:800;color:#626874}
.pick-price{color:var(--accent);font-weight:950;margin-top:6px;font-size:.9rem}
.pick-actions{display:flex;gap:7px;margin-top:8px}
.pick-actions a,.pick-actions button{border:0;border-radius:10px;padding:8px 9px;font-size:.72rem;font-weight:850;text-decoration:none}
.pick-actions a{background:var(--accent);color:#fff}
.pick-actions button{background:#eef0f3;color:var(--ink)}
.pick-actions button.selected{background:var(--dark);color:#fff}
.empty-state{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:24px;text-align:center;color:var(--muted)}

.compare-drawer{position:fixed;inset:0;background:rgba(10,12,18,.42);z-index:70;display:flex;align-items:flex-end}
.compare-sheet{width:min(100%,660px);max-height:82vh;overflow:auto;margin:0 auto;background:#fff;border-radius:26px 26px 0 0;padding:18px}
.compare-sheet-head{display:flex;justify-content:space-between;align-items:center}
.compare-sheet-head h3{margin:3px 0 0}
.compare-sheet-head button{border:0;background:#eef0f3;width:38px;height:38px;border-radius:50%;font-size:1.2rem}
.compare-selected{display:flex;gap:7px;overflow:auto;margin:12px 0}
.compare-selected span{white-space:nowrap;background:#f4f5f7;border-radius:999px;padding:7px 9px;font-size:.72rem;font-weight:800}


.compare-picker{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;align-items:end;margin:10px 0 14px}
.compare-picker label span{display:block;color:var(--muted);font-size:.7rem;margin:0 0 5px 2px}
.compare-picker select{width:100%;border:1px solid var(--line);background:#fff;border-radius:13px;padding:11px 10px;color:var(--ink);font-weight:750;outline:none}
.swap-mark{height:43px;display:grid;place-items:center;color:var(--accent);font-weight:950;font-size:1.1rem}
@media(max-width:390px){
  .compare-picker{grid-template-columns:1fr}
  .swap-mark{height:20px}
}


.compare-visual{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.compare-visual-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:10px;text-align:center}
.compare-visual-card img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:13px;background:#f6f7f9;display:block}
.compare-visual-card b{display:block;font-size:.82rem;line-height:1.25;margin-top:8px;min-height:3.75em}
.compare-visual-card small{display:block;color:var(--accent);font-weight:900;margin-top:4px}
@media(max-width:390px){
  .compare-visual{gap:8px}
  .compare-visual-card{padding:8px}
  .compare-visual-card b{font-size:.76rem}
}
.compare .table-wrap{overflow-x:auto}
.compare #compareTable{min-width:100%}
.compare #compareTable th,.compare #compareTable td{font-size:.75rem;padding:10px 7px}


.compare-data-note{margin:0 2px 12px;color:var(--muted);font-size:.68rem;line-height:1.5}
.compare #compareTable .partial-row td:not(:first-child){color:#8a8f99}
.compare #compareTable td{vertical-align:middle}
.compare #compareTable td:first-child{min-width:92px}
@media(max-width:420px){
  .compare #compareTable th,.compare #compareTable td{font-size:.72rem;padding:10px 6px}
  .compare #compareTable td:first-child{min-width:84px}
}


.budget-range:disabled{opacity:.28;filter:grayscale(1)}
.quick-budget button:last-child.active{background:var(--dark);border-color:var(--dark);color:#fff}


.ranking-info{margin:10px 0 4px;background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden}
.ranking-info summary{list-style:none;cursor:pointer;padding:13px 15px;font-size:.78rem;font-weight:900;color:#5f6570}
.ranking-info summary::-webkit-details-marker{display:none}
.ranking-info summary:after{content:"＋";float:right;color:var(--accent)}
.ranking-info[open] summary:after{content:"−"}
.ranking-info-body{border-top:1px solid var(--line);padding:10px 15px 12px}
.ranking-info-body p{margin:6px 0;color:var(--muted);font-size:.72rem;line-height:1.55}
.ranking-info-body b{color:var(--ink)}
.rank-score{margin-top:7px;font-size:.69rem;font-weight:850;color:#5f6570}


/* V6.8 clean structure */
.browse-entry{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:17px}
.browse-entry-head{display:flex;justify-content:space-between;gap:14px;align-items:center}
.browse-entry h3{margin:3px 0 4px;font-size:1.15rem}
.browse-entry p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.45}
.browse-open{border:0;background:var(--dark);color:#fff;border-radius:13px;padding:11px 12px;font-weight:850;white-space:nowrap}
.browse-shortcuts{display:flex;gap:7px;overflow:auto;margin-top:13px;scrollbar-width:none}
.browse-shortcuts::-webkit-scrollbar{display:none}
.browse-shortcuts button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:.74rem;font-weight:800;color:#606672}

.catalog-filter{background:#fff;border:1px solid var(--line);border-radius:19px;padding:15px;margin-bottom:10px}
.catalog-filter>b{display:block;margin-bottom:10px}




.catalog-list{display:grid;gap:9px}












/* V7 product details */
.detail-actions{display:flex;gap:10px;flex-wrap:wrap}.detail-actions button{border:0;border-radius:14px;padding:12px 16px;font-weight:850;cursor:pointer}.detail-btn{background:#f1f2f5;color:#202228}.product-detail{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff}.product-detail h4{margin:0 0 10px;font-size:1.05rem}.fit-list,.know-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.fit-list li,.know-list li{line-height:1.5;color:#4f5560}.fit-list li:before{content:"✓";color:var(--accent);font-weight:900;margin-right:8px}.know-list li:before{content:"•";color:#8a909a;font-weight:900;margin-right:8px}.spec-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.spec-detail-grid div{padding:12px;background:#f7f8fa;border-radius:14px}.spec-detail-grid span{display:block;color:var(--muted);font-size:.76rem}.spec-detail-grid b{display:block;margin-top:3px;font-size:.9rem}.detail-note{margin:12px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}.detail-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* V7.1 trust + related + direct compare */
.data-updated{display:block;margin:7px 0 12px;padding:0;background:transparent;color:#7a7f89;font-size:.72rem;font-weight:750;line-height:1.4}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.related-card{border:1px solid var(--line);border-radius:16px;padding:9px;background:#fff}
.related-card img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:11px;background:#f6f7f9}
.related-card b{display:block;font-size:.75rem;line-height:1.3;margin-top:6px}
.related-card small{display:block;color:var(--accent);font-weight:900;margin-top:3px}
.related-card button{width:100%;border:0;background:#eef0f3;border-radius:9px;padding:7px;margin-top:7px;font-size:.68rem;font-weight:850;color:var(--ink)}
.direct-compare{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.direct-compare select{min-width:0;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;font-size:.74rem;font-weight:750;color:var(--ink)}
.direct-compare button{border:0;background:var(--dark);color:#fff;border-radius:12px;padding:10px 12px;font-size:.72rem;font-weight:900}
@media(max-width:390px){.direct-compare{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr 1fr}}


/* V7.2.1: product details must live on a dedicated page only */
.product-card .product-detail,
.catalog-card .product-detail,
.product-detail{display:none !important;}


/* V7.2.2 hotfix: keep catalog lightweight and stable */
#catalogList .product-detail{display:none!important}
.product-page-overlay{overscroll-behavior:contain}


/* V7.2.4 clearer mobile comparison */
.compare-sheet{padding:18px 16px 22px}
.compare-selected{display:grid!important;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0!important;overflow:visible!important}















.compare-sheet .table-wrap{overflow:visible!important}
.compare-sheet .ghost-btn{margin-top:14px}
@media(max-width:380px){
  
  
  
}


/* V7.2.5 compare polish — preserve existing mobile layout */
.cmp-product-no{display:none!important}








/* V7.2.6 — show comparison price only once */
.cmp-product-card .cmp-product-price{display:none!important}


/* V7.2.8 — make reference prices clearer in alternative cards */
.alt-meta{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:baseline;margin-top:3px;line-height:1.35}
.alt-price-ref{color:#ef6547;font-weight:900;font-size:.82rem}
.alt-spec{color:var(--muted);font-size:.76rem}


/* SEO V2: compact people-first guide; keeps the existing app UI intact */
.seo-guide{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px}
.seo-guide h2{margin:10px 0 8px;font-size:1.35rem;letter-spacing:-.025em}
.seo-guide>p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.65}
.seo-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.seo-guide-grid article{background:#f7f8fa;border-radius:16px;padding:14px}
.seo-guide-grid h3,.seo-faq h3{margin:0 0 7px;font-size:.88rem}
.seo-guide-grid p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.6}
.seo-faq{margin-top:16px}
.seo-faq details{border-top:1px solid var(--line);padding:11px 0}
.seo-faq summary{cursor:pointer;font-size:.78rem;font-weight:850;line-height:1.45}
.seo-faq details p{margin:7px 0 0;color:var(--muted);font-size:.74rem;line-height:1.6}
@media(max-width:520px){.seo-guide-grid{grid-template-columns:1fr}.seo-guide{padding:17px}}


/* Power Bank V1 */
.pb-hero{margin:18px 0 14px}.pb-hero h1{font-size:2rem;margin:10px 0 6px;letter-spacing:-.04em}.pb-hero p{margin:0;color:var(--muted);line-height:1.6}
.pb-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 8px}.pb-filters select{width:100%;border:1px solid var(--line);background:#fff;border-radius:13px;padding:11px 9px;font-weight:800;color:var(--ink)}
.pb-count{font-size:.76rem;color:var(--muted);font-weight:800;margin:8px 2px 12px}.pb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:92px}
.pb-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;min-width:0}.pb-card>img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:15px;background:#f6f7f8}.pb-brand{font-size:.66rem;color:var(--muted);font-weight:900;margin-top:9px}.pb-card h3{font-size:.9rem;line-height:1.3;margin:4px 0 6px}.pb-spec-line{font-size:.73rem;font-weight:850}.pb-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.pb-tags span{background:#f2f3f5;border-radius:999px;padding:5px 7px;font-size:.62rem;font-weight:750;color:#555d68}.pb-price{font-weight:950;font-size:1rem;margin-top:8px}.pb-price small{display:block;color:#a45a40;font-size:.6rem;margin-bottom:2px}.pb-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.pb-actions a,.pb-actions button{border:0;border-radius:10px;padding:9px 6px;font-size:.68rem;font-weight:900;text-align:center;text-decoration:none}.pb-actions a{background:var(--accent);color:#fff}.pb-actions button{background:#f0f1f3;color:var(--ink)}

.pb-note{font-size:.7rem;line-height:1.55;color:var(--muted);margin:12px 3px 95px}.pb-compare-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:20;width:min(650px,calc(100% - 24px));background:#202329;color:#fff;border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px rgba(0,0,0,.2)}.pb-compare-bar span{margin-right:auto;font-size:.75rem;font-weight:850}.pb-compare-bar button{border:0;border-radius:11px;padding:9px 11px;font-weight:900}.pb-compare-bar .pb-clear{background:transparent;color:#fff;border:1px solid #555}
.pb-detail-hero{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}.pb-detail-hero img{width:120px;height:120px;object-fit:contain;border-radius:16px;background:#f5f6f8}.pb-detail-hero h1{font-size:1.2rem;margin:5px 0}.pb-detail-price{font-size:1.15rem;font-weight:950;color:var(--accent)}.pb-spec-table{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.pb-spec-row{display:grid;grid-template-columns:42% 58%;border-top:1px solid var(--line);padding:12px 14px;font-size:.78rem}.pb-spec-row:first-child{border-top:0}.pb-spec-row span{color:var(--muted)}.pb-spec-row b{text-align:right}.pb-buy-big{display:block;margin-top:12px;background:var(--accent);color:#fff;text-decoration:none;text-align:center;border-radius:15px;padding:14px;font-weight:950}

@media(max-width:520px){.pb-filters{grid-template-columns:1fr}.pb-detail-hero{grid-template-columns:92px 1fr}.pb-detail-hero img{width:92px;height:92px}.pb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pb-card{padding:9px}.pb-card h3{font-size:.78rem}.pb-actions{grid-template-columns:1fr}}



/* Step 3: helper coverage — keep Top 3 ranking, surface every other eligible model */
.helper-more{margin-top:18px}
.helper-more.hidden{display:none!important}
.helper-more .section-heading{margin-top:0}
.helper-more-list{display:grid;gap:9px}
.helper-more-item{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:17px;padding:10px;cursor:pointer}
.helper-more-item img{width:58px;height:58px;object-fit:contain;border-radius:13px;background:#f6f7f8}
.helper-more-item b{font-size:.86rem;line-height:1.3}
.helper-more-item small{display:block;color:var(--muted);font-size:.72rem;margin-top:3px;line-height:1.4}
.helper-more-item strong{color:var(--accent);font-size:.8rem;white-space:nowrap}

/* Power Bank helper V2 */

.pb-result-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:var(--shadow)}
.pb-result-badge{display:inline-flex;background:var(--dark);color:#fff;border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:900}
.pb-result-main{display:grid;grid-template-columns:135px 1fr;gap:14px;align-items:center;margin-top:14px}
.pb-result-main img{width:135px;height:135px;object-fit:contain;background:#f6f7f8;border-radius:20px}
.pb-result-brand{font-size:.68rem;color:var(--muted);font-weight:900}
.pb-result-main h3{font-size:1.25rem;line-height:1.2;margin:4px 0 7px}
.pb-result-price{font-size:1.25rem;color:var(--accent);font-weight:950}
.pb-result-price small{display:block;color:var(--muted);font-size:.62rem;font-weight:700;margin-top:2px}
.pb-result-reason{background:#f7f8fa;border-radius:16px;padding:13px;margin:14px 0 10px}
.pb-result-reason b{font-size:.82rem}.pb-result-reason p{margin:5px 0 0;color:var(--muted);font-size:.8rem;line-height:1.55}
.pb-result-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pb-result-spec{border:1px solid var(--line);border-radius:14px;padding:10px}.pb-result-spec span{display:block;color:var(--muted);font-size:.66rem}.pb-result-spec b{display:block;margin-top:3px;font-size:.8rem}
.pb-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.pb-result-actions a,.pb-result-actions button{border:0;border-radius:14px;padding:12px;font-weight:900;text-align:center;text-decoration:none}.pb-result-actions a{background:var(--accent);color:#fff}.pb-result-actions button{background:#f0f1f3;color:var(--ink)}
.pb-alt{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:11px}.pb-alt img{width:60px;height:60px;object-fit:contain;border-radius:14px;background:#f6f7f8}.pb-alt b{font-size:.84rem;line-height:1.25}.pb-alt small{display:block;color:var(--muted);font-size:.68rem;margin-top:3px}.pb-alt button{border:0;background:#f0f1f3;border-radius:10px;padding:8px 9px;font-weight:900;font-size:.68rem}
@media(max-width:520px){.pb-result-main{grid-template-columns:105px 1fr}.pb-result-main img{width:105px;height:105px}.pb-result-actions{grid-template-columns:1fr}}


/* Unified UX V3 */
.section-kicker{font-size:.72rem;font-weight:950;color:var(--accent);margin-bottom:7px}
.category-hub{margin-top:24px}.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.category-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;display:flex;flex-direction:column;min-height:270px}
.category-icon{width:48px;height:48px;border-radius:15px;background:#f6f7f8;display:grid;place-items:center;font-size:1.45rem;margin-bottom:18px}
.category-card small{font-size:.72rem;color:var(--muted);font-weight:900}.category-card h2{margin:5px 0 8px;font-size:1.18rem;line-height:1.25;letter-spacing:-.02em}
.category-card p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.55}.category-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:auto;padding-top:18px}
.category-actions button{border:0;border-radius:13px;padding:12px 11px;font-weight:900}.primary-lite{background:var(--dark);color:#fff}.helper-btn{background:#fff3ed;color:var(--accent);border:1px solid #ffd8c7!important}
.unified-why{margin-top:28px}.unified-why h3{margin:0 0 13px}
.site-guide{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:19px}.site-guide h2{font-size:1.25rem;margin:5px 0 8px}.site-guide>p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.65}
.guide-points{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.guide-points>div{background:#f7f8fa;border-radius:15px;padding:12px}.guide-points b{display:block;font-size:.78rem}.guide-points span{display:block;margin-top:4px;color:var(--muted);font-size:.67rem;line-height:1.45}
.catalog-helper-card{display:flex;align-items:center;gap:14px;justify-content:space-between;background:linear-gradient(135deg,#fff3ed,#fff);border:1px solid #ffd8c7;border-radius:20px;padding:15px;margin:14px 0 16px}.catalog-helper-card div{min-width:0}.catalog-helper-card span{display:block;color:var(--accent);font-size:.68rem;font-weight:950}.catalog-helper-card b{display:block;font-size:.9rem;margin:3px 0}.catalog-helper-card small{display:block;color:var(--muted);font-size:.68rem}.catalog-helper-card button{flex:0 0 auto;border:0;background:var(--accent);color:#fff;border-radius:12px;padding:11px 12px;font-weight:900}
.catalog-nav{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:8px}.catalog-nav-copy{display:flex;flex-direction:column;gap:2px}.catalog-nav-copy b{font-size:1rem}.catalog-nav-copy small{font-size:.7rem;color:var(--muted)}
.pb-hero{margin-top:12px!important}.pb-hero h1{margin-top:7px!important}
@media(max-width:560px){
  .category-grid{grid-template-columns:1fr}.category-card{min-height:0}
  .guide-points{grid-template-columns:1fr}
  .catalog-helper-card{align-items:flex-start;flex-direction:column}
  .catalog-helper-card button{width:100%}
}


/* V4 SAME LAYOUT — readable Thai typography */
html{font-size:17px}
body{font-size:1rem}

/* headings and helper bar */
.result-nav .hot,.pb-hero .mini-pill{font-size:.92rem!important}
.result-nav h2,.pb-hero h1{font-size:2rem!important;line-height:1.16!important}
.catalog-helper-card span{font-size:.92rem!important}
.catalog-helper-card b{font-size:1.1rem!important;line-height:1.35!important}
.catalog-helper-card small{font-size:.9rem!important;line-height:1.5!important}
.catalog-helper-card button{font-size:1rem!important;padding:13px 15px!important}

/* Fan list */








/* filters */
.filter-title-row b,.filter-title-row strong,.brand-filter-wrap h3,.catalog-tools,.pb-count{font-size:1rem!important}
.catalog-quick button,.catalog-brand-filters button,.pb-filters select{font-size:.96rem!important}

/* Power Bank list = same 1-column horizontal structure */
.pb-grid{grid-template-columns:1fr!important;gap:10px!important}






.pb-card .pb-tags span{font-size:.82rem!important;padding:5px 8px!important}

.pb-card .pb-price small{font-size:.8rem!important}

.pb-card .pb-actions a,.pb-card .pb-actions button{font-size:.93rem!important;padding:10px 12px!important}


/* quizzes larger */
.question-no{font-size:.96rem!important}
.question-card h2{font-size:2.15rem!important;line-height:1.15!important}
.question-card>p{font-size:1rem!important}
.option b{font-size:1.06rem!important}
.option small{font-size:.91rem!important;line-height:1.45!important}
.progress-label{font-size:.96rem!important}

/* identical result card for both categories */
.unified-result-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:var(--shadow)}
.unified-result-badge{display:inline-flex;background:var(--dark);color:#fff;border-radius:999px;padding:8px 12px;font-size:.91rem;font-weight:900}
.unified-result-main{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;margin-top:16px}
.unified-result-main img{width:132px;height:132px;object-fit:contain;background:#f6f7f8;border-radius:20px}
.unified-result-brand{font-size:.91rem;color:var(--muted);font-weight:900}
.unified-result-main h3{font-size:1.42rem;line-height:1.2;margin:4px 0 7px}
.unified-match{font-size:1.38rem;font-weight:950;color:var(--dark);margin:4px 0}
.unified-match small{font-size:.84rem;color:var(--muted);font-weight:800}
.unified-price{font-size:1.32rem;color:var(--accent);font-weight:950}
.unified-price small{display:block;color:var(--muted);font-size:.81rem;font-weight:750;margin-top:2px}
.unified-reason{background:#f7f8fa;border-radius:17px;padding:15px;margin:16px 0 11px}
.unified-reason b{font-size:1rem}
.unified-reason p{margin:6px 0 0;color:var(--muted);font-size:.96rem;line-height:1.6}
.unified-specs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.unified-spec{border:1px solid var(--line);border-radius:15px;padding:12px}
.unified-spec span{display:block;color:var(--muted);font-size:.86rem}
.unified-spec b{display:block;margin-top:3px;font-size:1rem}
.unified-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.unified-result-actions a,.unified-result-actions button{border:0;border-radius:14px;padding:13px;font-size:1rem;font-weight:900;text-align:center;text-decoration:none}
.unified-result-actions a{background:var(--accent);color:#fff}
.unified-result-actions button{background:#f0f1f3;color:var(--ink)}
.unified-alt{display:grid;grid-template-columns:72px 1fr auto;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}
.unified-alt img{width:72px;height:72px;object-fit:contain;border-radius:14px;background:#f6f7f8}
.unified-alt b{font-size:1rem;line-height:1.3}
.unified-alt small{display:block;color:var(--muted);font-size:.87rem;margin-top:4px;line-height:1.4}
.unified-alt-right{text-align:right}
.unified-alt-right strong{display:block;color:var(--accent);font-size:1.08rem}
.unified-alt-right button{border:0;background:#eef0f3;border-radius:10px;padding:8px 10px;font-size:.89rem;font-weight:900;margin-top:5px}
.summary-pills span{font-size:.93rem!important;padding:8px 11px!important}
.section-heading span,.section-heading small{font-size:.9rem!important}
.section-heading h3{font-size:1.36rem!important}

/* details readable */
.pb-detail-hero h1{font-size:1.36rem!important}
.pb-detail-price{font-size:1.32rem!important}
.pb-spec-row{font-size:.96rem!important}
.pb-buy-big{font-size:1rem!important}
.product-detail,.product-detail p,.fit-list li,.know-list li{font-size:.96rem!important}

@media(max-width:520px){
  html{font-size:16.5px}
  .result-nav h2,.pb-hero h1{font-size:1.8rem!important}
  .question-card h2{font-size:2rem!important}
  
  
  
  
  .unified-result-main{grid-template-columns:108px 1fr}
  .unified-result-main img{width:108px;height:108px}
  .unified-result-main h3{font-size:1.28rem}
  .unified-result-actions{grid-template-columns:1fr}
}


.view-switch{display:flex;gap:8px;margin:12px 0 16px}
.view-switch button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 13px;font-weight:900;font-size:.93rem;color:var(--muted)}
.view-switch button.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.rank-medal{font-size:1.2rem;align-self:start}
.unified-alt{grid-template-columns:auto 72px 1fr auto!important}

/* Optional compact two-column browsing mode */





.pb-grid-view .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.pb-grid-view .pb-card{display:block!important;padding:10px!important}
.pb-grid-view .pb-card>img{width:100%!important;height:145px!important;margin-bottom:8px!important}
.pb-grid-view .pb-card .pb-brand,.pb-grid-view .pb-card h3,.pb-grid-view .pb-card .pb-spec-line,.pb-grid-view .pb-card .pb-tags,.pb-grid-view .pb-card .pb-price,.pb-grid-view .pb-card .pb-actions{margin-top:6px!important}
.pb-grid-view .pb-card .pb-actions{display:grid!important;grid-template-columns:1fr!important}

@media(max-width:420px){
 
 
}


/* ===== V6 VISUAL REDESIGN ===== */
:root{--v6-soft:#fff6f1;--v6-card:#ffffff;--v6-deep:#17191d}
body{background:linear-gradient(180deg,#fff 0,#faf9f7 32%,#f7f7f6 100%)}
.v6-home{margin-top:28px}
.v6-popular-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.v6-eyebrow{display:inline-block;font-size:.82rem;font-weight:950;color:var(--accent);margin-bottom:4px}
.v6-popular-head h2{font-size:1.65rem;letter-spacing:-.04em;margin:0}
.v6-popular-head p{font-size:.88rem;color:var(--muted);margin:5px 0 0}
.v6-date{flex:0 0 auto;background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:.8rem;font-weight:900}
.v6-popular-scroll{display:grid;grid-template-columns:1.15fr 1fr .8fr;gap:10px}
.v6-pop-card{border:0;text-align:left;min-height:118px;border-radius:22px;padding:15px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"rank rank rank" "icon copy arrow";gap:8px 10px;align-items:center;cursor:pointer}
.v6-pop-card.rank1{background:var(--v6-deep);color:#fff}
.v6-pop-card.rank2{background:#fff0e8;color:var(--ink);border:1px solid #ffd9c6}
.v6-pop-card.coming{background:#fff;border:1px dashed #cfd2d6;color:var(--muted)}
.v6-rank{grid-area:rank;font-size:.7rem;font-weight:950;opacity:.65;letter-spacing:.08em}
.v6-pop-icon{grid-area:icon;width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.14);border-radius:12px;font-size:1.25rem}
.rank2 .v6-pop-icon,.coming .v6-pop-icon{background:#fff}
.v6-pop-copy{grid-area:copy;min-width:0}.v6-pop-copy b{display:block;font-size:1rem}.v6-pop-copy small{display:block;font-size:.72rem;opacity:.7;margin-top:2px}
.v6-arrow{grid-area:arrow;font-size:1.25rem}
.v6-section-title{display:flex;justify-content:space-between;align-items:end;margin:30px 0 12px}.v6-section-title span{font-size:.78rem;color:var(--accent);font-weight:900}.v6-section-title h2{margin:3px 0 0;font-size:1.55rem}
.v6-category-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v6-category-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 8px 30px rgba(25,27,30,.04)}
.v6-cat-top{display:flex;justify-content:space-between;align-items:center}.v6-cat-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#f6f7f8;font-size:1.5rem}.v6-count{font-size:.75rem;font-weight:900;background:#f4f4f4;border-radius:999px;padding:6px 9px}
.v6-category-card h3{font-size:1.25rem;margin:15px 0 5px}.v6-category-card p{font-size:.85rem;color:var(--muted);line-height:1.5;margin:0;min-height:42px}
.v6-cat-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:15px}.v6-cat-actions button{border:0;border-radius:13px;padding:12px;font-weight:900;font-size:.92rem;background:var(--v6-deep);color:#fff}.v6-cat-actions .assist{background:var(--v6-soft);color:var(--accent);border:1px solid #ffd9c6}
.v6-helper{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;background:linear-gradient(135deg,#fff1e9,#fff);border:1px solid #ffd7c3;border-radius:22px;padding:16px;margin:15px 0 18px}
.v6-helper-icon{width:45px;height:45px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:1.25rem;box-shadow:0 5px 18px rgba(0,0,0,.05)}
.v6-helper-copy span{display:block;color:var(--accent);font-size:.8rem;font-weight:950}.v6-helper-copy b{display:block;font-size:1.08rem;margin:2px 0}.v6-helper-copy small{display:block;color:var(--muted);font-size:.78rem}
.v6-helper button{border:0;background:var(--accent);color:#fff;border-radius:13px;padding:12px 14px;font-weight:950;font-size:.9rem}
.view-switch{background:#f0f1f2;border-radius:14px;padding:4px;display:inline-flex!important;margin:10px 0 15px!important}.view-switch button{border:0!important;background:transparent!important;border-radius:10px!important;padding:9px 13px!important}.view-switch button.active{background:#fff!important;color:var(--ink)!important;box-shadow:0 2px 8px rgba(0,0,0,.08)}
/* grid mode should genuinely feel image-led */





@media(max-width:600px){
 .v6-popular-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
 .v6-pop-card{min-width:78%;scroll-snap-align:start}
 .v6-pop-card.coming{min-width:55%}
 .v6-category-grid{grid-template-columns:1fr}
 .v6-helper{grid-template-columns:auto 1fr}.v6-helper button{grid-column:1/-1;width:100%}
 .v6-popular-head h2{font-size:1.5rem}
}


/* ===== V7: visibly different mobile-first redesign ===== */
.v7-home{margin-top:26px}
.v7-trend-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:12px}
.v7-trend-head span{font-size:.78rem;font-weight:900;color:var(--accent)}
.v7-trend-head h2{font-size:1.65rem;letter-spacing:-.04em;margin:2px 0 0}
.v7-trend-head>small{font-size:.75rem;color:var(--muted);text-align:right;max-width:150px}
.v7-trends{display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
.v7-trend{border:1px solid var(--line);background:#fff;border-radius:20px;min-height:132px;padding:14px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"num num icon" "txt txt arrow";align-items:end;gap:8px;box-shadow:0 8px 24px rgba(20,22,28,.035)}
.v7-trend.primary{background:#191b20;color:#fff;border-color:#191b20}
.v7-num{grid-area:num;font-size:.72rem;font-weight:950;letter-spacing:.08em;opacity:.55}
.v7-emoji{grid-area:icon;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#f3f4f5;font-size:1.35rem}
.primary .v7-emoji{background:rgba(255,255,255,.12)}
.v7-trend-text{grid-area:txt}.v7-trend-text b{display:block;font-size:1.08rem;line-height:1.15}.v7-trend-text span{display:block;font-size:.75rem;opacity:.6;margin-top:4px}
.v7-trend i{grid-area:arrow;font-style:normal;font-size:1.15rem;opacity:.65}
.v7-all-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:34px 0 12px}
.v7-all-head h2{font-size:1.6rem;margin:0}.v7-all-head span{font-size:.75rem;color:var(--muted);text-align:right}
.v7-category-list{display:grid;gap:12px}
.v7-cat{border:1px solid var(--line);background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 8px 28px rgba(20,22,28,.035)}
.v7-cat-main{width:100%;border:0;background:#fff;padding:14px;display:grid;grid-template-columns:82px 1fr auto;gap:14px;align-items:center;text-align:left}
.v7-cat-visual{height:82px;border-radius:18px;display:grid;place-items:center;font-size:2rem}
.v7-cat-visual.fan{background:linear-gradient(145deg,#eef5ff,#f7fbff)}
.v7-cat-visual.pb{background:linear-gradient(145deg,#f0fbf3,#f8fff9)}
.v7-cat-copy small{font-size:.72rem;color:var(--accent);font-weight:900}.v7-cat-copy h3{font-size:1.25rem;margin:3px 0}.v7-cat-copy p{font-size:.8rem;color:var(--muted);margin:0;line-height:1.4}
.v7-chevron{font-size:2rem;color:#bbb}
.v7-assist{width:100%;border:0;border-top:1px solid #f0f0f0;background:#fffaf7;padding:12px 15px;text-align:left;color:#4c4d52;font-size:.88rem}
.v7-assist span{margin-right:6px}.v7-assist b{color:var(--accent);margin-right:5px}
.v7-coming{margin-top:12px;border:1px dashed #d8dadd;border-radius:18px;padding:14px;display:flex;align-items:center;gap:12px;color:var(--muted)}
.v7-coming>span{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:1.3rem}.v7-coming b,.v7-coming small{display:block}.v7-coming b{font-size:.88rem;color:#555}.v7-coming small{font-size:.73rem;margin-top:2px}
.v7-why{margin-top:34px!important;background:#191b20!important;color:#fff!important;border:0!important;border-radius:24px!important;padding:20px!important}
.v7-why .section-kicker{color:#ff9a80!important}.v7-why small{color:#b9bdc6!important}.v7-why article{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.08)!important}
.v7-guide{background:transparent!important;border:0!important;padding:8px 0 24px!important;box-shadow:none!important}
.v7-guide .guide-points>div{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important}

/* Category pages: stronger shared visual system */
#catalogPage .result-nav,#powerBankPage .result-nav{padding-top:6px}
#catalogPage .result-nav h2,#powerBankPage .result-nav h2{font-size:2rem!important;letter-spacing:-.045em!important}
.v6-helper{background:#191b20!important;color:#fff!important;border:0!important;border-radius:20px!important;box-shadow:0 12px 30px rgba(20,22,28,.12)!important}
.v6-helper-copy span{color:#ff9a80!important}.v6-helper-copy small{color:#b9bdc6!important}.v6-helper-icon{background:rgba(255,255,255,.1)!important}
.v6-helper button{background:#fff!important;color:#191b20!important}
.view-switch{width:100%;display:grid!important;grid-template-columns:1fr 1fr!important}
.view-switch button{width:100%!important;text-align:center!important}
@media(max-width:600px){
 .v7-trends{grid-template-columns:1.12fr .88fr}
 .v7-trend{min-height:122px;padding:13px}
 .v7-cat-main{grid-template-columns:72px 1fr auto;padding:13px}
 .v7-cat-visual{height:72px}
 .v7-trend-head h2,.v7-all-head h2{font-size:1.45rem}
 .v7-why .why-grid{grid-template-columns:1fr!important}
}


/* V7.1 verification fixes */
#powerBankPage .catalog-filter{margin-bottom:12px}
#powerBankPage .filter-chips,#catalogPage .filter-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0 2px}
#powerBankPage .filter-chips button,#catalogPage .filter-chips button{white-space:nowrap}


/* V8 */
#catalogPage.is-grid .catalog-list,#powerBankPage.is-grid .pb-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}




#catalogPage.is-list .catalog-list,#powerBankPage.is-list .pb-grid{display:grid!important;grid-template-columns:1fr!important}
.view-switch{background:#eceef1!important;border-radius:16px!important;padding:5px!important;width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}
.view-switch button{padding:11px!important;font-size:1rem!important}
.view-switch button.active{background:#fff!important;color:#17191d!important;box-shadow:0 4px 14px rgba(17,20,27,.08)!important}
.unified-result-card{border:0!important;border-radius:28px!important;box-shadow:0 18px 48px rgba(17,20,27,.09)!important}
.unified-match{background:#fff1eb!important;color:#ff6545!important;border-radius:999px!important;padding:6px 10px!important;display:inline-flex!important}
.unified-alt{border:0!important;border-radius:20px!important;box-shadow:0 8px 26px rgba(17,20,27,.05)!important}
.catalog-filter{border-radius:22px!important;box-shadow:0 8px 30px rgba(17,20,27,.035)!important}
.v7-cat,.v7-trend{box-shadow:0 12px 34px rgba(17,20,27,.055)!important}


/* V8.1 stable hotfix */
.mock-popular{margin:26px 0 30px}
.mock-popular h2{font-size:1.45rem;margin:0 0 11px;letter-spacing:-.035em}
.mock-popular button{
  width:100%;border:0;border-radius:22px;padding:18px 19px;
  background:linear-gradient(135deg,#191b20,#292d35);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  font-size:1.15rem;font-weight:950;text-align:left;
  box-shadow:0 14px 36px rgba(17,20,27,.13)
}
.mock-popular button span{font-size:1.25rem;opacity:.75}


/* V8.2 view switch fix — shared behavior for Fan + Power Bank */
.view-toggle button{cursor:pointer;touch-action:manipulation;position:relative;z-index:2}

#catalogPage.is-list #catalogList,
#powerBankPage.is-list #pbList{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}



/* V8.3 structural fix */
.category-page-head{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:start;
  gap:14px;
  margin:8px 0 20px;
}
.category-page-head .back-btn{margin-top:3px}
.category-page-copy{min-width:0;padding-top:2px}
.category-page-copy>span{
  display:block;
  color:var(--accent);
  font-size:.9rem;
  font-weight:900;
  margin-bottom:4px;
}
.category-page-copy h1{
  margin:0;
  font-size:2rem;
  line-height:1.08;
  letter-spacing:-.045em;
  overflow-wrap:anywhere;
}
.category-page-copy p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
}

/* Buttons are definitely tappable */
.view-switch{position:relative;z-index:5}
.view-switch button{
  position:relative;
  z-index:6;
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation;
}

/* Fan view */
#catalogPage.is-list #catalogList{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
}




#catalogPage.is-grid .catalog-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
}

/* Power Bank view - correct ID is pbGrid */
#powerBankPage.is-list #pbGrid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
}





#powerBankPage.is-grid .pb-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
}

@media(max-width:420px){
  .category-page-head{
    grid-template-columns:52px minmax(0,1fr);
    gap:12px;
    margin-bottom:18px;
  }
  .category-page-copy h1{font-size:1.72rem}
  .category-page-copy>span{font-size:.84rem}
  .category-page-copy p{font-size:.86rem}
  
}


/* Universal detail system V85 */
.product-page-price{font-size:1.35rem;font-weight:950;color:var(--accent);line-height:1.25}
.product-page-section .fit-list,.product-page-section .know-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.product-page-section .fit-list li,.product-page-section .know-list li{font-size:1rem;line-height:1.6;color:#4f5560}
.product-page-section .fit-list li:before{content:"✓";color:var(--accent);font-weight:950;margin-right:9px}
.product-page-section .know-list li:before{content:"•";color:#8a909a;font-weight:950;margin-right:9px}
.product-page-section .direct-compare{display:grid;grid-template-columns:1fr auto;gap:8px}
.product-page-section .direct-compare select{min-width:0;border:1px solid var(--line);border-radius:13px;background:#fff;padding:12px}
.product-page-section .direct-compare button{border:0;border-radius:13px;background:var(--dark);color:#fff;padding:12px 15px;font-weight:900}
@media(max-width:420px){.product-page-section .direct-compare{grid-template-columns:1fr}.product-page-section .direct-compare button{width:100%}}


/* v86: one visual contract for every catalog category */
.category-catalog-page .category-page-head{margin-bottom:14px!important}
.category-catalog-page .category-page-copy p{display:none!important}

.category-catalog-page .catalog-filter{margin-top:12px!important}
.category-catalog-page .category-usage-chips{white-space:nowrap;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
.category-catalog-page .category-usage-chips::-webkit-scrollbar{display:none}
.category-catalog-page .filter-chips{min-height:48px}


/* V87 Front Redesign — shared category shell */
:root{--surface:#ffffff;--surface-soft:#f7f8fa;--accent-2:#ff8a6e;--ring:rgba(255,100,63,.18)}
.category-catalog-page{padding-bottom:28px}
.category-catalog-page .category-page-head{position:relative;display:flex;align-items:center;gap:12px;margin:4px 0 16px!important;padding:4px 2px}
.category-catalog-page .category-page-head .back-btn{width:46px;height:46px;border-radius:50%;box-shadow:none}
.category-catalog-page .category-page-copy>span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.category-catalog-page .category-page-copy h1{font-size:1.72rem;letter-spacing:-.035em;line-height:1.12}
.category-catalog-page .v6-helper{position:relative;overflow:hidden;grid-template-columns:48px 1fr;gap:13px;background:linear-gradient(135deg,#202228 0%,#15171c 100%);border:0;border-radius:24px;padding:18px;margin:0 0 14px;color:#fff;box-shadow:0 16px 38px rgba(20,22,28,.14)}
.category-catalog-page .v6-helper:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-72px;top:-86px;background:rgba(255,255,255,.055)}
.category-catalog-page .v6-helper-icon{width:48px;height:48px;border-radius:15px;background:#2d3037;box-shadow:none;z-index:1}
.category-catalog-page .v6-helper-copy{z-index:1}
.category-catalog-page .v6-helper-copy span{color:#ff9b83;font-size:.72rem}
.category-catalog-page .v6-helper-copy b{font-size:1.02rem;line-height:1.35;margin:2px 0 3px}
.category-catalog-page .v6-helper-copy small{color:#b9bdc5;font-size:.72rem}
.category-catalog-page .v6-helper button{grid-column:1/-1;z-index:1;background:#fff;color:#17191f;border-radius:14px;padding:12px;margin-top:2px;font-size:.88rem}
.category-catalog-page .catalog-filter{border:1px solid #eceef1!important;border-radius:20px!important;padding:14px!important;margin:9px 0!important;box-shadow:none!important;background:rgba(255,255,255,.94)}
.category-catalog-page .catalog-filter>b,.category-catalog-page .filter-title-row b{font-size:.9rem!important}
.category-catalog-page .filter-title-row strong{font-size:.9rem!important;color:var(--accent)!important}
.category-catalog-page .budget-range{margin:9px 0 7px}
.category-catalog-page .quick-budget,.category-catalog-page .filter-chips{gap:7px;padding:3px 0;min-height:0}
.category-catalog-page .quick-budget button,.category-catalog-page .filter-chips button{padding:8px 11px!important;font-size:.78rem!important;border-color:#e8e9ed;border-radius:12px}
.category-catalog-page .quick-budget button.active,.category-catalog-page .filter-chips button.active{box-shadow:0 0 0 3px var(--ring)}
.category-catalog-page .view-switch{display:flex!important;width:auto!important;float:left;margin:8px 0 10px!important;padding:3px!important;border-radius:12px;background:#eef0f3}
.category-catalog-page .view-switch button{padding:8px 11px!important;font-size:.78rem!important;border-radius:9px!important}





.category-catalog-page .catalog-list,#powerBankPage #pbGrid{clear:both}
.category-catalog-page .catalog-card,#powerBankPage .pb-card{border-color:#eceef1!important;border-radius:22px!important;box-shadow:0 7px 24px rgba(20,22,28,.035);transition:transform .15s ease,box-shadow .15s ease}
.category-catalog-page .catalog-card:active,#powerBankPage .pb-card:active{transform:scale(.992)}
@media(max-width:430px){
 .app-shell{padding-left:14px;padding-right:14px}
 .category-catalog-page .category-page-copy h1{font-size:1.52rem}
 .category-catalog-page .v6-helper{padding:16px;border-radius:22px}
 .category-catalog-page .catalog-filter{padding:13px!important}
}


/* ===== V91 category card standard: match Power Bank layout ===== */
#catalogPage .catalog-card{position:relative}


#catalogPage .catalog-price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:#272727!important;font-size:1.18rem!important;font-weight:800!important}
#catalogPage .catalog-price small{color:#a96a55;font-size:.78rem;font-weight:700;line-height:1.25}
#catalogPage .catalog-actions a{background:var(--accent)!important;color:#fff!important;text-align:center;text-decoration:none}
#catalogPage .catalog-actions button{background:#f0f1f3!important;color:#2c2c2c!important}



#catalogPage.is-grid .catalog-price{margin-top:8px}
#catalogPage.is-grid .catalog-actions{margin-top:auto}
@media(max-width:420px){#catalogPage .catalog-price{font-size:1.08rem!important}}


/* STEP 1 SAFE CONSOLIDATION: preserved source order; former anonymous style block boundary */

.product-page-open{overflow:hidden}
.product-page-overlay{position:fixed;inset:0;z-index:99999;background:#f6f7f9;overflow-y:auto;-webkit-overflow-scrolling:touch}
.product-page-shell{max-width:720px;margin:0 auto;padding:0 16px 110px}
.product-page-top{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:14px 0;background:rgba(246,247,249,.96);backdrop-filter:blur(12px);font-weight:900}
.product-back{border:1px solid #e3e5e8;background:#fff;border-radius:999px;padding:10px 14px;font-weight:900;font-size:.78rem}
.product-page-hero,.product-page-section{background:#fff;border:1px solid #e4e6e9;border-radius:24px;padding:18px;margin-bottom:12px}
.product-page-hero{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.product-page-hero img{width:120px;height:120px;object-fit:contain;border-radius:18px;background:#f5f6f8}
.product-page-hero small{color:#7a7f87;font-weight:800}
.product-page-hero h1{font-size:1.28rem;line-height:1.2;margin:5px 0 8px}
.product-page-price{font-size:1.12rem;font-weight:950;color:var(--accent);margin-bottom:10px}
.product-page-section h2{font-size:1.05rem;margin:0 0 12px}
.product-page-actions{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(246,247,249,.96);backdrop-filter:blur(12px)}
.product-page-actions a{display:block;max-width:688px;margin:auto;background:var(--accent);color:#fff;text-align:center;text-decoration:none;border-radius:16px;padding:15px;font-weight:950}
@media(max-width:430px){
 .product-page-shell{padding-left:12px;padding-right:12px}
 .product-page-hero{grid-template-columns:92px 1fr;padding:14px}
 .product-page-hero img{width:92px;height:92px}
 .product-page-hero h1{font-size:1.08rem}
}

/* V125 Step 6 — Rich Product Detail template (data-safe, mobile-first) */
.rich-detail-summary{background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;margin-top:12px}
.rich-detail-summary h2{margin:0 0 8px;font-size:1.05rem}
.rich-detail-summary p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}
.rich-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rich-detail-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.rich-detail-box span{display:block;color:var(--muted);font-size:.78rem}
.rich-detail-box b{display:block;margin-top:4px;font-size:.92rem;line-height:1.45}
@media(max-width:420px){.rich-detail-grid{grid-template-columns:1fr 1fr}.rich-detail-box{padding:12px}}


/* Batch 102 — resilient full-spec layout for narrow mobile screens. */
.spec-detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch}
.spec-detail-grid>div{min-width:0;overflow:hidden}
.spec-detail-grid span,.spec-detail-grid b{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal!important}
.spec-detail-grid b{line-height:1.5}
@media (max-width:360px){.spec-detail-grid{grid-template-columns:1fr!important}}


.v7-cat-main-link{color:inherit;text-decoration:none;cursor:pointer}

/* Batch 158 — Universal Catalog Pagination */
.catalog-pagination{clear:both;display:flex;align-items:center;justify-content:center;gap:7px;padding:22px 4px 8px;width:100%}
.catalog-pagination button{min-width:42px;height:42px;padding:0 12px;border:1px solid #e4e6ea;border-radius:13px;background:rgba(255,255,255,.94);color:#373a40;font-weight:850;box-shadow:0 5px 18px rgba(20,22,28,.035);cursor:pointer}
.catalog-pagination button.active{background:#17191f;color:#fff;border-color:#17191f;box-shadow:0 8px 22px rgba(20,22,28,.13)}
.catalog-pagination button:disabled{opacity:.34;cursor:default;box-shadow:none}.catalog-pagination-dots{display:grid;place-items:center;min-width:20px;color:#8a8e96;font-weight:900}
@media(max-width:420px){.catalog-pagination{gap:5px;padding-top:18px}.catalog-pagination button{min-width:38px;height:40px;padding:0 10px;border-radius:12px}}