/* ===========================================================
   DesparClean Homepage — Design System
   Brand colors:
     --dch-green        header/nav/primary   #17983E
     --dch-green-dark   footer/CTA dark      #0F5C26
     --dch-yellow       shop-now / accents   #FFCD57
     --dch-whatsapp     WhatsApp green       #166534

   Note: .dch-scope wraps THREE separate regions on every page —
   the site-wide header (via wp_body_open), the page's own content
   (homepage shortcode or normal page/shop/product content), and the
   site-wide footer (via wp_footer). Each region redeclares the same
   CSS variables independently so colors/spacing stay identical
   across all three without depending on shared ancestor markup.
   =========================================================== */

.dch-scope {
    --dch-green: #17983E;
    --dch-green-dark: #0F5C26;
    --dch-green-light: #E8F5EC;
    --dch-yellow: #FFCD57;
    --dch-whatsapp: #166534;
    --dch-red: #D42A2A;
    --dch-text: #1F2937;
    --dch-text-muted: #6B7280;
    --dch-border: #E5E7EB;
    --dch-radius: 12px;
    --dch-container: 1320px;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--dch-text);
    line-height: 1.5;
    overflow-x: hidden;
}

.dch-scope * { box-sizing: border-box; }
.dch-scope ul { list-style: none; margin: 0; padding: 0; }
.dch-scope a { text-decoration: none; color: inherit; }
.dch-scope img { max-width: 100%; display: block; }
.dch-scope h1, .dch-scope h2, .dch-scope h3 { margin: 0; line-height: 1.25; }
.dch-scope p { margin: 0; }

.dch-container {
    max-width: var(--dch-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Breaks a section's background out of Astra's boxed content wrapper so
   colored sections span the true edge-to-edge browser width, regardless
   of the theme's "Container Layout: Boxed" setting. The .dch-container
   inside each section still centers and constrains the actual content
   to a readable width — only the background/section bleeds full width. */
.dch-full-bleed {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.dch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.dch-btn:hover { transform: translateY(-2px); }
.dch-btn-primary { background: var(--dch-green); color: #fff; }
.dch-btn-primary:hover { box-shadow: 0 8px 20px rgba(23,152,62,.35); }
.dch-btn-dark { background: var(--dch-green-dark); color: #fff; }
.dch-btn-dark:hover { box-shadow: 0 8px 20px rgba(15,92,38,.35); }
.dch-btn-whatsapp { background: var(--dch-whatsapp); color: #fff; }
.dch-btn-whatsapp:hover { box-shadow: 0 8px 20px rgba(22,101,52,.35); }

/* ===================== TOP BAR ===================== */
.dch-topbar { background: var(--dch-green-dark); color: #fff; font-size: 13px; }
.dch-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; flex-wrap: wrap; gap: 8px; }
.dch-topbar-centered { justify-content: center; }
.dch-topbar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dch-topbar-left a, .dch-topbar-address { display: inline-flex; align-items: center; gap: 6px; color: #fff; opacity: .95; }
.dch-topbar-right { display: flex; align-items: center; gap: 10px; }
.dch-social-dot { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.dch-social-dot:hover { background: rgba(255,255,255,.3); }

/* ===================== MAIN HEADER ===================== */
.dch-header { background: #fff; border-bottom: 1px solid var(--dch-border); position: relative; z-index: 50; }
.dch-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 24px; }

.dch-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dch-logo-mark { height: 48px; width: auto; display: block; }
.dch-logo-word { font-size: 24px; font-weight: 800; letter-spacing: -.3px; line-height: 1; }
.dch-logo-despar { color: var(--dch-green); }
.dch-logo-clean { color: var(--dch-red); }

.dch-nav ul { display: flex; align-items: center; gap: 30px; }
.dch-nav a { font-weight: 600; font-size: 15px; color: var(--dch-text); display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.dch-nav li.is-active a { color: var(--dch-green); border-bottom: 2px solid var(--dch-green); }
.dch-nav a:hover { color: var(--dch-green); }

.dch-header-actions { display: flex; align-items: center; gap: 16px; }
.dch-search { display: flex; border: 1px solid var(--dch-border); border-radius: 8px; overflow: hidden; }
.dch-search input { border: none; outline: none; padding: 10px 14px; font-size: 14px; width: 220px; background: #F9FAFB; }
.dch-search button { background: var(--dch-green); border: none; padding: 0 16px; cursor: pointer; display: flex; align-items: center; }
.dch-cart { position: relative; display: flex; align-items: center; padding: 8px; }
.dch-cart-count { position: absolute; top: -2px; right: -2px; background: var(--dch-green); color: #fff; font-size: 11px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.dch-mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.dch-mobile-toggle span { width: 24px; height: 2px; background: var(--dch-text); border-radius: 2px; }

.dch-mobile-menu {
    position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
    background: #fff; z-index: 200; box-shadow: -8px 0 24px rgba(0,0,0,.15);
    transition: right .3s ease; padding: 80px 24px 24px;
}
.dch-mobile-menu.is-open { right: 0; }
.dch-mobile-close {
    position: absolute; top: 20px; right: 20px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--dch-green-light); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--dch-green-dark);
    transition: background .15s ease;
}
.dch-mobile-close:hover { background: var(--dch-border); }
.dch-mobile-menu li { border-bottom: 1px solid var(--dch-border); }
.dch-mobile-menu a { display: block; padding: 14px 0; font-weight: 600; }
.dch-mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.dch-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ===================== HERO ===================== */
.dch-hero-section { background: linear-gradient(180deg, #F3FBF5 0%, #fff 100%); padding: 24px 0; }
.dch-hero-grid { display: grid; grid-template-columns: 260px 1fr 280px; gap: 20px; align-items: stretch; }

/* Categories sidebar */
.dch-categories-sidebar { background: #fff; border: 1px solid var(--dch-border); border-radius: var(--dch-radius); overflow: hidden; }
.dch-sidebar-heading { background: var(--dch-green); color: #fff; font-weight: 700; font-size: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 8px; }
.dch-categories-sidebar li a { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid var(--dch-border); }
.dch-categories-sidebar li:last-child a { border-bottom: none; }
.dch-categories-sidebar li a:hover { background: var(--dch-green-light); }
.dch-cat-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--dch-green-light); display: flex; align-items: center; justify-content: center; }
.dch-cat-text { flex: 1; display: flex; flex-direction: column; }
.dch-cat-text strong { font-size: 12.5px; font-weight: 700; }
.dch-cat-text small { font-size: 11px; color: var(--dch-text-muted); }
.dch-cat-arrow { flex-shrink: 0; }

/* Hero slider */
.dch-hero-slider { position: relative; background: #fff; border: 1px solid var(--dch-border); border-radius: var(--dch-radius); overflow: hidden; min-height: 420px; }
.dch-slide { display: none; grid-template-columns: 1fr 1fr; align-items: center; height: 100%; padding: 30px 40px; gap: 20px; }
.dch-slide.is-active { display: grid; }
.dch-badge { display: inline-block; background: var(--dch-green-light); color: var(--dch-green-dark); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 100px; margin-bottom: 14px; }
.dch-slide-copy h1 { font-size: 34px; font-weight: 800; color: var(--dch-text); letter-spacing: -.5px; }
.dch-slide-copy h1 span { color: var(--dch-green); }
.dch-slide-copy p { margin: 14px 0 20px; color: var(--dch-text-muted); font-size: 15px; max-width: 420px; }
.dch-hero-features { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.dch-hero-feature { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--dch-border); border-radius: 100px; padding: 8px 14px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.dch-hero-feature span { display: flex; flex-direction: column; line-height: 1.2; }
.dch-hero-feature strong { font-size: 11.5px; font-weight: 700; }
.dch-hero-feature small { font-size: 10.5px; color: var(--dch-text-muted); }
.dch-slide-image { display: flex; align-items: center; justify-content: center; }
.dch-slide-image img { max-height: 340px; margin: 0 auto; }

.dch-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--dch-border); box-shadow: 0 2px 8px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
.dch-slider-prev { left: 16px; }
.dch-slider-next { right: 16px; }
.dch-slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dch-border); border: none; cursor: pointer; padding: 0; }
.dch-dot.is-active { background: var(--dch-green); width: 22px; border-radius: 4px; }

/* Trust box */
.dch-trust-box { position: relative; border-radius: var(--dch-radius); overflow: hidden; min-height: 420px; }
.dch-trust-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.dch-trust-overlay { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(15,92,38,.92); color: #fff; border-radius: 10px; padding: 16px; }
.dch-trust-icon { display: inline-flex; margin-bottom: 8px; }
.dch-trust-overlay strong { display: block; font-size: 15px; margin-bottom: 4px; }
.dch-trust-overlay p { font-size: 12.5px; opacity: .9; }

/* ===================== SECTION HEADING ===================== */
.dch-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.dch-section-heading h2 { font-size: 28px; font-weight: 800; }
.dch-section-heading-center { flex-direction: column; text-align: center; gap: 8px; }
.dch-section-heading-center p { color: var(--dch-text-muted); font-size: 15px; }
.dch-view-all { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dch-green); border: 1.5px solid var(--dch-green); padding: 9px 18px; border-radius: 8px; font-size: 14px; }
.dch-view-all:hover { background: var(--dch-green); color: #fff; }

/* ===================== SHOP BY CATEGORY ===================== */
.dch-shop-by-category { padding: 60px 0; }
.dch-category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.dch-category-card { border: 1px solid var(--dch-border); border-radius: var(--dch-radius); overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.dch-category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.dch-category-card-image { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.dch-category-card-image img { width: 100%; height: 100%; object-fit: cover; }
.dch-category-card-icon { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.dch-category-card-body { padding: 14px; position: relative; }
.dch-category-card-body span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.dch-category-card-body small { display: block; color: var(--dch-text-muted); font-size: 12px; }
.dch-category-card-body em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; }

/* ===================== TRUST BAR ===================== */
.dch-trust-bar { background: var(--dch-green-light); padding: 30px 0; }
.dch-trust-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dch-trust-item { display: flex; align-items: center; gap: 12px; }
.dch-trust-item strong { display: block; font-size: 14px; }
.dch-trust-item small { display: block; color: var(--dch-text-muted); font-size: 12.5px; }

/* ===================== TESTIMONIALS ===================== */
.dch-testimonials { padding: 56px 0 60px; background: #fff; }
.dch-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dch-testimonial-card { border: 1px solid var(--dch-border); border-radius: var(--dch-radius); padding: 24px; background: #fff; }
.dch-testimonial-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dch-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--dch-green-dark); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dch-testimonial-head strong { display: block; font-size: 15px; }
.dch-testimonial-head small { color: var(--dch-text-muted); font-size: 12.5px; }
.dch-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.dch-testimonial-card p { font-size: 14px; color: var(--dch-text-muted); font-style: italic; line-height: 1.6; }

/* ===================== CTA ===================== */
.dch-cta { background: var(--dch-green-light); padding: 64px 0; text-align: center; }
.dch-cta h2 { font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.dch-cta p { color: var(--dch-text-muted); font-size: 15px; max-width: 560px; margin: 0 auto 26px; }
.dch-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.dch-cta .dch-btn-whatsapp { background: #22C55E; }
.dch-cta .dch-btn-whatsapp:hover { box-shadow: 0 8px 20px rgba(34,197,94,.35); }

/* ===================== FOOTER ===================== */
.dch-footer { background: var(--dch-green-dark); color: #E5F3EA; padding-top: 26px; }
.dch-footer-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: 22px; }
.dch-footer-trust-item { display: flex; align-items: center; gap: 10px; }
.dch-footer-trust-item strong { display: block; color: #fff; font-size: 13px; }
.dch-footer-trust-item small { display: block; font-size: 11.5px; color: #A8D4B5; }
.dch-footer-divider { border-top: 1px solid rgba(255,255,255,.08); }
.dch-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding: 34px 24px 30px; }
.dch-footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: .5px; text-transform: uppercase; }
.dch-footer-col ul li { margin-bottom: 10px; }
.dch-footer-col ul a { font-size: 13.5px; color: #D6EDDD; }
.dch-footer-col ul a:hover { color: var(--dch-yellow); }
.dch-footer-logo-lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dch-footer-logo-mark { height: 38px; width: auto; display: block; }
.dch-footer-logo-word { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.dch-footer-logo-despar { color: #fff; }
.dch-footer-logo-clean { color: var(--dch-red); }
.dch-footer-brand p { font-size: 13px; color: #A8D4B5; margin-bottom: 16px; }
.dch-footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.dch-footer-socials a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.dch-footer-socials a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.dch-social-tiktok    { background: #000000; }
.dch-social-instagram { background: #E4405F; }
.dch-social-facebook  { background: #1877F2; }
.dch-social-twitter   { background: #000000; }
.dch-social-linkedin  { background: #0A66C2; }
.dch-social-google    { background: #ffffff; }
.dch-footer-contact li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.dch-newsletter-block { margin-top: 0; }
.dch-newsletter-heading { display: block; color: #fff; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.dch-newsletter-subtext { color: #A8D4B5; font-size: 12px; margin-bottom: 10px; }
.dch-newsletter { display: flex; flex-direction: column; gap: 8px; }
.dch-newsletter input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 11px 12px; color: #fff; font-size: 13px; outline: none; }
.dch-newsletter input::placeholder { color: #A8D4B5; }
.dch-newsletter button {
    width: 100%;
    background: var(--dch-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    height: auto !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    transition: background .15s ease;
}
.dch-newsletter button:hover { background: var(--dch-green-dark) !important; }
.dch-newsletter-feedback { margin-top: 8px; font-size: 12px; }
.dch-newsletter-feedback.is-success { color: #4ade80; }
.dch-newsletter-feedback.is-error { color: #f87171; }

/* ===================== FLOATING WHATSAPP ===================== */
.dch-float-whatsapp {
    position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px;
    background: var(--dch-whatsapp); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(22,101,52,.4);
    z-index: 999; transition: transform .2s ease;
}
.dch-float-whatsapp:hover { transform: scale(1.08); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1100px) {
    .dch-hero-grid { grid-template-columns: 1fr; }
    .dch-categories-sidebar { order: 2; }
    .dch-hero-slider { order: 1; }
    .dch-trust-box { order: 3; min-height: 260px; }
    .dch-category-grid { grid-template-columns: repeat(3, 1fr); }
    .dch-testimonial-grid { grid-template-columns: 1fr; }
    .dch-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .dch-topbar-address { display: none; }
    .dch-nav { display: none; }
    .dch-search { display: none; }
    .dch-mobile-toggle { display: flex; }
    .dch-header-inner { padding: 14px 16px; }
    .dch-slide { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; }
    .dch-hero-features { justify-content: center; }
    .dch-slide-copy p { margin-left: auto; margin-right: auto; }
    .dch-slide-image { order: -1; }
    .dch-slide-image img { max-height: 220px; }
    .dch-trust-bar-grid { grid-template-columns: 1fr 1fr; }
    .dch-footer-trust { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .dch-container { padding: 0 16px; }
    .dch-topbar-left { gap: 12px; font-size: 11.5px; }
    .dch-topbar-left a span, .dch-topbar-left a { white-space: nowrap; }
    .dch-logo-word { font-size: 19px; }
    .dch-category-grid { grid-template-columns: repeat(2, 1fr); }
    .dch-footer-grid { grid-template-columns: 1fr; padding: 30px 16px; }
    .dch-section-heading { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dch-cta h2 { font-size: 21px; }
    .dch-slide-copy h1 { font-size: 26px; }
    .dch-float-whatsapp { width: 50px; height: 50px; bottom: 16px; right: 16px; }
}