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

:root {
  --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;
}

h1, h2, h3, h4 {
  font-family: "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); }
.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);
}

.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; }

.breadcrumb { padding: 16px 48px 0; font-size: 13px; color: var(--ink-soft); }
.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; }

.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: "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 {
  width: 317px; flex-shrink: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 6px 0;
  display: flex; flex-direction: column;
}
.cat-sidebar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-family: "Space Grotesk"; font-weight: 700; letter-spacing: .01em; text-align: left;
  padding: 14px 18px 10px; color: var(--ink-soft); text-transform: uppercase; font-size: 11.5px;
  position: sticky; top: 0; background: #fff;
  border: none; border-radius: 14px 14px 0 0; cursor: default;
}
/* Săgeata de deschidere apare doar pe ecranele unde lista chiar se pliază. */
.cat-sidebar-head .toggle-chev { display: none; flex-shrink: 0; transition: transform .2s; }
.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; }
.subcat-card {
  display: inline-flex; align-items: center; gap: 24px; padding: 14px 14px 14px 18px;
  border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.subcat-card:hover { border-color: var(--accent); color: var(--accent-dark); }
.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(--surface);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.subcat-card:hover .go { background: var(--accent); color: #fff; }
/* Stare "activă" — categoria curentă, în rândul de subcategorii surori (vederea unei categorii). */
.subcat-card.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.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; }

/* 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; }
.cat-filters { width: 258px; flex-shrink: 0; position: sticky; top: 16px; }
.cat-products { flex-grow: 1; min-width: 0; }

/* Cu filtrele alături, grila are mai puțin loc — o coloană mai puțin la fiecare
   prag, ca să nu se strângă cardurile. Pragurile oglindesc exact pe cele ale
   .product-grid-season de mai jos. */
.cat-products .product-grid-season { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.price-filter { display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.price-filter-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.price-filter-row { display: flex; align-items: center; gap: 8px; }
.price-filter-row input {
  width: 0; flex-grow: 1; min-width: 0; height: 40px; border: 1.5px solid var(--line); border-radius: 7px;
  padding: 0 10px; font-family: Manrope; font-size: 13.5px; color: var(--ink); background: #fff;
}
.price-filter-row input:focus { outline: none; border-color: var(--accent); }
.price-filter-row input::-webkit-outer-spin-button,
.price-filter-row input::-webkit-inner-spin-button { margin: 0; }
.price-filter-dash { color: var(--ink-soft); flex-shrink: 0; }
/* Pe desktop wrapper-ul nu există vizual (display:contents) — câmpurile și butonul rămân copii
   direcți ai cardului, exact ca înainte. Pe mobil devine un rând propriu (vezi media query). */
.price-filter-bottom { display: contents; }
.price-filter-apply { width: 100%; margin-top: auto; }
.price-filter-reset { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.price-filter-reset:hover { color: var(--accent-dark); }

/* 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; }

.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; }
.hero-slide { flex: 0 0 100%; border-radius: 0; }

/* 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 {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px;
}
.promo-card .icon-circle {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.promo-card .title { font-weight: 700; font-size: 14px; }
.promo-card .subtitle { font-size: 12.5px; opacity: .75; margin-top: 2px; }
.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: "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) {
  .product-grid-season { grid-template-columns: repeat(4, 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); }
}

@media (max-width: 1150px) {
  .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: "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: "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: "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: "Space Grotesk"; font-size: 15px; color: var(--ink); }

.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)); }
  .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; }
  .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; cursor: pointer; font-size: 13px; padding: 15px 16px;
    color: var(--ink); text-transform: none; letter-spacing: 0;
  }
  .cat-sidebar-head .toggle-chev { display: block; color: var(--ink-soft); }
  .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. */
  .cat-with-filters { flex-direction: column; gap: 14px; }
  .cat-filters { width: 100%; position: static; }
  .cat-products .product-grid-season { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-filter { grid-column: 1 / -1; padding: 14px 16px; gap: 12px; }
  .price-filter-row { flex-grow: 1; }
  .price-filter-row input { min-width: 0; }
  .price-filter-apply { width: auto; margin-top: 0; flex-shrink: 0; padding: 0 22px; }
  .price-filter-bottom { display: flex; align-items: center; gap: 12px; }
  /* --- 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: "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: "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: "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: "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; }
}

/* ===========================================================================
   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; }
  .price-filter-row 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; }