/* ═══════════════════════════════════════════════════════════════════════════
   legacy.css (v2.0, 2026-09-26) — the homepage's own section styles, moved
   unchanged so the sections that moved from the homepage (What We Farm,
   What We Sell, the shop, blog, FAQ, pricing, projects, gallery…) look the
   same on their new pages. Copied from the <style> block of index.html
   (v1.9.0). Only change: the old global "section { padding }" rule now
   applies to moved sections only (class "vfl"), so it can't disturb the
   landing-page layouts.
   ═══════════════════════════════════════════════════════════════════════════ */
  .species-card { transition: transform .2s ease, box-shadow .2s ease; }
  .species-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -8px rgba(26,77,46,0.18); }
  .grain { background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 4px 4px; }
  .vf-leaf-divider { display:flex; align-items:center; justify-content:center; gap:10px;
                     margin:12px 0 10px; color:#3f8a5b; }
  .vf-leaf-divider svg { width:19px; height:19px; }
  .vf-leaf-line { width:52px; height:2px; border-radius:2px; background:#c3dfc9; }

  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .faq-icon { transform: rotate(45deg); }
  .faq-icon { transition: transform .2s; }
  .price-popular { border: 2px solid #1a4d2e; transform: scale(1.02); position: relative; z-index: 1; }
  @media (max-width: 768px) { .price-popular { transform: none; } }
  .check::before { content: "✓"; color: #2d6e47; font-weight: 700; margin-right: 0.5rem; }
  .x { color: #9ca3af; }
  .x::before { content: "✕"; color: #9ca3af; font-weight: 700; margin-right: 0.5rem; }
  .pulse-dot { animation: pulse 2s infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  /* Smooth section padding for mobile */
  section.vfl { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); scroll-margin-top: 90px; }

  /* ── Shop styles ── */
  .cat-pill {
    background: #f5ecd9; color: #7a5a39; border: 1px solid transparent;
  }
  .cat-pill:hover { background: #deb887; color: #fff; }
  .cat-pill.active { background: #1a4d2e; color: #fdfbf6; }

  .product-card {
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
  }
  .product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -8px rgba(26,77,46,0.15); }

  /* Cart: controlled via inline styles by openCart()/closeCart() JS */

  /* WhatsApp FAB */
  #wa-fab { transition: transform .2s ease, box-shadow .2s ease; }
  #wa-fab:hover { transform: scale(1.08); }

  /* Floating cart button */
  #cart-fab {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  #cart-fab:hover { transform: scale(1.05); }
  #cart-fab.bounce { animation: cartBounce .4s ease; }
  @keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }

  /* ── Blog styles ── */
  .blog-card { transition: transform .2s ease, box-shadow .2s ease; }
  .blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px -10px rgba(26,77,46,0.18); }
  .blog-card .cover {
    background:
      radial-gradient(ellipse at top right, rgba(212,165,116,0.25), transparent 60%),
      linear-gradient(160deg, #f1f8f3 0%, #fdfbf6 100%);
  }
  .blog-tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: #f5ecd9; color: #7a5a39; padding: 4px 10px; border-radius: 999px;
  }
  /* Post view (single article) */
  #post-view article h2 { font-size: 1.625rem; font-weight: 700; color: #1a4d2e; margin: 2rem 0 .75rem; }
  #post-view article h3 { font-size: 1.25rem; font-weight: 700; color: #26583a; margin: 1.5rem 0 .5rem; }
  #post-view article p  { margin: .75rem 0; color: #374151; line-height: 1.75; font-size: 1.05rem; }
  #post-view article ul { margin: .75rem 0 .75rem 1.5rem; list-style: disc; color: #374151; line-height: 1.7; }
  #post-view article ol { margin: .75rem 0 .75rem 1.5rem; list-style: decimal; color: #374151; line-height: 1.7; }
  #post-view article li { margin: .35rem 0; }
  #post-view article blockquote {
    border-left: 4px solid #d4a574; padding: .5rem 1rem; margin: 1rem 0;
    background: #f5ecd9; color: #4b5563; font-style: italic; border-radius: 0 .5rem .5rem 0;
  }
  #post-view article strong { color: #1a4d2e; }
  #post-view article a { color: #2d6e47; text-decoration: underline; }

  /* Social icon button (footer / follow row) */
  .social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(253,251,246,0.08); color: #fdfbf6;
    transition: background .2s ease, transform .2s ease;
  }
  .social-icon:hover { background: rgba(253,251,246,0.18); transform: translateY(-2px); }
  .social-icon-light {
    background: #fdfbf6; color: #1a4d2e; border: 1px solid rgba(26,77,46,0.12);
  }
  .social-icon-light:hover { background: #f1f8f3; }

  /* Share button row on post pages */
  /* Mobile nav — display:none/block avoids Tailwind v4 transform conflicts */
  #mobile-menu { display: none; }
  #mobile-menu.open { display: block; }

  .share-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1rem; border-radius: .75rem; font-size: .85rem; font-weight: 600;
    transition: transform .2s ease, opacity .2s ease;
  }
  .share-btn:hover { transform: translateY(-1px); opacity: .9; }

  /* ── Species breed modal ── */
  #species-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,0); pointer-events: none;
    visibility: hidden;
    transition: background .25s, visibility .25s;
  }
  #species-modal.open { background: rgba(0,0,0,0.50); pointer-events: all; visibility: visible; }
  #species-panel {
    width: 100%; max-width: 560px; max-height: 82vh;
    background: #fdfbf6; border-radius: 1.5rem 1.5rem 0 0;
    overflow-y: auto; padding: 1.75rem 1.5rem 2.5rem;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.2);
  }
  @media (min-width: 640px) {
    #species-modal { align-items: center; }
    #species-panel { border-radius: 1.5rem; margin: 1rem; }
  }
  #species-modal.open #species-panel { transform: translateY(0); }
  .breed-card {
    background: #f1f8f3; border: 1px solid #d1e7da; border-radius: .85rem;
    padding: .75rem 1rem; margin-bottom: .6rem;
  }
  .breed-card-name { font-weight: 700; color: #1a4d2e; font-size: .95rem; }
  .breed-card-desc { font-size: .85rem; color: #4b5563; margin-top: .2rem; line-height: 1.5; }

  /* ═══ Mobile UX pass + product detail modal (2 July 2026) ═══
     styles.css is a COMPILED Tailwind subset — new components must be
     styled here, not with utility classes that were never compiled. */

  /* Product detail modal (dedicated classes) */
  .vf-pdm { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 1rem; }
  .vf-pdm-overlay { position: absolute; inset: 0; background: rgba(16,38,26,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .vf-pdm-panel { position: relative; background: #fff; border-radius: 1.25rem; max-width: 30rem; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); animation: vf-pdm-in .22s ease-out; }
  .vf-pdm-close { position: absolute; top: .7rem; right: .7rem; z-index: 2; background: rgba(255,255,255,.92); color: #6b7280; border-radius: 999px; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 1.15rem; box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer; }
  .vf-pdm-close:hover { color: #dc2626; }
  .vf-pdm-img { aspect-ratio: 4/3; background: #fdfbf6; display: grid; place-items: center; font-size: 5.5rem; overflow: hidden; border-radius: 1.25rem 1.25rem 0 0; }
  .vf-pdm-img img { width: 100%; height: 100%; object-fit: cover; }
  .vf-pdm-badge { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
  .vf-pdm-btn { font-weight: 600; font-size: .875rem; padding: .7rem 1.3rem; border-radius: .75rem; cursor: pointer; transition: background .15s; border: 0; }
  .vf-pdm-btn-primary { background: #1a4d2e; color: #fdfbf6; } .vf-pdm-btn-primary:hover { background: #1f4630; }
  .vf-pdm-btn-earth { background: #a67c4f; color: #fdfbf6; } .vf-pdm-btn-earth:hover { background: #7a5a39; }
  .vf-pdm-btn-gray { background: #e5e7eb; color: #374151; } .vf-pdm-btn-gray:hover { background: #d1d5db; }
  @keyframes vf-pdm-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (max-width: 640px) {
    /* bottom-sheet feel on phones */
    .vf-pdm { align-items: flex-end; padding: 0; }
    .vf-pdm-panel { border-radius: 1.25rem 1.25rem 0 0; max-height: 88vh; animation: vf-pdm-up .25s ease-out; }
    .vf-pdm-img { border-radius: 1.25rem 1.25rem 0 0; }
    @keyframes vf-pdm-up { from { transform: translateY(40%); opacity: .5; } to { transform: none; opacity: 1; } }
  }

  @media (max-width: 639px) {
    /* 1. Category pills: one horizontally-scrollable row instead of 3–4 wrapped rows */
    #category-filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
      padding: 0 1rem .5rem; margin-left: -1rem; margin-right: -1rem; }
    #category-filters::-webkit-scrollbar { display: none; }
    #category-filters .cat-pill { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; }

    /* 2. Shop grid: 2 compact columns on phones (was 1 tall column) */
    #product-grid .grid-cols-1, #product-grid.grid-cols-1 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
    #product-grid .product-card { padding: .7rem; }
    #product-grid .product-card h3 { font-size: .8rem; min-height: 2.2rem; }
    #product-grid .product-card .text-lg { font-size: .95rem; }
    #product-grid .product-card .add-btn { padding-top: .55rem; padding-bottom: .55rem; font-size: .78rem; }

    /* 3. iOS: inputs under 16px trigger viewport zoom on focus */
    #cart-cust-name, #cart-cust-phone, #cart-drawer input, #tour-form input, #tour-form select, #tour-form textarea,
    #auth-modal input { font-size: 16px !important; }
  }

  /* 4. Touch targets: cart qty ± and remove were 28px / 16px — min 40px now */
  .qty-dec, .qty-inc { min-width: 40px; min-height: 40px; font-size: 1.05rem; }
  .qty-rm { padding: .6rem; margin: -.35rem -.35rem 0 0; }
  .qty-rm svg { width: 1.05rem; height: 1.05rem; }

  /* 5. Tactile feedback on primary shop actions */
  .add-btn:active, .vf-pdm-btn:active, .cat-pill:active, #checkout-whatsapp:active { transform: scale(.97); }
  .add-btn, .vf-pdm-btn, .cat-pill, #checkout-whatsapp { transition: transform .08s ease, background-color .15s ease; }

  /* ═══════════ WHAT WE FARM — redesigned grid (2026-09-22) ═══════════
     Photo-card + icon-badge layout matching Vincent's mockup. Reuses the
     species keys already wired to openBreedsModal()/bstore-* content —
     see the section itself for per-card notes on the two entries that
     don't have breed data (Horticulture, Training & Agritourism). */
  .wf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #3f8a5b; }
  .wf-script { font-family: 'Caveat', cursive; line-height: 1.15; color: #26583a; }
  .wf-card { background: #fff; border: 1px solid #e6f0e9; border-radius: 16px; overflow: hidden;
             transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column; }
  .wf-card:hover { box-shadow: 0 10px 28px rgba(26,77,46,.12); transform: translateY(-3px); }
  .wf-photo { position: relative; height: 140px; width: 100%; background: #eef5f0; }
  .wf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .wf-badge { position: absolute; left: 14px; bottom: -20px; width: 44px; height: 44px; border-radius: 50%;
              background: #1a4d2e; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15);
              display: flex; align-items: center; justify-content: center; }
  .wf-badge-ic { width: 22px; height: 22px; }
  .wf-body { padding: 28px 16px 16px; flex: 1; display: flex; flex-direction: column; }
  .wf-body h3 { font-size: 15px; font-weight: 700; color: #0f2e1c; }
  .wf-body p { font-size: 12.5px; color: #6b7280; margin-top: 4px; line-height: 1.4; flex: 1; }
  .wf-strip { background: #eaf4ec; border-radius: 16px; }
  .wf-strip-item { padding: 20px 16px; }
  .wf-strip-ic { width: 34px; height: 34px; border-radius: 50%; background: #1a4d2e; display: flex;
                 align-items: center; justify-content: center; flex-shrink: 0; }
  .wf-strip-ic svg { width: 18px; height: 18px; color: #fff; }