/* =========================================================
   GRAM — style.css
   Un singur fișier CSS pentru tot site-ul.
   Mobile-first: regulile de bază sunt pentru telefon,
   iar blocurile @media (min-width: ...) adaugă reguli
   pentru ecrane mai mari.
   ========================================================= */


/* ---------- 1. Variabile (sistemul vizual aprobat) ---------- */

:root {
  /* Culori */
  --bg: #F4F2EE;          /* fundal pagină */
  --surface: #FFFFFF;     /* carduri, câmpuri */
  --ink: #1A1A17;         /* text principal, borduri tari */
  --ink-2: #3D3B37;       /* text descriere */
  --muted: #5C5A55;       /* text secundar, etichete */
  --line: #D9D5CD;        /* borduri fine */
  --line-strong: #8A867E; /* bordura câmpurilor */
  --placeholder: #E9E5DD; /* fundal sub poze */
  --accent: #C2410C;      /* DOAR butoane principale, link activ, bara de progres */
  --accent-dark: #9A3412; /* hover pe butonul principal */
  --accent-soft: #FBE3D3; /* etichete „Nou”, „Sub 100 g” */
  --accent-ink: #7C2D12;  /* textul pe --accent-soft */
  --ok: #166534;          /* „În stoc” */

  /* Fonturi */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Scara de spații: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Lățimea conținutului și marginea laterală */
  --max-width: 1280px;
  --gutter: 16px;

  /* Mișcare: durate și curbă (folosite și din JS, prin cssMs()) */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* ease-out, pentru intrări; ieșirile folosesc ease-in */

  /* Animațiile de intrare și aparițiile la scroll */
  --dur-reveal: 450ms;  /* apariție la scroll */
  --dur-hero: 700ms;    /* poza hero se „descoperă” */
  --ease-enter: cubic-bezier(0.2, 0.7, 0.2, 1);
  --enter-shift: 16px;  /* cât urcă un element când apare (8px pe telefon) */
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --enter-shift: 8px;
  }
}


/* ---------- 2. Reset și reguli de bază ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0; /* colțuri drepte peste tot */
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  /* Sublinierea puțin mai jos și mai subțire, ca să nu atingă
     virgulița de la „Ș” / „ț” (ex: „Șterge”) */
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Listele cu clasă (meniuri, grile) nu au buline */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* Elementele cu atributul hidden rămân ascunse,
   chiar dacă au display: flex/grid din altă regulă */
[hidden] {
  display: none !important;
}

/* Focus vizibil doar când navighezi cu tastatura */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Text ascuns vizual, dar citit de cititoarele de ecran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Linkul „Sari la conținut” apare doar la focus */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 2px solid var(--ink);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}


/* ---------- 3. Așezare (container, secțiuni) ---------- */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-7);
}

/* Capul de secțiune: linie groasă deasupra, titlu + link în dreapta */
.section-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  padding-top: calc(var(--space-3) + 2px);
}

/* Linia groasă de deasupra (pseudo-element, ca să poată fi animată la scroll) */
.section-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ink);
  transform-origin: left;
}

/* Două secțiuni una după alta: fără spațiu dublu între ele */
.section + .section {
  padding-top: 0;
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-8);
  }

  .section + .section {
    padding-top: 0;
  }
}


/* ---------- 4. Tipografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
}

/* Titlurile se împart în rânduri cât mai egale (fără un cuvânt singur
   pe ultimul rând). Pe lângă h1–h3: legendele din checkout și numele
   de produs scrise în <p> (sertar, sumarul comenzii). */
h1, h2, h3, h4,
legend,
.drawer-item-name,
.order-item-name,
.card-tech {
  text-wrap: balance;
}

/* Textul obișnuit: browserul evită un cuvânt singur pe ultimul rând.
   .choice = opțiunile din checkout (textul lor e în <span>, nu în <p>) */
p,
li,
.choice {
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Etichetă mică, UPPERCASE, în Mono (ex: „RUCSACURI”) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; /* 12px doar pentru etichete decorative; vezi mai jos excepțiile */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
}

/* Etichete UPPERCASE care conțin informație utilă: minim 13px
   (categoria + tipul turei pe produs, reducerea kitului, numărul de produse) */
.product-head > .eyebrow,
.kit-body > .eyebrow,
.category-card .eyebrow {
  font-size: 13px;
}

.text-muted {
  color: var(--muted);
}

/* Link text simplu, subliniat */
.text-link {
  /* zona de click de 44px înălțime; marginea negativă păstrează așezarea */
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  font-weight: 600;
  text-underline-offset: 5px;
  transition: color var(--dur-fast);
}

.text-link:hover {
  color: var(--accent);
}


/* ---------- 5. Butoane ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

/* Butonul principal: portocaliu, text alb */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Butonul secundar: doar contur */
.btn-secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Buton inactiv (ex: „Stoc epuizat”, „Adaugă kitul” până în Faza 4) */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--placeholder);
  border-color: var(--placeholder);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-block {
  width: 100%;
}

/* Buton doar cu iconiță (căutare, coș): minim 44×44px */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.icon-btn:hover {
  color: var(--accent);
}

.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.icon-sm {
  width: 18px;
  height: 18px;
}


/* ---------- 6. Etichete (badge) ---------- */

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-dark {
  background: var(--ink);
  color: var(--bg);
}


/* ---------- 7. Header ---------- */

/* Banda neagră de sus */
.demo-bar {
  padding: var(--space-2) var(--gutter);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.site-header-inner {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

/* Numărul de produse din coș, peste iconiță */
.cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Butonul „Meniu” (sub 1024px) și „Închide” din meniul de telefon */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-left: var(--space-2);
  padding: 0 var(--space-3);
  background: transparent;
  border: 2px solid var(--ink);
  font-weight: 600;
}

/* Telefon / tabletă: „☰ Meniu” mai compact, ca logo + lupă + coș + meniu să încapă la 375px */
.header-actions .menu-toggle {
  gap: 6px;
  padding: 0 10px;
  font-size: 14px;
}

/* Rândul de căutare deschis de lupă (sub 1024px) */
.search-bar {
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}

.search-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-bar-inner .input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
}

.search-bar-inner .btn {
  min-height: 48px;
  padding: 0 var(--space-4);
}

@media (min-width: 1024px) {
  .search-toggle,
  .search-bar {
    display: none !important; /* pe desktop căutarea e mereu în header */
  }
}

/* Meniul de desktop și căutarea vizibilă: ascunse sub 1024px */
.desktop-nav,
.header-search {
  display: none;
}

/* Header simplificat (checkout) */
.header-simple .header-main {
  justify-content: space-between;
}

/* Header-ul e reperul pentru panoul „Catalog” (care se deschide sub el) */
.site-header-inner {
  position: relative;
}

@media (min-width: 1024px) {
  .header-actions .menu-toggle {
    display: none;
  }

  .desktop-nav {
    display: block;
    margin-left: var(--space-6);
  }

  .desktop-nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* „Catalog ▾”, „Kit-uri și oferte”, „Ghid de echipament” */
  .nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }

  .nav-item:hover {
    border-bottom-color: var(--ink);
  }

  /* Pagina curentă: portocaliu + linie de 3px */
  .nav-item[aria-current="page"],
  .nav-item.is-current {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  .nav-item .badge {
    font-size: 12px;
  }

  /* Săgeata ▾ se rotește când panoul e deschis */
  .chevron {
    transition: transform 150ms;
  }

  .catalog-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }

  /* Căutarea vizibilă (~220px), cu lupa în dreapta câmpului */
  .header-search {
    display: block;
    position: relative;
    width: 220px;
    margin-left: auto;
  }

  .header-search .input {
    min-height: 44px;
    padding-right: 44px;
    font-size: 15px;
  }

  .header-search-submit {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
  }

  .header-search + .header-actions {
    margin-left: var(--space-2);
  }
}


/* ----- Panoul „Catalog” (desktop) ----- */

.catalog-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.catalog-panel-inner {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.catalog-panel-main {
  padding: var(--space-5) var(--space-6) var(--space-5) 0;
}

.panel-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}

.panel-cat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  text-decoration: none;
  transition: background-color var(--dur-fast);
}

.panel-cat:hover {
  background: var(--bg);
}

.panel-cat img {
  width: 48px;
  height: 60px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--placeholder);
}

.panel-cat-name {
  display: block;
  font-weight: 600;
}

.panel-cat-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.panel-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  width: 100%;
  font-weight: 600;
  text-decoration: none;
}

.panel-all:hover {
  color: var(--accent);
}

/* Dreapta: „Scurtături”, pe fundalul paginii */
.catalog-panel-side {
  padding: var(--space-5);
  background: var(--bg);
}

.panel-shortcuts {
  margin-top: var(--space-3);
}

.panel-shortcuts a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.panel-shortcuts a:hover {
  color: var(--accent);
}

.panel-count {
  margin-left: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}


/* ----- Meniul de telefon / tabletă (<dialog> pe tot ecranul) ----- */

.mobile-menu {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0 0 var(--space-7);
  background: var(--bg);
  border: 0;
  color: var(--ink);
  overflow-y: auto;
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}

.mobile-menu-body {
  padding-top: var(--space-5);
}

.mobile-search {
  display: flex;
  gap: var(--space-2);
}

.mobile-search .input {
  min-height: 52px;
}

.mobile-menu-title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
}

.mobile-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  text-decoration: none;
}

.mobile-cat-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.mobile-menu a[aria-current="page"] {
  color: var(--accent);
}

.mobile-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.mobile-main-links {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.mobile-main-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.mobile-meta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  padding-top: var(--space-2);
  font-size: 14px;
}

.mobile-meta-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--ink-2);
}


/* ---------- 8. Footer ---------- */

.site-footer-inner {
  margin-top: var(--space-7);
  padding-block: var(--space-7) var(--space-5);
  background: var(--ink);
  color: var(--bg);
}

.site-footer-inner :focus-visible {
  outline-color: var(--bg);
}

/* Cele 4 coloane: una sub alta pe telefon, 2×2 pe tabletă, 4 pe desktop */
.footer-grid {
  display: grid;
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.footer-slogan {
  color: var(--bg);
}

/* Butonul „Vezi catalogul”: contur alb, pe fundal închis */
.btn-outline-light {
  min-height: 44px;
  margin-top: var(--space-3); /* + gap 12px = ~24px sub slogan */
  padding: 0 var(--space-5);
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
}

.btn-outline-light:hover {
  background: var(--bg);
  color: var(--ink);
}

.footer-title {
  margin-bottom: var(--space-3);
  color: rgba(244, 242, 238, 0.65);
}

.footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* spațiul dinaintea săgeții „↗” */
  min-height: 36px;
  text-decoration: none;
}

.footer-list a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Lista „Magazin” pe 2 coloane, ca să nu fie lungă */
.footer-list-columns {
  columns: 2;
  column-gap: var(--space-5);
}

.footer-list-columns li {
  break-inside: avoid;
}

.footer-list-extra {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(244, 242, 238, 0.15);
}

.footer-text {
  color: rgba(244, 242, 238, 0.75);
}

.footer-text strong {
  color: var(--bg);
  font-weight: 600;
}

.footer-text + .footer-text {
  margin-top: var(--space-2);
}

.footer-text + .footer-list,
.footer-list + .footer-text {
  margin-top: var(--space-2);
}

.footer-tech {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Rândul de jos */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(244, 242, 238, 0.15);
  color: rgba(244, 242, 238, 0.65);
  font-family: var(--font-mono);
  font-size: 13px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--bg);
  text-decoration: none;
}

.back-to-top:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px var(--space-6);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}


/* ---------- 9. Cardul de produs ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}


/* Cutia pozei: păstrează formatul 4:5 chiar înainte să se încarce poza */
.card-media {
  position: relative;
  overflow: hidden; /* poza crește la hover doar în interiorul cardului */
  background: var(--placeholder);
}

.card-media img,
.product-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--placeholder);
}

.card-media .badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

/* Produs care nu e în stoc: poza estompată */
.is-sold-out .card-media img {
  opacity: 0.5;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.card-title {
  font-size: 1rem;
}

.card-tech {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.card-price {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .card-body {
    padding: var(--space-4);
  }

  .card-title {
    font-size: 1.0625rem;
  }

}

/* Un singur rând de 4 produse („Recomandate”, „Poate te interesează”):
   de la 768px stau toate 4 pe un rând, ca să nu rămână unul singur dedesubt */
@media (min-width: 768px) {
  .product-grid.row-of-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}


/* ---------- 10. Acasă: hero ---------- */

.hero {
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: grid;
}

.hero-media {
  overflow: hidden; /* poza hero „crește” ușor la intrare, fără să iasă din cadru */
  background: var(--placeholder);
}

.hero-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 70% center; /* păstrează rucsacurile în cadru */
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-7);
}

.hero-lead {
  max-width: 34em;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (min-width: 900px) {
  /* Pe desktop: textul în stânga, poza în dreapta, maxim ~60vh */
  .hero-inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-7);
    height: min(60vh, 600px);
    min-height: 440px;
  }

  .hero-text {
    padding-block: var(--space-7);
  }

  .hero-media img {
    aspect-ratio: auto;
  }
}


/* ---------- 11. Acasă: categorii ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.category-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}

.category-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}

.category-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--placeholder);
}

.category-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.category-card h3 {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 1100px) {
  .category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* ---------- 12. Cardul de kit ---------- */

.kit-grid {
  display: grid;
  gap: var(--space-4);
}

.kit-card {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Mozaic cu pozele produselor din kit: pătrat, 2 coloane × 2 rânduri */
.kit-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1px;
  align-self: start;
  aspect-ratio: 1 / 1;
  background: var(--line);
}

.kit-mosaic img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: var(--placeholder);
}

/* Kit cu 3 produse: prima poză ocupă ambele rânduri în stânga,
   celelalte două stau una sub alta în dreapta */
.kit-mosaic-3 img:first-child {
  grid-row: 1 / span 2;
}

.kit-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.kit-body h3 {
  font-size: 1.375rem;
}

.kit-short {
  color: var(--ink-2);
}

/* Lista produselor din kit, ca o fișă tehnică */
.kit-items {
  font-family: var(--font-mono);
  font-size: 13px;
}

.kit-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px dotted var(--line-strong);
}

.kit-items li:first-child {
  border-top: 1px dotted var(--line-strong);
}

.kit-items .kit-item-weight {
  color: var(--muted);
  white-space: nowrap;
}

.kit-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.kit-weight {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.kit-weight strong {
  display: block;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
}

.kit-price {
  font-size: 1.5rem;
  line-height: 1.1;
  text-align: right;
}

/* ----- Prețul redus (kit-uri): folosit peste tot unde apare o reducere -----
   <span class="price-pair">
     <span class="price--sale">… preț nou</span>
     <s class="price-old">… preț vechi</s>
   </span>
   Mărimea o dă containerul; prețul vechi e ~0,8 din prețul nou. */
.price-pair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 6px;
}

.price--sale {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.price-old {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.8em;
  font-weight: 400;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

/* În coloane înguste (cardul de kit, coș, sumarul comenzii): prețul vechi chiar sub cel nou */
.kit-price .price-pair,
.cart-row-total .price-pair,
.order-item-price .price-pair,
.drawer-item-price .price-pair {
  flex-direction: column;
  align-items: flex-end;
}

.drawer-item-price .price-pair {
  align-items: flex-start;
}

.kit-note {
  font-size: 13px;
  color: var(--muted);
}

@media (min-width: 768px) {
  .kit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .kit-body {
    padding: var(--space-5);
  }
}

@media (min-width: 1100px) {
  /* Pe ecran mare: mozaicul în stânga, textul în dreapta */
  .kit-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mozaicul se întinde cât tot cardul (fără spațiu alb sub poze) */
  .kit-mosaic {
    align-self: stretch;
    height: auto;
    min-height: 100%;
    aspect-ratio: auto;
  }
}


/* ---------- 13. Acasă: banda cu informații ---------- */

.info-band {
  display: grid;
  border-block: 1px solid var(--ink);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.info-item + .info-item {
  border-top: 1px solid var(--line);
}

.info-item .icon {
  margin-top: 2px;
}

.info-item strong {
  display: block;
  font-weight: 600;
}

.info-item p {
  font-size: 14px;
  color: var(--muted);
}

@media (min-width: 768px) {
  .info-band {
    grid-template-columns: repeat(3, 1fr);
  }

  .info-item {
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
  }

  .info-item + .info-item {
    padding-left: var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}


/* ---------- 14. Câmpuri de formular (catalog, checkout) ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field-label {
  font-size: 14px;
  font-weight: 600;
}

.input,
.select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 16px; /* 16px: pe iPhone nu mai face zoom la focus */
  transition: border-color var(--dur-fast);
}

.input:hover,
.select:hover {
  border-color: var(--ink);
}

/* Săgeata de la <select>, desenată ca SVG */
.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A17' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* Bifă cu text: toată zona e clicabilă, minim 44px înălțime */
.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-weight: 500;
  cursor: pointer;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}


/* ---------- 15. Capul de pagină + breadcrumb ---------- */

.page-head {
  padding-block: var(--space-5);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 14px;
  color: var(--muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--line-strong);
}

.breadcrumb a {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--muted);
  text-underline-offset: 5px;
  transition: color var(--dur-fast);
}

.breadcrumb a:hover {
  color: var(--ink);
}

.breadcrumb [aria-current="page"] {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--ink);
}

.page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

.page-count {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
}


/* ---------- 16. Catalog: bara de filtre ---------- */

.catalog-toolbar {
  margin-bottom: var(--space-4);
}

.filters-toggle {
  width: 100%;
}

/* Pe mobil: panou ascuns până apeși „Filtre” */
.filters {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
}

.filters.is-open {
  display: flex;
}

/* Mesajul „Niciun produs” (folosit în Faza 4) */
.empty-state {
  padding: var(--space-7) var(--space-4);
  border: 2px dotted var(--line-strong);
  color: var(--muted);
  text-align: center;
}

@media (min-width: 768px) {
  .catalog-toolbar {
    display: none;
  }

  /* De la 768px: filtrele stau pe un rând, mereu vizibile */
  .filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-4) 0;
    background: transparent;
    border: 0;
    border-block: 1px solid var(--line);
  }

  .filters .field {
    width: 190px;
  }

  .filters .field-sort {
    margin-left: auto;
  }
}


/* ---------- 17. Pagina de produs ---------- */

.product-layout {
  display: grid;
  gap: var(--space-5);
}

/* Galeria */
.gallery-main {
  background: var(--placeholder);
  border: 1px solid var(--line);
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.thumb {
  width: 72px;
  padding: 0;
  background: var(--placeholder);
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast);
}

.thumb:hover {
  border-color: var(--ink);
}

.thumb[aria-pressed="true"] {
  border-color: var(--ink);
  outline: 1px solid var(--ink); /* a doua linie = bordură de 2px, fără să miște poza */
}

.thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Detaliile: sus (categorie, titlu, descriere, preț) și restul (variante, buton...) */
.product-head,
.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-title {
  margin-top: calc(var(--space-2) * -1);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.product-description {
  color: var(--ink-2);
}

/* Caseta preț + greutate */
.price-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--ink);
}

.price-box > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.price-box > div + div {
  border-left: 1px solid var(--line);
}

.price-box-price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.price-box-weight {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
}

/* „În stoc” / „Stoc epuizat” */
.stock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
}

.stock-dot {
  width: 8px;
  height: 8px;
  background: currentColor;
}

.in-stock {
  color: var(--ok);
}

.out-of-stock {
  color: var(--muted);
}

/* Selectoarele de variantă și culoare */
.option-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option-label {
  font-size: 14px;
  color: var(--muted);
}

.option-label strong {
  color: var(--ink);
  font-weight: 600;
}

.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.option-btn {
  min-width: 64px;
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}

.option-btn:hover {
  border-color: var(--ink);
}

.option-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.swatch {
  width: 44px;
  height: 44px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast);
}

.swatch span {
  display: block;
  width: 100%;
  height: 100%;
}

.swatch:hover {
  border-color: var(--ink);
}

.swatch[aria-pressed="true"] {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -2px;
}

/* Cantitatea + butonul „Adaugă în coș”.
   Pe telefon: unul sub altul; de la 480px: pe același rând */
.buy-row {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.buy-row .field {
  justify-self: start;
}

@media (min-width: 480px) {
  .buy-row {
    grid-template-columns: auto 1fr;
  }
}

.qty {
  display: flex;
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.qty-btn {
  width: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.qty-btn:disabled {
  color: var(--line-strong);
  cursor: not-allowed;
}

.qty-input {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Ascundem săgețile implicite ale câmpului numeric */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Caseta cu livrare, retur și kit */
.info-box {
  background: var(--surface);
  border: 1px solid var(--line);
}

.info-box li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.info-box li + li {
  border-top: 1px solid var(--line);
}

.info-box strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.info-box p {
  font-size: 14px;
  color: var(--muted);
}

.info-box a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 5px;
}

/* Fișa tehnică + recenzii */
.product-details {
  display: grid;
  gap: var(--space-7);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 14px;
}

.spec-table tr {
  border-bottom: 1px dotted var(--line-strong);
}

.spec-table tr:first-child {
  border-top: 1px dotted var(--line-strong);
}

.spec-table th {
  width: 40%;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  color: var(--muted);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.spec-table td {
  padding: var(--space-3) 0;
}

/* Produs inexistent */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 40em;
  padding-block: var(--space-8);
}

@media (min-width: 900px) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "gallery head"
      "gallery info";
    gap: var(--space-4) var(--space-7);
    align-items: start;
  }

  .gallery {
    grid-area: gallery;
  }

  .product-head {
    grid-area: head;
  }

  /* Restul detaliilor rămân vizibile cât derulezi pe lângă poză */
  .product-info {
    grid-area: info;
    position: sticky;
    top: var(--space-5);
  }

  .product-details {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}


/* ---------- 18. Elemente comune: buton-text, bară de progres, sumar ---------- */

/* Buton care arată ca un link (ex: „Șterge”) */
.text-btn {
  min-height: 44px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none; /* sublinierea apare doar la hover / focus */
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--dur-fast);
}

.text-btn:hover,
.text-btn:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

/* Bara de progres (livrare gratuită) */
.progress {
  height: 8px;
  margin-top: var(--space-2);
  background: var(--placeholder);
}

.progress-fill {
  height: 100%;
  background: var(--accent);
}

/* Lista Subtotal / Livrare / Total */
.summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.summary-list dt {
  color: var(--muted);
}

.summary-list dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.summary-list .summary-total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}

.summary-total dt {
  color: var(--ink);
  font-weight: 600;
}

.summary-total dd {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Casetă albă cu bordură fină (coș, checkout) */
.box {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
}

@media (min-width: 768px) {
  .box {
    padding: var(--space-5);
  }
}


/* ---------- 19. Pagina Coș ---------- */

.cart-layout {
  display: grid;
  gap: var(--space-5);
}

.cart-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* Rândurile din coș */
.cart-items {
  border-top: 2px solid var(--ink);
}

.cart-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.cart-row-img {
  grid-row: span 2;
  align-self: start;
  background: var(--placeholder);
}

.cart-row-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.cart-row-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cart-row-name {
  font-size: 1rem;
}

.cart-row-name a {
  /* zona de click de ~44px înălțime, fără să mute textul */
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
  text-decoration: none;
}

.cart-row-name a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.cart-row-options {
  font-size: 14px;
  color: var(--ink-2);
}

.cart-row-weight {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.cart-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cart-row-total {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Cantitatea mai mică din coș */
.qty-small {
  height: 44px;
}

.qty-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  font-family: var(--font-mono);
}

/* Livrare gratuită */
.cart-shipping p {
  font-size: 15px;
}

/* Caseta „Greutatea echipamentului” */
.weight-total {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.weight-bar {
  display: flex;
  gap: 2px;
  height: 16px;
  margin-top: var(--space-4);
}

.weight-segment {
  height: 100%;
  min-width: 4px; /* un produs foarte ușor rămâne vizibil */
}

/* Nuanțele segmentelor (fără portocaliu: e rezervat pentru acțiuni) */
.seg-0 { background: var(--ink); }
.seg-1 { background: var(--muted); }
.seg-2 { background: var(--line-strong); }
.seg-3 { background: var(--ink-2); }

.weight-legend {
  margin-top: var(--space-4);
  font-size: 14px;
}

.weight-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px dotted var(--line-strong);
}

.legend-swatch {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.legend-weight {
  margin-left: auto;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Kitul recomandat */
.kit-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kit-suggestion-title {
  font-size: 1.375rem;
}

.kit-suggestion-text {
  color: var(--ink-2);
}

/* Sumarul din dreapta */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-summary h2 {
  font-size: 1.375rem;
}

.cart-summary .text-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Coșul gol (folosit în Faza 4) */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  border: 2px dotted var(--line-strong);
}

@media (min-width: 600px) {
  .cart-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  /* Desktop: produsele în stânga, sumarul în dreapta (lipit la derulare) */
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-7);
    align-items: start;
  }

  .cart-summary {
    position: sticky;
    top: var(--space-5);
  }
}


/* ---------- 20. Pagina Checkout ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  text-underline-offset: 5px;
}

.back-link:hover {
  color: var(--accent);
}

/* Mesajul „comandă de test” */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-left-width: 4px;
  font-weight: 500;
}

.notice .icon {
  margin-top: 1px;
}

.checkout-layout {
  display: grid;
  gap: var(--space-5);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 600px;
}

/* Fiecare pas: linie groasă deasupra, titlu cu număr */
.checkout-step {
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}

.checkout-step fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-step legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.field-hint {
  font-size: 13px;
  color: var(--muted);
}

/* Câmp dezactivat (cardul, în demo) */
.input:disabled {
  background: var(--placeholder);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Opțiuni de tip „card” (metoda de livrare / plată) */
.choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice-group-label {
  font-size: 14px;
  font-weight: 600;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color var(--dur-fast);
}

.choice:hover {
  border-color: var(--ink);
}

.choice:has(input:checked) {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -2px;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.choice strong {
  display: block;
  font-weight: 600;
}

.choice span span {
  font-size: 14px;
  color: var(--muted);
}

.choice.is-disabled {
  background: var(--placeholder);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.choice.is-disabled input {
  cursor: not-allowed;
}

.card-fields {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
}

.card-fields .field-hint {
  margin-bottom: var(--space-3);
  color: var(--ink-2);
  font-weight: 500;
}

/* Butonul final */
.place-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
}

.place-order p {
  font-size: 14px;
  color: var(--muted);
}

/* Sumarul comenzii */
.order-summary h2 {
  margin-bottom: var(--space-4);
  font-size: 1.375rem;
}

.order-items li + li {
  border-top: 1px solid var(--line);
}

.order-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-3);
}

.order-item img {
  width: 56px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--placeholder);
}

.order-item-name {
  font-weight: 600;
  font-size: 15px;
}

.order-item-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.order-item-price {
  font-weight: 500;
  white-space: nowrap;
}

.order-weight {
  display: flex;
  justify-content: space-between;
  margin-block: var(--space-2);
  padding-block: var(--space-3);
  border-block: 1px dotted var(--line-strong);
  font-family: var(--font-mono);
  font-size: 14px;
}

.order-weight span:first-child {
  color: var(--muted);
}

/* Pe mobil: sumar pliabil (<details>) deasupra formularului */
.summary-mobile {
  background: var(--surface);
  border: 1px solid var(--line);
}

.summary-mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.summary-mobile summary::-webkit-details-marker {
  display: none;
}

/* Semnul + / − de la capătul rândului */
.summary-mobile summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
}

.summary-mobile[open] summary::after {
  content: "−";
}

.summary-mobile-total {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 800;
}

.summary-mobile-body {
  padding: 0 var(--space-4) var(--space-4);
}

.summary-desktop {
  display: none;
}

@media (min-width: 900px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-8);
    align-items: start;
  }

  .summary-mobile {
    display: none;
  }

  .summary-desktop {
    display: block;
    position: sticky;
    top: var(--space-5);
  }
}


/* ---------- 21. Confirmare și 404 ---------- */

.message-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 44rem;
  padding-block: var(--space-7) var(--space-8);
}

.message-page .lead {
  font-size: 1.0625rem;
  color: var(--ink-2);
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Text care nu se rupe pe două rânduri (ex: „#DEMO-0001”) */
.nowrap {
  white-space: nowrap;
}

/* „Într-un magazin real...” — pași numerotați */
.next-steps {
  width: 100%;
  margin-top: var(--space-2);
  counter-reset: step;
}

.next-steps h2 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
}

.next-steps li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px dotted var(--line-strong);
  counter-increment: step;
}

.next-steps li:first-child {
  border-top: 1px dotted var(--line-strong);
}

.next-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 2px;
}


/* ---------- 22. Catalog: căutare și „Niciun produs” ---------- */

/* „Rezultate pentru „titan” · Șterge căutarea” (catalog) */
.catalog-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin-top: var(--space-2);
  color: var(--ink-2);
}

.empty-state .btn {
  margin-top: var(--space-4);
}


/* ---------- 23. Sertarul „Adăugat în coș” ---------- */

/* <dialog> lipit de marginea din dreapta, pe toată înălțimea */
.drawer {
  width: min(420px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  background: var(--bg);
  border: 0;
  border-left: 1px solid var(--ink);
  color: var(--ink);
}

/* Fundalul din spatele sertarului */
.drawer::backdrop {
  background: rgba(26, 26, 23, 0.5);
}

/* Cât timp sertarul e deschis, pagina din spate nu se derulează */
body:has(dialog[open]) {
  overflow: hidden;
}

.drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.drawer-head h2 {
  font-size: 1.375rem;
}

.drawer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-y: auto;
}

.drawer-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.drawer-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.drawer-item img {
  width: 80px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--placeholder);
}

.drawer-item-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.drawer-item-meta {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.drawer-item-price {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.drawer-note {
  font-size: 14px;
  color: var(--ink-2);
}

.drawer-actions {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--line);
}


/* ---------- 24. Coș: rândul de kit ---------- */

.cart-kit-items {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.cart-kit-items li::before {
  content: "— ";
}

/* Prețul întreg tăiat, sub prețul kitului */

.kit-suggestion-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ---------- 25. Checkout: erori și confirmare ---------- */

/* Mesajul de eroare de sub câmp. Folosim --accent-dark (ruginiu închis),
   din paleta aprobată, cu un „!” în față ca eroarea să nu depindă doar de culoare. */
.field-error {
  display: flex;
  gap: var(--space-2);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 500;
}

.field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--accent-dark);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.input[aria-invalid="true"] {
  border-color: var(--accent-dark);
  outline: 1px solid var(--accent-dark);
  outline-offset: -2px;
}

.input[aria-invalid="true"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Câmp scurt (codul poștal) */
.input-short {
  max-width: 200px;
}

.form-status:empty {
  display: none;
}

.place-order .form-status {
  color: var(--accent-dark);
  font-weight: 600;
}

/* Rezumatul de pe pagina de confirmare */
.order-details {
  width: 100%;
  margin-top: var(--space-2);
}

.order-details h2 {
  margin-bottom: var(--space-3);
  font-size: 1.125rem;
}

.order-meta {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.order-meta dd {
  overflow-wrap: anywhere; /* adrese de e-mail lungi */
}


/* ---------- 26. Corecturi: banda de sus, notă culoare, credite ---------- */

/* Banda de sus: textul scurt doar sub 480px */
.demo-short {
  display: none;
}

@media (max-width: 479px) {
  .demo-long {
    display: none;
  }

  .demo-short {
    display: inline;
  }
}

/* „Poza arată un singur model de culoare.” */
.option-note {
  font-size: 13px;
  color: var(--muted);
}

/* Pagina de credite */
.credits-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 44rem;
  margin-bottom: var(--space-5);
}

.credits-intro a {
  font-weight: 600;
}

/* ---------- 27. Bara fixă „Adaugă în coș” (pagina de produs, telefon) ---------- */

.buy-bar {
  display: none; /* pe ecrane mari nu există */
}

@media (max-width: 767px) {
  /* Spațiu jos, ca bara să nu acopere sfârșitul paginii */
  body[data-page="product"] {
    padding-bottom: 84px;
  }

  .buy-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
    background: var(--surface);
    border-top: 1px solid var(--line);
    /* ascunsă sub marginea ecranului până apare */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 200ms, visibility 200ms;
  }

  .buy-bar.is-visible {
    transform: none;
    visibility: visible;
  }

  .buy-bar-image {
    width: 40px;
    height: 50px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--placeholder);
  }

  .buy-bar-price {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .buy-bar-price .eyebrow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .buy-bar-amount {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .buy-bar .btn {
    flex-shrink: 0;
  }
}


/* ---------- 28. Mini-mozaic pentru kit (coș, sertar, checkout) ---------- */
/* Stă la final ca să câștige în fața regulilor „.cart-row-img img” etc. */

.thumb-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  aspect-ratio: 4 / 5;
  background: var(--line);
}

.thumb-mosaic > img,
.thumb-mosaic > span {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  background: var(--placeholder);
}

.drawer-item .thumb-mosaic {
  width: 80px;
}

.order-item .thumb-mosaic {
  width: 56px;
}


/* ---------- 29. Pagina „Ghid de echipament” ---------- */

.guide-intro {
  max-width: 44rem;
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: 1.0625rem;
}

/* Tab-urile */
.guide-tabs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  border-bottom: 2px solid var(--ink);
}

.guide-tab {
  min-height: 48px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.guide-tab:hover {
  color: var(--ink);
}

.guide-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* Tabelul-checklist */
.guide-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
}

.guide-table th,
.guide-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.guide-table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.guide-check {
  width: 44px;
}

.guide-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.guide-what {
  font-weight: 600;
  white-space: nowrap; /* „Prim ajutor” rămâne pe un rând */
}

.guide-table thead th {
  white-space: nowrap;
}

.guide-product {
  text-wrap: balance;
}

.guide-why {
  text-wrap: pretty;
}

.guide-what label {
  cursor: pointer;
}

.guide-why {
  color: var(--ink-2);
  font-size: 15px;
}

.guide-product a {
  font-weight: 500;
}

.guide-product .badge {
  margin-left: var(--space-2);
}

.guide-table .guide-weight {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}

/* Rândul debifat: estompat */
.guide-table tr:has(input:not(:checked)) td:not(.guide-check),
.guide-table tr:has(input:not(:checked)) th {
  opacity: 0.55;
}

/* Totalul + butonul */
.guide-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
}

/* Eticheta sus, cifra + „N din M bifate” dedesubt (grilă: nu se lățește inutil) */
.guide-total {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.guide-total .eyebrow {
  grid-column: 1 / -1;
}

.guide-total strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.guide-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.guide-status {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--accent-dark);
}

.guide-status:empty {
  display: none;
}

/* Sfaturi de siguranță + linkul spre kit */
.guide-safety {
  margin-top: var(--space-7);
  max-width: 44rem;
}

.guide-safety h2 {
  margin-bottom: var(--space-3);
  font-size: 1.375rem;
}

/* ul.… ca să câștige în fața regulii ul[class] (care scoate bulinele) */
ul.guide-safety-list {
  padding-left: 1.25em;
  list-style: square;
}

.guide-safety-list li + li {
  margin-top: var(--space-2);
}

.guide-kit-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-6) var(--space-7);
}

/* De la 768px: tabelul mai aerisit (pe telefon rămân „fișele” de mai jos) */
@media (min-width: 768px) {
  .guide-table th,
  .guide-table td {
    padding: 18px 16px;
    vertical-align: middle;
  }

  /* Prima coloană (bifa) */
  .guide-table th:first-child,
  .guide-table td:first-child {
    width: 62px; /* 24px + bifa 22px + 16px */
    padding-left: 24px;
  }

  /* Ultima coloană (Greutate) */
  .guide-table th:last-child,
  .guide-table td:last-child {
    width: 120px;
    padding-right: 24px;
    white-space: nowrap;
    text-align: right;
  }

  /* „De ce”: culoarea pe celulă; lățimea maximă pe textul din ea
     (browserele ignoră max-width pus direct pe o celulă de tabel) */
  .guide-why {
    color: var(--ink-2);
  }

  .guide-why-text {
    display: block;
    max-width: 52ch;
  }

  /* „Greutate totală”: aliniat cu tabelul (24px lateral) */
  .guide-summary {
    padding-inline: 24px;
  }
}

/* Pe telefon: fiecare rând din tabel devine o „fișă” */
@media (max-width: 767px) {
  .guide-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .guide-table tr {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "check what weight"
      "check why why"
      "check product product";
    gap: var(--space-1) 0;
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-bottom: 1px solid var(--line);
  }

  .guide-table th,
  .guide-table td {
    padding: 0;
    border: 0;
  }

  .guide-check { grid-area: check; display: flex; justify-content: center; padding-top: 2px; }
  .guide-what { grid-area: what; }
  .guide-table .guide-weight { grid-area: weight; }
  .guide-why { grid-area: why; }
  .guide-product { grid-area: product; }
}


/* ---------- 30. UX telefon: Acasă și pagina de produs ---------- */

/* Rândul „4 produse · 1,22 kg” există doar pentru cardul compact de kit (telefon) */
.kit-meta {
  display: none;
}

@media (max-width: 767px) {
  /* Hero mai scund pe telefon (titlul și textele rămân la fel) */
  .hero-text {
    gap: var(--space-3);
    padding-block: var(--space-4) var(--space-5);
  }

  .hero-media img {
    aspect-ratio: 21 / 9;
  }

  .hero-actions .btn {
    padding: 0 var(--space-4);
  }

  /* Secțiuni mai apropiate */
  .section {
    padding-block: var(--space-5);
  }

  .section-head {
    margin-bottom: var(--space-4);
  }

  /* Categoriile: un rând care se glisează lateral, până la marginea ecranului */
  .category-grid {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none; /* fără bară de derulare vizibilă */
  }

  .category-grid::-webkit-scrollbar {
    display: none;
  }

  .category-card {
    flex: 0 0 120px;
    scroll-snap-align: start;
  }

  .category-card-body {
    padding: var(--space-2) 10px var(--space-3);
  }

  .category-card h3 {
    font-size: 15px;
  }

  /* „Recomandate”: poze pătrate pe telefon, ca prețul să apară mai sus */
  .row-of-4 .card-media img {
    aspect-ratio: 1 / 1;
  }

  /* Kit-uri compacte: mozaic mic în stânga, esențialul în dreapta */
  .kit-card {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
  }

  .kit-mosaic {
    width: 96px;
    margin: var(--space-3) 0 var(--space-3) var(--space-3);
  }

  .kit-body {
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .kit-body h3 {
    font-size: 1.0625rem;
  }

  .kit-short,
  .kit-items,
  .kit-weight {
    display: none;
  }

  .kit-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
  }

  .kit-totals {
    margin-top: var(--space-1);
    padding-top: 0;
  }

  .kit-price {
    font-size: 1.25rem;
    text-align: left;
  }

  /* Cardul compact de pe telefon are loc: prețul vechi stă lângă cel nou */
  .kit-price .price-pair {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
  }

  .kit-body .btn {
    min-height: 44px;
    margin-top: var(--space-2);
  }
}


/* Pagina de produs pe telefon: categoria, titlul și prețul sunt înaintea
   galeriei direct în HTML (vezi productPageHTML), deci aici doar mărimile. */
@media (max-width: 767px) {
  .product-layout {
    gap: var(--space-4);
  }

  /* Poza principală pătrată, cel mult 55% din înălțimea ecranului,
     pe un fundal de aceeași culoare cu fundalul pozelor */
  .gallery-main {
    display: flex;
    justify-content: center;
    background: var(--placeholder);
  }

  .gallery-main .product-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 55vh;
    object-fit: contain;
    background: transparent;
  }

  /* Miniaturi pătrate de 56×56, cu 8px între ele */
  .thumbs {
    gap: var(--space-2);
  }

  .thumb {
    width: 56px;
    height: 56px;
  }

  .thumb img {
    height: 100%;
    aspect-ratio: 1 / 1;
  }
}


/* ===== Micro-animații =====
   Reguli: doar transform și opacity (și width la bare), durate din
   --dur-fast / --dur / --dur-slow, intrări cu --ease (ease-out), ieșiri ease-in.
   Toate sunt oprite mai jos, în @media (prefers-reduced-motion: reduce). */

/* Butoane: la apăsare coboară 1px */
.btn {
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* „Adăugat”: bifa din butonul „Adaugă în coș” */
.btn.is-added {
  gap: var(--space-2);
}

/* Cardurile de produs: efect doar pe dispozitive cu mouse (pe telefon nimic) */
.card-media img {
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-2px);
    border-color: var(--ink);
  }

  .product-card:hover .card-media img {
    transform: scale(1.03);
  }
}

/* Pozele de produs apar cu fade peste --placeholder, după ce s-au încărcat.
   Clasa js-fade o pune main.js: fără JavaScript, pozele se văd normal. */
.js-fade .card-media img,
.js-fade .product-img,
.js-fade .category-card img,
.js-fade .kit-mosaic img,
.js-fade .thumb img {
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}

.js-fade img.is-loaded {
  opacity: 1;
}

/* Sertarul coșului: intră din dreapta, fundalul apare cu fade; la închidere invers */
.drawer[open] {
  animation: drawer-in var(--dur) var(--ease);
}

.drawer[open]::backdrop {
  animation: fade-in var(--dur) var(--ease);
}

.drawer.is-closing {
  animation: drawer-out var(--dur-fast) ease-in forwards;
}

.drawer.is-closing::backdrop {
  animation: fade-out var(--dur-fast) ease-in forwards;
}

/* Panoul „Catalog” și rândul de căutare: fade + mică coborâre */
.catalog-panel:not([hidden]),
.search-bar:not([hidden]) {
  animation: drop-in var(--dur-fast) var(--ease);
}

/* Barele: livrare gratuită și „Greutatea echipamentului” își animă lățimea */
.progress-fill,
.weight-segment {
  transition: width var(--dur-slow) var(--ease);
}

@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes drawer-out {
  from { transform: none; }
  to { transform: translateX(100%); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}


/* ===== Animații de intrare și scroll =====
   Intrarea (la deschiderea paginii) e CSS pur: pornește singură, fără JS.
   animation-fill-mode: backwards → după animație elementul revine exact la
   stilurile lui obișnuite (hover, apăsare etc. merg normal).
   Aparițiile la scroll: vezi initReveal() în main.js (clasa html.js-reveal).
   Totul e oprit la prefers-reduced-motion (secțiunea 99). */

@keyframes enter-up {
  from { opacity: 0; transform: translateY(var(--enter-shift)); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-up-small {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-uncover {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0); }
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to { transform: none; }
}

@keyframes enter-image {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}

/* 1. Acasă: etichetă → titlu → text → butoane, iar poza se descoperă de jos în sus.
   (Header-ul și banda de sus nu se animă.) Totul se termină în ~900ms. */
[data-page="home"] .hero-text .eyebrow {
  animation: enter-up-small var(--dur-slow) var(--ease-enter) backwards;
}

[data-page="home"] .hero-text h1 {
  animation: enter-up var(--dur-reveal) var(--ease-enter) 80ms backwards;
}

[data-page="home"] .hero-lead {
  animation: enter-up var(--dur-reveal) var(--ease-enter) 200ms backwards;
}

[data-page="home"] .hero-actions .btn:nth-child(1) {
  animation: enter-up var(--dur-reveal) var(--ease-enter) 280ms backwards;
}

[data-page="home"] .hero-actions .btn:nth-child(2) {
  animation: enter-up var(--dur-reveal) var(--ease-enter) 360ms backwards;
}

[data-page="home"] .hero-media img {
  animation:
    hero-uncover var(--dur-hero) var(--ease-enter) backwards,
    hero-settle 900ms var(--ease-enter) backwards;
}

/* 3. Produs: etichetă, titlu, descriere, preț în cascadă; poza mare; miniaturile */
[data-page="product"] .product-head > * {
  animation: enter-up var(--dur-reveal) var(--ease-enter) backwards;
}

[data-page="product"] .product-head > :nth-child(2) { animation-delay: 60ms; }
[data-page="product"] .product-head > :nth-child(3) { animation-delay: 120ms; }
[data-page="product"] .product-head > :nth-child(4) { animation-delay: 180ms; }

[data-page="product"] .gallery-main .product-img {
  animation: enter-image 500ms var(--ease-enter) backwards;
}

[data-page="product"] .thumbs li {
  animation: enter-fade var(--dur-slow) var(--ease-enter) backwards;
}

[data-page="product"] .thumbs li:nth-child(2) { animation-delay: 40ms; }
[data-page="product"] .thumbs li:nth-child(3) { animation-delay: 80ms; }
[data-page="product"] .thumbs li:nth-child(4) { animation-delay: 120ms; }

/* Catalog: titlul și filtrele apar cu fade; primele 8 carduri în cascadă.
   Doar la prima deschidere: după ~1s, main.js pune html.entered, ca un
   catalog redesenat (alt filtru) să nu repete intrarea. */
[data-page="catalog"] .page-head,
[data-page="catalog"] #catalog-filters {
  animation: enter-fade var(--dur-slow) var(--ease-enter) backwards;
}

html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(-n+8) {
  animation: enter-up var(--dur-reveal) var(--ease-enter) backwards;
}

html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(2) { animation-delay: 40ms; }
html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(3) { animation-delay: 80ms; }
html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(4) { animation-delay: 120ms; }
html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(5) { animation-delay: 160ms; }
html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(6) { animation-delay: 200ms; }
html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(7) { animation-delay: 240ms; }
html:not(.entered) [data-page="catalog"] #catalog-grid > :nth-child(8) { animation-delay: 280ms; }

/* Ghid, Coș, Checkout, Confirmare, Credite: un fade-up scurt al conținutului */
[data-page="guide"] #main,
[data-page="cart"] #main,
[data-page="checkout"] #main,
[data-page="confirmation"] #main,
[data-page="credits"] #main {
  animation: enter-up var(--dur-slow) var(--ease-enter) backwards;
}

/* 2. Apariții la scroll (o singură dată). Ascunse DOAR dacă JS a pus html.js-reveal. */
.js-reveal [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: none; /* ascunderea e instantă (elementul e oricum sub ecran) */
}

.js-reveal [data-reveal].is-revealed {
  transition:
    opacity var(--dur-reveal) var(--ease-enter) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-enter) var(--reveal-delay, 0ms);
}

/* Linia de deasupra titlurilor se „desenează” de la stânga */
.js-reveal .section-head[data-reveal]:not(.is-revealed)::before {
  transform: scaleX(0);
}

.js-reveal .section-head[data-reveal].is-revealed::before {
  transition: transform 500ms var(--ease-enter) var(--reveal-delay, 0ms);
}


/* ---------- 32. Ajustări: rândul tehnic pe card, tipărire ---------- */

/* Pe telefon: „de la 1,75 kg” pe primul rând, „2 variante” pe al doilea, fără „·” */
@media (max-width: 767px) {
  .card-tech .tech-weight,
  .card-tech .tech-variants {
    display: block;
  }

  .card-tech .tech-sep {
    display: none;
  }
}

/* La tipărire: tot conținutul vizibil, fără animații */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal],
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .section-head::before {
    transform: none !important;
  }

  .js-fade img {
    opacity: 1 !important;
  }
}


/* ---------- 99. Mișcare redusă ---------- */

/* Dacă utilizatorul a cerut mai puțină mișcare: nicio tranziție, nicio animație,
   nicio transformare la hover / apăsare. Totul funcționează la fel, doar instant.
   (Animațiile pornite din JS verifică și ele această setare.) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  .drawer::backdrop {
    transition: none !important;
    animation: none !important;
  }

  .product-card:hover,
  .category-card:hover,
  .product-card:hover .card-media img,
  .btn:active:not(:disabled) {
    transform: none;
  }
}