/*==================================================
PRODUCTS PAGE
==================================================*/

.products-hero{

    background:linear-gradient(rgba(8,34,70,.82),rgba(8,34,70,.82)),
    url("../images/products/products-hero.jpg") center center/cover no-repeat;

    padding:100px 0;

    text-align:center;

    color:#fff;

}

.products-hero-content{

    width:min(900px,92%);

    margin:auto;

}

.hero-badge{

    display:inline-block;

    background:#F28C28;

    color:#fff;

    padding:10px 24px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.products-hero h1{

    font-size:44px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:18px;

}

.products-hero p{

    font-size:18px;

    line-height:1.7;

    opacity:.95;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/*==================================================
OVERVIEW
==================================================*/

.products-overview{

    padding:70px 0;

    background:#fff;

}

.overview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.overview-image img{

    width:100%;

    display:block;

    border-radius:16px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.section-label{

    display:inline-block;

    background:#F28C28;

    color:#fff;

    padding:8px 22px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.overview-content h2{

    font-size:34px;

    color:#0B2D5C;

    line-height:1.2;

    margin-bottom:18px;

}

.overview-content p{

    font-size:16px;

    line-height:1.8;

    color:#555;

    margin-bottom:18px;

}

.lead{

    font-size:18px!important;

    color:#222!important;

}

.overview-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:40px 0;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#0B2D5C;

}

.feature-item span{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#1D9448;

    color:#fff;

}

@media(max-width:991px){

.overview-grid{

grid-template-columns:1fr;

gap:50px;

}

.products-hero h1{

font-size:32px;

}

.products-hero p{

font-size:16px;

}

.overview-content h2{

font-size:28px;

}

.overview-features{

grid-template-columns:1fr;

}

}

/*==================================================
CATEGORY PRODUCT CARDS
==================================================*/

.products-page{

padding:60px 0;

background:#fff;

}

.products-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

width:90%;

max-width:1200px;

margin:40px auto 0;

}

.product-card{

background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:0 5px 25px rgba(0,0,0,.08);

transition:.3s;

}

.product-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 35px rgba(0,0,0,.12);

}

.product-card img{

width:100%;

height:220px;

object-fit:cover;

}

.product-content{

padding:28px;

}

.product-content h3{

font-size:22px;

color:#0B2D5C;

margin-bottom:12px;

}

.product-content p{

font-size:15px;

line-height:1.7;

color:#666;

margin-bottom:18px;

}

.product-btn{

display:inline-block;

padding:12px 24px;

background:#1D9448;

color:#fff;

border-radius:8px;

text-decoration:none;

font-weight:600;

font-size:15px;

transition:.3s;

}

.product-btn:hover{

background:#145d2f;

transform:translateY(-2px);

}

/*==================================================
POPULAR SIZES
==================================================*/

.popular-sizes{

padding:60px 0;

background:#f8f9fb;

}

@media(max-width:768px){

.products-grid{

grid-template-columns:1fr;

}

}

/*==================================================
CATEGORY CARDS
==================================================*/

.category-cards{

padding:60px 0;

background:#fff;

}

.category-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:40px;

}

.category-card{

position:relative;

border-radius:16px;

overflow:hidden;

height:300px;

display:block;

text-decoration:none;

}

.category-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.category-card:hover img{

transform:scale(1.08);

}

.category-overlay{

position:absolute;

bottom:0;

left:0;

right:0;

padding:25px;

background:linear-gradient(transparent,rgba(0,0,0,.85));

color:#fff;

}

.category-overlay h3{

font-size:22px;

margin-bottom:8px;

color:#fff;

}

.category-overlay p{

font-size:14px;

opacity:.9;

margin-bottom:12px;

color:#fff;

}

.category-explore{

font-size:13px;

font-weight:700;

color:#F28C28;

}

@media(max-width:992px){

.category-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.category-grid{

grid-template-columns:1fr;

}

}

/*==================================================
TIRE CATALOG
==================================================*/

.tire-catalog{

padding:60px 0;

background:#f8f9fb;

}

.catalog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:35px;

}

.catalog-card{

background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:0 4px 20px rgba(0,0,0,.06);

transition:.3s;

display:flex;

flex-direction:column;

height:100%;

}

.catalog-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 30px rgba(0,0,0,.12);

}

.catalog-image{

width:100%;

height:200px;

overflow:hidden;

}

.catalog-image img{

width:100%;

height:100%;

object-fit:cover;

}

.catalog-info{

padding:25px;

flex:1;

display:flex;

flex-direction:column;

}

.catalog-category{

display:inline-block;

background:#0B2D5C;

color:#fff;

padding:4px 12px;

border-radius:20px;

font-size:11px;

font-weight:700;

letter-spacing:1px;

margin-bottom:12px;

align-self:flex-start;

}

.catalog-info h3{

font-size:18px;

color:#0B2D5C;

margin-bottom:15px;

line-height:1.3;

}

.catalog-specs{

margin-bottom:20px;

flex:1;

}

.catalog-specs div{

padding:6px 0;

font-size:14px;

color:#555;

border-bottom:1px solid #f0f0f0;

}

.catalog-specs div:last-child{

border-bottom:none;

}

.catalog-buttons{

display:flex;

gap:10px;

}

.btn-view{

flex:1;

display:block;

text-align:center;

padding:10px 16px;

background:#0B2D5C;

color:#fff;

border-radius:8px;

text-decoration:none;

font-weight:600;

font-size:14px;

transition:.3s;

}

.btn-view:hover{

background:#143a6e;

}

.btn-quote{

flex:1;

display:block;

text-align:center;

padding:10px 16px;

background:#1D9448;

color:#fff;

border-radius:8px;

text-decoration:none;

font-weight:600;

font-size:14px;

transition:.3s;

}

.btn-quote:hover{

background:#145d2f;

}

.catalog-pagination{

display:flex;

justify-content:center;

gap:10px;

margin-top:50px;

}

.page-btn{

display:inline-block;

padding:12px 18px;

background:#fff;

color:#0B2D5C;

border:2px solid #e0e0e0;

border-radius:8px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.page-btn:hover,
.page-btn.active{

background:#0B2D5C;

color:#fff;

border-color:#0B2D5C;

}

@media(max-width:992px){

.catalog-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.catalog-grid{

grid-template-columns:1fr;

}

.catalog-buttons{

flex-direction:column;

}

}

/*==================================================
TIRE SIZES PAGE
==================================================*/

.tire-sizes-search{

padding:50px 0;

background:#fff;

}

.size-search-box{

display:flex;

max-width:600px;

margin:0 auto;

gap:0;

}

.size-search-box input{

flex:1;

padding:16px 20px;

border:2px solid #ddd;

border-radius:10px 0 0 10px;

font-size:16px;

outline:none;

}

.size-search-box input:focus{

border-color:#0B2D5C;

}

.size-search-box button{

padding:16px 30px;

background:#0B2D5C;

color:#fff;

border:none;

border-radius:0 10px 10px 0;

font-size:16px;

font-weight:700;

cursor:pointer;

}

.tire-sizes-categories{

padding:80px 0;

background:#f8f9fb;

}

.tire-sizes-categories h2{

font-size:32px;

color:#0B2D5C;

margin-bottom:15px;

margin-top:50px;

}

.tire-sizes-categories h2:first-child{

margin-top:0;

}

.size-intro{

color:#666;

font-size:16px;

margin-bottom:25px;

}

.size-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

margin-bottom:20px;

}

.size-box{

background:#fff;

padding:18px;

border-radius:10px;

text-align:center;

box-shadow:0 2px 10px rgba(0,0,0,.05);

transition:.3s;

}

.size-box:hover{

transform:translateY(-3px);

box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.size-value{

display:block;

font-size:20px;

font-weight:700;

color:#0B2D5C;

margin-bottom:5px;

}

.size-type{

font-size:12px;

color:#888;

text-transform:uppercase;

letter-spacing:1px;

}

.size-category-link{

display:inline-block;

color:#F28C28;

font-weight:700;

text-decoration:none;

margin-bottom:30px;

}

.size-category-link:hover{

color:#e67e22;

}

.popular-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:30px;

}

.popular-box{

background:#fff;

padding:25px;

border-radius:12px;

text-align:center;

box-shadow:0 3px 15px rgba(0,0,0,.06);

}

.popular-size{

display:block;

font-size:24px;

font-weight:800;

color:#0B2D5C;

margin-bottom:8px;

}

.popular-label{

display:block;

font-size:13px;

color:#888;

margin-bottom:15px;

}

.popular-box a{

display:inline-block;

padding:8px 20px;

background:#1D9448;

color:#fff;

border-radius:6px;

text-decoration:none;

font-size:13px;

font-weight:600;

}

.tire-size-info{

padding:80px 0;

background:#fff;

}

.size-info-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:30px;

}

.size-info-card{

background:#f8f9fb;

padding:30px;

border-radius:12px;

}

.size-info-card h3{

font-size:24px;

color:#F28C28;

margin-bottom:15px;

}

.size-info-card ul{

list-style:none;

padding:0;

}

.size-info-card li{

padding:8px 0;

font-size:15px;

color:#555;

border-bottom:1px solid #eee;

}

@media(max-width:992px){

.size-grid{

grid-template-columns:repeat(3,1fr);

}

.popular-grid{

grid-template-columns:repeat(2,1fr);

}

.size-info-grid{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.size-grid{

grid-template-columns:repeat(2,1fr);

}

.popular-grid{

grid-template-columns:1fr;

}

}

/*==================================================
QUALITY DETAILS SECTION
==================================================*/

.quality-details{
padding:50px 0;
background:#f8f9fb;
border-top:1px solid #e8edf3;
border-bottom:1px solid #e8edf3;
}

.quality-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:25px;
}

.quality-card{
background:#fff;
border-radius:10px;
padding:25px 20px;
text-align:center;
border:1px solid #e8edf3;
transition:.3s;
}

.quality-card:hover{
transform:translateY(-3px);
box-shadow:0 6px 20px rgba(0,0,0,.06);
border-color:#1D9448;
}

.quality-icon{
font-size:30px;
margin-bottom:10px;
}

.quality-card h4{
font-size:15px;
color:#0B2D5C;
margin-bottom:8px;
font-weight:700;
}

.quality-card p{
font-size:13px;
color:#666;
line-height:1.6;
}

/*==================================================
CLICKABLE TIRE SIZE LINKS
==================================================*/

a.brand-box.size-link{
cursor:pointer;
text-decoration:none;
color:#0B2D5C;
transition:.3s;
}

a.brand-box.size-link:hover{
background:#0B2D5C;
color:#fff;
transform:translateY(-3px);
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

@media(max-width:768px){
.quality-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:480px){
.quality-grid{
grid-template-columns:1fr;
}
}

/*==================================================
RELATED LINKS SECTION
==================================================*/

.related-links-section{
padding:40px 0;
background:#f8f9fb;
border-top:1px solid #e8edf3;
}

.related-links-section h2{
font-size:22px;
color:#0B2D5C;
font-weight:700;
margin-bottom:20px;
}

.related-links-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.related-links-card{
background:#fff;
border-radius:10px;
padding:20px;
border:1px solid #e8edf3;
}

.related-links-card h3{
font-size:15px;
color:#0B2D5C;
font-weight:700;
margin-bottom:10px;
padding-bottom:8px;
border-bottom:2px solid #1D9448;
}

.related-links-card ul{
list-style:none;
padding:0;
}

.related-links-card li{
padding:5px 0;
}

.related-links-card a{
color:#555;
text-decoration:none;
font-size:13px;
transition:.3s;
}

.related-links-card a:hover{
color:#1D9448;
}

@media(max-width:768px){
.related-links-grid{grid-template-columns:1fr;}
}