/* ═════════════════════════════════════════════════════════
   informs - aplicația React (magazin, stare comandă, pagini legale)
   în aceeași identitate cu paginile statice.

   Se încarcă ULTIMUL în app.html, peste main.css. main.css rămâne
   neatins: aici îi redefinim tokenii și suprascriem doar ce se vede
   pe paginile servite de aplicație. Conținutul stă pe „hârtie”
   (gri deschis, #F5F6FA), cu carduri albe; antetul paginii
   e navy plat, cu titlu serif.
   ═════════════════════════════════════════════════════════ */

:root {
  /* tokenii din main.css, pe paleta site-ului */
  --navy:    #0C0032;
  --blue-d:  #043799;
  --blue:    #065AF7;
  --blue-a:  #065AF7;
  --blue-lt: #E9EFFE;
  --bg:      #F5F6FA;   /* pagina */
  --white:   #FFFFFF;   /* hârtia: carduri, fereastra de produs */
  --text:    #1E1B2E;
  --text-2:  #5E5972;
  --border:  #E3E6ED;
  --border-d:#C8CDD8;
  --font:    "DM Sans", system-ui, sans-serif;

  /* aceleași nume ca în base.css al site-ului static */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-head:    "Poppins", system-ui, sans-serif;

  /* Aceeasi inaltime ca antetul (spa-chrome.css). Continutul aplicatiei
     nu vede tokenii de chrome, deci o repetam aici. */
  --hdr-h: 84px;
  --blue-hover:#0A4FD6;
  --paper-2:   #ECEEF3;
  --sp-gutter: 40px;
}

body, #root { background: #0C0032; }

main { background: var(--bg); }

/* aliniere cu header-ul și subsolul (1400px / 40px) */
main .container {
  max-width: 1400px;
  padding-inline: var(--sp-gutter);
}

main h1, main h2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.02em;
}

/* ── Butoane ── */
main .btn {
  justify-content: center;
  border-radius: 999px;
  border-width: 1px;
  font-family: var(--font);
  font-weight: 600;
}

main .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }

main .btn-primary:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: none;
  box-shadow: none;
}

main .btn-outline { color: var(--navy); border-color: var(--border-d); background: transparent; }

main .btn-outline:hover { border-color: var(--navy); background: transparent; transform: none; }

main .btn:disabled,
main .btn:disabled:hover {
  background: var(--border-d);
  border-color: var(--border-d);
  color: #fff;
  cursor: not-allowed;
}

.sp-btn-block { width: 100%; }

/* ── Antetul paginii: navy plat, titlu serif ── */
/* Ca pe paginile statice: antetul e transparent si sta peste hero, nu
   deasupra lui. Fara asta, pe /magazin se vedea o banda navy separata
   sub antet si parea alt navbar. */
main .pg-hero {
  margin-top: calc(var(--hdr-h) * -1);
  background: var(--navy);
  background-image: none;
  padding: calc(var(--hdr-h) + 64px) 0 60px;
  border-bottom: 1px solid rgba(210, 204, 230, .18);
}

/* Magazinul: documente de sticlă pe fundal. Stratul navy din stânga
   acoperă foile luminoase de sub titlu și căutare; în dreapta
   imaginea rămâne vizibilă. */
main .pg-hero--shop {
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(12, 0, 50, .88) 0%, rgba(12, 0, 50, .7) 38%, rgba(12, 0, 50, .1) 72%),
    url("../assets/renders/produse-fundal.webp");
  background-size: cover;
  background-position: center;
  padding-block: calc(var(--hdr-h) + 88px) 84px;
}

@media (max-width: 640px) {
  main .pg-hero--shop {
    background-image:
      linear-gradient(rgba(12, 0, 50, .6), rgba(12, 0, 50, .6)),
      url("../assets/renders/produse-fundal-1000.webp");
    background-position: 88% center;
    padding-block: calc(var(--hdr-h) + 52px) 48px;
  }
}

main .pg-hero .tag-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-bottom: 16px;
  border-radius: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #BEB6D9;
}

main .pg-hero .tag-label::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--blue);
}

main .pg-hero h1 {
  max-width: 20ch;
  margin-bottom: 16px;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.06;
  color: #fff;
}

main .pg-hero p { max-width: 56ch; font-size: 1rem; line-height: 1.6; color: #D2CCE6; }

/* ── Magazin: căutare ── */
main .shop-search-wrap { max-width: 620px; margin: 32px 0 0; }

main .shop-search {
  height: 56px;
  padding: 0 22px 0 52px;
  border-radius: 999px;
  border: 1px solid rgba(210, 204, 230, .32);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 16px;
}

main .shop-search:focus { border-color: #fff; background: rgba(255, 255, 255, .08); }

main .shop-search-ico { left: 20px; }

/* ── Banda SEAP ── */
.sp-seap { background: var(--paper-2); border-bottom: 1px solid var(--border); }

.sp-seap__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.sp-seap__inner img { height: 28px; width: auto; }

.sp-seap__inner strong { color: var(--navy); }

/* ── Filtre ── */
.sp-profile { background: var(--bg); border-bottom: 1px solid var(--border); }

.sp-profile .container { padding-block: 20px; }

.sp-profile__lbl { margin-bottom: 12px; font-size: 14px; color: var(--text-2); }

.sp-profile__row { display: flex; flex-wrap: wrap; gap: 8px; }

.sp-chip {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-d);
  background: transparent;
  font: 600 14px/1.4 var(--font);
  color: var(--text);
  transition: background-color .2s, border-color .2s, color .2s;
}

.sp-chip:hover { border-color: var(--navy); }

.sp-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

main .shop-filter-bar { background: var(--bg); }

main .shop-tabs { padding-top: 8px; gap: 4px; }

main .shop-tab { padding: 12px 14px; border-radius: 0; font-size: 15px; color: var(--text-2); }

main .shop-tab:hover { color: var(--navy); }

main .shop-tab.active { color: var(--navy); border-bottom-color: var(--blue); }

main .shop-fmt-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

main .shop-fmt { border: 1px solid var(--border-d); background: transparent; color: var(--text-2); }

main .shop-fmt:hover { border-color: var(--navy); color: var(--navy); }

/* activ: același navy pentru toate formatele, fără cod de culoare */
main .shop-fmt.active,
main .shop-fmt.active.fmt-all,
main .shop-fmt.active.fmt-word,
main .shop-fmt.active.fmt-excel,
main .shop-fmt.active.fmt-pdf,
main .shop-fmt.active.fmt-pachet { background: var(--navy); border-color: var(--navy); color: #fff; }

/* „Doar gratuite” în stânga, formatele în dreapta; pe mobil, unul sub altul */
main .shop-filter-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
}

main .shop-formats { padding: 12px 0; }

.sp-free {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font: 600 14px/1.4 var(--font);
  color: var(--text);
  cursor: pointer;
}

.sp-free input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }

.sp-catalog { padding-top: 12px; }

/* Raftul „Formulare uzuale”: sub catalog, fără accent */
.sp-shelf { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--border-d); }

main .sp-shelf__title { margin: 0 0 6px; font: 500 1.35rem/1.3 var(--f-head); color: var(--navy); }

.sp-shelf__lead { max-width: 60ch; margin: 0 0 24px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

main .shop-reset-btn { margin-left: 14px; color: var(--blue); }

/* ── Card produs ── */
main .shop-grid { gap: 20px; }

main .shop-product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

main .shop-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-d);
  box-shadow: 0 14px 34px rgba(12, 0, 50, .08);
}

/* antet: navy plat pentru toate formatele (înainte: roșu, verde, albastru) */
main .shop-card-vis.model-card-vis {
  height: 96px;
  padding: 14px 18px;
  background: var(--navy);
}

main .shop-card-vis .mc-pat { display: none; }

main .shop-card-vis .mc-tag {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  opacity: .92;
}

main .shop-card-vis .mc-badge {
  top: 14px;
  right: 16px;
  padding: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #BEB6D9;
}

main .shop-badge-new,
main .shop-badge-rec {
  top: 14px;
  left: 18px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font-size: 11px;
  letter-spacing: .06em;
}

main .shop-card-body { padding: 18px 20px 20px; }

main .shop-card-title {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
}

main .shop-card-desc { font-size: 15px; line-height: 1.6; }

main .shop-card-tag {
  border: 0;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--text-2);
  font-weight: 500;
}

main .shop-card-footer { border-top-color: var(--border); }

main .shop-card-price {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: #1E4FB5;   /* albastru mediu-închis, mai deschis decât navy */
}

/* ── Bloc final ── */
main .shop-cta-banner {
  background: var(--navy);
  border-radius: 20px;
  padding: 56px 40px;
}

.sp-cta__k { margin-bottom: 12px; font-size: 15px; color: #BEB6D9; }

main .sp-cta__title { margin-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; }

.sp-cta__lead {
  max-width: 48ch;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.7;
  color: #D2CCE6;
}

main .shop-empty h3 { margin-bottom: 8px; color: var(--navy); }

main .shop-empty p { margin-bottom: 24px; }

/* ── Fereastra de produs ── */
.shop-modal-overlay { background: rgba(12, 0, 50, .72); }

.shop-modal { background: var(--white); border-radius: 16px; }

/* ── Pagina unui produs ──
   Acelasi continut ca fereastra de dinainte, pe o pagina cu adresa
   proprie: poate fi trimisa prin link si indexata. */
.sp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #BEB6D9;
}

.sp-crumbs a { color: #BEB6D9; }

.sp-crumbs a:hover { color: #fff; }

.sp-crumbs [aria-current] { color: #fff; font-weight: 600; }

main .sp-detail-wrap { padding-block: 40px 64px; }

.sp-detail {
  max-width: 680px;
  padding: 32px 34px;
  background: var(--white);
  border: 1px solid var(--border);
}

@media (max-width: 640px) {
  .sp-detail { padding: 24px 20px; }
  main .sp-detail-wrap { padding-block: 28px 44px; }
}

/* Titlul cardului e acum link, nu doar text. */
main a.shop-card-title { display: block; text-decoration: none; }

main a.shop-card-title:hover { color: var(--blue); }

.shop-modal-hd { background: var(--navy); border-radius: 16px 16px 0 0; }

.sp-modal-fmt { margin-bottom: 10px; font-size: 13px; letter-spacing: .04em; color: #BEB6D9; }

.shop-modal .sp-modal-title {
  margin-bottom: 14px;
  padding-right: 36px;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
}

.sp-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.sp-modal-tags span {
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  font-size: 12px;
  font-weight: 500;
  color: #D2CCE6;
}

.shop-modal-lbl {
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

.sp-modal-text { font-size: 15px; line-height: 1.75; color: var(--text); }

/* Bifele din „Ce include”: verde, ca semn de „inclus” (decizie 28.09.2026) */
.shop-modal-check { background: #E7F6EC; color: #15803D; }

.sp-modal-stats { display: flex; gap: 24px; }

.sp-modal-stats > div { display: flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--text-2); }

.sp-modal-stats strong { color: var(--navy); }

.sp-modal-text--note { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.sp-modal-text--note a,
.sp-inst__text a { color: var(--blue); }

/* Traseul pentru instituții, sub butonul de plată */
.sp-inst { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border); background: var(--white); }

.sp-inst__title { margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--navy); }

.sp-inst__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.shop-modal-price-box { background: var(--bg); border: 1px solid var(--border); }

.shop-modal-price { font-family: var(--f-head); font-weight: 500; letter-spacing: -.02em; color: #1E4FB5; }

.shop-modal-price span { font-size: 1rem; font-weight: 500; color: var(--text-2); }

/* ── Formulare (descărcare gratuită, plată) ── */
.sp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.sp-form .shop-modal-lbl { margin-bottom: 0; }

.sp-seg { display: flex; gap: 8px; }

.sp-seg__opt {
  flex: 1;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-d);
  background: transparent;
  font: 600 13.5px/1.2 var(--font);
  color: var(--text);
}

.sp-seg__opt.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.sp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sp-field { display: flex; flex-direction: column; gap: 5px; }

.sp-field--full { grid-column: 1 / -1; }

.sp-label { font-size: 13px; font-weight: 600; color: var(--text); }

.sp-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-d);
  border-radius: 8px;
  background: #fff;
  font: 15px/1.4 var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.sp-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(6, 90, 247, .14); }

.sp-input.is-empty { color: var(--text-2); }

.sp-input.is-invalid { border-color: #C0262D; }

.sp-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

.sp-check input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--blue);
  cursor: pointer;
}

.sp-check span { font-size: 13px; line-height: 1.6; color: var(--text-2); }

.sp-check a { color: var(--blue); font-weight: 600; }

.sp-check strong { color: var(--navy); }

.sp-err-inline { margin: 0; font-size: 12.5px; color: #C0262D; }

.sp-err {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #F0C7C9;
  border-radius: 8px;
  background: #FDF3F3;
  font-size: 13px;
  color: #A11D24;
}

.sp-pay-logo { display: flex; justify-content: center; }

.sp-pay-logo img { height: 26px; width: auto; }

.sp-fine { margin: 0; font-size: 12px; line-height: 1.6; text-align: center; color: var(--text-2); }

.sp-fine--gap { margin-top: 14px; }

.sp-fine a { color: var(--blue); }

.sp-done {
  padding: 28px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
}

.sp-done__ico { margin-bottom: 8px; font-size: 1.8rem; color: var(--blue); }

.sp-done__title { margin-bottom: 6px; font-weight: 600; font-size: 1.05rem; color: var(--navy); }

.sp-done__text { font-size: 13.5px; color: var(--text-2); }

/* ── Pagini legale: textul pe hârtie ── */
main .card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: none;
  border: 1px solid var(--border);
}

main .card:hover { transform: none; box-shadow: none; }

@media (max-width: 1023px) {
  :root { --sp-gutter: 24px; }
}

@media (max-width: 640px) {
  :root { --sp-gutter: 20px; }
  main .pg-hero { padding: calc(var(--hdr-h) + 44px) 0 44px; }
  main .shop-cta-banner { padding: 40px 22px; }
  .sp-fields { grid-template-columns: 1fr; }
}

/* ── Apariție eșalonată (js/spa-reveal.js) ───────────────────
   Același efect ca pe paginile statice. „html” ridică specificitatea
   peste tranzițiile de hover ale cardurilor, care altfel ar anula
   apariția; scriptul scoate data-sr după apariție. */
html [data-sr] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
              transform .7s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

html [data-sr="in"] { opacity: 1; transform: none; }

/* cardurile de produs apar acum la scroll; animația veche la montare
   (FadeUp) le arăta chiar dacă erau sub ecran */
main .shop-grid > .anim-fade-up { animation: none; opacity: 1; transform: none; }

/* antetul paginii: eticheta, titlul, textul, căutarea, pe rând */
@keyframes spRiseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

main .pg-hero .container > * { animation: spRiseIn .8s cubic-bezier(.16, 1, .3, 1) both; }
main .pg-hero .container > :nth-child(2) { animation-delay: .12s; }
main .pg-hero .container > :nth-child(3) { animation-delay: .24s; }
main .pg-hero .container > :nth-child(n+4) { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html [data-sr] { opacity: 1; transform: none; transition: none; }
  main .pg-hero .container > * { animation: none; }
}

/* ── Fereastra de produs ──
   ProductDetails are propriul chenar pe pagina produsului; în
   fereastră stă direct pe corpul ei. */
.shop-modal .sp-detail { max-width: none; padding: 0; border: 0; background: transparent; }

.shop-modal .sp-modal-title { font-size: 1.5rem; }

/* ── Stare comandă ──
   O fișă, nu un banner: numărul comenzii sus, ca pe un document,
   eticheta de stare în chenar și pașii următori numerotați. Culoarea
   stării apare doar în filetul de sus și în etichetă. */
main .os-wrap { max-width: 680px; }

.os-card {
  --os-tone: var(--blue);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--os-tone);
}

.os-card--ok   { --os-tone: #15803D; }
.os-card--wait { --os-tone: #B45309; }
.os-card--fail { --os-tone: #B91C1C; }

.os-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
}

.os-meta__k {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.os-meta__v {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}

.os-tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--os-tone);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--os-tone);
  white-space: nowrap;
}

.os-body { padding: 30px 28px 8px; }

main .os-title {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--navy);
}

.os-lead { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: var(--text); }

.os-steps { margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--border); }

.os-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

.os-steps__n {
  padding-top: 2px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  color: var(--os-tone);
}

/* „Se verifică”: o bară care curge, fără iconițe. */
.os-progress { position: relative; height: 2px; margin-bottom: 26px; overflow: hidden; background: var(--border); }

.os-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: var(--os-tone);
  animation: osFlow 1.2s ease-in-out infinite;
}

@keyframes osFlow { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

@media (prefers-reduced-motion: reduce) { .os-progress span { animation: none; width: 100%; } }

.os-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

@media (max-width: 640px) {
  .os-meta, .os-actions { padding-inline: 18px; }
  .os-body { padding: 24px 18px 4px; }
  main .os-title { font-size: 1.65rem; }
  .os-actions .btn { flex: 1 1 100%; }
}

/* ── Vizualizări unice ──
   Colțul liber din dreapta-jos al antetului cardului: sus stau formatul
   și „Nou”, jos-stânga marcajul DOC/PDF. Cifre monospace, fără pastilă. */
main .shop-card-vis .mc-views {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: #BEB6D9;
}

.sp-modal-views { white-space: nowrap; }

.sp-modal-views svg { vertical-align: -1px; }

/* Derulare lină (js/smooth-scroll.js): la fel ca în base.css */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ── Butonul de pe card ──
   Albastrul plin al site-ului era prea tare pe o grilă de carduri
   (câte un buton strident pe fiecare). Acum: pastilă transparentă cu
   contur fin și text navy. Rămâne transparentă și la hover pe card
   (tot cardul e clicabil): se închide doar conturul și se mișcă săgeata. */
main .shop-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-d);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

main .shop-card-cta__arr { transition: transform .2s ease; }

main .shop-product-card:hover .shop-card-cta,
main .shop-card-cta:focus-visible {
  border-color: var(--navy);
}

main .shop-product-card:hover .shop-card-cta__arr { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  main .shop-card-cta__arr { transition: none; }
}

/* ── Catalog: filtre în stânga, produse în dreapta ──
   Coloana de filtre e o fișă: grupuri despărțite de filete, opțiuni ca
   rânduri cu un marcaj pătrat și numărul de produse în monospace. Pe
   desktop rămâne vizibilă la derulare; sub 900px trece deasupra listei. */
main .shop-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

main .shop-side {
  position: sticky;
  top: 24px;
  border: 1px solid var(--border);
  background: var(--white);
}

main .shop-side__group { padding: 18px 20px; border-bottom: 1px solid var(--border); }

main .shop-side__group:last-of-type { border-bottom: 0; }

main .shop-side__title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

main .shop-side__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  /* ies puțin din grup, ca fundalul opțiunii alese să aibă aer */
  width: calc(100% + 20px);
  margin: 1px -10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

main .shop-side__opt:hover { background: rgba(12, 0, 50, .035); }

main .shop-side__opt.is-on { background: rgba(12, 0, 50, .07); }

main .shop-side__mark {
  flex: none;
  width: 13px;
  height: 13px;
  border: 1px solid var(--border-d);
  border-radius: 50%;
  background: var(--white);
}

main .shop-side__opt.is-on .shop-side__mark {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: inset 0 0 0 3px var(--white);
}

main .shop-side__opt.is-on .shop-side__lbl { font-weight: 600; color: var(--navy); }

main .shop-side__lbl { flex: 1; }

main .shop-side__n {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--text-2);
}

main .shop-side__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
  cursor: pointer;
}

main .shop-side__check input { width: 14px; height: 14px; accent-color: var(--navy); margin: 0; }

main .shop-side__reset {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font: inherit;
  font-size: 13.5px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

main .shop-side__reset:hover { text-decoration: underline; text-underline-offset: 3px; }

main .shop-layout .shop-result-bar { margin-top: 0; }

main .shop-layout .shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 20px;
}

@media (max-width: 900px) {
  main .shop-layout { grid-template-columns: 1fr; gap: 24px; }
  main .shop-side { position: static; display: flex; flex-wrap: wrap; }
  main .shop-side__group { flex: 1 1 200px; border-bottom: 0; border-right: 1px solid var(--border); }
  main .shop-side__group:last-of-type { border-right: 0; }
  main .shop-side__reset { flex-basis: 100%; }
}

@media (max-width: 560px) {
  main .shop-side__group { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* SEAP în caseta pentru instituții: logo cu link spre e-licitatie.ro */
.sp-inst__seap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.sp-inst__seap a { flex: none; display: block; }

.sp-inst__seap img { display: block; height: 44px; width: auto; }

.sp-inst__seap strong { color: var(--navy); }

@media (max-width: 480px) {
  .sp-inst__seap { flex-direction: column; align-items: flex-start; }
}

/* ── Previzualizare ──
   Butonul rotund de pe card (ochi), fereastra cu paginile și miniaturile
   din fișa produsului. Aceeași pastilă transparentă ca „Comandă”. */
main .shop-card-actions { display: flex; align-items: center; gap: 8px; }

main .shop-card-pv {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-d);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

main .shop-card-pv:hover,
main .shop-card-pv:focus-visible { border-color: var(--navy); background: rgba(12, 0, 50, .04); }

.pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 0, 50, .78);
  animation: shopFadeIn .18s ease;
}

.pv {
  display: flex;
  flex-direction: column;
  width: min(860px, 100%);
  max-height: calc(100vh - 40px);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.pv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.pv__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pv__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

.pv__name { font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv__close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-d);
  border-radius: 50%;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
}

.pv__stage {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: var(--bg);
  text-align: center;
}

.pv__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 4px 18px rgba(12, 0, 50, .08);
  user-select: none;
  -webkit-user-drag: none;
}

.pv__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.pv__nav { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }

.pv__count strong { color: var(--navy); }

.pv__of { color: var(--text-2); }

.pv__arrow {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-d);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 16px;
  cursor: pointer;
}

.pv__arrow:disabled { opacity: .35; cursor: default; }

.pv .pv__cta { cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; }

.pv .pv__cta:hover { border-color: var(--navy); }

.pv-strip { display: flex; gap: 12px; flex-wrap: wrap; }

.pv-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 104px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: var(--text-2);
  cursor: zoom-in;
  transition: border-color .15s ease;
}

.pv-strip__item:hover { border-color: var(--navy); }

.pv-strip__item img { display: block; width: 100%; height: auto; border: 1px solid var(--border); }

@media (max-width: 640px) {
  .pv-overlay { padding: 0; }
  .pv { max-height: 100vh; height: 100%; border-radius: 0; }
  .pv__stage { padding: 12px; }
  .pv__of { display: none; }
  .pv__foot .pv__cta { flex: 1 1 100%; justify-content: center; }
}