/*
Theme Name: Chemist International (Astra Child)
Template: astra
Theme URI: https://chemistinternational.com
Author: Chemist International
Description: Chemist International website — Astra child theme. Pakistan's leading poultry medicine & animal health company. Official Labiana distributor.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: chemist-astra-child
*/

/* ===========================
   CSS VARIABLES
=========================== */
:root {
    --ci-green: #1a8c3c;
    --ci-green-dark: #146830;
    --ci-green-light: #25a84a;
    --ci-green-pale: #e8f5ec;
    --ci-white: #ffffff;
    --ci-gray-light: #f8f9fa;
    --ci-gray-mid: #e9ecef;
    --ci-gray-text: #6c757d;
    --ci-dark: #0d2a16;
    --ci-text: #2d3748;
    --ci-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --ci-shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --ci-shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
    --ci-radius: 12px;
    --ci-radius-lg: 20px;
    --ci-transition: all 0.3s ease;
}

/* ===========================
   ASTRA OVERRIDES — GLOBAL
=========================== */
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ci-text); }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { transition: var(--ci-transition); }

/* Hide Astra default page title on front page */
.ast-page-title-wrap { display: none !important; }
.entry-header.ast-no-thumbnail { display: none !important; }
.ast-breadcrumbs-wrapper { display: none !important; }

/* Full-width front page content */
.page-template-front-page .site-content,
.page-template-front-page .entry-content,
.page-template-default .entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.page-template-front-page .ast-container,
.page-template-front-page #primary,
.page-template-front-page .ast-article-single,
body.page-template-front-page #content,
body.page-template-front-page .entry-content {
    padding: 0 !important;
    max-width: 100% !important;
}

/* ===========================
   VET NOTICE
=========================== */
.ci-vet-notice {
    background: #fff3cd;
    border-bottom: 2px solid #ffc107;
    text-align: center;
    padding: 8px 20px;
    font-size: 0.82rem;
    color: #664d03;
    font-weight: 500;
    position: relative;
    z-index: 9999;
}

/* ===========================
   TOP BAR
=========================== */
.ci-top-bar {
    background: var(--ci-green-dark);
    color: rgba(255,255,255,0.9);
    font-size: 0.82rem;
    padding: 8px 0;
}
.ci-top-bar .ci-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ci-top-bar-contacts { display: flex; gap: 20px; flex-wrap: wrap; }
.ci-top-bar-contacts a { color: rgba(255,255,255,0.9); text-decoration: none; display: flex; align-items: center; gap: 5px; }
.ci-top-bar-contacts a:hover { color: #fff; }
.ci-top-bar-tagline { font-style: italic; opacity: 0.85; }

/* ===========================
   LAYOUT CONTAINERS
=========================== */
.ci-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ci-section { padding: 90px 0; }
.ci-section-sm { padding: 60px 0; }

/* ===========================
   SECTION HEADERS
=========================== */
.ci-section-tag {
    display: inline-block;
    background: var(--ci-green-pale);
    color: var(--ci-green);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 14px;
}
.ci-section-header { text-align: center; margin-bottom: 56px; }
.ci-section-header h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--ci-dark); margin-bottom: 14px; line-height: 1.3; }
.ci-section-header p { color: var(--ci-gray-text); max-width: 560px; margin: 0 auto; font-size: 1.05rem; }
.ci-divider { width: 60px; height: 4px; background: linear-gradient(90deg, var(--ci-green), #4caf50); border-radius: 2px; margin: 16px auto; }

/* ===========================
   BUTTONS
=========================== */
.ci-btn-primary {
    display: inline-block;
    background: white;
    color: var(--ci-green) !important;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--ci-transition);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-decoration: none !important;
}
.ci-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.25); color: var(--ci-green-dark) !important; }
.ci-btn-secondary {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: white !important;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid rgba(255,255,255,0.4);
    transition: var(--ci-transition);
    text-decoration: none !important;
}
.ci-btn-secondary:hover { background: rgba(255,255,255,0.25); border-color: white; transform: translateY(-2px); }
.ci-btn-green {
    display: inline-block;
    background: var(--ci-green);
    color: white !important;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--ci-transition);
    text-decoration: none !important;
}
.ci-btn-green:hover { background: var(--ci-green-dark); transform: translateY(-2px); }
.ci-btn-white {
    display: inline-block;
    background: white;
    color: var(--ci-green) !important;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--ci-transition);
    text-decoration: none !important;
}
.ci-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.ci-btn-outline-white {
    display: inline-block;
    background: transparent;
    color: white !important;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid rgba(255,255,255,0.5);
    transition: var(--ci-transition);
    text-decoration: none !important;
}
.ci-btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: white; }

/* ===========================
   HERO
=========================== */
.ci-hero {
    background: linear-gradient(135deg, #0d4a1f 0%, #146830 35%, #1a8c3c 65%, #25a84a 100%);
    min-height: 560px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ci-hero-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; }
.ci-hero-shape-1 { width: 420px; height: 420px; top: -100px; right: -80px; }
.ci-hero-shape-2 { width: 260px; height: 260px; bottom: -70px; left: 8%; }
.ci-hero-shape-3 { width: 160px; height: 160px; top: 35%; right: 22%; }
.ci-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 80px 0;
    width: 100%;
}
.ci-hero-content { color: white; }
.ci-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}
.ci-hero-badge-dot { width: 8px; height: 8px; background: #FFC107; border-radius: 50%; animation: ci-pulse 2s infinite; }
@keyframes ci-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }
.ci-hero-content h1 {
    color: white !important;
    font-size: clamp(1.9rem, 4.5vw, 3.2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ci-hero-content h1 span { color: #FFC107; }
.ci-hero-content p { color: rgba(255,255,255,0.88); font-size: 1.08rem; margin-bottom: 36px; max-width: 480px; }
.ci-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ci-hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 44px; }
.ci-hero-stat {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--ci-radius);
    padding: 14px;
    text-align: center;
    color: white;
}
.ci-hero-stat .num { font-size: 1.7rem; font-weight: 800; color: #FFC107; }
.ci-hero-stat .lbl { font-size: 0.76rem; opacity: 0.85; }
.ci-hero-visual { display: flex; justify-content: center; }
.ci-hero-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--ci-radius-lg);
    padding: 32px;
    text-align: center;
    color: white;
    max-width: 320px;
    width: 100%;
}
.ci-hero-card-logo { font-size: 3.5rem; margin-bottom: 16px; }
.ci-hero-card h3 { color: white !important; font-size: 1.3rem; margin-bottom: 8px; }
.ci-hero-card > p { color: rgba(255,255,255,0.8); font-size: 0.88rem; margin-bottom: 20px; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ci-chip { background: rgba(255,255,255,0.15); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; border: 1px solid rgba(255,255,255,0.25); }

/* ===========================
   FEATURES STRIP
=========================== */
.ci-features-strip { background: linear-gradient(135deg, #146830, #1a8c3c); padding: 52px 0; }
.ci-features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.ci-feature-item { text-align: center; color: white; }
.ci-feature-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.15); border-radius: 16px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.ci-feature-item h4 { color: white !important; font-size: 1rem; margin-bottom: 6px; }
.ci-feature-item p { color: rgba(255,255,255,0.8); font-size: 0.85rem; margin: 0; }

/* ===========================
   ABOUT
=========================== */
.ci-about { padding: 100px 0; background: white; }
.ci-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ci-about-card {
    background: linear-gradient(135deg, #1a8c3c, #0d4a1f);
    border-radius: var(--ci-radius-lg);
    padding: 50px 40px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}
.ci-about-card::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:rgba(255,255,255,0.06); border-radius:50%; }
.ci-about-card-icon { font-size: 4rem; margin-bottom: 20px; }
.ci-about-card h3 { color: white !important; font-size: 1.8rem; font-style: italic; margin-bottom: 6px; }
.ci-about-card > p { color: rgba(255,255,255,0.85); margin: 0; }
.ci-about-badges { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.ci-about-badge { background: white; border-radius: 10px; padding: 10px 16px; text-align: center; box-shadow: var(--ci-shadow-md); min-width: 88px; }
.ci-about-badge .num { font-size: 1.3rem; font-weight: 800; color: var(--ci-green); }
.ci-about-badge .lbl { font-size: 0.72rem; color: var(--ci-gray-text); }
.ci-about-content { padding-top: 10px; }
.ci-about-content h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 700; color: var(--ci-dark); margin-bottom: 18px; }
.ci-about-content p { color: var(--ci-gray-text); line-height: 1.8; margin-bottom: 14px; }
.ci-highlights { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.ci-highlight { display: flex; gap: 14px; align-items: flex-start; }
.ci-highlight-icon { width: 40px; height: 40px; background: var(--ci-green-pale); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.ci-highlight-text h4 { font-size: 0.95rem; color: var(--ci-dark); margin-bottom: 3px; }
.ci-highlight-text p { font-size: 0.85rem; color: var(--ci-gray-text); margin: 0; }

/* ===========================
   PRODUCTS
=========================== */
.ci-products { background: var(--ci-gray-light); padding: 100px 0; }
.ci-filter-wrap { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 50px; }
.ci-filter-btn {
    background: white;
    border: 2px solid var(--ci-gray-mid);
    color: var(--ci-gray-text);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--ci-transition);
    font-family: inherit;
}
.ci-filter-btn:hover, .ci-filter-btn.active { background: var(--ci-green); border-color: var(--ci-green); color: white; }
.ci-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 26px; }
.ci-product-card {
    background: white;
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
    box-shadow: var(--ci-shadow-sm);
    transition: var(--ci-transition);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.ci-product-card:hover { transform: translateY(-6px); box-shadow: var(--ci-shadow-lg); }
.ci-product-img {
    background: #f9f8ff;
    padding: 16px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}
.ci-product-emoji { font-size: 3.5rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
.ci-product-tag {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--ci-green);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}
.ci-product-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.ci-product-body h3 { font-size: 1.05rem; color: var(--ci-dark); margin-bottom: 6px; }
.ci-product-type {
    display: inline-block;
    background: var(--ci-green-pale);
    color: var(--ci-green);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 15px;
    margin-bottom: 10px;
}
.ci-product-body p { color: var(--ci-gray-text); font-size: 0.87rem; line-height: 1.6; margin: 0 0 14px; flex: 1; }
.ci-product-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--ci-gray-mid); }
.ci-product-pkg { font-size: 0.76rem; color: var(--ci-gray-text); }
.ci-product-btn {
    background: var(--ci-green-pale);
    color: var(--ci-green);
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ci-transition);
    font-family: inherit;
}
.ci-product-btn:hover { background: var(--ci-green); color: white; }

/* ===========================
   PARTNERS
=========================== */
.ci-partners { padding: 60px 0; background: white; border-top: 1px solid var(--ci-gray-mid); border-bottom: 1px solid var(--ci-gray-mid); }
.ci-partners-label { text-align: center; color: var(--ci-gray-text); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 36px; }
.ci-partners-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.ci-partner-card { background: var(--ci-gray-light); border: 2px solid var(--ci-gray-mid); border-radius: var(--ci-radius); padding: 28px 24px; text-align: center; transition: var(--ci-transition); }
.ci-partner-card:hover { border-color: var(--ci-green); background: var(--ci-green-pale); }
.ci-partner-flag { font-size: 2.5rem; margin-bottom: 10px; }
.ci-partner-card h4 { color: var(--ci-dark); font-size: 1rem; margin-bottom: 6px; }
.ci-partner-card p { color: var(--ci-gray-text); font-size: 0.82rem; margin: 0; }

/* ===========================
   WHY CHOOSE US
=========================== */
.ci-why { background: var(--ci-gray-light); padding: 100px 0; }
.ci-why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 50px; }
.ci-why-card {
    background: white;
    border-radius: var(--ci-radius-lg);
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--ci-shadow-sm);
    transition: var(--ci-transition);
    position: relative;
    overflow: hidden;
}
.ci-why-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--ci-green), #4caf50); transform:scaleX(0); transition:var(--ci-transition); }
.ci-why-card:hover::before { transform: scaleX(1); }
.ci-why-card:hover { transform: translateY(-4px); box-shadow: var(--ci-shadow-md); }
.ci-why-icon { width: 70px; height: 70px; background: var(--ci-green-pale); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; transition: var(--ci-transition); }
.ci-why-card:hover .ci-why-icon { background: var(--ci-green); transform: scale(1.05) rotate(-4deg); }
.ci-why-card h3 { font-size: 1.05rem; color: var(--ci-dark); margin-bottom: 10px; }
.ci-why-card p { color: var(--ci-gray-text); font-size: 0.88rem; line-height: 1.6; margin: 0; }

/* ===========================
   CONTACT
=========================== */
.ci-contact { padding: 100px 0; background: white; }
.ci-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.ci-contact-info h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 700; color: var(--ci-dark); margin-bottom: 16px; }
.ci-contact-info > p { color: var(--ci-gray-text); margin-bottom: 36px; line-height: 1.8; }
.ci-contact-items { display: flex; flex-direction: column; gap: 20px; }
.ci-contact-item { display: flex; gap: 16px; align-items: flex-start; }
.ci-contact-item-icon { width: 48px; height: 48px; background: var(--ci-green-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.ci-contact-item-text strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ci-gray-text); margin-bottom: 4px; }
.ci-contact-item-text p,
.ci-contact-item-text a { font-size: 0.98rem; color: var(--ci-dark); font-weight: 500; margin: 0; line-height: 1.5; text-decoration: none; display: block; }
.ci-contact-item-text a:hover { color: var(--ci-green); }
.ci-contact-form { background: var(--ci-gray-light); border-radius: var(--ci-radius-lg); padding: 36px; }
.ci-contact-form h3 { font-size: 1.2rem; color: var(--ci-dark); margin-bottom: 6px; }
.ci-contact-form > p { color: var(--ci-gray-text); font-size: 0.88rem; margin-bottom: 24px; }
.ci-form-group { margin-bottom: 16px; }
.ci-form-group label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ci-text); margin-bottom: 6px; }
.ci-form-group input,
.ci-form-group textarea,
.ci-form-group select {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--ci-gray-mid);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--ci-text);
    background: white;
    transition: var(--ci-transition);
    outline: none;
}
.ci-form-group input:focus,
.ci-form-group textarea:focus,
.ci-form-group select:focus { border-color: var(--ci-green); box-shadow: 0 0 0 3px rgba(26,140,60,0.1); }
.ci-form-group textarea { resize: vertical; min-height: 110px; }
.ci-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ci-form-submit {
    background: var(--ci-green);
    color: white;
    padding: 13px 30px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: var(--ci-transition);
    font-family: inherit;
}
.ci-form-submit:hover { background: var(--ci-green-dark); transform: translateY(-1px); }

/* ===========================
   CTA BANNER
=========================== */
.ci-cta-banner {
    background: linear-gradient(135deg, #0d4a1f 0%, #146830 45%, #1a8c3c 75%, #25a84a 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ci-cta-banner h2 { color: white !important; margin-bottom: 14px; font-size: clamp(1.5rem,3.5vw,2.3rem); }
.ci-cta-banner p { color: rgba(255,255,255,0.88); font-size: 1.05rem; max-width: 500px; margin: 0 auto 32px; }
.ci-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===========================
   MODAL
=========================== */
.ci-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: var(--ci-transition);
}
.ci-modal-overlay.active { opacity: 1; pointer-events: all; }
.ci-modal-box {
    background: white;
    border-radius: var(--ci-radius-lg);
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: var(--ci-transition);
}
.ci-modal-overlay.active .ci-modal-box { transform: scale(1) translateY(0); }
.ci-modal-head {
    background: linear-gradient(135deg, #1a8c3c, #146830);
    padding: 26px 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-radius: var(--ci-radius-lg) var(--ci-radius-lg) 0 0;
}
.ci-modal-head h3 { color: white !important; font-size: 1.3rem; margin-bottom: 4px; }
.ci-modal-head span { color: rgba(255,255,255,0.8); font-size: 0.85rem; }
.ci-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--ci-transition);
}
.ci-modal-close:hover { background: rgba(255,255,255,0.35); }
.ci-modal-body { padding: 26px 28px; }
.ci-modal-sec { margin-bottom: 22px; }
.ci-modal-sec h4 { color: var(--ci-green); font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ci-modal-sec h4::before { content:''; width:3px; height:14px; background:var(--ci-green); border-radius:2px; }
.ci-modal-sec ul li { color: var(--ci-text); font-size: 0.9rem; padding: 4px 0 4px 18px; position: relative; line-height: 1.5; }
.ci-modal-sec ul li::before { content:'✓'; position:absolute; left:0; color:var(--ci-green); font-weight:700; font-size:0.8rem; }
.ci-modal-sec p { color: var(--ci-text); font-size: 0.9rem; margin: 0; line-height: 1.7; }
.ci-dosage-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ci-dosage-tbl th { background: var(--ci-green-pale); color: var(--ci-green-dark); padding: 8px 12px; text-align: left; font-weight: 600; }
.ci-dosage-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--ci-gray-mid); color: var(--ci-text); }
.ci-dosage-tbl tr:last-child td { border-bottom: none; }
.ci-storage-box { background: var(--ci-green-pale); border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.ci-storage-box p { margin: 0; font-size: 0.85rem; color: var(--ci-green-dark); }

/* ===========================
   BACK TO TOP
=========================== */
.ci-back-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 46px;
    height: 46px;
    background: var(--ci-green);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ci-shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: var(--ci-transition);
    z-index: 9998;
}
.ci-back-top.visible { opacity: 1; pointer-events: all; }
.ci-back-top:hover { background: var(--ci-green-dark); transform: translateY(-3px); }

/* ===========================
   RESPONSIVE — COMPREHENSIVE
=========================== */

/* ── 4-column products on large screens ── */
@media(min-width:1200px){
    .ci-products-grid { grid-template-columns: repeat(4,1fr); }
}

/* ── Tablet landscape: 1024px ── */
@media(max-width:1024px){
    .ci-features-grid   { grid-template-columns: repeat(2,1fr); gap:22px; }
    .ci-why-grid        { grid-template-columns: repeat(2,1fr); }
    .ci-products-grid   { grid-template-columns: repeat(3,1fr); }
    .ci-about-v2-grid   { gap:40px !important; }
    .ci-about-content h2 { font-size:1.6rem; }
}

/* ── Tablet portrait: 900px ── */
@media(max-width:900px){
    /* NAV */
    .ci-hamburger { display:flex !important; }
    .ci-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12);
        gap: 4px;
        z-index: 9999;
        border-top: 2px solid #e8f5ec;
    }
    .ci-nav.open  { display: flex; }
    .ci-nav a     { border-radius:8px; display:block; padding:11px 16px !important; font-size:0.95rem !important; }
    .ci-nav a:last-child { text-align:center; margin-top:6px; }
    #ci-header    { position:relative; }

    /* HERO */
    .ci-hero { min-height:auto; }
    .ci-hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
        padding: 50px 0;
    }
    /* Text block FIRST, product showcase SECOND on tablet */
    .ci-hero-content      { order: 1; }
    .ci-hero-visual-wrap  { order: 2; display:none !important; }
    .ci-hero-btns         { justify-content:center; }
    .ci-hero-content p    { margin:0 auto 32px; max-width:480px; }
    .ci-hero-stats        { max-width:400px; margin:36px auto 0; }
    .ci-hero-farm-card    { max-width:460px; }

    /* ABOUT */
    .ci-about-v2        { padding:70px 0; }
    .ci-about-v2-grid   { grid-template-columns:1fr !important; gap:36px !important; }
    .ci-about-visual    { max-width:480px; margin:0 auto; }

    /* PRODUCTS */
    .ci-products-grid   { grid-template-columns:repeat(2,1fr); }
    .ci-products        { padding:70px 0; }

    /* WHY */
    .ci-why             { padding:70px 0; }
    .ci-why-grid        { grid-template-columns:repeat(2,1fr); }

    /* PARTNERS */
    .ci-partners-grid   { grid-template-columns:1fr; max-width:400px; }

    /* CONTACT */
    #contact > div:nth-child(2) { grid-template-columns:1fr !important; }
}

/* ── Mobile: 600px ── */
@media(max-width:600px){
    .ci-container { padding:0 14px; }

    /* HERO — on mobile, hide product showcase, show clean text hero */
    .ci-hero-inner          { padding:44px 0 36px; gap:0; }
    .ci-hero-visual-wrap    { display:none !important; }  /* hide showcase card on mobile */
    .ci-hero-content        { order:1; }
    .ci-hero-content h1     { font-size:1.8rem !important; line-height:1.25 !important; }
    .ci-hero-badge          { font-size:0.72rem; padding:5px 12px; margin-bottom:16px; }
    .ci-hero-content p      { font-size:1rem; margin-bottom:28px !important; }
    .ci-hero-btns           { flex-direction:column; align-items:stretch; gap:12px; width:100%; max-width:320px; margin:0 auto; }
    .ci-btn-primary,
    .ci-btn-secondary       { text-align:center; padding:14px 20px; }
    .ci-hero-stats          { grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; max-width:100%; }
    .ci-hero-stat           { padding:12px 8px; }
    .ci-hero-stat .num      { font-size:1.4rem; }
    .ci-hero-stat .lbl      { font-size:0.72rem; }

    /* FEATURES */
    .ci-features-strip      { padding:36px 0; }
    .ci-features-grid       { grid-template-columns:repeat(2,1fr); gap:18px; }
    .ci-feature-icon        { width:50px; height:50px; font-size:1.5rem; margin-bottom:10px; }

    /* ABOUT */
    .ci-about-v2            { padding:56px 0; }
    .ci-about-main-img      { padding:32px 20px !important; }
    .ci-about-brand-big     { font-size:1.9rem !important; }
    .ci-about-stat-row      { grid-template-columns:repeat(3,1fr) !important; gap:8px !important; }
    .ci-about-stat-box .num { font-size:1.3rem; }
    .ci-about-content h2    { font-size:1.5rem; }
    .ci-about-pillar        { padding:14px; gap:10px; }
    .ci-about-pillar-icon   { width:38px; height:38px; font-size:1.1rem; border-radius:10px; }
    .ci-about-cta           { flex-direction:column; gap:10px; }
    .ci-btn-purple,
    .ci-btn-purple-outline  { text-align:center; }

    /* SECTION HEADERS */
    .ci-section-header      { margin-bottom:36px; }
    .ci-section-header h2   { font-size:1.5rem !important; }

    /* FILTER BUTTONS */
    .ci-filter-wrap         { gap:8px; }
    .ci-filter-btn          { padding:6px 14px; font-size:0.8rem; }

    /* PRODUCTS */
    .ci-products-grid       { grid-template-columns:1fr; }
    .ci-product-card        { max-width:400px; margin:0 auto; width:100%; }
    .ci-products            { padding:56px 0; }

    /* PRODUCT IMAGE */
    .ci-product-img         { min-height:160px; }
    .ci-product-img img     { height:150px !important; }

    /* SEE MORE BUTTON */
    #ci-seemore-btn         { padding:12px 32px; font-size:0.9rem; width:100%; justify-content:center; }

    /* PARTNERS */
    .ci-partners            { padding:48px 0; }
    .ci-partners-grid       { grid-template-columns:1fr !important; max-width:100% !important; }
    .ci-partner-card        { padding:20px 18px; }

    /* WHY */
    .ci-why                 { padding:56px 0; }
    .ci-why-grid            { grid-template-columns:1fr !important; }
    .ci-why-card            { padding:26px 22px; }

    /* CTA BANNER */
    .ci-cta-banner          { padding:56px 0; }
    .ci-cta-banner h2       { font-size:1.4rem !important; }
    .ci-cta-btns            { flex-direction:column; align-items:center; gap:12px; }
    .ci-btn-white,
    .ci-btn-outline-white   { width:80%; text-align:center; }

    /* MODAL */
    .ci-modal-overlay       { padding:10px; }
    .ci-modal-box           { max-height:96vh; border-radius:16px; }
    .ci-modal-head          { padding:18px 20px; border-radius:16px 16px 0 0; }
    .ci-modal-head h3       { font-size:1.1rem; }
    .ci-modal-body          { padding:18px 20px; }
    .ci-dosage-tbl          { font-size:0.82rem; }

    /* LIGHTBOX */
    .ci-lightbox-inner      { border-radius:16px; }
    .ci-lightbox-img-wrap   { min-height:260px; padding:20px; }
    .ci-lightbox-img-wrap img { max-height:220px; }
    .ci-lightbox-nav        { gap:8px; padding:0 16px 16px; }
    .ci-lightbox-nav button { padding:7px 14px; font-size:0.78rem; }
    .ci-lightbox-info       { padding:14px 18px 16px; }

    /* BACK TO TOP */
    .ci-back-top            { bottom:16px; right:16px; width:40px; height:40px; font-size:1rem; }
}

/* ── Very small: 420px ── */
@media(max-width:420px){
    .ci-hero-content h1     { font-size:1.55rem !important; }
    .ci-hero-products-mini  { grid-template-columns:repeat(3,1fr); gap:6px; }
    .ci-hero-mini-item      { padding:6px 2px 4px; }
    .ci-hero-mini-item img  { width:36px; height:36px; }
    .ci-hero-mini-item span { font-size:0.6rem; }
    .ci-features-grid       { grid-template-columns:1fr; }
    .ci-hero-stats          { gap:8px; }
    .ci-about-stat-row      { gap:6px !important; }
    .ci-lightbox-nav        { flex-wrap:wrap; }
}