/*
 Theme Name:   Astra Child - Leoste
 Theme URI:    https://leoste.fr
 Description:  Child theme for Leoste.fr — all custom CSS consolidated here.
               NEVER put CSS in Spectra Custom CSS, Astra Additional CSS, or anywhere else.
               This file is the SINGLE source of truth for all Leoste styling.
 Author:       Leoste Global LLC FZ
 Author URI:   https://leoste.fr
 Template:     astra
 Version:      1.0.0
 License:      Private
 Text Domain:  astra-child-leoste
*/


/* ============================================================================
   TABLE OF CONTENTS
   ============================================================================

   SOURCE 1: HOMEPAGE (Spectra Custom CSS — 546 lines original)
     1.1  Style Reset
     1.2  Hero Section
     1.3  Trust Bar (full-width)
     1.4  All Buttons (gold, outline, primary, green-outline)
     1.5  Collection Cards
     1.6  "Why Leoste" Section / Value Cards
     1.7  WooCommerce Products
     1.8  "Tea Journey" Section
     1.9  Testimonials
     1.10 Final CTA Section
     1.11 Responsive (mobile)
     1.12 Accessibility

   SOURCE 2: ABOUT US PAGE (Spectra Custom CSS)
     2.1  Hero & CTA Gradients
     2.2  Full-Width Fixes
     2.3  Texture Overlay
     2.4  Gold Accent & Divider
     2.5  Card Hover Effects (generic)
     2.6  Button Hover (generic)
     2.7  Stat Boxes
     2.8  Certification Cards
     2.9  Responsive (mobile)
     2.10 Captions

   SOURCE 3: DELIVERY & PAYMENT PAGE (Spectra Custom CSS)
     3.1  Delivery Hero
     3.2  Delivery Cards
     3.3  Free Shipping Banner

   SOURCE 4: CONTACT PAGE (Spectra Custom CSS)
     4.1  Contact Hero
     4.2  Contact Cards
     4.3  Social Icons
     4.4  Contact Form 7 Styling

   SOURCE 5: TERMS & CONDITIONS (Spectra Custom CSS)
     5.1  Legal Hero
     5.2  Legal Section Hover

   SOURCE 6: PRIVACY POLICY (Spectra Custom CSS)
     6.1  Legal Hero (shared with Terms — defined once)
     6.2  Legal Section Hover (shared with Terms — defined once)
     6.3  Legal Content List Styling

   SOURCE 7: ASTRA ADDITIONAL CSS
     7.1  WooCommerce View Cart Button
     7.2  Navigation Menu Spacing

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


/* ============================================================================
   SOURCE 1: HOMEPAGE
   ============================================================================
   Original: Spectra Custom CSS on Homepage
   File: "LEOSTE TEA HOMEPAGE - CSS v4.1 FINAL" (546 lines)
   ============================================================================ */


/* --- 1.1 Style Reset --- */

html {
  scroll-behavior: smooth;
}

.entry-content .wp-block-button,
.entry-content .wp-block-button__link,
body .wp-block-button,
body .wp-block-button__link,
.wp-block-button,
.wp-block-button__link {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.entry-content .wp-block-button .wp-block-button__link:hover,
.entry-content .wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-button .wp-block-button__link:active,
body .wp-block-button .wp-block-button__link:hover,
body .wp-block-button .wp-block-button__link:focus,
body .wp-block-button .wp-block-button__link:active {
  background-image: none !important;
}

/* Remove gap above first section on all pages */
.entry-content > .wp-block-group:first-child {
  margin-top: 0 !important;
}


/* --- 1.2 Hero Section --- */

.leoste-hero {
  background: linear-gradient(165deg,
    #061a0e 0%,
    #082211 10%,
    #0a2a17 25%,
    #0d331d 40%,
    #103c23 55%,
    #144529 70%,
    #184e2f 85%,
    #1c5735 100%) !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  overflow: hidden;
}

.leoste-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 10% 90%, rgba(201, 169, 98, 0.07) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.leoste-hero > .wp-block-group {
  position: relative;
  z-index: 2;
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.leoste-hero-badge {
  animation: gentle-float 4s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}


/* --- 1.3 Trust Bar (full-width) --- */

.leoste-trust-bar {
  background: linear-gradient(90deg, #f8faf9 0%, #f2f5f3 50%, #f8faf9 100%) !important;
  border-top: 1px solid rgba(26, 77, 46, 0.08) !important;
  border-bottom: 1px solid rgba(26, 77, 46, 0.08) !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.leoste-trust-item {
  transition: all 0.35s ease !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
}

.leoste-trust-item:hover {
  transform: scale(1.08) !important;
  background-color: rgba(26, 77, 46, 0.05) !important;
}


/* --- 1.4 All Buttons --- */

/* Gold button */
.leoste-btn-gold .wp-block-button__link,
.leoste-btn-gold .wp-block-button__link:link,
.leoste-btn-gold .wp-block-button__link:visited {
  background: #c9a962 !important;
  background-color: #c9a962 !important;
  background-image: none !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 4px 15px rgba(201, 169, 98, 0.3) !important;
  overflow: hidden !important;
}

.leoste-btn-gold .wp-block-button__link:hover,
.leoste-btn-gold .wp-block-button__link:focus,
.leoste-btn-gold .wp-block-button__link:active {
  background: #d9bc72 !important;
  background-color: #d9bc72 !important;
  background-image: none !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(201, 169, 98, 0.45) !important;
}

/* White outline button */
.leoste-btn-outline .wp-block-button__link,
.leoste-btn-outline .wp-block-button__link:link,
.leoste-btn-outline .wp-block-button__link:visited {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: none !important;
}

.leoste-btn-outline .wp-block-button__link:hover,
.leoste-btn-outline .wp-block-button__link:focus,
.leoste-btn-outline .wp-block-button__link:active {
  background: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.15) !important;
}

/* Green primary button */
.leoste-btn-primary .wp-block-button__link,
.leoste-btn-primary .wp-block-button__link:link,
.leoste-btn-primary .wp-block-button__link:visited {
  background: #1a4d2e !important;
  background-color: #1a4d2e !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 4px 15px rgba(26, 77, 46, 0.25) !important;
}

.leoste-btn-primary .wp-block-button__link:hover,
.leoste-btn-primary .wp-block-button__link:focus,
.leoste-btn-primary .wp-block-button__link:active {
  background: #236339 !important;
  background-color: #236339 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(26, 77, 46, 0.4) !important;
}

/* Green outline button */
.leoste-btn-green-outline .wp-block-button__link,
.leoste-btn-green-outline .wp-block-button__link:link,
.leoste-btn-green-outline .wp-block-button__link:visited {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #1a4d2e !important;
  border: 2px solid #1a4d2e !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: none !important;
}

.leoste-btn-green-outline .wp-block-button__link:hover,
.leoste-btn-green-outline .wp-block-button__link:focus,
.leoste-btn-green-outline .wp-block-button__link:active {
  background: #1a4d2e !important;
  background-color: #1a4d2e !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #1a4d2e !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(26, 77, 46, 0.3) !important;
}


/* --- 1.5 Collection Cards --- */

.leoste-collection-card {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  cursor: pointer !important;
}

.leoste-collection-card .wp-block-cover {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow: hidden !important;
}

.leoste-collection-card .wp-block-cover img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.leoste-collection-card:hover {
  transform: translateY(-12px) !important;
  box-shadow:
    0 30px 60px rgba(26, 77, 46, 0.2),
    0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.leoste-collection-card:hover .wp-block-cover img {
  transform: scale(1.08) !important;
}

.leoste-collection-card h3 a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.leoste-collection-card h3 a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}


/* --- 1.6 "Why Leoste" Section / Value Cards --- */

.leoste-story-section {
  background: linear-gradient(180deg, #f7faf8 0%, #ffffff 40%, #ffffff 60%, #f7faf8 100%) !important;
}

.leoste-value-card {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important;
  border: 1px solid rgba(26, 77, 46, 0.08) !important;
  overflow: hidden !important;
}

.leoste-value-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 0 !important;
  background: linear-gradient(180deg, #c9a962 0%, #1a4d2e 100%) !important;
  transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border-radius: 4px 0 0 4px !important;
  z-index: 10 !important;
}

.leoste-value-card:hover {
  transform: translateX(10px) !important;
  box-shadow: 0 18px 50px rgba(26, 77, 46, 0.12) !important;
  border-color: rgba(26, 77, 46, 0.15) !important;
  background-color: #ffffff !important;
}

.leoste-value-card:hover::before {
  height: 100% !important;
}


/* --- 1.7 WooCommerce Products --- */

.woocommerce ul.products li.product {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(26, 77, 46, 0.06) !important;
  padding-bottom: 20px !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 25px 55px rgba(26, 77, 46, 0.15) !important;
  border-color: rgba(26, 77, 46, 0.1) !important;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
  background: #1a4d2e !important;
  background-color: #1a4d2e !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.35s ease !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover {
  background: #236339 !important;
  background-color: #236339 !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(26, 77, 46, 0.35) !important;
  border-radius: 50px !important;
}

.woocommerce span.onsale {
  background: #c9a962 !important;
  background-color: #c9a962 !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.2 !important;
}


/* --- 1.8 "Tea Journey" Section --- */

.leoste-journey-section {
  background: linear-gradient(180deg, #f5f8f6 0%, #edf2ef 100%) !important;
}

.leoste-journey-step {
  position: relative !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border: 1px solid rgba(26, 77, 46, 0.05) !important;
}

.leoste-journey-step:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 25px 55px rgba(26, 77, 46, 0.12) !important;
  border-color: rgba(201, 169, 98, 0.25) !important;
}


/* --- 1.9 Testimonials --- */

.leoste-testimonial {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border: 1px solid rgba(26, 77, 46, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

.leoste-testimonial::before {
  content: '\201C' !important;
  position: absolute !important;
  top: 16px !important;
  left: 20px !important;
  font-size: 72px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  color: rgba(201, 169, 98, 0.15) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.leoste-testimonial > * {
  position: relative !important;
  z-index: 1 !important;
}

.leoste-testimonial:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(26, 77, 46, 0.1) !important;
  border-color: rgba(201, 169, 98, 0.2) !important;
}


/* --- 1.10 Final CTA Section --- */

.leoste-cta-section {
  background: linear-gradient(165deg,
    #061a0e 0%,
    #082211 15%,
    #0a2a17 30%,
    #0d331d 45%,
    #103c23 60%,
    #144529 75%,
    #184e2f 90%,
    #1c5735 100%) !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  overflow: hidden !important;
}

.leoste-cta-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background:
    radial-gradient(ellipse at 25% 75%, rgba(201, 169, 98, 0.1) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.leoste-cta-section > .wp-block-group {
  position: relative !important;
  z-index: 2 !important;
}


/* --- 1.11 Responsive (mobile) --- */

@media (max-width: 782px) {
  .leoste-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .leoste-collection-card {
    min-height: 300px !important;
  }

  .leoste-collection-card:hover {
    transform: translateY(-8px) !important;
  }

  .leoste-value-card:hover {
    transform: translateX(6px) !important;
  }

  .leoste-journey-step:hover {
    transform: translateY(-6px) scale(1.01) !important;
  }

  .leoste-testimonial::before {
    font-size: 48px !important;
    top: 12px !important;
    left: 16px !important;
  }
}

@media (max-width: 480px) {
  .leoste-hero-badge {
    padding: 8px 16px !important;
  }

  .leoste-hero-badge p {
    font-size: 12px !important;
  }

  .leoste-collection-card {
    min-height: 260px !important;
  }
}


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

.wp-block-button__link:focus-visible {
  outline: 3px solid #c9a962 !important;
  outline-offset: 4px !important;
}

a:focus-visible {
  outline: 2px solid #1a4d2e !important;
  outline-offset: 3px !important;
}

[id] {
  scroll-margin-top: 120px !important;
}


/* ============================================================================
   SOURCE 2: ABOUT US PAGE
   ============================================================================
   Original: Spectra Custom CSS on About Us page
   ============================================================================ */


/* --- 2.1 Hero & CTA Gradients --- */

.leoste-hero-gradient {
  background: linear-gradient(160deg, #0a2f1a 0%, #143d28 40%, #1a4d2e 70%, #245a38 100%) !important;
  position: relative;
}

.leoste-cta-gradient {
  background: linear-gradient(160deg, #0d3a1f 0%, #1a4d2e 50%, #143d28 100%) !important;
}


/* --- 2.2 Full-Width Fixes --- */

.leoste-hero-gradient,
.leoste-cta-gradient {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}


/* --- 2.3 Texture Overlay --- */

.leoste-hero-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.02) 0%, transparent 50%);
  pointer-events: none;
}


/* --- 2.4 Gold Accent & Divider --- */

.leoste-gold {
  color: #c9a962 !important;
}

.leoste-divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1a4d2e, transparent);
  margin: 0 auto;
}


/* --- 2.5 Card Hover Effects (generic) --- */

.wp-block-group[style*="border-radius"]:not(.leoste-hero-gradient):not(.leoste-cta-gradient) {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group[style*="border-radius"]:not(.leoste-hero-gradient):not(.leoste-cta-gradient):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 77, 46, 0.12);
}


/* --- 2.6 Button Hover (generic) --- */

.wp-block-button__link {
  transition: all 0.3s ease !important;
}

.wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}


/* --- 2.7 Stat Boxes --- */

.leoste-stat-box {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* --- 2.8 Certification Cards --- */

.leoste-cert-card {
  position: relative;
  overflow: hidden;
}

.leoste-cert-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  transition: width 0.3s ease;
}

.leoste-cert-card:hover::after {
  width: 8px;
}


/* --- 2.9 Responsive (mobile) --- */

@media (max-width: 782px) {
  .leoste-hero-gradient {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .leoste-cta-gradient {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}


/* --- 2.10 Captions --- */

.wp-element-caption {
  font-style: italic;
  color: #888;
  font-size: 14px;
  margin-top: 12px;
}


/* ============================================================================
   SOURCE 3: DELIVERY & PAYMENT PAGE
   ============================================================================
   Original: Spectra Custom CSS on Delivery & Payment page
   ============================================================================ */


/* --- 3.1 Delivery Hero --- */

.leoste-delivery-hero {
  background: linear-gradient(160deg, #0a2f1a 0%, #143d28 40%, #1a4d2e 70%, #245a38 100%) !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  box-sizing: border-box !important;
}


/* --- 3.2 Delivery Cards --- */

.leoste-delivery-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leoste-delivery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 77, 46, 0.12);
}


/* --- 3.3 Free Shipping Banner --- */

.leoste-free-shipping {
  position: relative;
  z-index: 10;
}


/* ============================================================================
   SOURCE 4: CONTACT PAGE
   ============================================================================
   Original: Spectra Custom CSS on Contact page
   ============================================================================ */


/* --- 4.1 Contact Hero --- */

.leoste-contact-hero {
  background: linear-gradient(160deg, #0a2f1a 0%, #143d28 40%, #1a4d2e 70%, #245a38 100%) !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}


/* --- 4.2 Contact Cards --- */

.leoste-contact-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leoste-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 77, 46, 0.12);
}


/* --- 4.3 Social Icons --- */

.leoste-social-icon {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.leoste-social-icon:hover {
  transform: scale(1.1);
}


/* --- 4.4 Contact Form 7 Styling --- */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  font-size: 16px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  border-color: #1a4d2e !important;
  box-shadow: 0 0 0 3px rgba(26, 77, 46, 0.1) !important;
  outline: none !important;
}

.wpcf7-form input[type="submit"] {
  background-color: #1a4d2e !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 16px 40px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #143d28 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(26, 77, 46, 0.3) !important;
}


/* ============================================================================
   SOURCE 5 & 6: LEGAL PAGES (Terms & Conditions + Privacy Policy)
   ============================================================================
   Original: Spectra Custom CSS on Terms and Privacy Policy pages
   Note: Both pages share .leoste-legal-hero and .leoste-legal-section
   Privacy Policy adds .leoste-legal-content list styling
   ============================================================================ */


/* --- 5.1 / 6.1 Legal Hero (shared) --- */

.leoste-legal-hero {
  background: linear-gradient(160deg, #0a2f1a 0%, #143d28 40%, #1a4d2e 70%, #245a38 100%) !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  box-sizing: border-box !important;
}


/* --- 5.2 / 6.2 Legal Section Hover (shared) --- */

.leoste-legal-section {
  transition: all 0.3s ease;
}

.leoste-legal-section:hover {
  background-color: #f0f5f2 !important;
}


/* --- 6.3 Legal Content List Styling (Privacy Policy) --- */

.leoste-legal-content ul {
  list-style: none;
  padding-left: 0;
}

.leoste-legal-content li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}

.leoste-legal-content li::before {
  content: "\2022";
  color: #1a4d2e;
  font-weight: bold;
  position: absolute;
  left: 0;
}


/* ============================================================================
   SOURCE 7: ASTRA ADDITIONAL CSS
   ============================================================================
   Original: Appearance → Customize → Additional CSS
   ============================================================================ */


/* --- 7.1 WooCommerce View Cart Button --- */

.woocommerce ul.products li.product .button.view-cart-button {
  background: #c9a962 !important;
  color: #1a1a1a !important;
}

.woocommerce ul.products li.product .button.view-cart-button:hover {
  background: #d9bc72 !important;
}


/* --- 7.2 Navigation Menu Spacing --- */

@media (min-width: 922px) and (max-width: 1100px) {
  .main-header-menu > .menu-item > .menu-link {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}


/* ============================================================================
   END OF LEOSTE CHILD THEME CSS
   ============================================================================

   RULES FOR FUTURE EDITORS:

   1. ALL custom CSS goes in THIS FILE — nowhere else
   2. NEVER add CSS to Spectra Custom CSS (per-page settings)
   3. NEVER add CSS to Appearance → Customize → Additional CSS
   4. Block editor inline styles (font-size, padding, margin, etc.) stay in HTML
   5. Only design/behavior CSS (hovers, gradients, animations) belongs here

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