/* Hydro Systems — stil comun pentru tot siteul nou. Aceleași reguli ca în conceptul de design. */

:root {
  /* ---------------------------------------------------------------------
     Lățimea standard a unui card de produs.

     Etalonul e grila „Produse de sezon": șase carduri pe lățimea conținutului
     (maximum 1600px), cu 18px între ele. Toate rândurile cu derulare o folosesc,
     ca să nu mai existe două mărimi de card pe aceeași pagină — „Vizualizate
     recent" ieșea până acum la 220px fix, iar „Produse noi în stoc" tot la 220px,
     față de ~252px în grilă. Pragurile de mai jos le oglindesc exact pe cele ale
     grilei (6 → 4 → 3 coloane).
     --------------------------------------------------------------------- */
  --card-w: calc((min(1600px, 100vw) - 5 * 18px) / 6);

  --accent: #0097c2;
  --accent: oklch(0.62 0.14 222);
  --accent-dark: #00658d;
  --accent-dark: oklch(0.46 0.13 224);
  --accent-soft: #d6f0fa;
  --accent-soft: oklch(0.94 0.03 222);
  --ink: #172128;
  --ink: oklch(0.24 0.02 240);
  --ink-soft: #545f68;
  --ink-soft: oklch(0.48 0.02 240);
  --paper: #fcfeff;
  --paper: oklch(0.995 0.002 240);
  --surface: #f0f4f7;
  --surface: oklch(0.965 0.006 240);
  --line: #d6dbe0;
  --line: oklch(0.89 0.008 240);
  --slate: #162127;
  --slate: oklch(0.24 0.02 235);
  --good: #359658;
  --good: oklch(0.6 0.13 152);
  --good-soft: #d3f5db;
  --good-soft: oklch(0.94 0.05 152);
  --warn-soft: #ffe3c4;
  --warn-soft: oklch(0.94 0.06 60);
  --warn: #844100;
  --warn: oklch(0.45 0.12 60);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  overflow-x: hidden;
}

/* Semnul de țol în titluri.
   Space Grotesk desenează ghilimeaua dreaptă (") cu două linii înclinate și îngroșate
   la vârf — la 26-32px arată exact ca o ghilimea cârlionțată, deși caracterul din text
   e cel corect. Familia de mai jos împrumută glifa pentru " și ″ dintr-un font de
   sistem cu linii verticale, iar restul literelor rămân Space Grotesk: `unicode-range`
   limitează împrumutul la exact aceste două caractere.
   Dacă niciunul dintre fonturile de sistem nu există, regula pică fără efect și titlul
   rămâne cum era — nu se strică nimic. */
@font-face {
  font-family: "SemnTol";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"),
       local("Liberation Sans"), local("Arimo"), local("Roboto"), local("Segoe UI");
  unicode-range: U+0022, U+2033;
}

h1, h2, h3, h4 {
  font-family: "SemnTol", "Space Grotesk", "Manrope", system-ui, sans-serif;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); }

.wrap { max-width: 1600px; margin: 0 auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 6px;
  font-family: "Manrope"; font-weight: 700; font-size: 14px;
  cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--paper); border-color: #67747c; }
.btn-secondary { background: transparent; color: var(--paper); border-color: oklch(0.55 0.02 235); }
.btn-outline { background: transparent; color: var(--accent-dark); border-color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 5px; background: var(--surface); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
}
.pill-good { background: var(--good-soft); color: #0a562b; border-color: transparent; }
.pill-good { background: var(--good-soft); color: oklch(0.4 0.1 152); border-color: transparent; }
.pill-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; }

/* ---------- Header / navigare comună tuturor paginilor ---------- */

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 70; }

/* Bara „Catalog produse" de pe paginile de catalog. Bara însăși ține loc în pagină
   (de aici înălțimea fixă), iar cardul e așezat peste ea: când lista se desfășoară,
   ea acoperă pagina în loc să împingă produsele în jos. */
.catalog-bar { position: relative; z-index: 60; height: 45px; margin-top: 16px; }
.catalog-bar > .wrap { position: relative; }
.catalog-bar .cat-sidebar { position: absolute; top: 0; left: 0; }
.catalog-bar .cat-sidebar.is-open { box-shadow: 0 20px 44px -26px rgba(24, 35, 42, .5); }
.site-header .row {
  display: flex; align-items: center; gap: 20px; padding: 14px 0;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-img { height: 52px; width: auto; display: block; }

.search {
  flex-grow: 1; min-width: 0; display: flex; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; height: 46px; padding: 0 6px 0 16px;
}
.search input {
  border: none; background: transparent; outline: none; flex-grow: 1; min-width: 0;
  padding: 0 12px; font-family: Manrope; font-size: 14px; color: var(--ink);
}

/* Sugestiile care coboară de sub bara de căutare. Formularul primește position: relative
   ca lista să se alinieze cu el; z-index peste antet, altfel ar trece pe sub rândul de sub el. */
.search { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 38px -22px rgba(24, 35, 42, .45);
  max-height: 60vh; overflow-y: auto; padding: 5px;
}
.search-suggest[hidden] { display: none; }
.sug-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: 8px; color: var(--ink);
}
.sug-row:hover, .sug-row.is-sel { background: var(--surface); }
.sug-thumb {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sug-thumb img { max-width: 86%; max-height: 86%; }
.sug-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.sug-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sug-sub { font-size: 12px; color: var(--ink-soft); }
.sug-price { flex-shrink: 0; font-size: 13.5px; font-weight: 700; color: var(--accent-dark); }
.sug-price.is-out { color: var(--ink-soft); font-weight: 600; }

.header-info {
  display: flex; align-items: center; gap: 18px; flex-shrink: 0;
  font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
}
.header-info .sep { display: flex; align-items: center; gap: 14px; }
.header-info .phone { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--ink); }
.header-info .phone svg { flex-shrink: 0; }

.wishlist-icon {
  position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 8px; flex-shrink: 0;
}
.wishlist-icon:hover { background: var(--surface); }

.cart-shortcut { display: flex; align-items: center; flex-shrink: 0; }
.cart-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; }
.cart-shortcut:hover .cart-icon-wrap { background: var(--surface); }
.cart-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.mega-nav {
  background: var(--slate); height: 48px; display: flex; align-items: stretch; padding: 0 48px;
  overflow-x: auto; scrollbar-width: thin;
}
.mega-nav a {
  color: #c8cfd3; font-weight: 600; font-size: 13.5px; padding: 0 16px;
  color: oklch(0.85 0.01 235); font-weight: 600; font-size: 13.5px; padding: 0 16px;
  height: 48px; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0;
}
.mega-nav a.active { color: #fff; background: var(--accent); font-weight: 700; }

/* Firul Ariadnei stă pe un singur rând. Când nu încape — nume lungi de categorie,
   patru niveluri, ecran de telefon — nu se mai rupe pe două rânduri, ci se derulează
   pe orizontală cu degetul. Bara de derulare e ascunsă: rândul are oricum, la capăt,
   pagina curentă, iar bara ar îngroșa degeaba un element de 13px. */
.breadcrumb {
  padding: 16px 48px 0; font-size: 13px; color: var(--ink-soft);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

.site-footer { background: var(--slate); color: #9fa6aa; }
.site-footer { background: var(--slate); color: oklch(0.72 0.01 235); }
.footer-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; padding: 48px 0 36px; }
.footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: inherit; font-size: 13.5px; }
.footer-col a:hover { color: #fff; }
.footer-brand .footer-logo { height: 46px; width: auto; display: block; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; line-height: 1.65; max-width: 300px; margin: 0 0 20px; }
.footer-social { display: flex; gap: 10px; }
.social-icon {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); color: #fff; transition: background .15s, transform .15s;
  background: oklch(1 0 0 / 10%); color: #fff; transition: background .15s, transform .15s;
}
.social-icon:hover { background: var(--accent); transform: translateY(-2px); }
.footer-contact ul { gap: 14px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.footer-contact li a { font-size: 13.5px; }
.footer-contact svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 18px 0;
  border-top: 1px solid oklch(1 0 0 / 10%); padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: #757b7f;
  font-size: 12px; color: oklch(0.58 0.01 235);
}

/* ---------- Componente produs ---------- */

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid-season { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }

/* Rând cu derulare orizontală (homepage) — cardurile se lățesc să umple rândul când încap
   toate; când nu mai încap la lățimea minimă, apare scroll orizontal + auto-scroll (footer.php).
   Bază comună .hcarousel, folosită de rândul de produse ȘI de rândul de articole. */
.carousel-viewport { overflow: hidden; }
.hcarousel {
  display: grid; grid-auto-flow: column;
  gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Rezervă spațiu sub linia vizibilă pentru bara de scroll nativă, apoi îl "trage" înapoi
     cu margine negativă — .carousel-viewport (overflow:hidden) taie bara, indiferent de
     browser/OS, ca plasă de siguranță pe lângă regulile scrollbar-width/::-webkit-scrollbar de mai sus. */
  padding-bottom: 26px;
  margin-bottom: -26px;
}
.hcarousel > a { scroll-snap-align: start; }
/* Rândul cu derulare continuă nu poate folosi scroll-snap — ar trage poziția înapoi la fiecare
   cadru și mișcarea ar deveni sacadată. Doar pe desktop: pe telefon derularea continuă e oprită
   (vezi footer.php), fiindcă acolo ar lăsa permanent două carduri tăiate în jumătate pe margini. */
@media (min-width: 901px) {
  .hcarousel[data-carousel-loop] { scroll-snap-type: none; }
  .hcarousel[data-carousel-loop] > a { scroll-snap-align: none; }
}
.hcarousel::-webkit-scrollbar { display: none; height: 0; width: 0; }
.product-carousel { grid-auto-columns: minmax(220px, 1fr); }
/* 5 carduri vizibile la lățimea standard a conținutului (1600px), restul se derulează orizontal. */
.article-carousel { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
/* "Vizualizate recent" păstrează mereu dimensiunea standard a unui card de produs (ca la
   "Produse noi în stoc"), fără să se lățească la un singur produs vizualizat. */
.recent-carousel { grid-auto-columns: 220px; }
/* "Produse similare" (produs.php) — aceeași lățime de card ca la "Produse de sezon"
   (.product-grid-season: 6 pe rând, gap 18px), dar cu derulare orizontală în loc de grid care se
   rupe pe rânduri — aceeași tehnică de calc() ca la .article-carousel, cu formula de la
   product-grid-season (breakpoint-urile de mai jos oglindesc exact pe cele ale product-grid-season). */
.similar-carousel { grid-auto-columns: calc((100% - 5 * 18px) / 6); gap: 18px; }

/* Aceeași lățime de card pentru toate rândurile cu derulare, indiferent cât de lat e
   containerul în care stau: „Produse noi în stoc" e într-o coloană mai îngustă, lângă
   meniul de categorii, dar cardul din el trebuie să fie identic cu cel din grila de
   sezon, care ține toată lățimea. Pe telefon regula nu se aplică — acolo caruselele
   arată intenționat două carduri și o margine din al treilea (vezi mai jos, la 900px). */
@media (min-width: 901px) {
  .product-carousel, .recent-carousel, .similar-carousel {
    grid-auto-columns: var(--card-w); gap: 18px;
  }
  /* Dacă prima secțiune e configurată ca grilă, ea stă în coloana îngustă: cardurile
     păstrează lățimea standard, doar că încap mai puține pe rând. */
  .content-col .product-grid-season {
    grid-template-columns: repeat(auto-fill, var(--card-w));
    justify-content: start;
  }
}

.product-card { overflow: hidden; display: flex; flex-direction: column; }
.product-card .thumb {
  height: 150px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.product-card .thumb img { max-width: 70%; max-height: 70%; }
.product-card .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.product-card .brand { font-size: 11px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; line-height: 1.3; min-height: 14.3px; }
.product-card .name {
  font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 37.8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .sku { display: block; font-size: 11.5px; font-weight: 600; color: #484848; cursor: text; user-select: text; }
.product-card .sku { display: block; font-size: 11.5px; font-weight: 600; color: oklch(0.4 0 0); cursor: text; user-select: text; }
.product-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.product-card .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.product-card .price { font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 17px; }

/* Carduri articole ("Sfaturi și ghiduri") */
.article-card { overflow: hidden; display: flex; flex-direction: column; }
.article-thumb {
  position: relative; height: 150px; background: var(--surface);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.article-card .body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.article-date { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; }
.article-card .name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.article-card-excerpt {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Pagina unui articol (article.php) */
.article-hero-media { border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.article-hero-media img { width: 100%; max-height: 360px; object-fit: cover; display: block; }
.article-hero-icon {
  height: 160px; background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.article-meta { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.article-title { font-size: 26px; line-height: 1.3; margin-bottom: 12px; }
.article-excerpt { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }
.article-body { font-size: 15px; line-height: 1.75; color: var(--ink); }
.article-body h3 { font-size: 18px; margin: 28px 0 10px; }
.article-body p { margin: 0 0 14px; }
.article-body ul { margin: 0 0 14px; padding-left: 22px; }
.article-body li { margin-bottom: 6px; }

.spec-row { display: flex; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-row .k { width: 220px; color: var(--ink-soft); }
.spec-row .v { font-weight: 600; }

/* ---------- Homepage: hero, categorii, promo ---------- */

.shop-layout { display: flex; align-items: flex-start; gap: 20px; margin: 24px 0 32px; }

.hero-col, .content-col { display: flex; flex-direction: column; gap: 20px; flex-grow: 1; min-width: 0; }
/* Breadcrumb-ul obișnuit are propriul padding lateral fix; în coloana nouă cu sidebar el trebuie
   să fie flush cu restul conținutului (sidebar-ul dă deja spațierea), fără padding suplimentar. */
.content-col > .breadcrumb { padding: 0; margin-bottom: -4px; }
/* Pagina de produs (produs.php) e flush cu marginile lui .wrap peste tot — la fel ca headerul
   (logo-ul) și ca orice grid de produse de pe site — inclusiv breadcrumb-ul, nu doar galeria. */
.product-page > .breadcrumb { padding-left: 0; padding-right: 0; }

.cat-sidebar {
  /* Fără padding sus: bara albastră de titlu stă lipită de marginea cardului. */
  width: 317px; flex-shrink: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 0 0 6px;
  display: flex; flex-direction: column;
}
.cat-sidebar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-family: "SemnTol", "Space Grotesk"; font-weight: 700; letter-spacing: .03em; text-align: left;
  /* Cap de meniu plin, în culoarea brandului: se vede de departe că sub el începe
     catalogul, iar cardul capătă un început clar în loc să se piardă în alb. Raza e cu
     1px mai mică decât a cardului — exact grosimea conturului — ca să nu rămână un fir
     alb în colțuri. */
  padding: 13px 16px; background: var(--accent); color: #fff;
  text-transform: uppercase; font-size: 13px;
  /* Titlul NU e lipit de marginea de sus a ferestrei. Cât era `position: sticky`, la
     derulare se desprindea de card și plutea peste lista de departamente — iar rândurile
     treceau pe deasupra lui, fiindcă `.cat-sidebar-list` e el însuși poziționat
     (position: relative, pentru panoul care se deschide la hover) și vine după el în pagină.
     Titlul e o etichetă a cardului, deci derulează împreună cu el. */
  position: static;
  border: none; border-radius: 13px 13px 0 0; cursor: default;
}
.catalog-bar .cat-sidebar-head { cursor: pointer; }
.cat-sidebar-head .head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-sidebar-head .head-left svg { flex-shrink: 0; }
/* Primul rând din listă nu mai are nevoie de linie despărțitoare: o dă bara de deasupra. */
.cat-sidebar-list > .cat-item:first-child > a { border-top: none; }
/* Lista se pliază DOAR în bara de sus a paginilor de catalog. În conținutul primei
   pagini stă mereu deschisă: acolo ea e navigarea principală, iar un meniu care poate
   fi închis din greșeală ar lăsa pagina fără nicio cale spre departamente. De aceea
   săgeata și cursorul de apăsare apar numai în bară. */
.cat-sidebar-head .toggle-chev { display: none; flex-shrink: 0; transition: transform .2s; }
.catalog-bar .cat-sidebar-head .toggle-chev { display: block; }

/* În bară lista pornește strânsă; .is-open o desface. */
.catalog-bar .cat-sidebar:not(.is-open) .cat-sidebar-list { display: none; }
/* Strânsă, rămâne doar bara albastră: colțurile ei se rotunjesc pe toate patru părțile,
   iar cardul nu mai păstrează spațiul de sub listă. */
.catalog-bar .cat-sidebar:not(.is-open) { padding-bottom: 0; }
.catalog-bar .cat-sidebar:not(.is-open) .cat-sidebar-head { border-radius: 13px; }
.catalog-bar .cat-sidebar:not(.is-open) .cat-sidebar-head .toggle-chev { transform: rotate(-90deg); }
.cat-sidebar a {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  font-size: 13px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line);
}
.cat-sidebar a:hover { background: var(--surface); color: var(--accent-dark); }
.cat-sidebar a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.cat-sidebar .icon { color: var(--accent-dark); flex-shrink: 0; display: flex; }
.cat-sidebar .name { flex-grow: 1; line-height: 1.3; }
.cat-sidebar .chev { color: var(--ink-soft); font-size: 15px; }

/* ---------- Pagina de categorie (categorie.php) ---------- */

/* Pagina de categorie nu mai are sidebar-ul de departamente (Sept 2026) — categoriile se
   navighează prin cardurile de mai jos, la fel ca pe hola.md; conținutul e pe toată lățimea
   lui .wrap, cu propriul padding lateral, în ritm vertical unitar între secțiuni. */
.cat-page-wrap { display: flex; flex-direction: column; gap: 20px; padding: 28px 0 56px; }

/* Titlu + număr de produse, deasupra gridului. */
.cat-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cat-page-head h1 { font-size: 24px; }
.cat-page-head .count { font-size: 13.5px; color: var(--ink-soft); }

/* Carduri colorate pentru departamente / subcategorii (ecranul "Toate categoriile" și cel al unui
   departament fără o categorie aleasă încă) — în stilul hola.md: fundal pastel, iconiță mare,
   eticheta jos, buton rotund "deschide" în colțul din dreapta sus. Culoarea de fundal se
   repetă pe un ciclu de 6, ca să nu depindă de PHP. */
.cat-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 148px; border-radius: 16px; padding: 16px; overflow: hidden; color: var(--ink);
}
.cat-card:nth-child(6n+1) { background: #f8e5c7; }
.cat-card:nth-child(6n+1) { background: oklch(0.93 0.045 80); }
.cat-card:nth-child(6n+2) { background: #ceeaf8; }
.cat-card:nth-child(6n+2) { background: oklch(0.92 0.035 230); }
.cat-card:nth-child(6n+3) { background: #ceefd3; }
.cat-card:nth-child(6n+3) { background: oklch(0.92 0.05 150); }
.cat-card:nth-child(6n+4) { background: #e8dffc; }
.cat-card:nth-child(6n+4) { background: oklch(0.92 0.04 300); }
.cat-card:nth-child(6n+5) { background: #ffdbda; }
.cat-card:nth-child(6n+5) { background: oklch(0.93 0.05 20); }
.cat-card:nth-child(6n+6) { background: #d4e7fc; }
.cat-card:nth-child(6n+6) { background: oklch(0.92 0.035 250); }
.cat-card .go {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); color: var(--ink); display: flex; align-items: center; justify-content: center;
  background: oklch(1 0 0 / 80%); color: var(--ink); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.cat-card:hover .go { background: var(--ink); color: #fff; }
.cat-card .icon {
  position: absolute; top: 18px; left: 18px; color: var(--ink);
  display: flex; transition: transform .15s;
}
.cat-card .icon svg { opacity: .8; }
.cat-card:hover .icon { transform: translateY(-3px); }
.cat-card .label { position: relative; font-size: 14px; font-weight: 700; line-height: 1.3; }

/* Cardurile de subcategorii din vederea de departament (categorie.php) — spre deosebire de
   .cat-card de mai sus, astea sunt plate/dreptunghiulare, fără culoare și fără iconiță (nu avem
   o iconiță reală per subcategorie, doar per departament), doar eticheta + săgeata rotundă. Se
   așază pe lățimea conținutului lor (nu într-un grid rigid), ca să nu se întindă absurd de larg
   când e un singur card. */
.subcat-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Eticheta de deasupra rândului. Fără ea, un șir de dreptunghiuri albe nu spune
   nimănui că sunt subcategorii pe care se poate apăsa. */
.subcat-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  margin: 2px 0 10px;
}
.subcat-label svg { flex-shrink: 0; opacity: .75; }

.subcat-card {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 24px; padding: 13px 14px 13px 20px;
  border-radius: 10px; color: var(--ink);
  /* Fundal ușor colorat, nu alb pe alb: cardul se desprinde de pagină și se citește
     ca element de navigare, nu ca simplă etichetă. */
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
/* Banda din stânga, în culoarea brandului — semnalul că e ceva de apăsat. */
.subcat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .45;
  transition: opacity .15s, width .15s;
}
.subcat-card:hover {
  background: #fff; border-color: var(--accent); color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -14px rgba(24, 35, 42, .45);
}
.subcat-card:hover::before { opacity: 1; width: 4px; }

.subcat-card .label { font-size: 14px; font-weight: 700; line-height: 1.3; }
.subcat-card .go {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.subcat-card:hover .go { background: var(--accent); color: #fff; transform: translateX(2px); }

/* Stare "activă" — categoria deschisă. Rămâne plină, ca diferența față de celelalte
   (care sunt de apăsat) să se vadă dintr-o privire. */
.subcat-card.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: none; box-shadow: none;
}
.subcat-card.active::before { opacity: 0; }
.subcat-card.active .go { background: rgba(255, 255, 255, 0.25); color: #fff; }
.subcat-card.active .go { background: oklch(1 0 0 / 25%); color: #fff; }
.subcat-card.active:hover .go { transform: none; }

/* Cardul de filtru din grila de produse a unei categorii (categorie.php) — ocupă exact locul
   unui card de produs (e primul element din același .product-grid-season), deocamdată doar
   filtru de preț; mai vin filtre în același card. */
/* Pagina de categorie: coloana de filtre în stânga, produsele în dreapta.
   Filtrul NU mai e o celulă a grilei — cât timp era, produsele curgeau în jurul
   lui și ocupau celula de sub el. Așa, sub filtre nu mai ajunge niciun produs,
   iar filtrele care urmează se adună pe verticală în coloana lor. */
.cat-with-filters { display: flex; align-items: flex-start; gap: 18px; }
/* align-self: stretch — fără el, coloana are exact înălțimea cardului, iar un element
   „sticky" nu are pe ce călători: rămâne lipit de card și iese din ecran la derulare. */
.cat-filters { width: 258px; flex-shrink: 0; align-self: stretch; }
.cat-products { flex-grow: 1; min-width: 0; }
.cat-products .product-grid-season { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- Cardul de filtre ----------
   Pe desktop e o coloană lipită (sticky) în stânga produselor: rămâne la vedere cât
   derulezi lista, iar dacă are mai multe filtre decât încap pe ecran, derulează în el.
   Pe telefon și tabletă dispare din pagină și se deschide dintr-un buton, ca o foaie
   care urcă de jos — vezi mai departe, la breakpoint. */
.filter-card {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px;
}
.filter-card h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 15px; font-weight: 800; color: var(--ink);
}
.filter-card h3 svg { color: var(--accent-dark); }

/* Butonul × și fundalul întunecat există doar în varianta de foaie, pe ecrane mici. */
.filter-close {
  display: none; position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 28px; line-height: 1;
  color: var(--ink-soft); cursor: pointer; z-index: 2;
}
.filter-backdrop { display: none; }

/* Fiecare filtru e un grup, despărțit de o linie subțire — al doilea, al treilea (brand,
   stoc, diametru) se vor adăuga la fel, fără să mai fie nevoie de reguli noi. */
.filter-group { border-top: 1px solid var(--line); padding-top: 16px; }
.filter-group:first-of-type { border-top: none; padding-top: 0; }
.filter-group .fg-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

.price-range { display: flex; align-items: center; gap: 8px; }
.price-range input {
  width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px;
  font-family: inherit; font-size: 13px; color: var(--ink); background: #fff;
}
.price-range input:focus { outline: none; border-color: var(--accent); }
.price-range input::-webkit-outer-spin-button,
.price-range input::-webkit-inner-spin-button { margin: 0; }
.price-range span { flex-shrink: 0; color: var(--ink-soft); font-size: 12px; }
.price-hint { margin-top: 7px; font-size: 11.5px; color: var(--ink-soft); }

.filter-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.filter-apply {
  width: 100%; padding: 11px 14px; border: none; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
}
.filter-apply:hover { background: var(--accent-dark); }
.filter-reset { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.filter-reset:hover { color: var(--accent-dark); }

/* Butonul care deschide foaia — ascuns pe desktop. */
.filter-fab { display: none; }

/* Eticheta cu numele subcategoriei, afișată deasupra brandului doar când produsele vin din mai
   multe categorii combinate (vederea de departament din categorie.php). */
.product-card .cat-tag {
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .03em; line-height: 1.3;
}

/* Paginare simplă (numere de pagină), pentru listele lungi de produse dintr-un departament. */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13.5px; font-weight: 600;
}
.page-link:hover { border-color: var(--accent); color: var(--accent-dark); }
.page-link.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Punctele dintre grupurile de pagini, când sunt prea multe ca să încapă toate. */
.page-gap { color: var(--ink-soft); padding: 0 2px; user-select: none; }
/* Paginarea de sub grila unei categorii are nevoie de puțin aer față de ultimul rând. */
.cat-products .pagination { margin-top: 22px; }

.home-hero {
  background: linear-gradient(135deg, var(--accent-soft), #ebf8fc);
  background: linear-gradient(135deg, var(--accent-soft), oklch(0.97 0.015 222));
  border-radius: 16px; padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  overflow: hidden; position: relative;
  min-height: 444px;
}
/* Variantă cu poză reală de produs în fundal, în loc de gradient.
   Fără niciun voal peste imagine: fotografia se vede exact așa cum e, cu
   culorile și contrastul ei. Lizibilitatea textului o asigură haloul alb fin
   din spatele literelor (text-shadow, mai jos). */
.home-hero-photo {
  background-image: url('/assets/hero-osmoza.webp');
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.home-hero .copy { max-width: 620px; display: flex; flex-direction: column; gap: 16px; z-index: 1; }
.home-hero h1 { font-size: 36px; line-height: 1.18; color: var(--ink); }
.home-hero p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 520px; }
.home-hero .cta-row { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Slider de banere (administrate din /admin/banere.php).
   Cu un singur banner activ arată exact ca un banner fix; de la două în sus
   capătă săgeți, bulinuțe și rulare automată. Funcționează identic pe desktop
   și pe telefon — imaginea încărcată se vede pe toate dispozitivele.
   ------------------------------------------------------------------------- */
.hero-slider { position: relative; border-radius: 16px; overflow: hidden; }
.hero-track { display: flex; transition: transform .45s ease; align-items: stretch; }
/* Fiecare banner e doar imaginea lui. line-height: 0 scoate spațiul pe care browserul
   îl lasă sub un <img> așezat ca text, altfel ar rămâne o dungă albă sub poză. */
.hero-slide { flex: 0 0 100%; display: block; line-height: 0; }
.hero-img { width: 100%; height: auto; display: block; }

/* Bannerul cu fotografie încărcată: poza umple tot cadrul, fără niciun voal
   peste ea. Imaginea se vede integral, exact cum a fost urcată din panou. */
.home-hero.has-photo {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  position: relative;
}
.home-hero.has-photo .copy { position: relative; z-index: 1; }

/* Singurul lucru care ține textul lizibil acum, în lipsa voalului: un halou alb
   difuz strict în jurul literelor. Nu atinge imaginea, doar conturul textului. */
.home-hero.has-photo h1,
.home-hero-photo h1 {
  text-shadow: 0 1px 2px rgba(252, 254, 255, 0.95), 0 0 16px rgba(252, 254, 255, 0.95), 0 0 34px rgba(252, 254, 255, 0.8);
}
.home-hero.has-photo p,
.home-hero-photo p {
  text-shadow: 0 1px 2px rgba(252, 254, 255, 0.95), 0 0 14px rgba(252, 254, 255, 0.95), 0 0 28px rgba(252, 254, 255, 0.8);
}

/* Săgețile stau în colțul din dreapta-jos, nu pe mijloc: pe mijloc cădeau peste
   subtitlu și peste buton. */
.hero-arrow {
  position: absolute; bottom: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
  background: oklch(1 0 0 / 90%); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px -4px rgba(24, 35, 42, 0.45);
  box-shadow: 0 2px 10px -4px oklch(0.25 0.02 235 / 45%);
  transition: background .15s, color .15s;
}
.hero-arrow:hover { background: var(--ink); color: #fff; }
.hero-arrow.prev { right: 62px; }
.hero-arrow.next { right: 14px; }

.hero-dots {
  position: absolute; left: 48px; bottom: 26px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.hero-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(24, 35, 42, 0.28);
  background: oklch(0.25 0.02 235 / 28%);
  transition: background .15s, width .15s;
}
.hero-dots button.is-active { width: 24px; border-radius: 5px; background: var(--accent); }

.hero-art { position: relative; width: 280px; height: 240px; flex-shrink: 0; }
.hero-art .bubble {
  position: absolute; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -12px rgba(38, 78, 91, 0.35);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -12px oklch(0.4 0.05 222 / 35%);
}
.hero-art .bubble img { width: 58%; height: 58%; object-fit: contain; }
.hero-art .b1 { width: 168px; height: 168px; right: 20px; top: 8px; background: var(--accent); }
.hero-art .b1 svg, .hero-art .b1 img { filter: brightness(0) invert(1); }
.hero-art .b2 { width: 84px; height: 84px; right: 190px; top: 0; }
.hero-art .b3 { width: 76px; height: 76px; right: 150px; bottom: 0; }
.hero-art .b4 { width: 64px; height: 64px; right: 0; bottom: 10px; background: var(--good-soft); }

.cat-circles { display: flex; gap: 22px; flex-wrap: wrap; padding: 4px 0 8px; }
.cat-circle { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 108px; color: var(--ink); }
.cat-circle .ring {
  width: 84px; height: 84px; border-radius: 50%; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s;
}
.cat-circle:hover .ring { background: var(--accent); transform: translateY(-3px); }
.cat-circle:hover .ring svg { stroke: #fff; }
.cat-circle .label { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.3; }
.cat-circle .count { font-size: 11px; color: var(--ink-soft); }

.promo-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.promo-card {
  /* stretch, nu center: coloana de text trebuie să ocupe toată înălțimea cardului, ca
     rândul de jos (telefon + hartă) să poată fi împins la bază. Altfel, cardul a cărui
     adresă se rupe pe două rânduri își cobora rândul de jos față de celelalte două. */
  display: flex; align-items: stretch; gap: 14px; padding: 18px 20px; border-radius: 12px;
  color: inherit;
}
.promo-card .icon-circle {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; flex-shrink: 0;
  align-self: flex-start;   /* iconița rămâne sus, în dreptul titlului */
  display: flex; align-items: center; justify-content: center;
}
.promo-body { min-width: 0; flex-grow: 1; display: flex; flex-direction: column; }
.promo-card .title { font-weight: 700; font-size: 14px; }
/* flex-grow: 1 — spațiul rămas în card îl înghite zona de adresă, nu rândul de jos.
   Așa, cele trei rânduri de jos pornesc de la aceeași linie chiar dacă adresele ocupă
   un număr diferit de rânduri. */
.promo-card .subtitle { font-size: 12.5px; opacity: .75; margin-top: 3px; line-height: 1.45; flex-grow: 1; }
.promo-card .promo-note { white-space: nowrap; }

/* Rândul cu telefonul și harta. Telefonul e un link „tel:", deci pe telefon se sună
   dintr-o atingere; nu e un simplu text de copiat. */
/* margin-top: auto — rândul de jos se lipește de baza cardului, deci cele trei carduri
   au telefonul și „Vezi pe hartă" exact pe aceeași linie, indiferent de câte rânduri
   ocupă adresa de deasupra. */
/* nowrap: telefonul și „Vezi pe hartă" rămân pe același rând. Când se rupeau în două,
   rândul de jos al cardului devenea de două ori mai înalt și pornea mai sus decât cel
   al cardului vecin — de aici nepotrivirea dintre cele trei. */
.promo-actions {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 12px;
  margin-top: auto; padding-top: 9px; min-height: 31px;
}
.promo-actions > * { white-space: nowrap; }
.promo-phone {
  font-size: 14.5px; font-weight: 800; color: inherit; letter-spacing: .01em;
}
.promo-phone:hover { color: inherit; text-decoration: underline; }
.promo-map, .promo-link {
  font-size: 12.5px; font-weight: 700; color: inherit; opacity: .8;
}
.promo-map:hover, .promo-link:hover { color: inherit; opacity: 1; text-decoration: underline; }
/* Aceeași înălțime ca rândul cu telefon, ca să pornească exact de la aceeași linie:
   fără asta, cardul cu link simplu avea rândul de jos cu câțiva pixeli mai jos. */
.promo-link { display: flex; align-items: center; margin-top: auto; padding-top: 9px; min-height: 31px; }

/* Primul card e în întregime un link — capătă o mișcare mică la hover, ca să se vadă
   că e apăsabil; celelalte două nu sunt linkuri, deci stau pe loc. */
a.promo-card { transition: transform .15s, box-shadow .15s; }
a.promo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(24, 35, 42, .5);
}
.promo-1 { background: var(--accent-soft); color: var(--accent-dark); }
.promo-2 { background: var(--good-soft); color: #0a562b; }
.promo-2 { background: var(--good-soft); color: oklch(0.4 0.1 152); }
.promo-3 { background: var(--warn-soft); color: var(--warn); }

.product-card .thumb { position: relative; }
.product-card .badge-new, .article-thumb .badge-new {
  position: absolute; top: 10px; left: 10px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; letter-spacing: .02em;
}

/* Inimioară "adaugă la favorite", peste colțul din dreapta-sus al pozei fiecărui card. */
.fav-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.88); color: var(--ink-soft); cursor: pointer;
  background: oklch(1 0 0 / 88%); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -2px rgba(38, 78, 91, 0.35);
  box-shadow: 0 2px 6px -2px oklch(0.4 0.05 222 / 35%);
  transition: transform .15s, color .15s;
}
.fav-btn:hover { transform: scale(1.08); color: #cc272e; }
.fav-btn:hover { transform: scale(1.08); color: oklch(0.55 0.2 25); }
.fav-btn .fav-filled { display: none; }
.fav-btn.is-fav { color: #cc272e; }
.fav-btn.is-fav { color: oklch(0.55 0.2 25); }
.fav-btn.is-fav .fav-filled { display: block; }
.fav-btn.is-fav .fav-outline { display: none; }
.product-card .add-full {
  width: 100%; height: auto; min-height: 38px; padding: 8px 10px; margin-top: 4px;
  white-space: normal; text-align: center; line-height: 1.3;
}

.brand-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.brand-strip span {
  font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 15px; color: var(--ink-soft);
  opacity: .7;
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.section-head h2 { font-size: 21px; }
.section-head a { font-size: 13px; font-weight: 700; }
.section-head-right { display: flex; align-items: center; gap: 16px; }

.carousel-nav { display: flex; align-items: center; gap: 6px; }
.carousel-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; padding: 0; flex-shrink: 0;
  background: var(--accent-soft); border: none; color: var(--accent-dark); cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.carousel-arrow:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.carousel-arrow:active { transform: translateY(0); }

.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.partner-card { display: flex; flex-direction: column; overflow: hidden; }
.partner-art { height: 170px; background: var(--surface); overflow: hidden; }
.partner-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.partner-body h3 { font-size: 17px; }
.partner-body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); flex-grow: 1; }
.partner-body .btn { align-self: flex-start; margin-top: 6px; }

/* ---------- Responsive (tabletă / telefon) ---------- */

@media (max-width: 1500px) {
  /* 5 coloane, nu 4: la 4 cardul ieșea de ~347px pe un laptop de 1440px, aproape cât
     două. 5 dă ~274px, aproape de cele ~252px de pe ecran lat — și e aceeași alegere
     ca pe paginile de categorie, deci cardul rămâne la fel peste tot. */
  :root { --card-w: calc((min(1600px, 100vw) - 4 * 18px) / 5); }
  /* Rândul „telefon + Vezi pe hartă" trebuie să încapă tot pe un rând — altfel se rupe
     în două și nu mai e la aceeași linie cu vecinii. */
  .promo-phone { font-size: 13.5px; }
  .promo-actions { gap: 10px; }
  .product-grid-season { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Listele paginate (departament, rezultate de căutare) trec pe 5, nu pe 4: pagina are 30
     de produse, iar 30 se împarte exact la 5, 3 și 2 — deci ultimul rând e mereu plin.
     Regula e legată de .cat-page-wrap ca să nu atingă rândurile de pe prima pagină. */
  .cat-page-wrap > .product-grid-season { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cat-products .product-grid-season { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-carousel { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .similar-carousel { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
}

/* Sub 1400px, trei carduri una lângă alta nu mai lasă loc ca adresa, telefonul și
   „Vezi pe hartă" să stea frumos; rândul de jos ar începe să se rupă. Trec unul sub
   altul, pe toată lățimea — acolo au loc berechet. */
@media (max-width: 1400px) {
  .promo-row { grid-template-columns: 1fr; }
  .promo-card { padding: 16px 18px; }
}

@media (max-width: 1150px) {
  :root { --card-w: calc((100vw - 2 * 18px) / 3); }
  .product-grid-season { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Aceeași specificitate ca regula de 5 coloane de mai sus, altfel aceea ar rămâne în vigoare. */
  .cat-page-wrap > .product-grid-season { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-products .product-grid-season { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-carousel { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .similar-carousel { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}

/* Pagina de produs (produs.php) — galerie cu miniaturi verticale + panou de informații (preț,
   chip-uri de stoc/comandă telefonică, stepper de cantitate), tab-uri sub galerie (Descriere /
   Specificații / Fișă tehnică) și un rând de produse similare la final — după modelul hola.md. */
/* Pagina se împarte în 2 jumătăți egale, pe toată lățimea paginii: galeria (stânga) și panoul de
   informații (dreapta) ocupă fiecare exact jumătate din .product-hero (fără plafon de lățime),
   ca pe pagina de produs de referință trimisă de Ion — doar principiul de împărțire, nu stilul. */
.product-hero { display: flex; gap: 36px; padding: 22px 0 8px; flex-wrap: wrap; }

.product-gallery { display: flex; gap: 12px; flex: 1 1 0; min-width: 260px; }
/* Coloana de miniaturi are lățime fixă și nu are voie să se strângă.
   Fără asta, `overflow-y: auto` îi anulează lățimea minimă automată, iar coloana
   din dreapta o strânge sub cei 77px ai unei miniaturi — apare o bară de derulare
   orizontală de câțiva pixeli și miniatura pare că iese din pătratul ei.
   `overflow-x: hidden` e tot de acolo: dacă o axă are derulare, cealaltă devine
   automat `auto`, așa că trebuie închisă explicit. */
.gallery-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  width: 77px; flex-shrink: 0;
  max-height: 480px; overflow-y: auto; overflow-x: hidden;
}
.gallery-thumb {
  width: 77px; height: 77px; padding: 0; border-radius: 8px; overflow: hidden;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gallery-thumb img { max-width: 80%; max-height: 80%; }
.gallery-thumb.active { border-color: var(--accent); border-width: 2px; }
.gallery-main {
  flex-grow: 1; width: auto; min-height: 300px; aspect-ratio: 1 / 1; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.gallery-main img { max-width: 88%; max-height: 88%; }
.gallery-main.zoomable { cursor: zoom-in; }

/* Lightbox: click pe imaginea mare o deschide pe tot ecranul. */
.lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; background: rgba(24, 35, 42, 0.82);
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; background: oklch(0.25 0.02 235 / 0.82);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: #fff; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { color: var(--accent-dark); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; border: none; background: #fff; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { color: var(--accent-dark); }
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }
.lightbox-nav[hidden] { display: none; }

.product-info { flex: 1 1 0; min-width: 300px; display: flex; flex-direction: column; gap: 13px; }
.product-info h1 { font-size: 26px; line-height: 1.25; }
.product-info .kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.product-info .brand-name { font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 13px; color: var(--accent-dark); }

/* Codul produsului stă sub denumire, cu cifra îngroșată și un buton de copiere alături. */
.sku-line { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.sku-line .sku-label { font-size: 13px; color: var(--ink-soft); }
.sku-line .sku-code { font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: 0.2px; }
.copy-sku {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.copy-sku:hover { color: var(--accent-dark); border-color: var(--accent); }
.sku-line .copy-done { font-size: 11.5px; font-weight: 700; color: var(--accent-dark); }
.sku-line .copy-done[hidden] { display: none; }

/* Caracteristicile principale (material, presiune etc.) — sub blocul de comandă, cu etichetă
   lângă valoare, ca să se înțeleagă ce înseamnă valori de tip "Plastic ABS". Colțurile rotunjite
   la 10px, ca .card și restul blocurilor din site. */
.key-specs { padding: 12px 14px; background: var(--surface); border-radius: 10px; }
.key-specs-head { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.key-spec-row { display: flex; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.key-spec-row:last-of-type { border-bottom: none; }
.key-spec-row .k { color: var(--ink-soft); flex-grow: 1; }
.key-spec-row .v { font-weight: 700; text-align: right; }
.key-specs-link { margin-top: 8px; padding: 0; border: none; background: none; font-family: "Manrope"; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); cursor: pointer; }
.key-specs-link:hover { text-decoration: underline; }

/* Prețul și chip-urile de disponibilitate/telefon sunt informative, nu butoane — de-accentuate
   față de primul rând (fără bordură, fundal gri deschis) ca să nu concureze vizual cu butonul
   real "Adaugă în coș". Toate controalele din order-row au acum înălțimea standard
   de buton a siteului (44px, ca .btn), nu una mărită separat pentru pagina de produs. */
.price-block { padding: 10px 16px; border: none; border-radius: 10px; background: var(--surface); }
.price-block .note { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 1px; }
.price-block .amount { font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 25px; }
.price-block .amount .unit { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
/* Totalul apare doar de la 2 bucăți în sus și se recalculează la fiecare schimbare de cantitate. */
.price-block .total-line { margin-top: 5px; font-size: 13px; color: var(--ink-soft); }
.price-block .total-line[hidden] { display: none; }
.price-block .total-line strong { font-family: "SemnTol", "Space Grotesk"; font-size: 15px; color: var(--ink); }
/* Rândul „se vinde la pachet de N buc." de sub preț, pe pagina produsului. */
.price-block .pack-line {
  margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--accent-dark);
}
/* Aceeași informație, scurtă, pe cardul din liste. */
.product-card .card-pack {
  margin-top: -2px; font-size: 11.5px; line-height: 1.35; color: var(--ink-soft);
}
/* Și pe rândul din coș, lângă prețul pe bucată. */
.cart-row .unit-pack { color: var(--accent-dark); font-weight: 600; white-space: nowrap; }

.info-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.info-chip {
  flex: 1; min-width: 220px; padding: 8px 12px; display: flex; align-items: center; gap: 9px;
  border: none; border-radius: 10px; background: var(--surface);
}
.info-chip svg { flex-shrink: 0; width: 17px; height: 17px; }
.info-chip .label { font-size: 11px; color: var(--ink-soft); }
.info-chip .value { font-size: 12.5px; font-weight: 700; }
.info-chip a { color: var(--ink); }
.info-chip a:hover { color: var(--accent-dark); }
.info-chip .stock-dot { display: flex; align-items: center; }
/* Chip-ul de disponibilitate ține eticheta și starea stocului pe același rând. */
.info-chip-inline > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info-chip .pill { height: 20px; font-size: 11px; }

.order-row { display: flex; align-items: center; gap: 10px; }
.qty-stepper { position: relative; display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 6px; height: 44px; flex-shrink: 0; }
.qty-stepper button {
  width: 34px; height: 100%; border: none; background: none; font-size: 16px; font-weight: 700;
  color: var(--ink-soft); cursor: pointer; font-family: "Manrope";
}
.qty-stepper button:hover:not(:disabled) { color: var(--accent-dark); }
.qty-stepper button:disabled { opacity: 0.35; cursor: default; }
.qty-stepper button.is-maxed { opacity: 0.4; }
.qty-stepper input {
  width: 38px; text-align: center; border: none; border-left: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line); height: 100%; font-weight: 700; font-size: 14px;
  -moz-appearance: textfield; appearance: textfield;
}
/* Săgețile native ale input-ului number dublează butoanele − / + și împing cifra în stânga. */
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Mesajul care apare scurt când s-a atins stocul disponibil. */
.qty-max-msg {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 9px; border-radius: 6px;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700;
}
.qty-max-msg[hidden] { display: none; }
.order-row .btn { flex-grow: 1; }
/* Butonul de favorite de pe pagina produsului: doar pătratul, fără cerculețul alb cu umbră pe
   care îl are inimioara de pe cardurile de produs. Pătratul întreg e zona de click. */
.fav-btn-lg {
  width: 44px; height: 44px; border-radius: 6px; border: 1.5px solid var(--line);
  flex-shrink: 0; overflow: hidden; transition: border-color .15s, background-color .15s;
}
.fav-btn-lg .fav-btn {
  position: static; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0; background: none; box-shadow: none; color: var(--ink-soft);
  transition: color .15s;
}
.fav-btn-lg .fav-btn:hover { transform: none; }
.fav-btn-lg:hover { border-color: rgba(204, 39, 46, 0.45); background: rgba(204, 39, 46, 0.06); }
.fav-btn-lg:hover { border-color: oklch(0.55 0.2 25 / 45%); background: oklch(0.55 0.2 25 / 6%); }
.fav-btn-lg:hover .fav-btn { color: #cc272e; }
.fav-btn-lg:hover .fav-btn { color: oklch(0.55 0.2 25); }
.fav-btn-lg.has-fav { border-color: rgba(204, 39, 46, 0.55); background: rgba(204, 39, 46, 0.08); }
.fav-btn-lg.has-fav { border-color: oklch(0.55 0.2 25 / 55%); background: oklch(0.55 0.2 25 / 8%); }
.fav-btn-lg:has(.fav-btn.is-fav) { border-color: rgba(204, 39, 46, 0.55); background: rgba(204, 39, 46, 0.08); }
.fav-btn-lg:has(.fav-btn.is-fav) { border-color: oklch(0.55 0.2 25 / 55%); background: oklch(0.55 0.2 25 / 8%); }
.fav-btn-lg .fav-btn svg { width: 18px; height: 18px; }

/* Descriere / Specificații / Livrare / Fișă tehnică — tab-uri pe un rând, cu linie continuă sub
   ele și subliniere colorată pe cel activ. */
.product-tabs-wrap { padding: 8px 0 40px; }
.tab-nav {
  display: flex; gap: 32px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.tab-btn {
  background: none; border: none; padding: 0 0 12px; cursor: pointer;
  font-family: "Manrope"; font-weight: 700; font-size: 15px; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.tab-body { max-width: 860px; }
.tab-panel[hidden] { display: none; }

/* Cele două blocuri de livrare din coloana de informații, sub "Caracteristici principale":
   livrare în toată Moldova și ridicare personală din magazinul din Chișinău. */
.delivery-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.delivery-chip {
  flex: 1 1 260px; min-width: 240px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; background: var(--surface); border-radius: 10px;
}
.delivery-chip .icon {
  width: 36px; height: 36px; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.delivery-chip .label { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.delivery-chip .text { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.delivery-chip .text .muted { color: var(--ink-soft); opacity: 0.85; }
.delivery-chip .map-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-dark);
}
.delivery-chip .map-link:hover { text-decoration: underline; }

/* Fișa tehnică e un PDF care se deschide într-o filă nouă. */
.datasheet-link {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
}
.datasheet-link:hover { border-color: var(--accent); }
.datasheet-link .icon {
  width: 42px; height: 42px; border-radius: 8px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.datasheet-link .text { flex-grow: 1; }
.datasheet-link .label { display: block; font-weight: 700; font-size: 14px; }
.datasheet-link .meta { display: block; font-size: 12px; color: var(--ink-soft); }

/* Fără padding lateral — la fel ca .product-grid-season (homepage/categorie.php), ca formula de
   calc() a .similar-carousel de mai sus să calculeze exact aceeași lățime de card, cardurile
   fiind "lipite" de marginile lui .wrap la fel ca oriunde altundeva pe site un grid de produse. */
.similar-products-wrap { padding: 0 0 48px; }

@media (max-width: 900px) {
  /* Un singur jgheab lateral pentru tot site-ul pe ecrane mici: îl dă .wrap, iar blocurile care
     își puneau singure padding lateral îl lasă la zero, ca să nu se dubleze. Fără asta, titlurile
     și cardurile stăteau lipite de marginea ecranului, ceea ce arăta neterminat. */
  .wrap { padding-left: 16px; padding-right: 16px; }
  /* Header-ul și footer-ul sunt ele însele .wrap, dar au reguli proprii de padding cu
     specificitate mai mare, așa că jgheabul li se dă explicit. */
  .site-header .row, .footer-main, .footer-bottom { padding-left: 16px; padding-right: 16px; }
  /* Blocurile dinăuntrul unui .wrap nu mai adaugă al doilea jgheab. */
  .breadcrumb, .product-page > .breadcrumb, .checkout-page > .breadcrumb { padding-left: 0; padding-right: 0; }
  .footer-main { padding-top: 36px; padding-bottom: 28px; }
  .mega-nav { padding-left: 16px; padding-right: 16px; overflow-x: auto; }

  /* Pe telefon caruselele arată două carduri întregi plus o margine din al treilea, ca să se
     vadă că rândul continuă — niciodată carduri retezate la ambele capete. */
  .product-carousel, .similar-carousel, .article-carousel { grid-auto-columns: 46%; }
  .product-grid, .product-grid-4, .product-grid-season { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-page-wrap > .product-grid-season { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .article-carousel { grid-auto-columns: calc((100% - 1 * 16px) / 2); }
  .similar-carousel { grid-auto-columns: calc((100% - 1 * 18px) / 2); }
  .section-head-right { gap: 8px; }
  /* Săgețile caruselelor rămân zone de atins comode pe ecran tactil. */
  .carousel-arrow { width: 34px; height: 34px; }

  /* Rândul de subcategorii pe telefon: un singur rând, derulat cu degetul stânga-dreapta.
     Pe verticală, douăsprezece carduri înfășurate ocupau tot ecranul și împingeau produsele
     sub linia de plutire. Rândul iese până la marginile ecranului (marginile negative anulează
     jgheabul de 16px al .wrap, iar padding-ul îl pune înapoi înăuntru), ca ultimul card să fie
     retezat de margine — semnalul că rândul continuă. Bara de derulare e ascunsă: pe telefon
     nu folosește nimănui, iar degetul e oricum mijlocul de deplasare. */
  .subcat-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    padding-bottom: 2px;
  }
  .subcat-row::-webkit-scrollbar { display: none; }
  .subcat-card { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Pe ecran tactil nu există „hover" adevărat: starea rămâne lipită pe ultimul card atins,
   iar ridicarea de 2px face rândul să pară că tresare la derulare. */
@media (hover: none) {
  .subcat-card:hover {
    background: var(--surface); border-color: var(--line); color: var(--ink);
    transform: none; box-shadow: none;
  }
  .subcat-card:hover::before { opacity: .45; width: 3px; }
  .subcat-card:hover .go { background: var(--accent-soft); color: var(--accent-dark); transform: none; }
  .subcat-card.active:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .subcat-card.active:hover .go { background: oklch(1 0 0 / 25%); color: #fff; }
  /* Apăsarea propriu-zisă rămâne vizibilă. */
  .subcat-card:active { transform: scale(.98); }

  .section-head a { font-size: 12px; text-align: right; }
  /* Pe primul rând rămân doar logoul și cele două iconițe, împinse la marginea din dreapta —
     altfel stăteau lipite de logo, cu jumătate de rând gol după ele. */
  .site-header .row { flex-wrap: wrap; row-gap: 10px; gap: 12px; }
  .wishlist-icon { margin-left: auto; }
  .logo-img { height: 44px; }
  .search { order: 3; flex-basis: 100%; }
  .header-info { order: 4; flex-basis: 100%; justify-content: center; gap: 12px; font-size: 12px; }
  .shop-layout { flex-direction: column; align-items: stretch; margin: 16px 0; gap: 16px; }
  /* Benzile cu fotografie erau cât un ecran fiecare — trei la rând însemnau mult derulat
     până la produse. */
  .partner-art { height: 132px; }
  .partner-body { padding: 16px; gap: 6px; }
  .partner-body h3 { font-size: 16px; }

  /* Lista de departamente se pliază: altfel cele ~20 de rânduri ocupă singure tot primul ecran,
     iar vizitatorul ajunge la produse abia după ce derulează pe lângă ele. */
  .cat-sidebar { width: 100%; max-height: none; overflow-y: visible; }
  .cat-sidebar-head { position: static; padding: 14px 16px; }
  .cat-sidebar.is-open .cat-sidebar-head .toggle-chev { transform: rotate(180deg); }
  .cat-sidebar-list { display: none; }
  .cat-sidebar.is-open .cat-sidebar-list { display: block; }
  .cat-sidebar a { padding: 12px 16px; }

  /* Filtrul de preț nu mai ocupă locul unui card în grilă, ci o bandă proprie peste toată
     lățimea, cu câmpurile și butonul pe un rând — altfel rămânea un card înalt și aproape gol. */
  /* Pe telefon filtrele stau deasupra produselor, pe toată lățimea. */
  /* ---------- Filtrele pe telefon și tabletă ----------
     Cardul iese din pagină; în locul lui apare un buton pe toată lățimea, deasupra
     produselor. La apăsare, cardul urcă de jos ca o foaie, peste un fundal întunecat. */
  .cat-with-filters { flex-direction: column; gap: 14px; }
  .cat-filters { width: 100%; }

  .filter-fab {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--accent); border-radius: 10px;
    color: var(--accent-dark); font-family: inherit; font-size: 14px; font-weight: 700;
  }

  .filter-card { display: none; }
  .filter-card.is-open {
    display: flex; position: fixed; inset: auto 0 0; z-index: 220;
    max-height: 80vh; overflow-y: auto;
    border: none; border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Mânerul de sus — semnul obișnuit că foaia se poate trage/închide. */
  .filter-card.is-open::before {
    content: ''; display: block; flex-shrink: 0;
    width: 44px; height: 4px; border-radius: 99px; background: var(--line);
    margin: 0 auto 6px;
  }
  .filter-card.is-open .filter-close { display: block; }

  .filter-backdrop {
    display: block; position: fixed; inset: 0; z-index: 210;
    background: rgba(15, 25, 30, .5);
  }
  .filter-backdrop[hidden] { display: none; }

  /* Cât foaia e deschisă, pagina de dedesubt nu mai derulează. */
  body.filters-open { overflow: hidden; }
  /* --- Banerul pe telefon și tabletă ------------------------------------
     Pe ecran îngust nu mai are unde să stea textul peste imagine fără să
     acopere produsul. Așa că le separăm pe verticală: textul sus, pe un fundal
     deschis, iar fotografia dedesubt, pe toată lățimea și complet vizibilă. */
  .home-hero {
    flex-direction: column; align-items: stretch;
    padding: 0; margin: 0; min-height: 0;
  }
  .home-hero .copy { max-width: none; gap: 12px; padding: 26px 18px 22px; }
  .home-hero h1 { font-size: 25px; line-height: 1.2; }
  .home-hero p { font-size: 14.5px; max-width: none; }
  .home-hero .cta-row { margin-top: 2px; }
  .hero-art { display: none; }

  /* Secțiunea nu mai desenează ea imaginea (background-size: 0 0), dar o
     păstrează în stil ca s-o poată prelua banda de mai jos, prin `inherit`.
     Astfel merge identic și pentru banerele urcate din panou, unde adresa
     pozei vine din inline-style, nu din acest fișier. */
  .home-hero-photo,
  .home-hero.has-photo {
    background-size: 0 0;
    background-color: #eaf6fb;
    background-color: oklch(0.96 0.018 222);
    min-height: 0;
  }
  .home-hero-photo::after,
  .home-hero.has-photo::after {
    content: ""; display: block; width: 100%;
    height: 46vw; min-height: 170px; max-height: 300px;
    background-image: inherit;
    background-size: cover; background-repeat: no-repeat;
    background-position: center;
  }
  /* Poza implicită e panoramică (2000x705): o ancorăm în dreapta, acolo unde
     se află efectiv filtrul, altfel decupajul ar arăta doar peretele. */
  .home-hero-photo::after { background-position: right center; }

  .hero-slide { padding: 0; }
  /* Pe telefon bannerul se schimbă cu degetul, deci săgețile doar ar acoperi textul. */
  .hero-arrow { display: none; }
  .hero-dots { left: 0; right: 0; bottom: 10px; justify-content: center; }
  .promo-row { grid-template-columns: 1fr; }
  .cat-circles { gap: 14px; justify-content: space-between; }
  .cat-circle { width: 30%; }
  .cat-circle .ring { width: 64px; height: 64px; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 36px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .product-page > .breadcrumb { padding-left: 0; padding-right: 0; }
  /* Pe mobil tab-urile se strâng și pot trece pe două rânduri. */
  .tab-nav { gap: 20px; }
  .tab-btn { font-size: 14px; }
  /* Controale mai ușor de atins cu degetul. */
  .copy-sku { width: 34px; height: 34px; }
  .key-specs-link, .map-link { padding: 5px 0; }
  .product-gallery { width: 100%; flex-direction: column-reverse; }
  .gallery-thumbs { flex-direction: row; width: 100%; max-height: none; overflow-x: auto; overflow-y: visible; }
  .gallery-main { width: 100%; height: auto; min-height: 260px; aspect-ratio: 1 / 1; }
  /* Pe mobil chip-urile stau unul sub altul, ca eticheta și starea stocului să încapă pe un rând. */
  .info-chips { flex-direction: column; }
  .info-chip { min-width: 0; }
  .order-row { flex-wrap: wrap; }
  .order-row .btn { flex-basis: 100%; order: 3; }
  .order-row .qty-stepper { order: 1; }
  .order-row .fav-btn-lg { order: 2; margin-left: auto; }
}

/* ===========================================================================
   Coșul / pagina de comandă (comanda.php)
   Aceeași grilă „flush" ca pe pagina produsului: conținutul începe de la
   marginea logo-ului. Două coloane — produsele + datele de contact în stânga,
   sumarul lipicios în dreapta, cu butonul de trimitere.
   =========================================================================== */
.checkout-page > .breadcrumb { padding-left: 0; padding-right: 0; }

.checkout-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 18px 0 24px;
}
.checkout-head h1 { font-size: 27px; }

/* Pașii comenzii: cifră în cerc + etichetă, cel curent accentuat. */
.checkout-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.checkout-steps li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
}
.checkout-steps li + li::before {
  content: ""; width: 18px; height: 1.5px; background: var(--line); margin-right: 10px;
}
.checkout-steps .num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px;
}
.checkout-steps .done .num,
.checkout-steps .active .num { background: var(--accent); color: #fff; }
.checkout-steps .active { color: var(--ink); }

.checkout-errors {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 18px; margin-bottom: 22px; border-radius: 10px;
  background: var(--warn-soft); color: var(--warn); font-size: 13.5px; line-height: 1.6;
}
.checkout-errors svg { flex-shrink: 0; margin-top: 1px; }

.checkout-layout { display: flex; align-items: flex-start; gap: 28px; padding-bottom: 56px; flex-wrap: wrap; }
.checkout-main { flex: 1 1 520px; min-width: 320px; display: flex; flex-direction: column; gap: 18px; }
.checkout-aside { width: 360px; flex-shrink: 0; position: sticky; top: 20px; }

.checkout-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.checkout-block .block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.checkout-block .block-head h2 { font-size: 16px; }
.checkout-block .block-head .count { font-size: 12.5px; color: var(--ink-soft); }

/* Rândurile din coș */
.cart-row { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: none; }
.cart-row .thumb {
  width: 64px; height: 64px; border-radius: 8px; background: var(--surface); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-row .thumb img { max-width: 80%; max-height: 80%; }
.cart-row .info { flex-grow: 1; min-width: 0; }
.cart-row .meta { font-size: 11px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .02em; }
.cart-row .name { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 2px 0 3px; }
.cart-row .name:hover { color: var(--accent-dark); }
.cart-row .unit { font-size: 12.5px; color: var(--ink-soft); }
.cart-row .line-total {
  width: 100px; text-align: right; flex-shrink: 0;
  font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 16px;
}
.cart-qty { height: 38px; }
.cart-qty button { width: 30px; }
.cart-qty input { width: 40px; font-size: 13.5px; -moz-appearance: textfield; appearance: textfield; }
.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-row .remove-form { margin: 0; flex-shrink: 0; }
.remove-btn {
  width: 34px; height: 34px; border-radius: 7px; border: none; background: none;
  color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .15s, background-color .15s;
}
.remove-btn:hover { color: #cc272e; background: rgba(204, 39, 46, 0.08); }
.remove-btn:hover { color: oklch(0.55 0.2 25); background: oklch(0.55 0.2 25 / 8%); }

.cart-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px; background: var(--surface);
}
.continue-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent-dark); }
.continue-link:hover { text-decoration: underline; }
.cart-actions .btn[hidden] { display: none; }

/* Formularul de contact */
.checkout-form { padding: 20px 22px 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.form-field .req { color: var(--warn); }
.checkout-form .field {
  width: 100%; height: 46px; padding: 0 14px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 8px;
  font-family: "Manrope"; font-size: 14px; color: var(--ink);
  transition: border-color .15s;
}
.checkout-form textarea.field { height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.checkout-form .field::placeholder { color: #8e9aa4; }
.checkout-form .field::placeholder { color: oklch(0.68 0.02 240); }
.checkout-form .field:focus { outline: none; border-color: var(--accent); }

/* Sumarul lipicios */
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.summary-card h3 { font-size: 16px; margin-bottom: 16px; }
.summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; color: var(--ink-soft); }
.summary-row strong { font-weight: 700; color: var(--ink); }
.summary-row strong.soft { font-weight: 600; font-size: 12.5px; color: var(--ink-soft); }
.summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 700;
}
.summary-total strong { font-family: "SemnTol", "Space Grotesk"; font-size: 23px; }
.summary-note { font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; }
.summary-submit { width: 100%; margin-top: 18px; }

.summary-points { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.summary-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.summary-points svg { flex-shrink: 0; margin-top: 1px; }

.summary-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.summary-help a { display: block; font-weight: 700; font-size: 14px; color: var(--ink); margin-top: 2px; }
.summary-help a:hover { color: var(--accent-dark); }

/* Coș gol */
.cart-empty {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 56px 32px; margin-bottom: 56px; text-align: center;
}
.cart-empty .icon {
  width: 74px; height: 74px; border-radius: 50%; background: var(--accent-soft);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.cart-empty h2 { font-size: 20px; margin-bottom: 8px; }
.cart-empty p { max-width: 420px; margin: 0 auto 22px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .checkout-aside { width: 100%; position: static; }
}

@media (max-width: 900px) {
  .checkout-page > .breadcrumb { padding-left: 0; padding-right: 0; }
  .checkout-head { padding: 14px 0 18px; }
  .checkout-head h1 { font-size: 23px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  /* Pe mobil rândul din coș se rearanjează pe două niveluri, ca să nu se înghesuie. */
  .cart-row { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .cart-row .info { flex-basis: calc(100% - 80px); }
  .cart-row .remove-form { order: 2; margin-left: auto; }
  .cart-row .cart-qty { order: 3; }
  .cart-row .line-total { order: 4; width: auto; margin-left: auto; }
  .cart-actions { padding: 14px 16px; }
  .checkout-block .block-head { padding: 14px 16px; }
  .checkout-form { padding: 18px 16px 20px; }
}

/* ===========================================================================
   Navigarea de telefon: buton hamburger, sertar cu categorii, bară fixă jos.
   Tot ce urmează e ascuns implicit și se activează doar sub 900px.
   =========================================================================== */
.burger, .mobile-drawer, .drawer-backdrop, .bottom-nav { display: none; }

@media (max-width: 900px) {

  /* --- Header compact: meniu, logo, iconițe pe un rând; căutarea dedesubt --- */
  .burger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: -8px; flex-shrink: 0;
    border: none; background: none; color: var(--ink); cursor: pointer; border-radius: 8px;
  }
  .burger:active { background: var(--surface); }
  /* Telefonul nu mai stă în header — e în bara de jos și în sertar. */
  .header-info { display: none; }

  /* --- Sertarul cu categorii --- */
  .drawer-backdrop {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90;
    background: rgba(25, 35, 42, 0.45);
    background: oklch(0.25 0.02 240 / 45%);
  }
  .drawer-backdrop[hidden] { display: none; }

  .mobile-drawer {
    display: flex; flex-direction: column; position: fixed; z-index: 91;
    top: 0; left: 0; bottom: 0; width: min(85vw, 360px);
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 0 40px -10px rgba(25, 35, 42, 0.35);
    box-shadow: 0 0 40px -10px oklch(0.25 0.02 240 / 35%);
    animation: drawer-in .22s ease-out;
  }
  .mobile-drawer[hidden] { display: none; }
  @keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }

  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--line);
    font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 16px;
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .drawer-close {
    width: 34px; height: 34px; margin-right: -6px; border: none; background: none;
    color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
  }

  .drawer-nav { flex-grow: 1; }
  .drawer-item { border-bottom: 1px solid var(--line); }
  .drawer-row { display: flex; align-items: stretch; }
  .drawer-row > a {
    flex-grow: 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0;
  }
  .drawer-row > a .icon { color: var(--accent-dark); flex-shrink: 0; display: flex; }
  /* În sertarul de pe telefon, poza categoriei se vede ca o plăcuță, ca în aplicații. */
  .drawer-row > a .cat-icon-img { width: 36px; height: 36px; border-radius: 8px; }
  .drawer-row > a { padding-top: 11px; padding-bottom: 11px; }
  .drawer-row > a .name { line-height: 1.3; }
  .drawer-item.is-active > .drawer-row > a { color: var(--accent-dark); }
  .drawer-expand {
    width: 48px; flex-shrink: 0; border: none; background: none;
    color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .drawer-expand svg { transition: transform .18s; }
  .drawer-expand[aria-expanded="true"] svg { transform: rotate(180deg); }

  .drawer-sub { background: var(--surface); padding: 4px 0 8px; }
  .drawer-sub[hidden] { display: none; }
  .drawer-sub a {
    display: block; padding: 10px 18px 10px 49px;
    font-size: 13.5px; color: var(--ink-soft);
  }
  .drawer-sub a:active { color: var(--accent-dark); }

  .drawer-foot {
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }
  .drawer-foot a { font-size: 13.5px; color: var(--ink); }
  .drawer-foot .drawer-phone {
    font-family: "SemnTol", "Space Grotesk"; font-weight: 700; font-size: 17px; color: var(--accent-dark);
  }
  .drawer-foot .drawer-hours { font-size: 12.5px; color: var(--ink-soft); margin-top: -8px; }

  /* Cât timp sertarul e deschis, pagina din spate nu se mai derulează. */
  body.drawer-open { overflow: hidden; }

  /* --- Bara fixă de jos --- */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: #fff; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav > a, .bottom-nav > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 4px 10px; border: none; background: none; cursor: pointer;
    font-family: "Manrope"; font-size: 11px; font-weight: 700;
    color: var(--ink-soft); text-decoration: none;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  .bottom-nav .is-active { color: var(--accent-dark); border-top-color: var(--accent); }
  .bottom-nav .nav-icon { position: relative; display: flex; }
  .bottom-nav .cart-badge { top: -5px; right: -7px; }

  /* Bara de jos acoperă ultimele rânduri, deci pagina primește loc sub ea. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { margin-bottom: 0; }

  /* Lista de departamente din conținut dispare — rolul ei îl preia sertarul. */
  .cat-sidebar { display: none; }
  /* La fel și bara „Catalog produse": pe telefon există hamburger-ul cu sertarul. */
  .catalog-bar { display: none; }
}

/* ===========================================================================
   Corecții pentru Safari / iPhone
   =========================================================================== */

/* iOS mărește singur pagina când atingi un câmp cu text sub 16px și nu revine
   la loc după — de departe cel mai supărător comportament pe iPhone. La 16px
   nu se mai întâmplă. */
@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="number"], input:not([type]), textarea, select { font-size: 16px; }
  .search input { font-size: 16px; }
  .qty-stepper input, .cart-qty input { font-size: 16px; }
  /* 16px: sub această valoare, iOS mărește singur pagina când intri în câmp. */
  .price-range input { font-size: 16px; }
}

/* Safari nu aplică stilurile proprii de buton dacă nu i se cere explicit, așa că
   butoanele apăreau cu colțuri și fundal gri de sistem. */
button, input[type="submit"], input[type="button"] { -webkit-appearance: none; appearance: none; }

/* Pe iOS, elementele derulabile capătă inerție și nu "trag" pagina din spate. */
.hcarousel, .gallery-thumbs, .mobile-drawer, .cat-sidebar, .mega-nav {
  -webkit-overflow-scrolling: touch;
}

/* Safari ține pozele lipite de baseline în containere flex dacă nu e block. */
.product-card .thumb img, .cart-row .thumb img, .gallery-main img, .gallery-thumb img { display: block; }

/* Iconițele încărcate din panoul de administrare (categorii și departamente). */
/* -------------------------------------------------------------------------
   Imaginile încărcate pentru categorii și departamente.
   Sunt poze, nu iconițe de linie, așa că se afișează ca plăcuțe pătrate,
   decupate pe centru (object-fit: cover) și mult mai mari decât desenele din
   cod — la 18px o poză nu s-ar înțelege. Categoriile fără imagine încărcată
   păstrează iconița desenată, la dimensiunea ei mică de dinainte.
   ------------------------------------------------------------------------- */
.cat-icon-img {
  display: block; flex-shrink: 0; object-fit: cover;
  width: 34px; height: 34px; border-radius: 8px; background: var(--surface);
}

/* Lista de departamente din bara laterală (desktop). */
.cat-sidebar .icon .cat-icon-img { width: 34px; height: 34px; }
.cat-sidebar a { padding-top: 7px; padding-bottom: 7px; }

/* Cardurile mari din „Toate categoriile” — acolo poza chiar are loc să se vadă. */
.cat-card .icon .cat-icon-img { width: 66px; height: 66px; border-radius: 12px; }
.cat-card:has(.cat-icon-img) { min-height: 168px; }