/* ============================================================
   Magazin: listare, filtre, pagina de produs.
   Doar paginile /magazin, /magazin/:categorie și /produs/:slug.
   Butoanele, câmpurile, cardurile și paginarea vin din components.css.
   ============================================================ */

/* ── Ce se vede cu și fără JavaScript ─────────────────── */
.has-js .only-nojs { display: none; }
html:not(.has-js) .only-js { display: none; }

/* ─────────────────────────── ANTET ─────────────────────────── */
.shop-head { padding-bottom: var(--s-5); }
.shop-head__title { margin-top: var(--s-4); }
.shop-head__lead { margin-top: var(--s-4); }
.shop-head__note { margin-top: var(--s-6); max-width: 68ch; }

.cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--s-6);
  align-items: center;
  margin-top: var(--s-4);
}
.cat-head__tagline {
  margin-top: var(--s-3);
  margin-bottom: 0;
  font-size: var(--t-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brass-700);
}
.cat-head__facts { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-soft); }
.cat-head__art {
  display: grid;
  place-items: center;
  padding: var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--stone-100), var(--surface));
}
.cat-head__art svg { width: 100%; height: auto; }
@media (max-width: 899px) {
  .cat-head { grid-template-columns: 1fr; }
  .cat-head__art { display: none; }
}

/* ─────────────────────── BARA DE CATEGORII ─────────────────────── */
.catbar { border-block: 1px solid var(--line-soft); background: var(--surface); }
.catbar__inner {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.5rem;
}
.catbar__inner::-webkit-scrollbar { display: none; }
.catbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-600);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.catbar__item:hover { background: var(--stone-100); color: var(--ink-900); }
.catbar__item.is-active { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
.catbar__count {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
}
.catbar__item.is-active .catbar__count { color: var(--stone-300); }

/* ─────────────────────────── LAYOUT ─────────────────────────── */
.shop {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 1023px) {
  .shop { grid-template-columns: 1fr; gap: var(--s-6); }
}

.shop__side {
  position: sticky;
  top: 7rem;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.shop__side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.shop__side-title {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-500);
}
.shop__side-head .icon-btn { display: none; }

/* Pe ecrane mici filtrele stau într-un panou care intră din dreapta.
   Fără JavaScript panoul nu are cum să se deschidă, așa că atunci
   rămâne o secțiune obișnuită, așezată sub produse. */
@media (max-width: 1023px) {
  .shop__side { position: static; order: 2; }
  .has-js .shop__side {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-drawer);
    width: min(22rem, 92vw);
    border-radius: 0;
    border-width: 0 0 0 1px;
    overflow-y: auto;
    transform: translateX(101%);
    visibility: hidden;
    transition: transform var(--d-base) var(--ease), visibility var(--d-base);
  }
  .has-js .shop__side.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-lift); }
  .has-js .shop__side-head .icon-btn { display: grid; }
  .shop__main { order: 1; }
}

/* ─────────────────────────── FILTRE ─────────────────────────── */
.filters__group { padding-block: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.filters__group:first-child { padding-top: var(--s-3); }
.filters__title {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.filters__search { display: flex; gap: 0.4rem; }
.filters__search .input { min-width: 0; }

.filters__list { display: grid; gap: 0.1rem; }
.filters__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 2.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  color: var(--ink-600);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.filters__link:hover { background: var(--stone-100); color: var(--ink-900); }
.filters__link[aria-current='true'] {
  background: var(--stone-200);
  color: var(--ink-900);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brass-500);
}
.filters__count { font-size: var(--t-xs); color: var(--text-mute); font-variant-numeric: tabular-nums; }

.filters__range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.filters__range .input { padding-inline: 0.6rem; }
.filters__range-sep { color: var(--text-mute); }
.filters__hint { margin-top: var(--s-3); margin-bottom: 0; font-size: var(--t-xs); color: var(--text-mute); }

.filters__foot { display: grid; gap: var(--s-3); padding-top: var(--s-5); justify-items: center; }
.filters__reset { font-size: var(--t-sm); }

/* ─────────────────────── BARA DE DEASUPRA GRILEI ─────────────────────── */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.shop-toolbar__count { margin: 0; font-size: var(--t-sm); color: var(--text-soft); }
.shop-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.shop-toolbar__sort { display: flex; align-items: center; gap: 0.6rem; }
.shop-toolbar__sort-label { font-size: var(--t-sm); color: var(--text-mute); }
.shop-toolbar__sort .select { padding-block: 0.5rem; font-size: var(--t-sm); width: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s-4); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--t-xs);
  color: var(--ink-600);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.chip__x { color: var(--text-mute); font-size: 1.1em; line-height: 1; }

/* ─────────────────────────── GRILA ─────────────────────────── */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-5);
}
@media (max-width: 479px) {
  .p-grid { grid-template-columns: 1fr; }
}

.p-card__cat {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.p-card__desc {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-card__price-from,
.p-card__price-vat { font-size: var(--t-xs); color: var(--text-mute); }
.p-card__art svg { width: 100%; height: auto; }

.p-card__add.is-in-cart,
.pdp__add.is-in-cart { border-color: var(--sage-300); background: var(--sage-100); color: var(--sage-700); }

.shop-pager { margin-top: var(--s-7); }
.pager__gap { padding-inline: 0.35rem; color: var(--text-mute); }

/* ─────────────────────── PAGINA DE PRODUS ─────────────────────── */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-5);
}
@media (max-width: 899px) {
  /* `1fr` înseamnă de fapt `minmax(auto, 1fr)`, iar `auto` nu coboară sub
     lățimea minimă a conținutului: pe ecrane de 320px coloana rămânea la
     324px și toată pagina produsului ieșea din ecran cu 24px.
     `minmax(0, 1fr)` o lasă să se strângă. */
  .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.pdp__media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--stone-100), var(--surface));
}
.pdp__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--s-6);
}
.pdp__art svg { width: 100%; height: auto; }
.pdp__art img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.pdp__badge { position: absolute; top: var(--s-4); left: var(--s-4); }

.pdp__title { margin-top: var(--s-3); }
.pdp__sku { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--text-mute); }
.pdp__short { margin-top: var(--s-4); color: var(--text-soft); max-width: var(--maxw-text); }

.pdp__price { margin-top: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--line-soft); }
.pdp__price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin: 0; }
.pdp__price-now {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pdp__price-from { font-size: var(--t-sm); color: var(--text-soft); }
.pdp__price-vat { font-size: var(--t-sm); color: var(--text-mute); }
.pdp__price-note { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--text-mute); }

.pdp__stock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.pdp__lead { font-size: var(--t-sm); color: var(--text-soft); }

.pdp__actions { margin-top: var(--s-5); display: grid; gap: var(--s-5); }
.pdp__buy { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pdp__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.pdp__qty-btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  color: var(--ink-600);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.pdp__qty-btn:hover { background: var(--stone-100); color: var(--ink-900); }
.pdp__qty-input {
  width: 3rem;
  height: 2.9rem;
  border: 0;
  border-inline: 1px solid var(--line-soft);
  background: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.pdp__qty-input::-webkit-outer-spin-button,
.pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__add { flex: 1 1 12rem; }

.pdp__ask {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pdp__ask-title { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--t-md); }
.pdp__ask-text { font-size: var(--t-sm); color: var(--text-soft); margin-bottom: var(--s-4); }

.pdp__note { margin-top: var(--s-5); }

.pdp__facts { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.pdp__facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.pdp__facts .icon { margin-top: 0.3rem; color: var(--brass-600); }

.pdp__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 899px) { .pdp__details { grid-template-columns: 1fr; gap: var(--s-6); } }
.pdp__h2 { margin-bottom: var(--s-4); font-size: var(--t-lg); }
.pdp__desc p { max-width: var(--maxw-text); color: var(--text-soft); }

.spec-table { font-size: var(--t-sm); }
.spec-table th,
.spec-table td { padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.spec-table th { width: 42%; font-weight: 500; color: var(--text-soft); }
.spec-table td { color: var(--ink-800); }

.p-grid--related { margin-top: 0; }

/* ─────────────────────── AJUTOR LA FINAL ─────────────────────── */
.shop-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: center;
}
.shop-help__title { margin-top: var(--s-3); margin-bottom: var(--s-3); }
.shop-help__text p { max-width: var(--maxw-text); }
.shop-help__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 899px) { .shop-help { grid-template-columns: 1fr; } }

/* Cât timp se încarcă filtrele, grila se stinge puțin. Fără spinner. */
.shop__main[aria-busy='true'] { opacity: 0.55; transition: opacity var(--d-fast) var(--ease); }