/* =====================================
   UNIVERSAL RESPONSIVE GRID SYSTEM
===================================== */

[class*="grid-"]{
width:100% !important;
box-sizing:border-box;
}

.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
display:grid !important;
width:100% !important;
gap:20px;
align-items:start;
}

.grid-2 > *,
.grid-2-1 > *,
.grid-1-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-1-2-1 > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}

/* Desktop */
.grid-2{grid-template-columns:1fr 1fr !important;}
.grid-2-1{grid-template-columns:2fr 1fr !important;}
.grid-1-2{grid-template-columns:1fr 2fr !important;}
.grid-3{grid-template-columns:1fr 1fr 1fr !important;}
.grid-4{grid-template-columns:repeat(4,1fr) !important;}
.grid-1-2-1{grid-template-columns:1fr 2fr 1fr !important;}

/* Tablet + Mobile */
@media (max-width:1024px){
.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
grid-template-columns:1fr !important;
gap:18px;
}
}

@media (max-width:767px){
.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
grid-template-columns:1fr !important;
gap:16px;
}
}

/* ============ KAYVAI COMPONENTS ============ */
.rv-btn{display:inline-block;background:#0B63F6;color:#fff;font-weight:700;padding:12px 26px;border-radius:8px;text-decoration:none;font-size:16px}
.rv-btn::after{content:" \2192"}
.rv-btn:hover{background:#0847B8;color:#fff}
.rv-back{display:inline-block;margin:0 0 20px;color:#667085;font-size:14px;text-decoration:none}
.rv-rank{display:inline-block;background:#0B63F6;color:#fff;font-weight:800;padding:6px 12px;border-radius:999px;font-size:14px}
.rv-rank::before{content:"#"}
.rv-score{display:inline-block;background:#101828;color:#fff;font-weight:700;padding:6px 12px;border-radius:999px;font-size:14px}
.rv-winner{display:inline-block;background:#F59E0B;color:#fff;font-weight:800;padding:6px 12px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.rv-brand{display:inline-block;color:#667085;text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:700}
.rv-hero-badges > *{margin-right:8px}
.rv-list{margin:10px 0;padding-left:20px;color:#101828;line-height:1.6}
.rv-list li{margin:6px 0}
.rv-spec-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#667085;display:block;margin-bottom:4px}
.rv-spec-value{font-size:17px;font-weight:700;color:#101828;display:block}
.rv-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #E4E7EC;border-radius:12px;padding:20px;margin:0 0 28px}
.rv-hero-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-box{background:#F7F9FB;border-radius:12px;padding:20px;margin:0 0 28px}
.rv-spec-card{background:#F7F9FB;border-radius:12px;padding:20px;text-align:center;transition:transform .15s ease,box-shadow .15s ease}
.rv-spec-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.rv-dark{background:#101828;border-radius:12px;padding:30px;margin:32px 0;color:#fff}
.rv-dark h2,.rv-dark p{color:#fff}
.rv-faq{border:1px solid #E4E7EC;border-radius:12px;padding:18px 20px;margin:0 0 12px}
.rv-faq h3{margin:0 0 8px;font-size:17px}
@media(max-width:768px){
.rv-hero{flex-direction:column;align-items:flex-start}
}
@media(max-width:1024px){
.rv-specs{grid-template-columns:1fr 1fr !important}
}

.rv-item{border:1px solid #E4E7EC;border-radius:12px;padding:24px;margin:0 0 20px}
.rv-item-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rv-item-title{font-size:20px;margin:0 0 6px}
.rv-item-title a{color:#101828;text-decoration:none}
.rv-item-title a:hover{color:#0B63F6}
.rv-item-cta{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.rv-read{color:#0B63F6;font-weight:600;text-decoration:none;font-size:14px}
.rv-related{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 28px}

/*Finder CSS*/

.rv-finder-bar{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.rv-finder-bar input,.rv-finder-bar select{padding:10px 12px;border:1px solid #E4E7EC;border-radius:8px;font-size:14px;background:#fff;color:#101828}
.rv-finder-bar input{flex:1;min-width:200px}
.rv-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1024px){.rv-fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.rv-fgrid{grid-template-columns:1fr}}
.rv-fcard{border:1px solid #E4E7EC;border-radius:12px;overflow:hidden;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.rv-fcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.rv-fcard img{width:100%;height:160px;object-fit:cover;display:block}
.rv-fcard-body{padding:16px}
.rv-fcard-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rv-fcard-title{font-size:16px;font-weight:700;margin:0 0 8px}
.rv-fcard-title a{color:#101828;text-decoration:none}
.rv-fcard-title a:hover{color:#0B63F6}
.rv-fempty{grid-column:1/-1;padding:30px;text-align:center;color:#667085}

/*Comparison CSS*/
.rv-cmp-img{width:100%;height:180px;object-fit:cover;border-radius:12px;display:block;margin:0 0 12px}
.rv-cmp-title{font-size:18px;margin:0 0 8px}
.rv-cmp-title a{color:#101828;text-decoration:none}
.rv-cmp-title a:hover{color:#0B63F6}
.rv-cmp-table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:15px}
.rv-cmp-table th,.rv-cmp-table td{border:1px solid #E4E7EC;padding:10px 12px;text-align:left}
.rv-cmp-table thead th{background:#F7F9FB}
.rv-tie{display:inline-block;background:#667085;color:#fff;font-weight:700;padding:6px 12px;border-radius:999px;font-size:12px}

/*Buying Guide CSS*/
.rv-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px}
@media(max-width:1024px){.rv-tiers{grid-template-columns:1fr}}
.rv-tier{background:#F7F9FB;border-radius:12px;padding:20px}
.rv-tier h3{margin:0 0 8px;font-size:17px}
.rv-tier p{margin:0 0 10px}

/*Hero Image CSS*/
.rv-hero-img{width:120px;height:120px;object-fit:contain;background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:8px;flex-shrink:0}
.rv-item-img{width:100%;height:160px;object-fit:contain;background:#fff;border-bottom:1px solid #E4E7EC;padding:10px}

/* Hero 3-column layout */
.rv-hero-box{display:grid;grid-template-columns:180px 1fr auto;gap:20px;align-items:center;border:1px solid #E4E7EC;border-radius:16px;padding:20px;margin:0 0 28px;background:#fff}
@media(max-width:1024px){.rv-hero-box{grid-template-columns:140px 1fr;grid-template-rows:auto auto}.rv-hero-cta-col{grid-column:1/-1;justify-self:start}}
@media(max-width:600px){.rv-hero-box{grid-template-columns:1fr;text-align:center}.rv-hero-badges{justify-content:center}.rv-hero-cta-col{justify-self:stretch}.rv-btn-lg{width:100%}}
.rv-hero-img{width:100%;height:auto;max-height:180px;object-fit:contain;background:#fff;border-radius:12px;padding:8px;border:1px solid #E4E7EC}
.rv-hero-title{font-size:24px;font-weight:800;margin:0 0 8px;line-height:1.25}
.rv-hero-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.rv-btn-lg{font-size:17px;padding:14px 32px}
.rv-hero-link{display:block;margin-top:10px;color:#0B63F6;font-weight:600;font-size:14px;text-decoration:none}
.rv-hero-link:hover{text-decoration:underline}

/* Disclaimer + How We Rank */
.rv-disclaimer{background:#FFF7ED;border:1px solid #FED7AA}
.rv-disclaimer p{margin:0;font-size:14px;color:#7C2D12}
.rv-disclaimer a{color:#9A3412;text-decoration:underline}
.rv-how-we-rank h3{margin:0 0 12px;font-size:18px}
.rv-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 12px}
@media(max-width:768px){.rv-how-grid{grid-template-columns:repeat(2,1fr)}}
.rv-how-item{text-align:center;padding:10px;background:#fff;border-radius:8px}
.rv-how-label{font-size:12px;color:#667085;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.rv-how-value{font-size:18px;font-weight:700;color:#101828}
.rv-how-note{margin:0;font-size:13px;color:#667085;font-style:italic}

/* Related products */
.rv-related-products{margin-top:40px}
.rv-related-products h2{margin-bottom:16px}
.rv-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1024px){.rv-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rv-related-grid{grid-template-columns:1fr}}
.rv-related-card{border:1px solid #E4E7EC;border-radius:12px;overflow:hidden;background:#fff}
.rv-related-card img{width:100%;height:160px;object-fit:contain;background:#F7F9FB;padding:10px}
.rv-related-body{padding:16px}
.rv-related-body h3{font-size:16px;margin:0 0 8px;line-height:1.3}
.rv-related-body h3 a{color:#101828;text-decoration:none}
.rv-related-body h3 a:hover{color:#0B63F6}

/* BUTTONS — inline by text, never full width */
.rv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#0B63F6;color:#fff;font-weight:700;
    padding:12px 26px;border-radius:8px;
    text-decoration:none;font-size:16px;
    width:auto !important;max-width:fit-content !important;
    white-space:nowrap;
    border:none;cursor:pointer;
    transition:background .15s ease;
}
.rv-btn:hover{background:#0847B8;color:#fff}
.rv-btn-lg{font-size:17px;padding:14px 32px}

/* RELATED PRODUCTS — stacked card layout */
.rv-related-products{margin-top:40px}
.rv-related-products h2{margin-bottom:16px}
.rv-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1024px){.rv-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rv-related-grid{grid-template-columns:1fr}}
.rv-related-card{
    border:1px solid #E4E7EC;border-radius:12px;overflow:hidden;background:#fff;
    display:flex;flex-direction:column;
    transition:transform .15s ease,box-shadow .15s ease;
}
.rv-related-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.rv-related-card img{width:100%;height:180px;object-fit:contain;background:#F7F9FB;padding:10px}
.rv-related-body{
    padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;
    align-items:flex-start;
}
.rv-related-body h3{font-size:16px;margin:0;line-height:1.3}
.rv-related-body h3 a{color:#101828;text-decoration:none}
.rv-related-body h3 a:hover{color:#0B63F6}

/* Top 10 horizontal product cards */
.rv-item-h{display:flex;gap:20px;align-items:flex-start}
.rv-item-left{flex:0 0 170px}
.rv-item-left img{width:170px;height:170px;object-fit:contain;background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:8px;display:block}
.rv-item-right{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.rv-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-item-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
@media(max-width:600px){
.rv-item-h{flex-direction:column}
.rv-item-left{flex:none;width:100%}
.rv-item-left img{width:100%;height:200px}
}

/* FAQ accordion (native <details>/<summary>, no JS) */
.rv-faq-wrap{margin:0 0 28px}
.rv-faq-wrap h2{margin-bottom:16px}
.rv-faq-item{border:1px solid #E4E7EC;border-radius:12px;margin:0 0 12px;background:#fff;overflow:hidden}
.rv-faq-item summary{
    padding:16px 20px;
    font-weight:700;
    font-size:16px;
    cursor:pointer;
    list-style:none;
    position:relative;
    padding-right:44px;
    color:#101828;
    line-height:1.4;
}
.rv-faq-item summary::-webkit-details-marker{display:none}
.rv-faq-item summary::after{
    content:'+';
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    font-weight:400;
    color:#667085;
}
.rv-faq-item[open] summary::after{content:'−'}
.rv-faq-item[open] summary{background:#F7F9FB}
.rv-faq-answer{
    padding:4px 20px 16px;
    color:#344054;
    line-height:1.6;
    font-size:15px;
}