/* =====================================
VARIABLES
===================================== */

:root{
--nav-height:68px;
}

/* =====================================
COMPARISON TABLE
===================================== */

.compare-table{
width:100%;
border-collapse:collapse;
font-size:14px;
min-width:650px;
}

.compare-table th{
font-weight:700;
color:#111;
background:#fafafa;
}

.compare-table th,
.compare-table td{
padding:10px;
border-bottom:1px solid #eee;
text-align:left;
}

/* =====================================
PRODUCT CELL
===================================== */

.compare-product{
display:flex;
align-items:center;
gap:10px;
}

.compare-product img{
width:42px;
height:42px;
object-fit:contain;
}

.compare-product span{
font-weight:600;
}

/* =====================================
STARS
===================================== */

.stars{
color:#f59e0b;
font-size:14px;
letter-spacing:1px;
}

.rating-score{
font-size:12px;
color:#666;
margin-left:4px;
}

/* =====================================
PRICE
===================================== */

.price{
font-weight:700;
color:#b12704;
font-size:15px;
}

/* =====================================
BEST PRODUCT
===================================== */

.compare-best{
position:relative;
background:#fff7ed;
border:2px solid #ff9800;
}

.compare-best::before{

content:"Best Overall";

position:absolute;
top:-12px;
left:12px;

background:#ff9800;
color:#111;

font-size:11px;
font-weight:700;

padding:3px 8px;
border-radius:6px;

}

/* =====================================
STICKY COMPARISON BOX
===================================== */

.sticky-compare{

position:sticky;
top:var(--nav-height);

background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;

padding:12px;
margin-top:20px;

z-index:90;

}

.sticky-compare.is-stuck{
box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* compact mode */

.sticky-compare.is-stuck th,
.sticky-compare.is-stuck td{
padding:8px 10px;
font-size:0.85rem;
}

.sticky-compare.is-stuck .compare-product img{
display:none;
}

/* =====================================
BUTTONS
===================================== */

.btn.small{
padding:6px 10px;
font-size:13px;
}

/* =====================================
COMPARE CONTROLS
===================================== */

.compare-controls{
display:flex;
justify-content:center;
margin-top:8px;
}

.compare-toggle{

background:linear-gradient(135deg,#ff9800,#ffb347);
color:#111;

border:none;
padding:8px 16px;

border-radius:999px;

font-weight:700;
font-size:0.85rem;

cursor:pointer;

box-shadow:0 6px 18px rgba(0,0,0,.25);

transition:transform .2s ease;

}

.compare-toggle:hover{
transform:scale(1.05);
}

/* =====================================
COLLAPSE
===================================== */

.sticky-compare.compare-hidden .table-wrapper{
display:none;
}

/* =====================================
TABLE WRAPPER
===================================== */

.table-wrapper{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

/* =====================================
FLOATING COMPARISON BAR
===================================== */

.floating-compare{

position:fixed;
top:var(--nav-height);
left:0;
right:0;

background:#fff;
border-bottom:1px solid #eee;

z-index:110;

box-shadow:0 6px 20px rgba(0,0,0,.08);

}

/* =====================================
FLOATING INNER
===================================== */

.floating-inner{

max-width:1100px;
margin:auto;

display:flex;
gap:20px;

align-items:center;
justify-content:center;

padding:10px 15px;

overflow-x:auto;

scroll-snap-type:x mandatory;
scrollbar-width:none;

}

.floating-inner::-webkit-scrollbar{
display:none;
}

/* =====================================
FLOATING PRODUCT
===================================== */

.floating-product{

display:flex;
align-items:center;
gap:10px;

min-width:240px;

scroll-snap-align:center;

}

.floating-product img{

width:42px;
height:42px;
object-fit:contain;

}

/* =====================================
FLOATING INFO
===================================== */

.floating-info{

display:flex;
flex-direction:column;
font-size:13px;

}

.floating-name{

font-weight:600;
line-height:1.2;

max-width:140px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.floating-rating{
font-size:12px;
color:#f59e0b;
}

.floating-price{
font-size:12px;
color:#666;
}

/* =====================================
FLOATING BUTTON
===================================== */

.floating-btn{

background:#ff9900;
color:#111;

padding:6px 12px;
border-radius:6px;

font-weight:700;
font-size:13px;

text-decoration:none;
white-space:nowrap;

transition:.2s;

}

.floating-btn:hover{
background:#e68a00;
}

/* =====================================
BADGES
===================================== */

.pick-badge{

font-size:12px;
font-weight:700;

background:#f5f5f5;
padding:3px 6px;
border-radius:4px;

}

/* =====================================
MOBILE
===================================== */

@media(max-width:900px){

.sticky-compare{
position:static;
}

.compare-table{
font-size:.9rem;
}

}

@media(max-width:768px){

.compare-table th:nth-child(4),
.compare-table td:nth-child(4){
display:none;
}

}

/* =====================================
PAGE OFFSET (for fixed bars)
===================================== */



body{

padding-top: calc(var(--nav-height) + 60px);

}

@media(max-width:600px){

.floating-product{
min-width:200px;
}

.floating-name{
max-width:110px;
font-size:12px;
}

}

@media(max-width:600px){

.compare-product img{
width:32px;
height:32px;
}

.compare-table{
font-size:13px;
}

}