/*
UNIVERSAL COMPARE PAGE
Fan + Power Bank + future categories use the same visual structure.
*/
.universal-compare-shell{
  width:100%;
  max-width:680px;
  margin:0 auto;
  font-family:var(--annideee-font,system-ui,-apple-system,"Noto Sans Thai","Tahoma",sans-serif);
}

.universal-compare-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}
.universal-compare-head .back-btn{
  flex:0 0 auto;
}
.universal-compare-head h2{
  margin:0;
  font-size:1.1rem;
  line-height:1.3;
  font-weight:850;
  color:var(--text,#202124);
}

/* two product cards */
.universal-compare-products{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 0 16px;
}
.universal-compare-product{
  min-width:0;
  padding:10px;
  border:1px solid var(--line,#e5e5e5);
  border-radius:20px;
  background:#fff;
  text-align:center;
  box-sizing:border-box;
}
.universal-compare-product img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:14px;
  background:var(--surface-soft,#f7f7f8);
}
.universal-compare-product small{
  display:block;
  margin-top:8px;
  color:var(--muted,#71757b);
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.universal-compare-product h3{
  display:-webkit-box;
  min-height:2.8em;
  max-height:2.8em;
  margin:4px 0 0;
  font-size:.92rem;
  line-height:1.4;
  font-weight:800;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* spec blocks */
.universal-compare-specs{
  display:grid;
  gap:10px;
}
.universal-compare-row{
  overflow:hidden;
  border:1px solid var(--line,#e5e5e5);
  border-radius:18px;
  background:#fff;
}
.universal-compare-label{
  padding:10px 14px;
  background:#f7f7f8;
  color:var(--text,#202124);
  font-size:.82rem;
  font-weight:800;
  line-height:1.35;
}
.universal-compare-values{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.universal-compare-value{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:70px;
  padding:12px 9px;
  box-sizing:border-box;
  color:var(--text,#202124);
  font-size:.9rem;
  font-weight:750;
  line-height:1.45;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.universal-compare-value + .universal-compare-value{
  border-left:1px solid var(--line,#e5e5e5);
}
.universal-compare-value.is-missing{
  color:#9b9da1;
  font-weight:650;
}
.universal-compare-row.is-price .universal-compare-value{
  color:var(--brand,#B85E43);
  font-size:1rem;
  font-weight:850;
}
.universal-compare-row.is-cta .universal-compare-value{
  min-height:60px;
}

/* fan bottom-sheet and PB full page share the same inner component */
#compareDrawer .compare-sheet{
  padding:18px !important;
}
#pbComparePage{
  padding-bottom:28px;
}
#pbCompareContent{
  width:100%;
}

/* hide old fan header/product area when universal component is injected */

#compareDrawer.is-universal-compare .table-wrap{
  overflow:visible !important;
  margin:0 !important;
}

/* close button inside fan universal head */
.universal-compare-close{
  margin-left:auto;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#eef0f3;
  color:#202124;
  font-size:1.15rem;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:420px){
  .universal-compare-products{gap:10px}
  .universal-compare-product{padding:8px;border-radius:18px}
  .universal-compare-product h3{font-size:.86rem}
  .universal-compare-label{padding:9px 12px;font-size:.8rem}
  .universal-compare-value{
    min-height:66px;
    padding:11px 7px;
    font-size:.86rem;
  }
}

/* compare view visibility */
/*
COMPARE ACTION FLOW
- Floating compare bar exists only on catalog selection screen.
- It must NEVER appear inside an opened compare view.
*/
body.compare-view-open #compareFloating,
body.compare-view-open #pbCompareBar,
#compareDrawer:not(.hidden) ~ #compareFloating,
#pbComparePage:not(.hidden) #pbCompareBar{
  display:none !important;
}

/* Final compare visibility hardening:
   floating compare controls must never appear while any compare view is open. */
body.compare-view-open #compareFloating,
body.compare-view-open #pbCompareBar,
body.compare-view-open .compare-floating,
body.compare-view-open .pb-compare-bar,
#compareDrawer:not(.hidden) ~ #compareFloating,
#compareDrawer:not(.hidden) ~ #pbCompareBar{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Universal CTA row consistency */
.universal-compare-row.is-cta .universal-compare-label{
  display:block !important;
  color:var(--text,#202124) !important;
  font-weight:800 !important;
}
.universal-compare-row.is-cta .universal-compare-value,
.universal-compare-row.is-cta .universal-compare-value a{
  color:var(--brand,#B85E43) !important;
  font-weight:800 !important;
  text-decoration:none !important;
}
.universal-compare-row.is-cta .universal-compare-value a:hover{
  color:var(--brand-dark,#94462F) !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}


/* ONE universal compare footer for Fan / Power Bank / future categories */
.universal-compare-footer{
  width:100%;
  margin:18px 0 42px;
}
.universal-compare-reselect{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:62px;
  padding:0 18px;
  border:1px solid var(--line,#e5e5e5);
  border-radius:20px;
  background:#fff;
  color:var(--text,#202124);
  font-family:var(--annideee-font,system-ui,-apple-system,"Noto Sans Thai","Tahoma",sans-serif);
  font-size:1.05rem;
  line-height:1.25;
  font-weight:850;
  cursor:pointer;
  box-sizing:border-box;
}
.universal-compare-reselect:active{
  transform:translateY(1px);
}