/* =============================================================
   Alm Organic — homepage MOBILE layer (≤767px only)
   Loaded after the main stylesheet (prototype: styles.css · plugin: alm-home.css).
   Every rule lives inside the media query below, so desktop/tablet ≥768px is untouched.
   This file is byte-identical in:
     prototype/assets/css/alm-home-mobile.css
     wordpress/alm-homepage/assets/css/alm-home-mobile.css
   Brand locks kept: colours, fonts and radii are inherited from the main stylesheet.
   ============================================================= */

@media (max-width: 767px) {

  /* ---------- general rhythm ---------- */
  .section { padding-top: 56px; padding-bottom: 56px; }       /* .trustbar + .section (0 top) and #shop keep their own */
  .h-sec { font-size: clamp(24px, 7.4vw, 28px); text-wrap: balance; }
  .lead { line-height: 1.55; margin-top: 10px; }
  .overline { font-size: 12px; letter-spacing: .14em; }

  /* ---------- 1. botanicals — small edge accents (placement + collision check in JS) ---------- */
  .bot-layer { overflow-x: clip; }                               /* edge-pinned accents never widen the page */
  .bot-layer .bdeco--m { filter: drop-shadow(0 6px 10px rgba(20,40,25,.16)); }

  /* ---------- 2. announcement bar — one line, ellipsis-safe ---------- */
  .announce { height: 32px; padding: 0 12px; font-size: 12px; letter-spacing: 0; }
  .announce span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---------- 3. hero — copy anchored in the lower third over a soft dark gradient ---------- */
  .hero { min-height: 88vh; min-height: 88svh; align-items: flex-end; }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 18%, rgba(0,0,0,0) 34%,
      rgba(0,0,0,.30) 54%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.72) 100%);
  }
  .hero__inner { width: 100%; max-width: 480px; padding: 0 20px 34px; }
  .hero .overline { font-size: 11px; letter-spacing: .14em; }
  .hero h1 { font-size: clamp(25px, 8.4vw, 34px); line-height: 1.12; margin-top: 10px; text-wrap: balance; }
  .hero__sub {
    font-size: 15px; line-height: 1.5; margin: 12px auto 20px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .hero .btn-cta { width: 100%; max-width: 340px; min-height: 48px; justify-content: center; font-size: 16px; }

  /* ---------- 4a. shop by concern — tidy 2-column grid of compact tiles ---------- */
  .catpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 22px; }
  .catpick__card {
    min-height: 68px; flex-direction: row; justify-content: flex-start; gap: 10px;
    padding: 10px 12px; text-align: left;
  }
  .catpick__card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
  .catpick__card:hover { transform: none; }
  .catpick__ic { flex: none; }
  .catpick__ic svg { width: 26px; height: 26px; }
  .catpick__nm { font-size: 14px; line-height: 1.25; }

  /* ---------- 4b. concern tea strip — full-bleed swipe row, cards fit the viewport ---------- */
  .catpick__strip { width: 100vw; padding: 0; margin: 14px 0 4px; }
  .catpick__arrow { display: none !important; }                 /* swipe instead (JS toggles [hidden]) */
  .catpick__teas { gap: 12px; padding: 10px 20px 16px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; }
  .ctea { flex: 0 0 82vw; max-width: 340px; height: auto; min-height: 172px; }
  .ctea:hover { transform: none; }
  .ctea__img { flex-basis: 100px; padding: 10px; }
  .ctea__body { padding: 13px 13px 12px; }
  .ctea__nm { font-size: 15px; }
  .ctea__benes { gap: 4px; margin-top: 10px; }
  .ctea__beneic { width: 34px; height: 34px; }
  .ctea__beneic svg { width: 18px; height: 18px; }
  .ctea__benelbl { font-size: 11px; }
  .ctea__meta { flex-wrap: wrap; gap: 2px 8px; padding-top: 10px; }
  .ctea__rating { font-size: 13px; white-space: nowrap; }
  .ctea__price { font-size: 17px; white-space: nowrap; margin-left: auto; }

  /* ---------- 5. best sellers — 82vw cards, snap, peek of the next card ---------- */
  .bsc-row {
    margin-left: -24px; margin-right: -24px; padding: 6px 24px 20px; gap: 14px;
    scroll-padding-inline: 24px; scrollbar-width: none;
  }
  .bsc-row::-webkit-scrollbar { display: none; }
  #bestsellers { margin-top: 28px !important; }                 /* inline 44px */
  .bsc-row > .bsc { flex: 0 0 82vw; max-width: 360px; }
  .bsc__media, .bsc:hover .bsc__media { height: min(76vw, 300px); margin-bottom: 12px; }
  .bsc__pack { max-width: 100%; }                                /* square pack fills the media height — no empty band */
  .bsc:hover .bsc__pack { opacity: 1; }                          /* no hover swap on touch */
  .bsc:hover .bsc__life { opacity: 0; }
  .bsc__name { font-size: 21px; margin: 6px 0 10px; }
  .bsc__benefits li { font-size: 15px; }
  .bsc__buy { margin-top: 14px; }

  /* ---------- 7a. green results stats (2×2) — compact cards ---------- */
  .rit2__stats { gap: 12px; }
  .rit2__cell { padding: 18px 10px 16px; }
  .rit2__icon { width: 44px; height: 44px; margin-bottom: 10px; }
  .rit2__icon svg { width: 22px; height: 22px; }
  .rit2__num { font-size: 32px; }
  .rit2__lbl { font-size: 15px; line-height: 1.3; margin-top: 8px; }
  .rit2__sub { font-size: 13px; line-height: 1.35; margin-top: 4px; }
  /* ritual banner: grows with its copy instead of clipping it */
  .rit2__banner { height: auto; min-height: 320px; margin-top: 20px; display: flex; align-items: center; }
  .rit2__txt { position: relative; left: auto; right: auto; top: auto; transform: none; padding: 30px 22px; }
  .rit2__disc { font-size: 13px; margin-top: 16px; }

  /* ---------- reviews ---------- */
  #reviews .marquee { margin-top: 28px !important; }             /* inline 40px */
  .ugc { width: 180px; }
  .marquee__track { gap: 14px; }
  #reviews .review { margin-top: 30px !important; }              /* inline 48px */
  .review__nav { margin-top: 16px; }
  .review__arrow { width: 44px; height: 44px; }

  /* ---------- 8. find-your-fix dots — ≥40px tall hit areas, small visual dot ---------- */
  .probc__dots { gap: 0; margin: 8px -24px 0; }
  .probc__dot {
    position: relative; flex: 0 1 40px; min-width: 0; height: 44px;
    background: transparent; transform: none;
  }
  .probc__dot::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 999px; background: var(--line); transition: background .2s ease, transform .2s ease;
  }
  .probc__dot.is-active { background: transparent; transform: none; }
  .probc__dot.is-active::before { background: var(--green); transform: scale(1.3); }
  .probc__review { margin-top: 20px; }

  /* ---------- why switch ---------- */
  .vs { margin-top: 30px; gap: 22px; }
  .vs__panel { padding: 22px 18px 20px; }
  .vs__title { margin-bottom: 14px; }
  .vs__list { gap: 10px; }
  .vs__list li { font-size: 15px; }
  .vs__ic { width: 34px; height: 34px; }
  .vs + .btn { margin-top: 28px !important; }                    /* inline 40px */

  /* ---------- three steps ---------- */
  .steps { margin-top: 28px; gap: 22px; }
  .step__n { width: 48px; height: 48px; margin-bottom: 10px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; line-height: 1.55; }
  .steps + .btn { margin-top: 28px !important; }                 /* inline 40px */

  /* ---------- brand story ---------- */
  .feature { gap: 22px; }

  /* ---------- 7b. "Unlike any other herbal tea" — compact horizontal stat cards ---------- */
  .bstd2__lead { font-size: 15px; margin-top: 12px; }
  .bstd2__stats { margin-top: 28px; gap: 12px; }
  .bstd2__card {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ic num" "ic lbl";
    column-gap: 16px; align-items: center; text-align: left; padding: 18px 18px 16px;
  }
  .bstd2__card:hover { transform: none; }
  .bstd2__ic { grid-area: ic; width: 52px; height: 52px; margin: 0; }
  .bstd2__ic svg { width: 26px; height: 26px; }
  .bstd2__num { grid-area: num; font-size: 34px; align-self: end; }
  .bstd2__lbl { grid-area: lbl; align-self: start; max-width: none; margin-top: 4px; font-size: 15px; line-height: 1.35; }
  .bstd2__diff { margin-top: 30px; }
  .bstd2__diff-item { text-align: left; }
  .bstd__lineup { margin-top: 30px; }

  /* ---------- closing CTA ---------- */
  .closing { padding: 28px 20px; }
  .closing__divider { margin-top: 26px; }
  .closing__hook { margin: 20px 0 12px; }
  .closing__note { font-size: 13px; }

  /* ---------- FAQ ---------- */
  .faq { margin-top: 24px; }
  .faq__q { padding: 16px 0; font-size: 16px; }

  /* ---------- 9. footer — ≥13px text, ≥40px link targets ---------- */
  .footer { padding: 48px 0 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }   /* Shop + Company side by side */
  .footer__grid > div:first-child, .footer__news { grid-column: 1 / -1; }
  .footer__news .btn { justify-content: center; }
  .footer h4 { margin-bottom: 8px; }
  .footer ul { gap: 0; font-size: 15px; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer__news input { font-size: 16px; }                       /* ≥16px stops iOS zoom-on-focus */
  .footer__pay span { font-size: 13px; }
  .footer__bottom { margin-top: 30px; padding-top: 16px; font-size: 13px; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer > .wrap > p:last-child { font-size: 13px !important; line-height: 1.5; }   /* inline 11px */
}