/*====================================================

MALLAMIBRO KONCEPTS LTD
Premium Website Rebuild

Version : 1.1A

======================================================*/


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

:root{

    --primary:#0b2f22;
    --primary-light:#157347;
    --primary-dark:#071d15;

    --accent:#e53935;

    --white:#ffffff;

    --black:#111111;

    --light:#f8faf8;

    --gray:#6b7280;

    --border:#d9e4dc;

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

    --shadow-hover:0 18px 45px rgba(0,0,0,.15);

    --radius:18px;

    --transition:.35s ease;

    --container:1280px;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#ffffff;

    color:#222;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}


/*======================================================
IMAGES
======================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


/*======================================================
LISTS
======================================================*/

ul{

    list-style:none;

}


/*======================================================
CONTAINER
======================================================*/

.container{

    width:min(94%,var(--container));

    margin:auto;

}


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

section{

    padding:90px 0;

}


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

h1{

    font-size:3.4rem;

    font-weight:900;

    line-height:1.1;

    color:var(--primary);

}

h2{

    font-size:2.4rem;

    font-weight:800;

    color:var(--primary);

    margin-bottom:18px;

}

h3{

    font-size:1.4rem;

    font-weight:700;

    color:var(--primary);

}

p{

    color:#444;

    font-size:1rem;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn:hover{

    background:var(--primary-light);

    transform:translateY(-3px);

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

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

.site-header{

    position:sticky;

    top:0;

    z-index:9999;

    background:#0b2f22;

    box-shadow:0 6px 24px rgba(0,0,0,.08);

}

/*==========================
TOP BAR
==========================*/

.site-topbar{

    background:#071b13;

    color:#fff;

    font-size:.84rem;

}

.topbar-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

}

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

.header-main{

    background:rgba(11,47,34,.96);

    backdrop-filter:blur(10px);

}

.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    gap:40px;

}

/*==========================
BRAND
==========================*/

.brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.brand-logo{

    width:72px;

    height:72px;

    object-fit:contain;

    transition:.35s;

}

.brand-content{

    display:flex;

    flex-direction:column;

}

.brand-title{

    font-size:2rem;

    font-weight:900;

    color:#fff;

    letter-spacing:1px;

    line-height:1.1;

    margin:0;

}

.brand-tagline{

    margin-top:6px;

    color:#d9ffe6;

    font-size:.92rem;

    letter-spacing:.3px;

}

/*==========================
NAVIGATION
==========================*/

.main-navigation{

    margin-left:auto;

}

.nav-list{

    display:flex;

    align-items:center;

    gap:28px;

}

.nav-list a{

    color:#fff;

    font-weight:700;

    position:relative;

    padding:8px 0;

}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:#22c55e;

    transition:.35s;

}

.nav-list a:hover{

    color:#c7ffd9;

}

.nav-list a:hover::after{

    width:100%;

}

/*==========================
CHECKOUT BUTTON
==========================*/

.nav-cta{

    background:#22c55e;

    color:#fff !important;

    padding:12px 22px !important;

    border-radius:999px;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

.nav-cta::after{

    display:none;

}

.nav-cta:hover{

    background:#15803d;

    transform:translateY(-2px);

}

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

.mobile-toggle{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

}

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

@media(max-width:992px){

.brand-title{

font-size:1.6rem;

}

.brand-logo{

width:60px;

height:60px;

}

.nav-list{

gap:18px;

}

}

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

@media(max-width:768px){

.header-inner{

flex-wrap:wrap;

}

.mobile-toggle{

display:block;

}

.main-navigation{

width:100%;

}

.nav-list{

display:none;

flex-direction:column;

align-items:flex-start;

padding-top:20px;

gap:18px;

}

.brand-logo{

width:52px;

height:52px;

}

.brand-title{

font-size:1.15rem;

}

.brand-tagline{

display:none;

}

}/*======================================================
HEADER ANIMATIONS
Version 1.1C
======================================================*/

/* Scroll Effect */

.site-header.scrolled{

    background:rgba(7,29,21,.97);

    backdrop-filter:blur(16px);

    box-shadow:0 18px 45px rgba(0,0,0,.18);

    transition:all .35s ease;

}

.site-header.scrolled .header-main{

    padding:0;

}

.site-header.scrolled .brand-logo{

    width:60px;

    height:60px;

}

.site-header.scrolled .brand-title{

    font-size:1.75rem;

}

/*=========================================
Navigation Active State
=========================================*/

.nav-list a.active{

    color:#5BFF99;

}

.nav-list a.active::after{

    width:100%;

}

/*=========================================
Navigation Hover
=========================================*/

.nav-list li{

    position:relative;

}

.nav-list a{

    transition:

    color .35s ease,

    transform .35s ease;

}

.nav-list a:hover{

    transform:translateY(-2px);

}

/*=========================================
Checkout Button
=========================================*/

.nav-cta{

    transition:

    background .35s,

    transform .35s,

    box-shadow .35s;

}

.nav-cta:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(0,0,0,.25);

}

/*=========================================
Logo Hover
=========================================*/

.brand-logo{

    transition:

    transform .35s ease,

    filter .35s ease;

}

.brand:hover .brand-logo{

    transform:rotate(-3deg) scale(1.04);

}

/*=========================================
Brand Text
=========================================*/

.brand-title{

    transition:.35s;

}

.brand:hover .brand-title{

    color:#A8FFD0;

}

/*=========================================
Top Bar
=========================================*/

.site-topbar{

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

}

/*=========================================
Desktop Alignment
=========================================*/

@media(min-width:992px){

.nav-list{

align-items:center;

}

}
/*==================================================
VERSION 1.2
HERO
==================================================*/

.hero{

    padding:90px 0;

    background:linear-gradient(
        135deg,
        #f8fcf9 0%,
        #eef8f2 100%
    );

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.hero-badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:#dff8e8;

    color:#157347;

    font-weight:700;

    margin-bottom:24px;

    font-size:.9rem;

}

.hero-content h1{

    font-size:3.4rem;

    line-height:1.1;

    margin-bottom:24px;

}

.hero-content p{

    font-size:1.15rem;

    color:#555;

    max-width:650px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border:2px solid var(--primary);

    border-radius:999px;

    color:var(--primary);

    font-weight:700;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

    font-weight:600;

    color:#157347;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:520px;

    object-fit:contain;

    filter:drop-shadow(
        0 30px 60px
        rgba(0,0,0,.18)
    );

    transition:.4s;

}

.hero-image img:hover{

    transform:translateY(-10px);

}

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

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-content p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.hero-image{

margin-top:20px;

}

}

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

@media(max-width:768px){

.hero{

padding:70px 0;

}

.hero-content h1{

font-size:2.35rem;

}

.hero-content p{

font-size:1rem;

}

.hero-features{

flex-direction:column;

gap:14px;

align-items:center;

}

.hero-image img{

max-width:360px;

}

}
/*==================================================
VERSION 1.3
DELIVERY NETWORK
==================================================*/

.delivery-section{

    background:#ffffff;

    padding:100px 0;

}

.section-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-badge{

    display:inline-block;

    background:#dff8e8;

    color:#157347;

    padding:10px 20px;

    border-radius:40px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:18px;

}

.section-heading h1,
.section-heading h2{

    margin-bottom:18px;

}

.section-heading p{

    color:#666;

    font-size:1.05rem;

}

/*==========================
SECTION CTA (View All / View Full buttons)
==========================*/

.section-cta{

    text-align:center;

    margin-top:20px;

}

/*==========================
COMING SOON PLACEHOLDER PAGES
==========================*/

.coming-soon-section{

    padding:140px 20px;

    text-align:center;

    min-height:50vh;

    display:flex;

    align-items:center;

    justify-content:center;

}

.coming-soon-title{

    font-size:3rem;

    font-weight:800;

    color:var(--primary);

    letter-spacing:.5px;

}

.coming-soon-section p{

    margin-top:16px;

    color:#666;

    font-size:1.1rem;

    max-width:520px;

    margin-left:auto;

    margin-right:auto;

}

/*==========================
RETURN & REFUND POLICY PAGE
==========================*/

.policy-section{

    padding:100px 20px 120px;

}

.policy-content{

    max-width:800px;

    margin:0 auto;
}

.back-link{

    display:inline-block;

    margin-bottom:30px;

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    text-transform:uppercase;

    font-size:.8rem;

    letter-spacing:.5px;

}

.back-link:hover{

    text-decoration:underline;

}

.policy-content h1{

    font-size:1.9rem;

    border-bottom:4px solid var(--primary);

    padding-bottom:14px;

    margin-bottom:12px;

}

.policy-content .policy-updated{

    color:var(--gray);

    font-weight:700;

    margin-bottom:30px;

}

.policy-content h2{

    font-size:1.1rem;

    text-transform:uppercase;

    letter-spacing:.4px;

    margin-top:40px;

    margin-bottom:14px;

    border-bottom:2px solid var(--border);

    padding-bottom:8px;

}

.policy-content p{

    margin-bottom:14px;

    color:#333;
}

.policy-content ul{

    padding-left:22px;

    margin-bottom:14px;

}

.policy-content li{

    margin-bottom:12px;

    color:#333;
}

.address-box{

    margin-top:40px;

    padding:24px;

    border:1px solid var(--border);

    background:var(--light);

    border-radius:var(--radius);
}

.address-box p{

    margin-bottom:6px;
}

.delivery-grid{

    display:grid;

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

    gap:35px;

}

.delivery-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    border:1px solid #e6ece8;

    box-shadow:var(--shadow);

    transition:.35s;

    text-align:center;

}

.delivery-card:hover{

    transform:translateY(-10px);

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

}

.delivery-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#0b2f22;

    color:#fff;

    font-size:2rem;

    display:flex;

    align-items:center;

    justify-content:center;

}

.delivery-card h3{

    margin-bottom:18px;

}

.delivery-card p{

    color:#666;

}

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

@media(max-width:992px){

.delivery-grid{

grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

.delivery-section{

padding:80px 0;

}

.delivery-card{

padding:35px 25px;

}

.section-heading h1,
.section-heading h2{

font-size:2rem;

}

}
/*==================================================
VERSION 1.4
CORPORATE IDENTITY
==================================================*/

.identity-section{

    background:#f8fbf9;

    padding:110px 0;

}

.statement-card{

    background:#0b2f22;

    color:#ffffff;

    padding:45px;

    border-radius:24px;

    margin-bottom:60px;

    text-align:center;

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

}

.statement-card h3{

    color:#ffffff;

    font-size:2rem;

    margin-bottom:20px;

}

.statement-card p{

    color:#eef8f2;

    font-size:1.1rem;

    max-width:820px;

    margin:auto;

}

.identity-grid{

    display:grid;

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

    gap:35px;

    margin-bottom:70px;

}

.identity-card{

    background:#ffffff;

    padding:45px;

    border-radius:24px;

    box-shadow:var(--shadow);

    transition:.35s;

    border:1px solid #e6ece8;

}

.identity-card:hover{

    transform:translateY(-8px);

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

}

.identity-card.featured{

    background:linear-gradient(
        135deg,
        #0b2f22,
        #157347
    );

    color:#ffffff;

}

.identity-card.featured h3,

.identity-card.featured p{

    color:#ffffff;

}

.identity-icon{

    width:80px;

    height:80px;

    background:#157347;

    color:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:25px;

}

.identity-card.featured .identity-icon{

    background:#ffffff;

    color:#157347;

}

.values-wrapper{

    text-align:center;

}

.values-wrapper h3{

    font-size:2rem;

    margin-bottom:40px;

}

.values-grid{

    display:grid;

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

    gap:25px;

}

.value-box{

    background:#ffffff;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.value-box:hover{

    transform:translateY(-6px);

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

}

.value-box h4{

    color:var(--primary);

    margin-bottom:15px;

}

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

@media(max-width:992px){

.identity-grid{

grid-template-columns:1fr;

}

.values-grid{

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

}

}

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

@media(max-width:768px){

.identity-section{

padding:80px 0;

}

.statement-card{

padding:30px;

}

.statement-card h3{

font-size:1.6rem;

}

.values-grid{

grid-template-columns:1fr;

}

.identity-card{

padding:35px;

}

}
/*==================================================
VERSION 1.5
PRODUCT CATALOGUE
==================================================*/

.products-section{

    background:#ffffff;

    padding:110px 0;

}

.products-grid{

    display:grid;

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

    gap:35px;

}

.product-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #e6ece8;

    box-shadow:var(--shadow);

    transition:all .35s ease;

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-10px);

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

}

.product-image{

    height:260px;

    overflow:hidden;

    background:#f7faf8;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

.product-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex-grow:1;

}

.product-body h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.product-body p{

    color:#666;

    margin-bottom:24px;

    flex-grow:1;

}

.product-body .btn{

    width:100%;

    justify-content:center;

}

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

@media(max-width:992px){

.products-grid{

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

}

}

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

@media(max-width:768px){

.products-section{

padding:80px 0;

}

.products-grid{

grid-template-columns:1fr;

gap:25px;

}

.product-image{

height:230px;

}

.product-body{

padding:24px;

}

}
/*==================================================
VERSION 1.6
PORTFOLIO
==================================================*/

.portfolio-section{

    padding:110px 0;

    background:#f8fbf9;

}

.portfolio-grid{

    display:grid;

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

    gap:35px;

}

.portfolio-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:all .35s ease;

    border:1px solid #e6ece8;

    scroll-margin-top:120px;

}

.portfolio-card:hover{

    transform:translateY(-10px);

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

}

.portfolio-image{

    height:260px;

    overflow:hidden;

    background:#eef4f0;

}

.portfolio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.portfolio-card:hover .portfolio-image img{

    transform:scale(1.08);

}

.portfolio-content{

    padding:28px;

}

.portfolio-category{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:#dff8e8;

    color:#157347;

    font-size:.82rem;

    font-weight:700;

    margin-bottom:18px;

}

.portfolio-content h3{

    margin-bottom:15px;

}

.portfolio-content p{

    color:#666;

}

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

@media(max-width:992px){

.portfolio-grid{

grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

.portfolio-section{

padding:80px 0;

}

.portfolio-image{

height:220px;

}

.portfolio-content{

padding:22px;

}

}
/*==================================================
VERSION 1.7
REVIEWS
==================================================*/

.reviews-section{

    padding:110px 0;

    background:#ffffff;

}

.trust-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}

/*==========================
Review Widget
==========================*/

.review-widget{

    background:#fff;

    border-radius:24px;

    padding:25px;

    box-shadow:var(--shadow);

    border:1px solid #e6ece8;

    min-height:520px;

}

/*==========================
Trust Card
==========================*/

.trust-card{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

    padding:40px;

    border-radius:24px;

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

    position:sticky;

    top:120px;

}

.trust-card h3{

    color:#fff;

    margin-bottom:25px;

    font-size:1.6rem;

}

.trust-card ul{

    margin-bottom:35px;

}

.trust-card li{

    padding:12px 0;

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

    font-size:1rem;

}

.trust-card .btn{

    width:100%;

    background:#fff;

    color:var(--primary);

}

.trust-card .btn:hover{

    background:#f3f3f3;

}

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

@media(max-width:992px){

.trust-grid{

grid-template-columns:1fr;

}

.trust-card{

position:static;

}

}

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

@media(max-width:768px){

.reviews-section{

padding:80px 0;

}

.review-widget{

min-height:auto;

padding:20px;

}

.trust-card{

padding:30px;

}

}
/*==================================================
VERSION 1.8
PREMIUM FOOTER
==================================================*/

.site-footer{

    background:#071d15;

    color:#d9e8df;

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1.3fr 1.4fr;

    gap:45px;

    margin-bottom:60px;

}

.footer-logo{

    width:90px;

    margin-bottom:20px;

}

.footer-column h3,

.footer-column h4{

    color:#ffffff;

    margin-bottom:20px;

}

.footer-column p{

    color:#c7d7cf;

    line-height:1.8;

    margin-bottom:20px;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    color:#d9e8df;

    transition:.3s;

}

.footer-column a:hover{

    color:#4ade80;

}

.footer-social{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

.footer-social a{

    background:#0b2f22;

    padding:10px 16px;

    border-radius:999px;

    transition:.3s;

}

.footer-social a:hover{

    background:#157347;

    color:#ffffff;

}

.footer-bottom{

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

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom a{

    color:#4ade80;

    font-weight:600;

}

.footer-bottom p{

    margin:0;

    color:#c7d7cf;

}

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

@media(max-width:992px){

.footer-grid{

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

}

}

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

@media(max-width:768px){

.site-footer{

padding:70px 0 25px;

}

.footer-grid{

grid-template-columns:1fr;

gap:35px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-logo{

width:75px;

}

}
/*==================================================
VERSION 2.0
GLOBAL DESIGN POLISH
==================================================*/

/* ---------- Design Tokens ---------- */

:root{

    --primary:#0b5d3b;

    --primary-dark:#083f29;

    --primary-light:#16a34a;

    --accent:#22c55e;

    --gold:#d4af37;

    --white:#ffffff;

    --light:#f8faf8;

    --light-grey:#eef4f0;

    --text:#1d2b22;

    --text-light:#5f6d65;

    --border:#dbe7df;

    --radius:22px;

    --radius-small:12px;

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

    --shadow-hover:
        0 18px 45px rgba(0,0,0,.14);

    --transition:.35s ease;

}

/* ---------- Better Selection ---------- */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ---------- Better Images ---------- */

img{

    display:block;

    max-width:100%;

    height:auto;

}

/* ---------- Better Links ---------- */

a{

    transition:all var(--transition);

}

/* ---------- Cleaner Paragraphs ---------- */

p{

    line-height:1.8;

}

/* ---------- Better Headings ---------- */

h1,
h2,
h3,
h4{

    color:var(--text);

    font-weight:800;

    letter-spacing:-.4px;

}

/* ---------- Card Hover ---------- */

.product-card,
.portfolio-card,
.delivery-card,
.identity-card,
.value-box{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.product-card:hover,
.portfolio-card:hover,
.delivery-card:hover,
.identity-card:hover,
.value-box:hover{

    border-color:#b9d9c6;

}

/* ---------- Uniform Section Spacing ---------- */

section{

    position:relative;

    overflow:hidden;

}

/* ---------- Soft Decorative Background ---------- */

section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
        rgba(34,197,94,.05),
        transparent 70%
    );

    top:-200px;

    right:-180px;

    pointer-events:none;

}

/* ---------- Better Buttons ---------- */

.btn,
.btn-outline{

    min-height:52px;

    font-weight:700;

    border-radius:999px;

    transition:all .35s ease;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn:active{

    transform:translateY(0);

}

.btn-outline:hover{

    transform:translateY(-3px);

}

/* ---------- Better Focus ---------- */

button:focus-visible,
a:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:3px;

}

/* ---------- Smooth Image Zoom ---------- */

.product-image img,
.portfolio-image img,
.hero-image img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/* ---------- Scroll Offset ---------- */

html{

    scroll-padding-top:95px;

}

/* ---------- Better Lists ---------- */

ul{

    padding-left:20px;

}

/* ---------- Cleaner Horizontal Rule ---------- */

hr{

    border:none;

    border-top:1px solid var(--border);

    margin:50px 0;

}
/*==================================================
VERSION 2.1
PREMIUM MICRO-INTERACTIONS
==================================================*/

/*---------------------------------
Global Smooth Transition
---------------------------------*/

*{

    transition:
        background-color .30s ease,
        color .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        transform .30s ease;

}

/*---------------------------------
Image Lift
---------------------------------*/

.hero-image img,
.product-image img,
.portfolio-image img{

    will-change:transform;

}

.hero-image:hover img{

    transform:
        translateY(-10px)
        scale(1.02);

}

/*---------------------------------
Section Headings
---------------------------------*/

.section-heading{

    position:relative;

}

.section-heading h1,
.section-heading h2{

    display:inline-block;

    position:relative;

    padding-bottom:18px;

}

.section-heading h1::after,
.section-heading h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:90px;

    height:5px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

}

/*---------------------------------
Cards
---------------------------------*/

.product-card,
.delivery-card,
.identity-card,
.portfolio-card,
.value-box{

    overflow:hidden;

}

.product-card::before,
.delivery-card::before,
.identity-card::before,
.portfolio-card::before,
.value-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.product-card:hover::before,
.delivery-card:hover::before,
.identity-card:hover::before,
.portfolio-card:hover::before,
.value-box:hover::before{

    transform:scaleX(1);

}

/*---------------------------------
Buttons
---------------------------------*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn:hover::before{

    left:130%;

    transition:.7s;

}

/*---------------------------------
Navigation
---------------------------------*/

.nav-list a{

    position:relative;

}

.nav-list a:hover{

    letter-spacing:.4px;

}

/*---------------------------------
Footer Links
---------------------------------*/

.footer-column a{

    display:inline-block;

}

.footer-column a:hover{

    transform:translateX(6px);

}

/*---------------------------------
Logo Animation
---------------------------------*/

.brand-logo{

    animation:logoFloat 5s ease-in-out infinite;

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

/*---------------------------------
Badge Pulse
---------------------------------*/

.section-badge{

    animation:badgeGlow 4s infinite;

}

@keyframes badgeGlow{

0%{

box-shadow:0 0 0 rgba(34,197,94,0);

}

50%{

box-shadow:0 0 18px rgba(34,197,94,.20);

}

100%{

box-shadow:0 0 0 rgba(34,197,94,0);

}

}
/*==================================================
VERSION 2.2
MOBILE EXPERIENCE OPTIMIZATION
==================================================*/

/*==================================================
LARGE TABLETS
==================================================*/

@media (max-width:1024px){

.container{

    width:min(95%,1200px);

}

.hero-grid{

    gap:45px;

}

.products-grid,
.portfolio-grid{

    gap:28px;

}

}


/*==================================================
TABLETS
==================================================*/

@media (max-width:992px){

section{

    padding:80px 0;

}

.header-inner{

    gap:20px;

}

.brand{

    flex:1;

}

.hero{

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.hero-image{

    margin-top:30px;

}

.hero-image img{

    max-width:420px;

}

.section-heading{

    margin-bottom:45px;

}

.footer-grid{

    gap:35px;

}

}


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

@media (max-width:768px){

html{

    font-size:15px;

}

.container{

    width:94%;

}

section{

    padding:70px 0;

}

/* Typography */

h1{

    font-size:2.2rem;

}

h2{

    font-size:1.9rem;

}

h3{

    font-size:1.3rem;

}

p{

    font-size:1rem;

    line-height:1.8;

}

/* Header */

.site-topbar{

    text-align:center;

}

.topbar-inner{

    flex-direction:column;

    gap:4px;

}

.header-inner{

    padding:14px 0;

}

.brand{

    gap:12px;

}

.brand-logo{

    width:48px;

    height:48px;

}

.brand-title{

    font-size:1.1rem;

}

.brand-tagline{

    display:none;

}

/* Navigation */

.nav-list.show{

    display:flex;

    width:100%;

}

.nav-list a{

    display:block;

    width:100%;

    padding:14px 0;

}

/* Hero */

.hero-content{

    text-align:center;

}

.hero-content p{

    margin-left:auto;

    margin-right:auto;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.btn,
.btn-outline{

    width:100%;

    min-height:52px;

}

/* Cards */

.product-card,
.delivery-card,
.identity-card,
.portfolio-card,
.value-box{

    border-radius:18px;

}

.product-image{

    height:220px;

}

.portfolio-image{

    height:220px;

}

.product-body{

    padding:22px;

}

.portfolio-content{

    padding:22px;

}

/* Reviews */

.review-widget{

    padding:18px;

}

.trust-card{

    padding:28px;

}

/* Footer */

.footer-column{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    text-align:center;

}

}


/*==================================================
SMALL PHONES
==================================================*/

@media (max-width:480px){

html{

    font-size:14px;

}

.brand-title{

    font-size:1rem;

}

.hero{

    padding:60px 0;

}

.hero-content h1{

    font-size:1.9rem;

}

.hero-image img{

    max-width:300px;

}

.section-badge{

    font-size:.8rem;

    padding:8px 16px;

}

.product-image{

    height:190px;

}

.portfolio-image{

    height:190px;

}

.footer-logo{

    width:65px;

}

}


/*==================================================
TOUCH DEVICES
==================================================*/

@media (hover:none){

.product-card:hover,
.delivery-card:hover,
.identity-card:hover,
.portfolio-card:hover,
.value-box:hover{

    transform:none;

}

.btn:hover{

    transform:none;

}

}
/*==================================================
VERSION 2.3
PRODUCTION OPTIMIZATION
==================================================*/

/* ---------- Faster Rendering ---------- */

html{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* ---------- Responsive Media ---------- */

img,
video{

    max-width:100%;

    height:auto;

}

/* ---------- Form Controls ---------- */

button,
input,
textarea,
select{

    font:inherit;

}

/* ---------- Prevent Overflow ---------- */

body{

    overflow-x:hidden;

}

/* ---------- Better Anchor Offset ---------- */

[id]{

    scroll-margin-top:100px;

}

/* ---------- Accessibility ---------- */

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}

/* ---------- Better SVG ---------- */

svg{

    display:block;

}

/* ---------- Focus ---------- */

:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:4px;

}

/* ---------- Tables ---------- */

table{

    width:100%;

    border-collapse:collapse;

}

/* ---------- Selection ---------- */

::selection{

background:var(--primary);

color:#fff;

}

/*======================================================
BLOG POST TEMPLATE
Version 1.0
======================================================*/

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

.post-hero{

    background:linear-gradient(
        180deg,
        var(--light),
        #ffffff
    );

    padding:70px 0 50px;

    border-bottom:1px solid var(--border);

}

.post-category-badge{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    padding:8px 20px;

    border-radius:999px;

    margin-bottom:22px;

}

.post-title{

    max-width:900px;

    margin-bottom:22px;

}

.post-excerpt{

    max-width:750px;

    font-size:1.15rem;

    color:var(--gray);

    margin-bottom:26px;

}

.post-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

    color:var(--gray);

    font-size:.92rem;

}

.post-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.post-meta .dot{

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--gray);

}

/*==========================
FEATURED IMAGE
==========================*/

.post-featured-image{

    margin-top:40px;

}

.post-featured-image img{

    width:100%;

    max-height:520px;

    object-fit:cover;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/*==========================
POST BODY LAYOUT
==========================*/

.post-body-section{

    padding:70px 0 100px;

}

.post-body-grid{

    display:grid;

    grid-template-columns:minmax(0,780px);

    justify-content:center;

    gap:60px;

}

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

.post-content h2{

    margin-top:48px;

    font-size:1.9rem;

}

.post-content h3{

    margin-top:36px;

    margin-bottom:12px;

}

.post-content p{

    margin-bottom:22px;

    font-size:1.08rem;

    color:#333;

}

.post-content ul,
.post-content ol{

    margin:0 0 22px 22px;

    color:#333;

}

.post-content ul{

    list-style:disc;

}

.post-content ol{

    list-style:decimal;

}

.post-content li{

    margin-bottom:10px;

    font-size:1.08rem;

}

.post-content img{

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin:30px 0;

}

.post-content a{

    color:var(--primary);

    font-weight:700;

    text-decoration:underline;

}

.post-content a:hover{

    color:var(--primary-light);

}

.post-content blockquote{

    border-left:4px solid var(--accent);

    background:var(--light);

    padding:22px 28px;

    margin:30px 0;

    border-radius:0 var(--radius) var(--radius) 0;

    font-style:italic;

    color:var(--primary-dark);

}

.post-content strong{

    color:var(--primary);

}

.post-content hr{

    border:none;

    border-top:1px solid var(--border);

    margin:40px 0;

}

/*==========================
AUTHOR BOX
==========================*/

.post-author-box{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:50px;

    padding:26px;

    background:var(--light);

    border-radius:var(--radius);

    border:1px solid var(--border);

}

.post-author-box img{

    width:64px;

    height:64px;

    border-radius:50%;

    object-fit:cover;

}

.post-author-box h4{

    color:var(--primary);

    font-size:1.05rem;

    margin-bottom:4px;

}

.post-author-box p{

    font-size:.92rem;

    margin:0;

}

/*==========================
BACK TO BLOG LINK
==========================*/

.post-back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:30px;

}

.post-back-link:hover{

    color:var(--primary-light);

    transform:translateX(-4px);

}

/*==========================
POST CTA
==========================*/

.post-cta{

    margin-top:60px;

    padding:40px;

    background:var(--primary);

    border-radius:var(--radius);

    text-align:center;

}

.post-cta h3{

    color:#fff;

    margin-bottom:14px;

}

.post-cta p{

    color:#d9ffe6;

    margin-bottom:22px;

}

.post-cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    justify-content:center;

}

.post-cta .btn-outline{

    border-color:#fff;

    color:#fff;

}

.post-cta .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}

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

@media(max-width:768px){

.post-hero{

    padding:50px 0 36px;

}

.post-title{

    font-size:2.1rem;

}

.post-excerpt{

    font-size:1.05rem;

}

.post-content h2{

    font-size:1.6rem;

}

.post-author-box{

    flex-direction:column;

    text-align:center;

}

}


/*======================================================
BLOG INDEX / LISTING PAGE
Version 1.0
======================================================*/

/*==========================
BLOG PAGE HEADER
==========================*/

.blog-hero{

    background:linear-gradient(
        180deg,
        var(--light),
        #ffffff
    );

    padding:80px 0 60px;

    text-align:center;

    border-bottom:1px solid var(--border);

}

.blog-hero h1{

    margin-bottom:16px;

}

.blog-hero p{

    max-width:640px;

    margin:0 auto;

    font-size:1.1rem;

    color:var(--gray);

}

/*==========================
BLOG GRID
==========================*/

.blog-grid-section{

    padding:80px 0 100px;

}

.blog-grid{

    display:grid;

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

    gap:36px;

}

/*==========================
BLOG CARD
==========================*/

.blog-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

    display:flex;

    flex-direction:column;

    position:relative;

}

.blog-card:hover{

    transform:translateY(-8px);

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

}

.blog-card-image{

    height:220px;

    overflow:hidden;

}

.blog-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}

.blog-card:hover .blog-card-image img{

    transform:scale(1.06);

}

.blog-card-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.blog-card-category{

    display:inline-block;

    align-self:flex-start;

    background:var(--light);

    color:var(--primary);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    padding:6px 14px;

    border-radius:999px;

    margin-bottom:14px;

    border:1px solid var(--border);

}

.blog-card-title{

    font-size:1.25rem;

    margin-bottom:12px;

}

.blog-card-title a{

    color:var(--primary);

}

.blog-card-title a:hover{

    color:var(--primary-light);

}

.blog-card-excerpt{

    color:var(--gray);

    font-size:.95rem;

    margin-bottom:20px;

    flex:1;

}

.blog-card-meta{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.82rem;

    color:var(--gray);

    margin-bottom:18px;

}

.blog-card-meta .dot{

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--gray);

}

.blog-card-link{

    font-weight:700;

    color:var(--primary);

    display:inline-flex;

    align-items:center;

    gap:6px;

}

.blog-card-link:hover{

    color:var(--primary-light);

    transform:translateX(4px);

}

/*==========================
FEATURED / FIRST CARD (optional larger layout)
==========================*/

.blog-card.featured{

    grid-column:span 3;

    flex-direction:row;

}

.blog-card.featured .blog-card-image{

    width:45%;

    height:auto;

}

.blog-card.featured .blog-card-body{

    width:55%;

    justify-content:center;

}

.blog-card.featured .blog-card-title{

    font-size:1.7rem;

}

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

@media(max-width:1024px){

.blog-grid{

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

}

.blog-card.featured{

    grid-column:span 2;

}

}

@media(max-width:768px){

.blog-hero{

    padding:60px 0 40px;

}

.blog-grid{

    grid-template-columns:1fr;

    gap:28px;

}

.blog-card.featured{

    grid-column:span 1;

    flex-direction:column;

}

.blog-card.featured .blog-card-image,
.blog-card.featured .blog-card-body{

    width:100%;

}

}


/*======================================================
CONTACT PAGE
Version 1.0
======================================================*/

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

.contact-hero{

    background:linear-gradient(
        180deg,
        var(--light),
        #ffffff
    );

    padding:80px 0 50px;

    text-align:center;

    border-bottom:1px solid var(--border);

}

.contact-hero h1{

    margin-bottom:16px;

}

.contact-hero p{

    max-width:640px;

    margin:0 auto;

    font-size:1.1rem;

    color:var(--gray);

}

/*==========================
CONTACT LAYOUT
==========================*/

.contact-section{

    padding:80px 0 100px;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1.3fr;

    gap:50px;

    align-items:start;

}

/*==========================
CONTACT INFO CARD
==========================*/

.contact-info-card{

    background:var(--light);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:36px;

}

.contact-info-card h2{

    margin-bottom:26px;

}

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-bottom:26px;

}

.contact-info-item:last-child{

    margin-bottom:0;

}

.contact-info-icon{

    flex-shrink:0;

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.1rem;

}

.contact-info-item h4{

    font-size:1rem;

    color:var(--primary);

    margin-bottom:6px;

}

.contact-info-item p,
.contact-info-item a{

    font-size:.95rem;

    color:#333;

    line-height:1.6;

}

.contact-info-item a:hover{

    color:var(--primary);

}

.contact-info-socials{

    display:flex;

    gap:12px;

    margin-top:30px;

    padding-top:30px;

    border-top:1px solid var(--border);

}

.contact-info-socials a{

    flex:1;

    text-align:center;

    padding:10px;

    border-radius:var(--radius);

    background:#fff;

    border:1px solid var(--border);

    font-weight:700;

    font-size:.85rem;

    color:var(--primary);

}

.contact-info-socials a:hover{

    background:var(--primary);

    color:#fff;

}

/*==========================
CONTACT FORM CARD
==========================*/

.contact-form-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:40px;

}

.contact-form-card h2{

    margin-bottom:10px;

}

.contact-form-card > p{

    color:var(--gray);

    margin-bottom:30px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    font-size:.9rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:8px;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border);

    border-radius:12px;

    background:var(--light);

    color:#222;

    font-size:.98rem;

    transition:var(--transition);

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--primary);

    background:#fff;

    outline:none;

}

.form-group textarea{

    resize:vertical;

    min-height:140px;

}

/* Honeypot field — hidden from real visitors */
.form-honeypot{

    position:absolute;

    left:-9999px;

    top:-9999px;

}

.form-submit-btn{

    width:100%;

    justify-content:center;

    border:none;

    cursor:pointer;

}

/*==========================
FORM STATUS BANNER
==========================*/

.form-status-banner{

    display:none;

    padding:16px 20px;

    border-radius:12px;

    margin-bottom:24px;

    font-weight:600;

    font-size:.95rem;

}

.form-status-banner.show{

    display:block;

}

.form-status-banner.success{

    background:#e7f7ec;

    color:#0b5d3b;

    border:1px solid #b7e3c6;

}

.form-status-banner.error{

    background:#fdecea;

    color:#9c1c12;

    border:1px solid #f5c2bd;

}

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

@media(max-width:900px){

.contact-grid{

    grid-template-columns:1fr;

}

.form-row{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-hero{

    padding:60px 0 36px;

}

.contact-form-card{

    padding:28px;

}

.contact-info-card{

    padding:28px;

}

}


/*======================================================
404 PAGE
Version 1.0
======================================================*/

.error-page-section{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:80px 0;

    background:linear-gradient(
        180deg,
        var(--light),
        #ffffff
    );

}

.error-page-content{

    max-width:640px;

    margin:0 auto;

    text-align:center;

}

.error-stamp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:130px;

    height:130px;

    border-radius:50%;

    border:6px solid var(--accent);

    color:var(--accent);

    font-weight:800;

    font-size:2.6rem;

    letter-spacing:1px;

    transform:rotate(-12deg);

    margin-bottom:30px;

    font-family:inherit;

    box-shadow:0 0 0 4px rgba(229,57,53,.08);

}

.error-page-content h1{

    font-size:2.4rem;

    margin-bottom:14px;

}

.error-page-content .error-code{

    display:block;

    font-size:1rem;

    font-weight:700;

    letter-spacing:2px;

    color:var(--gray);

    text-transform:uppercase;

    margin-bottom:8px;

}

.error-page-content p{

    font-size:1.08rem;

    color:var(--gray);

    margin-bottom:16px;

}

.error-page-content p.error-lede{

    font-size:1.2rem;

    color:#333;

    font-weight:600;

}

.error-page-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin-top:32px;

}

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

@media(max-width:768px){

.error-page-content h1{

    font-size:1.9rem;

}

.error-stamp{

    width:110px;

    height:110px;

    font-size:2.1rem;

}

}

/*==================================================
BATCH 1 — SINGLE PRODUCT PAGE (product.php)
==================================================*/

.product-breadcrumb{

    padding:22px 20px 0;

    font-size:.9rem;

    color:var(--gray);

}

.product-breadcrumb a{

    color:var(--primary-light);

    text-decoration:none;

}

.product-breadcrumb a:hover{

    text-decoration:underline;

}

.product-breadcrumb span{

    color:var(--black);

}

.product-detail-section{

    padding:50px 0 100px;

}

.product-detail-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:start;

    margin-bottom:90px;

}

.product-detail-gallery{

    border-radius:var(--radius);

    overflow:hidden;

    background:#f7faf8;

    border:1px solid var(--border);

}

.product-detail-gallery img{

    width:100%;

    height:100%;

    max-height:480px;

    object-fit:cover;

    display:block;

}

.product-detail-info h1,
.product-detail-info h2{

    margin:14px 0 10px;

    font-size:2rem;

}

.product-detail-price{

    font-size:1.6rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:18px;

}

.product-detail-description{

    color:var(--gray);

    line-height:1.7;

    margin-bottom:18px;

}

.product-detail-availability{

    display:inline-block;

    font-weight:600;

    font-size:.9rem;

    padding:6px 14px;

    border-radius:999px;

    margin-bottom:26px;

}

.product-detail-availability.in-stock{

    color:var(--primary-light);

    background:rgba(21,115,71,.1);

}

.product-detail-availability.out-of-stock{

    color:var(--accent);

    background:rgba(229,57,53,.1);

}

.product-detail-actions{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.product-detail-actions .btn,
.product-detail-actions .btn-outline{

    flex:1 1 200px;

    justify-content:center;

}

/*==========================
TABLET / MOBILE
==========================*/

@media(max-width:768px){

.product-detail-grid{

grid-template-columns:1fr;

gap:30px;

margin-bottom:60px;

}

.product-detail-gallery img{

max-height:320px;

}

.product-detail-actions{

flex-direction:column;

}

}

/*==================================================
BATCH 2 — PRODUCT CATALOGUE UPGRADE (products.php)
==================================================*/

.product-filters{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    justify-content:center;

    margin:0 0 50px;

}

.filter-btn{

    font-family:inherit;

    font-size:.9rem;

    font-weight:600;

    padding:10px 22px;

    border-radius:999px;

    border:1px solid var(--border);

    background:#ffffff;

    color:var(--primary);

    cursor:pointer;

    transition:all var(--transition);

}

.filter-btn:hover{

    border-color:var(--primary-light);

    color:var(--primary-light);

}

.filter-btn.active{

    background:var(--primary);

    border-color:var(--primary);

    color:#ffffff;

}

.product-image{

    position:relative;

}

.product-image-badge{

    position:absolute;

    top:14px;

    left:14px;

    background:rgba(11,47,34,.88);

    color:#ffffff;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.03em;

    text-transform:uppercase;

    padding:6px 12px;

    border-radius:999px;

}

.product-card-price{

    font-size:1.2rem;

    font-weight:700;

    color:var(--primary) !important;

    margin-bottom:18px !important;

    flex-grow:0 !important;

}

.products-empty-state{

    text-align:center;

    color:var(--gray);

    padding:40px 0;

}

.products-empty-state a{

    color:var(--primary-light);

    font-weight:600;

}

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

@media(max-width:768px){

.product-filters{

gap:8px;

margin-bottom:35px;

}

.filter-btn{

font-size:.82rem;

padding:8px 16px;

}

}

/*==================================================
BATCH 3 — CHECKOUT REBUILD (checkout.php)
==================================================*/

.checkout-section{

    padding:70px 0 110px;

}

.checkout-wrap{

    max-width:820px;

    margin:0 auto;

}

/*----- Order summary (arrived from a product page) -----*/

.order-summary-card{

    display:flex;

    gap:20px;

    align-items:center;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:20px;

    margin-bottom:45px;

}

.order-summary-card img{

    width:96px;

    height:96px;

    object-fit:cover;

    border-radius:14px;

    flex-shrink:0;

}

.order-summary-label{

    display:block;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--gray);

    margin-bottom:4px;

}

.order-summary-info h3{

    font-size:1.25rem;

    margin-bottom:4px;

}

.order-summary-price{

    font-weight:700;

    color:var(--primary);

    margin-bottom:6px;

}

.order-summary-info a{

    font-size:.85rem;

    color:var(--primary-light);

    text-decoration:none;

}

.order-summary-info a:hover{

    text-decoration:underline;

}

/*----- How to order (first section) -----*/

.how-to-order{

    background:var(--primary);

    color:#fff;

    border-radius:var(--radius);

    padding:34px;

    margin-bottom:45px;

}

.how-to-order-badge{

    display:inline-block;

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

    color:#fff;

    font-size:.75rem;

    font-weight:600;

    letter-spacing:.04em;

    text-transform:uppercase;

    padding:6px 14px;

    border-radius:999px;

    margin-bottom:18px;

}

.how-to-order-list{

    list-style:none;

    counter-reset:how-to-order-counter;

    margin:0 0 26px;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.how-to-order-list li{

    counter-increment:how-to-order-counter;

    display:flex;

    align-items:flex-start;

    gap:14px;

    font-size:1rem;

    line-height:1.65;

    color:rgba(255,255,255,.92);

}

.how-to-order-list li::before{

    content:counter(how-to-order-counter);

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    border-radius:50%;

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

    color:#fff;

    font-weight:700;

    font-size:.85rem;

    margin-top:2px;

}

.how-to-order-list li a{

    color:#fff;

    font-weight:600;

    text-decoration:underline;

}

.how-to-order-list li strong{

    color:#fff;

}

.how-to-order-btn{

    background:#22c55e;

    white-space:nowrap;

}

.how-to-order-btn:hover{

    background:#15803d;

}

/*----- Bank accounts -----*/

.payment-box{

    background:var(--white);

    padding:2.5rem;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    text-align:center;

    margin-bottom:50px;

}

.payment-box h2{

    margin-bottom:10px;

}

.payment-box > p{

    color:var(--gray);

    margin-bottom:26px;

}

.bank-accounts-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

    text-align:left;

}

.bank-account-card{

    background:var(--light);

    border:1px solid var(--border);

    border-radius:14px;

    padding:20px;

}

.bank-account-logo-wrap{

    display:inline-block;

    background:#fff;

    border-radius:8px;

    padding:8px 14px;

    margin-bottom:10px;

    border:1px solid var(--border);

}

.bank-account-logo{

    display:block;

    height:24px;

    width:auto;

    max-width:130px;

    object-fit:contain;

    object-position:left center;

}

.bank-account-name-bank{

    display:inline-block;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;

    color:var(--primary-light);

    margin-bottom:8px;

}

.bank-account-holder{

    color:var(--gray);

    font-size:.92rem;

    margin-bottom:10px;

}

.bank-account-number-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}

.bank-account-number{

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:.02em;

}

.copy-btn{

    font-family:inherit;

    font-size:.82rem;

    font-weight:600;

    padding:8px 16px;

    border-radius:999px;

    border:1px solid var(--primary);

    background:#fff;

    color:var(--primary);

    cursor:pointer;

    transition:all var(--transition);

    flex-shrink:0;

}

.copy-btn:hover{

    background:var(--primary);

    color:#fff;

}

.copy-btn.copied{

    background:#22c55e;

    border-color:#22c55e;

    color:#fff;

}

/*----- Payment instructions & security notice -----*/

.payment-instructions,
.security-notice{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:2rem;

    margin-bottom:30px;

}

.payment-instructions h3,
.security-notice h3{

    margin-bottom:16px;

}

.payment-instructions ul,
.security-notice ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.payment-instructions li,
.security-notice li{

    padding-left:24px;

    position:relative;

    color:var(--gray);

    line-height:1.6;

    font-size:.94rem;

}

.payment-instructions li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--primary-light);

    font-weight:700;

}

.security-notice{

    background:#fff8f7;

    border-color:#f5d3d1;

}

.security-notice li::before{

    content:"•";

    position:absolute;

    left:6px;

    color:var(--accent);

    font-weight:700;

}

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

@media(max-width:992px){

.how-to-order{

padding:28px;

}

}

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

@media(max-width:768px){

.checkout-section{

padding:50px 0 80px;

}

.order-summary-card{

flex-direction:column;

text-align:center;

}

.how-to-order{

padding:24px 20px;

}

.how-to-order-btn{

width:100%;

justify-content:center;

text-align:center;

}

.bank-accounts-grid{

grid-template-columns:1fr;

}

.payment-box{

padding:1.75rem;

}

.payment-instructions,
.security-notice{

padding:1.5rem;

}

}

/*==================================================
BATCH 4 — INTELLIGENT SEARCH (header widget + results page)
==================================================*/

.search-toggle-wrap{

    position:relative;

}

.search-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

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

    color:#fff;

    font-size:1.15rem;

    cursor:pointer;

    transition:.25s;

}

.search-toggle:hover,
.search-toggle.active{

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

}

.site-search-panel{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    width:360px;

    max-width:88vw;

    background:var(--white);

    border-radius:var(--radius);

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

    border:1px solid var(--border);

    padding:16px;

    opacity:0;

    visibility:hidden;

    transform:translateY(-8px);

    transition:.2s ease;

    z-index:500;

}

.site-search-panel.open{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.site-search-form{

    display:flex;

    align-items:center;

    gap:8px;

    background:var(--light);

    border:1px solid var(--border);

    border-radius:999px;

    padding:6px 6px 6px 18px;

}

.site-search-input{

    flex:1;

    border:none;

    background:none;

    font-size:.95rem;

    color:var(--dark, #111);

    outline:none;

}

.site-search-submit{

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    border-radius:50%;

    border:none;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    flex-shrink:0;

}

.site-search-submit:hover{

    background:var(--primary-light);

}

.site-search-results{

    max-height:60vh;

    overflow-y:auto;

    margin-top:12px;

}

.site-search-hint,
.site-search-empty,
.site-search-loading{

    padding:18px 8px;

    text-align:center;

    color:var(--gray);

    font-size:.88rem;

}

.site-search-group-label{

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:var(--gray);

    padding:10px 8px 6px;

}

.site-search-result{

    display:flex;

    align-items:center;

    gap:12px;

    padding:9px 8px;

    border-radius:12px;

    text-decoration:none;

}

.site-search-result:hover{

    background:var(--light);

}

.site-search-result img{

    width:44px;

    height:44px;

    border-radius:10px;

    object-fit:cover;

    flex-shrink:0;

    background:var(--light);
}

.site-search-result-info{

    min-width:0;

}

.site-search-result-title{

    display:block;

    font-size:.92rem;

    font-weight:600;

    color:var(--primary);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.site-search-result-meta{

    display:block;

    font-size:.78rem;

    color:var(--gray);

}

.site-search-viewall{

    display:block;

    text-align:center;

    padding:10px 8px 4px;

    font-size:.86rem;

    font-weight:700;

    color:var(--primary-light);

    border-top:1px solid var(--border);

    margin-top:8px;

}

/*----- Dedicated search results page (search.php) -----*/

.search-results-section{

    padding:60px 0 100px;

}

.search-results-form{

    max-width:600px;

    margin:0 auto 40px;

    display:flex;

    align-items:center;

    gap:8px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:999px;

    padding:8px 8px 8px 22px;

    box-shadow:var(--shadow);

}

.search-results-form input{

    flex:1;

    border:none;

    outline:none;

    font-size:1rem;

}

.search-results-form button{

    flex-shrink:0;

}

.search-results-summary{

    text-align:center;

    color:var(--gray);

    margin-bottom:36px;

}

.search-results-group{

    margin-bottom:46px;

}

.search-results-group h3{

    font-size:1.15rem;

    margin-bottom:18px;

    padding-bottom:10px;

    border-bottom:2px solid var(--border);
}

.search-results-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

    gap:22px;
}

.search-result-card{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    text-decoration:none;

    box-shadow:var(--shadow);

    transition:.25s;

    display:flex;

    flex-direction:column;
}

.search-result-card:hover{

    transform:translateY(-4px);

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

.search-result-card img{

    width:100%;

    height:150px;

    object-fit:cover;
}

.search-result-card-body{

    padding:16px;
}

.search-result-card-category{

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    color:var(--primary-light);

}

.search-result-card-title{

    font-size:1rem;

    font-weight:700;

    color:var(--primary);

    margin:6px 0;
}

.search-result-card-excerpt{

    font-size:.85rem;

    color:var(--gray);

    line-height:1.5;
}

.search-results-empty{

    text-align:center;

    padding:60px 20px;

    color:var(--gray);
}

.search-results-empty h3{

    color:var(--primary);

    margin-bottom:10px;
}

/*==========================
MOBILE — SEARCH
==========================*/

@media(max-width:768px){

.search-toggle-wrap{

order:1;

margin-left:auto;

}

.mobile-toggle{

order:2;

}

.main-navigation{

order:3;

}

.site-search-panel{

right:-10px;

width:92vw;

}

.search-results-form{

flex-wrap:wrap;

}

}

/*==================================================
BATCH 5 — HOMEPAGE BLOG SPOTLIGHT
==================================================*/

.blog-spotlight{

    position:fixed;

    bottom:24px;

    left:24px;

    width:320px;

    max-width:88vw;

    background:var(--white);

    border-radius:var(--radius);

    box-shadow:0 20px 45px rgba(0,0,0,.22);

    border:1px solid var(--border);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(24px);

    transition:opacity .35s ease, transform .35s ease, visibility .35s;

    z-index:800;

}

.blog-spotlight.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.blog-spotlight-close{

    position:absolute;

    top:8px;

    right:8px;

    width:26px;

    height:26px;

    border-radius:50%;

    border:none;

    background:rgba(11,47,34,.55);

    color:#fff;

    font-size:1.1rem;

    line-height:1;

    cursor:pointer;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

}

.blog-spotlight-close:hover{

    background:rgba(11,47,34,.85);

}

.blog-spotlight-link{

    display:block;

    text-decoration:none;

    color:inherit;

}

.blog-spotlight-image{

    width:100%;

    height:130px;

    overflow:hidden;

    background:#f2f2f2;

}

.blog-spotlight-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.blog-spotlight-body{

    padding:14px 16px 18px;

}

.blog-spotlight-label{

    display:inline-block;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:var(--primary-light);

    margin-bottom:6px;

}

.blog-spotlight-title{

    font-size:.98rem;

    line-height:1.35;

    margin-bottom:6px;

}

.blog-spotlight-excerpt{

    font-size:.82rem;

    color:var(--gray);

    line-height:1.5;

    margin-bottom:8px;

}

.blog-spotlight-cta{

    font-size:.82rem;

    font-weight:700;

    color:var(--primary);

}

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

@media(max-width:768px){

.blog-spotlight{

left:12px;

bottom:12px;

width:calc(100vw - 24px);

}

.blog-spotlight-image{

height:110px;

}

}

/*==================================================
MASTER EDITION v4.0 — HOMEPAGE: POPULAR / NEW ARRIVALS / BLOG TEASER
==================================================*/

.popular-products-section,
.new-arrivals-section{

    background:var(--light);

}

.blog-teaser-section{

    padding:80px 0;

}

.blog-teaser-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:40px;

}

.blog-teaser-card{

    display:block;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    text-decoration:none;

    color:inherit;

    transition:all var(--transition);

}

.blog-teaser-card:hover{

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

    transform:translateY(-4px);

}

.blog-teaser-image{

    height:170px;

    overflow:hidden;

    background:#f2f2f2;

}

.blog-teaser-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.blog-teaser-body{

    padding:18px 20px;

}

.blog-teaser-category{

    display:inline-block;

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--primary-light);

    margin-bottom:6px;

}

.blog-teaser-body h3{

    font-size:1.05rem;

    line-height:1.4;

    margin-bottom:8px;

}

.blog-teaser-meta{

    font-size:.82rem;

    color:var(--gray);

}

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

@media(max-width:768px){

.blog-teaser-grid{

grid-template-columns:1fr;

}

}

/*==================================================
MASTER EDITION v4.0 — BLOG POST: SHARE, RELATED PRODUCTS,
RELATED ARTICLES
==================================================*/

.post-share{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:18px 0;

}

.post-share-label{

    font-weight:600;

    color:var(--gray);

    font-size:.88rem;

}

.post-share-btn{

    font-family:inherit;

    font-size:.82rem;

    font-weight:600;

    padding:7px 14px;

    border-radius:999px;

    border:1px solid var(--border);

    background:#fff;

    color:var(--primary);

    cursor:pointer;

    text-decoration:none;

    transition:all var(--transition);

}

.post-share-btn:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.post-related-products{

    margin-top:40px;

    padding:26px;

    background:var(--light);

    border-radius:var(--radius);

    border:1px solid var(--border);
}

.post-related-products h3{

    margin-bottom:14px;

    font-size:1.2rem;

}

.post-related-products-links{

    display:flex;

    flex-wrap:wrap;

    gap:14px 24px;

}

.post-related-products-links a{

    color:var(--primary-light);

    font-weight:600;

    text-decoration:none;

}

.post-related-products-links a:hover{

    text-decoration:underline;

}

.post-related-articles{

    margin-top:40px;

}

.post-related-articles h3{

    margin-bottom:16px;

    font-size:1.2rem;

}

.post-related-articles-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:16px;
}

.post-related-article-card{

    display:flex;

    gap:12px;

    align-items:center;

    background:#fff;

    border:1px solid var(--border);

    border-radius:12px;

    padding:12px;

    text-decoration:none;

    color:inherit;

    transition:all var(--transition);
}

.post-related-article-card:hover{

    box-shadow:var(--shadow);

    transform:translateY(-2px);
}

.post-related-article-card img{

    width:56px;

    height:56px;

    border-radius:8px;

    object-fit:cover;

    flex-shrink:0;

    background:#f2f2f2;
}

.post-related-article-category{

    display:block;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;

    color:var(--primary-light);

    margin-bottom:2px;
}

.post-related-article-title{

    display:block;

    font-size:.9rem;

    font-weight:600;

    line-height:1.35;
}

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

@media(max-width:768px){

.post-share{

gap:8px;
}

.post-share-btn{

font-size:.78rem;

padding:6px 12px;
}

}

/*==================================================
MASTER EDITION v4.0 — SITE-WIDE UI (site-ui.js)
==================================================*/

/*----- Skip to content (accessibility) -----*/

.skip-to-content{

    position:absolute;

    top:-100px;

    left:12px;

    background:var(--primary);

    color:#fff;

    padding:12px 20px;

    border-radius:8px;

    font-weight:700;

    text-decoration:none;

    z-index:99999;

    transition:top .2s ease;

}

.skip-to-content:focus{

    top:12px;

}

/*----- Focus visibility (accessibility) -----*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{

    outline:3px solid #ffb703;

    outline-offset:2px;

}

/*----- Sticky WhatsApp button -----*/

.sticky-whatsapp-btn{

    position:fixed;

    bottom:24px;

    right:24px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:#22c55e;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    text-decoration:none;

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

    z-index:900;

    transition:transform .2s ease;

}

.sticky-whatsapp-btn:hover{

    transform:scale(1.08);

}

/*----- Back to top button -----*/

.back-to-top-btn{

    position:fixed;

    bottom:94px;

    right:24px;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    border:none;

    font-size:1.3rem;

    cursor:pointer;

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

    z-index:900;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:all .25s ease;

}

.back-to-top-btn.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top-btn:hover{

    background:var(--primary-light);

}

/*----- Scroll-reveal animation -----*/

.reveal{

    opacity:0;

    transform:translateY(24px);

    transition:opacity .6s ease, transform .6s ease;

}

.reveal.revealed{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:768px){

.sticky-whatsapp-btn{

width:48px;

height:48px;

font-size:1.4rem;

bottom:16px;

right:16px;

}

.back-to-top-btn{

width:40px;

height:40px;

font-size:1.1rem;

bottom:76px;

right:16px;

}

}

/*==================================================
MASTER EDITION v4.0 — RECENTLY VIEWED SECTION SPACING
==================================================*/

.related-products-section{

    margin-top:60px;

    padding-top:40px;

    border-top:1px solid var(--border);

}

/*==================================================
MOBILE HEADER COMPACTION FIX
The stylesheet has several overlapping/legacy mobile rules for
the header (inherited from earlier theme layers) that were
fighting each other, letting an oversized logo/title/search
panel win out on some phones and eat up to 80% of the screen.
This block is deliberately placed last and uses !important so
it authoritatively wins over all of that, regardless of which
earlier rule the browser would otherwise pick.
==================================================*/

@media(max-width:768px){

.site-topbar{
    padding:5px 0 !important;
}

.topbar-inner{
    font-size:.7rem !important;
    gap:2px !important;
    line-height:1.3 !important;
}

.header-main{
    padding:8px 0 !important;
}

.header-inner{
    padding:0 !important;
    gap:8px !important;
}

.brand{
    gap:8px !important;
}

.brand-logo{
    width:38px !important;
    height:38px !important;
}

.brand-title{
    font-size:.85rem !important;
    line-height:1.15 !important;
    letter-spacing:.3px !important;
}

.brand-tagline{
    display:none !important;
}

.mobile-toggle{
    font-size:1.4rem !important;
}

.search-toggle{
    width:36px !important;
    height:36px !important;
    font-size:1rem !important;
}

/* The search panel must NEVER add height to the page itself —
   it's meant to float on top of content when opened, never push
   content down. This guarantees zero space when closed, no
   matter what else is happening elsewhere in the cascade. */
.site-search-panel{
    display:none !important;
}

.site-search-panel.open{
    display:block !important;
}

}

@media(max-width:480px){

.brand-title{
    font-size:.78rem !important;
}

.brand-logo{
    width:34px !important;
    height:34px !important;
}

}

/*==================================================
ORDER FORM + CONFIRMATION BANNER (checkout.php)
==================================================*/

.order-confirmation-banner{

    display:flex;

    align-items:flex-start;

    gap:16px;

    background:#e9f7ef;

    border:1px solid #b7e4c7;

    border-radius:var(--radius);

    padding:22px 24px;

    margin-bottom:35px;
}

.order-confirmation-banner.error{

    background:#fdecea;

    border-color:#f5c2bd;
}

.order-confirmation-icon{

    font-size:1.6rem;

    line-height:1;

    flex-shrink:0;
}

.order-confirmation-banner h3{

    font-size:1.1rem;

    margin-bottom:6px;

    color:var(--primary);
}

.order-confirmation-banner.error h3{

    color:#b3261e;
}

.order-confirmation-banner p{

    color:#3c4a3f;

    font-size:.94rem;

    line-height:1.6;
}

.order-confirmation-banner a{

    color:var(--primary);

    font-weight:600;
}

/*----- Order form -----*/

.order-form-box{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:30px 28px;

    margin-bottom:50px;
}

.order-form-box h2{

    font-size:1.4rem;

    margin-bottom:8px;
}

.order-form-intro{

    color:var(--gray);

    margin-bottom:22px;

    font-size:.94rem;
}

.order-form-honeypot{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;
}

.order-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:18px;
}

.order-form-field{

    margin-bottom:18px;

    display:flex;

    flex-direction:column;
}

.order-form-row .order-form-field{

    margin-bottom:0;
}

.order-form-field label{

    font-size:.85rem;

    font-weight:600;

    color:var(--black);

    margin-bottom:6px;
}

.order-form-field input,
.order-form-field select,
.order-form-field textarea{

    font-family:inherit;

    font-size:.95rem;

    padding:12px 14px;

    border:1px solid var(--border);

    border-radius:10px;

    background:#fff;

    color:var(--black);

    outline:none;

    transition:border-color var(--transition);
}

.order-form-field input:focus,
.order-form-field select:focus,
.order-form-field textarea:focus{

    border-color:var(--primary-light);
}

.order-form-field textarea{

    resize:vertical;

    min-height:90px;
}

.order-form-submit{

    width:100%;

    justify-content:center;

    margin-top:6px;

    margin-bottom:14px;
}

.order-form-disclaimer{

    font-size:.8rem;

    color:var(--gray);

    text-align:center;
}

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

@media(max-width:768px){

.order-form-row{

grid-template-columns:1fr;

gap:0;
}

.order-form-box{

padding:22px 18px;
}

.order-confirmation-banner{

flex-direction:column;

gap:10px;
}

}

/*==================================================
ORDER FORM — IMAGE UPLOAD FIELD
==================================================*/

.order-form-field input[type="file"]{

    font-family:inherit;

    font-size:.88rem;

    padding:10px 12px;

    border:1px dashed var(--border);

    border-radius:10px;

    background:var(--light);

    cursor:pointer;
}

.order-form-hint{

    font-size:.8rem;

    color:var(--gray);

    margin-top:6px;
}

.order-form-file-list{

    margin-top:8px;

    font-size:.82rem;

    color:var(--primary);
}

.order-form-file-error{

    color:#b3261e;

    font-weight:600;
}

/*==================================================
MULTI-PRODUCT ORDER FORM — SECTION STRUCTURE
==================================================*/

.order-section{

    margin-bottom:50px;

    padding-bottom:40px;

    border-bottom:1px solid var(--border);
}

.order-section:last-of-type{

    border-bottom:none;
}

.order-section-header{

    margin-bottom:22px;
}

.order-step-badge{

    display:inline-block;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:#fff;

    background:var(--primary);

    padding:5px 14px;

    border-radius:999px;

    margin-bottom:10px;
}

.order-section-header h2{

    font-size:1.5rem;

    margin-bottom:6px;
}

.order-section-header p{

    color:var(--gray);

    font-size:.92rem;
}

.how-to-order-lead{

    margin:10px 0 16px;
}

.order-summary-hint{

    font-size:.82rem;

    color:var(--gray);

    margin-top:6px;
}

/*==================================================
SECTION 1 — PRODUCT SELECTION + CART
==================================================*/

.cart-search-wrap{

    margin-bottom:18px;
}

.cart-search-input{

    width:100%;

    max-width:420px;

    font-family:inherit;

    font-size:.95rem;

    padding:12px 16px;

    border:1px solid var(--border);

    border-radius:999px;

    outline:none;
}

.cart-search-input:focus{

    border-color:var(--primary-light);
}

.cart-layout{

    display:grid;

    grid-template-columns:1fr 300px;

    gap:28px;

    align-items:start;
}

.cart-products-grid{

    display:grid;

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

    gap:20px;
}

.cart-no-results{

    grid-column:1 / -1;

    text-align:center;

    color:var(--gray);

    padding:30px 0;
}

.cart-product-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;
}

.cart-product-image{

    position:relative;

    height:150px;

    background:#f4f6f4;
}

.cart-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.cart-stock-badge{

    position:absolute;

    top:10px;

    left:10px;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;

    padding:4px 10px;

    border-radius:999px;

    color:#fff;
}

.cart-stock-badge.in-stock{ background:var(--primary-light); }
.cart-stock-badge.preorder{ background:#b8860b; }
.cart-stock-badge.out-of-stock{ background:#b3261e; }

.cart-product-body{

    padding:14px 16px 16px;

    display:flex;

    flex-direction:column;

    flex:1;
}

.cart-product-body h3{

    font-size:.98rem;

    margin-bottom:4px;
}

.cart-product-price{

    font-weight:700;

    color:var(--primary);

    margin-bottom:12px;

    font-size:.95rem;
}

.cart-product-actions{

    margin-top:auto;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.cart-qty-stepper{

    display:flex;

    align-items:center;

    gap:0;

    border:1px solid var(--border);

    border-radius:999px;

    overflow:hidden;

    width:fit-content;
}

.cart-qty-btn{

    width:32px;

    height:32px;

    border:none;

    background:var(--light);

    color:var(--primary);

    font-size:1.1rem;

    cursor:pointer;

    line-height:1;
}

.cart-qty-btn:hover{

    background:var(--border);
}

.cart-qty-input{

    width:44px;

    height:32px;

    border:none;

    text-align:center;

    font-family:inherit;

    font-size:.9rem;

    -moz-appearance:textfield;
}

.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;
}

.cart-add-btn{

    width:100%;

    justify-content:center;

    padding:10px 16px !important;

    font-size:.88rem;
}

.cart-product-unavailable{

    margin-top:auto;

    color:#b3261e;

    font-weight:600;

    font-size:.85rem;
}

/*----- Persistent cart summary sidebar -----*/

.cart-summary{

    position:sticky;

    top:100px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:20px;
}

.cart-summary h3{

    font-size:1.1rem;

    margin-bottom:14px;
}

.cart-summary-items{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:16px;

    max-height:340px;

    overflow-y:auto;
}

.cart-summary-empty{

    color:var(--gray);

    font-size:.88rem;
}

.cart-summary-item{

    display:grid;

    grid-template-columns:36px 1fr auto auto;

    align-items:center;

    gap:8px;
}

.cart-summary-item img{

    width:36px;

    height:36px;

    border-radius:6px;

    object-fit:cover;

    background:#f2f2f2;
}

.cart-summary-item-info{

    display:flex;

    flex-direction:column;

    min-width:0;
}

.cart-summary-item-name{

    font-size:.82rem;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.cart-summary-item-meta{

    font-size:.72rem;

    color:var(--gray);
}

.cart-summary-item-subtotal{

    font-size:.8rem;

    font-weight:700;

    color:var(--primary);

    white-space:nowrap;
}

.cart-summary-item-remove{

    width:22px;

    height:22px;

    border-radius:50%;

    border:1px solid var(--border);

    background:#fff;

    color:#b3261e;

    font-size:.9rem;

    line-height:1;

    cursor:pointer;

    flex-shrink:0;
}

.cart-summary-item-remove:hover{

    background:#fdecea;
}

.cart-summary-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-weight:700;

    border-top:1px solid var(--border);

    padding-top:14px;
}

.cart-summary-total span:last-child{

    color:var(--primary);

    font-size:1.1rem;
}

/*==================================================
SECTION 3 — DELIVERY
==================================================*/

.delivery-method-choice{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:16px;
}

.delivery-method-option{

    display:flex;

    align-items:flex-start;

    gap:10px;

    border:1px solid var(--border);

    border-radius:12px;

    padding:16px;

    cursor:pointer;

    transition:all var(--transition);
}

.delivery-method-option:has(input:checked){

    border-color:var(--primary-light);

    background:var(--light);
}

.delivery-method-option input{

    margin-top:4px;
}

.delivery-method-label{

    display:flex;

    flex-direction:column;

    gap:4px;

    font-size:.88rem;

    color:var(--gray);
}

.delivery-method-label strong{

    color:var(--black);

    font-size:.98rem;
}

.delivery-cost-note{

    background:var(--light);

    border-radius:10px;

    padding:14px 16px;

    font-size:.88rem;

    color:var(--gray);

    margin-bottom:18px;
}

.delivery-address-fields{

    padding-top:6px;
}

/*==================================================
SECTION 5 — REVIEW
==================================================*/

.order-review-box{

    background:var(--light);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:22px 24px;
}

.review-block{

    margin-bottom:20px;
}

.review-block:last-child{

    margin-bottom:0;
}

.review-block h4{

    font-size:.95rem;

    color:var(--primary);

    margin-bottom:8px;
}

.review-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:6px;
}

.review-list li{

    font-size:.9rem;

    color:var(--black);
}

.review-total{

    margin-top:8px;

    font-size:.95rem;
}

/*==================================================
SECTION 6 — PAYMENT
==================================================*/

.amount-due-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--light);

    border-radius:10px;

    padding:14px 18px;

    font-weight:700;

    margin:18px 0 6px;
}

.amount-due-box span:last-child{

    color:var(--primary);

    font-size:1.2rem;
}

/*==================================================
CONFIRMATION BANNER — PAYMENT ACTIONS
==================================================*/

.order-confirmation-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:16px;
}

.payment-notice-form{

    display:inline-block;
}

.payment-notice-btn{

    background:#22c55e;
}

.payment-notice-btn:hover{

    background:#15803d;
}

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

@media(max-width:992px){

.cart-layout{

grid-template-columns:1fr;
}

.cart-summary{

position:static;
}

}

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

@media(max-width:768px){

.cart-products-grid{

grid-template-columns:1fr;
}

.delivery-method-choice{

grid-template-columns:1fr;
}

.order-section-header h2{

font-size:1.25rem;
}

}