@import url('./fonts.css');

/* ============================================================ design tokens */

:root {
  /* culori */
  --ink: #1a1714;
  --ink-2: #3d352e;
  --muted: #857a70;
  --line: #e4dcd2;
  --line-soft: #efe9e2;
  --bg: #f7f4f0;
  --surface: #ffffff;
  --clay: #c27a48;
  --clay-deep: #a26034;
  --clay-tint: #f4e6da;
  --ok: #3f7d5c;
  --warn: #b8863b;
  --err: #a4432f;

  /* tipografie */
  --font-display: 'Tenor Sans', 'Optima', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-2xl: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-3xl: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);

  --track-wide: 0.18em;
  --track-wider: 0.28em;

  /* spatiu */
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --pad-x: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
  --section: clamp(4rem, 2.5rem + 7vw, 9rem);
  --maxw: 1560px;

  --radius: 2px;
  --shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 8px 28px -12px rgba(26, 23, 20, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 74px;
}

/* ================================================================== reset */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--clay); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* fara animatii, elementele .reveal trebuie sa fie vizibile din start */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* plasa de siguranta: daca JS nu ruleaza, continutul ramane vizibil */
.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================== tipografie */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }

.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}

.lead { font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* ================================================================== layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
}

.section-head__text { max-width: 46ch; display: grid; gap: .75rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ================================================================= butoane */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { --btn-bg: var(--clay); --btn-bd: var(--clay); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; }

.btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn--clay { --btn-bg: var(--clay); --btn-bd: var(--clay); }
.btn--clay:hover { --btn-bg: var(--clay-deep); --btn-bd: var(--clay-deep); }

.btn--full { width: 100%; }
.btn--sm { padding: .65rem 1.25rem; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.link-underline:hover { color: var(--clay); gap: .85rem; }

/* ================================================================== header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.header__bar {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
}

.header__nav { display: flex; align-items: center; gap: clamp(1rem, .4rem + 1.4vw, 2.1rem); }
.header__nav--end { justify-content: flex-end; }

.navlink {
  position: relative;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding-block: .4rem;
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.navlink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink[aria-current="page"] { color: var(--clay); }

/* semnatura — folosim aceeasi familie ca in logo, cu spatiere larga */
.wordmark {
  font-family: var(--font-display);
  display: grid;
  justify-items: center;
  line-height: 1;
  text-align: center;
}
.wordmark__top {
  font-size: clamp(.95rem, .82rem + .5vw, 1.3rem);
  letter-spacing: .34em;
  text-indent: .34em;
}
.wordmark__bottom {
  font-size: clamp(.5rem, .45rem + .2vw, .62rem);
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--clay);
  margin-top: .34em;
}
.header--over .wordmark__bottom { color: rgba(255,255,255,.82); }

/* varianta transparenta peste hero */
.header--over {
  background: transparent;
  border-color: transparent;
  color: #fff;
}
.header--over .icon-btn { border-color: rgba(255,255,255,.4); }
.header--over .lang__btn { color: #fff; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.icon-btn:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
.icon-btn svg { width: 17px; height: 17px; }

/* selector de limba */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: .5rem .25rem;
}
.lang__btn svg { width: 11px; height: 11px; transition: transform .3s var(--ease); }
.lang[data-open="true"] .lang__btn svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  min-width: 148px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: .35rem;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 20;
}
.lang[data-open="true"] .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .8rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: background .2s var(--ease);
}
.lang__item:hover { background: var(--bg); }
.lang__item[aria-current="true"] { color: var(--clay); }
.lang__code { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--muted); }

/* meniu mobil */
.burger { display: none; width: 40px; height: 40px; place-items: center; }
.burger span {
  display: block; width: 20px; height: 1px; background: currentColor;
  position: relative; transition: background .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
  transition: transform .35s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--bg);
  z-index: 99;
  padding: var(--pad-x);
  display: grid;
  align-content: start;
  gap: .25rem;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a.m-link {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.4rem);
  padding-block: .55rem;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .m-foot { margin-top: 2rem; display: grid; gap: .5rem; font-size: var(--fs-sm); color: var(--muted); }

/* ==================================================================== hero */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(90vh, 900px);
  background: var(--bg);
}

.hero__text {
  display: grid;
  align-content: center;
  gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  padding: clamp(3rem, 2rem + 6vw, 7rem) clamp(1.5rem, .8rem + 4vw, 6rem);
  max-width: 46rem;
  justify-self: end;
  width: 100%;
}
.hero__title { font-size: var(--fs-3xl); }
.hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

.hero__media { position: relative; overflow: hidden; background: var(--clay-tint); }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* banda cu mesaje */
.marquee {
  background: var(--clay);
  color: #fff;
  overflow: hidden;
  padding-block: .95rem;
  --speed: 42s;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  padding-inline: 1.5rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item::after { content: '·'; opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ================================================================ produse */

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.25rem, .6rem + 2vw, 2.75rem) clamp(1rem, .5rem + 1.5vw, 2rem);
}

.card { display: grid; gap: .9rem; }

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--clay-tint);
  aspect-ratio: 3 / 4;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__badge {
  position: absolute;
  top: .85rem; left: .85rem;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: .35rem .7rem;
  z-index: 2;
}
/* Eticheta nu poate depăși cartea: pe telefon, „Cel mai cerut" ieșea din
   imagine și se tăia. Lățimea maximă lasă loc și butonului de favorite. */
.card__badge {
  max-width: calc(100% - 1.7rem - 46px);
  line-height: 1.3;
}

.card__badge--sale { background: var(--clay); color: #fff; }
.card__badge--out { background: var(--ink); color: #fff; }

.card__quick {
  position: absolute;
  left: .85rem; right: .85rem; bottom: .85rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  color: var(--ink);
  text-align: center;
  padding: .8rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }

.card__body { display: grid; gap: .3rem; }
.card__name { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.25; }
.card__sub { font-size: var(--fs-sm); color: var(--muted); }
.card__price { display: flex; align-items: baseline; gap: .6rem; font-size: var(--fs-sm); margin-top: .2rem; }
.card__price del { color: var(--muted); font-size: var(--fs-xs); }
.card__price ins { text-decoration: none; color: var(--clay); }

.swatches { display: flex; gap: .35rem; margin-top: .15rem; }
.swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.16);
}

/* ============================================================== categorii */

.grid-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(.75rem, .3rem + 1.4vw, 1.5rem);
}

.cat {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: #fff;
  padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  isolation: isolate;
}
.cat img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.cat::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,17,14,.72) 0%, rgba(20,17,14,.18) 52%, rgba(20,17,14,.04) 100%);
  transition: opacity .5s var(--ease);
}
.cat:hover img { transform: scale(1.05); }
.cat__name { font-family: var(--font-display); font-size: var(--fs-lg); }
.cat__count { font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .82; margin-top: .35rem; }

/* ============================================================== editorial */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
}
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__text { display: grid; gap: 1.1rem; max-width: 40rem; }

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.5rem, .8rem + 2.5vw, 3rem);
}
.value { display: grid; gap: .7rem; align-content: start; }
.value__icon { color: var(--clay); }
.value__icon svg { width: 26px; height: 26px; }
.value h3 { font-size: var(--fs-md); }
.value p { font-size: var(--fs-sm); color: var(--ink-2); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.25rem, .6rem + 2vw, 2.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
}
.stat__value { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--clay); }
.stat__label { font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); margin-top: .35rem; }

/* banda "vizitează magazinul" */
.visit {
  position: relative;
  isolation: isolate;
  color: #fff;
  display: grid;
  align-items: center;
  min-height: clamp(380px, 46vw, 560px);
  overflow: hidden;
}
.visit img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.visit::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,17,14,.82) 0%, rgba(20,17,14,.55) 48%, rgba(20,17,14,.22) 100%);
}
.visit__inner { display: grid; gap: 1.1rem; max-width: 34rem; padding-block: var(--section); }

/* ============================================================== formulare */

.field { display: grid; gap: .45rem; }

.label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.label span { color: var(--clay); }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: #cfc4b8; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(194,122,72,.13);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23857a70' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}

.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--err); }
.field__error { font-size: var(--fs-xs); color: var(--err); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-grid { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* alegere marime / culoare */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-width: 3.1rem;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-sm);
  text-align: center;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.chip--color { display: inline-flex; align-items: center; gap: .5rem; }
.chip--color i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }

.note {
  background: var(--clay-tint);
  border-left: 2px solid var(--clay);
  padding: .9rem 1.1rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.form-status { font-size: var(--fs-sm); padding: .9rem 1.1rem; border-radius: var(--radius); }
.form-status--ok { background: #eaf3ee; color: var(--ok); border: 1px solid #cfe4d8; }
.form-status--err { background: #fbeeeb; color: var(--err); border: 1px solid #f0d7d1; }

/* ============================================================== pagina produs */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.product__gallery { display: grid; gap: .75rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.product__main { aspect-ratio: 3/4; overflow: hidden; background: var(--clay-tint); }
.product__main img { width: 100%; height: 100%; object-fit: cover; }
.product__thumbs { display: flex; gap: .6rem; flex-wrap: wrap; }
.product__thumbs button {
  width: 74px; aspect-ratio: 3/4; overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .25s var(--ease), opacity .25s var(--ease);
  opacity: .65;
}
.product__thumbs button[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.product__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product__info { display: grid; gap: 1.4rem; align-content: start; }
.product__price { display: flex; align-items: baseline; gap: .85rem; font-size: var(--fs-lg); font-family: var(--font-display); }
.product__price del { font-size: var(--fs-md); color: var(--muted); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--clay); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .45rem; opacity: .5; }
.breadcrumb ol { display: contents; }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
}
.accordion__btn i {
  position: relative; width: 11px; height: 11px; flex-shrink: 0;
}
.accordion__btn i::before, .accordion__btn i::after {
  content: ''; position: absolute; background: currentColor; transition: transform .35s var(--ease);
}
.accordion__btn i::before { left: 0; top: 5px; width: 11px; height: 1px; }
.accordion__btn i::after { left: 5px; top: 0; width: 1px; height: 11px; }
.accordion__item[data-open="true"] .accordion__btn i::after { transform: scaleY(0); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.accordion__item[data-open="true"] .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 1.15rem; font-size: var(--fs-sm); color: var(--ink-2); }

.trust { display: grid; gap: .7rem; font-size: var(--fs-sm); color: var(--ink-2); }
.trust li { display: flex; gap: .65rem; align-items: flex-start; }
.trust svg { width: 16px; height: 16px; color: var(--clay); flex-shrink: 0; margin-top: .22rem; }

/* ============================================================== colectie */

.collection {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.5rem, .8rem + 3vw, 4rem);
  align-items: start;
}
.filters { display: grid; gap: 1.75rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.filter__title {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  font-weight: 500; margin-bottom: .85rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.filter__list { display: grid; gap: .1rem; }
.filter__item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem 0; font-size: var(--fs-sm); color: var(--ink-2);
  transition: color .25s var(--ease);
  text-align: left; width: 100%;
}
.filter__item:hover { color: var(--clay); }
.filter__item[aria-pressed="true"] { color: var(--clay); font-weight: 500; }
.filter__item span:last-child { color: var(--muted); font-size: var(--fs-xs); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line);
}
.toolbar__count { font-size: var(--fs-sm); color: var(--muted); }
.toolbar__right { display: flex; align-items: center; gap: .75rem; }
.filters-toggle { display: none; }

.empty { text-align: center; padding: clamp(3rem, 2rem + 4vw, 6rem) 1rem; display: grid; gap: 1rem; justify-items: center; }

/* ============================================================== continut */

.prose { max-width: 68ch; display: grid; gap: 1.1rem; }
.prose h2 { font-size: var(--fs-lg); margin-top: 1.4rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; }
.prose a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }

.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.page-hero__inner { display: grid; gap: .9rem; max-width: 52rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.table { min-width: 540px; font-size: var(--fs-sm); }
.table th, .table td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table thead th {
  background: var(--bg);
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: 500;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbf9f7; }

.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 76ch; }

/* ================================================================ contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.info-list { display: grid; gap: 1.5rem; }
.info { display: grid; gap: .3rem; }
.info__label { font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); }
.info__value { font-size: var(--fs-md); }
.info__value a:hover { color: var(--clay); }

.hours { display: grid; gap: .1rem; font-size: var(--fs-sm); }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dotted var(--line); }
.hours li[data-today="true"] { color: var(--clay); font-weight: 500; }

.open-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
}
.open-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.open-pill[data-open="true"] i { background: var(--ok); box-shadow: 0 0 0 3px rgba(63,125,92,.18); }
.open-pill[data-open="true"] { color: var(--ok); }
.open-pill[data-open="false"] { color: var(--muted); }

.map-frame { width: 100%; aspect-ratio: 16/11; border: 1px solid var(--line); filter: grayscale(.35) contrast(1.02); }

/* ================================================================== footer */

.footer { background: var(--ink); color: #d8cfc6; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) 2rem; }
.footer a { transition: color .25s var(--ease); }
.footer a:hover { color: var(--clay); }

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer .wordmark__top { color: #fff; }
.footer .wordmark { justify-items: start; text-align: left; }
.footer__brand { display: grid; gap: 1.1rem; align-content: start; max-width: 30rem; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: #fff; font-weight: 500; margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: .6rem; font-size: var(--fs-sm); }

.socials { display: flex; gap: .6rem; }
.socials a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.socials a:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.socials svg { width: 16px; height: 16px; }

.newsletter { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 190px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  padding: .8rem 1rem;
  font-size: var(--fs-sm);
}
.newsletter input::placeholder { color: rgba(216,207,198,.6); }
.newsletter input:focus { outline: none; border-color: var(--clay); }

.footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.75rem; font-size: var(--fs-xs); color: rgba(216,207,198,.65);
}
.footer__bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* =============================================================== consimtamant */

.consent {
  position: fixed;
  left: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  display: grid;
  gap: 1rem;
  z-index: 150;
  transform: translateY(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.consent[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.consent p { font-size: var(--fs-sm); color: var(--ink-2); }
.consent__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* =============================================================== utilitare */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack { display: grid; gap: 1rem; }
.center { text-align: center; justify-items: center; }
.skeleton {
  background: linear-gradient(100deg, var(--line-soft) 30%, #f6f1ec 50%, var(--line-soft) 70%);
  background-size: 240% 100%;
  animation: shimmer 1.3s infinite linear;
}
@keyframes shimmer { to { background-position: -240% 0; } }

/* ============================================================== responsive */

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .header__nav--start .navlink { display: none; }
  .burger { display: grid; }
  .wordmark { justify-self: center; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  /* Pe telefon imaginea urcă deasupra textului. Cu textul primul, el umplea un
     ecran întreg, imaginea încă unul, iar secțiunea părea două „hero"-uri
     diferite. Cu imaginea sus și înălțimea ei limitată, titlul intră în
     primul ecran și totul se citește ca un singur bloc. */
  /* Înălțime fixată, fără `aspect-ratio`: cu raport de aspect ȘI `max-height`,
     browserul păstrează raportul îngustând lățimea, iar imaginea nu mai
     ajungea până la marginea din dreapta a ecranului. */
  .hero__media {
    order: -1;
    aspect-ratio: auto;
    height: clamp(300px, 52vh, 620px);
    height: clamp(300px, 52dvh, 620px);
  }
  .hero__text {
    justify-self: stretch;
    max-width: none;
    padding-block: clamp(1.75rem, 1.3rem + 2.4vw, 3rem);
    gap: clamp(.8rem, .6rem + 1vw, 1.5rem);
  }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .product { grid-template-columns: 1fr; }
  .product__gallery { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 62px; }
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: 1.5rem .75rem; }
  .card__quick { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .hero__actions .btn { flex: 1 1 100%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* sub ~340px o singură coloană, altfel două (ca la magazinele de modă) */
@media (max-width: 340px) {
  .grid-products { grid-template-columns: 1fr; }
}

@media print {
  .header, .footer, .consent, .marquee, .btn { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Nivelul 2 — bara de utilitare, căutare, sertare, newsletter
   ========================================================================== */

.header__bar { grid-template-columns: 1fr auto 1fr; }

.utils { display: flex; align-items: center; gap: .15rem; justify-content: flex-end; }

.util {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: inherit;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.util:hover { background: rgba(26,23,20,.06); color: var(--clay); }
.util svg { width: 18px; height: 18px; }
.util__count {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--clay); color: #fff;
  border-radius: 8px;
  font-size: 10px; font-weight: 600; line-height: 16px;
  text-align: center;
  transform: scale(0);
  transition: transform .3s var(--ease);
}
.util__count[data-on="true"] { transform: scale(1); }

.util--lang {
  width: auto; padding-inline: .6rem; border-radius: 20px;
  font-size: var(--fs-xs); letter-spacing: .12em; font-weight: 500;
  gap: .3rem; grid-auto-flow: column;
}

/* ------------------------------------------------------------- căutare */

.search {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 120;
  transform: translateY(-100%);
  transition: transform .42s var(--ease);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}
.search[data-open="true"] { transform: none; }
.search__bar {
  display: flex; align-items: center; gap: 1rem;
  height: var(--header-h);
}
.search__input {
  flex: 1;
  border: 0; background: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  padding: 0;
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--muted); opacity: .7; }
.search__close {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--muted); transition: color .25s var(--ease);
}
.search__close:hover { color: var(--clay); }
.search__results { padding-bottom: 2.5rem; }
.search__hint { color: var(--muted); font-size: var(--fs-sm); padding-block: 1.5rem 2.5rem; }
.search__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.5rem 1rem;
  padding-top: 1.5rem;
}
.search__term {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--muted); padding-block: 1.25rem .5rem;
}

.backdrop {
  position: fixed; inset: 0;
  background: rgba(20,17,14,.42);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  z-index: 110;
}
.backdrop[data-open="true"] { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------- sertare */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(468px, 100%);
  background: var(--bg);
  z-index: 130;
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: -10px 0 50px -20px rgba(20,17,14,.45);
}
.drawer[data-open="true"] { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.drawer__title { font-family: var(--font-display); font-size: var(--fs-lg); }
.drawer__x {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--muted); transition: color .25s var(--ease), transform .25s var(--ease);
}
.drawer__x:hover { color: var(--ink); transform: rotate(90deg); }
.drawer__x svg { width: 16px; height: 16px; }
.drawer__body { overflow-y: auto; padding: 1.5rem; display: grid; gap: 1.25rem; align-content: start; }
.drawer__foot { padding: 1.5rem; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: .9rem; }

.drawer__empty {
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  padding: clamp(3rem, 2rem + 5vw, 6rem) 1rem;
}
.drawer__empty-icon {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--clay-tint); color: var(--clay);
  display: grid; place-items: center;
}
.drawer__empty-icon svg { width: 24px; height: 24px; }
.drawer__empty h3 { font-size: var(--fs-lg); }
.drawer__empty p { color: var(--muted); font-size: var(--fs-sm); max-width: 30ch; }

.line-item { display: grid; grid-template-columns: 78px 1fr; gap: 1rem; }
.line-item__img { aspect-ratio: 3/4; overflow: hidden; background: var(--clay-tint); }
.line-item__img img { width: 100%; height: 100%; object-fit: cover; }
.line-item__body { display: grid; gap: .3rem; align-content: start; }
.line-item__name { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.2; }
.line-item__meta { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; }
.line-item__price { font-size: var(--fs-sm); margin-top: .15rem; }
.line-item__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; }
.line-item__remove {
  font-size: var(--fs-xs); color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; transition: color .25s var(--ease);
}
.line-item__remove:hover { color: var(--err); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 13px; color: var(--muted); transition: color .2s var(--ease); }
.qty button:hover { color: var(--ink); }
.qty span { min-width: 26px; text-align: center; font-size: var(--fs-sm); }

.totals { display: grid; gap: .45rem; font-size: var(--fs-sm); }
.totals__row { display: flex; justify-content: space-between; gap: 1rem; }
.totals__row--grand { font-family: var(--font-display); font-size: var(--fs-md); padding-top: .55rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------- inimă pe cardul de produs */

.card__fav {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
  z-index: 3;
}
.card:hover .card__fav, .card__fav[data-on="true"], .card:focus-within .card__fav { opacity: 1; transform: none; }
.card__fav:hover { background: #fff; color: var(--clay); }
.card__fav[data-on="true"] { color: var(--clay); }
.card__fav svg { width: 16px; height: 16px; }
@media (hover: none) { .card__fav { opacity: 1; transform: none; } }

/* --------------------------------------------------------- newsletter band */

.nlband { background: var(--clay-tint); }
.nlband__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.nlband h2 { font-size: var(--fs-lg); max-width: 22ch; }
.nlband__form { display: grid; gap: .6rem; min-width: min(100%, 400px); }
.nlband__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.nlband__row input {
  flex: 1 1 200px;
  padding: .9rem 1rem;
  border: 1px solid rgba(26,23,20,.16);
  background: rgba(255,255,255,.7);
  font-size: var(--fs-sm);
}
.nlband__row input:focus { outline: none; border-color: var(--clay); background: #fff; }

/* -------------------------------------------------------------- lookbook */

.lookbook {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(.75rem, .4rem + 1.2vw, 1.25rem);
}
.look {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 3/4;
  overflow: hidden;
  color: #fff;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  isolation: isolate;
}
.look img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease);
}
.look::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,17,14,.7), rgba(20,17,14,.06) 62%);
}
.look:hover img { transform: scale(1.06); }
.look__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--track-wider); text-transform: uppercase; opacity: .85; }
.look__title { font-family: var(--font-display); font-size: var(--fs-lg); margin-top: .4rem; }
.look--plain { background: var(--clay); display: grid; place-content: center; text-align: center; }
.look--plain::after { display: none; }

/* ------------------------------------------------------------ rafinamente */

.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(247,244,240,.55) 0%, rgba(247,244,240,0) 32%);
  pointer-events: none;
}

.section-head__text h2 { max-width: 22ch; }

.card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20,17,14,0);
  transition: background .5s var(--ease);
  pointer-events: none;
}
.card:hover .card__media::after { background: rgba(20,17,14,.05); }

.eyebrow--line { display: inline-flex; align-items: center; gap: .8rem; }
.eyebrow--line::before {
  content: ''; width: 30px; height: 1px; background: currentColor; opacity: .55;
}

@media (max-width: 900px) {
  .utils .util--fav { display: none; }
  .nlband__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .drawer { width: 100%; }
  .search__grid { grid-template-columns: repeat(2, 1fr); }
}

.order-ref {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem;
  background: var(--clay-tint);
  border: 1px dashed var(--clay);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.order-ref b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }

/* ==========================================================================
   Responsive — corecții pe ecrane mici
   ========================================================================== */

/* Sub 720px bara de sus devine: burger | semnătură | utilitare esențiale.
   Selectorul de limbă coboară în meniul mobil, unde are loc să fie atins. */
@media (max-width: 720px) {
  .header__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; }
  .header__nav--start { gap: 0; }
  .wordmark { justify-self: center; }
  .wordmark__top { font-size: clamp(.86rem, .72rem + .8vw, 1.05rem); letter-spacing: .26em; text-indent: .26em; }
  .wordmark__bottom { letter-spacing: .38em; text-indent: .38em; }

  .utils { gap: 0; }
  .utils .lang { display: none; }          /* mutat în meniul mobil */
  /* Căutarea și coșul sunt singurele butoane din antet pe telefon: rămân la
     44px, minimul recomandat pentru atingere. Semnătura are loc și așa. */
  .util { width: 44px; height: 44px; }
  .util svg { width: 18px; height: 18px; }
}

@media (max-width: 380px) {
  .header__bar { gap: .25rem; }
  .util { width: 40px; height: 40px; }
  .util svg { width: 17px; height: 17px; }
  .wordmark__top { letter-spacing: .2em; text-indent: .2em; }
  .wordmark__bottom { font-size: .46rem; letter-spacing: .3em; text-indent: .3em; }
}

/* Limba în meniul mobil */
.m-lang { display: flex; gap: .5rem; margin-top: 1.5rem; }
.m-lang a {
  flex: 1;
  display: grid;
  place-items: center;
  padding: .85rem .5rem;
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.m-lang a[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Ținte de atingere: pe ecrane tactile totul interactiv trece de 24px, iar
   butoanele principale de 44px. */
@media (max-width: 900px) {
  .footer__col ul a,
  .footer__brand a:not(.socials a),
  .footer__bottom a { display: inline-block; padding-block: .35rem; }

  .link-underline { padding-block: .3rem 5px; }
  .breadcrumb a { display: inline-block; padding-block: .25rem; }
  .lang__item { padding-block: .8rem; }
  .filter__item { padding-block: .6rem; }
  .hours li { padding-block: .55rem; }
  .btn { padding-block: 1rem; }
  .btn--sm { padding-block: .8rem; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .qty button { width: 38px; height: 38px; }
  .accordion__btn { padding-block: 1.15rem; }
  .card__name a { display: inline-block; padding-block: .15rem; }
}

/* Meniul mobil: spațiu suficient sub bară și derulare proprie */
.mobile-menu { padding-bottom: 3rem; }
.mobile-menu a.m-link { padding-block: .7rem; }

/* Tabelele nu trebuie să spargă pagina — se derulează în interiorul lor */
.table-wrap { -webkit-overflow-scrolling: touch; }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* Banda derulantă: conținutul ei nu contează pentru lățimea paginii */
.marquee { contain: paint; }

/* Erou: pe telefon imaginea nu trebuie să ocupe tot ecranul. Plafonul în dvh
   ține cont de bara browserului care apare și dispare la derulare — cu vh,
   imaginea ieșea din ecran exact cât bara ocupă. */
@media (max-width: 640px) {
  .hero__media {
    aspect-ratio: auto;
    height: clamp(260px, 46vh, 460px);
    height: clamp(260px, 46dvh, 460px);
  }
  .hero__actions { gap: .6rem; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Pagina produsului pe telefon */
@media (max-width: 640px) {
  .product__thumbs button { width: 62px; }
  .product__price { font-size: var(--fs-lg); }
  .breadcrumb { font-size: 10.5px; }
}

/* Ecrane foarte late: conținutul nu se întinde la nesfârșit */
@media (min-width: 1800px) {
  :root { --maxw: 1680px; }
}

/* Ținte de atingere rămase: semnătura din antet și linkurile din text.
   Le mărim doar pe ecrane tactile, ca aspectul pe desktop să nu se schimbe. */
@media (max-width: 900px) {
  .wordmark { padding-block: .55rem; }
  .info__value a,
  .product__info a.small,
  .footer__col ul li > a,
  .m-foot a { display: inline-block; padding-block: .3rem; min-height: 24px; }
}

/* ---------------------------------------------------- densitate pe tabletă */

/* Pe tabletă în portret încap trei produse pe rând — două lăsau carduri
   nefiresc de late. */
@media (min-width: 700px) and (max-width: 1080px) {
  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bara de filtre revine mai devreme: pe tabletă în peisaj (1024) e loc
   pentru ea lângă grilă. */
@media (min-width: 901px) and (max-width: 1080px) {
  .collection { grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; }
  .filters { position: sticky; display: grid; border: 0; padding: 0; background: none; }
  .filters-toggle { display: none; }
}

/* Sub 900px filtrele stau ascunse în spatele butonului „Filtre”. */
@media (max-width: 900px) {
  .collection { grid-template-columns: 1fr; }
  .filters { position: static; display: none; padding: 1.25rem; border: 1px solid var(--line); background: var(--surface); }
  .filters[data-open="true"] { display: grid; }
  .filters-toggle { display: inline-flex; }
}

/* Patru pe rând doar de la ecrane late în sus */
@media (min-width: 1400px) {
  .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Antet — aranjare robustă
   ==========================================================================
   Grila „1fr auto 1fr” forța ambele coloane laterale la lățimea celei mai late
   (navigația), deci antetul cerea ~1330px ca să încapă și ieșea din ecran între
   900 și 1330px. Trecem pe flex, cu semnătura centrată absolut: fiecare parte
   ocupă exact cât îi trebuie, iar semnătura rămâne fix pe mijlocul paginii.
*/
.header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.header__bar > .wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.header__nav--start,
.utils { flex: 0 0 auto; }

/* Navigația completă apare doar când chiar încape lângă semnătură. */
.header__nav--start .navlink { display: none; }
.burger { display: grid; }

@media (min-width: 1260px) {
  .header__nav--start .navlink { display: block; }
  .burger { display: none; }
  .header__nav--start { gap: clamp(.85rem, .2rem + 1vw, 2rem); }
  .navlink { font-size: 10.5px; letter-spacing: .14em; }
}

@media (min-width: 1500px) {
  .navlink { font-size: var(--fs-xs); letter-spacing: var(--track-wide); }
}

/* Sub pragul navigației, limba stă în meniul mobil (regula de mai sus o ascunde
   până la 720px — o extindem până la pragul real al navigației). */
@media (max-width: 1259px) {
  .utils .lang { display: none; }
}
@media (min-width: 1260px) {
  .utils .lang { display: block; }
  .utils { gap: .15rem; }
}

/* Meniul mobil este o grilă: fără o coloană mărginită, cel mai lung text
   (adresa magazinului) întindea toate elementele dincolo de ecran. */
.mobile-menu {
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: break-word;
}
.mobile-menu nav { display: grid; grid-template-columns: minmax(0, 1fr); }
.m-foot { min-width: 0; }
.m-foot a, .m-foot span { overflow-wrap: anywhere; }

/* Conținutul randat pe server pentru crawlerele fără JavaScript. Este șters
   în timpul parsării paginii, deci vizitatorii nu îl văd niciodată. Stilul de
   mai jos există doar ca plasă de siguranță, dacă scriptul nu ar rula. */
#ssr {
  max-width: 68ch;
  margin: 0 auto;
  padding: var(--pad-x);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
#ssr h1 { font-size: var(--fs-xl); margin-bottom: .5rem; }
#ssr h2 { font-size: var(--fs-lg); margin: 1.5rem 0 .4rem; }
#ssr p { margin-bottom: .5rem; }
#ssr article { margin-bottom: 1.5rem; }

/* ------------------------------------------------------ pagina de mulțumire */

.thanks {
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(1rem, .5rem + 2vw, 3rem);
}
.thanks__mark {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #eaf3ee; color: var(--ok);
}
.thanks__mark svg { width: 30px; height: 30px; }
.thanks__ref {
  display: grid; gap: .3rem; justify-items: center;
  padding: 1.1rem 1.75rem;
  background: var(--clay-tint);
  border: 1px dashed var(--clay);
  border-radius: var(--radius);
}
.thanks__ref b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-lg); letter-spacing: .08em; color: var(--clay-deep);
}
.thanks__steps { text-align: left; width: 100%; margin-top: .5rem; }
.thanks__steps h2 { font-size: var(--fs-lg); margin-bottom: 1rem; text-align: center; }
.thanks__steps ol { display: grid; gap: .9rem; }
.thanks__steps li { display: flex; gap: .85rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.thanks__steps i {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
}

/* Pictograma din butoanele de favorite are nevoie de dimensiune explicită:
   fără ea, SVG-ul se întindea pe toată lățimea butonului. */
.fav-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; }
.fav-ico svg { width: 16px; height: 16px; display: block; }
.card__fav .fav-ico { width: 16px; height: 16px; }
.btn--fav { gap: .55rem; }
.btn--fav[data-on="true"] { color: var(--clay); border-color: var(--clay); }
.btn--fav[data-on="true"]:hover { background: var(--clay); color: #fff; }

/* Culoarea produsului: una singură, afișată ca fapt, nu ca opțiune */
.color-shown { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-base); }
.color-shown i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }

/* Cerere primită, dar neînregistrată automat — clientul trebuie să sune */
.thanks__pending {
  display: grid; gap: 1rem; justify-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--warn-bg, #fbf2e2);
  border: 1px solid #ecdcbd;
  border-radius: var(--radius);
  max-width: 34rem;
}
.thanks__pending p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ==========================================================================
   Nivelul 4 — corecții pentru telefoane și tablete

   Trei categorii de probleme, toate vizibile doar pe ecran mic:
   câmpuri pe care Safari le mărea la atingere, ținte prea mici pentru deget
   și text sub pragul de lizibilitate.
   ========================================================================== */

/* Safari pe iPhone mărește automat pagina când intri într-un câmp cu text sub
   16px, iar vizitatorul rămâne cu ea mărită și trebuie să o micșoreze manual.
   La 16px comportamentul dispare. Aspectul rămâne același: 16px este exact
   dimensiunea la care erau desenate câmpurile pe desktop. */
@media (max-width: 900px) {
  .input, .select, .textarea,
  .nlband__row input,
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="search"], input[type="number"], textarea, select {
    font-size: 16px;
  }
}

/* Ținte de atingere. Butonul de favorite stă peste imaginea produsului, unde
   degetul ratează ușor un cerc de 34px. */
@media (hover: none), (max-width: 900px) {
  .card__fav { width: 42px; height: 42px; top: .5rem; right: .5rem; }
  .card__fav svg, .card__fav .fav-ico { width: 17px; height: 17px; }
  .drawer__x { width: 44px; height: 44px; display: grid; place-items: center; }
  .search__close { padding: .75rem .25rem; }
}

/* Text prea mic. „PALTON" de sub semnătură ajungea la ~7px pe telefon —
   sub pragul la care literele mai pot fi distinse. */
@media (max-width: 900px) {
  .wordmark__bottom { font-size: 9px; }
  .btn, .btn--sm { font-size: 12px; }
  .eyebrow, .cat__count, .link-underline { font-size: 12px; }
  .breadcrumb { font-size: 12px; }
}
@media (max-width: 380px) {
  .wordmark__bottom { font-size: 8.5px; }
}

/* Derularea în interiorul unui strat deschis nu trebuie să tragă și pagina de
   dedesubt: pe telefon, ajungeai la capătul meniului și continua să se miște
   site-ul din spate. */
.mobile-menu, .drawer__body, .search, .fav-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Meniul mobil ocupă exact ecranul vizibil. Cu `inset: … 0 0` și bara
   browserului ascunsă, ultimele linkuri rămâneau sub marginea de jos. */
.mobile-menu {
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  padding-bottom: calc(var(--pad-x) + 2rem);
}

/* Pe ecrane tactile efectele de hover rămân „lipite" după atingere: elementul
   păstrează starea de hover până la următoarea atingere în altă parte. */
@media (hover: none) {
  .card:hover .card__media img,
  .cat:hover img,
  .look:hover img { transform: none; }
  .card:hover .card__media::after { background: rgba(20,17,14,0); }
  .link-underline:hover { gap: .5rem; }
}

/* Categoriile: trei plăci pe toată lățimea, fiecare de 4/5, însemnau peste
   1200px de derulare pe telefon pentru trei linkuri. Pătratul le scurtează
   cu o treime, iar cadrul rămâne pe bustul modelului. */
@media (max-width: 640px) {
  .cat { aspect-ratio: 1 / 1; }
  .cat img { object-position: center 22%; }
}

/* Sertarele și banda de cookie-uri pe telefon */
@media (max-width: 640px) {
  .drawer { width: 100%; }
  .drawer__foot { padding-bottom: 1.25rem; }
  .consent { padding: 1.1rem; gap: .8rem; }
  .consent .btn { flex: 1 1 100%; }
}

/* Ecrane joase (telefon în peisaj): imaginea din erou nu poate lua tot ecranul */
@media (max-height: 520px) and (max-width: 900px) {
  .hero__media { height: 62vh; height: 62dvh; }
  .mobile-menu a.m-link { font-size: 1.25rem; padding-block: .4rem; }
}

/* Etichetele scrise cu majuscule și spațiere largă rămâneau la 11px pe
   telefon — lizibile pe hârtie, dar nu la lumina zilei, pe un ecran de 320px. */
@media (max-width: 900px) {
  .label, .info__label, .footer__col h4,
  .footer__bottom, .m-lang a, .stat__label, .search__term {
    font-size: 12px;
  }
  .footer__col ul { font-size: 14px; gap: .35rem; }
}

/* Lista de linkuri din subsol este densă: fără spațiu pe verticală, degetul
   nimerește ușor linia de deasupra. */
@media (max-width: 900px) {
  .footer__col ul a,
  .footer__col ul li > a,
  .footer__brand a:not(.socials a),
  .footer__bottom a { padding-block: .55rem; min-height: 40px; display: inline-flex; align-items: center; }
  .m-lang a { padding-block: 1rem; }
}

/* În grila de două coloane de pe telefon, eticheta are sub 100px la dispoziție:
   spațierea largă între litere o scotea din cadru. */
@media (max-width: 640px) {
  .card__badge { letter-spacing: .08em; padding: .3rem .55rem; }
}

/* Numele produsului din grilă e un link de 26px înălțime. Îi mărim zona de
   atins fără să mișcăm nimic în pagină: marginea negativă anulează exact
   spațiul adăugat de padding. */
@media (hover: none), (max-width: 900px) {
  .card__name a {
    display: block;
    padding-block: .3rem;
    margin-block: -.3rem;
  }
}