/* ============================================================
   Componente comune. Toate paginile folosesc de aici.
   Nu se scriu butoane sau câmpuri noi în CSS-ul de pagină.
   ============================================================ */

/* ─────────────────────────── BUTOANE ───────────────────────────
   Sobre: colț mic, fără umbre dure, fără salt la apăsare.
   Ierarhia se face prin culoare și contur, nu prin volum. */
.btn {
  --btn-bg: var(--ink-800);
  --btn-fg: #fff;
  --btn-border: var(--ink-800);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}
.btn:hover { background: var(--ink-900); border-color: var(--ink-900); box-shadow: var(--shadow-soft); }
.btn:active { box-shadow: none; }
.btn[disabled], .btn[aria-disabled='true'] {
  cursor: not-allowed;
  --btn-bg: var(--stone-300);
  --btn-fg: var(--ink-400);
  --btn-border: var(--stone-300);
  box-shadow: none;
}

/* Pe ecran îngust, un buton cu text lung („0754 964 968 — cel mai rapid")
   nu mai are unde să încapă pe un rând și ieșea din ecran. Îl lăsăm să se
   rupă pe două rânduri; e mai bine decât să fie tăiat. */
@media (max-width: 519px) {
  .btn { white-space: normal; }
}

/* Degetul cere cel puțin 40px. Butoanele mici erau sub, așa că pe ecranele
   mici le ridicăm — fără să le schimbăm aspectul pe desktop. Pragul e pe
   lățime, nu pe `pointer: coarse`: așa se aplică și când cineva verifică
   site-ul micșorând fereastra pe calculator. */
@media (max-width: 899px) {
  .btn, .btn--sm { min-height: 2.6rem; }
  .callbar__phone { padding-block: 0.4rem; }
}

.btn--brass { --btn-bg: var(--brass-500); --btn-fg: var(--ink-900); --btn-border: var(--brass-500); }
.btn--brass:hover { background: var(--brass-600); border-color: var(--brass-600); color: #fff; }

/* Butonul secundar nu mai poate fi complet transparent: în spatele paginii e
   o fotografie, iar pe zonele ei închise conturul subțire se pierdea și
   butonul arăta ca text simplu. Un alb aproape opac îl ține vizibil peste
   tot, fără să concureze cu butonul principal. */
.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.78);
  --btn-fg: var(--ink-800);
  --btn-border: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-700); color: var(--ink-900); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink-600);
  --btn-border: transparent;
  padding-inline: 0.6em;
}
.btn--quiet:hover { background: var(--stone-200); border-color: transparent; color: var(--ink-900); box-shadow: none; }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink-800); --btn-border: var(--line); }
.btn--light:hover { background: var(--stone-100); border-color: var(--ink-300); color: var(--ink-900); }

.btn--lg { padding: 1.05em 2.1em; font-size: var(--t-base); }
.btn--sm { padding: 0.6em 1.05em; font-size: var(--t-xs); }
.btn--block { display: flex; width: 100%; }

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 1em; height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Link cu săgeată, pentru navigație secundară */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  color: var(--ink-800);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--brass-400);
  transition: gap var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.btn-text:hover { gap: 0.85em; color: var(--brass-700); border-color: var(--brass-600); }

/* ─────────────────────────── ETICHETE ─────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-600);
  white-space: nowrap;
}
.tag--brass { border-color: var(--brass-300); background: var(--brass-100); color: var(--brass-700); }
.tag--ink { border-color: var(--ink-800); background: var(--ink-800); color: #fff; }
.tag--sage { border-color: var(--sage-300); background: var(--sage-100); color: var(--sage-700); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.8em;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  background: var(--stone-200);
  color: var(--ink-600);
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--ok { background: var(--ok-bg); color: var(--ok); }
.status--warn { background: var(--warn-bg); color: var(--warn); }
.status--err { background: var(--err-bg); color: var(--err); }
.status--info { background: var(--info-bg); color: var(--info); }

/* ─────────────────────────── FORMULARE ─────────────────────────── */
.field { display: block; margin-bottom: var(--s-5); }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.field__hint { font-weight: 400; font-size: var(--t-xs); color: var(--text-mute); }
.field__req { color: var(--err); font-weight: 400; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brass-600);
  box-shadow: 0 0 0 3px var(--brass-100);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-600) 50%),
    linear-gradient(135deg, var(--ink-600) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 55%, calc(100% - 1rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--err);
  background: var(--err-bg);
}
.field__error {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-sm);
  color: var(--err);
}
.field__error:empty { display: none; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-600);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  position: relative;
  width: 1.2rem; height: 1.2rem;
  margin-top: 0.18rem;
  border: 1px solid var(--ink-400);
  border-radius: var(--r-xs);
  background: var(--surface);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.check__box::after {
  content: '';
  position: absolute;
  left: 0.36rem; top: 0.12rem;
  width: 0.28rem; height: 0.6rem;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--d-fast) var(--ease);
}
.check input:checked + .check__box { background: var(--ink-800); border-color: var(--ink-800); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--brass-600); outline-offset: 2px; }
.check--radio .check__box { border-radius: 50%; }
.check--radio .check__box::after {
  left: 50%; top: 50%;
  width: 0.5rem; height: 0.5rem;
  border: 0; border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
}
.check--radio input:checked + .check__box::after { transform: translate(-50%, -50%) scale(1); }

.option-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.option-card:hover { border-color: var(--ink-300); }
.option-card:has(input:checked) { border-color: var(--ink-700); box-shadow: var(--shadow-soft); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--brass-600); outline-offset: 2px; }
.option-card__title { font-weight: 600; }
.option-card__desc { font-size: var(--t-sm); color: var(--text-soft); }
.option-card__price { font-family: var(--font-display); font-size: var(--t-md); white-space: nowrap; }
@media (max-width: 479px) {
  .option-card { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-2); }
  .option-card__price { grid-column: 2; justify-self: start; }
}

/* ─────────────────────────── CARDURI ─────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.card--lift:hover { border-color: var(--ink-200); box-shadow: var(--shadow-card); }
.card__body { padding: var(--s-5); }

/* Card de produs */
.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.p-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-card); }
.p-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: linear-gradient(180deg, var(--stone-100), var(--surface));
  overflow: hidden;
}
.p-card__art { width: 78%; transition: transform var(--d-slow) var(--ease); }
.p-card:hover .p-card__art { transform: scale(1.03); }
.p-card__photo { width: 100%; height: 100%; object-fit: cover; }
.p-card__flags { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-direction: column; gap: 0.35rem; z-index: 2; }
.p-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--s-5); flex: 1; }
.p-card__title { font-size: var(--t-md); line-height: 1.3; }
.p-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.p-card__meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; padding-top: 0.4rem; }
.p-card__spec {
  font-size: var(--t-xs);
  padding: 0.2em 0.55em;
  border-radius: var(--r-xs);
  background: var(--stone-100);
  color: var(--ink-600);
}
.p-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}
.p-card__price { display: flex; flex-direction: column; line-height: 1.15; }
.p-card__price-now {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink-900);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.p-card__price-old { font-size: var(--t-xs); color: var(--text-mute); text-decoration: line-through; }
.p-card__add { position: relative; z-index: 2; }

/* ─────────────────────────── BARA DE SUS ─────────────────────────── */
/* Linia de telefon non-stop: cel mai important element de pe site. */
.callbar {
  background: var(--ink-800);
  color: var(--text-invert);
  font-size: var(--t-sm);
}
.callbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 2.9rem;
  padding-block: 0.4rem;
}
.callbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: #fff;
  letter-spacing: 0.01em;
}
.callbar__phone .icon { color: var(--brass-400); }
.callbar__phone:hover { color: var(--brass-300); }
.callbar__note { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-200); }
.callbar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage-300);
  box-shadow: 0 0 0 0 rgba(185, 197, 188, 0.7);
  animation: pulse 3s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 197, 188, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(185, 197, 188, 0); }
}

/* ─────────────────────────── ANTET ─────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -22px rgba(22, 25, 28, 0.5); }

.nav { position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: 5.25rem; }
.nav__logo { display: flex; align-items: center; gap: 0.75rem; flex: none; }
/* Logo-ul e semnătura firmei: îl ținem mare și cu spațiu în jur.
   Fișierul are fundal aproape alb, iar `multiply` îl topește în pagină:
   albul devine culoarea de dedesubt, desenul rămâne. Așa nu se mai vede
   pătratul din jurul lui, indiferent că antetul e alb sau ivoriu. */
.nav__logo img {
  height: 3.75rem;
  width: auto;
  mix-blend-mode: multiply;
}
.nav__name {
  display: grid;
  line-height: 1.1;
}
.nav__name strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-md);
  white-space: nowrap;
  color: var(--ink-900);
  letter-spacing: 0.01em;
}
.nav__name span {
  font-size: 0.76rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brass-700);
}

/* Sub 420px nu mai încap și logo-ul întreg, și numele, și cele două butoane:
   antetul își împingea butonul de meniu în afara ecranului. Micșorăm semnul,
   scoatem rândul al doilea și lăsăm numele să se strângă. Butoanele rămân
   la 44px, cât trebuie ca să poți apăsa cu degetul. */
@media (max-width: 419px) {
  .nav { gap: var(--s-3); }
  .nav__logo { min-width: 0; gap: 0.5rem; }
  .nav__logo img { height: 2.75rem; }
  .nav__name { min-width: 0; }
  .nav__name strong { font-size: 1rem; }
  .nav__name span { display: none; }
}

.nav__links { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; flex-wrap: nowrap; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-600);
  /* fără rupere pe două rânduri: „Pachete și prețuri" e un singur link */
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.35rem;
  height: 1px;
  background: var(--brass-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease);
}
.nav__link:hover { color: var(--ink-900); }
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--ink-900); }

.nav__actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.nav__links + .nav__actions { margin-left: var(--s-3); }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface); border-color: var(--line); color: var(--ink-900); }
.icon-btn__count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 1.15rem; height: 1.15rem;
  padding: 0 0.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--brass-600);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  border: 2px solid var(--bg);
}
.icon-btn__count[data-count='0'] { display: none; }

.burger { display: none; }
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .nav__actions { margin-left: auto; }
  .nav__actions .icon-btn,
  .burger { border-color: var(--line); background: var(--surface); width: 2.75rem; height: 2.75rem; }
  .nav__actions .burger { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg);
  padding: var(--s-5) var(--gutter) var(--s-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--ease), visibility var(--d-base);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: var(--t-md);
}
.mobile-menu__foot { margin-top: var(--s-6); display: grid; gap: var(--s-3); }

/* ─────────────────────────── SUBSOL ─────────────────────────── */
.site-footer {
  background: var(--ink-800);
  color: var(--ink-200);
  padding-top: var(--s-9);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--ink-200); transition: color var(--d-fast) var(--ease); }
.site-footer a:hover { color: var(--brass-300); }
.footer__top { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--s-8); }
@media (max-width: 1023px) { .footer__top { grid-template-columns: 1fr; } }
/* În subsol fundalul e închis, deci logo-ul stă pe o plăcuță ivorie —
   ca o carte de vizită pusă pe masă. Aceeași culoare ca pagina: #faf9f6. */
.footer__logo {
  display: inline-block;
  width: 13rem;
  max-width: 100%;
  margin-bottom: var(--s-5);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  /* `isolation` opreste amestecul la marginea placutei: imaginea se topeste
     in ivoriu, nu in subsolul inchis de dedesubt. */
  isolation: isolate;
}
.footer__logo img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.footer__claim { color: var(--ink-300); max-width: 34ch; }
.footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 719px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__title {
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #fff;
}
.footer__list { display: grid; gap: 0.65rem; }
.footer__legal {
  margin-top: var(--s-8);
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-400);
  font-size: var(--t-xs);
  display: grid;
  gap: 0.5rem;
}
.footer__bottom {
  padding-bottom: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  color: var(--ink-400);
  font-size: var(--t-xs);
}
.footer__dev a { color: var(--brass-400); }

/* ─────────────────────────── WHATSAPP ─────────────────────────── */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.25rem 0.8rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-800);
  box-shadow: var(--shadow-lift);
  transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.wa-float:hover { border-color: var(--ink-300); transform: translateY(-2px); }
.wa-float__icon {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: #1f8a4c;
  color: #fff;
}
.wa-float__label { font-size: var(--t-sm); line-height: 1.2; }
.wa-float__label small { display: block; font-size: 0.78rem; color: var(--text-mute); }
@media (max-width: 599px) {
  .wa-float { padding: 0.7rem; }
  .wa-float__label { display: none; }
}

/* ─────────────────────────── COOKIE ─────────────────────────── */
.cookie-bar {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-modal);
  width: min(27rem, calc(100vw - 2rem));
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  transform: translateY(140%);
  transition: transform var(--d-slow) var(--ease);
}
.cookie-bar.is-open { transform: translateY(0); }
.cookie-bar__title { font-family: var(--font-display); font-size: var(--t-md); margin-bottom: var(--s-2); }
.cookie-bar__text { font-size: var(--t-sm); color: var(--text-soft); margin-bottom: var(--s-4); }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ─────────────────────────── NOTIFICĂRI ─────────────────────────── */
.toaster {
  position: fixed;
  top: 6rem; right: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-toast);
  display: grid;
  gap: 0.6rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-800);
  color: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: toast-in var(--d-base) var(--ease);
}
.toast--err { background: var(--err); }
.toast.is-out { animation: toast-out var(--d-fast) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ─────────────────────────── DIVERSE ─────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: var(--t-xs); color: var(--text-mute); }
.breadcrumb a:hover { color: var(--ink-800); }

.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  background: var(--stone-100);
  border-left: 2px solid var(--brass-500);
  font-size: var(--t-sm);
  color: var(--ink-600);
}
.note--warn { background: var(--warn-bg); border-color: var(--warn); }
.note--err { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.note--ok { background: var(--ok-bg); border-color: var(--ok); }

.pager { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.pager__btn {
  min-width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  padding-inline: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.pager__btn:hover { border-color: var(--ink-400); }
.pager__btn[aria-current='page'] { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
.pager__btn[disabled] { opacity: 0.35; pointer-events: none; }

.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-5);
  text-align: center;
  color: var(--text-soft);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--stone-200);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Listă cu bifă, folosită la pachete și la ce includem */
.ticks { display: grid; gap: 0.7rem; }
.tick { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: var(--t-sm); color: var(--ink-600); }
.tick .icon { margin-top: 0.25rem; color: var(--brass-600); }
.tick--off { color: var(--text-mute); }
.tick--off .icon { color: var(--ink-300); }

/* Întrebări frecvente */
.acc { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--ink-900);
  transition: color var(--d-fast) var(--ease);
}
.acc__btn:hover { color: var(--brass-700); }
.acc__sign {
  flex: none;
  position: relative;
  width: 1.4rem; height: 1.4rem;
}
.acc__sign::before, .acc__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink-500);
  transition: transform var(--d-base) var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded='true'] .acc__sign::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-slow) var(--ease); }
.acc__btn[aria-expanded='true'] + .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-bottom: var(--s-5); color: var(--text-soft); max-width: var(--maxw-text); }

/* Bară discretă pentru actualizările venite din panou */
.live-note {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 0.7rem 0.7rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--t-sm);
  box-shadow: var(--shadow-lift);
  transform: translate(-50%, 150%);
  transition: transform var(--d-slow) var(--ease);
}
.live-note.is-in { transform: translate(-50%, 0); }
@media (max-width: 599px) {
  .live-note { left: 0.75rem; right: 0.75rem; width: auto; transform: translateY(150%); }
  .live-note.is-in { transform: translateY(0); }
}


/* ─────────────────── HARTĂ, ÎNCĂRCATĂ LA CERERE ───────────────────
   Folosită pe pagina de contact și pe pagina principală. Până când
   vizitatorul apasă butonul, Google nu primește nicio cerere. */
.map {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--stone-100);
  overflow: hidden;
}
.map__ph {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s-4);
  min-height: 18rem;
  padding: var(--s-6);
  text-align: center;
}
.map__art { width: min(22rem, 80%); }
.map__note { font-size: var(--t-sm); color: var(--text-soft); max-width: 40ch; }
.map__frame { display: block; width: 100%; min-height: 22rem; border: 0; }

/* ─────────────────── FOTOGRAFII REALE ───────────────────
   Toate pozele de pe site sunt făcute la firmă. Rama e discretă: colț mic,
   o umbră joasă și un chenar de o nuanță, ca fotografia să pară așezată pe
   hârtie, nu lipită peste ea. */
.photo {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--stone-100);
  box-shadow:
    0 1px 2px rgba(22, 25, 28, 0.06),
    0 18px 40px -30px rgba(22, 25, 28, 0.55);
}
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(22, 25, 28, 0.08);
  pointer-events: none;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fotografiile sunt făcute cu telefonul, în lumini diferite; o urmă de
     desaturare le aduce pe toate în paleta caldă a site-ului */
  filter: saturate(0.88);
}
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1 / 1; }

.photo__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(22, 25, 28, 0.72), transparent);
  color: #fff;
  font-size: var(--t-sm);
  line-height: 1.35;
}

.duo {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* Toate plăcile au același raport, deci rândurile ies egale; prima ocupă
   patru celule și își lasă înălțimea pe seama grilei — iese exact același
   raport, fără să-l scriu a doua oară. */
.gallery {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery .photo { aspect-ratio: 4 / 3; }
.gallery .photo:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
}
@media (max-width: 899px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .photo:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; height: auto; }
}
@media (max-width: 519px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery .photo:first-child { grid-column: auto; }
}

/* ─────────────────── CELE DOUĂ ADRESE ───────────────────
   Aceeași bucată de pagină apare și pe acasă, și pe contact. Pe contact
   stă într-o coloană îngustă, deci coloanele se pliază singure. */
.locs {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.loc { display: grid; align-content: start; gap: var(--s-4); }
.loc__label {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-600);
}
.loc__street {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--ink-900);
  margin-top: 0.35rem;
}
.loc__city { font-size: var(--t-sm); color: var(--text-soft); margin-top: 0.2rem; }
.loc__foot { margin-top: calc(var(--s-4) * -1 + 0.25rem); }
.locs .map__ph { min-height: 15rem; padding: var(--s-5); }
.locs .map__frame { min-height: 18rem; }