/* Dbag: o singură pagină. Culorile vin din logo (espresso) și din fundalul pozelor (gri de studio);
   nuanțele de fundal ale genților sunt calculate de tools/poze.py din culoarea fiecărei genți. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url("../fonts/instrument-sans-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url("../fonts/instrument-sans-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --studio: #ECEAE7;
  --ink: #281C14;
  --ink-2: #5C4D43;
  --ink-hover: #3D2C21;
  --crem: #F2ECE4;
  --crem-2: #C9BCB0;
  --crem-hover: #FBF6F0;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margine: clamp(1rem, 4vw, 3.25rem);
  --antet: clamp(4.25rem, 6vw, 5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* straturi */
  --z-continut: 1;
  --z-antet: 10;
  --z-intro: 50;
  --z-sari: 60;
}

/* Lenis (din lenis.css 1.3.26) */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--studio);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure { margin: 0; }
p { text-wrap: pretty; }
img { display: block; }
a { color: inherit; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.sari {
  position: absolute;
  top: 0.75rem;
  left: var(--margine);
  z-index: var(--z-sari);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--crem);
  font-weight: 560;
  text-decoration: none;
  transform: translateY(-200%);
}
.sari:focus-visible { transform: none; outline-color: var(--ink); }

/* Wordmark: logo-ul real („d bag” scris de mână) ca mască pe culoarea textului,
   deci espresso pe fundal luminos și crem pe finalul închis. Se dimensionează în em,
   ca să stea lângă text; linia de bază a scrisului e la 57,5% din înălțimea logo-ului,
   așa că restul de 42,5% coboară sub rând. Numele rămâne text doar în title, meta, alt,
   aria-label și mesajele WhatsApp. */
.wordmark {
  --wm-h: 1.9em;
  display: inline-block;
  height: var(--wm-h);
  aspect-ratio: 840 / 643;
  vertical-align: calc(var(--wm-h) * -0.425);
  background-color: currentColor;
  -webkit-mask: url("../img/logo-dbag.png") center / contain no-repeat;
  mask: url("../img/logo-dbag.png") center / contain no-repeat;
}
/* Varianta de sine stătătoare (antet, subsol): lățimea o dă locul în care stă. */
.wordmark--bloc {
  display: block;
  height: auto;
  vertical-align: baseline;
}

/* Rânduri de titlu care urcă dintr-o mască. Spațiul de jos păstrează virgula lui „ș” și coada lui „p”. */
.rand {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.2em;
  margin-bottom: -0.2em;
}
.rand > span {
  display: inline-block;
  text-wrap: balance; /* un rând prea lung pentru telefon se rupe echilibrat, dar intră tot ca un singur rând */
}

/* Butoane: complet rotunjite; pozele nu au colțuri (gențile sunt decupate). */
.buton {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0 1.6rem 0 1.3rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--crem);
  font-size: 1.0625rem;
  font-weight: 560;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
.buton .icon { width: 1.4em; height: 1.4em; }
.buton:active { transform: scale(0.97); }
.buton:focus-visible { outline-color: var(--ink); border-radius: 999px; }

.buton--crem { background: var(--crem); color: var(--ink); }
.buton--crem:focus-visible { outline-color: var(--crem); }

@media (hover: hover) {
  .buton:hover { background: var(--ink-hover); }
  .buton--crem:hover { background: var(--crem-hover); }
}

/* Umbra de sub genți: genții decupați le lipsește podeaua. */
.umbra {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: -1.5%;
  height: 7%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(40 28 20 / 0.26), rgb(40 28 20 / 0));
  pointer-events: none;
}

/* Intro: logo-ul se scrie, apoi zboară în antet. Apare doar cu clasa .cu-intro (vezi <head>). */
.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  place-items: center;
}
/* Cortina e separată de logo, ca logo-ul să nu fie tăiat când zboară în antet. */
.intro__cortina {
  position: absolute;
  inset: 0;
  background: var(--studio);
}
.cu-intro .intro {
  display: grid;
  /* plasă de siguranță dacă JavaScript nu pornește */
  animation: intro-ascunde 0.4s ease-out 5s forwards;
}
.intro.intro--activ { animation: none; }
.intro__logo {
  position: relative;
  width: min(68vw, 32.5rem);
  height: auto;
  overflow: visible;
}
.cu-intro .antet__logo .wordmark {
  opacity: 0;
  animation: apare 0.3s ease-out 5s forwards;
}

/* Starea de pornire a hero-ului, până preia GSAP. */
.asteapta :is(.hero__geanta, .hero__titlu .rand > span, .hero__sub, .hero__actiuni, .antet__ig) {
  visibility: hidden;
  animation: devine-vizibil 0s linear 5s forwards;
}

@keyframes intro-ascunde { to { opacity: 0; visibility: hidden; } }
@keyframes apare { to { opacity: 1; } }
@keyframes devine-vizibil { to { visibility: visible; } }

/* Antet */
.antet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-antet);
  height: var(--antet);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margine);
}
.antet__logo {
  display: block;
  border-radius: 6px;
}
.antet__logo .wordmark { width: clamp(4.75rem, 7vw, 6rem); }
.antet__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  justify-content: center;
  font-size: 0.9688rem;
  font-weight: 520;
  text-decoration: none;
  border-radius: 999px;
}
.antet__ig .icon { width: 1.5em; height: 1.5em; }
@media (max-width: 30rem) {
  .antet__ig-text { display: none; }
}
@media (hover: hover) {
  .antet__ig:hover .antet__ig-text { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: end;
  gap: clamp(1.25rem, 3.5vh, 2rem);
  padding: var(--antet) var(--margine) clamp(1.75rem, 6vh, 3.5rem);
}
.hero__geanta {
  position: relative;
  isolation: isolate;
  order: -1;
  justify-self: center;
  height: min(44svh, 86vw);
}
.hero__plutire { height: 100%; }
/* Pozele decupate se dimensionează după înălțime; max-width le-ar turti. */
.hero__geanta img,
.geanta__poza img { max-width: none; }
.hero__geanta img {
  height: 100%;
  width: auto;
}
.hero__text { position: relative; z-index: var(--z-continut); }
.hero__titlu {
  font-size: clamp(2.75rem, 1.15rem + 6.4vw, 6rem);
  font-weight: 560;
  font-stretch: 82%;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.hero__sub {
  margin-top: clamp(0.9rem, 2.4vh, 1.4rem);
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
}
.hero__actiuni { margin-top: clamp(1.25rem, 3.5vh, 2.25rem); }

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: stretch;
    align-items: center;
    column-gap: 1.5rem;
    padding-bottom: 0;
  }
  .hero__text {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: end;
    padding-bottom: clamp(3rem, 13vh, 8rem);
  }
  .hero__geanta {
    grid-column: 6 / 13;
    grid-row: 1;
    order: 0;
    height: min(76svh, 44vw);
    margin-top: 2vh;
  }
}

/* Galeria: implicit e o stivă verticală (telefon, iPad, „Reduce motion”, fără JavaScript).
   Pe desktop cu mouse, js/main.js adaugă .orizontal pe <html> și o transformă în bandă fixată. */
.galerie { position: relative; }

.panou { padding: clamp(4.5rem, 13vh, 8rem) var(--margine); }

/* Dimensiunile titlurilor mari sunt alese ca fiecare rând să încapă pe un singur rând de la 360px în sus. */
.galerie__titlu {
  font-size: clamp(2rem, 8.8vw, 4.75rem);
  font-weight: 560;
  font-stretch: 84%;
  letter-spacing: -0.032em;
  line-height: 1.04;
}
/* Al treilea rând continuă ideea, mai mic, ca să nu se rupă pe telefon. */
.galerie__titlu .rand:nth-child(3) {
  margin-top: 0.15em;
  font-size: 0.7em;
  letter-spacing: -0.025em;
}
.modele {
  display: grid;
  gap: 1.75rem 3rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 60rem;
}
.model__nume {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.model p {
  color: var(--ink-2);
  max-width: 38ch;
}
.nota {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  font-weight: 540;
  max-width: 40ch;
}
@media (min-width: 45rem) {
  .modele { grid-template-columns: 1fr 1fr; }
}

.geanta {
  display: grid;
  gap: clamp(1.5rem, 4vh, 2.25rem);
  justify-items: center;
  align-content: center;
  min-height: 88svh;
}
/* Fără animații, fiecare geantă își poartă singură nuanța. Cu animații, se colorează toată pagina. */
html:not(.miscare) :is(.geanta, .galerie__replica) { background: var(--nuanta); }

/* Replicile din galerie: titlul de la prima schimbare de culoare și rândul de lângă ultima geantă. */
.galerie__replica {
  display: grid;
  align-content: center;
  min-height: 44svh;
}
.replica {
  font-size: clamp(1.75rem, 7.9vw, 5.25rem);
  font-weight: 560;
  font-stretch: 82%;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

/* Între galerie și final: trei rânduri în trepte. */
.calitate { padding: clamp(6rem, 22vh, 13rem) var(--margine); }
.calitate__text {
  font-size: clamp(2.1rem, 0.9rem + 6.4vw, 6rem);
  font-weight: 560;
  font-stretch: 82%;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
@media (min-width: 48rem) {
  .calitate__text .rand:nth-child(2) { padding-left: 18%; }
  .calitate__text .rand:nth-child(3) { padding-left: 36%; }
}

/* Înălțimea pozei e limitată și de lățimea disponibilă (--raport = lățime / înălțime, din index.html),
   ca gențile late să nu iasă din ecran. */
.geanta__poza {
  --loc: calc(100vw - 2 * var(--margine));
  position: relative;
  isolation: isolate;
  height: min(54svh, var(--loc) / var(--raport));
}
.geanta[data-forma="inalta"] .geanta__poza { height: min(62svh, var(--loc) / var(--raport)); }
.geanta__poza img {
  height: 100%;
  width: auto;
}
/* Gențile cu schiță de atelier (js/schita.js) au nevoie de loc în dreapta pentru cota de înălțime. */
html:not(.orizontal) .geanta--schita .geanta__poza {
  --loc: calc(100vw - 2 * var(--margine) - 3rem);
  margin-right: 3rem;
}
/* La Slouchy, cota de adâncime stă sub cea de lățime: puțin loc în plus până la text. */
html:not(.orizontal) .geanta--schita[data-forma="inalta"] .geanta__poza { margin-bottom: 1.25rem; }

/* Schița de atelier: linii de 1px și cifre mici peste poză, fără card. */
.schita {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
}
.schita svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.schita path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.schita .schita__sageata { shape-rendering: geometricPrecision; }
.schita__cota {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  font-weight: 520;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
/* Fără animații („Reduce motion”), schița apare direct. */
.schita--vizibila,
.schita--vizibila .schita__cota { opacity: 1; }

/* Butonul „mărimi”: vizibil pe ecranele tactile; pe desktop apare doar la focus cu tastatura. */
.geanta__marimi {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  margin-top: 0.4rem;
  padding: 0 0.85rem;
  border: 1px solid rgb(40 28 20 / 0.35);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 540;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
/* Zona de atingere crește la 44px fără să mărească butonul. */
.geanta__marimi::before {
  content: "";
  position: absolute;
  inset: -6px -4px;
}
.geanta__marimi:active { transform: scale(0.97); }
.geanta__marimi[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--crem);
}
.geanta__marimi:focus-visible { border-radius: 999px; }
@media (hover: hover) {
  .geanta__marimi:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.geanta__text {
  justify-self: stretch;
  display: grid;
  justify-items: start;
  gap: 0.3rem;
}
.geanta__model {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.5rem);
  font-weight: 560;
  font-stretch: 82%;
  letter-spacing: -0.032em;
  line-height: 1;
}
.geanta__detaliu {
  color: var(--ink-2);
  font-size: 1.0625rem;
}
.geanta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  margin-top: 0.35rem;
  font-weight: 580;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.geanta__link .icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.2s var(--ease-out);
}
@media (hover: hover) {
  .geanta__link:hover .icon { transform: translate(2px, -2px); }
}

@media (min-width: 48rem) {
  html:not(.orizontal) .geanta {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    column-gap: 5vw;
  }
  html:not(.orizontal) .geanta__poza {
    --loc: calc((100vw - 2 * var(--margine) - 5vw) * 0.55);
    height: min(68svh, var(--loc) / var(--raport));
  }
  html:not(.orizontal) .geanta[data-forma="inalta"] .geanta__poza { height: min(76svh, var(--loc) / var(--raport)); }
  html:not(.orizontal) .geanta--schita .geanta__poza { --loc: calc((100vw - 2 * var(--margine) - 5vw) * 0.55 - 3rem); }
  html:not(.orizontal) .geanta:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  html:not(.orizontal) .geanta:nth-of-type(even) .geanta__poza { order: 2; }
}

.galerie__progres { display: none; }

/* Banda orizontală fixată (doar ecrane ≥ 1024 px cu mouse sau trackpad, fără „Reduce motion”). */
.orizontal .galerie {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip; /* împiedică browserul să deruleze banda singur când un link primește focus */
}
.orizontal .galerie__pista {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.orizontal .panou {
  flex: none;
  height: 100%;
  padding: 0;
}
.orizontal .galerie__intro {
  width: 66vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6vw 0 var(--margine);
}
.orizontal .geanta {
  width: 84vw;
  min-height: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 100%;
  align-items: center;
  justify-items: stretch;
  column-gap: 1.5rem;
  padding: 0 2vw;
}
.orizontal .geanta__poza {
  --loc: 44vw; /* 7 din 12 coloane ale panoului de 84vw, rotunjit */
  grid-column: 1 / 8;
  grid-row: 1;
  justify-self: center;
  height: min(68vh, var(--loc) / var(--raport));
}
.orizontal .geanta[data-forma="inalta"] .geanta__poza { height: min(80vh, var(--loc) / var(--raport)); }
.orizontal .geanta__text {
  grid-column: 8 / 13;
  grid-row: 1;
  align-self: end;
  padding-bottom: 17vh;
}
.orizontal .geanta:nth-of-type(even) .geanta__poza {
  --loc: 50vw;
  grid-column: 5 / 13;
}
.orizontal .geanta:nth-of-type(even) .geanta__text {
  grid-column: 1 / 5;
  align-self: start;
  padding: 17vh 0 0;
}
.orizontal .galerie__titlu { font-size: min(4.75rem, 5.2vw); }
.orizontal .galerie__replica {
  width: 62vw;
  min-height: 0;
  padding: 0 6vw;
}
/* Pe desktop replicile rămân mari și se rup echilibrat în două rânduri. */
.orizontal .replica { max-width: 13ch; }
/* Destul de îngustă cât ultima geantă să rămână întreagă pe ecran la capătul benzii. */
.orizontal .galerie__replica--ultima {
  width: 50vw;
  padding: 0 var(--margine) 0 3vw;
}
.orizontal .galerie__progres {
  display: block;
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  bottom: 1.75rem;
  height: 2px;
}
.orizontal .galerie__progres span {
  display: block;
  height: 100%;
  background: var(--ink);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* „Alege-ți geanta” (js/alege.js): toate gențile pe gri de studio, filtrabile cu bule-mostră. */
.alege { padding: clamp(5rem, 14vh, 9rem) var(--margine) clamp(4rem, 10vh, 7rem); }
.alege__titlu {
  font-size: clamp(2rem, 8.8vw, 4.75rem);
  font-weight: 560;
  font-stretch: 84%;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

/* Bulele: mostre de material ca într-un atelier. Pe telefon stau pe un rând care se derulează lateral. */
.bule {
  display: flex;
  gap: clamp(0.85rem, 2.4vw, 1.75rem);
  margin: clamp(1.5rem, 4vh, 2.25rem) calc(-1 * var(--margine)) 0;
  padding: 0.85rem var(--margine) 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margine);
  scrollbar-width: none;
}
.bule::-webkit-scrollbar { display: none; }
@media (min-width: 64rem) {
  .bule {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}
.bula {
  --d: clamp(3.75rem, 13vw, 4.75rem);
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  min-width: 2.75rem;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition: opacity 0.25s var(--ease-out);
}
/* Bula activă crește, celelalte se estompează. */
.bula[aria-pressed="false"] { opacity: 0.62; }
/* Plutire foarte lentă, de câțiva pixeli, decalată de la o bulă la alta. */
.bula__plutire {
  display: block;
  animation: bula-pluteste calc(5.5s + var(--i, 0) * 0.7s) ease-in-out calc(var(--i, 0) * -1.9s) infinite alternate;
}
@keyframes bula-pluteste {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}
.bula__cerc {
  display: block;
  width: var(--d);
  height: var(--d);
  border: 1px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  background: var(--studio);
  transition: transform 0.25s var(--ease-out);
}
.bula__cerc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bula__cerc--toate { background: var(--ink); }
.bula[aria-pressed="true"] .bula__cerc { transform: scale(1.12); }
.bula__eticheta {
  font-size: 0.8125rem;
  font-weight: 540;
  white-space: nowrap;
}
.bula[aria-pressed="true"] .bula__eticheta { font-weight: 620; }
@media (hover: hover) {
  .bula:hover { opacity: 1; }
  .bula:hover .bula__cerc { transform: scale(1.06); }
  .bula[aria-pressed="true"]:hover .bula__cerc { transform: scale(1.12); }
}
.bula:focus-visible { outline: none; }
.bula:focus-visible .bula__cerc {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Grila: 2 pe rând pe telefon, 3 pe tabletă, 4 pe desktop. Gențile stau pe aceeași linie de bază. */
.grila {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { .grila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grila { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.piesa[hidden] { display: none; }
.piesa__buton {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.piesa__poza {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
}
/* Geanta întreagă în căsuță, așezată jos, ca toate să stea pe aceeași linie. */
.piesa__poza img {
  position: absolute;
  left: 7%;
  top: 10%;
  width: 86%;
  height: 81%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.35s var(--ease-out);
}
.piesa__poza .umbra {
  left: 16%;
  right: 16%;
  bottom: 4%;
  height: 7%;
}
.piesa__nume {
  font-size: 1.0625rem;
  font-weight: 560;
  line-height: 1.6;
}
.piesa__material {
  font-size: 0.875rem;
  color: var(--ink-2);
}
@media (hover: hover) {
  .piesa__buton:hover .piesa__poza img { transform: translateY(-4px); }
}
.piesa__buton:focus-visible { outline-offset: 6px; }

/* Vederea mare: fereastră nativă (<dialog>), pe același gri de studio. */
html:has(.vedere[open]) { overflow: hidden; }
.vedere {
  width: min(70rem, 100vw - 2rem);
  max-width: none;
  height: min(52rem, 100dvh - 2rem);
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--studio);
  color: var(--ink);
}
.vedere::backdrop { background: rgb(40 28 20 / 0.6); }
.vedere__interior {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(3rem, 7vh, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  overflow: auto;
}
.vedere__inchide {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(40 28 20 / 0.35);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.vedere__inchide .icon { width: 1.15rem; height: 1.15rem; }
.vedere__inchide:focus-visible { border-radius: 999px; }
@media (hover: hover) {
  .vedere__inchide:hover { background: rgb(40 28 20 / 0.08); }
}
.vedere__poza {
  position: relative;
  isolation: isolate;
  justify-self: center;
  height: min(56dvh, 27rem / var(--raport, 1));
  margin: 2.5rem 0;
}
/* Cu schiță: loc în dreapta pentru cota de înălțime. */
.vedere__poza--schita { margin-right: 3rem; }
.vedere__poza img {
  height: 100%;
  width: auto;
  max-width: none;
}
.vedere__text {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}
.vedere__nume {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 560;
  font-stretch: 82%;
  letter-spacing: -0.032em;
  line-height: 1.1;
}
.vedere__material { font-size: 1.0625rem; }
.vedere__masuri {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.vedere__nota {
  max-width: 30ch;
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.vedere__whatsapp { margin-top: 1rem; }
@media (max-width: 47.99rem) {
  .vedere {
    width: 100vw;
    height: 100dvh;
    margin: 0;
  }
  .vedere__interior {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 4rem var(--margine) 2.5rem;
  }
  /* 42dvh: gențile înalte (Slouchy) încap cu schiță cu tot, fără să trebuiască derulat. */
  .vedere__poza { height: min(42dvh, (100vw - 2 * var(--margine)) / var(--raport, 1)); }
  .vedere__poza--schita { height: min(42dvh, (100vw - 2 * var(--margine) - 3rem) / var(--raport, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .bula__plutire { animation: none; }
  .bula,
  .bula__cerc,
  .piesa__poza img { transition: none; }
}

/* Final pe espresso: singura trecere deliberată de la luminos la închis. */
.final {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--crem);
}
.final__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}
.final__continut {
  align-self: center;
  padding: clamp(6rem, 18vh, 11rem) var(--margine) clamp(3rem, 8vh, 5rem);
}
.final__titlu {
  font-size: clamp(1.9rem, 9.5vw, 6rem);
  font-weight: 560;
  font-stretch: 82%;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.final__sub {
  margin-top: clamp(1.1rem, 3vh, 1.6rem);
  max-width: 34ch;
  color: var(--crem-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
}
.final__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
}
.final__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  font-weight: 540;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.final__ig .icon { width: 1.4em; height: 1.4em; }
.final :focus-visible { outline-color: var(--crem); }

.subsol {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 0 var(--margine);
  padding: 1.75rem 0 2.25rem;
  border-top: 1px solid rgb(242 236 228 / 0.16);
  color: var(--crem-2);
  font-size: 0.9375rem;
}
.subsol__logo {
  width: 5.5rem;
  color: var(--crem);
}
.subsol p:first-of-type { flex: 1 1 16rem; }