/* ═══════════════════════════════════════════════════════════════
   ANO DREAMS — Responsive Catalog Layer
   Scope: HOME (index.php) · SHOP LISTING (shop.php) · PRODUCT CARDS
          · sale.php · paradise.php
   Loads AFTER anodreams.css → plain specificity wins (no !important).
   Mobile-first ADDITIVE: only ≤768px / ≤480px touched. Desktop >768px
   is never altered. Extends the existing @media blocks in anodreams.css
   (560px / 880px) without contradicting them.
   Owns: catalog grid, product cards, home hero/sections, shop controls,
         sale + paradise heroes/grids. Does NOT touch nav/footer/forms.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   TABLET / LARGE PHONE   ≤ 768px
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── Product grid: deterministic 2 columns on phones ──────────
     anodreams.css uses auto-fill minmax(260px) which collapses to a
     single very-wide column in the 561–768px band. Force a clean
     2-up so cards stay shoppable and side-by-side.                */
  .grid--products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  /* ── Product card internals ──────────────────────────────────── */
  .product__body{padding:16px}
  .product__name{font-size:1.02rem;line-height:1.2}
  .product__sub{
    font-size:.78rem;margin-bottom:10px;
    /* keep subtitle to one tidy line on narrow cards */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .price__now{font-size:1.08rem}
  .price__old{font-size:.85rem}
  .product__foot{margin-top:12px;gap:10px}

  /* Tap targets: wish + quick-view ≥44px (were 38px) ──────────── */
  .wish-btn,
  .qv-btn{
    width:44px;height:44px;
  }
  /* Quick-view sits just below the heart; nudge for the taller heart */
  .qv-btn{top:66px}
  /* On touch the qv-btn must be visible, not hover-only.
     anodreams.css reveals it at ≤880px already — reaffirm here so the
     control is always tappable inside our scope.                   */
  .card .qv-btn{opacity:1;transform:none}

  /* Add / customise button stays a comfortable round tap target */
  .quick-add{width:46px;height:46px}

  /* Badge (incl. flash -X% + Ausverkauft) legible on small media  */
  .badge{top:12px;left:12px;font-size:.66rem;padding:5px 11px}

  /* ── HOME hero: scale headline, trim vertical air ────────────── */
  .hero{min-height:auto;padding:120px 0 64px}
  .hero__content{padding-block:0}
  .hero__sub{margin:18px auto 28px;max-width:42ch}
  /* CTAs stack full-width and tappable */
  .hero__cta{flex-direction:column;gap:12px;align-items:stretch}
  .hero__cta .btn{width:100%}

  /* ── HOME sections: split blocks stack & center ──────────────── */
  .split{grid-template-columns:1fr;gap:32px;text-align:center}
  .split .feature-list{align-items:flex-start;text-align:left}
  .split .feature{justify-content:flex-start}
  .split .btn{align-self:center}
  /* feature media block: don't reserve huge empty height on phones */
  .split > div[style*="min-height"]{min-height:240px}

  /* Trust / 3-up info row reads as a centered single column */
  .sec-head{margin-bottom:32px}

  /* ── SHOP controls: category pills as a horizontal scroll row ──
     Avoids a tall wrapped block; gives a familiar swipe-able filter
     bar. Tap targets stay ≥40px tall.                              */
  .pills{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;            /* Firefox */
    gap:8px;
    /* breathe to screen edges so first/last pill aren't clipped */
    padding-inline:4px;
    margin-inline:-4px;
    scroll-snap-type:x proximity;
  }
  .pills::-webkit-scrollbar{display:none;height:0}   /* WebKit/Blink */
  .pill{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-height:40px;
    display:inline-flex;align-items:center;justify-content:center;
    white-space:nowrap;
  }

  /* Sort row + "Nur verfügbar" toggle: full-width, comfy spacing.
     Targets shop.php's `.flex.between.wrap-f` control bar.         */
  .flex.between.wrap-f{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  /* "Nur verfügbar" pill becomes a full-width tappable bar         */
  .flex.between.wrap-f > .pill{
    width:100%;
    min-height:44px;
  }

  /* ── sale.php / paradise.php heroes — share the home treatment ─ */
  /* (both reuse .hero + .grid--products, so the rules above cover
     their hero scaling, CTA stacking and grid columns. Nothing
     extra needed here, kept as a note for maintainers.)            */
}

/* ════════════════════════════════════════════════════════════════
   SMALL PHONE   ≤ 480px
   ════════════════════════════════════════════════════════════════ */
@media (max-width:480px){

  /* Tighter container padding reclaims horizontal room            */
  .wrap{padding-inline:16px}

  /* Keep 2-up but tighten the gutter further                      */
  .grid--products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .product__body{padding:13px}
  .product__name{font-size:.96rem}
  .product__sub{font-size:.74rem;margin-bottom:8px}
  .price{gap:7px}
  .price__now{font-size:1rem}
  .price__old{font-size:.8rem}
  .product__foot{margin-top:11px;gap:8px}

  /* Slightly smaller round controls but still ≥44px to stay tappable */
  .wish-btn,
  .qv-btn{width:44px;height:44px}
  .wish-btn svg,
  .qv-btn svg{width:18px;height:18px}
  .quick-add{width:44px;height:44px}

  .badge{font-size:.62rem;padding:4px 9px;letter-spacing:.05em}

  /* Hero: dial the headline + padding down once more              */
  .hero{padding:104px 0 52px}
  .h-hero{font-size:clamp(2.6rem,15vw,4.4rem)}
  .hero__sub{font-size:1rem;margin:16px auto 24px}

  /* Section vertical rhythm a touch tighter on tiny screens       */
  .section{padding:48px 0}
  .section--tight{padding:34px 0}
}

/* ════════════════════════════════════════════════════════════════
   VERY SMALL PHONE   ≤ 380px
   Cards get cramped at 2-up on <380px devices (e.g. iPhone SE 1st
   gen / small Androids). Drop to a single full-width column so the
   image, name, price and add-button all stay comfortably legible.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:380px){
  .grid--products{
    grid-template-columns:1fr;
    gap:16px;
  }
  /* With one wide column the subtitle can breathe on its own line  */
  .product__sub{white-space:normal}
  .product__body{padding:16px}
  .product__name{font-size:1.04rem}
  .price__now{font-size:1.1rem}
}