/* ================================================================
   VRINDA ORGANIC — Responsive Styles
   Mobile-native layout, not a centered shrunk desktop
   ================================================================ */

/* ---- 1200px ---- */
@media (max-width: 1200px) {
  .section-title { font-size: 3.4rem; }
  .hero-content h1 { font-size: 6.5rem; }
}

/* ================================================================
   ≤ 991px  —  Tablet / mobile-nav breakpoint
   ================================================================ */
@media (max-width: 991px) {
  html { font-size: 58%; }

  /* ── Navbar (collapsed menu drawer) ────────────────────── */
  .vo-navbar { padding: 1.4rem 0; background: var(--dark); }
  .vo-navbar.scrolled { padding: 1rem 0; }
  .vo-navbar .navbar-brand img { height: 4.2rem; }
  .vo-navbar .navbar-brand .brand-name { font-size: 1.1rem; }
  .vo-navbar .navbar-collapse {
    background: var(--dark);
    padding: 1.6rem 1.6rem 2rem;
    margin-top: 1.2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .vo-navbar .nav-link {
    padding: 1.4rem 0.4rem !important;
    font-size: 1.7rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: left;
  }
  .vo-navbar .nav-link:last-child { border-bottom: none; }
  .vo-navbar .navbar-cta { margin-top: 1.6rem; }
  .vo-navbar .navbar-cta .btn-primary-vo {
    width: 100%; justify-content: center;
    padding: 1.4rem; font-size: 1.6rem;
  }

  /* ── Hero ─ left-aligned, mobile-native rhythm ─────────── */
  .hero-section { min-height: 88vh; padding-top: 9rem; }
  .hero-content { max-width: 100%; }
  .hero-content h1 { font-size: 5.2rem; }
  .hero-content p  { font-size: 1.7rem; max-width: 100%; }

  /* ── Trust bar ─────────────────────────────────────────── */
  .trust-item { padding: 0.6rem 1.6rem; }
  .trust-item img { height: 4.6rem; max-width: 5.5rem; }
  .trust-item span { font-size: 1.3rem; }

  /* ── Features ──────────────────────────────────────────── */
  .feature-card { padding: 3.2rem 2rem; }

  /* ── About teaser — image then text, left-aligned ──────── */
  .about-teaser-image img { height: 32rem; }
  .about-teaser-text { padding-left: 0; margin-top: 3.2rem; }

  /* ── Farmer card ───────────────────────────────────────── */
  .farmer-card { flex-direction: column; }
  .farmer-photo { width: 100%; min-height: 24rem; max-height: 28rem; }
  .farmer-info { padding: 3rem; }

  /* ── Order page ────────────────────────────────────────── */
  .order-sidebar { padding-left: 0; margin-top: 4rem; }

  /* ── About page ────────────────────────────────────────── */
  .about-story .story-text { padding-left: 0; margin-top: 3.2rem; }

  /* ── Gallery ───────────────────────────────────────────── */
  .gallery-grid      { grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
  .gallery-full-grid { grid-template-columns: repeat(2,1fr); gap: 1.6rem; }

  /* ── Contact ───────────────────────────────────────────── */
  .contact-info-card { margin-top: 3.2rem; }
  .contact-form-card, .contact-info-card { padding: 3.6rem; }

  /* ── Footer ────────────────────────────────────────────── */
  .footer-section { padding: 5rem 0 0; }
}

/* ================================================================
   ≤ 767px  —  Phone (the mobile UI starts here)
   ================================================================ */
@media (max-width: 767px) {
  html { font-size: 58%; }                /* up from 55% for readability */

  /* ── Page-edge padding (consistent breathing room on phones) ── */
  .container { padding-left: 2rem; padding-right: 2rem; }

  /* ── Section rhythm — tighter, content-first ───────────── */
  .section-pad    { padding: 5.2rem 0; }
  .section-pad-sm { padding: 3.6rem 0; }
  .section-title  { font-size: 2.8rem; line-height: 1.2; }
  .section-subtitle { font-size: 1.55rem; max-width: 100%; }

  /* Section labels get a left accent bar — mobile-native cue */
  .section-label {
    position: relative;
    padding-left: 2rem;
    background: transparent;
    color: var(--green-dark);
    font-size: 1.15rem; letter-spacing: 0.16em;
    margin-bottom: 1rem;
  }
  .section-label::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 1.4rem; height: 2px; background: var(--green); transform: translateY(-50%);
  }

  /* ── Navbar ────────────────────────────────────────────── */
  .vo-navbar { background: var(--dark); }
  .vo-navbar .navbar-brand img { height: 3.8rem; }
  .vo-navbar .navbar-brand .brand-name { font-size: 1rem; letter-spacing: 0.08em; }

  /* ── Hero — left-aligned, content sits low (thumb zone) ── */
  .hero-section {
    min-height: 78vh;
    padding-top: 9rem; padding-bottom: 4rem;
    display: flex; align-items: flex-end;     /* push content to bottom of viewport */
  }
  .hero-section .container { width: 100%; }
  .hero-eyebrow { font-size: 1.1rem; letter-spacing: 0.18em; margin-bottom: 1.4rem; }
  .hero-content h1 { font-size: 4rem; margin-bottom: 1.6rem; line-height: 1.08; }
  .hero-content p  { font-size: 1.55rem; max-width: 100%; margin-bottom: 2.4rem; line-height: 1.6; }
  .hero-ctas { flex-direction: column; gap: 1rem; align-items: stretch; }
  .hero-ctas a { width: 100%; justify-content: center; padding: 1.5rem; }
  .hero-scroll { display: none; }

  /* ── Trust bar — horizontal scroll strip, mobile pattern ─ */
  .trust-bar { padding: 1.4rem 0; overflow: hidden; }
  .trust-bar .container { padding-left: 0; padding-right: 0; }
  .trust-bar-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 2rem;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trust-bar-inner::-webkit-scrollbar { display: none; }
  .trust-item {
    flex: 0 0 auto;
    padding: 0.4rem 1.6rem;
    border-right: 1px solid rgba(45,122,8,0.18);
  }
  .trust-item:last-child { border-right: none; padding-right: 0; }
  .trust-item:first-child { padding-left: 0; }
  .trust-item img { height: 4rem; max-width: 5rem; }
  .trust-item span { font-size: 1.2rem; white-space: nowrap; }

  /* ── Features — icon-top vertical (works in 2-col grid) ── */
  .features-section { padding: 4.4rem 0; }
  .feature-card { padding: 2.4rem 1.4rem; }
  .feature-icon-wrap { width: 5rem; height: 5rem; margin-bottom: 1.4rem; }
  .feature-icon-wrap img { width: 2.4rem; height: 2.4rem; }
  .feature-title { font-size: 1.5rem; }

  /* ── About teaser — image then heading row, left-aligned ─ */
  .about-teaser { padding: 5.2rem 0; }
  .about-teaser-image img { height: 24rem; }
  .about-teaser-text p { font-size: 1.5rem; }
  .about-teaser-text .btn-primary-vo { margin-top: 2rem; }

  /* ── Product showcase / gallery teaser headers (header + button stack left) ── */
  .product-showcase .row.align-items-end,
  .gallery-teaser   .row.align-items-end {
    flex-direction: column; align-items: stretch !important;
  }
  .product-showcase .row.align-items-end .col-lg-auto,
  .gallery-teaser   .row.align-items-end .col-lg-auto {
    margin-top: 1.6rem; align-self: flex-start;
  }

  /* ── Best-selling products — horizontal scroll carousel ── */
  .product-showcase #bestSellersGrid {
    --bs-gutter-x: 0; --bs-gutter-y: 0;        /* cancel Bootstrap row gutters */
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.2rem;
    margin: 0 -2rem;                           /* bleed to screen edges */
    padding: 0.4rem 2rem 1.6rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-showcase #bestSellersGrid::-webkit-scrollbar { display: none; }
  .product-showcase #bestSellersGrid > [class*="col-"] {
    flex: 0 0 78%; max-width: 78%;             /* peek next card */
    scroll-snap-align: start;
  }

  /* ── Product cards ─────────────────────────────────────── */
  .product-card-vo .card-image { padding-top: 60%; }
  .product-card-vo .card-body-vo { padding: 1.6rem 1.6rem 1.8rem; }
  .product-card-vo .card-name { font-size: 1.7rem; margin-bottom: 0.4rem; }
  .product-card-vo .card-desc { font-size: 1.35rem; -webkit-line-clamp: 2; margin-bottom: 1.6rem; }
  .product-card-vo .card-price { font-size: 1.7rem; }
  .product-card-vo .card-footer-vo { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .btn-order-vo { width: 100%; justify-content: center; padding: 1.2rem; font-size: 1.4rem; }

  /* ── Nursery cards — left-aligned, icon at top-left ────── */
  .nursery-section.section-pad { padding: 5.2rem 0; }
  .nursery-card {
    padding: 2.2rem; text-align: left;
  }
  .nursery-icon {
    margin: 0 0 1.4rem; width: 5rem; height: 5rem; font-size: 1.9rem;
  }
  .nursery-card h4 { font-size: 1.7rem; }
  .nursery-card p  { font-size: 1.4rem; margin-bottom: 1.4rem; }

  /* ── Farmer card ───────────────────────────────────────── */
  .farmer-photo { min-height: 22rem; }
  .farmer-info { padding: 2.4rem; }
  .farmer-quote { font-size: 1.55rem; }

  /* ── Gallery ───────────────────────────────────────────── */
  .gallery-teaser { padding: 5.2rem 0; }
  .gallery-grid      { grid-template-columns: repeat(2,1fr); gap: 0.8rem; }
  .gallery-full-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .gallery-page      { padding: 4.4rem 0; }

  /* ── Page banner — left-aligned, content low ───────────── */
  .page-banner {
    padding: 10rem 0 3.6rem;
    text-align: left;
  }
  .page-banner h1 { font-size: 3.4rem; margin-bottom: 0.4rem; }
  .page-banner .breadcrumb { justify-content: flex-start; }

  /* ── Forms — bigger targets; 16px to prevent iOS focus-zoom ── */
  .form-control-vo,
  input.form-control-vo,
  select.form-control-vo,
  textarea.form-control-vo { padding: 1.4rem 1.6rem; font-size: 16px; }
  .form-label-vo  { font-size: 1.35rem; }
  .phone-prefix   { padding: 1.4rem 1.4rem; font-size: 16px; }

  /* ── Order form / sidebar ──────────────────────────────── */
  .order-page { padding: 4.4rem 0; }
  .order-form-card    { padding: 2.4rem 1.8rem; }
  .order-form-card h3 { font-size: 2rem; margin-bottom: 2rem; padding-bottom: 1.6rem; }
  .order-product-preview { padding: 1.8rem; }
  .order-product-preview h4 { font-size: 1.8rem; }
  .order-product-preview .preview-price { font-size: 2rem; }
  .order-product-preview .preview-img { height: 14rem; }

  /* ── Contact ───────────────────────────────────────────── */
  .contact-page { padding: 4.4rem 0; }
  .contact-form-card, .contact-info-card { padding: 2.4rem 1.8rem; }
  .contact-form-card h3, .contact-info-card h3 { font-size: 2.1rem; margin-bottom: 2rem; }
  .contact-info-item { gap: 1.4rem; margin-bottom: 2rem; }
  .contact-icon { width: 4rem; height: 4rem; font-size: 1.5rem; }
  .contact-info-text a, .contact-info-text p { font-size: 1.5rem; }

  /* ── Success pages — left-aligned, single column ───────── */
  .success-page { padding: 4.4rem 0; }
  .success-card { padding: 3.2rem 2rem; text-align: left; }
  .success-icon { margin: 0 0 2rem; width: 6rem; height: 6rem; font-size: 2.4rem; }
  .success-card h1, .success-card h2 { font-size: 2.4rem; }
  .success-card > p, .success-subtitle { font-size: 1.5rem; }
  .success-order-number { align-items: flex-start; padding: 1.6rem 2rem; margin: 0 0 2.4rem; }
  .success-steps { padding: 1.8rem; gap: 1.4rem; }
  .step-icon { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }
  .step-text strong { font-size: 1.4rem; }
  .step-text span { font-size: 1.3rem; }
  .success-actions { flex-direction: column; gap: 0.8rem; }
  .success-actions a, .success-actions button { width: 100%; justify-content: center; }

  /* ── Footer — left-aligned stack ───────────────────────── */
  .footer-section { padding: 4.4rem 0 0; }
  .footer-section .row.g-5 { --bs-gutter-y: 3.2rem; }
  .footer-heading { margin-bottom: 1.6rem; padding-bottom: 1rem; }
  .footer-tagline { max-width: 38rem; }
  .footer-newsletter-group { max-width: 42rem; }
  .footer-bottom { flex-direction: column; gap: 0.6rem; align-items: flex-start; margin-top: 3.2rem; padding: 1.8rem 0; }

  /* ── Bottom space only when the floating bar exists ────── */
  body:has(.mobile-bottom-bar) { padding-bottom: 7.2rem; }
}

/* ================================================================
   ≤ 576px  —  Small phones
   ================================================================ */
@media (max-width: 576px) {
  html { font-size: 56%; }

  .section-title { font-size: 2.5rem; }
  .section-subtitle { font-size: 1.5rem; }

  .hero-content h1 { font-size: 3.4rem; }
  .hero-content p { font-size: 1.5rem; }

  /* Products page filter pills — horizontal scroll strip */
  .filter-bar {
    flex-wrap: nowrap; overflow-x: auto;
    gap: 0.6rem; margin: 0 -2rem 2.8rem;
    padding: 0.2rem 2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill { flex: 0 0 auto; font-size: 1.3rem; padding: 0.8rem 1.6rem; }

  /* Gallery — keep 2-col for visual richness */
  .gallery-grid      { grid-template-columns: 1fr 1fr; }
  .gallery-full-grid { grid-template-columns: 1fr 1fr; }

  .order-call-box a { font-size: 1.7rem; }
}

/* ================================================================
   FLOATING MOBILE BOTTOM BAR  (Call + Order)
   ================================================================ */
.mobile-bottom-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  padding: 0.8rem 1rem;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0));
}
.mobile-bottom-bar .mbb-row {
  display: flex; gap: 0.8rem;
  max-width: 48rem; margin: 0 auto;
}
.mobile-bottom-bar a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 1.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  letter-spacing: 0.02em; text-decoration: none;
  transition: transform 0.15s ease, box-shadow var(--transition);
}
.mobile-bottom-bar a:active { transform: scale(0.97); }
.mobile-bottom-bar .mbb-call {
  background: var(--white); color: var(--green-dark);
  border: 1.5px solid var(--green);
}
.mobile-bottom-bar .mbb-order {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: var(--white);
  box-shadow: var(--shadow-green);
}
.mobile-bottom-bar i { font-size: 1.5rem; }

@media (max-width: 767px) { .mobile-bottom-bar { display: block; } }

/* Opt-out class for pages that don't want the bar */
body.no-mobile-cta .mobile-bottom-bar { display: none; }