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

body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    color: #222;
}

a { text-decoration: none; color: inherit; }

/* ===================== TOPBAR ===================== */
.topbar {
    background: #2d6a4f;
    color: #fff;
    font-size: 13px;
    padding: 8px 0;
    letter-spacing: 0.5px;
}

/* ===================== NAVBAR ===================== */
.navbar {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff !important;
    width: 100%;
    left: 0;
    right: 0;
}

.navbar-brand {
    font-size: 22px;
    font-weight: 700;
    color: #2d6a4f !important;
    letter-spacing: 1px;
}

.nav-search {
    border: 1.5px solid #ddd;
    border-radius: 25px;
    padding: 8px 18px;
    font-size: 14px;
    width: 380px;
    outline: none;
    transition: border 0.2s;
}
.nav-search:focus { border-color: #2d6a4f; }

.nav-icons a {
    font-size: 20px;
    margin-left: 18px;
    color: #333;
    position: relative;
    transition: color 0.2s;
}
.nav-icons a:hover { color: #2d6a4f; }

.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e63946;
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================== HERO ===================== */
.hero-section { position: relative; overflow: hidden; }
.hero-section img { width: 100%; height: 520px; object-fit: cover; }
.hero-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 70%);
    display: flex; align-items: center; padding-left: 80px;
}
.hero-overlay h1 { color: #fff; font-size: 46px; font-weight: 700; line-height: 1.2; max-width: 480px; }
.hero-overlay p  { color: #eee; font-size: 16px; margin: 14px 0 24px; }
.btn-hero {
    background: #2d6a4f; color: #fff; padding: 12px 32px;
    border-radius: 30px; font-size: 15px; font-weight: 600;
    border: none; transition: background 0.2s; display: inline-block;
}
.btn-hero:hover { background: #1b4332; color: #fff; }

/* ===================== SECTION TITLES ===================== */
.sec-title { font-size: 26px; font-weight: 700; color: #1b1b1b; margin-bottom: 6px; }
.sec-sub   { font-size: 14px; color: #888; margin-bottom: 32px; }

/* ===================== CATEGORY CARDS ===================== */
.cat-card { border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.3s; }
.cat-card:hover { transform: translateY(-6px); }
.cat-card img { width: 100%; height: 200px; object-fit: cover; }
.cat-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff; padding: 20px 14px 14px; font-size: 15px; font-weight: 600;
}

/* ===================== PRODUCT CARDS ===================== */
.product-card {
    border: 1px solid #f0f0f0; border-radius: 14px; overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s; background: #fff; position: relative;
}
.product-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.10); transform: translateY(-5px); }
.product-card img { width: 100%; height: 160px; object-fit: cover; }
.product-card .badge-tag { position: absolute; top: 12px; left: 12px; background: #2d6a4f; color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 20px; }
.product-card .wish-btn { position: absolute; top: 12px; right: 12px; background: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; }
.product-card .card-body { padding: 12px; text-align: center; }
.product-card .p-name { font-size: 13px; font-weight: 600; color: #222; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .p-price { font-size: 15px; font-weight: 700; color: #2d6a4f; }
.product-card .p-old   { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 6px; }
.btn-add { background: #2d6a4f; color: #fff; border: none; border-radius: 8px; padding: 8px 0; width: 100%; font-size: 12px; font-weight: 600; margin-top: 8px; transition: background 0.2s; cursor: pointer; }
.btn-add:hover { background: #1b4332; }

/* ===================== TRUST STRIP ===================== */
.trust-strip { background: #f4faf7; border-top: 1px solid #e0ede7; border-bottom: 1px solid #e0ede7; padding: 22px 0; }
.trust-item { text-align: center; }
.trust-item .t-icon  { font-size: 26px; margin-bottom: 5px; }
.trust-item .t-title { font-size: 13px; font-weight: 700; color: #1b4332; }
.trust-item .t-sub   { font-size: 11px; color: #888; }

/* ===================== PROMO BANNER ===================== */
.promo-banner { background: linear-gradient(135deg, #2d6a4f, #52b788); color: #fff; border-radius: 16px; padding: 40px 50px; display: flex; align-items: center; justify-content: space-between; }
.promo-banner h3 { font-size: 26px; font-weight: 700; }
.promo-banner p  { font-size: 14px; opacity: 0.9; margin-top: 6px; }
.btn-promo { background: #fff; color: #2d6a4f; padding: 12px 30px; border-radius: 30px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.btn-promo:hover { background: #e8f5e9; color: #1b4332; }

/* ===================== NEWSLETTER ===================== */
.newsletter-section { background: #1b4332; color: #fff; padding: 60px 0; text-align: center; }
.newsletter-section h3 { font-size: 26px; font-weight: 700; }
.newsletter-section p  { font-size: 14px; opacity: 0.8; margin: 10px 0 24px; }
.newsletter-form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.newsletter-form input  { padding: 12px 20px; border-radius: 30px; border: none; width: 320px; font-size: 14px; outline: none; }
.newsletter-form button { background: #52b788; color: #fff; border: none; padding: 12px 28px; border-radius: 30px; font-weight: 600; font-size: 14px; cursor: pointer; }

/* ===================== FOOTER ===================== */
footer { background: #111; color: #ccc; padding: 60px 0 30px; }
footer h5 { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-bottom: 18px; text-transform: uppercase; }
footer ul { list-style: none; padding: 0; }
footer ul li { margin-bottom: 10px; }
footer ul li a { color: #aaa; font-size: 13px; transition: color 0.2s; }
footer ul li a:hover { color: #52b788; }
footer .footer-brand { font-size: 22px; font-weight: 700; color: #52b788; margin-bottom: 12px; }
footer .footer-desc  { font-size: 13px; color: #888; line-height: 1.7; }
footer .social-icons a { font-size: 18px; margin-right: 14px; color: #aaa; transition: color 0.2s; }
footer .social-icons a:hover { color: #52b788; }
footer .footer-bottom { border-top: 1px solid #2a2a2a; margin-top: 40px; padding-top: 20px; font-size: 13px; color: #666; text-align: center; }

/* ===================== BUTTONS ===================== */
.btn-success { background: #2d6a4f !important; border-color: #2d6a4f !important; }
.btn-success:hover { background: #1b4332 !important; }
.btn-outline-success { color: #2d6a4f !important; border-color: #2d6a4f !important; }
.btn-outline-success:hover { background: #2d6a4f !important; color: #fff !important; }

/* ===================== CARDS ===================== */
.card { border: none; border-radius: 14px; }

/* ===================== ADMIN SIDEBAR ===================== */
.sidebar { background: #1b4332; color: white; min-height: 100vh; padding: 20px 0; }
.sidebar a { color: #b7e4c7; display: block; padding: 12px 24px; font-size: 14px; transition: background 0.2s; }
.sidebar a:hover { background: #2d6a4f; color: #fff; }

/* ===================== SEARCH ===================== */
#result, #result_mobile {
    position: absolute;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    z-index: 9999;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    max-height: 320px;
    overflow-y: auto;
}
#result a, #result_mobile a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13px; color: #333; border-bottom: 1px solid #f5f5f5; }
#result a:hover, #result_mobile a:hover { background: #f4faf7; }
#result img, #result_mobile img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }

/* ===================== MISC ===================== */
.section-pad { padding: 60px 0; }
.rounded-xl  { border-radius: 16px; }
.text-green  { color: #2d6a4f; }
.bg-light-green { background: #f4faf7; }

/* ===================== MOBILE RESPONSIVE ===================== */
@media (max-width: 768px) {

    /* GENERAL */
    .section-pad { padding: 36px 0; }
    .container { padding-left: 14px !important; padding-right: 14px !important; }

    /* TOPBAR */
    .ps-topbar { font-size: 11px; padding: 6px 10px; }

    /* NAVBAR */
    .ps-navbar-inner { padding: 10px 16px; gap: 10px; }
    .ps-brand { font-size: 18px; }
    .ps-nav-icons a { width: 34px; height: 34px; font-size: 17px; }
    .ps-login-btn { padding: 6px 12px; font-size: 12px; }

    /* CONTAINER */
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* HERO */
    .hero-wrap { height: 260px !important; }
    .hero-content h1 { font-size: 22px !important; }
    .hero-content p  { font-size: 13px !important; margin-bottom: 16px !important; }
    .hero-btn { padding: 10px 22px; font-size: 13px; }
    .hero-content { left: 5% !important; max-width: 80% !important; }

    /* TRUST STRIP */
    .trust-item .t-icon  { font-size: 20px; }
    .trust-item .t-title { font-size: 11px; }
    .trust-item .t-sub   { font-size: 10px; }

    /* SECTION TITLES */
    .sec-title { font-size: 20px; }
    .sec-head h2 { font-size: 20px !important; }

    /* CATEGORY CIRCLES */
    .cat-tile { width: 90px !important; }
    .cat-tile img { width: 90px !important; height: 90px !important; }
    .cat-tile span { font-size: 11px !important; }

    /* PRODUCT CARDS */
    .product-card img { height: 140px; }
    .product-card .card-body { padding: 8px; }
    .product-card .p-name  { font-size: 12px; }
    .product-card .p-price { font-size: 13px; }
    .product-card .p-old   { font-size: 11px; }
    .btn-add { font-size: 11px; padding: 7px 0; }

    /* LIFESTYLE SPLIT */
    .ls-split, .ls-split-rev { grid-template-columns: 1fr !important; }
    .ls-split-rev .ls-split-text { order: 0 !important; }
    .ls-split-text { padding: 24px 20px !important; }
    .ls-split-text h2 { font-size: 18px !important; }
    .ls-split-text p  { font-size: 13px !important; }
    .ls-split-img img { height: 200px !important; }

    /* LIFESTYLE 3-COL */
    .lc3 { height: 180px !important; }
    .lc3-overlay h5 { font-size: 14px !important; }
    .lc3-overlay p  { display: none; }

    /* PROMO BANNER */
    .promo-banner { flex-direction: column !important; gap: 16px; text-align: center; padding: 24px 20px !important; }
    .promo-banner h3 { font-size: 18px !important; }
    .promo-banner p  { font-size: 13px !important; }

    /* TESTIMONIALS */
    .testi-card { padding: 18px; }
    .testi-card p { font-size: 13px; }

    /* WHY CARDS */
    .why-card { padding: 18px 12px; }
    .why-card .wi { font-size: 28px; }
    .why-card h6  { font-size: 13px; }
    .why-card p   { font-size: 12px; }

    /* FOOTER */
    footer { padding: 40px 0 20px; }
    footer .row > div { margin-bottom: 24px; }
    footer .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .newsletter-form input { width: 100%; max-width: 100%; }
    .newsletter-form { flex-direction: column; align-items: center; padding: 0 16px; }
    .newsletter-form button { width: 100%; max-width: 320px; }

    /* PRODUCT DETAIL PAGE */
    .pd-wrap { padding: 12px 12px 40px !important; }
    .pd-main { grid-template-columns: 1fr !important; gap: 20px !important; }
    .pd-img-wrap { position: static !important; }
    .pd-img-main img { height: 280px !important; }
    .pd-name { font-size: 20px !important; }
    .pd-price { font-size: 24px !important; }
    .pd-care { grid-template-columns: 1fr 1fr !important; }
    .pd-actions { flex-wrap: wrap; }
    .pd-btn-cart, .pd-btn-buy { font-size: 13px !important; padding: 11px 16px !important; }
    .pd-trust { gap: 12px; }
    .pd-trust-item { font-size: 11px; }

    /* CART PAGE */
    .cart-item-row { flex-wrap: wrap; }

    /* CHECKOUT ADDRESS */
    .co-wrap { padding: 12px 0 40px !important; }
    .summary-box { position: static !important; margin-top: 20px; }

    /* CATEGORY PAGE */
    .cat-toolbar { padding: 0 12px !important; flex-wrap: wrap; min-height: auto !important; }
    .cat-content { padding: 12px 12px 40px !important; }
    .filter-panel { grid-template-columns: 1fr 1fr !important; padding: 14px !important; }
    .fp-footer { padding: 10px 14px !important; }

    /* BLOG */
    .blog-hero h1 { font-size: 22px !important; }
    .blog-search input { width: 100% !important; }

    /* AUTH PAGES */
    .auth-wrap { flex-direction: column !important; max-width: 100% !important; }
    .auth-left { display: none !important; }
    .auth-right { padding: 28px 20px !important; }

    /* TRACK PAGE */
    .track-wrap { padding: 0 12px !important; }
    .status-timeline { padding: 0 10px !important; }

    /* PAYMENT PAGE */
    .pay-wrap { padding: 12px 0 40px !important; }
    .pay-option { padding: 12px; gap: 10px; }
    .pay-option .pay-icon { width: 38px; height: 38px; font-size: 18px; }
    .pay-option .pay-title { font-size: 13px; }
    .pay-option .pay-sub { font-size: 11px; }
    .summary-box { position: static !important; margin-top: 20px; }

    /* PROFILE PAGE */
    .profile-wrap { padding: 12px !important; }

    /* MY ORDERS */
    .order-header-row { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    .order-item-row { flex-wrap: wrap; gap: 8px; }

    /* COMMUNITY SECTION */
    .community-stats .col-6 { margin-bottom: 12px; }

    /* PAGINATION */
    .pg-wrap { gap: 4px; }
    .pg-btn { padding: 7px 12px; font-size: 12px; }
    .pg-btn.nav { padding: 7px 14px; }
}

/* ===================== TABLET (768px - 991px) ===================== */
@media (min-width: 769px) and (max-width: 991px) {

    .ps-navbar-inner { padding: 10px 20px; }
    .hero-wrap { height: 360px !important; }
    .hero-content h1 { font-size: 32px !important; }
    .ls-split { min-height: 260px !important; }
    .ls-split-img img { height: 260px !important; }
    .pd-main { grid-template-columns: 1fr !important; }
    .pd-img-main img { height: 360px !important; }
    .cat-tile { width: 110px !important; }
    .cat-tile img { width: 110px !important; height: 110px !important; }
    .promo-banner { padding: 28px 30px !important; }
    .promo-banner h3 { font-size: 20px !important; }
}

/* ===================== SMALL MOBILE (max 480px) ===================== */
@media (max-width: 480px) {

    .ps-topbar { display: none; }
    .hero-wrap { height: 220px !important; }
    .hero-content h1 { font-size: 18px !important; }
    .hero-content p  { display: none; }
    .hero-btn { padding: 8px 18px; font-size: 12px; }
    .sec-title { font-size: 17px; }
    .product-card img { height: 120px; }
    .lc3 { height: 150px !important; }
    .cat-tile { width: 75px !important; }
    .cat-tile img { width: 75px !important; height: 75px !important; }
    .cat-tile span { font-size: 10px !important; }
    .step-bar { gap: 4px; }
    .step span { font-size: 11px; }
    .step-line { margin: 0 4px; }
}