/* =========================================================
   mobile-fixes.css — remedieri responsive pentru toate paginile
   Breakpoint principal: 660px (se aplica si la 390px / iPhone)
   ========================================================= */

/* ----------------------------------------------------------
   1. NAVBAR — ascunde main-nav, arata hamburger
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .top .main-nav {
    display: none !important;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 12px;
  }
  header.top.nav-open .main-nav {
    display: flex !important;
  }
  .nav-toggle {
    display: flex !important;
    margin-left: auto;
  }
  /* top-row: logo | hamburger (2 coloane) — actiunile rapide merg sub */
  .top-row {
    grid-template-columns: auto auto !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  /* ascunde actiunile rapide din header pe mobile (cos e in sticky bar) */
  .top-row .actions { display: none !important; }
}

/* ----------------------------------------------------------
   2. SHOP LAYOUT — sidebar trece sub produse pe mobile
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .layout {
    grid-template-columns: 1fr !important;
  }
  .side-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Cart si Cont client: afisate pe 2 coloane */
  .side-stack .panel:nth-child(3),
  .side-stack .panel:nth-child(4) {
    grid-column: span 1;
  }
  /* Cosul tau ocupa ambele coloane */
  .side-stack .panel:nth-child(1) {
    grid-column: span 2;
  }
}

/* ----------------------------------------------------------
   3. FILTRE — 2 coloane pe mobile, cautarea span 2
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .filters {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .search-wrap {
    grid-column: span 2 !important;
  }
  /* Butonul "Reset filtre" ocupa tot randul */
  #resetFiltersBtn {
    grid-column: span 2;
  }
  /* Filtrele avansate (lumeni, putere) se ascund initial */
  #filterLumensMin, #filterLumensMax,
  #filterPowerMin, #filterPowerMax,
  #filterIp, #filterCri,
  #filterDimmable, #filterSmart,
  #filterLifecycle {
    display: none;
  }
  /* Se afiseaza cand utilizatorul apasa "Mai multe filtre" */
  .filters.filters-expanded #filterLumensMin,
  .filters.filters-expanded #filterLumensMax,
  .filters.filters-expanded #filterPowerMin,
  .filters.filters-expanded #filterPowerMax,
  .filters.filters-expanded #filterIp,
  .filters.filters-expanded #filterCri,
  .filters.filters-expanded #filterDimmable,
  .filters.filters-expanded #filterSmart,
  .filters.filters-expanded #filterLifecycle {
    display: block;
  }
  /* Buton toggle filtre avansate */
  #toggleAdvFiltersBtn {
    grid-column: span 2;
    min-height: 40px;
    border: 1px dashed #c0cbea;
    background: #f5f7ff;
    color: #2c3362;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
  }
}
/* Ascunde butonul pe desktop */
@media (min-width:661px) {
  #toggleAdvFiltersBtn { display: none !important; }
}

/* ----------------------------------------------------------
   4. PAGINA DE PRODUS — imagine deasupra, detalii dedesubt
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .product-main {
    grid-template-columns: 1fr !important;
  }
  .product-gallery-main {
    min-height: 280px !important;
  }
  /* Produse similare / cross-sell: 2 coloane */
  .mini-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ----------------------------------------------------------
   5. FOOTER — stivuire verticala pe mobile
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ----------------------------------------------------------
   6. HOMEPAGE — grid produse si portofoliu: 2 coloane
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Carduri produse homepage mai compacte */
  .prod-img {
    height: 130px !important;
  }
  .portfolio-card {
    min-height: 140px !important;
  }
}

/* ----------------------------------------------------------
   7. PRODUSE GRID in shop — 2 coloane pe mobile
   ---------------------------------------------------------- */
@media (max-width:480px) {
  #productsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .product-card {
    grid-template-rows: 150px 1fr !important;
  }
  /* Butoane Detalii/Adauga: stack vertical pe ecrane foarte mici */
  .card-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ----------------------------------------------------------
   8. GENERAL — touch targets, overflow prevention
   ---------------------------------------------------------- */
@media (max-width:660px) {
  .btn, button, a {
    -webkit-tap-highlight-color: transparent;
  }
  /* Previne overflow orizontal */
  body, .container, main {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Checkout modal — full screen pe mobile */
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  .modal {
    align-items: flex-end !important;
  }
}

/* ----------------------------------------------------------
   9. TOUCH TARGETS — minim 44px conform HIG / Material
   ---------------------------------------------------------- */
@media (max-width:660px) {
  /* Butoane principale: minim 44px inaltime */
  .btn {
    min-height: 44px !important;
  }
  /* Butonul wishlist de pe card: zona de tap marita */
  .wish-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Butoanele cantitate +/- in cos: marite pentru touch */
  .qbtn {
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 16px !important;
  }
  /* Butoane filter categorie (Toate / Rezidential / etc.) */
  .filter-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  /* Pagina produs: butoane Adauga/Wishlist se infasoara la latimi mici */
  .actions {
    flex-wrap: wrap !important;
  }
  .actions > .btn {
    flex: 1 1 140px !important;
  }
}

/* ----------------------------------------------------------
   10. CONTACT FORM — stivuire campuri pe mobile
   ---------------------------------------------------------- */
@media (max-width:660px) {
  /* Grila fixa 158px+158px => o singura coloana fluida */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  /* Campurile sa ocupe toata latimea */
  .form-grid .field {
    width: 100% !important;
  }
  /* Input / select / textarea full-width */
  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}