/* ================================================================
   NOVUM 1979 · design system — GALERIE ALBĂ, CERNEALĂ NEAGRĂ
   Tipografie: Inter Tight (display) + Inter (UI) — grotesc elvețian
   Alb pur + negru. Singura culoare din pagină: glazurile produselor.
   Ancore întunecate: topbar, banda de personalizare, footer.
   ================================================================ */
:root {
    /* eșantionate din fotografia de studio Cafélixir */
    --wall-lit:   #C3C0BA;   /* banda de lumină de pe perete */
    --wall-mid:   #AFACA6;   /* perete, ton mediu */
    --wall-dark:  #A19E98;   /* perete în umbră */
    --surface:    #F5F3EF;   /* blatul luminos pe care stau paharele */
    --clay:       #2A2E37;   /* ceramica mată, albastru-închis */
    --clay-deep:  #1C1F26;   /* lemnul espresso de sub blat */

    --bg: #F0EEE9;
    --bg-alt: #E3E0D9;
    --card: #F7F5F1;
    --ink: #1C1F26;
    --ink-soft: #6A6F79;
    --accent: #1C1F26;
    --accent-ink: #FFFFFF;
    --biscuit: #EAE7E1;

    /* Secundara de brand: nisip. Primara e albastrul inchis (--ink). */
    --sand-soft: #F0EEE9;   /* hartie: fundal de sectiune deschisa */
    --sand:      #E3E0D9;   /* nisipul propriu-zis: benzi, carduri */
    --sand-deep: #D0CCC3;   /* nisip adanc: linii, stari apasate */
    --line: rgba(28, 31, 38, 0.15);
    --line-soft: rgba(28, 31, 38, 0.085);
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 28px 64px -32px rgba(28, 31, 38, 0.28);
    --font-display: 'TT Drugs', 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-ui: 'TT Drugs', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* folosit doar cat masuram inaltimea headerului, ca sa nu citim valori din timpul animatiei */
.no-transition, .no-transition *, .no-transition *::before, .no-transition *::after {
    transition: none !important; animation: none !important;
}
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 16px; }
::selection { background: var(--clay); color: #FFFFFF; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.container.narrow { max-width: 860px; }
.center { text-align: center; }
.mt-3 { margin-top: 28px; }
.fine { font-size: 13px; color: var(--ink-soft); }

h1, h2, h3, .h2, .h3 {
    font-family: var(--font-display); font-weight: 600; line-height: 1.05;
    letter-spacing: -0.028em; font-feature-settings: 'ss01','cv05';
}
h1 { font-size: clamp(36px, 5.6vw, 68px); letter-spacing: -0.034em; }
h2 { font-size: clamp(27px, 3.7vw, 44px); }
.h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3, .h3 { font-size: clamp(20px, 2.4vw, 27px); }
h1 em { font-style: normal; color: var(--ink-soft); }

.eyebrow {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px;
}
.eyebrow.link:hover { color: var(--ink); }
.eyebrow-light { color: var(--ink-soft); }
.lead { font-size: clamp(16px, 1.8vw, 19px); color: var(--ink-soft); max-width: 56ch; }
.section-sub { color: var(--ink-soft); max-width: 64ch; margin: 14px auto 0; }
.section-sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- butoane */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 26px; border-radius: 999px; border: 1.5px solid transparent;
    font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 15px 32px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-dark, .btn-accent { background: var(--ink); color: var(--accent-ink); }
.btn-dark:hover, .btn-accent:hover { box-shadow: 0 16px 32px -16px rgba(28, 31, 38, 0.55); background: #000; }
.btn-ghost, .btn-ghost-light { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover, .btn-ghost-light:hover { border-color: var(--ink); }
/* cana care se rotește la hover */
.icon-cup {
    display: block; flex: 0 0 auto; margin-left: 5px; margin-top: -1px;
    transition: transform 0.62s cubic-bezier(0.34, 1.18, 0.42, 1);
    transform-origin: 50% 55%;
}
.btn-cup:hover .icon-cup,
.btn-cup:focus-visible .icon-cup { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
    .icon-cup { transition: none; }
    .btn-cup:hover .icon-cup { transform: none; }
}

.link-btn { background: none; border: 0; color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- topbar + header */
.topbar {
    position: relative; z-index: 80;   /* dropdown-ul de limbă trebuie să treacă peste header (z 60) */
    background: var(--clay-deep); color: rgba(255,255,255,0.66);
    font-size: 12px; letter-spacing: 0.06em;
}
.topbar-inner {
    position: relative; display: flex; justify-content: space-between; align-items: center;
    min-height: 40px; gap: 24px;
}
.topbar-actions { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; z-index: 2; }
.topbar-link {
    white-space: nowrap; font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
}
.topbar-link span { display: inline-block; transition: transform 0.25s ease; }
.topbar-link:hover span { transform: translateX(3px); }

/* ticker: mesaje care se succed cu pauză, centrate în bară */
.ticker {
    position: relative; flex: 1 1 auto; min-width: 0; height: 16px; pointer-events: none;
}
.ticker-item {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
    font-size: 10.5px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62); white-space: nowrap;
    opacity: 0; transform: translateY(5px); transition: opacity 0.7s ease, transform 0.7s ease;
}
.ticker-item { overflow: hidden; text-overflow: ellipsis; }
.ticker-item.is-active { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .ticker-item { transition: none; }
}

/* selector de limba */
.lang-switch { position: relative; }
.lang-current {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
    color: rgba(255, 255, 255, 0.78); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.12em; padding: 5px 2px; transition: color 0.15s;
}
.lang-current:hover, .lang-switch.open .lang-current { color: #FFFFFF; }
.lang-caret { transition: transform 0.2s; }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; list-style: none;
    min-width: 186px; max-height: min(60vh, 380px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 12px; padding: 6px; box-shadow: 0 20px 44px -20px rgba(28, 31, 38, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switch .lang-menu a {
    display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 8px;
    color: var(--ink-soft); font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 500;
}
.lang-switch .lang-menu a:hover { background: var(--bg-alt); color: var(--ink); }
.lang-switch .lang-menu a.active { color: var(--ink); font-weight: 600; }
.lang-switch .lang-menu a b { font-size: 10.5px; letter-spacing: 0.14em; opacity: 0.6; min-width: 20px; }
.lang-switch .lang-menu a.active b { opacity: 1; }
.topbar a { color: #FFFFFF; font-weight: 600; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(240, 238, 233, 0.86); backdrop-filter: blur(18px) saturate(1.1);
    border-bottom: 1px solid var(--line-soft);
    transition: box-shadow 0.3s ease;
}
body.scrolled .site-header { box-shadow: 0 12px 32px -24px rgba(28, 31, 38, 0.45); }
/* Pe homepage headerul e complet transparent și fotografia curge pe sub el.
   Hero-ul urcă sub header (margin negativ) și își recuperează spațiul din padding. */
body.page-home .site-header {
    background: transparent; backdrop-filter: none;
    border-bottom-color: transparent; box-shadow: none;
}
body.page-home.scrolled .site-header {
    background: rgba(240, 238, 233, 0.88); backdrop-filter: blur(18px) saturate(1.1);
    border-bottom-color: var(--line-soft);
}


body.page-home .hero-full {
    /* 1px in plus peste bara de sus: la scalarea ecranului (dpr 1.25/1.5) marginea
       negativa si inaltimea barei se rotunjesc diferit si ramanea o dunga de fundal
       intre ele. Bara e z-80, deci pixelul suplimentar intra sub ea, invizibil. */
    margin-top: calc(-1 * var(--hdr-h, 103px) - 1px);
    padding-top: calc(var(--hdr-h, 103px) + 1px);
    min-height: calc(100svh - var(--topbar-h, 40px));
}
@supports not (height: 100svh) {
    body.page-home .hero-full { min-height: calc(100vh - var(--topbar-h, 40px)); }
}

/* rândul 1 — logo centrat, acțiuni pe laturi (layout de casă de modă) */
.header-top {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: clamp(16px, 3vw, 40px); padding-top: 20px; padding-bottom: 20px;
    transition: padding 0.3s ease;
}
/* meniul central al machetei */
.nav-main { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 34px); min-width: 0; }
.nav-main a {
    position: relative; font-size: 12.5px; font-weight: 400; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink); white-space: nowrap;
    transition: opacity 0.18s ease;
}
.nav-main a:hover { opacity: 0.62; }
.nav-main a:hover, .nav-main a.active { color: var(--ink); }
.nav-main a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
    height: 1px; background: var(--ink);
}
@media (max-width: 1080px) { .nav-main { display: none; } }
body.scrolled .header-top { padding-top: 11px; padding-bottom: 11px; }

/* stanga: navigatia de produs, centrata in coloana ei */
.nav-left { display: flex; align-items: center; justify-content: center; gap: 30px; min-width: 0; }
/* dreapta: Personalizare + CTA + cos */
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-width: 0; }

.nav-left a, .nav-right .nav-link {
    /* subtire, cu aer intre litere — greutatea o da activul, nu fontul */
    font-weight: 400; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--clay-deep); padding: 4px 0; position: relative; white-space: nowrap;
    transition: color 0.15s;
}
.nav-left a:hover, .nav-right .nav-link:hover,
.nav-left a.active, .nav-right .nav-link.active { color: var(--clay-deep); }
.nav-left a.active::after, .nav-right .nav-link.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--ink);
}

.brand { color: var(--clay); display: flex; align-items: center; justify-content: flex-start; }
/* wordmark NOVUM — raport 5:1, deci se măsoară altfel decât sigla veche */
.logo-cr {
    height: 34px; width: auto; display: block;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.scrolled .logo-cr { height: 26px; }

/* rândul 2 — navigație centrată */
.main-nav { display: none; }
.nav-mobile-cta { display: none; }

.header-cta { font-size: 12.5px; padding: 9px 18px; }
.cart-link { position: relative; display: flex; padding: 5px; color: var(--ink); }
.icon-bag { display: block; transition: transform 0.2s ease; }
.cart-link:hover .icon-bag { transform: translateY(-1px); }
.cart-count {
    position: absolute; top: -3px; right: -5px; background: var(--clay); color: #FFFFFF;
    font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.cart-count[data-count="0"] { display: none; }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; position: relative; }
.nav-toggle span {
    position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink);
    transition: transform 0.2s, top 0.2s; border-radius: 2px;
}
.nav-toggle span:first-child { top: 15px; }
.nav-toggle span:last-child { top: 23px; }
body.nav-open .nav-toggle span:first-child { top: 19px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:last-child { top: 19px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- lumina de studio
   Recreează diagonalele de lumină de pe peretele din fotografia de produs. */
.studio {
    position: relative;
    /* peretele e la ~#ACADB2: textul secundar trebuie închis ca să treacă AA (4.87:1) */
    --ink-soft: #383D47;
    --line: rgba(28, 31, 38, 0.22);
    --line-soft: rgba(28, 31, 38, 0.14);
    background:
        linear-gradient(180deg, #D6D3CD 0%, var(--wall-lit) 26%, var(--wall-mid) 55%, var(--wall-dark) 78%, var(--wall-mid) 100%);
    isolation: isolate;
}
.studio::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        linear-gradient(116deg, transparent 4%,  rgba(255,255,255,0.50) 11%, rgba(255,255,255,0.12) 19%, transparent 26%),
        linear-gradient(116deg, transparent 27%, rgba(255,255,255,0.34) 36%, rgba(255,255,255,0.06) 44%, transparent 50%),
        linear-gradient(116deg, transparent 52%, rgba(255,255,255,0.22) 61%, transparent 70%),
        linear-gradient(116deg, transparent 74%, rgba(255,255,255,0.30) 82%, transparent 92%);
    mix-blend-mode: soft-light;
}
/* planul luminos pe care „stau" produsele */
.studio::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(240, 238, 233, 0) 0%, rgba(240, 238, 233, 0.72) 48%, var(--bg) 100%);
}
.studio > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- hero full-bleed
   Header + topbar + hero ocupa exact un ecran (100svh). */
.hero-full {
    position: relative;
    min-height: calc(100svh - var(--chrome-h, 144px));
    display: flex; align-items: center;
    overflow: hidden;
    background: var(--wall-mid);
    /* pe fotografie textul secundar are nevoie de mai mult corp ca sa treaca AA */
    --ink-soft: #35393F;
}
@supports not (height: 100svh) {
    .hero-full { min-height: calc(100vh - var(--chrome-h, 144px)); }
}
.hero-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: 68% 72%;
    display: block;
}
/* voal dinspre stanga: garanteaza contrastul textului indiferent de crop */
.hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(240, 238, 233, 0.55) 0%, rgba(240, 238, 233, 0) 18%),
        linear-gradient(100deg,
            rgba(240, 238, 233, 0.80) 0%,
            rgba(240, 238, 233, 0.58) 24%,
            rgba(240, 238, 233, 0.20) 44%,
            rgba(240, 238, 233, 0) 60%);
}
.hero-full-inner { position: relative; z-index: 2; width: 100%; padding-top: 24px; padding-bottom: 92px; }
.hero-copy { max-width: 44rem; }
.hero-copy h1 {
    margin: 8px 0 20px;
    font-weight: 300;              /* linia de bază subțire */
    letter-spacing: -0.032em;
    /* măsurat: la 56px baza RO (650px) și EN (680px) încap pe un rând în coloana de 704px,
       iar accentul (max 519px, FR) stă mereu pe un rând → titlu curat pe 2 rânduri */
    font-size: clamp(33px, 4.3vw, 56px);
}
.hero-copy h1 em {
    font-weight: 700;              /* doar accentul rămâne gros */
    color: var(--ink);
    font-style: normal;
}
/* accentul nu se rupe niciodată în două rânduri */
.h1-accent { white-space: nowrap; }
@media (max-width: 420px) { .h1-accent { white-space: normal; } }
.hero-copy .lead { max-width: 33rem; }
.hero-cta { display: flex; gap: 26px; flex-wrap: nowrap; align-items: center; margin-top: 30px; }
/* butoanele din hero stau mereu unul lângă altul — textul e mai lung în EN/FR/ES */
.hero-cta .btn-lg { padding: 14px 26px; font-size: 14.5px; }
/* Un singur buton plin in hero. Colectiile gravate sunt pasul doi, deci link. */
.hero-link {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); white-space: nowrap; padding: 4px 0; position: relative;
}
.hero-link::after {
    content: ''; position: absolute; left: 0; right: 26px; bottom: 0; height: 1px;
    background: currentColor; opacity: 0.28; transition: opacity 0.2s ease;
}
.hero-link:hover::after { opacity: 0.7; }
.hero-link svg { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-link:hover svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .hero-link svg { transition: none; } }
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 30px; }
.hero-proof li {
    font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--ink-soft); opacity: 0.85;
}
/* separator fin: subtiat fata de text, ca sa despartra fara sa concureze */
.hero-proof li + li::before {
    content: '\00B7'; margin: 0 11px; opacity: 0.38; font-weight: 400;
}

/* indicator de derulare */
.hero-scroll {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--ink-soft); transition: color 0.2s;
}
.hero-scroll:hover { color: var(--ink); }
.hero-scroll svg { animation: heroNudge 2.4s ease-in-out infinite; }
@keyframes heroNudge {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; } }
@media (max-height: 700px) {
    .hero-scroll { display: none; }
    .hero-full-inner { padding-bottom: 24px; }
}

/* ---------------------------------------------------------------- filmstrip (galerie derulanta) */
.filmstrip { padding: clamp(24px, 3vw, 40px) 0 clamp(30px, 4vw, 52px); overflow: hidden; }
.filmstrip-track {
    display: flex; gap: 12px; width: max-content;
    animation: filmscroll 68s linear infinite;
}
.filmstrip:hover .filmstrip-track { animation-play-state: paused; }
.film-cell {
    height: clamp(132px, 15vw, 196px); border-radius: var(--radius);
    overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface); flex: 0 0 auto;
}
.film-cell img { height: 100%; width: auto; display: block; transition: transform 0.4s; }
.film-cell:hover img { transform: scale(1.04); }
@keyframes filmscroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .filmstrip-track { animation: none; overflow-x: auto; width: auto; }
}
.filmstrip-caption {
    text-align: center; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 20px; padding: 0 22px;
}

/* ---------------------------------------------------------------- sectiuni */
.section { padding: clamp(46px, 6vw, 88px) 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { text-align: center; max-width: 780px; margin: 0 auto clamp(30px, 4vw, 54px); }
.section-head.row-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    text-align: left; max-width: none; gap: 20px;
}
.page-head { padding: clamp(44px, 6vw, 76px) 0 clamp(10px, 2vw, 24px); text-align: center; }
.page-head.slim { padding-bottom: 0; }
.page-head .section-sub { margin-inline: auto; }
.page-head .lead { margin-inline: auto; }
.page-head .hero-cta { justify-content: center; }

/* ---------------------------------------------------------------- volume */
.sizes-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.size-cell {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 28px 16px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: transform 0.2s, border-color 0.2s;
}
.size-cell:hover { transform: translateY(-4px); border-color: var(--line); }
.size-cup { display: flex; align-items: flex-end; justify-content: center; height: 208px; }
.size-cup img { width: auto; filter: drop-shadow(0 20px 24px rgba(28, 31, 38, 0.28)); transition: transform 0.25s; }
.size-cell:hover .size-cup img { transform: translateY(-3px) scale(1.02); }
.size-ml { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 24px; margin-top: 12px; }
.size-dims { font-size: 12.5px; color: var(--ink-soft); }
.size-use { font-size: 13px; margin-top: 4px; color: var(--ink-soft); }
.size-tag {
    margin-top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--ink-soft);
}

/* ---------------------------------------------------------------- culori */
.swatch-wall { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; max-width: 1000px; margin: 0 auto; }
.swatch { position: relative; display: flex; flex-direction: column; align-items: center; width: 94px; }
.swatch i {
    width: 60px; height: 60px; border-radius: 50%; display: block;
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.22), 0 10px 22px -12px rgba(28, 31, 38, 0.45);
    border: 2px solid rgba(28, 31, 38, 0.10); transition: transform 0.18s, border-color 0.18s;
}
.swatch:hover i, .swatch:focus i { transform: scale(1.12); border-color: rgba(28, 31, 38, 0.4); }
.swatch span { font-size: 11.5px; text-align: center; margin-top: 9px; line-height: 1.3; color: var(--ink-soft); }
.swatch span small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.65; }

/* ---------------------------------------------------------------- trasee */
.paths-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.path-card {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 30px 26px; display: flex; flex-direction: column; gap: 10px;
    transition: transform 0.2s, border-color 0.2s;
}
.path-card:hover { transform: translateY(-4px); border-color: var(--line); }
.path-card h3 { font-size: 21px; }
.path-card p { font-size: 14px; color: var(--ink-soft); flex: 1; }
.path-cta { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }

/* ---------------------------------------------------------------- material */
.material-grid, .split-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.split-grid.reverse > div:first-child { order: 2; }
.material-media, .b2b-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #000000; min-height: 280px; border: 1px solid var(--line-soft); }
.material-media img, .b2b-media img { width: 100%; height: 100%; object-fit: cover; }
.material-media.noimg, .b2b-media.noimg { display: flex; align-items: center; justify-content: center; min-height: 340px; }
.material-media.noimg::after, .b2b-media.noimg::after {
    content: 'foto în curând'; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-soft);
}
.material-copy h2 { margin-bottom: 16px; }
.material-copy p { color: var(--ink-soft); margin-bottom: 14px; }
.material-list { list-style: none; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.material-list li { padding-left: 24px; position: relative; font-size: 14.5px; color: var(--ink-soft); }
.material-list li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.material-list strong { color: var(--ink); }

/* ---------------------------------------------------------------- colectii */
.collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.collection-card { display: flex; flex-direction: column; gap: 8px; }
.collection-media {
    aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--wall-mid);
    box-shadow: var(--shadow); margin-bottom: 8px; border: 1px solid var(--line-soft);
}
.collection-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.collection-card:hover .collection-media img { transform: scale(1.05); }
.collection-card h3 { font-size: 21px; }
.collection-card p { font-size: 14px; color: var(--ink-soft); }
.badge-inline {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    border: 1px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: middle;
}

/* ---------------------------------------------------------------- produse */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card {
    background: var(--card); border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line-soft); display: flex; flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--line); }
.product-card-media { aspect-ratio: 1; background: var(--surface); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-placeholder { display: flex; align-items: center; justify-content: center; }
.product-card-placeholder svg { filter: drop-shadow(0 16px 20px rgba(28, 31, 38, 0.26)); }
.badge-card {
    position: absolute; top: 12px; left: 12px; background: var(--clay); color: #FFFFFF;
    font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
}
.product-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.product-card-body h3 { font-size: 17px; font-family: var(--font-ui); font-weight: 700; }
.product-card-caps { font-size: 12.5px; color: var(--ink-soft); }
.product-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.mini-swatches { display: flex; }
.mini-swatches i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card); margin-left: -4px; box-shadow: 0 0 0 1px rgba(28, 31, 38,0.12); }
.mini-swatches i:first-child { margin-left: 0; }
.price { font-weight: 800; font-size: 14.5px; }

/* ---------------------------------------------------------------- shop layout */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
.filters-toggle { display: none; }
.shop-filters { position: sticky; top: 98px; }
.filter-group { border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.filter-group h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 10px; color: var(--ink-soft); font-family: var(--font-ui); }
.filter-option { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.filter-option input { accent-color: #FFFFFF; }
.filter-option input:checked + span { color: var(--ink); font-weight: 700; }
.filter-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-swatch { cursor: pointer; }
.filter-swatch input { display: none; }
.filter-swatch i {
    width: 26px; height: 26px; border-radius: 50%; display: block; border: 2px solid rgba(28, 31, 38, 0.12);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}
.filter-swatch input:checked + i { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(28, 31, 38, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.22); }
.filter-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.results-count { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.empty-state { text-align: center; padding: 60px 0; display: flex; flex-direction: column; gap: 16px; align-items: center; color: var(--ink-soft); }

/* ---------------------------------------------------------------- pagina produs */
.product-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4.5vw, 60px); align-items: start; }
.product-gallery { position: sticky; top: 98px; }
.product-main-img {
    background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft);
}
.product-main-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-placeholder.xl svg { filter: drop-shadow(0 26px 32px rgba(28, 31, 38, 0.3)); }
.product-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--line-soft); }
.product-subtitle { color: var(--ink-soft); margin-top: 6px; }
.product-price { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 34px; margin: 18px 0 2px; }
.product-sku { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 20px; }
.selector-block { margin-bottom: 20px; }
.selector-block h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 10px; font-family: var(--font-ui); color: var(--ink-soft); }
.color-name { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { cursor: pointer; }
.chip input { display: none; }
.chip span {
    display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line);
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: all 0.15s; background: transparent;
}
.chip:hover span { border-color: var(--ink-soft); color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--accent-ink); }
.chip input:disabled + span { opacity: 0.3; cursor: not-allowed; }
.geometry-note { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-row .filter-swatch i { width: 34px; height: 34px; }
.buy-row { display: flex; gap: 12px; margin: 26px 0 18px; }
.qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: transparent; }
.qty-stepper button { width: 42px; height: 48px; background: none; border: 0; font-size: 20px; color: var(--ink-soft); }
.qty-stepper button:hover { color: var(--ink); }
.qty-stepper input { width: 52px; text-align: center; border: 0 !important; background: none !important; font-weight: 700; color: var(--ink); -moz-appearance: textfield; padding: 0 !important; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-stepper.small button { height: 38px; width: 34px; }
.btn-buy { flex: 1; }
.b2b-hint {
    display: block; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 24px; transition: border-color 0.15s;
}
.b2b-hint:hover { border-color: var(--line); }
.b2b-hint strong { display: block; font-size: 14.5px; }
.b2b-hint span { font-size: 13.5px; color: var(--ink-soft); }
.engrave-note { font-size: 13.5px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 24px; }
.accordion details { border-top: 1px solid var(--line-soft); }
.accordion summary {
    padding: 16px 0; font-weight: 700; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; font-size: 15px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: 20px; color: var(--ink-soft); transition: transform 0.2s; font-weight: 400; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; }
.specs-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sticky-buy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(240, 238, 233, 0.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); padding: 12px 20px; display: none;
    align-items: center; justify-content: space-between; gap: 14px;
}
.sticky-buy strong { display: block; font-size: 14px; }
.sticky-buy span { font-size: 13px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- banda inversată (alb pe negru) */
.section-brandband { background: var(--clay); color: #FFFFFF; }
.section-brandband.slim { padding: 44px 0; }
.brandband-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.section-brandband.slim .brandband-inner { grid-template-columns: 1fr auto; }
.brandband-inner h2 { color: #FFFFFF; margin-bottom: 14px; }
.brandband-inner p { color: rgba(255, 255, 255, 0.68); }
.section-brandband .eyebrow, .section-brandband .eyebrow-light { color: rgba(255, 255, 255, 0.55); }
.section-brandband .fine { color: rgba(255, 255, 255, 0.55); }
.section-brandband .btn-dark, .section-brandband .btn-accent { background: #FFFFFF; color: var(--clay); }
.section-brandband .btn-dark:hover, .section-brandband .btn-accent:hover { background: #FFF; box-shadow: 0 14px 34px -14px rgba(255, 255, 255, 0.45); }
.section-brandband .btn-ghost, .section-brandband .btn-ghost-light { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); }
.section-brandband .btn-ghost:hover, .section-brandband .btn-ghost-light:hover { border-color: #FFFFFF; }
.brandband-media { border-radius: var(--radius-lg); overflow: hidden; min-height: 260px; background: #000000; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55); }
.brandband-media img { width: 100%; height: 100%; object-fit: cover; }
.brandband-media.noimg { display: flex; align-items: center; justify-content: center; }
.brandband-media.noimg::after { content: 'gravare laser'; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

/* ---------------------------------------------------------------- B2B extra */
.pricing-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pricing-card {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 26px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px;
}
.pricing-card strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 24px; }
.pricing-card span { font-size: 13px; color: var(--ink-soft); }
.steps-list { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.step:last-child { border-bottom: 0; }
.step i {
    font-style: normal; width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; font-family: var(--font-display);
}
.step strong { display: block; font-size: 15px; }
.step span { font-size: 13.5px; color: var(--ink-soft); }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rule-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; }
.rule-card h4 { margin-bottom: 8px; font-size: 15.5px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.rule-card p { font-size: 13.5px; color: var(--ink-soft); }
.examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.example-tile { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); }
.example-tile.wide { aspect-ratio: 4 / 3; }
.example-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.example-tile:hover img { transform: scale(1.05); }
.moq-card {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 36px 30px; display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center;
}
.moq-number { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 46px; line-height: 1; }
.compare-table { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.compare-row { display: grid; grid-template-columns: 120px 1fr 1fr; border-top: 1px solid var(--line-soft); }
.compare-row:first-child { border-top: 0; }
.compare-row.head { background: var(--biscuit); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.compare-row span { padding: 14px 18px; font-size: 14px; }
.compare-row span:first-child { font-weight: 700; font-size: 13px; }
.compare-row span:nth-child(3) { color: var(--ink-soft); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 28px; }
.contact-card h4 { margin-bottom: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.contact-card p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 14px; }
.contact-card a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- cart / checkout */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
.cart-items { display: flex; flex-direction: column; }
.cart-row {
    display: grid; grid-template-columns: 76px 1fr auto auto auto; gap: 16px; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.cart-media { width: 76px; height: 76px; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); }
.cart-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-swatch { width: 40px; height: 40px; border-radius: 50%; display: block; box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.22); border: 2px solid rgba(28, 31, 38, 0.10); }
.cart-details { display: flex; flex-direction: column; gap: 2px; }
.cart-qty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cart-price { font-weight: 800; white-space: nowrap; }
.cart-remove { background: none; border: 0; font-size: 22px; color: var(--ink-soft); width: 34px; height: 34px; }
.cart-remove:hover { color: var(--ink); }
.cart-summary {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 26px; position: sticky; top: 98px; display: flex; flex-direction: column; gap: 12px;
}
.summary-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); gap: 12px; }
.summary-row.total { font-size: 17px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--line-soft); padding-top: 12px; }
.summary-static { text-align: left; margin: 20px 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.checkout-form h3 { margin: 22px 0 14px; }
.checkout-form h3:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label, .full-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.form-grid .span-2 { grid-column: span 2; }
.full-label { margin-top: 14px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], textarea, select {
    border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; background: #FFFFFF;
    font-weight: 400; width: 100%; transition: border-color 0.15s; color: var(--ink); color-scheme: light;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.check-label { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: 13.5px; color: var(--ink-soft); font-weight: 400; }
.check-label input { margin-top: 3px; accent-color: #FFFFFF; }
.company-details { margin: 4px 0 8px; }
.company-details summary { font-size: 14px; font-weight: 700; cursor: pointer; padding: 8px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.company-details > .form-grid { margin-top: 8px; }
.pay-options { display: flex; flex-direction: column; gap: 10px; }
.pay-option {
    display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; cursor: pointer; background: var(--card);
}
.pay-option:has(input:checked) { border-color: var(--ink); }
.pay-option input { margin-top: 4px; accent-color: #FFFFFF; }
.pay-option strong { display: block; font-size: 14.5px; }
.pay-option span { font-size: 13px; color: var(--ink-soft); }
.form-errors {
    background: #241315; border: 1px solid #5C2A2E; color: #E8A9AD;
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-size: 13.5px;
}
.form-errors ul { margin: 6px 0 0 18px; }
.thanks-card {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: clamp(30px, 5vw, 56px); display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.ref-number { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-size: 30px; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- configurator (partajat) */
.stage-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 20%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 248, 251, 0) 0%, rgba(246, 248, 251, 0.55) 55%, rgba(246, 248, 251, 0.85) 100%);
}
.stage-light {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
    background:
        linear-gradient(116deg, transparent 6%,  rgba(255,255,255,0.55) 13%, rgba(255,255,255,0.12) 21%, transparent 28%),
        linear-gradient(116deg, transparent 34%, rgba(255,255,255,0.32) 43%, transparent 54%),
        linear-gradient(116deg, transparent 62%, rgba(255,255,255,0.26) 71%, transparent 82%);
}
.upload-zone {
    display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
    border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 30px 20px;
    text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: transparent;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--ink); background: rgba(28, 31, 38, 0.03); }
.upload-zone input { display: none; }
.upload-title { font-weight: 700; font-size: 14.5px; }
.upload-sub { font-size: 12px; color: var(--ink-soft); }
.upload-zone.has-file { border-style: solid; border-color: var(--ink); }
.tier-table { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-cell {
    border: 1.5px solid var(--line-soft); border-radius: var(--radius); padding: 8px 14px;
    font-size: 12.5px; color: var(--ink-soft); text-align: center; background: transparent;
}
.tier-cell strong { display: block; font-size: 14px; color: var(--ink-soft); }
.tier-cell.hit { border-color: var(--ink); color: var(--ink); }
.tier-cell.hit strong { color: var(--ink); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--clay-deep); color: rgba(255, 255, 255, 0.62); margin-top: 40px; }
.page-home .site-footer, .page-configurator .site-footer { margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(28px, 5vw, 72px); padding: clamp(40px, 5vw, 64px) 0 36px; }
.footer-brand { color: #FFFFFF; }
.footer-wordmark { display: flex; color: #FFFFFF; }
/* logoul din footer are marimea lui, nu se comprima la scroll ca cel din header */
.footer-brand .logo-cr, body.scrolled .footer-brand .logo-cr { height: 32px; width: auto; }

.footer-tag { font-size: 13.5px; margin-top: 14px; color: rgba(255,255,255,0.55); max-width: 40ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-cols h4 { color: #FFFFFF; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 14px; font-family: var(--font-ui); }
.footer-cols a { display: block; font-size: 14px; padding: 4px 0; color: rgba(255,255,255,0.62); }
.footer-cols a:hover { color: #FFFFFF; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.14); padding: 18px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 12px 28px; flex-wrap: wrap; font-size: 12.5px;
}

/* Semnatura dezvoltatorului. Sigla e in culoarea site-ului: pe subsolul albastru inchis
   ia greige-ul (secundara brandului); eticheta are tonul linkurilor legale de alaturi. */
.airod-credit {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-ui); font-size: 10.5px; line-height: 1;
    letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.16s ease;
}
.airod-credit svg {
    display: block; flex: none; height: 16px; width: auto;
    color: var(--sand-deep);
    transform: translateY(-2px);          /* literele stau in partea de jos a viewBox-ului: asa cad pe linia etichetei */
    transition: color 0.16s ease;
}
.airod-credit:hover { color: rgba(255, 255, 255, 0.85); }
.airod-credit:hover svg { color: #FFFFFF; }
.airod-credit:focus-visible { outline: 2px solid var(--sand-deep); outline-offset: 5px; border-radius: 2px; }

/* ================================================================ responsive */
@media (max-width: 1180px) {
    .header-cta { display: none; }
    .nav-left { gap: 22px; }
    .nav-right { gap: 18px; }
}
@media (max-width: 1080px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .paths-grid, .pricing-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    /* Voal calibrat masurat pe fotografia de mobil: tine 80%% pana la jumatate,
       apoi se stinge complet la 88%%, ca sfertul de jos sa ramane fotografie curata.
       Cu setarile vechi, randul de dovezi ajungea la 1.10:1 — practic invizibil. */
    .hero-scrim {
        background: linear-gradient(170deg,
            rgba(243, 244, 246, 0.97) 0%,
            rgba(243, 244, 246, 0.80) 50%,
            rgba(241, 242, 244, 0.30) 72%,
            rgba(240, 241, 243, 0) 88%);
    }
    .hero-bg img { object-position: 62% 70%; }
    .hero-full { min-height: calc(100svh - var(--chrome-h, 104px)); align-items: flex-start; }
    .hero-full-inner { padding-top: 40px; }
    .hero-copy { max-width: none; }
    .nav-left, .nav-right .nav-link { display: none; }
    .nav-toggle { display: block; justify-self: start; }
    .main-nav {
        /* ancorat de header, nu de o cotă calculată — urmează headerul chiar și comprimat */
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg);
        flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 24px;
        border-bottom: 1px solid var(--line); z-index: 59; box-shadow: 0 30px 50px -28px rgba(28, 31, 38, 0.35);
    }
    body.nav-open .main-nav { display: flex; }
    .main-nav a {
        padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft);
        letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--clay);
    }
    .main-nav a.active { color: var(--clay-deep); }
    .nav-mobile-cta { display: block; padding-top: 16px; border-bottom: 0 !important; }
    .material-grid, .split-grid, .brandband-inner, .config-layout, .product-layout { grid-template-columns: 1fr; }
    .split-grid.reverse > div:first-child { order: 0; }
        .config-stage-wrap, .product-gallery { position: static; }
    .collections-grid, .rules-grid, .examples-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .sizes-row { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr; }
    .shop-layout { grid-template-columns: 1fr; }
    .filters-toggle { display: inline-flex; margin-bottom: 16px; }
    .shop-filters { display: none; position: static; }
    .shop-filters.open { display: block; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 10px 20px 20px; margin-bottom: 20px; }
}
@media (max-width: 760px) {
    /* Pe telefon randul de dovezi cadea peste cani, unde nu se putea citi nici cu
       voal. Aceleasi trei afirmatii se rotesc oricum in bara de sus, deci aici il
       ascundem si lasam fotografia sa respire. */
    .hero-proof { display: none; }
    .hero-copy .lead { font-size: 15.5px; line-height: 1.62; max-width: 34ch; }
    .hero-cta { margin-top: 26px; flex-wrap: wrap; gap: 18px; }
    .hero-cta .btn { flex: 1 1 100%; }
    .hero-link { flex: 0 0 auto; }
    /* Indicatorul revine pe telefon, dar cu fundal propriu: la baza fotografiei
       stau si cani inchise si blat deschis pe acelasi rand, deci nicio culoare de
       text nu ajunge singura la 4.5:1 (masurat: 1.03 pe inchis, 1.82 pe alb). */
    /* Indicatorul revine pe telefon, centrat si fara pastila. Ca sa se poata citi
       peste fotografie primeste teren, nu fundal propriu: o stingere fina pe ultimii
       16%% din hero. Fara ea textul inchis ajunge la 2.92:1 oriunde l-am pune, pentru
       ca sub el sunt si cani inchise si blat deschis pe acelasi rand. */
    .hero-scrim::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
        background: linear-gradient(180deg, rgba(243, 244, 246, 0) 0%, rgba(243, 244, 246, 0.45) 100%);
    }
    .hero-scroll {
        display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
        bottom: 20px; font-size: 9.5px; letter-spacing: 0.22em; color: var(--ink);
    }
    .hero-scroll svg { width: 11px; height: 14px; }
    .ticker { display: none; }
    .topbar-inner { justify-content: center; min-height: 34px; }
    .topbar-actions { gap: 16px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-body { padding: 12px 14px 14px; }
    .header-top { padding-top: 14px; padding-bottom: 12px; }
    .logo-cr { height: 26px; }
    body.scrolled .logo-cr { height: 22px; }
    .compare-row { grid-template-columns: 1fr; }
    .compare-row span:first-child { background: var(--bg-alt); }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
    .cart-row { grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; }
    .cart-qty { grid-column: 2; flex-direction: row; }
    .cart-price { grid-column: 3; }
    .buy-row { flex-direction: column; }
    .qty-stepper { justify-content: center; }
    .sticky-buy.visible { display: flex; }
    .sizes-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .swatch { width: 76px; }
    .swatch i { width: 48px; height: 48px; }
}
@media (max-width: 480px) {
    .logo-cr { height: 23px; }
    .collections-grid, .rules-grid, .contact-grid, .pricing-cards { grid-template-columns: 1fr; }
    .examples-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================ pagini legale */
.legal-doc { max-width: 68ch; }
.legal-doc h2 {
    font-size: 19px; font-weight: 500; margin: 38px 0 12px;
    padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-doc p { margin: 0 0 14px; color: var(--ink-soft); }
.legal-doc p b, .legal-doc li b { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc .fine { font-size: 13px; }

.legal-steps { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); }
.legal-steps li { margin-bottom: 10px; }

.legal-id {
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 14px; padding: 22px 26px; margin-bottom: 34px;
}
.legal-id h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 16px; }
.legal-id dl, .legal-kv {
    display: grid; grid-template-columns: 160px 1fr; gap: 8px 18px; margin: 0;
    font-size: 14px;
}
.legal-id dt, .legal-kv dt { color: var(--ink-soft); font-size: 12.5px; }
.legal-id dd, .legal-kv dd { margin: 0; }
.legal-kv { margin-bottom: 18px; }
.legal-todo {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #9E0B43; background: rgba(158, 11, 67, 0.08); padding: 2px 7px; border-radius: 5px;
}
.legal-warn {
    margin: 16px 0 0; padding: 11px 14px; border-radius: 8px; font-size: 12.5px;
    background: rgba(158, 11, 67, 0.07); border: 1px solid rgba(158, 11, 67, 0.2); color: #9E0B43;
}

.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 18px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px 10px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.legal-table th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; border-top: 0; }
.legal-table td { color: var(--ink-soft); }

.legal-form {
    margin: 0 0 14px; padding: 18px 20px; border-left: 3px solid var(--line);
    background: var(--bg-alt); border-radius: 0 8px 8px 0;
    font-size: 13.5px; line-height: 1.9; color: var(--ink-soft);
}

.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: inherit; opacity: 0.75; }
.footer-legal a:hover { opacity: 1; }

@media (max-width: 620px) {
    .legal-id dl, .legal-kv { grid-template-columns: 1fr; gap: 2px 0; }
    .legal-id dt, .legal-kv dt { margin-top: 10px; }
    .legal-table { display: block; overflow-x: auto; }
}

.legal-lang {
    margin: 0 0 26px; padding: 12px 16px; border-radius: 8px;
    background: var(--bg-alt); border: 1px solid var(--line-soft);
    font-size: 13px; color: var(--ink-soft);
}

/* ---------------------------------------------------------------- fisa tehnica pe produs */
.serve-reason {
    margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
    max-width: 46ch;
}
.spec-inline {
    display: flex; flex-wrap: wrap; gap: 0 26px; margin: 14px 0 0;
    padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.spec-inline > div { display: flex; flex-direction: column; gap: 2px; }
.spec-inline dt {
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-soft);
}
.spec-inline dd {
    margin: 0; font-size: 14.5px; font-variant-numeric: tabular-nums;
}

/* text doar pentru cititoare de ecran */
.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;
}

/* ================================================================ cerere de mostre */
.sample-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.sample-terms {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
    padding: 26px 28px; position: sticky; top: calc(var(--chrome-h, 143px) + 16px);
}
.sample-terms h2 { font-size: 17px; font-weight: 500; margin: 0 0 16px; }
.sample-dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sample-dl dt {
    font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 3px;
}
.sample-dl dd { margin: 0; font-size: 13.5px; line-height: 1.55; }

.sample-form-wrap h2 { font-size: 17px; font-weight: 500; margin: 0 0 14px; }
.sample-form-wrap h2 + .fine { margin: -8px 0 12px; }
.sample-form-wrap form > h2:not(:first-child) { margin-top: 30px; }

.sample-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.sample-color { position: relative; cursor: pointer; }
.sample-color input { position: absolute; opacity: 0; width: 0; height: 0; }
.sample-color span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 9px; border-radius: 999px;
    border: 1px solid var(--line); font-size: 12.5px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sample-color i {
    width: 15px; height: 15px; border-radius: 50%; display: block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16);
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%); z-index: 1;
}
.sample-color span { padding-left: 30px; }
.sample-color input:checked + i + span { border-color: var(--ink); background: var(--bg-alt); }
.sample-color input:focus-visible + i + span { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 900px) {
    .sample-layout { grid-template-columns: 1fr; gap: 28px; }
    .sample-terms { position: static; }
}

/* ================================================================ checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }

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

.checkout-step { border: 0; padding: 0; margin: 0 0 34px; }
.checkout-step legend {
    display: flex; align-items: center; gap: 10px; padding: 0;
    font-size: 17px; font-weight: 500; margin-bottom: 16px;
}
.step-n {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ink); color: var(--card);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.checkout-step small {
    display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); font-weight: 400;
}
.checkout-step input.is-bad, .checkout-step textarea.is-bad { border-color: #9E0B43; }

.checkout-optional { margin-top: 14px; }
.checkout-optional summary {
    cursor: pointer; font-size: 13px; color: var(--ink-soft);
    padding: 8px 0; list-style: none;
}
.checkout-optional summary::-webkit-details-marker { display: none; }
.checkout-optional summary::before { content: "+ "; font-weight: 600; }
.checkout-optional[open] summary::before { content: "\2013  "; }

.pay-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pay-option {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pay-option:hover { border-color: var(--ink-soft); }
.pay-option:has(input:checked) { border-color: var(--ink); background: var(--bg-alt); }
.pay-option input { margin-top: 3px; flex: 0 0 auto; }
.pay-body { display: flex; flex-direction: column; gap: 3px; }
.pay-body b { font-weight: 600; font-size: 14.5px; }
.pay-body small { font-size: 12.5px; color: var(--ink-soft); }

.checkout-errors {
    background: rgba(158, 11, 67, 0.07); border: 1px solid rgba(158, 11, 67, 0.25);
    color: #9E0B43; border-radius: 12px; padding: 16px 20px; margin-bottom: 26px; font-size: 13.5px;
}
.checkout-errors p { margin: 0 0 6px; }
.checkout-errors ul { margin: 0; padding-left: 20px; }

/* ---------------------------------------------------------------- sumar */
.checkout-aside { position: sticky; top: calc(var(--chrome-h, 143px) + 16px); }
.checkout-summary {
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 16px; padding: 24px 26px;
}
.checkout-summary h2 { font-size: 16px; font-weight: 500; margin: 0 0 16px; }

.sum-items { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sum-items li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sum-media {
    position: relative; width: 48px; height: 48px; border-radius: 9px;
    background: var(--surface); border: 1px solid var(--line-soft); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.sum-media img { width: 100%; height: 100%; object-fit: contain; }
.sum-media i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); }
.sum-qty {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--ink); color: var(--card);
    font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.sum-txt { font-size: 13.5px; line-height: 1.35; min-width: 0; }
.sum-txt small { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.sum-price { font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sum-totals { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.sum-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.sum-totals dt { color: var(--ink-soft); }
.sum-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.sum-grand { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 16px; }
.sum-grand dt { color: var(--ink); font-weight: 500; }
.sum-grand dd { font-weight: 600; }

.sum-nudge {
    margin: 0 0 14px; padding: 10px 13px; border-radius: 8px;
    background: var(--bg-alt); font-size: 12.5px; color: var(--ink-soft);
}

.trust-row { list-style: none; margin: 16px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trust-row li { font-size: 12px; color: var(--ink-soft); padding-left: 18px; position: relative; }
.trust-row li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 5px;
    border-left: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
    transform: rotate(-45deg);
}

/* ================================================================ urmarire comanda */
.track-steps { list-style: none; margin: 0 0 26px; padding: 0; }
.track-step {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px;
    align-items: center; padding: 11px 0; position: relative;
}
.track-step::after {
    content: ""; position: absolute; left: 11px; top: 30px; bottom: -11px; width: 1px;
    background: var(--line);
}
.track-step:last-child::after { display: none; }
.track-dot {
    width: 23px; height: 23px; border-radius: 50%; border: 2px solid var(--line);
    background: var(--bg); position: relative; z-index: 1;
}
.track-step.is-trecut .track-dot { background: var(--ink); border-color: var(--ink); }
.track-step.is-acum .track-dot { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--ink); }
.track-step.is-viitor .track-label, .track-step.is-viitor .track-when { color: var(--ink-soft); opacity: 0.6; }
.track-label { font-size: 14.5px; }
.track-step.is-acum .track-label { font-weight: 600; }
.track-when { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.track-stopped {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px;
    padding: 18px 22px; border-radius: 12px;
    background: rgba(158, 11, 67, 0.06); border: 1px solid rgba(158, 11, 67, 0.2);
    font-size: 14px;
}
.track-awb {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
    padding: 14px 18px; border-radius: 10px; background: var(--bg-alt);
    font-size: 13.5px; margin-bottom: 26px;
}
.track-h2 { font-size: 16px; font-weight: 500; margin: 30px 0 12px; }
.track-items { border-top: 1px solid var(--line-soft); }
.track-item {
    display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.track-item small { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.track-item b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-total { border-bottom: 0; border-top: 1px solid var(--line); font-weight: 600; }

@media (max-width: 900px) {
    .checkout-layout { grid-template-columns: 1fr; gap: 28px; }
    .checkout-aside { position: static; order: -1; }
    .checkout-summary { padding: 18px 20px; }
}

/* ================================================================ sigiliu rotativ */
.seal {
    position: relative;
    width: 168px; height: 168px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}

.seal-ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    animation: sealSpin 26s linear infinite;
    transform-origin: 50% 50%;
}
.seal-text {
    font-family: 'Inter', sans-serif;
    /* corp mic si linie subtire: la doua repetitii inelul se umple natural,
       deci textLength aproape ca nu mai intinde nimic */
    font-size: 10px;
    font-weight: 400;
    fill: var(--ink-soft);
    text-transform: uppercase;
}

/* Wordmark-ul sta fix: doar inelul se invarte. */
.seal-core {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 104px; height: 104px; border-radius: 50%;
    color: var(--ink);
}
.seal-core .logo-cr,
body.scrolled .seal-core .logo-cr { height: 21px; width: auto; transition: none; }

@keyframes sealSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .seal-ring { animation: none; }
}

/* ---------------------------------------------------------------- asezare in sectiunea de culori */
.section-colors .container { position: relative; }
.colors-seal {
    position: absolute; top: 10px;
    /* Ancorat de blocul de titlu (780px, centrat), nu de marginea containerului.
       Intra 24px in caseta titlului: textul e centrat in ea si lasa ~72px goi pe
       stanga, deci sigiliul se apropie de LITERA fara sa o atinga. Textul nu poate
       depasi niciodata caseta, deci pozitia e sigura in orice limba. */
    left: calc(50% - 390px + 24px - 168px);
    /* nu prinde clicuri: sta peste marginea libera, nu peste continut */
    pointer-events: none;
}

/* Sub 1240px marginea libera dispare — sigiliul intra in rand cu titlul,
   centrat, ca sa nu se suprapuna peste text. */
@media (max-width: 1240px) {
    .colors-seal { position: static; display: flex; justify-content: center; margin-bottom: 26px; }
}
@media (max-width: 620px) {
    .seal { width: 138px; height: 138px; }
    .seal-text { font-size: 11px; letter-spacing: 0.2em; }
    .seal-core { width: 86px; height: 86px; }
    .seal-core .logo-cr { height: 17px; }
}

/* ================================================================ mișcare
   Deplasări mici, easing care se așază. Tot ce e aici pornește din starea
   finală: dacă JS-ul nu rulează, pagina arată exact ca înainte. */

.rise {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.rise.is-in { opacity: 1; transform: none; }
.rise.is-in { will-change: auto; }

/* ---------------------------------------------------------------- titlu hero */
.h1-lead { display: inline; }

/* Literele accentului sunt deja în pagină, doar transparente: lățimea e
   calculată de la început, deci rândul nu sare când apar. */
.hero-copy h1 em .ch { opacity: 0; }
.hero-copy h1 em .ch.on { opacity: 1; }
.hero-copy h1 em.typing { position: relative; }

.hero-copy h1 em .caret {
    position: absolute; left: 0; top: 0.14em; bottom: 0.14em;
    width: 2px; background: currentColor;
    transition: transform 0.05s linear, opacity 0.35s ease;
    animation: caretPuls 1s steps(2, jump-none) infinite;
}
.hero-copy h1 em .caret.done { opacity: 0; animation: none; }
@keyframes caretPuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------------------------------------------------------------- glazură */
/* Reflexul se mută după cursor; --lx/--ly vin din JS. Fără JS rămâne fix,
   exact cum era înainte. */
.swatch i {
    background-image: radial-gradient(circle at var(--lx, 34%) var(--ly, 26%),
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.12) 26%,
        rgba(255, 255, 255, 0) 58%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.32s ease;
}
.swatch:hover i, .swatch:focus-visible i {
    transform: translateY(-3px) scale(1.04);
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.22),
                0 16px 30px -14px rgba(28, 31, 38, 0.5);
}
.swatch span { transition: color 0.2s ease; }
/* halo de fundal pe etichete: invizibil pe fundal plat, dar tine textul
   citibil acolo unde eticheta cade peste fotografia canii */
.swatch span {
    text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg), 0 1px 6px var(--bg);
}
.swatch:hover span { color: var(--ink); }

/* ---------------------------------------------------------------- volume */
/* Cotele apar la hover: datele sunt partea interesantă, nu decorul. */
.size-cell { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.size-cell:hover, .size-cell:focus-within { transform: translateY(-4px); }

/* ---------------------------------------------------------------- carduri */
.collection-card, .product-card, .path-card {
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.36s ease;
}
.collection-card:hover, .product-card:hover, .path-card:hover {
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .rise, .rise.is-in { opacity: 1; transform: none; transition: none; }
    .hero-copy h1 em .ch { opacity: 1; }
    .hero-copy h1 em .caret { display: none; }
    .swatch i, .swatch:hover i, .size-cell, .size-cell:hover,
    .collection-card, .product-card, .path-card { transition: none; transform: none; }
    .hero-bg img { transform: none !important; }
}

/* ================================================================ cana interactiva */
.swatch-wall { position: relative; }
.swatch { cursor: pointer; position: relative; z-index: 1; border-radius: 10px; }
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* inel pe culoarea aleasa — acelasi limbaj ca in configurator */
.swatch.is-sel i {
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.22),
                0 10px 22px -12px rgba(28, 31, 38, 0.45),
                0 0 0 3px var(--bg), 0 0 0 5px var(--ink);
}

.colors-cup {
    position: absolute; z-index: 0; pointer-events: none;
    /* In golul din dreapta-jos: randul 3 are o singura culoare, deci acolo e loc.
       Cana intra doar sub ultimele cercuri, nu peste doua coloane de etichete. */
    width: 450px; right: -123px; top: calc(50% + 118px);
    transform: translateY(-49.8%);
}
/* rotirea e COAPTA in imagine (cu tot cu reflexia, care cade drept in jos) —
   rotita din CSS, reflexia se rotea si ea si iesea o fantoma alba in diagonala */
.cup-tilt { position: relative; z-index: 1; }
.colors-cup img, .colors-cup canvas { display: block; width: 100%; height: auto; }

/* display:block de mai sus ar bate atributul hidden — fara regula asta,
   dupa selectie ramaneau vizibile AMBELE cani, una sub alta */
.colors-cup img[hidden], .colors-cup canvas[hidden] { display: none; }
.colors-cup.pop img, .colors-cup.pop canvas { animation: cupPop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cupPop { from { transform: scale(0.965); } to { transform: scale(1); } }

/* cana iese putin din container in dreapta; clipul opreste bara orizontala */
.section-colors { overflow-x: clip; }

/* sub 1300px marginea laterala nu mai incape cana mare: o strangem inauntru,
   altfel clipul de sectiune ii taie o felie verticala */
@media (max-width: 1300px) {
    .colors-cup { width: 390px; right: -107px; }
}
@media (max-width: 1120px) { .colors-cup { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .colors-cup.pop img, .colors-cup.pop canvas { animation: none; }
}

/* =============================================== antet fara topbar (10.09.2026)
   Selectorul de limba s-a mutat din topbarul intunecat in antetul deschis:
   culorile lui erau facute pentru fundal negru si devenisera invizibile. */
.site-header .lang-switch .lang-current {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
    color: var(--ink); background: none; border: 0; padding: 6px 2px;
}
.site-header .lang-switch .lang-current:hover,
.site-header .lang-switch.open .lang-current { color: var(--ink); }
.site-header .lang-menu { right: 0; left: auto; }

/* butonul de meniu sta acum in dreapta, langa cos */
.nav-right .nav-toggle { display: none; margin-left: 2px; }
@media (max-width: 1080px) { .nav-right .nav-toggle { display: flex; } }

/* =============================== dreapta antetului, ca in macheta (11.09.2026)
   Favoritele si cosul sunt text cu numarul in paranteza, nu iconite. */
.hd-link {
    display: inline-flex; align-items: baseline; gap: 5px;
    font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
    color: var(--ink); white-space: nowrap; padding: 4px 0;
    transition: opacity 0.18s ease;
}
.hd-link:hover { opacity: 0.62; }
.hd-link:hover, .hd-link.active { color: var(--ink); }
.hd-link b { font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-right { gap: clamp(14px, 1.8vw, 26px); }

/* butonul de meniu: doua linii subtiri, ca in macheta */
.nav-right .nav-toggle span { height: 1px; }

/* pastila cu numarul: subtiata odata cu iconitele (11.09.2026) */
.cart-count, .sel-count {
    top: -4px; right: -6px; min-width: 15px; height: 15px;
    font-size: 9.5px; font-weight: 600; background: var(--ink);
}
.sel-link, .cart-link { color: var(--ink); }
.sel-link:hover, .cart-link:hover { opacity: 0.62; }