.produs[hidden] { display: none; }

.firimituri { font-size: var(--s14); color: var(--secundar); padding: var(--sp-4) 0 0; }
.firimituri ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.firimituri li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--linie); }
.firimituri a { text-underline-offset: 4px; }


.cat-cap { padding: var(--sp-5) 0 var(--sp-6); }
.cat-cap h1 { font-size: var(--s30); }
.cat-cap .sub { max-width: 60ch; }
.cat-repere { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.cat-repere li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--s14); color: var(--secundar); }
.cat-repere strong { display: block; color: var(--text); font-size: var(--s16); }
.cat-repere svg { flex: none; width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: var(--auriu); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


.bara-lista { position: sticky; top: 0; z-index: 10; background: var(--fundal); display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--linie); }
.filtre { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.filtre::-webkit-scrollbar { display: none; }
.filtru { flex: none; min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--linie); border-radius: 999px; background: var(--fundal-alt); color: var(--text);
  font: 700 var(--s14)/1 "Lato", system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); }
.filtru .n { font-weight: 400; color: var(--secundar); }
.filtru[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: #FFFFFF; }
.filtru[aria-pressed="true"] .n { color: #CDD5D4; }
.ordonare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.contor-lista { font-size: var(--s14); color: var(--secundar); white-space: nowrap; }
.ordonare .camp { width: auto; min-height: 44px; padding-right: var(--sp-6); font-size: var(--s14); }


.btn-filtre { min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--text); border-radius: var(--raza); background: transparent; color: var(--text);
  font: 700 var(--s14)/1 "Lato", system-ui, sans-serif; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; white-space: nowrap; }
.btn-filtre svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.aplicate { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-4); }
.aplicate[hidden], .gol-filtre[hidden], .cartonas-showroom[hidden] { display: none; }
.aplicat { min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--petrol); border-radius: 999px; background: var(--petrol); color: #FFFFFF;
  font: 400 var(--s14)/1 "Lato", system-ui, sans-serif; display: inline-flex; gap: var(--sp-2); align-items: center; cursor: pointer; }
.sterge-toate { min-height: 44px; border: 0; background: none; color: var(--text); font: 700 var(--s14)/1 "Lato", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.gol-filtre { margin: 0 0 var(--sp-5); padding: var(--sp-5); background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--raza); color: var(--secundar); }

.fundal-filtre { position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.45); }
.fundal-filtre[hidden], .panou-filtre[hidden], .opt-filtru[hidden], .grup-filtru[hidden] { display: none; }
.panou-filtre { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fundal-alt); color: var(--text);
  box-shadow: -8px 0 32px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.panou-filtre .sus { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--linie); }
.corp-filtre { flex: 1; overflow-y: auto; padding: 0 var(--sp-5); }
.grup-filtru { border: 0; border-bottom: 1px solid var(--linie); margin: 0; padding: var(--sp-4) 0; }
.grup-filtru legend { float: left; width: 100%; margin-bottom: var(--sp-2); font-weight: 700; font-size: var(--s16); }
.opt-filtru { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; cursor: pointer; clear: both; }
.opt-filtru input { width: 20px; height: 20px; margin: 0; accent-color: var(--petrol); flex: none; }
.opt-filtru .et { flex: 1; }
.opt-filtru .n { color: var(--secundar); font-size: var(--s14); }
.mostra { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: none; }
.interval { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); clear: both; }
.interval label { display: grid; gap: var(--sp-1); font-size: var(--s14); color: var(--secundar); }
.jos-filtre { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--linie); }
.jos-filtre .btn { padding: 0 var(--sp-3); font-size: var(--s14); letter-spacing: .04em; }


.cartonas-showroom { grid-column: 1 / -1; background: var(--banda); color: var(--banda-text); border-radius: var(--raza); padding: var(--sp-5);
  display: flex; flex-direction: column; justify-content: center; }
.cartonas-showroom .eticheta, .cartonas-showroom .sub { color: var(--banda-sec); }
.h-cartonas { font-size: var(--s24); }
.cartonas-showroom .actiuni { align-items: flex-start; }
.cartonas-showroom .actiuni .btn { width: auto; }
.cartonas-showroom :focus-visible, .cartonas-showroom .legatura:focus-visible { outline-color: #FFFFFF; }

.cartonas-showroom .legatura { color: #FFFFFF; }
.cartonas-showroom .legatura .sag { stroke: #FFFFFF; }


.banda-livrare { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5);
  background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--raza); color: var(--secundar); }
.banda-livrare strong { color: var(--text); }
.banda-livrare svg { flex: none; width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: var(--auriu); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


.cat-lista { padding-bottom: var(--sectiune); }
.cat-lista + .cat-intrebari { padding-top: 0; }
.cat-intrebari h2 { font-size: var(--s30); margin-bottom: var(--sp-4); }
.lista-intrebari { max-width: 760px; border-top: 1px solid var(--linie); }
.intrebare { border-bottom: 1px solid var(--linie); }
.intrebare summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-3) 0; font-family: "Gilda Display", Georgia, serif; font-size: var(--s18); line-height: 1.3; }
.intrebare summary::-webkit-details-marker { display: none; }
.intrebare summary::after { content: "+"; flex: none; font-family: "Lato", system-ui, sans-serif; font-size: var(--s24); color: var(--auriu); line-height: 1; }
.intrebare[open] summary::after { content: "−"; }
.intrebare p { margin: 0 0 var(--sp-4); color: var(--secundar); max-width: 65ch; }
.intrebare a { font-weight: 700; text-underline-offset: 4px; }

@media (min-width: 640px) {
  .cat-repere { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .bara-lista { flex-direction: row; align-items: center; justify-content: space-between; }
  .filtre { margin: 0; padding: 0; }
}
@media (min-width: 1024px) {
  .cat-cap { padding: var(--sp-6) 0 var(--sp-7); }
  .cat-cap h1 { font-size: var(--s48); }
  
  .cartonas-showroom { grid-column: auto; padding: var(--sp-5) var(--sp-4); }
  .cartonas-showroom .actiuni .btn { width: 100%; padding: 0 var(--sp-3); font-size: var(--s14); }
}