/* ============================================================
   Componente comune. TOATE paginile folosesc de aici.
   Nu se scriu butoane/inputuri noi in CSS-ul de pagina.
   ============================================================ */

/* ─────────────────────────── BUTOANE ─────────────────────────── */
.btn {
  --btn-bg: var(--sun-400);
  --btn-fg: var(--ink-900);
  --btn-border: var(--ink-900);
  --btn-shadow: var(--ink-900);
  --btn-lift: 3px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 2px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 var(--btn-lift) 0 0 var(--btn-shadow), 0 10px 18px -12px rgba(20, 17, 13, 0.5);
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--d-fast) var(--ease-out-back),
    box-shadow var(--d-fast) var(--ease-smooth),
    background-color var(--d-base) var(--ease-smooth),
    color var(--d-base) var(--ease-smooth);
}

/* reflexie care traverseaza butonul la hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.62) 46%, transparent 58%);
  transform: translateX(-120%);
  transition: transform var(--d-slow) var(--ease-smooth);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 calc(var(--btn-lift) + 2px) 0 0 var(--btn-shadow), 0 16px 26px -14px rgba(20, 17, 13, 0.55); }
.btn:active { transform: translate3d(0, var(--btn-lift), 0); box-shadow: 0 0 0 0 var(--btn-shadow), 0 4px 10px -8px rgba(20, 17, 13, 0.6); }
.btn[disabled], .btn[aria-disabled='true'] {
  cursor: not-allowed;
  --btn-bg: var(--ink-200);
  --btn-fg: var(--ink-500);
  --btn-border: var(--ink-300);
  --btn-shadow: var(--ink-300);
  transform: none;
}
.btn[disabled]::after { display: none; }

.btn .icon { stroke-width: 2; }

/* Variante */
.btn--jelly  { --btn-bg: var(--sun-400); --btn-fg: var(--ink-900); }
.btn--ink    { --btn-bg: var(--ink-900); --btn-fg: var(--sun-400); --btn-shadow: var(--sun-500); --btn-border: var(--ink-900); }
.btn--danger { --btn-bg: var(--red-500); --btn-fg: #fffdf7; }
.btn--mint   { --btn-bg: var(--mint-400); --btn-fg: var(--ink-900); }
.btn--sky    { --btn-bg: var(--sky-400); --btn-fg: var(--ink-900); }
.btn--white  { --btn-bg: #fff; --btn-fg: var(--ink-900); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-shadow: transparent;
  --btn-lift: 0px;
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--ink-900); background: var(--paper); box-shadow: none; transform: translate3d(0, -2px, 0); }
.btn--ghost:active { transform: none; }

.btn--lg { padding: 1.05em 2.1em; font-size: var(--t-md); --btn-lift: 4px; }
.btn--sm { padding: 0.6em 1.1em; font-size: var(--t-sm); --btn-lift: 2px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0.7em; aspect-ratio: 1; border-radius: var(--r-pill); }

/* Buton text cu sageata care aluneca */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--ink-900);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--sun-400);
  transition: border-color var(--d-base), gap var(--d-base) var(--ease-out-back);
}
.btn-text:hover { gap: 0.9em; border-color: var(--red-500); }

/* Stare de incarcare */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: '';
  position: absolute;
  width: 1.1em; height: 1.1em;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ink-900);
  animation: btn-spin 620ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────── BADGE / CHIP ─────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--sun-400);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--sun   { background: var(--sun-400); color: var(--ink-900); }
.badge--red   { background: var(--red-500); color: #fffdf7; }
.badge--mint  { background: var(--mint-500); color: var(--ink-900); }
.badge--sky   { background: var(--sky-500); color: #fffdf7; }
.badge--soft  { background: var(--paper-2); color: var(--ink-700); }
.badge--outline { background: transparent; color: var(--ink-700); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.95em;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast), transform var(--d-fast) var(--ease-out-back);
}
.chip:hover { border-color: var(--ink-900); transform: translateY(-1px); }
.chip[aria-pressed='true'], .chip.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--sun-400);
}
.chip__x { display: inline-flex; opacity: 0.6; }
.chip:hover .chip__x { opacity: 1; }

/* Eticheta de stare (comenzi, amanet) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-700);
}
.status::before { content: ''; width: 8px; height: 8px; 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); }
.status--live::before { animation: pulse-dot 1.8s var(--ease-smooth) infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 6px transparent; opacity: 0.75; }
}

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

.input, .select, .textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: 0 0 0 4px var(--sun-200);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

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

.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--red-500);
  background: var(--err-bg);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  margin-top: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--err);
}
.field__error:empty { display: none; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0; }
.input-group .btn { border-radius: 0 var(--r-pill) var(--r-pill) 0; }

/* prefix fix (ex. +40) */
.input-prefix { position: relative; }
.input-prefix__tag {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--ink-500);
  pointer-events: none;
}
.input-prefix .input { padding-left: 3.4rem; }

/* Checkbox si radio desenate de mana */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-700);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  position: relative;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.1rem;
  border: 2px solid var(--ink-400);
  border-radius: 7px;
  background: #fff;
  transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out-back);
}
.check__box::after {
  content: '';
  position: absolute;
  left: 0.38rem; top: 0.12rem;
  width: 0.35rem; height: 0.7rem;
  border: solid var(--ink-900);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--d-base) var(--ease-out-back);
}
.check input:checked + .check__box { background: var(--sun-400); border-color: var(--ink-900); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--sky-500); outline-offset: 2px; }
.check input[aria-invalid='true'] + .check__box { border-color: var(--red-500); }
.check--radio .check__box { border-radius: 50%; }
.check--radio .check__box::after {
  left: 50%; top: 50%;
  width: 0.6rem; height: 0.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink-900);
  transform: translate(-50%, -50%) scale(0);
}
.check--radio input:checked + .check__box::after { transform: translate(-50%, -50%) scale(1); }

/* Card selectabil (metode de plata / livrare) */
.option-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--ease-smooth);
}
.option-card:hover { border-color: var(--ink-300); transform: translateY(-2px); }
.option-card:has(input:checked) {
  border-color: var(--ink-900);
  box-shadow: var(--shadow-hard-sm);
}
.option-card:has(input:focus-visible) { outline: 3px solid var(--sky-500); outline-offset: 3px; }
.option-card__title { font-family: var(--font-display); font-weight: 600; }
.option-card__desc { font-size: var(--t-sm); color: var(--text-soft); }
.option-card__price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

/* ─────────────────────────── CARDURI ─────────────────────────── */
.card {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--ease-smooth), box-shadow var(--d-base) var(--ease-smooth), border-color var(--d-base);
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.card--flat { border-radius: var(--r-md); }
.card__body { padding: var(--s-5); }

/* Card produs */
.p-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-smooth), box-shadow var(--d-base) var(--ease-smooth), border-color var(--d-base);
}
.p-card:hover { transform: translateY(-5px); border-color: var(--ink-900); box-shadow: var(--shadow-lift); }
.p-card:focus-within { border-color: var(--ink-900); }
.p-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--paper);
  overflow: hidden;
}
.p-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grid-dot);
  background-size: 16px 16px;
  opacity: 0.55;
}
.p-card__art {
  position: relative;
  width: 68%;
  transition: transform var(--d-slow) var(--ease-out-back);
}
.p-card:hover .p-card__art { transform: translateY(-6px) rotate(-2deg) scale(1.04); }
.p-card__flags { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-direction: column; gap: 0.4rem; z-index: 2; }
.p-card__fav {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--line-strong);
  color: var(--ink-600);
  transition: color var(--d-fast), transform var(--d-fast) var(--ease-out-back), border-color var(--d-fast);
}
.p-card__fav:hover { color: var(--red-500); border-color: var(--red-400); transform: scale(1.08); }
.p-card__fav[aria-pressed='true'] { color: var(--red-500); }
.p-card__fav[aria-pressed='true'] .icon { fill: currentColor; }
.p-card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: var(--s-4) var(--s-5) var(--s-5); flex: 1; }
.p-card__brand { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-mute); }
.p-card__title { font-size: var(--t-md); line-height: 1.25; }
.p-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.p-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.35rem; }
.p-card__spec {
  font-size: var(--t-xs); font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: var(--r-xs);
  background: var(--paper-2);
  color: var(--ink-600);
}
.p-card__foot {
  display: flex;
  flex-wrap: wrap;            /* la carduri înguste butonul coboară, nu strivește prețul */
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1.5px dashed var(--line-strong);
}
.p-card__price { display: flex; flex-direction: column; line-height: 1.05; }
.p-card__price-now {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;        /* „1.899,00 lei" nu se rupe niciodată pe două rânduri */
}
.p-card__price-old { font-size: var(--t-xs); }
.p-card__add { position: relative; z-index: 2; }

/* ─────────────────────────── HEADER ─────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 2px solid transparent;
  transition: border-color var(--d-base), box-shadow var(--d-base), background var(--d-base);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -26px rgba(20, 17, 13, 0.6);
}

.topbar {
  background: var(--ink-900);
  color: var(--paper);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 2.4rem; }
.topbar__list { display: flex; gap: var(--s-5); }
.topbar__item { display: inline-flex; align-items: center; gap: 0.45em; color: var(--paper); opacity: 0.9; }
.topbar__item .icon { color: var(--sun-400); }
.topbar__item:hover { opacity: 1; }
.topbar__marquee { overflow: hidden; flex: 1; }

.nav { display: flex; align-items: center; gap: var(--s-5); min-height: 4.6rem; }
.nav__logo { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* Doar imaginile din logo, NU și SVG-urile din lockup-ul „CeCe" — altfel
   regula asta le-ar strivi la 2.7rem și C-urile s-ar face cât jumătate. */
.nav__logo > img { height: 2.7rem; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav__link {
  position: relative;
  /* iconițele sunt SVG-uri `display:block`, deci linkul trebuie să fie flex,
     altfel săgeata coboară pe rândul următor și rupe bara de navigație */
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink-700);
  transition: color var(--d-fast), background var(--d-fast);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0.28rem;
  width: 0; height: 2.5px;
  border-radius: var(--r-pill);
  background: var(--sun-400);
  transform: translateX(-50%);
  transition: width var(--d-base) var(--ease-out-back);
}
.nav__link:hover { color: var(--ink-900); }
.nav__link:hover::after { width: 46%; }
.nav__link[aria-current='page'] { color: var(--ink-900); }
.nav__link[aria-current='page']::after { width: 46%; background: var(--red-500); }
.nav__actions { display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  border: 2px solid transparent;
  color: var(--ink-800);
  transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out-back);
}
.icon-btn:hover { background: var(--paper-2); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-btn__count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 1.25rem; height: 1.25rem;
  padding: 0 0.28rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--red-500);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border: 2px solid #fff;
}
.icon-btn__count[data-count='0'] { display: none; }

/* Meniu mobil */
.burger { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: #fff;
  padding: var(--s-6) var(--gutter) var(--s-8);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--ease-smooth), visibility var(--d-slow);
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
}
@media (max-width: 979px) {
  .nav__links { display: none; }
  .burger { display: grid; }
}

/* ─────────────────────────── FOOTER ─────────────────────────── */
.site-footer {
  position: relative;
  background: var(--ink-900);
  color: #d9d3c8;
  padding-top: var(--s-9);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--sun-400) 0 42px, var(--red-500) 42px 84px, var(--mint-500) 84px 126px, var(--sky-500) 126px 168px);
}
.site-footer a { color: #d9d3c8; transition: color var(--d-fast); }
.site-footer a:hover { color: var(--sun-400); }
.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1.5fr repeat(3, 1fr);
}
@media (max-width: 979px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__title {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}
.footer__list { display: grid; gap: 0.7rem; font-size: var(--t-sm); }
.footer__bottom {
  margin-top: var(--s-8);
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-xs);
  color: #9d968a;
}
.footer__dev { display: inline-flex; align-items: center; gap: 0.5em; }
.footer__dev a { font-weight: 700; color: var(--sun-400); }
.footer__dev a:hover { color: #fff; }

/* ─────────────────────────── 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.7rem;
  padding: 0.85rem 1.35rem 0.85rem 0.9rem;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  background: #25d366;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: 0 3px 0 var(--ink-900), 0 18px 34px -18px rgba(20, 17, 13, 0.7);
  transform: translateY(0);
  transition: transform var(--d-base) var(--ease-out-back), box-shadow var(--d-base);
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 5px 0 var(--ink-900), 0 24px 40px -18px rgba(20, 17, 13, 0.75); }
.wa-float:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink-900); }
.wa-float__label { font-size: var(--t-sm); line-height: 1.15; }
.wa-float__label small { display: block; font-weight: 500; font-size: 0.72rem; opacity: 0.75; }
.wa-float__ring {
  position: relative;
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.wa-float__ring::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: wa-ping 2.4s var(--ease-smooth) infinite;
}
@keyframes wa-ping {
  0% { transform: scale(0.85); opacity: 0.9; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@media (max-width: 599px) {
  .wa-float__label { display: none; }
  .wa-float { padding: 0.8rem; }
}

/* ─────────────────────────── COOKIE / GDPR ─────────────────────────── */
.cookie-bar {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-modal);
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--s-5);
  background: #fff;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard);
  transform: translateY(140%);
  transition: transform var(--d-slow) var(--ease-out-back);
}
.cookie-bar.is-open { transform: translateY(0); }
.cookie-bar__title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; 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); }

/* ─────────────────────────── TOAST ─────────────────────────── */
.toaster {
  position: fixed;
  top: 5.5rem; right: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-toast);
  display: grid;
  gap: 0.6rem;
  width: min(23rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  animation: toast-in var(--d-slow) var(--ease-out-back);
}
.toast--ok .icon { color: var(--mint-400); }
.toast--err .icon { color: var(--red-400); }
.toast__text { font-size: var(--t-sm); }
.toast.is-out { animation: toast-out var(--d-base) var(--ease-smooth) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(18px) scale(0.96); } }

/* ─────────────────────────── DIVERSE ─────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: var(--t-sm); color: var(--text-mute); }
.breadcrumb a:hover { color: var(--ink-900); }
.breadcrumb .icon { width: 0.85em; height: 0.85em; opacity: 0.55; }

.pager { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.pager__btn {
  min-width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  padding-inline: 0.6rem;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 700;
  transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
.pager__btn:hover { border-color: var(--ink-900); }
.pager__btn[aria-current='page'] { background: var(--ink-900); border-color: var(--ink-900); color: var(--sun-400); }
.pager__btn[disabled] { opacity: 0.4; pointer-events: none; }

.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--paper);
  border-left: 4px solid var(--accent, var(--sun-400));
  font-size: var(--t-sm);
  color: var(--ink-700);
}
.note--warn { background: var(--warn-bg); border-color: var(--sun-600); }
.note--err { background: var(--err-bg); border-color: var(--red-500); color: var(--red-600); }
.note--ok { background: var(--ok-bg); border-color: var(--mint-500); }

.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-5);
  text-align: center;
  color: var(--text-soft);
}
.empty__art { width: min(15rem, 60%); opacity: 0.9; }

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

/* Panglica in stil logo, pentru titluri de sectiune */
.ribbon {
  display: inline-block;
  position: relative;
  padding: 0.35em 1.5em;
  background: var(--red-500);
  color: #fffdf7;
  font-family: var(--font-display);
  font-weight: 700;
  transform: rotate(-1.6deg);
  box-shadow: var(--shadow-hard-sm);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}

/* Bara cu avantaje (livrare, garantie, retur) */
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-4); }
.perk { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.perk__icon {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--r-md);
  background: var(--accent-soft, var(--sun-100));
  color: var(--ink-900);
  border: 2px solid var(--ink-900);
  box-shadow: var(--shadow-hard-sm);
}
.perk__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); }
.perk__text { font-size: var(--t-sm); color: var(--text-soft); }

/* Accordion (FAQ) */
.acc { border-bottom: 2px 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);
  font-weight: 600;
  transition: color var(--d-fast);
}
.acc__btn:hover { color: var(--red-600); }
.acc__sign {
  flex: none;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  transition: transform var(--d-base) var(--ease-out-back), background var(--d-base);
}
.acc__btn[aria-expanded='true'] .acc__sign { transform: rotate(45deg); background: var(--sun-400); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--ease-smooth);
}
.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: 68ch; }

/* ─────────────────────────── BRANDMARK ───────────────────────────
   Lockup-ul „CeCe / ce.. preț mic!" reconstruit in CSS + SVG,
   ca sa fie clar la orice dimensiune si sa poata face cu ochiul. */
.bm { display: inline-grid; gap: 0.1rem; line-height: 1; }
.bm__word {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.05rem;
  letter-spacing: -0.04em;
  color: var(--ink-900);
}

/* C-urile NU sunt litere din font, ci inele desenate — ca în logo. Așa au
   deschiderea suficient de mare cât să se citească „C" și la 2rem în header,
   nu „O" cu un ochi în mijloc. */
.bm__c {
  display: inline-block;
  width: 1.16em;
  height: 1.16em;
  margin-inline: -0.05em;
  flex: none;
}
.bm__c-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bm__c-outline { fill: none; stroke: var(--ink-900); stroke-width: 30; stroke-linecap: round; }
.bm__c-fill { fill: none; stroke: var(--sun-400); stroke-width: 20.5; stroke-linecap: round; }

.bm__e { color: var(--ink-900); }
.bm__eye-white { fill: #fff; stroke: var(--ink-900); stroke-width: 3.4; }
.bm__iris { fill: var(--sky-400); }
.bm__pupil { fill: var(--ink-900); transition: transform var(--d-slow) var(--ease-out-back); }
.bm__spark { fill: #fff; opacity: 0.95; }
/* valorile sunt în unități din viewBox-ul de 100, nu pixeli de ecran */
.nav__logo:hover .bm__pupil,
.bm:hover .bm__pupil { transform: translate(5px, 3px); }
.nav__logo:hover .bm__c:last-of-type .bm__pupil { transform: translate(-5px, 3px); }
.bm__ribbon {
  justify-self: start;
  padding: 0.12em 0.6em;
  border-radius: 4px 10px 4px 10px;
  background: var(--red-500);
  color: #fffdf7;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  transform: rotate(-1.2deg);
}
@media (max-width: 599px) { .bm__word { font-size: 1.55rem; } }

/* ─────────────────────────── MARQUEE ─────────────────────────── */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__item { white-space: nowrap; opacity: 0.85; }
.marquee__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sun-400); flex: none; }
.site-header:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─────────────────────────── MEGAMENU ─────────────────────────── */
/* Mega-meniul se centrează pe toată bara de navigație, nu pe linkul „Magazin".
   Ancorat pe link ieșea din ecran în stânga, fiindcă linkul stă lateral. */
.nav { position: relative; }
.megamenu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  width: min(56rem, 88vw);
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  /* `visibility`, nu atributul `hidden`: rămâne în layout ca să poată fi
     animat, dar iese și din ordinea de tabulare și din cititoarele de ecran. */
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--d-base) var(--ease-smooth),
    transform var(--d-base) var(--ease-smooth),
    visibility var(--d-base);
}
.nav__has-menu.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.megamenu__inner {
  display: grid;
  grid-template-columns: 1fr 15rem;
  gap: var(--s-5);
  padding: var(--s-5);
  background: #fff;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}
.megamenu__cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
.megacat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  transition: background var(--d-fast), transform var(--d-fast) var(--ease-out-back);
}
.megacat:hover { background: var(--paper); transform: translateX(3px); }
.megacat__icon {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--ink-900);
  border: 1.5px solid var(--ink-200);
}
.megacat__name { display: block; font-weight: 700; font-size: var(--t-sm); }
.megacat__count { display: block; font-size: var(--t-xs); color: var(--text-mute); }
.megamenu__side {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--paper);
  display: grid;
  align-content: start;
  gap: var(--s-3);
}
.megamenu__pitch { font-family: var(--font-display); font-size: var(--t-base); font-weight: 500; line-height: 1.35; }

/* ─────────────────────────── SEARCHBAR ─────────────────────────── */
.searchbar { border-top: 2px solid var(--line); background: #fff; }
.searchbar__inner { padding-block: var(--s-4); display: grid; gap: var(--s-3); }
.searchbar__form { display: flex; align-items: center; gap: var(--s-3); }
.searchbar__input {
  flex: 1;
  border: 0;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  background: transparent;
}
.searchbar__input::placeholder { color: var(--ink-300); }
.searchbar__hints { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.chip--sm { padding: 0.3em 0.7em; font-size: var(--t-xs); }

/* ─────────────────────────── MENIU MOBIL ─────────────────────────── */
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.mobile-menu__link--sub { font-family: var(--font-body); font-size: var(--t-base); font-weight: 600; padding-left: var(--s-4); color: var(--ink-600); border-bottom-width: 1px; }
.mobile-menu__foot { margin-top: var(--s-6); display: grid; gap: var(--s-3); }

/* ─────────────────────────── FOOTER EXTRA ─────────────────────────── */
.footer__top { display: grid; grid-template-columns: 20rem 1fr; gap: var(--s-8); }
@media (max-width: 1023px) { .footer__top { grid-template-columns: 1fr; } }
.footer__logo {
  width: 13rem;
  border-radius: var(--r-md);
  background: #fff;
  padding: 0.4rem;
}
.footer__claim { margin-top: var(--s-4); font-size: var(--t-sm); color: #b9b2a6; max-width: 30ch; }
.footer__social { display: flex; gap: 0.6rem; margin-top: var(--s-4); }
.footer__social a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out-back);
}
.footer__social a:hover { background: var(--sun-400); color: var(--ink-900); border-color: var(--sun-400); transform: translateY(-2px); }
.footer__title--gap { margin-top: var(--s-5); }
.footer__hours li { display: flex; justify-content: space-between; gap: var(--s-3); }
.footer__legalbox {
  margin-top: var(--s-8);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--t-xs);
  color: #9d968a;
  display: grid;
  gap: 0.6rem;
}
.footer__legalbox a { text-decoration: underline; text-underline-offset: 2px; }
.footer__pay { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.paytag {
  padding: 0.25em 0.6em;
  border-radius: var(--r-xs);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* ─────────────────────── ETICHETA NOU / SECOND HAND ───────────────────────
   Se pune pe cardul de produs și pe pagina produsului. Verde mentă pentru
   marfă nouă, galben cald pentru second hand: amândouă sunt vești bune aici,
   deci niciuna nu arată a avertisment. */
.tag-cond {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.34em 0.7em 0.34em 0.5em;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  background: var(--sun-300);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 2px 0 0 var(--ink-900);
}
.tag-cond .icon { stroke-width: 2.1; }
.tag-cond--nou { background: var(--mint-400); }
.tag-cond--second { background: var(--sun-300); }

/* pe pagina de produs stă lângă titlu, ceva mai mare și cu explicație dedesubt */
.tag-cond--lg { padding: 0.5em 1em 0.5em 0.75em; font-size: var(--t-sm); box-shadow: var(--shadow-hard-sm); }
.tag-cond__note { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--text-soft); max-width: 46ch; }

/* eticheta de stare stă jos-stânga peste ilustrație, ca să nu îngroașe
   stiva de insigne din colțul de sus */
.p-card__cond {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  max-width: calc(100% - var(--s-5));
}

/* ─────────────────────── ȚINTE DE ATINGERE PE TELEFON ───────────────────────
   Pe ecran tactil orice lucru pe care apeși are minim 44px pe verticală.
   Regula se aplică doar la degete, ca pe desktop butoanele să rămână zvelte. */
@media (pointer: coarse) {
  .btn--sm { min-height: 2.75rem; }
  .btn { min-height: 3rem; }
  .icon-btn { width: 2.9rem; height: 2.9rem; }
  .nav__link,
  .mobile-menu__link { min-height: 2.9rem; }
  .topbar__item { min-height: 2.5rem; }
  .btn-text { min-height: 2.75rem; align-items: center; }
  .chip { min-height: 2.5rem; }
  .p-card__fav { width: 2.75rem; height: 2.75rem; }
  .check { padding-block: 0.35rem; }
  .footer__list a,
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 2.4rem; }
  .pager__btn { min-width: 3rem; height: 3rem; }
}

/* ───────────────── PLASĂ DE SIGURANȚĂ PENTRU GRILE ─────────────────
   O pistă `1fr` nu poate coborî sub lățimea minimă a conținutului ei, iar un
   SVG sau un tabel lat umflă atunci toată coloana și taie pagina pe telefon.
   `min-width: 0` rupe cercul: pista poate deveni oricât de îngustă. */
.hero__inner > *,
.split__inner > *,
.pawn-block__head > *,
.page-hero__inner > *,
.perks > *,
.grid > * { min-width: 0; }

/* Aceeași problemă la grilele auto-fit: pe ecrane mai înguste decât minimul
   cerut, `min()` lasă coloana să se strângă în loc să iasă din ecran. */
.perks { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* Pe ecrane înguste cardul de opțiune trece pe două rânduri: bifa și textul sus,
   prețul dedesubt. Altfel cele trei coloane nu încap și ies câțiva pixeli. */
@media (max-width: 479px) {
  .option-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--s-4);
    row-gap: var(--s-2);
  }
  .option-card__price { grid-column: 2; justify-self: start; }
}

/* ─────────────────── SEMNALE ÎN TIMP REAL PE SITE ───────────────────
   Prețul care tocmai s-a schimbat clipește o dată, discret. Produsul vândut
   între timp se stinge, ca să nu dai clic degeaba. */
.is-live-change { animation: live-change 900ms var(--ease-out-back); }
@keyframes live-change {
  0% { background: transparent; }
  25% { background: var(--sun-200); }
  100% { background: transparent; }
}

.p-card.is-sold { opacity: 0.55; filter: saturate(0.5); }
.p-card.is-sold .p-card__add { pointer-events: none; }
.p-card.is-sold .p-card__media::after {
  content: 'S-a vândut';
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.4rem;
  background: var(--ink-900);
  color: var(--sun-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  z-index: 3;
}

.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: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  box-shadow: var(--shadow-hard);
  transform: translate(-50%, 160%);
  transition: transform var(--d-slow) var(--ease-out-back);
}
.live-note.is-in { transform: translate(-50%, 0); }
.live-note--err { background: var(--err-bg); border-color: var(--red-500); }
@media (max-width: 599px) {
  .live-note { left: 0.75rem; right: 0.75rem; width: auto; transform: translateY(160%); }
  .live-note.is-in { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-live-change { animation: none; }
}

/* ─────────────── ANTETUL PE TELEFON ───────────────
   Pe desktop lista de linkuri împinge acțiunile spre dreapta. Pe telefon lista
   dispare, deci trebuie împinse explicit — altfel se lipesc de logo.
   Și le desenăm ca butoane: meniul și coșul sunt exact ce caută omul întâi. */
.nav__actions { margin-left: auto; }

@media (max-width: 979px) {
  .nav { gap: var(--s-3); min-height: 4.2rem; }
  .nav__actions { gap: 0.45rem; }

  .nav__actions .icon-btn,
  .burger {
    width: 2.8rem;
    height: 2.8rem;
    border: 2px solid var(--ink-900);
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: 0 2px 0 0 var(--ink-900);
  }
  .nav__actions .icon-btn:hover,
  .burger:hover { transform: none; }
  .nav__actions .icon-btn:active,
  .burger:active { transform: translateY(2px); box-shadow: 0 0 0 0 var(--ink-900); }
  .nav__actions .icon-btn .icon,
  .burger .icon { stroke-width: 2.1; }

  /* coșul galben, meniul negru: se văd de la un metru.
     Selectorul trebuie să fie la fel de specific ca regula de mai sus, altfel
     „.nav__actions .icon-btn" o bate și butonul rămâne alb. */
  .nav__actions a[href='/cos'] { background: var(--sun-400); }
  .nav__actions .burger {
    background: var(--ink-900);
    color: var(--sun-400);
    box-shadow: 0 2px 0 0 var(--sun-600);
  }

  .icon-btn__count { top: -7px; right: -7px; border-width: 2px; }
}