/* ============================================================
   FeederX — Responsive / Mobile (additive)
   Reparații pentru navigarea pe mobil. Acest fișier NU rescrie
   regulile temei; doar le completează pentru ecrane mici.
   Breakpoints aliniate cu tema: 1180 / 920 / 560.
   ============================================================ */

/* Plasă de siguranță: nimic nu trebuie să provoace scroll orizontal */
html, body { max-width: 100%; overflow-x: hidden; }
.wrap { box-sizing: border-box; }
img, svg, video { max-width: 100%; }

/* ----------------------------------------------------------------
   1) TABLETĂ ȘI MAI JOS (≤920px)
   Tema ascunde aici .acct (cont+coș) și .nav .links, dar nu pune
   nimic în loc. Readucem coșul + contul ca iconițe compacte și
   coborâm înălțimile ca header-ul să nu mai fie supradimensionat.
---------------------------------------------------------------- */
@media (max-width: 920px) {

  /* Header mai compact, pe 3 coloane: logo | search | acțiuni */
  .header .wrap {
    grid-template-columns: auto 1fr auto !important;
    gap: 14px !important;
    height: 72px !important;
  }
  .logo .fx-logo { height: 42px !important; }
  .logo .mark { width: 46px; height: 38px; }
  .logo .word .t1 { font-size: 24px; }
  .logo .word .t2 { font-size: 9px; letter-spacing: .34em; }

  .search { max-width: none; }
  .search input { height: 44px; }

  /* Readucem zona de cont/coș, dar compactă (doar iconițe) */
  .acct {
    display: flex !important;
    gap: 6px !important;
    align-items: center;
  }
  /* Pe mobil ascundem textul („Contul meu", „Coșul meu") și chevroanele,
     păstrăm doar iconițele — economisim spațiu, păstrăm funcția */
  .acct .lbl,
  .acct .acct-trigger .lbl { display: none !important; }
  .acct .ic { width: 42px; height: 42px; }

  /* Dropdown-ul de cont: pe hover nu merge pe touch, deci îl deschidem
     la tap (clasă .open pusă din JS) și îl ancorăm în dreapta */
  .acct-dd {
    right: 0; left: auto;
    min-width: 220px;
  }
  .acct-drop.open .acct-dd {
    opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
  }

  /* Bara de nav: butonul Produse rămâne; readucem link-urile utile
     (Promoții / Noutăți / Contact) sub el, în interiorul mega-meniului.
     Aici doar pregătim layout-ul barei. */
  .nav .wrap { height: 52px; }
  .nav .prodbtn { padding-left: 16px; padding-right: 16px; }

  /* Iconițele social din bara de nav nu sunt esențiale pe mobil */
  .nav-social { display: none !important; }

  /* Utilbar (promo + linkuri sus): păstrăm promo, ascundem linkurile
     secundare ca să nu se înghesuie */
  .utilbar .links { display: none !important; }
  .utilbar .wrap { justify-content: center; }
  .utilbar .promo { white-space: normal; text-align: center; font-size: 12px; }

  /* Footer pe 2 coloane în loc de 5 */
  .footer .top { grid-template-columns: 1fr 1fr !important; gap: 26px !important; }
  .footer .news { grid-column: 1 / -1; }
  .footer .about { max-width: none; }
}

/* ----------------------------------------------------------------
   2) READUCEREA LINK-URILOR DE NAV ÎN MEGA-MENIU (≤920px)
   Link-urile .nav .links sunt ascunse de temă pe mobil. Le copiem
   vizual în interiorul mega-meniului care se deschide din „Produse",
   ca utilizatorul să ajungă la Promoții / Noutăți / Contact.
   (Soluție pur CSS: afișăm un clon din header.php — vezi nota din chat.)
---------------------------------------------------------------- */
@media (max-width: 920px) {
  /* Când mega e deschis, oferim spațiu și pentru linkurile mobile */
  .nav.open .mega { max-height: 80vh; overflow-y: auto; }
  .fx-mobile-links { display: block; padding: 14px 0 4px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; }
  .fx-mobile-links a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 4px; color: #C7D0D6; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em; font-size: 14px;
  }
  .fx-mobile-links a svg { width: 18px; height: 18px; }
  .fx-mobile-links a:hover { color: #fff; }
}
/* Pe desktop clonul mobil nu există/nu se vede */
.fx-mobile-links { display: none; }

/* ----------------------------------------------------------------
   3) TELEFON (≤560px)
   Ajustări fine de spațiu și tipografie.
---------------------------------------------------------------- */
@media (max-width: 560px) {

  .wrap { padding: 0 14px; }

  /* Header pe 2 rânduri: rândul 1 = logo + acțiuni, rândul 2 = search lat */
  .header .wrap {
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "logo actions"
      "search search" !important;
    height: auto !important;
    padding-top: 10px; padding-bottom: 10px;
    row-gap: 10px !important;
  }
  .header .logo   { grid-area: logo; }
  .header .acct   { grid-area: actions; justify-self: end; }
  .header .search { grid-area: search; }

  .logo .fx-logo { height: 38px !important; }
  .logo .word .t1 { font-size: 21px; }

  .search input { height: 42px; font-size: 14px; padding-right: 46px; }
  .search input::placeholder { font-size: 13px; }
  .search .go { width: 38px; }

  .acct .ic { width: 40px; height: 40px; }
  .acct .ic svg { width: 20px; height: 20px; }

  /* Bara de nav: butonul Produse pe toată lățimea, ușor de atins */
  .nav .wrap { height: auto; padding: 6px 0; }
  .nav .prodbtn { width: 100%; justify-content: flex-start; height: 48px; }

  /* Footer pe o singură coloană */
  .footer { padding-top: 36px; }
  .footer .top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer .bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer .social { gap: 8px; }

  /* Titluri hero/secțiuni mai mici ca să nu rupă layout-ul */
  .slide-content h1 { font-size: 34px !important; line-height: 1.05; }
  .sec-head h2 { font-size: 24px; }

  /* Ținte de atingere mai generoase peste tot în nav/cont */
  .acct-dd a { padding: 13px 13px; font-size: 15px; }
}

/* ----------------------------------------------------------------
   4) Tap targets & accesibilitate touch (toate ecranele mici)
---------------------------------------------------------------- */
@media (max-width: 920px) {
  a, button { -webkit-tap-highlight-color: rgba(55,165,46,.15); }
  .acct-trigger, .acct .item.cart { min-height: 42px; }
}

/* ============================================================
   MINI-UPDATE: back-to-top, best-sellers grid fix, footer columns
   ============================================================ */

/* ---- Back to top ---- */
.fx-b2t{
  position:fixed; right:18px; bottom:18px; z-index:9000;
  width:48px; height:48px; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-500,#37A52E); color:#fff;
  border:none; box-shadow:0 8px 24px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .2s, transform .2s, visibility .2s, background .15s;
}
.fx-b2t:hover{ background:var(--green-600,#2B8A26); }
.fx-b2t.show{ opacity:1; visibility:visible; transform:translateY(0); }
.fx-b2t svg{ width:22px; height:22px; }
@media (max-width:560px){
  .fx-b2t{ right:14px; bottom:14px; width:44px; height:44px; }
}

/* ---- FIX „Cele mai vândute" ----
   Cauza dezordinii (3 / 4 / 1 pe rând): stylesheet-ul WooCommerce pune
   float + width procentual pe fiecare li.product (clasele .columns-4,
   .first, .last). Peste grid-ul nostru, asta rupe rândurile.
   Soluție: anulăm complet float/width-urile pe elementele din grila noastră,
   ca să rămână DOAR CSS Grid (4 coloane reale, rânduri egale). */
.prodgrid ul.products,
.fx-home-products.products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
  float:none !important;
}
.prodgrid ul.products::before,
.prodgrid ul.products::after,
.fx-home-products.products::before,
.fx-home-products.products::after{ content:none !important; display:none !important; }

.prodgrid ul.products li.product,
.fx-home-products.products li.product{
  width:auto !important;
  margin:0 !important;
  float:none !important;
  clear:none !important;
}

/* Aceleași breakpoints ca tema, dar curate */
@media (max-width:1180px){
  .prodgrid ul.products,
  .fx-home-products.products{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:920px){
  .prodgrid ul.products,
  .fx-home-products.products{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px){
  .prodgrid ul.products,
  .fx-home-products.products{ grid-template-columns:1fr !important; }
}

/* ---- Footer cu număr variabil de coloane (din panou) ----
   Înlocuiește grila fixă de 5 coloane cu una care se adaptează
   la câte coloane sunt active. Logo-ul rămâne mai lat. */
.footer[data-cols="2"] .top{ grid-template-columns:1.4fr 1fr; }
.footer[data-cols="3"] .top{ grid-template-columns:1.4fr 1fr 1fr; }
.footer[data-cols="4"] .top{ grid-template-columns:1.4fr repeat(3,1fr); }
.footer[data-cols="5"] .top{ grid-template-columns:1.4fr repeat(3,1fr) 1.3fr; }
@media (max-width:920px){
  .footer[data-cols] .top{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:560px){
  .footer[data-cols] .top{ grid-template-columns:1fr !important; }
}