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

:root{

    --primary:#1f5b2e;
    --primary-dark:#12381e;
    --secondary:#d4af37;
    --secondary-light:#e6c14b;

    --text:#233223;
    --text-light:#647067;

    --bg:#f6f8f1;
    --white:#ffffff;
    --border:#e4e9df;

    --shadow-sm:0 4px 14px rgba(0,0,0,.05);
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --shadow-lg:0 18px 50px rgba(0,0,0,.12);

    --radius:16px;
    --radius-sm:10px;

    --container:1280px;

    --transition:.3s ease;
}

/* =========================================
RESET
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        'Segoe UI',
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:var(--bg);
    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;
}

a{
    text-decoration:none;
    transition:var(--transition);
}

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

ul{
    list-style:none;
}

.container{
    width:92%;
    max-width:var(--container);
    margin:0 auto;
}

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

.topbar{
    background:#0f341c;
    color:#ffffff;
    padding:9px 16px;
    font-size:13px;
    letter-spacing:.3px;
}

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

.topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.topbar a{
    color:#ffffff;
}

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

.site-header{
    position:sticky;
    top:0;
    z-index:99999;
    background:#ffffff;
    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.site-header.scrolled{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =========================================
NAVBAR
========================================= */

.navbar{
    background:var(--primary);
}

.navbar-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    min-height:86px;
}

.navbar-brand img{
    max-height:58px;
    width:auto;
}

.main-navigation{
    display:flex;
    align-items:center;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:24px;
}

.nav-menu a{
    position:relative;

    color:#ffffff;

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

    letter-spacing:.2px;
}

.nav-menu a::after{
    content:'';

    position:absolute;
    left:0;
    bottom:-7px;

    width:0;
    height:2px;

    background:var(--secondary);

    transition:var(--transition);
}

.nav-menu a:hover::after,
.nav-menu a.active::after{
    width:100%;
}

.nav-menu a:hover{
    color:#ffffff;
}

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

.mobile-toggle{
    display:none;

    border:none;
    background:transparent;

    color:#ffffff;

    font-size:28px;
    cursor:pointer;
}

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

.mobile-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:var(--transition);

    z-index:99998;

    backdrop-filter:blur(4px);
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}

.mobile-menu{
    position:fixed;

    top:0;
    right:-100%;

    width:340px;
    max-width:90%;

    height:100vh;

    background:#ffffff;

    z-index:99999;

    transition:var(--transition);

    overflow-y:auto;

    padding:28px;
}

.mobile-menu.active{
    right:0;
}

.mobile-menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:30px;
}

.mobile-close{
    border:none;
    background:transparent;

    font-size:28px;
    cursor:pointer;
}

.mobile-menu ul{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.mobile-menu a{
    color:var(--text);
    font-weight:700;
    font-size:16px;
}

body.menu-open{
    overflow:hidden;
}

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

.hero{
    position:relative;

    min-height:760px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            rgba(18,56,30,.75),
            rgba(18,56,30,.75)
        ),
        url('../images/placeholder-qurban.svg');

    background-size:cover;
    background-position:center;

    overflow:hidden;
}

.overlay{
    width:100%;
    padding:120px 0;

    text-align:center;
    color:#ffffff;
}

.overlay h1{
    max-width:980px;

    margin:0 auto 24px;

    font-size:64px;
    line-height:1.18;
    font-weight:800;

    text-shadow:
        0 2px 10px rgba(0,0,0,.2);
}

.overlay p{
    max-width:820px;

    margin:0 auto 36px;

    font-size:22px;
    line-height:1.9;
}

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

.btn,
.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;

    background:var(--primary);
    color:#ffffff;

    padding:14px 28px;

    border-radius:10px;

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

    cursor:pointer;

    transition:var(--transition);
}

.cta{
    background:var(--secondary);
    color:#173017;
}

.btn:hover,
.cta:hover{
    transform:translateY(-3px);
}

.btn:hover{
    background:var(--primary-dark);
}

.cta:hover{
    background:var(--secondary-light);
}

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

.section{
    padding:90px 0;
}

.alt{
    background:#edf3e5;
}

.title{
    text-align:center;

    font-size:44px;
    line-height:1.35;
    font-weight:800;

    color:#173017;

    margin-bottom:24px;
}

.center{
    max-width:920px;

    margin:0 auto;

    text-align:center;

    font-size:18px;
    line-height:1.9;

    color:var(--text-light);
}

/* =========================================
TRUSTBAR
========================================= */

.trustbar{
    background:#12361d;
    padding:28px 0;
}

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

.trust-item{
    text-align:center;
}

.trust-item h3{
    color:#f4d27a;
    font-size:34px;
    margin-bottom:6px;
    font-weight:800;
}

.trust-item p{
    color:#ffffff;
    font-size:14px;
}

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

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

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

/* =========================================
PRODUCT CARD
========================================= */

.product{
    background:#ffffff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    display:flex;
    flex-direction:column;

    height:100%;
}

.product:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.product img{
    width:100%;
    height:250px;
    object-fit:cover;

    transition:transform .5s ease;
}

.product:hover img{
    transform:scale(1.04);
}

.product-content{
    padding:24px;

    display:flex;
    flex-direction:column;
    flex:1;
}

.product-content h3{
    font-size:24px;
    line-height:1.4;

    color:var(--primary);

    margin-bottom:12px;
}

.product-content p{
    color:var(--text-light);

    font-size:15px;
    line-height:1.8;

    margin-bottom:18px;
}

.price{
    font-size:28px;
    color:#c62828;
    font-weight:800;

    margin-bottom:18px;
}

.product-content .btn{
    margin-top:auto;
}

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

.badge-wrap{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.badge{
    background:#ffffff;

    border-left:5px solid var(--secondary);

    border-radius:14px;

    padding:28px;

    box-shadow:var(--shadow-sm);
}

.badge h4{
    color:var(--primary);

    font-size:22px;

    margin-bottom:12px;
}

.badge p{
    font-size:15px;
    line-height:1.8;
}

/* =========================================
MINI HERO
========================================= */

.mini-hero{
    position:relative;

    background:
        linear-gradient(
            rgba(18,56,30,.78),
            rgba(18,56,30,.78)
        ),
        url('../images/placeholder-qurban.svg');

    background-size:cover;
    background-position:center;

    color:#ffffff;

    text-align:center;

    padding:110px 0;
}

.mini-hero h1{
    max-width:920px;

    margin:auto auto 22px;

    font-size:52px;
    line-height:1.35;

    text-shadow:
        0 2px 10px rgba(0,0,0,.2);
}

.mini-hero p{
    max-width:840px;

    margin:auto;

    font-size:20px;
    line-height:1.9;
}

/* =========================================
BREADCRUMB
========================================= */

.breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:30px;

    font-size:14px;
}

.breadcrumb a{
    color:var(--primary);
    font-weight:700;
}

.breadcrumb span{
    color:#777777;
}

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

.faq-wrap{
    max-width:950px;
    margin:auto;
}

.faq-item{
    background:#ffffff;

    border-radius:16px;

    padding:26px;

    margin-bottom:18px;

    box-shadow:var(--shadow-sm);
}

.faq-item h3{
    color:var(--primary);

    font-size:22px;

    margin-bottom:14px;
}

.faq-item p{
    line-height:1.9;
    color:#444444;
}

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

.related-links{
    background:#edf3e5;

    border-radius:18px;

    padding:36px;
}

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

.related-links a{
    color:var(--primary);
    font-weight:700;
}

.related-links a:hover{
    color:#b8860b;
}

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

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;

    margin-top:55px;
}

.pagination a{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:48px;
    height:48px;

    border-radius:12px;

    background:#ffffff;

    color:var(--primary);

    font-weight:700;

    box-shadow:var(--shadow-sm);
}

.pagination a.active,
.pagination a:hover{
    background:var(--secondary);
    color:#173017;

    transform:translateY(-2px);
}

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

.cta-section{
    position:relative;

    overflow:hidden;

    background:var(--primary);

    color:#ffffff;

    text-align:center;

    padding:100px 0;
}

.cta-section h2{
    font-size:44px;
    margin-bottom:18px;
}

.cta-section p{
    max-width:820px;

    margin:0 auto 30px;

    font-size:19px;
    line-height:1.9;
}

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

footer.footer{
    background:
        linear-gradient(
            135deg,
            #0f2d17,
            #184524,
            #0f2d17
        );

    color:#ffffff;

    padding:70px 0 24px;

    margin-top:70px;
}

footer.footer .footer-grid{
    display:grid;
    grid-template-columns:
        2fr 1.2fr 1.2fr 1.4fr;

    gap:44px;
}

footer.footer .footer-col h3{
    color:#f4d27a;

    font-size:20px;

    margin-bottom:16px;
}

footer.footer .footer-col p{
    font-size:14px;
    line-height:1.9;
}

footer.footer .footer-col ul li{
    display:flex;
    align-items:flex-start;
    gap:8px;

    margin-bottom:10px;
}

footer.footer .footer-col ul li::before{
    content:'•';
    color:#f4d27a;
}

footer.footer .footer-col a{
    color:#ffffff;
}

footer.footer .footer-col a:hover{
    color:#f4d27a;
}

footer.footer .footer-bottom{
    margin-top:40px;

    border-top:
        1px solid rgba(255,255,255,.1);

    padding-top:20px;

    text-align:center;
}

/* =========================================
FLOATING WHATSAPP COMPACT
========================================= */

.floating-wa{
    position:fixed;

    right:22px;

    bottom:50px;

    z-index:9999;

    display:flex;

    align-items:center;

    gap:12px;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #15803d
        );

    color:#ffffff;

    padding:
        12px 18px;

    border-radius:999px;

    box-shadow:
        0 14px 40px rgba(22,163,74,.22);

    transition:.28s ease;

    text-decoration:none;
}

.floating-wa:hover{
    transform:
        translateY(-3px);
}

.floating-wa-icon{
    width:42px;
    height:42px;

    border-radius:50%;

    background:
        rgba(255,255,255,.14);

    display:flex;

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

    font-size:20px;

    flex-shrink:0;
}

.floating-wa-text{
    display:flex;

    flex-direction:column;

    line-height:1.2;
}

.floating-wa-text strong{
    font-size:14px;

    font-weight:700;

    color:#ffffff;
}

.floating-wa-text span{
    display:none;
}

/* MOBILE */

@media(max-width:768px){

    .floating-wa{
        right:16px;

        bottom:78px;

        padding:
            11px 16px;
    }
}

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

@media(max-width:991px){

    .cards3,
    .cards4,
    .badge-wrap,
    .trust-grid{
        grid-template-columns:1fr 1fr;
    }

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

    .overlay h1{
        font-size:46px;
    }

    .mini-hero h1{
        font-size:40px;
    }

    .mobile-toggle{
        display:block;
    }

    .main-navigation{
        display:none;
    }
}

@media(max-width:768px){

    .section{
        padding:70px 0;
    }

    .container{
        width:94%;
    }

    .cards3,
    .cards4,
    .badge-wrap,
    .trust-grid,
    .related-links ul{
        grid-template-columns:1fr;
    }

    footer.footer .footer-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .overlay{
        padding:90px 0;
    }

    .overlay h1{
        font-size:34px;
    }

    .overlay p{
        font-size:17px;
    }

    .mini-hero{
        padding:80px 0;
    }

    .mini-hero h1{
        font-size:32px;
    }

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

    .title{
        font-size:30px;
    }

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

    .floating-wa{
        right:12px;
        bottom:12px;

        padding:12px 14px;
    }

    .floating-wa-icon{
        width:48px;
        height:48px;
        font-size:24px;
    }

    .floating-wa-text strong{
        font-size:13px;
    }

    .floating-wa-text span{
        font-size:11px;
    }

    .topbar-wrapper{
        flex-direction:column;
        text-align:center;
    }
}

/* =========================================
FOOTER COMPATIBILITY PATCH
OLD + NEW ARCHITECTURE
========================================= */

.site-footer{
    background:linear-gradient(
        135deg,
        #0f2d17,
        #184524,
        #0f2d17
    );

    color:#ffffff;

    margin-top:80px;
}

/* TOP */

.footer-top{
    padding:65px 0 40px;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        2fr
        1.2fr
        1.2fr
        1.4fr;

    gap:42px;
}

.footer-column{
    text-align:left;
}

.footer-title{
    font-size:20px;

    color:#f4d27a;

    margin-bottom:18px;

    font-weight:700;
}

.footer-description{
    color:#f1f1f1;

    line-height:1.9;

    font-size:14px;

    margin-bottom:18px;
}

/* LINKS */

.footer-links{
    list-style:none;

    margin:0;
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:#f1f1f1;

    font-size:14px;

    transition:.3s ease;
}

.footer-links a:hover{
    color:#f4d27a;
}

/* SOCIAL */

.footer-social{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.footer-social a{
    color:#f1f1f1;
    font-size:14px;
}

.footer-social a:hover{
    color:#f4d27a;
}

/* MIDDLE */

.footer-middle{
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);

    padding:45px 0;
}

.footer-middle-grid{
    display:grid;

    grid-template-columns:
        1.2fr
        1.2fr
        1fr;

    gap:42px;
}

.footer-middle ul,
.footer-contact ul,
.footer-trust ul{
    list-style:none;

    margin:0;
    padding:0;
}

.footer-middle li,
.footer-contact li,
.footer-trust li{
    margin-bottom:12px;

    color:#f1f1f1;

    line-height:1.8;

    font-size:14px;
}

.footer-middle a,
.footer-contact a{
    color:#f4d27a;
}

/* CTA */

.footer-cta p{
    color:#f1f1f1;

    line-height:1.9;

    margin-bottom:18px;

    font-size:14px;
}

.footer-wa-button{
    display:inline-flex;

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

    background:#25D366;

    color:#ffffff;

    padding:14px 22px;

    border-radius:10px;

    font-size:14px;

    font-weight:700;

    transition:.3s ease;
}

.footer-wa-button:hover{
    transform:translateY(-2px);

    background:#1ebe5d;
}

/* BOTTOM */

.footer-bottom{
    padding:24px 0;
}

.footer-bottom-wrapper{
    display:flex;

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

    gap:20px;

    flex-wrap:wrap;
}

.footer-bottom p{
    color:#f1f1f1;

    font-size:13px;
}

.footer-bottom-nav{
    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.footer-bottom-nav a{
    color:#f1f1f1;

    font-size:13px;
}

.footer-bottom-nav a:hover{
    color:#f4d27a;
}

/* REMOVE OLD STICKY CTA */

.sticky-mobile-cta{
    display:none !important;
}

/* RESPONSIVE */

@media(max-width:991px){

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

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

@media(max-width:768px){

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

    .footer-bottom-wrapper{
        flex-direction:column;

        text-align:center;
    }
}

/* =========================================
SKIP LINK
========================================= */

.skip-link{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.skip-link:focus{
    left:20px;
    top:20px;

    width:auto;
    height:auto;

    background:#ffffff;
    color:#000000;

    padding:12px 18px;

    border-radius:10px;

    z-index:9999999;

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

/* =========================================
ARTICLE / ABOUT PAGE LAYOUT
========================================= */

.article-layout{
    display:grid;

    grid-template-columns:
        minmax(0, 2fr)
        360px;

    gap:40px;

    align-items:start;
}

/* CONTENT */

.article-content{
    min-width:0;
}

/* IMAGE */

.article-thumbnail{
    margin-bottom:32px;

    border-radius:22px;

    overflow:hidden;

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

.article-thumbnail img{
    width:100%;

    height:auto;

    display:block;

    object-fit:cover;
}

/* BODY */

.article-body{
    color:#374151;

    line-height:1.95;

    font-size:16px;
}

.article-body h2{
    font-size:34px;

    line-height:1.3;

    margin:
        0 0 20px;

    color:#0f172a;

    font-weight:800;
}

.article-body h3{
    font-size:26px;

    margin:
        40px 0 18px;

    color:#0f172a;

    font-weight:700;
}

.article-body p{
    margin-bottom:22px;
}

.article-body ul{
    padding-left:22px;

    margin:
        18px 0 28px;
}

.article-body li{
    margin-bottom:12px;
}

/* SIDEBAR */

.article-sidebar{
    position:sticky;

    top:120px;
}

.sidebar-card{
    background:#ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:20px;

    padding:28px;

    margin-bottom:24px;

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

.sidebar-card h3{
    font-size:20px;

    margin-bottom:18px;

    color:#0f172a;

    font-weight:700;
}

.sidebar-card p{
    color:#4b5563;

    line-height:1.8;

    margin-bottom:18px;
}

.sidebar-links{
    list-style:none;

    padding:0;
    margin:0;
}

.sidebar-links li{
    margin-bottom:14px;
}

.sidebar-links a{
    color:#166534;

    font-weight:600;
}

.sidebar-links a:hover{
    color:#15803d;
}

/* META */

.article-meta{
    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:28px;

    color:#6b7280;

    font-size:14px;
}

/* TAGS */

.article-tags{
    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:40px;
}

.article-tags a{
    display:inline-flex;

    align-items:center;

    padding:
        10px 16px;

    background:#f0fdf4;

    color:#166534;

    border-radius:999px;

    font-size:14px;

    font-weight:600;
}

/* PRODUCT DETAIL */

.product-detail-grid{
    display:grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 1fr);

    gap:42px;

    align-items:start;
}

.product-detail-image img{
    width:100%;

    border-radius:24px;

    display:block;
}

.product-detail-content h2{
    font-size:40px;

    line-height:1.3;

    margin:
        12px 0 20px;

    color:#0f172a;
}

.product-detail-meta{
    display:flex;

    flex-direction:column;

    gap:14px;

    margin:
        28px 0;
}

.meta-item{
    display:flex;

    gap:8px;

    color:#4b5563;
}

.product-description{
    line-height:1.9;

    color:#374151;

    margin-bottom:34px;
}

.product-features{
    margin-bottom:34px;
}

.product-features h3{
    margin-bottom:16px;

    font-size:22px;

    color:#0f172a;
}

.product-features ul{
    padding-left:20px;
}

.product-features li{
    margin-bottom:12px;
}

/* FAQ */

.faq-wrap{
    display:grid;

    gap:24px;
}

.faq-item{
    background:#ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:20px;

    padding:28px;

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

.faq-item h3{
    font-size:20px;

    margin-bottom:14px;

    color:#0f172a;
}

.faq-item p{
    line-height:1.8;

    color:#4b5563;
}

/* PAGINATION */

.pagination{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:50px;

    flex-wrap:wrap;
}

.pagination a{
    width:46px;
    height:46px;

    display:flex;

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

    border-radius:12px;

    background:#ffffff;

    border:
        1px solid #d1d5db;

    color:#0f172a;

    font-weight:700;
}

.pagination a.active,
.pagination a:hover{
    background:#166534;

    color:#ffffff;

    border-color:#166534;
}

/* RESPONSIVE */

@media(max-width:1100px){

    .article-layout,
    .product-detail-grid{
        grid-template-columns:1fr;
    }

    .article-sidebar{
        position:relative;

        top:auto;
    }
}

@media(max-width:768px){

    .article-body h2{
        font-size:28px;
    }

    .product-detail-content h2{
        font-size:32px;
    }

    .sidebar-card,
    .faq-item{
        padding:22px;
    }
}

/* =========================================
CONTACT PAGE
========================================= */

.contact-layout{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap:40px;

    align-items:start;
}

/* LEFT */

.contact-info{
    display:grid;

    gap:24px;
}

/* CARD */

.contact-card{
    background:#ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:24px;

    padding:32px;

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

.contact-icon{
    font-size:34px;

    display:inline-flex;

    margin-bottom:18px;
}

.contact-card h3{
    font-size:28px;

    margin-bottom:14px;

    color:#0f172a;

    font-weight:800;
}

.contact-card p{
    color:#4b5563;

    line-height:1.9;

    margin-bottom:20px;
}

/* FORM BOX */

.contact-box{
    background:#ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:28px;

    padding:42px;

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

.contact-box h2{
    font-size:42px;

    line-height:1.2;

    margin-bottom:18px;

    color:#0f172a;

    font-weight:800;
}

.contact-box > p{
    color:#4b5563;

    line-height:1.9;

    margin-bottom:34px;
}

/* FORM */

.contact-form{
    display:grid;

    gap:26px;
}

.form-group{
    display:flex;

    flex-direction:column;
}

.form-group label{
    font-size:15px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:10px;
}

/* INPUT */

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    border:
        1px solid #d1d5db;

    border-radius:16px;

    padding:
        16px 18px;

    font-size:16px;

    font-family:inherit;

    background:#ffffff;

    transition:.25s ease;

    color:#0f172a;
}

.form-group textarea{
    min-height:160px;

    resize:vertical;
}

/* FOCUS */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;

    border-color:#16a34a;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.12);
}

/* PLACEHOLDER */

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#9ca3af;
}

/* BUTTON */

.contact-form .cta{
    width:100%;

    justify-content:center;

    min-height:58px;

    font-size:17px;

    border:none;

    cursor:pointer;
}

/* RESPONSIVE */

@media(max-width:1100px){

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

@media(max-width:768px){

    .contact-box{
        padding:28px;
    }

    .contact-box h2{
        font-size:32px;
    }

    .contact-card{
        padding:26px;
    }

    .contact-card h3{
        font-size:24px;
    }
}

/* =========================================
HEADER SEARCH PREMIUM
========================================= */

.header-search{
    margin-left:28px;
}

.header-search-form{
    display:flex;

    align-items:center;

    background:#ffffff;

    border-radius:999px;

    overflow:hidden;

    min-width:320px;

    border:
        2px solid rgba(212,175,55,.45);

    box-shadow:
        0 10px 30px rgba(22,163,74,.08);

    transition:.25s ease;
}

/* HOVER */

.header-search-form:hover{
    border-color:#d4af37;

    box-shadow:
        0 14px 35px rgba(22,163,74,.16);
}

/* INPUT */

.header-search-form input{
    border:none;

    background:none;

    padding:
        14px 20px;

    width:100%;

    font-size:15px;

    color:#111827;

    font-weight:500;
}

.header-search-form input::placeholder{
    color:#6b7280;
}

.header-search-form input:focus{
    outline:none;
}

/* BUTTON */

.header-search-form button{
    border:none;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #15803d
        );

    color:#ffffff;

    width:52px;

    height:48px;

    cursor:pointer;

    font-size:17px;

    transition:.25s ease;
}

.header-search-form button:hover{
    filter:brightness(1.06);
}

/* MOBILE */

@media(max-width:1100px){

    .header-search{
        display:none;
    }
}

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

.footer-social{
    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:24px;
}

.footer-social a{
    color:#d4af37;

    font-weight:700;

    transition:.25s ease;

    text-decoration:none;

    position:relative;
}

.footer-social a::after{
    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#d4af37;

    transition:.25s ease;
}

.footer-social a:hover{
    color:#f4d27a;
}

.footer-social a:hover::after{
    width:100%;
}
.article-wa-cta {
    margin-top: 32px;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 1px solid rgba(15, 118, 110, 0.18);
}

.article-wa-cta h2 {
    margin-bottom: 8px;
}

.article-wa-cta p {
    margin-bottom: 18px;
}

/* V12 Marketplace catalog */
.marketplace-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}.marketplace-filter{padding:22px;position:sticky;top:96px}.marketplace-filter h2{margin-top:0}.marketplace-filter form{display:flex;flex-direction:column;gap:10px}.marketplace-filter input,.marketplace-filter select{width:100%;border:1px solid #d8e3df;border-radius:14px;padding:12px 14px;background:#fff}.marketplace-filter .button{margin-top:8px;text-align:center}.marketplace-results .section-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px}.empty-state{padding:32px;text-align:center}.product-card .product-category{display:inline-flex;padding:5px 10px;border-radius:999px;background:#e8fff5;color:#006b45;font-weight:700;font-size:12px}.product-meta{display:flex;gap:10px;flex-wrap:wrap;color:#52636b;font-size:13px}@media(max-width:960px){.marketplace-layout{grid-template-columns:1fr}.marketplace-filter{position:static}.marketplace-results .section-head{display:block}}

/* v14 marketplace product detail helpers */
.product-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin-top:14px}.product-gallery img{width:100%;height:92px;object-fit:cover;border-radius:14px;border:1px solid #e5e7eb}.inquiry-card{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;align-items:start;background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:28px;box-shadow:0 20px 60px rgba(15,23,42,.08)}.inquiry-form{display:grid;gap:12px}.inquiry-form input,.inquiry-form textarea{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:12px 14px;font:inherit}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.service-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:22px;box-shadow:0 18px 45px rgba(15,23,42,.06)}@media(max-width:768px){.inquiry-card{grid-template-columns:1fr;padding:20px}.product-gallery{grid-template-columns:repeat(3,1fr)}}

/* =========================================
COMPACT PAGINATION - v15
========================================= */
.pagination.pagination-compact{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:42px;
    flex-wrap:wrap;
}
.pagination.pagination-compact a,
.pagination.pagination-compact span{
    min-width:44px;
    height:44px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #dbe5df;
    color:#0f172a;
    font-weight:800;
    box-shadow:0 8px 24px rgba(15, 23, 42, .06);
    text-decoration:none;
}
.pagination.pagination-compact .page-wide{
    min-width:auto;
    padding:0 18px;
}
.pagination.pagination-compact .page-dots{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
    min-width:28px;
    padding:0 4px;
    color:#64748b;
}
.pagination.pagination-compact a.active,
.pagination.pagination-compact a:hover{
    background:#166534;
    color:#ffffff;
    border-color:#166534;
    transform:translateY(-2px);
}
.pagination.pagination-compact .disabled{
    opacity:.45;
    cursor:not-allowed;
    background:#f8fafc;
}
@media(max-width:640px){
    .pagination.pagination-compact{
        gap:8px;
    }
    .pagination.pagination-compact .page-wide{
        width:100%;
        max-width:240px;
    }
}


/* v16 clean marketplace pagination: compact << 1 2 3 ... >> Last */
.pagination.pagination-clean{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin:44px auto 36px !important;
    flex-wrap:wrap !important;
    width:100% !important;
    clear:both !important;
}
.pagination.pagination-clean a,
.pagination.pagination-clean span{
    width:auto !important;
    min-width:48px !important;
    height:48px !important;
    padding:0 16px !important;
    margin:0 -1px 8px 0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
    border:1px solid #d7e1df !important;
    border-radius:0 !important;
    color:#0f5132 !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    white-space:nowrap !important;
    transform:none !important;
}
.pagination.pagination-clean a:first-child,
.pagination.pagination-clean span:first-child{
    border-top-left-radius:10px !important;
    border-bottom-left-radius:10px !important;
}
.pagination.pagination-clean a:last-child,
.pagination.pagination-clean span:last-child{
    border-top-right-radius:10px !important;
    border-bottom-right-radius:10px !important;
}
.pagination.pagination-clean .active,
.pagination.pagination-clean a:hover{
    background:#166534 !important;
    border-color:#166534 !important;
    color:#fff !important;
    position:relative !important;
    z-index:2 !important;
}
.pagination.pagination-clean .page-dots{
    color:#64748b !important;
    background:#fff !important;
}
.pagination.pagination-clean .disabled{
    color:#94a3b8 !important;
    background:#f8fafc !important;
    cursor:not-allowed !important;
}
.pagination.pagination-clean .page-last{
    min-width:64px !important;
}
@media(max-width:640px){
    .pagination.pagination-clean a,
    .pagination.pagination-clean span{
        min-width:42px !important;
        height:42px !important;
        padding:0 12px !important;
        font-size:14px !important;
    }
    .pagination.pagination-clean .page-last{
        min-width:56px !important;
    }
}


/* =========================================
CATALOG PRODUCT CTA BUTTON - v19
========================================= */
.marketplace-results .product-actions,
.cards3 .product-actions,
.cards4 .product-actions{
    margin-top:16px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}

.marketplace-results .product-card .product-card-cta,
.marketplace-results .product-card .product-detail-button,
.marketplace-results .product-card .product-wa-button,
.marketplace-results .product-card .card-content > a:last-child,
.cards3 .product-card .product-card-cta,
.cards3 .product-card .product-detail-button,
.cards3 .product-card .product-wa-button,
.cards4 .product-card .product-card-cta,
.cards4 .product-card .product-detail-button,
.cards4 .product-card .product-wa-button{
    width:100% !important;
    min-height:46px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:12px 16px !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,#16a34a,#15803d) !important;
    color:#ffffff !important;
    border:1px solid rgba(21,128,61,.9) !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    text-align:center !important;
    text-decoration:none !important;
    box-shadow:0 14px 28px rgba(21,128,61,.18) !important;
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.marketplace-results .product-card .product-card-cta::before,
.marketplace-results .product-card .product-detail-button::before,
.marketplace-results .product-card .product-wa-button::before,
.marketplace-results .product-card .card-content > a:last-child::before,
.cards3 .product-card .product-card-cta::before,
.cards3 .product-card .product-detail-button::before,
.cards3 .product-card .product-wa-button::before,
.cards4 .product-card .product-card-cta::before,
.cards4 .product-card .product-detail-button::before,
.cards4 .product-card .product-wa-button::before{
    content:"💬";
    font-size:15px;
    line-height:1;
}

.marketplace-results .product-card .product-card-cta:hover,
.marketplace-results .product-card .product-detail-button:hover,
.marketplace-results .product-card .product-wa-button:hover,
.marketplace-results .product-card .card-content > a:last-child:hover,
.cards3 .product-card .product-card-cta:hover,
.cards3 .product-card .product-detail-button:hover,
.cards3 .product-card .product-wa-button:hover,
.cards4 .product-card .product-card-cta:hover,
.cards4 .product-card .product-detail-button:hover,
.cards4 .product-card .product-wa-button:hover{
    color:#ffffff !important;
    filter:brightness(1.05) !important;
    transform:translateY(-2px) !important;
    box-shadow:0 18px 34px rgba(21,128,61,.25) !important;
}

.marketplace-results .product-card .product-card-cta:focus-visible,
.marketplace-results .product-card .product-detail-button:focus-visible,
.marketplace-results .product-card .product-wa-button:focus-visible,
.marketplace-results .product-card .card-content > a:last-child:focus-visible{
    outline:3px solid rgba(212,175,55,.65) !important;
    outline-offset:3px !important;
}

/* =========================================
CATALOG SIDEBAR FILTER ONLY - FINAL OVERRIDE
Tempel di paling bawah app.css
========================================= */

.marketplace-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.marketplace-filter {
    width: 100% !important;
    max-width: 260px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(31, 91, 46, 0.12) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
    position: sticky !important;
    top: 155px !important;
    z-index: 5 !important;
}

.marketplace-filter h2,
.marketplace-filter h3 {
    margin: 0 0 16px !important;
    color: #0f341c !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.marketplace-filter form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
}

.marketplace-filter label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #26372e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.marketplace-filter input,
.marketplace-filter select {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #d7e5dc !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #10231a !important;
    font-size: 14px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.marketplace-filter input:focus,
.marketplace-filter select:focus {
    border-color: #16a34a !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12) !important;
}

.marketplace-filter button,
.marketplace-filter input[type="submit"],
.marketplace-filter .button,
.marketplace-filter .btn,
.marketplace-filter .cta {
    width: 100% !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 8px !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #16a34a, #0f7a35) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 14px 28px rgba(15, 122, 53, 0.22) !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}

.marketplace-filter button:hover,
.marketplace-filter input[type="submit"]:hover,
.marketplace-filter .button:hover,
.marketplace-filter .btn:hover,
.marketplace-filter .cta:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 34px rgba(15, 122, 53, 0.28) !important;
}

/* Reset link di sidebar filter */
.marketplace-filter a {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    padding: 11px 16px !important;
    border: 1px solid rgba(22, 163, 74, 0.35) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #166534 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}

.marketplace-filter a:hover {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
    color: #0f7a35 !important;
}

/* Biar area produk kanan tetap lega */
.marketplace-results {
    min-width: 0 !important;
}

/* Mobile/tablet */
@media (max-width: 960px) {
    .marketplace-layout {
        grid-template-columns: 1fr !important;
    }

    .marketplace-filter {
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
    }
}

/* =========================================
CATALOG PRODUCT GRID + CARD FIX - FINAL OVERRIDE
Tempel di paling bawah assets/css/app.css
========================================= */

/* Area kanan katalog */
.marketplace-results {
    min-width: 0 !important;
    width: 100% !important;
}

/* Grid produk katalog */
.marketplace-results .cards3,
.marketplace-results .product-grid,
.marketplace-results .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* Card produk agar seragam */
.marketplace-results .product,
.marketplace-results .product-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07) !important;
}

/* Link gambar / wrapper gambar */
.marketplace-results .product > a:first-child,
.marketplace-results .product-card > a:first-child,
.marketplace-results .product-image-link {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

/* Gambar produk wajib sama tinggi */
.marketplace-results .product img,
.marketplace-results .product-card img {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Konten card */
.marketplace-results .product-content,
.marketplace-results .product-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    min-width: 0 !important;
}

/* Badge kategori */
.marketplace-results .product-category {
    width: fit-content !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
}

/* Judul card */
.marketplace-results .product-content h3,
.marketplace-results .product-card-content h3 {
    min-height: 64px !important;
    margin-bottom: 10px !important;
    color: #063f24 !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

/* Deskripsi pendek biar tinggi card tidak liar */
.marketplace-results .product-content p,
.marketplace-results .product-card-content p {
    color: #314238 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 16px !important;
}

/* Meta produk */
.marketplace-results .product-meta {
    margin-top: auto !important;
    margin-bottom: 8px !important;
}

/* Harga */
.marketplace-results .price {
    margin-bottom: 14px !important;
}

/* Tombol CTA tetap di bawah */
.marketplace-results .product-card-cta,
.marketplace-results .product-content .btn {
    margin-top: auto !important;
    width: 100% !important;
}

/* Pagination jangan ketarik layout card */
.marketplace-results .pagination {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 42px !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .marketplace-results .cards3,
    .marketplace-results .product-grid,
    .marketplace-results .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .marketplace-results .product img,
    .marketplace-results .product-card img {
        height: 260px !important;
        max-height: 260px !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .marketplace-results .cards3,
    .marketplace-results .product-grid,
    .marketplace-results .products-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .marketplace-results .product img,
    .marketplace-results .product-card img {
        height: 240px !important;
        max-height: 240px !important;
    }

    .marketplace-results .product-content h3,
    .marketplace-results .product-card-content h3 {
        min-height: auto !important;
    }
}

/* =========================================
CONTROLLED DYNAMIC CONTENT - v20
========================================= */
.dynamic-section-head{
    max-width:980px;
    margin:0 auto 34px;
    text-align:center;
}
.dynamic-eyebrow,
.dynamic-mini-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    padding:8px 14px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-size:12px;
    font-weight:900;
    letter-spacing:.4px;
    text-transform:uppercase;
}
.dynamic-updated-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:18px;
    padding:12px 18px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #d9eadf;
    color:#23402e;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
    font-size:14px;
}
.dynamic-block{margin-top:28px}.dynamic-block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}.dynamic-block-head h2,.dynamic-block-head h3{margin:0;color:#0f341c;font-size:30px;line-height:1.25;font-weight:900}.dynamic-block-head.compact h3{font-size:24px}.left-title{text-align:left;margin-bottom:0}.dynamic-more-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:#166534;color:#fff;font-weight:900;text-decoration:none;box-shadow:0 14px 32px rgba(22,101,52,.18)}.dynamic-more-link:hover{background:#0f4f29;color:#fff;transform:translateY(-2px)}.dynamic-card-grid{align-items:stretch}.dynamic-kandang-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:28px;align-items:center;padding:34px;border-radius:28px;background:linear-gradient(135deg,#0f5132,#147a4b);color:#fff;box-shadow:0 24px 60px rgba(15,81,50,.18);overflow:hidden}.dynamic-kandang-card h2{font-size:34px;line-height:1.25;margin:0 0 14px;color:#fff}.dynamic-kandang-card p{font-size:16px;line-height:1.9;color:rgba(255,255,255,.92);margin:0}.dynamic-kandang-card .dynamic-mini-label{background:rgba(255,255,255,.15);color:#fff}.dynamic-kandang-meta{display:grid;gap:12px;padding:22px;border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}.dynamic-kandang-meta span{font-weight:800;color:#fff}.dynamic-kandang-meta a{display:inline-flex;align-items:center;justify-content:center;margin-top:4px;padding:12px 16px;border-radius:999px;background:#d4af37;color:#173017;font-weight:900;text-decoration:none}.dynamic-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px}.dynamic-panel{background:#fff;border:1px solid #dce8df;border-radius:26px;padding:26px;box-shadow:0 18px 45px rgba(15,23,42,.06)}.dynamic-list-products{display:grid;gap:14px}.dynamic-list-item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:18px;background:#f8fbf7;border:1px solid #e2eee6;text-decoration:none}.dynamic-list-item:hover{background:#f0fdf4;transform:translateY(-2px)}.dynamic-list-item img{width:88px;height:72px;object-fit:cover;border-radius:14px}.dynamic-list-item strong{display:block;color:#0f341c;font-weight:900;line-height:1.35;margin-bottom:5px}.dynamic-list-item small{display:block;color:#647067;font-weight:700;line-height:1.45}.dynamic-faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}.dynamic-faq-card{padding:24px;border-radius:22px;background:#fff;border:1px solid #e1eadd;box-shadow:0 14px 38px rgba(15,23,42,.05)}.dynamic-faq-card h3{font-size:18px;line-height:1.35;color:#0f341c;margin:0 0 12px;font-weight:900}.dynamic-faq-card p{color:#4b5d52;line-height:1.8;margin:0}
@media(max-width:991px){.dynamic-two-columns,.dynamic-kandang-card,.dynamic-faq-grid{grid-template-columns:1fr}.dynamic-block-head{align-items:flex-start;flex-direction:column}.left-title{text-align:left}.dynamic-kandang-card{padding:26px}.dynamic-kandang-card h2{font-size:28px}}
@media(max-width:640px){.dynamic-list-item{grid-template-columns:74px minmax(0,1fr)}.dynamic-list-item img{width:74px;height:62px}.dynamic-block-head h2,.dynamic-block-head h3{font-size:24px}.dynamic-updated-pill{border-radius:18px;text-align:center}}

/* =========================================
CONTROLLED DYNAMIC CONTENT UI - v21 FINAL OVERRIDE
Append-only. Khusus merapikan section konten dinamis homepage.
========================================= */
.dynamic-section,
.dynamic-overview-section,
.dynamic-kandang-section,
.dynamic-faq-section {
    position: relative !important;
    overflow: hidden !important;
}

.dynamic-overview-section {
    padding: 88px 0 76px !important;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, .10), transparent 34%),
        linear-gradient(180deg, #f7fbf3, #ffffff) !important;
}

.dynamic-section-head {
    max-width: 920px !important;
    margin: 0 auto 42px !important;
    text-align: center !important;
}

.dynamic-section-head .title {
    margin-bottom: 14px !important;
    color: #07351d !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
}

.dynamic-section-head .center {
    max-width: 760px !important;
    color: #52665a !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
}

.dynamic-eyebrow,
.dynamic-mini-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: fit-content !important;
    margin-bottom: 12px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .42px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

.dynamic-updated-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 20px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #dbeade !important;
    color: #23402e !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.dynamic-block {
    margin-top: 28px !important;
}

.dynamic-block-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}

.dynamic-block-head h2,
.dynamic-block-head h3 {
    margin: 0 !important;
    color: #07351d !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1.22 !important;
    font-weight: 950 !important;
}

.dynamic-block-head.compact h3 {
    font-size: 24px !important;
}

.left-title {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.dynamic-more-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #16a34a, #0f7a35) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 32px rgba(22, 101, 52, .20) !important;
    white-space: nowrap !important;
}

.dynamic-more-link:hover {
    color: #ffffff !important;
    filter: brightness(1.04) !important;
    transform: translateY(-2px) !important;
}

.dynamic-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}

.dynamic-card-grid .product,
.dynamic-card-grid .product-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 76, 46, .08) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08) !important;
}

.dynamic-card-grid .product img,
.dynamic-card-grid .product-card img {
    width: 100% !important;
    height: 260px !important;
    max-height: 260px !important;
    object-fit: cover !important;
    object-position: center !important;
}

.dynamic-card-grid .product-content,
.dynamic-card-grid .product-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 22px !important;
}

.dynamic-card-grid .product-content h3,
.dynamic-card-grid .product-card-content h3 {
    color: #07351d !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

.dynamic-card-grid .product-card-cta,
.dynamic-card-grid .product-content .btn {
    margin-top: auto !important;
}

.dynamic-kandang-section {
    padding: 76px 0 !important;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, .16), transparent 28%),
        linear-gradient(180deg, #eef7e9, #f7fbf3) !important;
}

.dynamic-kandang-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr) !important;
    gap: 28px !important;
    align-items: center !important;
    padding: 36px !important;
    border-radius: 30px !important;
    background:
        linear-gradient(135deg, rgba(15, 81, 50, .96), rgba(20, 122, 75, .96)),
        url('../images/placeholder-qurban.svg') center/cover !important;
    color: #ffffff !important;
    box-shadow: 0 26px 70px rgba(15, 81, 50, .22) !important;
    overflow: hidden !important;
}

.dynamic-kandang-card h2 {
    margin: 0 0 14px !important;
    color: #ffffff !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.22 !important;
    font-weight: 950 !important;
}

.dynamic-kandang-card p {
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
}

.dynamic-kandang-card .dynamic-mini-label {
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.20) !important;
    color: #ffffff !important;
}

.dynamic-kandang-meta {
    display: grid !important;
    gap: 12px !important;
    padding: 22px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    backdrop-filter: blur(8px) !important;
}

.dynamic-kandang-meta span {
    color: #ffffff !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

.dynamic-kandang-meta a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    margin-top: 4px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: #d4af37 !important;
    color: #173017 !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

.dynamic-two-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
}

.dynamic-panel {
    background: #ffffff !important;
    border: 1px solid #dce8df !important;
    border-radius: 26px !important;
    padding: 26px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06) !important;
}

.dynamic-list-products {
    display: grid !important;
    gap: 14px !important;
}

.dynamic-list-item {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 15px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 18px !important;
    background: #f8fbf7 !important;
    border: 1px solid #e2eee6 !important;
    text-decoration: none !important;
}

.dynamic-list-item:hover {
    background: #f0fdf4 !important;
    transform: translateY(-2px) !important;
}

.dynamic-list-item img {
    width: 92px !important;
    height: 74px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

.dynamic-list-item strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #0f341c !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
}

.dynamic-list-item small {
    display: block !important;
    color: #647067 !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.dynamic-faq-section {
    padding: 84px 0 !important;
    background: linear-gradient(180deg, #ffffff, #f7fbf3) !important;
}

.dynamic-faq-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-top: 30px !important;
}

.dynamic-faq-card {
    padding: 26px !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e1eadd !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06) !important;
}

.dynamic-faq-card h3 {
    margin: 0 0 12px !important;
    color: #0f341c !important;
    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

.dynamic-faq-card p {
    margin: 0 !important;
    color: #4b5d52 !important;
    line-height: 1.85 !important;
}

@media (max-width: 991px) {
    .dynamic-card-grid,
    .dynamic-two-columns,
    .dynamic-kandang-card,
    .dynamic-faq-grid {
        grid-template-columns: 1fr !important;
    }

    .dynamic-block-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .dynamic-kandang-card {
        padding: 28px !important;
    }
}

@media (max-width: 640px) {
    .dynamic-overview-section,
    .dynamic-kandang-section,
    .dynamic-faq-section {
        padding: 58px 0 !important;
    }

    .dynamic-list-item {
        grid-template-columns: 76px minmax(0, 1fr) !important;
    }

    .dynamic-list-item img {
        width: 76px !important;
        height: 64px !important;
    }
}
/* DYNAMIC INLINE UI v22 marker: styling utama ada di components/dynamic-homepage.php */

/* Dynamic Content Phase 2 */
.dynamic-detail-section .dynamic-panel p,
.dynamic-catalog-intro .dynamic-panel p,
.author-box p{line-height:1.85;color:#475569}.dynamic-check-list{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}.dynamic-check-list li{position:relative;padding-left:28px;color:#334155;font-weight:700;line-height:1.6}.dynamic-check-list li:before{content:"✓";position:absolute;left:0;top:0;color:#166534;font-weight:900}.dynamic-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}.dynamic-chip-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.dynamic-chip{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;background:#eefdf3;border:1px solid #cdebd7;color:#14532d;font-weight:800;font-size:13px;text-decoration:none}.dynamic-chip:hover{background:#dcfce7;color:#064e3b;transform:translateY(-1px)}.dynamic-chip-reset{background:#fff7ed;border-color:#fed7aa;color:#9a3412}.dynamic-empty-state .dynamic-chip-wrap{justify-content:center}.article-toc{margin:26px 0}.article-toc h2{margin-top:0}.article-toc ol{margin:0;padding-left:22px;display:grid;gap:8px}.article-toc a{font-weight:800;color:#14532d;text-decoration:none}.article-toc a:hover{text-decoration:underline}.article-toc .toc-level-h3{margin-left:18px;font-size:.95em}.dynamic-article-meta{flex-wrap:wrap}.inline-recommendation{margin:34px 0}.inline-recommendation h2{margin-top:0}.sidebar-toc{position:sticky;top:96px}.author-box{text-align:center;max-width:900px;margin:auto}.dynamic-hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}.dynamic-section-cta{margin-top:24px}.dynamic-landing-hero .btn{background:#fff;color:#14532d;border:1px solid rgba(20,83,45,.2);box-shadow:0 12px 30px rgba(15,23,42,.08)}.dynamic-landing-hero .btn:hover{background:#f0fdf4;color:#064e3b}.dynamic-kandang-section .dynamic-kandang-card{margin-top:0}@media(max-width:991px){.dynamic-trust-grid{grid-template-columns:1fr}.sidebar-toc{position:static}.dynamic-hero-actions{justify-content:flex-start}}@media(max-width:640px){.dynamic-chip{width:100%;justify-content:flex-start}.dynamic-hero-actions .cta,.dynamic-hero-actions .btn{width:100%;justify-content:center}}

/* Dynamic Content Phase 2 V23 - product/article detail deepening */
.product-buyer-guide-section,
.article-summary-box,
.article-next-step-box,
.article-topic-links {
    position: relative;
}

.compact-chip-wrap {
    justify-content: flex-end;
    max-width: 560px;
}

.buyer-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.buyer-guide-card h3,
.price-factor-panel h3,
.article-summary-box h2,
.article-next-step-box h2,
.article-topic-links h2 {
    margin-top: 0;
    color: #0f341c;
    font-weight: 950;
    line-height: 1.3;
}

.booking-step-grid,
.article-next-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.booking-step-card,
.article-next-step-card {
    background: #ffffff;
    border: 1px solid #dce8df;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.booking-step-card > span,
.article-next-step-card > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #14532d;
    color: #ffffff;
    font-weight: 950;
    margin-bottom: 16px;
}

.booking-step-card h3,
.article-next-step-card h3 {
    margin: 0 0 10px;
    color: #0f341c;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 950;
}

.booking-step-card p,
.article-next-step-card p,
.article-summary-box li,
.article-topic-links p {
    color: #475569;
    line-height: 1.8;
}

.price-factor-panel {
    margin-top: 6px;
}

.article-summary-box,
.article-next-step-box,
.article-topic-links {
    margin: 28px 0;
}

.article-next-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.sidebar-chip-wrap {
    margin-top: 0;
}

.sidebar-chip-wrap .dynamic-chip {
    width: 100%;
    justify-content: flex-start;
}

@media (max-width: 991px) {
    .buyer-guide-grid,
    .booking-step-grid,
    .article-next-step-grid {
        grid-template-columns: 1fr;
    }

    .compact-chip-wrap {
        justify-content: flex-start;
        max-width: none;
    }
}

/* V24 Catalog & Landing Deepening */
.catalog-quick-paths{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:22px;
}
.catalog-quick-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:18px 20px;
    border-radius:22px;
    background:#fff;
    border:1px solid #dbeade;
    box-shadow:0 14px 34px rgba(15,23,42,.05);
    text-decoration:none;
}
.catalog-quick-card strong{color:#0f341c;font-size:16px;font-weight:900}.catalog-quick-card span{color:#526457;line-height:1.65;font-weight:650}.catalog-quick-card:hover{background:#f0fdf4;transform:translateY(-2px)}
.catalog-buyer-steps{display:grid;gap:12px;margin-top:20px}.catalog-buyer-step{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:start;padding:14px;border-radius:18px;background:#f8fbf7;border:1px solid #e1ede3}.catalog-buyer-step span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#166534;color:#fff;font-weight:900;grid-row:span 2}.catalog-buyer-step strong{color:#0f341c;font-weight:900}.catalog-buyer-step small{color:#526457;line-height:1.65;font-weight:650}.catalog-local-list{display:grid;gap:12px;margin-top:22px}.catalog-local-item{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;background:#f8fbf7;border:1px solid #e2eee6;text-decoration:none}.catalog-local-item strong{color:#0f341c;font-weight:900}.catalog-local-item span{color:#526457;line-height:1.65;font-weight:650}.catalog-local-item:hover{background:#f0fdf4;transform:translateY(-1px)}
.landing-related-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #e2eee6}.landing-related-links a,.landing-link-grid a{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid #cdebd7;color:#14532d;text-decoration:none;font-weight:900}.landing-related-links a:hover,.landing-link-grid a:hover{background:#dcfce7;color:#064e3b;transform:translateY(-1px)}.landing-package-grid,.landing-step-grid,.landing-location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}.landing-location-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px}.landing-package-card,.landing-step-card,.landing-location-card{padding:24px;border-radius:24px;background:#fff;border:1px solid #dce8df;box-shadow:0 16px 40px rgba(15,23,42,.055);text-decoration:none}.landing-package-card h3,.landing-step-card h3{margin:0 0 10px;color:#0f341c;font-size:19px;font-weight:900}.landing-package-card p,.landing-step-card p{margin:0;color:#526457;line-height:1.8}.landing-step-card span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:#166534;color:#fff;font-weight:900;margin-bottom:14px}.landing-location-card{display:flex;flex-direction:column;gap:8px}.landing-location-card strong{color:#0f341c;font-weight:900}.landing-location-card span{color:#526457;line-height:1.65;font-weight:650}.landing-location-card:hover{background:#f0fdf4;transform:translateY(-2px)}.landing-link-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
@media(max-width:991px){.catalog-quick-paths,.landing-package-grid,.landing-step-grid{grid-template-columns:1fr}.landing-location-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.landing-location-grid{grid-template-columns:1fr}.catalog-buyer-step{grid-template-columns:1fr}.catalog-buyer-step span{grid-row:auto;margin-bottom:6px}.landing-link-grid a,.landing-related-links a{width:100%}}
.catalog-quick-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:24px 0 0}.catalog-quick-head h3{margin:0;color:#0f341c;font-size:22px;font-weight:900}.catalog-quick-head p{margin:0;color:#526457;font-weight:700}
@media(max-width:640px){.catalog-quick-head{align-items:flex-start;flex-direction:column}}

/* V26 Internal Linking + Schema Refinement UI */
.internal-link-panel {
    margin-top: 28px;
}

.compact-head {
    margin-bottom: 18px;
}

.internal-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.internal-link-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    background: #f8fbf7;
    border: 1px solid #e0ecdf;
}

.internal-link-group h3 {
    margin: 0 0 4px;
    color: #0f341c;
    font-size: 18px;
    font-weight: 900;
}

.internal-link-group a,
.internal-link-list a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #dceadf;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .035);
}

.internal-link-group a:hover,
.internal-link-list a:hover {
    background: #f0fdf4;
    transform: translateY(-1px);
}

.internal-link-group strong,
.internal-link-list strong {
    color: #14532d;
    font-weight: 900;
}

.internal-link-group span,
.internal-link-list span {
    color: #526457;
    line-height: 1.55;
    font-size: 14px;
    font-weight: 650;
}

.internal-link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.compact-internal-links {
    margin-top: 14px;
}

.catalog-helper-panel {
    margin-top: 24px;
}

@media (max-width: 991px) {
    .internal-link-grid,
    .internal-link-list {
        grid-template-columns: 1fr;
    }
}

/* V28 Final UX + Local SEO Cluster Strengthening */
.catalog-reassurance-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.catalog-reassurance-strip div {
    padding: 16px 18px;
    border-radius: 20px;
    background: #f8fbf7;
    border: 1px solid #dfece0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
}

.catalog-reassurance-strip strong,
.home-location-card strong,
.local-area-card h3 {
    display: block;
    color: #0f341c;
    font-weight: 950;
}

.catalog-reassurance-strip span,
.home-location-card span,
.local-area-card p {
    display: block;
    margin-top: 6px;
    color: #526457;
    line-height: 1.65;
    font-weight: 650;
}

.home-location-grid,
.local-area-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.home-location-card,
.local-area-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #dfece0;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
    text-decoration: none;
}

.home-location-card:hover,
.local-area-card:hover {
    background: #f0fdf4;
    transform: translateY(-2px);
}

.local-area-card h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
}

.local-area-card a {
    margin-top: auto;
    display: inline-flex;
    width: fit-content;
    padding: 10px 14px;
    border-radius: 999px;
    background: #166534;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
}

.local-area-card a:hover {
    background: #0f5132;
}

.dynamic-home-location-section {
    background: #ffffff;
}

@media (max-width: 991px) {
    .catalog-reassurance-strip,
    .home-location-grid,
    .local-area-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .catalog-reassurance-strip,
    .home-location-grid,
    .local-area-grid {
        grid-template-columns: 1fr;
    }
}


/* V29 Final UX + Technical SEO + Hosting Readiness */
:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .75);
    outline-offset: 3px;
}

button,
.btn,
.cta,
.button,
.dynamic-chip,
.page-number,
.page-control,
.page-last,
.floating-wa,
.sticky-mobile-cta a {
    min-height: 44px;
}

.header-search input,
.search-page-control input,
.marketplace-filter input,
.marketplace-filter select,
.marketplace-filter button,
.marketplace-filter .button {
    min-height: 46px;
}

.product,
.card,
.badge,
.dynamic-panel,
.catalog-quick-card,
.internal-link-panel,
.local-area-card,
.home-location-card {
    will-change: transform;
}

.product:hover,
.card:hover,
.badge:hover,
.dynamic-panel:hover,
.catalog-quick-card:hover,
.local-area-card:hover,
.home-location-card:hover {
    box-shadow: 0 18px 46px rgba(15, 23, 42, .09);
}

.marketplace-filter {
    position: sticky;
    top: 118px;
    align-self: start;
}

.dynamic-updated-pill {
    white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    clip: auto;
    background: #ffffff;
    color: #12381e;
    z-index: 100000;
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
}

@media (max-width: 991px) {
    .marketplace-filter {
        position: static;
        top: auto;
    }

    .dynamic-block-head,
    .section-head,
    .topbar-wrapper {
        align-items: flex-start;
    }

    .dynamic-updated-pill {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .topbar-wrapper,
    .topbar-right,
    .hero-actions,
    .error-actions,
    .search-page-control {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-right a,
    .hero-actions a,
    .error-actions a,
    .search-page-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero {
        min-height: 640px;
    }

    .sticky-mobile-cta {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .floating-wa {
        bottom: 82px;
    }
}

/* V29.1 - Article category funnel + latest article polish */
.section-action{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.center-action{justify-content:center}.btn-soft{background:#f0fdf4!important;color:#14532d!important;border:1px solid #bbf7d0!important;box-shadow:none!important}.btn-soft:hover{background:#dcfce7!important;color:#064e3b!important}.article-category-section{padding-bottom:24px}.article-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.article-category-tile{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:#fff;border:1px solid #e2e8f0;text-decoration:none;box-shadow:0 14px 36px rgba(15,23,42,.05);transition:.2s ease}.article-category-tile strong{font-size:16px;color:#14532d}.article-category-tile span{font-size:13px;line-height:1.6;color:#475569}.article-category-tile:hover,.article-category-tile.active{border-color:#86efac;background:#f0fdf4;transform:translateY(-2px)}.article-latest-list{display:grid;gap:12px;max-width:960px;margin:28px auto 0}.article-latest-row{display:grid;grid-template-columns:150px 1fr 140px;gap:14px;align-items:center;padding:15px 18px;border-radius:18px;background:#fff;border:1px solid #e2e8f0;text-decoration:none;box-shadow:0 12px 30px rgba(15,23,42,.04)}.article-latest-row span{font-size:12px;font-weight:900;color:#166534;text-transform:uppercase;letter-spacing:.04em}.article-latest-row strong{color:#0f172a;line-height:1.45}.article-latest-row small{color:#64748b;text-align:right}.article-latest-row:hover{border-color:#86efac;background:#f8fffb;transform:translateY(-1px)}@media(max-width:900px){.article-category-grid{grid-template-columns:1fr 1fr}.article-latest-row{grid-template-columns:1fr;gap:6px}.article-latest-row small{text-align:left}}@media(max-width:640px){.article-category-grid{grid-template-columns:1fr}.section-action .btn{width:100%;justify-content:center}}

/* V29.2 - Article funnel + category-based CTA optimization */
.article-funnel-hub {
    background: linear-gradient(180deg, #f8fff8 0%, #ffffff 100%);
}

.article-funnel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.article-funnel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 190px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #dcfce7;
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.article-funnel-card span {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #166534;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.article-funnel-card strong {
    color: #0f2f1b;
    font-size: 20px;
    line-height: 1.25;
}

.article-funnel-card small {
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
}

.article-funnel-card:hover {
    transform: translateY(-3px);
    border-color: #86efac;
    box-shadow: 0 22px 56px rgba(15, 23, 42, .09);
}

.article-category-cta,
.article-funnel-cta {
    margin-top: 28px;
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%, #fff7ed 100%);
    border: 1px solid #bbf7d0;
}

.article-funnel-cta {
    margin: 34px 0;
}

.article-category-cta h3,
.article-funnel-cta h2 {
    margin: 8px 0 10px;
    color: #0f2f1b;
}

.article-category-cta p,
.article-funnel-cta p,
.article-sidebar-cta p {
    color: #334155;
    line-height: 1.75;
}

.article-funnel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.article-sidebar-cta {
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.article-sidebar-cta .dynamic-mini-label {
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .article-funnel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .article-funnel-card {
        min-height: auto;
    }

    .article-funnel-actions .btn,
    .article-funnel-actions .btn-soft {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .article-category-cta,
    .article-funnel-cta {
        padding: 20px;
        border-radius: 22px;
    }
}

/* V29.3 - Local SEO cluster + area-based article navigation */
.local-cluster-grid,
.local-service-grid,
.local-article-group-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.local-service-grid,
.local-article-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.local-cluster-card,
.local-service-card,
.local-article-group-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #dcfce7;
    text-decoration: none;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.local-cluster-card strong,
.local-service-card h3,
.local-article-group-card h3 {
    color: #0f2f1b;
    font-size: 18px;
    line-height: 1.35;
}

.local-cluster-card span,
.local-service-card p,
.local-article-group-card p,
.local-empty-note {
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

.local-cluster-card small {
    margin-top: auto;
    color: #166534;
    font-size: 13px;
    font-weight: 900;
}

.local-cluster-card:hover,
.local-cluster-card.active,
.local-service-card:hover,
.local-article-group-card:hover,
.home-local-card:hover {
    transform: translateY(-3px);
    border-color: #86efac;
    box-shadow: 0 22px 56px rgba(15, 23, 42, .085);
}

.local-cluster-card.active {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 80%);
}

.local-service-actions,
.home-local-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.local-service-actions a,
.home-local-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #14532d;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.local-service-actions a:hover,
.home-local-actions a:hover {
    background: #dcfce7;
}

.local-service-actions.compact a {
    padding: 7px 10px;
}

.local-article-group-card ul {
    display: grid;
    gap: 9px;
    margin: 4px 0 6px;
    padding-left: 18px;
}

.local-article-group-card li a {
    color: #14532d;
    font-weight: 800;
    text-decoration: none;
}

.local-article-group-card li a:hover {
    text-decoration: underline;
}

.local-filter-cta {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 55%, #eff6ff 100%);
}

.home-local-card {
    border: 1px solid #dcfce7;
}

.local-sidebar-card .dynamic-chip {
    justify-content: center;
}

@media (max-width: 1100px) {
    .local-cluster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .local-service-grid,
    .local-article-group-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .local-cluster-grid {
        grid-template-columns: 1fr;
    }

    .local-service-actions a,
    .home-local-actions a {
        width: 100%;
    }
}

/* V29.7 - Form Lead / Inquiry UX */
.inquiry-card--v297 {
    background: #fff;
    border: 1px solid rgba(15, 76, 58, .12);
    border-radius: 24px;
    padding: clamp(1.2rem, 2vw, 2rem);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
}
.inquiry-card--v297 h2 { margin: .45rem 0 .65rem; color: #062f23; line-height: 1.12; }
.inquiry-card--v297 p { color: #334155; line-height: 1.75; }
.inquiry-form--v297 { display: grid; gap: 1rem; }
.inquiry-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.inquiry-form--v297 label { display: grid; gap: .4rem; font-weight: 800; color: #0f2f25; font-size: .92rem; }
.inquiry-form--v297 input,
.inquiry-form--v297 select,
.inquiry-form--v297 textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: .88rem 1rem;
    background: #fff;
    color: #0f172a;
    font: inherit;
    outline: none;
}
.inquiry-form--v297 input:focus,
.inquiry-form--v297 select:focus,
.inquiry-form--v297 textarea:focus {
    border-color: #0f8f67;
    box-shadow: 0 0 0 4px rgba(15, 143, 103, .12);
}
.inquiry-form__message { grid-column: 1 / -1; }
.inquiry-form__actions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.inquiry-form__actions small { color: #64748b; max-width: 360px; line-height: 1.5; }
.inquiry-form__status { display: none; padding: .85rem 1rem; border-radius: 14px; font-weight: 800; line-height: 1.5; }
.inquiry-form__status.is-loading,
.inquiry-form__status.is-success,
.inquiry-form__status.is-error { display: block; }
.inquiry-form__status.is-loading { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.inquiry-form__status.is-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.inquiry-form__status.is-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.inquiry-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-box .inquiry-card--v297 { box-shadow: none; border: 0; padding: 0; grid-template-columns: 1fr; }
.contact-box .inquiry-card__intro { display: none; }
@media (max-width: 860px) {
    .inquiry-card--v297 { grid-template-columns: 1fr; }
    .inquiry-form__grid { grid-template-columns: 1fr; }
    .inquiry-form__actions { align-items: stretch; }
    .inquiry-form__actions .cta { width: 100%; justify-content: center; }
}

/* V29.8 - Simple Order / Checkout Draft UX */
.order-card--v298 {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #ecfdf5 100%);
    border: 1px solid rgba(15, 76, 58, .14);
    border-radius: 26px;
    padding: clamp(1.2rem, 2vw, 2rem);
    box-shadow: 0 22px 56px rgba(15, 23, 42, .09);
    display: grid;
    grid-template-columns: minmax(230px, .78fr) minmax(300px, 1.22fr);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
}
.order-card--v298 h2 { margin: .45rem 0 .65rem; color: #062f23; line-height: 1.12; }
.order-card--v298 p { color: #334155; line-height: 1.75; }
.order-product-summary {
    display: grid;
    gap: .35rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #bbf7d0;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
}
.order-product-summary strong { color: #064e3b; font-size: 1.02rem; }
.order-product-summary span { color: #0f766e; font-weight: 900; }
.order-product-summary small { color: #64748b; font-weight: 800; }
.order-form--v298 { display: grid; gap: 1rem; }
.order-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.order-form--v298 label { display: grid; gap: .4rem; font-weight: 800; color: #0f2f25; font-size: .92rem; }
.order-form--v298 input,
.order-form--v298 select,
.order-form--v298 textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: .88rem 1rem;
    background: #fff;
    color: #0f172a;
    font: inherit;
    outline: none;
}
.order-form--v298 input:focus,
.order-form--v298 select:focus,
.order-form--v298 textarea:focus {
    border-color: #0f8f67;
    box-shadow: 0 0 0 4px rgba(15, 143, 103, .12);
}
.order-form__message { grid-column: 1 / -1; }
.order-form__actions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.order-form__actions small { color: #64748b; max-width: 420px; line-height: 1.5; }
.order-form__status { display: none; padding: .85rem 1rem; border-radius: 14px; font-weight: 800; line-height: 1.5; }
.order-form__status.is-loading,
.order-form__status.is-success,
.order-form__status.is-error { display: block; }
.order-form__status.is-loading { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.order-form__status.is-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.order-form__status.is-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
@media (max-width: 860px) {
    .order-card--v298 { grid-template-columns: 1fr; }
    .order-form__grid { grid-template-columns: 1fr; }
    .order-form__actions { align-items: stretch; }
    .order-form__actions .cta { width: 100%; justify-content: center; }
}

/* V29.11 - Dedicated Checkout + Order Success Flow */
.checkout-hero--v2911,
.order-success-hero--v2911 {
    background: linear-gradient(135deg, #0f766e 0%, #064e3b 55%, #0f172a 100%);
    color: #fff;
}
.checkout-hero--v2911 .breadcrumb a,
.checkout-hero--v2911 .breadcrumb span,
.order-success-hero--v2911 .breadcrumb a,
.order-success-hero--v2911 .breadcrumb span { color: rgba(255,255,255,.88); }
.checkout-hero--v2911 h1,
.order-success-hero--v2911 h1 { color: #fff; }
.checkout-hero--v2911 p,
.order-success-hero--v2911 p { color: rgba(255,255,255,.9); max-width: 780px; }
.checkout-layout-v2911 {
    display: grid;
    grid-template-columns: minmax(260px, .82fr) minmax(320px, 1.18fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
}
.checkout-summary-card,
.order-success-card,
.order-success-next-card,
.checkout-product-cta-panel {
    background: #fff;
    border: 1px solid rgba(15, 76, 58, .12);
    border-radius: 26px;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    box-shadow: 0 22px 60px rgba(15,23,42,.08);
}
.checkout-summary-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    margin: .85rem 0 1rem;
    border: 1px solid #e2e8f0;
}
.checkout-summary-card h2,
.order-success-card h2,
.order-success-next-card h2,
.checkout-product-cta-panel h2 {
    color: #062f23;
    margin: .5rem 0 .7rem;
    line-height: 1.13;
}
.checkout-price {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 950;
    color: #0f766e;
    margin: .2rem 0 .9rem;
}
.checkout-summary-list,
.order-success-summary {
    display: grid;
    gap: .65rem;
    margin: 1rem 0;
}
.checkout-summary-list span,
.order-success-summary span {
    display: grid;
    grid-template-columns: minmax(110px, .65fr) minmax(120px, 1fr);
    gap: .7rem;
    padding: .78rem .85rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    line-height: 1.45;
}
.checkout-summary-list strong,
.order-success-summary strong { color: #0f172a; }
.checkout-trust-list {
    display: grid;
    gap: .55rem;
    margin-top: 1rem;
    color: #475569;
    font-weight: 800;
    font-size: .9rem;
}
.checkout-form-wrap .order-card--v298 {
    box-shadow: 0 22px 60px rgba(15,23,42,.08);
}
.form-consent-check {
    display: flex !important;
    align-items: flex-start;
    gap: .65rem !important;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155 !important;
    font-weight: 800 !important;
    line-height: 1.55;
}
.form-consent-check input {
    width: auto !important;
    min-width: 18px;
    margin-top: .18rem;
    accent-color: #0f766e;
}
.order-success-grid-v2911 {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(260px, .8fr);
    gap: clamp(1rem, 2vw, 1.4rem);
    align-items: start;
}
.order-success-card h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -.04em;
    color: #0f766e;
}
.order-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.1rem;
}
.order-success-next-card ol {
    display: grid;
    gap: .8rem;
    padding-left: 1.2rem;
    color: #334155;
    line-height: 1.7;
}
.order-success-note {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #065f46;
    font-weight: 800;
    line-height: 1.55;
}
.order-success-note.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.checkout-product-cta-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}
.checkout-product-cta-panel p { color: #475569; margin: 0; line-height: 1.7; }
@media (max-width: 920px) {
    .checkout-layout-v2911,
    .order-success-grid-v2911 { grid-template-columns: 1fr; }
    .checkout-product-cta-panel { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
    .checkout-summary-list span,
    .order-success-summary span { grid-template-columns: 1fr; }
    .order-success-actions .cta,
    .checkout-product-cta-panel .cta { width: 100%; justify-content: center; }
}

/* =========================================
V29.27.1 - PUBLIC ARTICLE CARD CSS POLISH
Fix for homepage, product detail, article detail, and dynamic landing article blocks.
========================================= */
.cards3 > .article-card,
.cards4 > .article-card,
.dynamic-card-grid > .article-card,
.section .cards3 .article-card,
.section .cards4 .article-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 76, 46, .10) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .075) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.cards3 > .article-card:hover,
.cards4 > .article-card:hover,
.dynamic-card-grid > .article-card:hover,
.section .cards3 .article-card:hover,
.section .cards4 .article-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(22, 163, 74, .28) !important;
    box-shadow: 0 24px 62px rgba(15, 23, 42, .105) !important;
}

.article-card .card-image,
.article-card .article-image {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}

.article-card .card-image a,
.article-card .article-image a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
}

.article-card .card-image img,
.article-card .article-image img,
.cards3 .article-card img,
.dynamic-card-grid .article-card img {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    max-height: 230px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    transition: transform .45s ease !important;
}

.article-card:hover .card-image img,
.article-card:hover .article-image img {
    transform: scale(1.035) !important;
}

.article-card .card-content,
.article-card .article-content-card {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 22px !important;
    background: #ffffff !important;
}

.article-card .article-category {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}

.article-card .card-title,
.article-card .article-title {
    margin: 0 0 12px !important;
    color: #07351d !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

.article-card .card-title a,
.article-card .article-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.article-card .card-title a:hover,
.article-card .article-title a:hover {
    color: #15803d !important;
}

.article-card .article-excerpt {
    margin: 0 0 16px !important;
    color: #53635a !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
}

.article-card .article-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.article-card .article-meta span,
.article-card .article-meta time {
    color: inherit !important;
    font-weight: 700 !important;
}

.article-card .article-actions {
    margin-top: auto !important;
    padding-top: 4px !important;
}

.article-card .article-readmore-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
    border: 1px solid rgba(21, 128, 61, .88) !important;
    box-shadow: 0 14px 28px rgba(21, 128, 61, .18) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.article-card .article-readmore-button:hover,
.article-card .article-readmore-button:focus-visible {
    color: #ffffff !important;
    filter: brightness(1.05) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 34px rgba(21, 128, 61, .25) !important;
}

.article-card .article-readmore-button:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .65) !important;
    outline-offset: 3px !important;
}

/* Section-level polish for article recommendation blocks reported in V29.27.1 */
.home-article-polish-section .cards3,
.product-related-guide-section .cards3,
.article-related-polish-section .cards3,
.article-latest-polish-section .cards3,
.dynamic-section .dynamic-card-grid {
    align-items: stretch !important;
}

.home-article-polish-section .title,
.product-related-guide-section .title,
.article-related-polish-section .title,
.article-latest-polish-section .title {
    margin-bottom: 12px !important;
}

@media (max-width: 991px) {
    .cards3 > .article-card,
    .cards4 > .article-card,
    .dynamic-card-grid > .article-card,
    .section .cards3 .article-card,
    .section .cards4 .article-card {
        border-radius: 22px !important;
    }

    .article-card .card-image img,
    .article-card .article-image img,
    .cards3 .article-card img,
    .dynamic-card-grid .article-card img {
        height: 220px !important;
        max-height: 220px !important;
    }
}

@media (max-width: 640px) {
    .article-card .card-content,
    .article-card .article-content-card {
        padding: 18px !important;
    }

    .article-card .card-title,
    .article-card .article-title {
        font-size: 19px !important;
    }

    .article-card .card-image img,
    .article-card .article-image img,
    .cards3 .article-card img,
    .dynamic-card-grid .article-card img {
        height: 210px !important;
        max-height: 210px !important;
    }
}