/* ══════════════════════════════════════════════════════════════
   listing.css — stiluri extrase din category.php (Etapa A)
   Reutilizabil de category / discount / new-stock / recomandate.
   Conținut NEMODIFICAT față de blocurile <style> inline.
   ══════════════════════════════════════════════════════════════ */

/* ─── Banner-e categorie / carusel (era category.php L437-467) ─── */
  .banner-carousel::-webkit-scrollbar { display: none; }
  .banner-carousel.dragging { cursor: grabbing; cursor: -webkit-grabbing; }
  .banner-carousel.dragging a { pointer-events: none; }
  /* Badge "-X%" pe cardurile bannerului: jos-stânga peste partea de jos a imaginii,
     deasupra rândului de prețuri. Mobile vs desktop au padding/font diferite. */
  .banner-card-badge { bottom: 42px; }
  @media (min-width: 640px) {
    .banner-card-badge { bottom: 44px; }
    .banner-img-left {
      width: 180px !important;
      height: 264px !important;
      max-width: none !important;
      max-height: none !important;
      left: 0;
      bottom: 0;
      top: auto;
      transform: none;
      object-position: bottom center;
    }
  }
  @media (min-width: 768px) {
    .banner-img-left { width: 200px !important; }
  }
  @media (min-width: 1024px) {
    .banner-img-left { width: 220px !important; }
  }
  @media (hover: hover) {
    .banner-carousel { cursor: grab; }
  }

/* ─── Bara subcategorii mobile (era category.php L690-697) ─── */
  #subcatScrollMobile::-webkit-scrollbar { display: none; }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .animate-slideUp { animation: slideUp 0.3s ease-out; }

/* ─── Carduri subcategorii + branduri (era category.php L753-831) ─── */
  /* Brand card — stil brands.php (logo + sample image), mai mic */
  .cat-brand-tile {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }
  .cat-brand-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(0, 32, 70, 0.15);
  }
  .cat-brand-logo-box {
    height: 48px;
    background: #eef3fb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
  }
  .cat-brand-logo-box img {
    max-height: 26px;
    max-width: 85%;
    object-fit: contain;
  }
  .cat-brand-logo-fallback {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: var(--brand-navy);
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.1;
  }
  .cat-brand-sample {
    aspect-ratio: 1 / 1;
    background: #f5f7fa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cat-brand-sample img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .cat-brand-tile:hover .cat-brand-sample img {
    transform: scale(1.06);
  }
  .cat-brand-empty-sample {
    color: var(--gray-300);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* MOBILE: brand cards mai mici în carusel orizontal */
  @media (max-width: 639px) {
    #catBrandsCarouselMobile .cat-brand-tile {
      border-radius: 10px;
    }
    #catBrandsCarouselMobile .cat-brand-logo-box {
      height: 36px;
      padding: 5px 8px;
    }
    #catBrandsCarouselMobile .cat-brand-logo-box img {
      max-height: 20px;
    }
    #catBrandsCarouselMobile .cat-brand-logo-fallback {
      font-size: 10px;
    }
  }

/* ─── Utilizare / scenarii (era category.php L1065-1072) ─── */
        /* Stil OZON pentru navigația categorii */
        .cat-nav-item .cat-nav-children { display: none; }
        .cat-nav-item.is-current .cat-nav-children,
        .cat-nav-item.is-open .cat-nav-children { display: block; }
        .cat-nav-item.is-current .cat-nav-chevron,
        .cat-nav-item.is-open .cat-nav-chevron { transform: rotate(180deg); }
      

/* ─── Pill-uri dimensiuni (era category.php L1162-1165) ─── */
            .on-sale-toggle input:checked ~ .track { background-color: var(--brand-navy); }
            .on-sale-toggle input:checked ~ .dot   { transform: translateX(16px); }
          

/* ─── Filtru grafic (fgx) (era category.php L1494-1580) ─── */
        /* Compact: încape în coloana produselor, sub toolbar.
           MOBIL: toate pe UN RÂND cu scroll orizontal (swipe/drag);
           DESKTOP: wrap normal pe lățime. */
        @media (max-width: 639px) {
          .filtru_grafic {
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            cursor: grab;
          }
          .filtru_grafic::-webkit-scrollbar { display: none; }
          .filtru_grafic .fgx-item {
            flex: 0 0 96px;          /* lățime fixă → restul intră în scroll */
            scroll-snap-align: start;
          }
        }
        .filtru_grafic .fgx-item {
          display: block;
          width: 25%;
          padding: 3px;
          background: none;
          border: none;
          cursor: pointer;
        }
        @media (min-width: 640px)  { .filtru_grafic .fgx-item { width: 16.6667%; } }
        @media (min-width: 1280px) { .filtru_grafic .fgx-item { width: 16.6667%; } }

        /* exact 7 opțiuni: se strâng să încapă toate pe un rând */
        @media (min-width: 640px) {
          .filtru_grafic.fgx-n7 .fgx-item { width: 14.2857%; }
          .filtru_grafic.fgx-n7 .fgx-img img { height: 56px; }
        }
        /* 8+ opțiuni: UN RÂND cu scroll orizontal + drag cu mouse-ul */
        @media (min-width: 640px) {
          .filtru_grafic.fgx-scroll {
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--gray-300, #cfd6dc) transparent;
            cursor: grab;
            padding-bottom: 6px;
          }
          .filtru_grafic.fgx-scroll::-webkit-scrollbar { height: 6px; }
          .filtru_grafic.fgx-scroll::-webkit-scrollbar-thumb { background: var(--gray-300, #cfd6dc); border-radius: 999px; }
          .filtru_grafic.fgx-scroll::-webkit-scrollbar-track { background: transparent; }
          .filtru_grafic.fgx-scroll .fgx-item {
            flex: 0 0 132px;
            width: 132px;
            scroll-snap-align: start;
          }
          .filtru_grafic.fgx-scroll.fgx-dragging { cursor: grabbing; scroll-snap-type: none; }
          .filtru_grafic.fgx-scroll.fgx-dragging .fgx-item { pointer-events: none; }
        }
        .fgx-box {
          display: block;
          width: 100%;
          border-radius: 10px;
          padding: 6px 3px;
          border: 2px solid transparent;
          transition: all 0.18s ease;
          background: #fff;
          box-shadow: 0 0 10px #ccc;
        }
        .fgx-item:hover .fgx-box { border-color: var(--gray-200, #e3e7ea); box-shadow: 0 3px 10px rgba(16,40,72,0.07); }
        .fgx-item.fgx-on .fgx-box {
          border-color: var(--brand-blue, #0090d7);
          background: color-mix(in srgb, var(--brand-blue, #0090d7) 6%, #fff);
        }
        .fgx-img { display: flex; justify-content: center; }
        .fgx-img img { height: 64px; width: auto; object-fit: contain; }
        .fgx-label {
          display: block;
          text-align: center;
          margin-top: 4px;
          font-size: 10.5px;
          font-weight: 700;
          color: var(--brand-navy, #1c2d4f);
          line-height: 1.2;
          word-break: break-word;
        }
        @media (min-width: 640px) { .fgx-label { font-size: 11.5px; } }
        

/* ─── Range slider dual (era category.php L1704-1788) ─── */
  /* Range slider dual — stiluri pentru ambele thumb-uri suprapuse */
  /* Container-ul are h-8 (32px), track gri e centrat la 50%, thumb-urile trebuie pe aceeași linie */
  .range-filter input[type="range"].range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;   /* aceeași înălțime cu containerul ca thumb-ul să fie centrat */
    background: transparent;
    pointer-events: none;
    margin: 0;
    padding: 0;
  }
  /* Thumb pentru WebKit (Chrome, Safari, Edge) — centrat exact pe linia track-ului */
  .range-filter input[type="range"].range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-blue);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    pointer-events: auto;
    /* Thumb-ul se centreaza singur vertical pe înălțimea input-ului (32px) */
    /* Nu mai e nevoie de margin-top negativ */
    margin-top: 0;
  }
  .range-filter input[type="range"].range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(34, 95, 230, 0.4);
  }
  /* Thumb pentru Firefox */
  .range-filter input[type="range"].range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-blue);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    pointer-events: auto;
  }
  .range-filter input[type="range"].range-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
  }
  /* Track invizibil pe înălțime mare — folosim div-ul nostru pentru linia vizibilă */
  .range-filter input[type="range"].range-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: 32px;
    border: none;
  }
  .range-filter input[type="range"].range-slider::-moz-range-track {
    background: transparent;
    height: 32px;
    border: none;
  }
  /* Focus state - elimin outline urât default */
  .range-filter input[type="range"].range-slider:focus {
    outline: none;
  }
  .range-filter input[type="range"].range-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(34, 95, 230, 0.2);
  }

  /* Scrollbar custom subtil pentru sidebar filtre */
  .custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
  }
  .custom-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scroll::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 3px;
  }
  .custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
  }

/* ─── Diverse listing (era category.php L2199-2206) ─── */
.cat-seo-text h2, .cat-seo-text h3 { font-weight: 800; color: var(--brand-navy); margin: 1.2em 0 0.4em; }
.cat-seo-text h2 { font-size: 1.15rem; }
.cat-seo-text h3 { font-size: 1rem; }
.cat-seo-text p { line-height: 1.7; margin-bottom: 0.8em; font-size: 0.92rem; }
.cat-seo-text ul { list-style: disc; padding-left: 1.2em; margin-bottom: 0.8em; font-size: 0.92rem; }
.cat-seo-text a { color: var(--brand-blue); text-decoration: underline; }