/* ==================================================
CATEGORY HERO LAYOUT
================================================== */

.category-hero{
padding:50px 0;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
gap:48px;
align-items:start;
}

.category-hero .hero-text{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
min-width:0;
}

.category-hero .hero-text h1{
margin:0;
font-size:clamp(3rem,4.5vw,5rem);
line-height:1.08;
}

.category-hero .hero-text p{
margin:0;
max-width:680px;
font-size:1.1rem;
line-height:1.7;
}

.category-hero .hero-text .btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
padding:12px 24px;
background:#b57b3c;
color:#fff;
text-decoration:none;
border:none;
border-radius:8px;
font-weight:600;
align-self:flex-start;
}

.category-hero .hero-right{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding-top:6px;
}

.category-hero .hero-brands-title{
margin:0 0 16px;
text-align:center;
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
color:#b57b3c;
opacity:.75;
}

.category-hero .hero-brand-logos{
display:flex;
flex-direction:column;
gap:18px;
align-items:center;
}

.category-hero .top-row,
.category-hero .bottom-row{
display:flex;
justify-content:center;
gap:14px;
}

.category-hero .hero-brand-logos img{
display:block;
width:auto;
height:82px;
max-width:130px;
object-fit:contain;
border-radius:12px;
transition:transform .3s ease,opacity .3s ease;
box-shadow:none;
}

.category-hero .hero-brand-logos img:hover{
transform:translateY(-5px) scale(1.04);
opacity:.9;
}

/* ==================================================
 HERO RESPONSIVE
================================================== */
/* 1024 */
@media(max-width:1024px){
.category-hero{
grid-template-columns:minmax(0,1fr) minmax(260px,.82fr);
gap:34px;
padding:42px 0;
}
.category-hero .hero-text h1{
font-size:clamp(2.4rem,4.5vw,4rem);
}
.category-hero .hero-text p{
font-size:1rem;
}
.category-hero .hero-brand-logos img{
width:82px;
height:82px;
}
}

/* 768 */
@media(max-width:768px){
.category-hero{
grid-template-columns:1fr minmax(220px,.85fr);
gap:24px;
padding:34px 0;
}
.category-hero .hero-text h1{
font-size:clamp(2.1rem,5vw,3rem);
}
.category-hero .hero-text p{
font-size:.95rem;
line-height:1.6;
}
.category-hero .hero-text .btn{
padding:11px 20px;
}
.category-hero .hero-brand-logos{
gap:14px;
}
.category-hero .hero-brand-logos img{
width:74px;
height:74px;
}
}

/* 430 */
@media(max-width:430px){
.category-hero{
display:flex;
flex-direction:column;
gap:18px;
padding:28px 0;
}
.category-hero .hero-text{
display:contents;
}
.category-hero .hero-text h1{
order:1;
font-size:2rem;
line-height:1.08;
text-align:center;
max-width:320px;
margin:0 auto;
}
.category-hero .hero-right{
order:2;
padding-top:0;
width:100%;
}
.category-hero .hero-brands-title{
margin:0 0 12px;
text-align:center;
}
.category-hero .hero-brand-logos{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
width:100%;
}
.category-hero .top-row,
.category-hero .bottom-row{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
width:100%;
}
.category-hero .hero-brand-logos img{
display:block;
width:82px;
height:68px;
max-width:none;
object-fit:contain;
border-radius:12px;
}
.category-hero .hero-text p{
order:3;
font-size:.9rem;
line-height:1.55;
max-width:320px;
text-align:center;
margin:0 auto;
}
.category-hero .hero-text .btn{
order:4;
align-self:center;
padding:11px 20px;
min-width:170px;
}
}

/* 360*/
@media(max-width:360px){
.category-hero .hero-text h1{
font-size:1.8rem;
max-width:300px;
}
.category-hero .hero-text p{
font-size:.84rem;
line-height:1.5;
max-width:300px;
}
.category-hero .hero-brand-logos img{
width:72px;
height:60px;
}
.category-hero .top-row,
.category-hero .bottom-row{
gap:8px;
}
.category-hero .hero-text .btn{
min-width:150px;
padding:10px 16px;
font-size:.88rem;
}
}





/* ==================================================
CATEGORY INFO 
================================================== */
.category-info{
padding:40px 0;
}

.category-info h2{
text-align:center;
margin-bottom:40px;
}

.benefit-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
margin-bottom:40px;
}

.benefit-card{
background:white;
padding:24px;
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
transition:.3s;
}

.benefit-card p{
color:#c94f3d;
}
.benefit-card:hover{
transform:translateY(-6px);
}

.category-seo-text{
max-width:1000px;
margin:auto;
text-align:center;
line-height:1.8;
}
/* ==================================================
CATEGORY INFO Responsive
================================================== */
/* 430 */
@media(max-width:430px){
.benefit-grid{
display:flex;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
margin-bottom:40px;
padding:4px 20px 18px;
scrollbar-width:none;
touch-action:pan-x;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}

.benefit-grid::-webkit-scrollbar{
display:none;
}

.benefit-card{
flex:0 0 88%;
padding:22px;
margin:0;
}

.benefit-card:hover{
transform:none;
}

.benefit-grid.dragging{
cursor:grabbing;
}
}

/* 360 */
@media(max-width:360px){

.benefit-grid{
gap:12px;
padding-left:16px;
padding-right:16px;
}

.benefit-card{
flex:0 0 86%;
padding:18px;
}
}




/* review and location*/
.location-trust{
  display:flex;
  justify-content:center;
  margin:24px 0 32px;
}

.review-pill{
  display:inline-flex;
  align-items:center;
  padding:14px 28px;
  background:white;
  border-radius:999px;
  text-decoration:none;
  color:#0c234e;
  font-weight:600;
  transition:.3s ease;
  box-shadow:
  0 10px 25px rgba(0,0,0,.08);
}

.review-pill:hover{
  transform:translateY(-3px);
  box-shadow:
  0 16px 35px rgba(0,0,0,.12);
}

@media(max-width:768px){
  .tiles-showroom img{
    width:260px;
    height:260px;
  }

}