/* ============================================================================
   GreenTouch — mobile-fixes.css
   Corecții EXCLUSIV pentru telefon. NU modifică desktopul sau tableta.
   Toate regulile sunt în @media (max-width: <=430px). Fișier separat, încărcat
   DUPĂ cele 5 CSS aprobate — nu le atinge. Fără reguli globale non-mobile.

   `!important` este folosit DOAR acolo unde ținta are stil inline (setat din JS/PHP)
   și nu poate fi suprascris altfel — fiecare caz e marcat mai jos.
   `:has()` este folosit ca să nu fie nevoie de modificarea markup-ului (fără hook-uri noi).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) GRILE DE CARDURI → o singură coloană pe telefon (≤430px)
   Clasele .cols-4 / .cols-3 sunt forțate pe 2 coloane între 381–520px de
   responsive.css; sub 430px conținutul se îngrămădește, deci trecem la 1 coloană.
   Specificitate mai mare (.grid-auto.cols-*) + încărcare ulterioară → fără !important.
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .grid-auto.cols-4,
  .grid-auto.cols-3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   2) HERO — cele două butoane pe UN singur rând (≤430px)
   Wrapper-ul (.gt-m-hero-cta) are inline `flex-wrap:wrap`. Cu `flex:1 1 0`
   (bază 0) butoanele nu mai wrapează și devin egale ca lățime — fără a suprascrie
   wrapper-ul, deci FĂRĂ !important. Reducem ușor padding-ul/fontul ca textul să încapă.
   Clasa .gt-m-hero-cta e inertă în afara acestor media queries (zero efect desktop).
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .gt-m-hero-cta { gap: 10px; flex-wrap: nowrap !important; }  /* override flex-wrap inline → un singur rând */
  .gt-m-hero-cta > .btn {
    flex: 1 1 auto;          /* lățimi echilibrate (proporțional cu textul), umplu rândul */
    min-width: 0;
    padding: 13px 10px;      /* păstrează înălțime ~45px (≥44px) */
    font-size: 14px;
    white-space: nowrap;     /* eticheta nu se rupe pe 2 rânduri */
    text-align: center;
  }
}
@media (max-width: 390px) {
  .gt-m-hero-cta > .btn { font-size: 13.5px; padding: 13px 8px; }
}
@media (max-width: 340px) {
  .gt-m-hero-cta > .btn { font-size: 13px; padding: 12px 6px; }
}

/* ---------------------------------------------------------------------------
   3) HERO — imaginea mai compactă și mai „ridicată", fără suprapunere (≤430px)
   Wrapper-ul imaginii (.gt-m-hero-media) are inline `width:min(100%,500px)` → pe
   telefon devine pătrat cât toată lățimea (foarte înalt) și „coboară" hero-ul.
   Îl plafonăm și îl centrăm (badge-ul „1 kg ≈ 0,12 m²" și cardul de kit se scalează
   odată cu el, rămân aliniate). `margin-top:-4px` ridică imaginea, păstrând ~20px față
   de dovada socială (gap-ul .split e 24px pe mobil). `!important` justificat: override width inline.
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .gt-m-hero-media {
    width: 300px !important;    /* override width inline */
    max-width: 100%;
    margin: -4px auto 0;        /* ridică ~4px → gap efectiv ~20px, fără suprapunere */
  }
}
@media (max-width: 390px) { .gt-m-hero-media { width: 270px !important; } }
@media (max-width: 360px) { .gt-m-hero-media { width: 250px !important; } }

/* ---------------------------------------------------------------------------
   4) ȚINTE DE TAP ≥44px + preț pe un singur rând (≤430px)
   `.qty` și chip-urile de gramaj devin mai ușor de apăsat; prețul nu se rupe.
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .qty button { min-width: 40px; height: 44px; }
  .wbtns .chip { min-height: 44px; }   /* 500 g / 1 kg / 2 kg — țintă de tap corectă */
  .price { white-space: nowrap; }      /* prețul rămâne pe un rând */
}

/* ---------------------------------------------------------------------------
   5) FOOTER compact pe telefon (≤430px)
   Grila coloanelor e inline (auto-fit) → pe telefon devine 1 coloană (foarte lung).
   O rearanjăm: brand pe toată lățimea, apoi „Categorii/Ajutor/Ghiduri" pe 2 coloane
   (a treia trece pe rândul următor). `!important` justificat: override grid inline.
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .footer .container > div:first-child {
    grid-template-columns: 1fr 1fr !important;   /* override inline auto-fit */
    gap: 22px 18px !important;                    /* reduce spațiul vertical excesiv */
  }
  .footer .container > div:first-child > div:first-child { grid-column: 1 / -1; } /* brand full-width */
}

/* ---------------------------------------------------------------------------
   6) ANCORE sub headerul fix — titlurile secțiunilor nu sunt acoperite
   Headerul este position:fixed (~42–62px). Adăugăm o marjă de scroll la ancore.
--------------------------------------------------------------------------- */
@media (max-width: 880px) {
  [id="categorii"],
  [id="ghiduri"] { scroll-margin-top: 80px; }
}

/* ---------------------------------------------------------------------------
   7) PLASĂ DE SIGURANȚĂ anti-overflow orizontal (≤430px)
   `overflow-x:clip` pe conținut nu creează un container de scroll (nu afectează
   headerul fix sau overlay-urile fixed) și taie orice depășire accidentală.
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  #gt-content { overflow-x: clip; }
}