/* ==========================================
RESET & GLOBAL
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#ffffff;
color:#222;
line-height:1.7;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
transition:.3s ease;
}

ul{
padding:0;
margin:0;
list-style:none;
}

section{
position:relative;
overflow:hidden;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}

/* ==========================================
TYPOGRAPHY
========================================== */

.section-title{
font-size:42px;
font-weight:800;
color:#082B6F;
text-align:center;
margin-bottom:15px;
line-height:1.2;
}

.section-subtitle{
max-width:720px;
margin:0 auto 55px;
text-align:center;
color:#666;
font-size:16px;
line-height:1.8;
}

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
background:#082B6F;
color:#fff;
padding:14px 30px;
border:none;
border-radius:12px;
font-weight:700;
transition:.35s ease;
cursor:pointer;
}

.btn:hover{
background:#1677F2;
color:#fff;
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(22,119,242,.25);
}

/* ==========================================
TOPBAR
========================================== */

.topbar{
background:#082B6F;
padding:10px 0;
color:#fff;
font-size:14px;
}

.topbar-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.topbar-left,
.topbar-right{
display:flex;
align-items:center;
gap:22px;
}

/* ==========================================
HEADER
========================================== */

.main-header{
background:#fff;
position:sticky;
top:0;
z-index:999;
box-shadow:0 4px 20px rgba(0,0,0,.06);
transition:transform .35s ease;
}

.main-header.header-hidden{
transform:translateY(-100%);
}


.navbar{
padding:8px 0 !important;
}

.navbar-brand{
padding:0;
margin:0;
}

.logo-img{
width:240px;
height:auto;
}

.search-box{
width:240px;
margin:0 25px;
}

.search-box input{
border:1px solid #e5e5e5;
border-radius:50px;
padding:12px 18px;
font-size:14px;
}

.search-box input:focus{
box-shadow:none;
border-color:#1677F2;
}

.navbar-nav{
gap:4px;
}

.navbar-nav .nav-link{
font-size:16px;
font-weight:600;
color:#222 !important;
padding:10px 14px !important;
}

.navbar-nav .nav-link:hover{
color:#1677F2 !important;
}

.btn-login{
background:#1677F2;
color:#fff !important;
padding:11px 22px !important;
border-radius:10px;
}

.btn-login:hover{
background:#082B6F;
}

.cart-link{
font-weight:700 !important;
}

.dropdown-menu{
border:none;
border-radius:14px;
padding:10px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.dropdown-item{
padding:12px 16px;
border-radius:8px;
font-weight:500;
}

.dropdown-item:hover{
background:#1677F2;
color:#fff;
}

/* ==========================================
HERO BANNER
========================================== */

.hero-banner{
width:100%;
overflow:hidden;
}

.hero-banner img{
width:100%;
display:block;
}

/* ==========================================
WHY CHOOSE US
========================================== */

.why-us{
padding:70px 0;
background:#fff;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.why-card{
background:linear-gradient(
135deg,
#082B6F,
#1677F2
);
padding:35px 25px;
border-radius:22px;
text-align:center;
color:#fff;
box-shadow:0 15px 40px rgba(22,119,242,.18);
transition:.35s ease;
}

.why-card:hover{
transform:translateY(-10px);
}

.why-card h3{
font-size:20px;
font-weight:700;
margin-bottom:10px;
}

.why-card p{
font-size:14px;
line-height:1.7;
opacity:.95;
}

/* ==========================================
FEATURED PRODUCTS
========================================== */

.featured-products{
padding:30px 0 70px;
background:#f6f9ff;
}

.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.product-card{
background:#fff;
border-radius:24px;
overflow:hidden;
position:relative;
border:1px solid #e9eefb;
box-shadow:0 10px 35px rgba(0,0,0,.06);
transition:.35s ease;
}

.product-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,.12);
border-color:#1677F2;
}

.product-badge{
position:absolute;
top:15px;
left:15px;
background:#082B6F;
color:#fff;
padding:8px 14px;
font-size:12px;
font-weight:700;
border-radius:50px;
z-index:5;
}



.product-content{
padding:18px;
text-align:center;
}

.product-content h3{
font-size:20px;
font-weight:700;
color:#082B6F;
margin-bottom:8px;
min-height:auto;
}

.product-rating{
font-size:13px;
margin-bottom:12px;
color:#f5a623;
}

.product-rating span{
font-size:13px;
color:#777;
margin-left:4px;
}


.product-price{
margin-bottom:20px;
}

.product-price del{
color:#999;
margin-right:8px;
font-size:14px;
}

.product-price span{
font-size:30px;
font-weight:700;
color:#1677F2;
}

/* ==========================================
ABOUT HOME
========================================== */

.about-home{
padding:50px 0 30px;
background:#fff;
}

.about-home-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.about-tag{
display:inline-block;
background:#eaf2ff;
color:#1677F2;
padding:8px 18px;
border-radius:50px;
font-size:13px;
font-weight:700;
letter-spacing:.5px;
margin-bottom:20px;
}

.about-content h2{
font-size:48px;
font-weight:800;
line-height:1.2;
color:#082B6F;
margin-bottom:20px;
}

.about-content p{
font-size:17px;
color:#666;
line-height:1.9;
margin-bottom:25px;
}

.about-list{
margin-bottom:30px;
}

.about-list li{
font-size:16px;
font-weight:600;
color:#082B6F;
margin-bottom:12px;
}

.about-image img{
border-radius:24px;
box-shadow:0 25px 60px rgba(0,0,0,.12);
transition:.4s ease;
}

.about-image img:hover{
transform:translateY(-8px);
}

/* ==========================================
SHOP BY CATEGORY
========================================== */

.categories{
padding:20px 0 40px;
background:#fff;
}

.category-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:30px;
}

.category-card{
position:relative;
height:320px;
overflow:hidden;
border-radius:24px;
box-shadow:0 15px 40px rgba(0,0,0,.10);
transition:.35s ease;
}

.category-card:hover{
transform:translateY(-10px);
}

.category-card img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s ease;
}

.category-card:hover img{
transform:scale(1.08);
}

.category-overlay{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
justify-content:center;
padding:30px;
background:linear-gradient(
to top,
rgba(8,43,111,.92),
rgba(8,43,111,.10)
);
}

.category-overlay h3{
font-size:28px;
font-weight:700;
color:#fff;
margin:0;
text-align:center;
}

/* ==========================================
HOW IT WORKS
========================================== */

.how-it-works{
padding:50px 0;
background:#f6f9ff;
}

.steps-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.step-card{
background:#fff;
padding:40px 30px;
border-radius:24px;
text-align:center;
border-top:5px solid #1677F2;
box-shadow:0 12px 35px rgba(0,0,0,.06);
transition:.35s ease;
}

.step-card:hover{
transform:translateY(-8px);
}

.step-card h3{
font-size:24px;
font-weight:700;
color:#082B6F;
margin-bottom:15px;
}

.step-card p{
color:#666;
line-height:1.8;
}

/* ==========================================
TRUST SECTION
========================================== */

.trust-section{
padding:90px 0;
background:linear-gradient(
135deg,
#082B6F,
#1677F2
);
color:#fff;
}

.trust-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
text-align:center;
}

.trust-grid h2{
font-size:52px;
font-weight:800;
margin-bottom:10px;
}

.trust-grid p{
font-size:17px;
opacity:.95;
margin:0;
}

/* ==========================================
REVIEWS
========================================== */

.reviews-section{
padding:90px 0;
background:#fff;
}

.reviews-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.review-card{
background:#fff;
padding:35px;
border-radius:24px;
border-top:5px solid #1677F2;
box-shadow:0 12px 35px rgba(0,0,0,.08);
text-align:center;
transition:.35s ease;
}

.review-card:hover{
transform:translateY(-8px);
}

.stars{
font-size:24px;
color:#ffb400;
margin-bottom:15px;
}

.review-card p{
color:#666;
line-height:1.8;
}

.review-card h4{
margin-top:18px;
color:#082B6F;
font-weight:700;
}

/* ==========================================
NEWSLETTER
========================================== */

.newsletter-section{
padding:90px 0;
background:#fff;
text-align:center;
}

.newsletter-section h2{
font-size:44px;
font-weight:800;
color:#082B6F;
margin-bottom:15px;
}

.newsletter-section p{
color:#666;
margin-bottom:30px;
}

.newsletter-form{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.newsletter-form input{
width:460px;
max-width:100%;
padding:16px 22px;
border:1px solid #d9d9d9;
border-radius:50px;
outline:none;
font-size:15px;
}

.newsletter-form input:focus{
border-color:#1677F2;
box-shadow:none;
}

/* ==========================================
CTA SECTION
========================================== */

.cta-section{
padding:90px 20px;
text-align:center;
background:linear-gradient(
135deg,
#082B6F,
#1677F2
);
color:#fff;
}

.cta-section h2{
font-size:52px;
font-weight:800;
margin-bottom:20px;
}

.cta-section p{
font-size:20px;
max-width:800px;
margin:0 auto 30px;
opacity:.95;
}

.cta-section .btn{
background:#fff;
color:#082B6F;
font-weight:700;
}

.cta-section .btn:hover{
background:#f5f5f5;
color:#082B6F;
}

/* ==========================================
PREMIUM FAQ
========================================== */

.faq-section{
padding:90px 0;
background:#0F4DB7;
}

.faq-section .section-title{
color:#fff;
margin-bottom:10px;
}

.faq-subtitle{
text-align:center;
color:rgba(255,255,255,.80);
margin-bottom:45px;
font-size:15px;
}

.faq-wrapper{
max-width:900px;
margin:auto;
}

.faq-item{
background:#082B6F;
border-radius:18px;
margin-bottom:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:.3s ease;
}

.faq-item:hover{
transform:translateY(-3px);
}

.faq-question{
width:100%;
background:none;
border:none;
padding:22px 25px;
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
font-size:18px;
font-weight:600;
cursor:pointer;
text-align:left;
}

.faq-question span{
font-size:24px;
font-weight:700;
}

.faq-answer{
display:none;
padding:0 25px 22px;
}

.faq-answer p{
margin:0;
line-height:1.8;
color:rgba(255,255,255,.85);
}

.faq-item.active .faq-answer{
display:block;
}

/* ==========================================
PREMIUM FOOTER
========================================== */

.footer-main{
background:#061c4f;
padding:80px 0 30px;
color:#fff;
}

.footer-top{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1.5fr;
gap:50px;
margin-bottom:50px;
}

.footer-logo{
width:240px;
max-width:100%;
margin-bottom:25px;
}

.footer-about p{
color:rgba(255,255,255,.80);
line-height:1.8;
margin-top:20px;
margin-bottom:25px;
}

.footer-about h4{
font-size:22px;
font-weight:700;
margin-bottom:20px;
color:#fff;
}

.footer-about{
max-width:500px;
}

.footer-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.footer-badges span{
background:rgba(255,255,255,.08);
padding:10px 14px;
border-radius:50px;
font-size:13px;
}

.footer-links h4,
.footer-contact h4{
font-size:22px;
font-weight:700;
margin-bottom:20px;
}

.footer-links ul,
.footer-contact ul{
list-style:none;
padding:0;
margin:0;
}

.footer-links li,
.footer-contact li{
margin-bottom:12px;
}

.footer-links a{
color:rgba(255,255,255,.80);
text-decoration:none;
transition:.3s ease;
}

.footer-links a:hover{
color:#fff;
padding-left:5px;
}

.footer-contact li{
color:rgba(255,255,255,.80);
}

.footer-trust{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
text-align:center;
padding:25px 0;
margin-bottom:25px;
border-top:1px solid rgba(255,255,255,.10);
border-bottom:1px solid rgba(255,255,255,.10);
}

.trust-item{
font-weight:600;
}



.footer-bottom p{
margin:0;
color:rgba(255,255,255,.70);
}

.footer-bottom-right{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.footer-bottom-right a{
color:rgba(255,255,255,.75);
text-decoration:none;
}

.footer-bottom-right a:hover{
color:#fff;
}

/* ==========================================
TABLET RESPONSIVE
========================================== */

@media(max-width:991px){

.topbar-inner{
flex-direction:column;
gap:10px;
}

.topbar-left,
.topbar-right{
justify-content:center;
flex-wrap:wrap;
}

.search-box{
width:100%;
margin:15px 0;
}

.logo-img{
width:210px;
}

.why-grid,
.product-grid,
.category-grid,
.trust-grid{
grid-template-columns:repeat(2,1fr);
}

.steps-grid,
.reviews-grid{
grid-template-columns:1fr;
}

.about-home-grid{
grid-template-columns:1fr;
gap:40px;
}

.footer-top{
grid-template-columns:1fr 1fr;
}

.footer-trust{
grid-template-columns:1fr 1fr;
}

.section-title{
font-size:36px;
}

.about-content h2{
font-size:38px;
}

.newsletter-section h2{
font-size:36px;
}

.cta-section h2{
font-size:40px;
}

}

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

@media(max-width:576px){

.container{
width:92%;
}

.logo-img{
width:180px;
}

.section-title{
font-size:30px;
}

.section-subtitle{
font-size:15px;
}

.about-content h2{
font-size:30px;
}

.newsletter-section h2{
font-size:30px;
}

.cta-section h2{
font-size:32px;
}

.cta-section p{
font-size:17px;
}

.product-card img{
width:100%;
height:260px;
object-fit:contain;
padding:15px;
background:#fff;
}

.why-grid,
.product-grid,
.category-grid,
.trust-grid,
.reviews-grid,
.footer-top,
.footer-trust{
grid-template-columns:1fr;
}

.steps-grid{
grid-template-columns:1fr;
}

.footer-main{
text-align:center;
}

.footer-logo{
margin:auto auto 25px;
display:block;
}

.footer-badges{
justify-content:center;
}

.footer-bottom{
flex-direction:column;
text-align:center;
}

.footer-bottom-right{
justify-content:center;
}

.faq-question{
font-size:16px;
padding:18px 20px;
}

}

/* ==========================================
FINAL CLEANUP
========================================== */

.why-card,
.product-card,
.category-card,
.step-card,
.review-card,
.faq-item{
will-change:transform;
}

.featured-products,
.categories,
.about-home,
.how-it-works,
.reviews-section,
.newsletter-section{
overflow:hidden;
}

::selection{
background:#1677F2;
color:#fff;
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
flex-wrap:wrap;
}

.footer-bottom-center{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}

.footer-bottom-logo{
max-width:260px;
width:100%;
height:auto;
filter:drop-shadow(0 0 10px rgba(255,255,255,.15));
}

@media(max-width:576px){

.footer-bottom{
flex-direction:column;
text-align:center;
}

.footer-bottom-logo{
height:45px;
margin:10px 0;
}
}
/* ==========================================
STORE PAGE
========================================== */

.store-hero{
padding:18px 0;
background:linear-gradient(135deg,#082B6F,#1677F2);
text-align:center;
color:#fff;
}

.store-hero h1{
font-size:52px;
font-weight:800;
margin-bottom:15px;
}

.store-hero p{
max-width:750px;
margin:auto;
font-size:18px;
opacity:.95;
}

.store-filters{
padding:40px 0;
background:#fff;
}

.store-search-form{
display:flex;
justify-content:center;
gap:10px;
}

.store-search-form input{
width:500px;
max-width:100%;
padding:15px 22px;
border:1px solid #d9d9d9;
border-radius:50px;
outline:none;
font-size:15px;
}

.store-search-form input:focus{
border-color:#1677F2;
}



.store-empty{
grid-column:1/-1;
background:#fff;
padding:70px 30px;
border-radius:24px;
text-align:center;
border:1px solid #e9eefb;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.store-empty h3{
font-size:32px;
font-weight:700;
color:#082B6F;
margin-bottom:15px;
}

.store-empty p{
color:#666;
margin-bottom:25px;
}

.product-content .product-rating{
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#1677F2;
margin-bottom:10px;
}

.product-content .product-price{
margin-top:5px;
margin-bottom:15px;
}

.product-content .product-price span{
font-size:28px;
font-weight:800;
color:#1677F2;
}

.store-search-form .btn{
border:none;
padding:14px 25px;
border-radius:12px;
}

.store-layout{
display:grid;
grid-template-columns:280px 1fr;
gap:40px;
align-items:start;
}

.store-sidebar{
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
position:sticky;
top:120px;
}

.store-sidebar h3{
font-size:24px;
font-weight:700;
margin-bottom:20px;
color:#082B6F;
}

.store-sidebar a{
display:block;
padding:12px 15px;
margin-bottom:10px;
background:#f5f7fb;
border-radius:10px;
color:#082B6F;
font-weight:600;
}

.store-sidebar a.active,
.store-sidebar a:hover{
background:#1677F2;
color:#fff;
}

.store-products{
width:100%;
}

.product-category{
font-size:13px;
font-weight:700;
color:#1677F2;
text-transform:none;
letter-spacing:.5px;
margin-bottom:8px;
}

.product-price span{
display:block;
font-size:28px;
font-weight:800;
white-space:nowrap;
color:#1677F2;
}

@media(max-width:768px){


.store-hero h1{
font-size:38px;
}

.store-hero p{
font-size:16px;
}

.store-search-form{
flex-direction:column;
align-items:center;
}

.store-search-form input{
width:100%;
}

.category-filter{
gap:10px;
}

.category-filter a{
padding:10px 18px;
font-size:14px;
}

}

@media(max-width:991px){

.store-layout{
grid-template-columns:1fr;
}

.store-sidebar{
position:relative;
top:0;
}

.product-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:576px){

.product-grid{
grid-template-columns:1fr;
}

}

#loadMoreBtn{
background:#061c4f;
padding:14px 35px;
border-radius:12px;
font-weight:700;
}

#loadMoreBtn:hover{
background:#082B6F;
}

/* ============================================================
   HEALER PHARMA - DYNAMIC CATEGORY PAGE
   Page: category.php
============================================================ */

.hp-category-page {
    overflow: hidden;
    background: #ffffff;
}


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

.hp-category-hero {
    position: relative;
    padding: 94px 0 104px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(13, 110, 253, 0.12) 0,
            rgba(13, 110, 253, 0) 34%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(18, 181, 151, 0.11) 0,
            rgba(18, 181, 151, 0) 32%
        ),
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 48%,
            #f3fbf9 100%
        );
}

.hp-category-hero::before {
    content: "";
    position: absolute;
    top: -230px;
    right: -150px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(13, 110, 253, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.hp-category-hero::after {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -300px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(18, 181, 151, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.hp-category-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hp-category-glow-left {
    top: 64px;
    left: 7%;
    width: 12px;
    height: 12px;
    background: rgba(13, 110, 253, 0.32);
    box-shadow:
        0 0 0 12px rgba(13, 110, 253, 0.05),
        0 0 0 26px rgba(13, 110, 253, 0.025);
}

.hp-category-glow-right {
    right: 8%;
    bottom: 72px;
    width: 11px;
    height: 11px;
    background: rgba(18, 181, 151, 0.34);
    box-shadow:
        0 0 0 12px rgba(18, 181, 151, 0.05),
        0 0 0 26px rgba(18, 181, 151, 0.025);
}

.hp-category-hero .container {
    position: relative;
    z-index: 2;
}

.hp-category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: #7b8da0;
    font-size: 12px;
    flex-wrap: wrap;
}

.hp-category-breadcrumb a {
    color: #54708d;
    text-decoration: none;
    transition: color 0.25s ease;
}

.hp-category-breadcrumb a:hover {
    color: #0d6efd;
}

.hp-category-breadcrumb i {
    color: #a9b7c4;
    font-size: 8px;
}

.hp-category-breadcrumb span {
    color: #0d6efd;
    font-weight: 700;
}

.hp-category-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 8px 15px 8px 8px;
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #235a94;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    box-shadow: 0 12px 30px rgba(28, 66, 105, 0.06);
    backdrop-filter: blur(8px);
}

.hp-category-eyebrow-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #0d6efd,
        #2499d8
    );
    color: #ffffff;
    font-size: 12px;
}

.hp-category-hero h1 {
    margin: 0 0 20px;
    color: #17324f;
    font-size: clamp(42px, 5.7vw, 68px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.043em;
}

.hp-category-hero-copy > p {
    max-width: 720px;
    margin: 0;
    color: #62758a;
    font-size: 17px;
    line-height: 1.82;
}

.hp-category-hero-copy.text-center > p {
    margin-left: auto;
    margin-right: auto;
}

.hp-category-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.hp-category-hero-copy.text-center
.hp-category-hero-meta {
    justify-content: center;
}

.hp-category-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e1eaf3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    color: #4e6984;
    font-size: 12px;
    font-weight: 650;
    box-shadow: 0 8px 22px rgba(30, 66, 102, 0.05);
}

.hp-category-hero-meta i {
    color: #0d6efd;
}

.hp-category-hero-visual {
    position: relative;
    max-width: 470px;
    margin-left: auto;
}

.hp-category-hero-image {
    position: relative;
    height: 390px;
    overflow: hidden;
    border: 8px solid rgba(255, 255, 255, 0.88);
    border-radius: 28px;
    background: #edf4fa;
    box-shadow: 0 28px 70px rgba(25, 61, 98, 0.16);
}

.hp-category-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(9, 31, 54, 0.01) 35%,
        rgba(9, 31, 54, 0.18) 100%
    );
}

.hp-category-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hp-category-visual-badge {
    position: absolute;
    left: -24px;
    bottom: 30px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border: 1px solid #e2ebf3;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #274d70;
    font-size: 12px;
    font-weight: 750;
    box-shadow: 0 16px 38px rgba(24, 57, 91, 0.14);
    backdrop-filter: blur(8px);
}

.hp-category-visual-badge i {
    color: #0d6efd;
}


/* ============================================================
   LIBRARY
============================================================ */

.hp-category-library {
    padding: 100px 0 105px;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdff 100%
    );
}

.hp-category-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 48px;
}

.hp-category-section-kicker {
    display: block;
    margin-bottom: 10px;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hp-category-section-head h2 {
    margin: 0 0 10px;
    color: #183450;
    font-size: clamp(31px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.hp-category-section-head h2 span {
    color: #0d6efd;
}

.hp-category-section-head p {
    margin: 0;
    color: #6b7d8f;
    font-size: 15px;
    line-height: 1.7;
}

.hp-category-all-topics-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 11px 16px;
    border: 1px solid #dce7f1;
    border-radius: 9px;
    background: #ffffff;
    color: #315776;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(28, 64, 100, 0.05);
    transition:
        transform 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.hp-category-all-topics-link:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.25);
    color: #0d6efd;
    box-shadow: 0 12px 28px rgba(28, 64, 100, 0.09);
}


/* ============================================================
   POST CARDS
============================================================ */

.hp-category-post-grid {
    align-items: stretch;
}

.hp-category-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e3ebf3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(27, 58, 91, 0.065);
    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease,
        border-color 0.32s ease;
}

.hp-category-post-card:hover {
    transform: translateY(-8px);
    border-color: rgba(13, 110, 253, 0.20);
    box-shadow: 0 24px 56px rgba(27, 58, 91, 0.13);
}

.hp-category-post-media {
    position: relative;
    display: block;
    height: 235px;
    overflow: hidden;
    background: #edf4fa;
}

.hp-category-post-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.hp-category-post-card:hover
.hp-category-post-media img {
    transform: scale(1.065);
}

.hp-category-post-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 30, 51, 0.02) 20%,
        rgba(10, 30, 51, 0.40) 100%
    );
}

.hp-category-featured-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #315776;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(16, 40, 65, 0.10);
    backdrop-filter: blur(8px);
}

.hp-category-featured-badge i {
    color: #f2a900;
}

.hp-category-post-open {
    position: absolute;
    right: 17px;
    bottom: 17px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #0d6efd;
    font-size: 13px;
    box-shadow: 0 10px 25px rgba(15, 39, 63, 0.16);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.hp-category-post-card:hover
.hp-category-post-open {
    transform: translateX(3px);
    background: #0d6efd;
    color: #ffffff;
}

.hp-category-post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px 26px 24px;
}

.hp-category-post-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hp-category-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8191a1;
    font-size: 11px;
    font-weight: 600;
}

.hp-category-post-meta i {
    color: #0d6efd;
    font-size: 10px;
}

.hp-category-post-body h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.018em;
}

.hp-category-post-body h3 a {
    color: #1c3854;
    text-decoration: none;
    transition: color 0.25s ease;
}

.hp-category-post-body h3 a:hover {
    color: #0d6efd;
}

.hp-category-post-body > p {
    margin: 0 0 22px;
    color: #6d7e8f;
    font-size: 14px;
    line-height: 1.75;
}

.hp-category-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #edf2f6;
}

.hp-category-post-author {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.hp-category-author-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: #eef6ff;
    color: #0d6efd;
    font-size: 11px;
}

.hp-category-post-author > span:last-child {
    min-width: 0;
}

.hp-category-post-author small {
    display: block;
    margin-bottom: 1px;
    color: #94a1ae;
    font-size: 9px;
    line-height: 1.2;
}

.hp-category-post-author strong {
    display: block;
    overflow: hidden;
    color: #405f7b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hp-category-read-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.hp-category-read-link i {
    font-size: 10px;
    transition: transform 0.25s ease;
}

.hp-category-read-link:hover {
    color: #0b5ed7;
}

.hp-category-read-link:hover i {
    transform: translateX(4px);
}


/* ============================================================
   EMPTY / ERROR / NOT FOUND STATES
============================================================ */

.hp-category-empty,
.hp-category-state-card {
    max-width: 740px;
    margin: 0 auto;
    padding: 58px 34px;
    text-align: center;
    border: 1px solid #e3ebf3;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(27, 58, 91, 0.075);
}

.hp-category-empty-icon,
.hp-category-state-icon {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: #eef6ff;
    color: #0d6efd;
    font-size: 27px;
}

.hp-category-empty h3,
.hp-category-state-card h1 {
    margin: 0 0 12px;
    color: #1c3854;
    font-weight: 800;
    line-height: 1.25;
}

.hp-category-empty h3 {
    font-size: 25px;
}

.hp-category-state-card h1 {
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.025em;
}

.hp-category-empty p,
.hp-category-state-card p {
    max-width: 560px;
    margin: 0 auto 24px;
    color: #6d7e8f;
    line-height: 1.75;
}

.hp-category-state-section {
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 90px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(13, 110, 253, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(18, 181, 151, 0.09),
            transparent 30%
        ),
        #f8fbfe;
}

.hp-category-state-kicker {
    display: block;
    margin-bottom: 9px;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hp-category-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hp-category-state-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 17px;
    border: 1px solid #dce7f1;
    border-radius: 8px;
    background: #ffffff;
    color: #315776;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.hp-category-state-link:hover {
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.25);
}


/* ============================================================
   PAGINATION
============================================================ */

.hp-category-pagination-wrap {
    margin-top: 54px;
}

.hp-category-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.hp-category-pagination a,
.hp-category-pagination span.is-active {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid #dfe8f1;
    border-radius: 10px;
    background: #ffffff;
    color: #496783;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(27, 58, 91, 0.04);
    transition:
        transform 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.hp-category-pagination a:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.24);
    color: #0d6efd;
}

.hp-category-pagination span.is-active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #ffffff;
}

.hp-category-page-dots {
    padding: 0 3px;
    color: #94a2b0;
    font-size: 13px;
}

.hp-category-page-arrow {
    font-size: 11px !important;
}


/* ============================================================
   EDUCATIONAL NOTICE
============================================================ */

.hp-category-notice-section {
    padding: 0 0 105px;
    background: #fbfdff;
}

.hp-category-notice {
    position: relative;
    overflow: hidden;
    padding: 36px 40px;
    border: 1px solid #dce8f2;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(13, 110, 253, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f6faff 0%,
            #f3fbf9 100%
        );
}

.hp-category-notice::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -90px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(13, 110, 253, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.hp-category-notice-icon {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #ffffff;
    color: #0d6efd;
    font-size: 26px;
    box-shadow: 0 13px 32px rgba(29, 68, 107, 0.10);
}

.hp-category-notice-kicker {
    display: block;
    margin-bottom: 6px;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hp-category-notice h2 {
    margin: 0 0 8px;
    color: #1d3955;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.3;
}

.hp-category-notice p {
    max-width: 820px;
    margin: 0;
    color: #6b7d8f;
    font-size: 14px;
    line-height: 1.72;
}

.hp-category-notice-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-radius: 9px;
    background: #ffffff;
    color: #0d6efd;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(29, 68, 107, 0.06);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.hp-category-notice-link:hover {
    transform: translateY(-2px);
    color: #0d6efd;
    box-shadow: 0 12px 28px rgba(29, 68, 107, 0.11);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199.98px) {

    .hp-category-hero {
        padding: 86px 0 94px;
    }

    .hp-category-hero-image {
        height: 360px;
    }

    .hp-category-post-media {
        height: 220px;
    }

}


@media (max-width: 991.98px) {

    .hp-category-hero {
        padding: 76px 0 84px;
    }

    .hp-category-hero-visual {
        max-width: 620px;
        margin: 10px auto 0;
    }

    .hp-category-hero-image {
        height: 390px;
    }

    .hp-category-visual-badge {
        left: 20px;
    }

    .hp-category-library {
        padding: 84px 0 88px;
    }

    .hp-category-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .hp-category-notice {
        padding: 34px;
        text-align: center;
    }

    .hp-category-notice-icon {
        margin: 0 auto;
    }

    .hp-category-notice p {
        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 767.98px) {

    .hp-category-hero {
        padding: 64px 0 72px;
    }

    .hp-category-hero h1 {
        font-size: clamp(38px, 12vw, 52px);
    }

    .hp-category-hero-copy > p {
        font-size: 16px;
        line-height: 1.72;
    }

    .hp-category-hero-image {
        height: 315px;
        border-width: 6px;
        border-radius: 22px;
    }

    .hp-category-library {
        padding: 72px 0 76px;
    }

    .hp-category-section-head {
        margin-bottom: 38px;
    }

    .hp-category-post-media {
        height: 225px;
    }

    .hp-category-post-body {
        padding: 23px 22px 22px;
    }

    .hp-category-post-body h3 {
        font-size: 21px;
    }

    .hp-category-notice-section {
        padding-bottom: 78px;
    }

    .hp-category-notice {
        padding: 30px 23px;
        border-radius: 18px;
    }

    .hp-category-state-section {
        min-height: 560px;
        padding: 70px 0;
    }

}


@media (max-width: 575.98px) {

    .hp-category-breadcrumb {
        font-size: 11px;
    }

    .hp-category-hero-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .hp-category-hero-meta span {
        width: 100%;
        justify-content: center;
    }

    .hp-category-hero-image {
        height: 260px;
    }

    .hp-category-visual-badge {
        left: 14px;
        right: 14px;
        bottom: 14px;
        justify-content: center;
    }

    .hp-category-post-media {
        height: 205px;
    }

    .hp-category-post-footer {
        align-items: flex-end;
    }

    .hp-category-post-author {
        max-width: 68%;
    }

    .hp-category-empty,
    .hp-category-state-card {
        padding: 44px 22px;
    }

    .hp-category-pagination {
        gap: 6px;
    }

    .hp-category-pagination a,
    .hp-category-pagination span.is-active {
        min-width: 38px;
        height: 38px;
    }

}