/* ═══════════════════════════════════════════════════════════════
   ANO DREAMS — responsive-product.css
   Mobile/Tablet polish for PRODUCT DETAIL (product.php) +
   CUSTOMIZER (customizer.php) bespoke components ONLY.

   Loads AFTER anodreams.css → specificity wins by load order.
   Desktop (>768px) is intentionally left untouched.
   Scope: gallery, price/flash, size & color pickers, add-to-cart,
          material/origin chips, reviews, Q&A, related-section
          spacing, and the customizer preview/controls.
   Does NOT restyle global chrome/nav/footer, form atoms, .card,
   catalog cards or checkout — those belong to other agents.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   TABLET / PHONE  ·  max-width: 768px
   ─────────────────────────────────────────────────────────────── */
@media (max-width:768px){

  /* ── Product gallery ─────────────────────────────────────────
     Main image stays full-width with a pleasant portrait ratio
     (no 1:1 letterboxing of tall shirt shots on narrow screens). */
  .split .product__media{
    aspect-ratio:4/5;
    border-radius:var(--radius-lg);
  }
  /* keep the wishlist heart comfortably inside the rounded corner */
  .split .wish-btn{
    top:14px;
    right:14px;
  }

  /* Thumbnails → single horizontally-scrollable rail of tappable
     thumbs. The container is an inline-styled flex row in markup;
     we convert wrap→nowrap scroll so many images never overflow
     the column or push the layout sideways. */
  .gthumb{
    width:60px !important;
    height:76px !important;
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  .gthumb > img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  /* the wrapper that directly contains the .gthumb buttons */
  .split .reveal > div:has(> .gthumb){
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  .split .reveal > div:has(> .gthumb)::-webkit-scrollbar{height:5px}
  .split .reveal > div:has(> .gthumb)::-webkit-scrollbar-thumb{
    background:var(--line-strong);border-radius:6px}

  /* ── Price + flash badge + countdown ─────────────────────────
     Keep the price line wrapping gracefully so a long "now / old /
     −X%" trio never collides; countdown sits clearly on its own. */
  .price{
    flex-wrap:wrap;
    row-gap:4px;
  }
  #flashCountdown{
    display:inline-block;
    margin-top:8px;
    font-size:.92rem;
    line-height:1.3;
  }

  /* ── Size pills & color swatches (key mobile interaction) ────
     Bigger, thumb-friendly targets that wrap with comfy gaps. */
  #sizePills,
  #colorSwatches{
    gap:12px;
  }
  #sizePills .pill{
    min-width:54px;
    min-height:48px;
    padding:12px 18px;
    font-size:1rem;
  }
  #colorSwatches .swatch{
    width:46px;
    height:46px;
  }

  /* qty stepper a touch taller for fingers */
  #qtyMinus,
  #qtyPlus{
    min-height:48px;
  }
  #qtyVal{
    min-height:48px;
  }

  /* ── Add to cart ─────────────────────────────────────────────
     Full-width, tall and prominent (it's already btn--block, we
     just guarantee the comfortable mobile height + spacing). */
  #addBtn{
    width:100%;
    min-height:52px;
    font-size:1.02rem;
    margin-top:16px;
  }

  /* ── Reviews + Q&A ───────────────────────────────────────────
     Their inner .split carries an INLINE grid-template-columns
     (1.4fr 1fr) that beats anodreams.css' media rule, so we must
     force single-column here (the one justified !important use). */
  #reviews .split,
  #qa .split{
    grid-template-columns:1fr !important;
    gap:24px;
  }
  /* the write-review / ask panel reads first-class once stacked */
  #reviews .panel,
  #qa .panel{
    padding:22px;
  }
  /* star picker: big & easy to tap */
  #starpick{
    font-size:34px !important;
    gap:10px !important;
  }
  #starpick .rvstar{
    padding:2px 2px;
  }
  /* comfortable review/answer cards */
  #reviews .card,
  #qa .card{
    padding:16px;
  }

  /* ── Section spacing for related / also-bought / recently ────
     Tighten the big 90px desktop gaps on phones. (We touch only
     the SECTION rhythm + headings — never the .card grid items.) */
  #reviews,
  #qa{
    margin-top:56px !important;
  }
  .sec-head[style*="margin-top:90px"]{
    margin-top:56px !important;
    margin-bottom:28px;
  }
  .sec-head{
    margin-bottom:28px;
  }

  /* ───────────────────────────────────────────────────────────
     CUSTOMIZER (customizer.php)
     Stack live-preview above controls; kill sticky so the preview
     doesn't pin awkwardly mid-scroll once single-column.
     ─────────────────────────────────────────────────────────── */
  .split > .reveal[style*="sticky"]{
    position:static !important;
    top:auto !important;
  }
  /* preview SVG scales to viewport, never overflows */
  #shirtPreview{
    width:100%;
    height:auto;
    max-width:100%;
  }
  /* full-width, tappable controls */
  #shirtColors,
  #txtColors,
  #fontPills,
  #posPills,
  #garmentSize{
    gap:12px;
  }
  #shirtColors .swatch,
  #txtColors .swatch{
    width:46px;
    height:46px;
  }
  #fontPills .pill,
  #posPills .pill,
  #garmentSize .pill{
    min-height:48px;
    padding:12px 18px;
  }
  #txtInput{
    min-height:50px;
  }
  /* slider easy to grab */
  #sizeRange{
    height:32px;
  }
  /* "Unikat in den Warenkorb" full-width & tall */
  #customForm .btn--block{
    width:100%;
    min-height:52px;
    font-size:1.02rem;
  }
}

/* ───────────────────────────────────────────────────────────────
   SMALL PHONES  ·  max-width: 480px
   ─────────────────────────────────────────────────────────────── */
@media (max-width:480px){

  /* gallery: slightly smaller rail thumbs but still ≥56px tappable */
  .gthumb{
    width:58px !important;
    height:72px !important;
  }

  /* price hierarchy stays legible on tiny screens */
  .price .price__now{
    font-size:1.5rem !important;
  }
  #flashCountdown{
    font-size:.88rem;
  }

  /* pickers keep ≥44px even with tighter gaps */
  #sizePills,
  #colorSwatches{
    gap:10px;
  }
  #sizePills .pill{
    min-width:50px;
    min-height:46px;
    padding:11px 15px;
  }
  #colorSwatches .swatch,
  #shirtColors .swatch,
  #txtColors .swatch{
    width:44px;
    height:44px;
  }

  /* CTAs comfortable on narrow viewports */
  #addBtn,
  #customForm .btn--block{
    min-height:50px;
    font-size:.98rem;
  }

  /* trust tags wrap without crowding */
  #buyForm .wrap-f{
    gap:8px;
  }

  /* a bit less side padding inside review/Q&A cards & panels */
  #reviews .card,
  #qa .card{
    padding:14px;
  }
  #reviews .panel,
  #qa .panel{
    padding:18px;
  }

  /* customizer controls keep finger-size on the smallest screens */
  #fontPills .pill,
  #posPills .pill,
  #garmentSize .pill{
    min-height:46px;
    padding:11px 15px;
  }
}