/* Atelier Cheia Gold — design tokens */
:root {
    /* Culori */
    --color-cream: #FAF6EE;
    --color-cream-deep: #F1E7D4;
    --color-paper: #FFFDF9;
    --color-ink: #221B14;
    --color-ink-soft: #55493C;
    --color-ink-faint: #8A7C6B;
    --color-white: #FFFFFF;

    --color-gold: #B8903E;
    --color-gold-light: #E4C77A;
    --color-gold-deep: #8A6A2A;
    --gradient-gold: linear-gradient(135deg, #EAD6A0 0%, #C9A24B 45%, #97742A 100%);

    --color-success-bg: #EEF4E8;
    --color-success-text: #3E5C2A;
    --color-error-bg: #FBEAEA;
    --color-error-text: #8B2E2E;
    --color-warning-bg: #FBF1DE;
    --color-warning-text: #8A5A1E;

    /* Tipografie */
    --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Jost', 'Segoe UI', system-ui, sans-serif;

    --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
    --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
    --fs-3xl: clamp(2.75rem, 2rem + 3.2vw, 5rem);

    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-normal: 1.6;

    /* Spațiere */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --container-max: 1280px;
    --container-pad: clamp(1.25rem, 3vw, 3rem);

    /* Formă & profunzime */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(34, 27, 20, 0.08);
    --shadow-md: 0 12px 34px rgba(34, 27, 20, 0.14);
    --shadow-lg: 0 24px 64px rgba(34, 27, 20, 0.22);
    --shadow-gold: 0 10px 28px rgba(184, 144, 62, 0.35);

    /* Mișcare */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 620ms;
    --dur-hero: 1500ms;

    /* Tranziții de pagină (vezi page-transitions.css) */
    --dur-page: 400ms;
    --dur-page-fast: 300ms;
}
/* Atelier Cheia Gold — reset & tipografie de bază */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-500-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0329;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0329;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0329;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-500-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-500-latin-ext.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0329;
}

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

* {
    margin: 0;
}

/*
 * Atributul [hidden] trebuie să învingă orice `display` scris de noi.
 *
 * Fără această regulă, o componentă ascunsă care are în CSS `display: flex`
 * (modale, sertare, overlay-uri) rămâne în pagină: invizibilă, dar întinsă
 * peste tot ecranul și interceptând toate click-urile. Regula implicită a
 * browserului pentru [hidden] are specificitate mai mică decât a noastră și
 * pierde tăcut.
 */
[hidden] {
    display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-ink);
    background: var(--color-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--color-ink);
    text-wrap: balance;
}

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

p {
    color: var(--color-ink-soft);
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
    padding: 0;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--color-gold-light);
    color: var(--color-ink);
}

:focus-visible {
    outline: 2px solid var(--color-gold-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

.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;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: var(--color-ink);
    color: var(--color-white);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    z-index: 1000;
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
    top: 1rem;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
    margin-bottom: var(--space-2);
}

.eyebrow-link {
    color: var(--color-gold-deep);
}

.eyebrow-link:hover {
    text-decoration: underline;
}

.empty-state {
    padding: var(--space-8) 0;
    text-align: center;
    color: var(--color-ink-faint);
    font-style: italic;
}
/* Atelier Cheia Gold — layout structural */

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 246, 238, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(184, 144, 62, 0.16);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo__img {
    height: 42px;
    width: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-nav__list a {
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    padding-block: var(--space-2);
    position: relative;
}

.site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--color-gold);
    transition: right var(--dur-base) var(--ease-out);
}

.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after {
    right: 0;
}

.site-nav__list a[aria-current="page"] {
    color: var(--color-ink);
}

.site-nav__cta {
    padding: 0.55rem 1.25rem !important;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-pill);
    color: var(--color-gold-deep) !important;
}

.site-nav__cta::after { display: none; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
}

.nav-toggle__bar {
    width: 24px;
    height: 2px;
    background: var(--color-ink);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}

/* ---------- Sections ---------- */

main {
    display: block;
}

.section {
    padding-block: var(--space-9);
}

.section--tight {
    padding-block: var(--space-7);
}

.section--narrow {
    padding-block: var(--space-9);
}

.section--tinted {
    background: var(--color-cream-deep);
}

.section__heading {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-7);
}

.section__cta {
    text-align: center;
    margin-top: var(--space-7);
}

.page-header {
    padding-block: var(--space-8) var(--space-6);
    text-align: center;
}

.page-header__lead {
    max-width: 620px;
    margin-inline: auto;
    font-size: var(--fs-md);
}

.page-header--service {
    text-align: left;
}

.page-header--service .page-header__lead {
    margin-inline: 0;
}

/* ---------- Scene stack: tranziție cinematică scroll-linked între hero și povestea atelierului ---------- */

.scene-stack {
    position: relative;
}

.scene-stack__pin {
    position: relative;
}

.scene-stack__scene {
    position: relative;
}

/* Stare implicită: fără JS / prefers-reduced-motion, scenele rămân în flux normal,
   complet vizibile una după alta — nicio scenă nu trebuie să depindă de JS ca să se vadă. */

.scene-stack--pinned {
    height: 200vh;
}

@supports (height: 100svh) {
    .scene-stack--pinned {
        height: 200svh;
    }
}

.scene-stack--pinned .scene-stack__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

@supports (height: 100svh) {
    .scene-stack--pinned .scene-stack__pin {
        height: 100svh;
    }
}

.scene-stack--pinned .scene-stack__scene {
    position: absolute;
    inset: 0;
    will-change: opacity;
}

.scene-stack--pinned [data-scene-media],
.scene-stack--pinned [data-scene-content] {
    will-change: transform;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    height: 92vh;
    min-height: 560px;
    max-height: 980px;
    overflow: hidden;
    background: var(--color-ink);
    isolation: isolate;
}

.scene-stack--pinned .hero.scene-stack__scene {
    height: 100%;
}

.hero__stage {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 15, 8, 0.55) 0%, rgba(20, 15, 8, 0.28) 32%, rgba(20, 15, 8, 0.5) 78%, rgba(20, 15, 8, 0.72) 100%);
}

.hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    color: var(--color-white);
    transform: translate3d(calc(var(--tilt-x, 0) * 1px), calc(var(--tilt-y, 0) * 1px + var(--scene-content-y, 0px)), 0);
    transition: transform 500ms var(--ease-out);
}

.hero__eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: var(--space-4);
}

.hero__heading {
    color: var(--color-white);
    font-size: var(--fs-3xl);
    max-width: 16ch;
    margin-bottom: var(--space-4);
}

.hero__panel {
    display: none;
    max-width: 46ch;
}

.hero__panel.is-active {
    display: block;
}

.hero__subtitle {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-md);
    margin-bottom: var(--space-6);
}

.hero__dots {
    position: absolute;
    z-index: 3;
    right: var(--container-pad);
    bottom: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Zona tactilă e mai mare (24×24px, minimul recomandat) decât punctul vizibil
   (10px, prin ::before) — altfel indicatoarele de scenă sunt prea mici de
   atins pe mobil. */
.hero__dot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
}

.hero__dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.hero__dot.is-active::before {
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
    transform: scale(1.3);
}

.hero__particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 3;
    width: 26px;
    height: 42px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-pill);
}

.hero__scroll-cue span {
    display: block;
    width: 4px;
    height: 8px;
    margin: 6px auto 0;
    border-radius: var(--radius-pill);
    background: var(--color-gold-light);
}

/* ---------- Story ---------- */

.story-scene {
    display: flex;
    align-items: center;
    background: var(--color-cream);
    padding-block: var(--space-8);
}

.story__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
    align-items: center;
    width: 100%;
}

.story__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
}

.story__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story__content {
    transform: translate3d(0, var(--scene-content-y, 0px), 0);
}

.story__content h2 {
    margin-bottom: var(--space-5);
}

.story__content p {
    margin-bottom: var(--space-4);
    font-size: var(--fs-md);
}

/* ---------- Grids: servicii / galerie ---------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.service-grid--wide {
    grid-template-columns: repeat(3, 1fr);
}

.service-card {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.service-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.service-card__link {
    display: block;
    padding-bottom: var(--space-5);
}

.service-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.service-card:hover .service-card__media img {
    transform: scale(1.06);
}

.service-card__title {
    margin: var(--space-5) var(--space-5) var(--space-2);
    font-size: var(--fs-lg);
}

.service-card__desc {
    margin: 0 var(--space-5) var(--space-4);
}

.service-card .link-arrow {
    margin-left: var(--space-5);
}

.gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.gallery-preview-grid__item {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.gallery-preview-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-7);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.gallery-grid__item {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--color-paper);
}

.gallery-grid__item.is-hidden {
    display: none;
}

.gallery-grid__link {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.gallery-grid__link:hover .gallery-grid__img {
    transform: scale(1.08);
}

.gallery-grid__item figcaption {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
}

.gallery-grid__zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-white);
    background: rgba(20, 15, 8, 0.35);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.gallery-grid__link:hover .gallery-grid__zoom,
.gallery-grid__link:focus-visible .gallery-grid__zoom {
    opacity: 1;
}

.service-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-9);
}

.service-detail__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3;
}

.service-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-detail__content p {
    font-size: var(--fs-md);
    margin-bottom: var(--space-6);
}

.service-detail__gallery-heading {
    margin-bottom: var(--space-6);
}

/* ---------- Recenzii ---------- */

.reviews-slider {
    position: relative;
}

.reviews-slider__track {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    scrollbar-width: none;
}

.reviews-slider__track::-webkit-scrollbar {
    display: none;
}

.reviews-slider__track .review-card {
    flex: 0 0 min(380px, 85vw);
    scroll-snap-align: start;
}

.reviews-slider__controls {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.reviews-slider__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-gold);
    color: var(--color-gold-deep);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out);
}

.reviews-slider__btn:hover {
    background: var(--color-gold-light);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* ---------- Recenzii Google ---------- */

.google-reviews-card {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.google-reviews-card__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding-right: var(--space-6);
    border-right: 1px solid var(--color-cream-deep);
}

.google-reviews-card__rating svg {
    width: 32px;
    height: 32px;
}

.google-reviews-card__score {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    color: var(--color-ink);
}

.google-reviews-card__stars {
    color: var(--color-gold);
    font-size: var(--fs-md);
    letter-spacing: 2px;
}

.google-reviews-card__body p:not(.eyebrow) {
    color: var(--color-ink-faint);
}

@media (max-width: 640px) {
    .google-reviews-card {
        flex-direction: column;
        text-align: center;
    }

    .google-reviews-card__rating {
        padding-right: 0;
        padding-bottom: var(--space-5);
        border-right: 0;
        border-bottom: 1px solid var(--color-cream-deep);
    }
}

/* Varianta din secțiunea unică de recenzii de pe homepage */
.google-reviews-card--inline {
    margin-top: var(--space-7, 3rem);
}

.google-reviews-card--inline .google-reviews-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.google-reviews-card__title {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-2);
}

.google-reviews-card__cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .google-reviews-card--inline {
        margin-top: var(--space-6);
    }

    .google-reviews-card__cta {
        align-self: stretch;
        text-align: center;
    }
}

.reviews-summary__stars {
    color: var(--color-gold);
    margin-right: var(--space-2);
}

/* ---------- CTA band ---------- */

/* Clipează containerul static din jurul .cta-band, care e translat continuu
   de parallax.js — fără el, transform-ul mută vizual toată secțiunea
   (fundal inclusiv) peste vecinii ei, pentru că overflow:hidden de pe
   .cta-band însuși se mișcă odată cu transform-ul propriu, deci nu oprește
   nimic. Wrapper-ul rămâne pe loc, deci taie exact ce iese din spațiul
   normal al secțiunii. */
.cta-band-clip {
    overflow: hidden;
}

.cta-band {
    position: relative;
    background: var(--color-ink);
    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: var(--gradient-gold);
    opacity: 0.14;
    z-index: 0;
}

.cta-band__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.cta-band h2 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-band p {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: var(--space-6);
    font-size: var(--fs-md);
}

/* ---------- Contact ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-8);
    align-items: start;
}

.contact-info__list {
    margin: var(--space-5) 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-info__list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(184, 144, 62, 0.18);
}

.contact-info__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold-deep);
}

.contact-info__social {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.contact-info__map {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.contact-info__map iframe {
    display: block;
    border: 0;
}

.contact-form-wrap {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    box-shadow: var(--shadow-sm);
}

.form-row {
    margin-bottom: var(--space-5);
}

.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: 0;
}

.form-row--split > div {
    margin-bottom: var(--space-5);
}

.form-row--checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.form-row--checkbox input {
    margin-top: 4px;
}

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

/* ---------- Footer ---------- */

.site-footer {
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.72);
    padding-top: var(--space-8);
    font-size: var(--fs-sm);
}

.site-footer h2 {
    color: var(--color-white);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-4);
}

.site-footer__main {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr 0.8fr 1.8fr;
    gap: var(--space-7);
    padding-bottom: var(--space-7);
}

.site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__brand img {
    margin-bottom: var(--space-4);
}

.site-footer__brand p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 var(--space-5);
    max-width: 30ch;
}

ul.site-footer__social {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    opacity: 0.8;
    transform: translateY(-2px);
}

.site-footer__social img,
.site-footer__social svg {
    display: block;
    width: 32px;
    height: 32px;
}

.site-footer__links a,
.site-footer__legal-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
    color: var(--color-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__contact address {
    font-style: normal;
}

.site-footer__contact li {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2);
    line-height: 1.5;
}

.site-footer__contact a,
.site-footer__contact span:not(.site-footer__label) {
    color: rgba(255, 255, 255, 0.85);
}

.site-footer__contact a {
    text-decoration: none;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    color: var(--color-gold-light);
    text-decoration: underline;
}

.site-footer__legal-links h2 {
    text-align: center;
}

.site-footer__legal-links ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    align-items: baseline;
    row-gap: var(--space-4);
    column-gap: var(--space-6);
}

.site-footer__label {
    color: var(--color-gold-light);
    font-weight: 500;
    white-space: nowrap;
}

/* Date companie — bandă discretă, integrată sub coloanele principale */
.site-footer__company {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.5);
}

/* Banner cookies (consimțământ pentru Google Analytics) */
.cookie-banner {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 200;
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    font-size: var(--fs-sm);
}

.cookie-banner__text {
    margin: 0;
    flex: 1 1 auto;
}

.cookie-banner__text a {
    color: var(--color-gold-light, #E8D5A5);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: var(--space-3);
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__actions .btn {
        flex: 1 1 0;
    }
}

/* Newsletter — formular de abonare în subsol */
.site-footer__newsletter {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: var(--space-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-6);
    align-items: center;
}

.site-footer__newsletter h2 {
    margin-bottom: var(--space-2);
}

.site-footer__newsletter-text p {
    margin: 0;
}

.newsletter-form__row {
    display: flex;
    gap: var(--space-3);
}

.newsletter-form__row input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
    font: inherit;
}

.newsletter-form__row input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form__row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.newsletter-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.newsletter-form__consent input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.newsletter-form__consent a {
    color: inherit;
    text-decoration: underline;
}

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

@media (max-width: 760px) {
    .site-footer__newsletter {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .newsletter-form__row {
        flex-direction: column;
    }

    .newsletter-form__row .btn {
        width: 100%;
    }
}

.site-footer__company-title {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    flex-shrink: 0;
}

.site-footer__company-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    list-style: none;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: var(--space-5);
    font-size: var(--fs-sm);
    text-align: center;
}

/* Regula globală "p { color: var(--color-ink-soft) }" din base.css țintește
   direct acest <p> (culoare gândită pentru fundal deschis) și câștigă în
   fața culorii moștenite de la părinte — trebuie suprascrisă explicit aici. */
.site-footer__bottom p {
    color: rgba(255, 255, 255, 0.75);
}

.site-footer__netopia-badge {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

.site-footer__netopia-badge > div {
    max-width: 150px;
}

/* ---------- Pagini legale ---------- */

.legal-page {
    max-width: 760px;
}

.legal-operator {
    background: var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.legal-operator h2 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-4);
}

.legal-operator ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-sm);
}

.legal-operator__label {
    color: var(--color-gold-deep);
    margin-right: var(--space-2);
}

.legal-operator__pending {
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--color-ink-faint);
}

.legal-operator__pending code {
    font-style: normal;
    background: rgba(184, 144, 62, 0.12);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.legal-content {
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-ink-soft);
}

/* ---------- Error page ---------- */

.error-page {
    text-align: center;
    padding-block: var(--space-9);
}

.error-page__code {
    font-family: var(--font-heading);
    font-size: 6rem;
    color: var(--color-gold);
    line-height: 1;
}

.error-page h1 {
    margin: var(--space-4) 0;
}

.error-page p {
    margin-bottom: var(--space-6);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .service-grid,
    .service-grid--wide,
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid,
    .gallery-preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .story__grid,
    .service-detail,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .story__media {
        aspect-ratio: 16 / 9;
    }

    .site-footer__main {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--space-7);
    }
}

@media (max-width: 860px) {
    .site-nav {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        /* .site-header are backdrop-filter, ceea ce ii face containing block
           pentru elementele fixed descendente (ex: acest meniu) — "bottom: 0"
           s-ar rezolva atunci fata de inaltimea headerului (~67px), nu fata
           de viewport, si sertarul ar avea loc doar pentru un buton. Inaltime
           explicita in vh/dvh ramane corecta indiferent de containing block. */
        height: calc(100vh - 68px);
        background: var(--color-cream);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
        overflow-y: auto;
        padding: var(--space-6) var(--container-pad);
        box-shadow: var(--shadow-md);
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 860px) {
    @supports (height: 100dvh) {
        .site-nav {
            height: calc(100dvh - 68px);
        }
    }
}

@media (max-width: 640px) {
    .service-grid,
    .service-grid--wide,
    .reviews-grid,
    .gallery-grid,
    .gallery-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row--split {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__heading {
        font-size: var(--fs-2xl);
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        row-gap: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .site-footer__brand p {
        max-width: none;
    }

    .site-footer__company {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .contact-form-wrap {
        padding: var(--space-5);
    }
}

@media (max-width: 420px) {
    .gallery-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__legal-links ul {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* Atelier Cheia Gold — componente */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.9rem 2rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn--gold {
    background: var(--gradient-gold);
    color: var(--color-ink);
    box-shadow: var(--shadow-gold);
}

.btn--gold:hover {
    box-shadow: 0 14px 32px rgba(184, 144, 62, 0.45);
}

.btn--gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-20deg);
    transition: left 650ms var(--ease-out);
    pointer-events: none;
}

.btn--gold:hover::after {
    left: 130%;
}

@media (prefers-reduced-motion: reduce) {
    .btn--gold::after {
        display: none;
    }
}

.btn--outline {
    border: 1px solid var(--color-gold);
    color: var(--color-gold-deep);
}

.btn--outline:hover {
    background: var(--color-gold-light);
}

.btn--primary {
    background: var(--color-ink);
    color: var(--color-white);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-gold-deep);
    transition: gap var(--dur-fast) var(--ease-out);
}

.link-arrow:hover {
    text-decoration: underline;
}

/* ---------- Filtre galerie ---------- */

.gallery-filters__btn {
    padding: 0.55rem 1.4rem;
    border: 1px solid rgba(184, 144, 62, 0.4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.gallery-filters__btn:hover {
    border-color: var(--color-gold);
}

.gallery-filters__btn.is-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-white);
}

/* ---------- Recenzii card ---------- */

.review-card {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.review-card__photo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-cream-deep);
}

.review-card__stars {
    color: var(--color-gold);
    font-size: var(--fs-md);
    letter-spacing: 2px;
}

.review-card__text {
    font-style: italic;
    color: var(--color-ink);
    flex-grow: 1;
}

.review-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--fs-sm);
}

.review-card__name {
    font-style: normal;
    font-weight: 500;
    color: var(--color-ink);
}

.review-card__date {
    color: var(--color-ink-faint);
}

/* ---------- Formulare ---------- */

label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}

/* „Relief cald" — câmpurile capătă adâncime din umbră, nu din contur:
   fără margine la repaus, doar o umbră discretă; la focalizare, câmpul
   „se ridică" cu o lucire aurie (var(--shadow-gold)), ca un buton apăsat. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-paper);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* ---------- Rating cu steluțe (formular recenzie) ---------- */

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
    border: 0;
    padding: 0;
    margin: 0;
}

.star-rating input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.star-rating label {
    display: inline-block;
    margin: 0;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--color-cream-deep);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--color-gold);
}

.star-rating input:focus-visible + label {
    outline: 2px solid var(--color-gold-deep);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.review-submit__thanks {
    text-align: center;
}

.review-submit__thanks-icon {
    font-size: 2rem;
    color: var(--color-gold);
    margin: 0 0 var(--space-3);
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-gold-deep);
}

.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
}

.alert--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.alert--error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

/* ---------- Lightbox (injectat de gallery.js) ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 11, 6, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox__image {
    max-width: min(90vw, 1100px);
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transform: scale(0.96);
    transition: transform var(--dur-base) var(--ease-out);
}

.lightbox.is-open .lightbox__image {
    transform: scale(1);
}

.lightbox__image.is-swipeable {
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-drag: none;
    user-select: none;
}

.lightbox__image.is-dragging {
    cursor: grabbing;
    transition: none;
}

.lightbox__caption {
    position: absolute;
    bottom: var(--space-6);
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    color: var(--color-white);
    font-size: 2rem;
    line-height: 1;
    padding: var(--space-3);
    transition: color var(--dur-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    color: var(--color-gold-light);
}

.lightbox__close {
    top: var(--space-5);
    right: var(--space-5);
}

.lightbox__prev {
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__next {
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 640px) {
    .lightbox__prev, .lightbox__next {
        font-size: 1.5rem;
    }
}

/* Câmpul de încărcare fișier are lățime proprie (butonul + numele fișierului)
   și ieșea din rândul lui pe ecrane înguste (ex. poza din formularul de recenzie). */
input[type="file"] {
    max-width: 100%;
}
/* ==========================================================================
   Atelier Cheia Gold — magazin (listare produse + pagină produs)

   Folosește exclusiv token-urile din tokens.css, ca magazinul să arate ca
   restul site-ului. Fără style="" inline nicăieri: CSP-ul are style-src 'self'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Slideshow produse promovate
   -------------------------------------------------------------------------- */
.shop-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-ink);
}

.shop-hero__track {
    position: relative;
    /* Înălțime dictată de viewport, plafonată ca să nu domine pagina. */
    height: clamp(340px, 52vh, 560px);
}

.shop-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease-cinematic), visibility var(--dur-slow);
}

.shop-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.shop-hero__slide picture,
.shop-hero__slide .shop-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Voalul întunecat garantează contrastul textului peste orice fotografie. */
.shop-hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(34, 27, 20, 0.82) 0%, rgba(34, 27, 20, 0.45) 55%, rgba(34, 27, 20, 0.15) 100%);
}

.shop-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    gap: var(--space-4);
    color: var(--color-white);
}

.shop-hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    color: var(--color-white);
    max-width: 18ch;
    margin: 0;
}

.shop-hero__subtitle {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.85);
    max-width: 46ch;
    margin: 0;
}

.shop-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-white);
    background: rgba(34, 27, 20, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.shop-hero__nav:hover,
.shop-hero__nav:focus-visible {
    background: rgba(34, 27, 20, 0.75);
    border-color: var(--color-gold);
}

.shop-hero__nav--prev { left: var(--space-4); }
.shop-hero__nav--next { right: var(--space-4); }

.shop-hero__dots {
    position: absolute;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: var(--space-2);
}

.shop-hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.shop-hero__dot.is-active {
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
    transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Navigare pe categorii
   -------------------------------------------------------------------------- */
.shop-categories {
    border-bottom: 1px solid rgba(184, 144, 62, 0.16);
}

.shop-categories__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-categories__item {
    display: inline-block;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    text-decoration: none;
    padding-bottom: var(--space-1);
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.shop-categories__item:hover,
.shop-categories__item:focus-visible,
.shop-categories__item.is-active {
    color: var(--color-gold-deep);
    border-bottom-color: var(--color-gold);
}

.shop-categories__list > li {
    position: relative;
}

.shop-categories__sub {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    padding: var(--space-2) 0 0;
    margin: 0;
}

/* Reveal-ul la hover e strict pentru desktop (≥861px, pragul de meniu mobil
   folosit peste tot în site) — NU pentru că am reușit să-l blocăm pe mobil
   prin specificitate, ci pentru că telefoanele simulează :hover la primul
   tap, fără niciun "mouseleave" real după — starea rămânea "agățată"
   deschisă după navigarea AJAX, exact bug-ul raportat la Brățări. Mai simplu
   și mai robust: pe ecrane mici, regula de hover nici nu există pentru
   motorul CSS, indiferent ce simulează browser-ul. */
@media (min-width: 861px) {
    /* Poziționată absolut, ca lista de subcategorii să nu mai facă <li>-ul
       părinte mai lat decât linkul propriu-zis — altfel, cât timp era
       vizibilă, împingea categoriile următoare spre dreapta. */
    .shop-categories__sub {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 5;
        width: max-content;
    }

    /* Rămân vizibile cât timp cursorul e oriunde în interiorul <li>-ului
       (inclusiv pe lista de sub-linkuri) — :focus-within ține același
       comportament disponibil și pentru navigarea de la tastatură. */
    .shop-categories__list > li:hover > .shop-categories__sub,
    .shop-categories__list > li:focus-within > .shop-categories__sub {
        display: flex;
    }
}

/* Pe mobil subcategoriile nu mai apar aici (ocupau prea mult din pagină) —
   rămân disponibile ca opțiune în panoul de filtre (select „Categorie"). */
@media (max-width: 860px) {
    .shop-categories__sub {
        display: none;
    }
}

.shop-categories__item--sub {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-xs);
    color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   Layout listare: filtre + rezultate
   -------------------------------------------------------------------------- */
.shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-7);
    align-items: start;
}

.shop-filters-toggle {
    display: none;
}

.shop-filters {
    position: sticky;
    top: var(--space-7);
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.shop-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.shop-filters__head h2 {
    font-size: var(--fs-md);
    margin: 0;
}

.shop-filters__close {
    display: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.shop-filters__group {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.shop-filters__group legend,
.shop-filters__group > label:not(.shop-filters__check) {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-bottom: var(--space-2);
    padding: 0;
}

.shop-filters__group input[type="search"],
.shop-filters__group input[type="number"],
.shop-filters__group select {
    width: 100%;
}

.shop-filters__range {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.shop-filters__check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-bottom: var(--space-2);
    cursor: pointer;
}

.shop-filters__check input {
    width: auto;
    margin: 0;
    accent-color: var(--color-gold);
}

.shop-filters__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.shop-filters__actions .btn {
    width: 100%;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Bara de sortare
   -------------------------------------------------------------------------- */
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-cream-deep);
}

.shop-toolbar__count {
    margin: 0;
    color: var(--color-ink-faint);
    font-size: var(--fs-sm);
}

.shop-toolbar__sort {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.shop-toolbar__sort label {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Grila de produse
   -------------------------------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: stretch;
    gap: var(--space-6);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.product-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-cream);
}

/* Cardurile cu swipe activ (homepage) permit tragere orizontală pentru a
   schimba poza, dar lasă scroll-ul vertical al paginii neatins. */
.product-card__media[data-card-swipe] {
    touch-action: pan-y;
}

.product-card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-card__img {
    transform: scale(1.05);
}

.product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.5rem;
    color: var(--color-gold-light);
}

.product-card__badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-ink);
}

.badge--sale {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    font-weight: 600;
}

.badge--new {
    background: var(--gradient-gold);
    color: var(--color-ink);
    font-weight: 600;
}

.badge--muted {
    background: rgba(34, 27, 20, 0.75);
    color: var(--color-white);
}

.product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-4) var(--space-4) var(--space-5);
}

.product-card__category {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin: 0 0 var(--space-2);
}

.product-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-2);
    /* Clamp la 2 rânduri, ca titlurile lungi să nu strice alinierea cardurilor. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.product-card__excerpt {
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-3);
    /* Rezumatul se taie la 2 rânduri ca toate cardurile să rămână aliniate. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Preț
   -------------------------------------------------------------------------- */
.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

.price__old {
    color: var(--color-ink-faint);
    font-size: var(--fs-sm);
    text-decoration-thickness: 1px;
}

.price__current {
    font-size: var(--fs-md);
    color: var(--color-ink);
    font-weight: 600;
}

.price__current--sale {
    color: var(--color-error-text);
}

.price__badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-error-text);
    background: var(--color-error-bg);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.5rem;
}

.price--large .price__current {
    font-size: var(--fs-xl);
    font-family: var(--font-heading);
}

.price--large .price__old {
    font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   Paginare
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.pagination__link:hover,
.pagination__link:focus-visible {
    border-color: var(--color-gold);
    color: var(--color-gold-deep);
}

.pagination__link.is-active {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--color-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
    padding: var(--space-5) 0 0;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-ink-faint);
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumbs__item a {
    color: var(--color-ink-faint);
    text-decoration: none;
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus-visible {
    color: var(--color-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumbs__sep {
    color: var(--color-cream-deep);
}

/* --------------------------------------------------------------------------
   Pagina de produs
   -------------------------------------------------------------------------- */
.product-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.product-gallery__main {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-cream);
    aspect-ratio: 1 / 1;
}

.product-gallery__zoom {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.product-gallery__main picture {
    display: block;
    width: 100%;
    height: 100%;
}

.product-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--color-cream);
    border-radius: var(--radius-md);
    font-size: 4rem;
    color: var(--color-gold-light);
}

.product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.product-gallery__thumb {
    width: 76px;
    height: 76px;
    padding: 0;
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: none;
    transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    opacity: 0.7;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-gallery__thumb:hover,
.product-gallery__thumb:focus-visible,
.product-gallery__thumb.is-active {
    border-color: var(--color-gold);
    opacity: 1;
}

.product-info__title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-4);
}

.product-info__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--color-ink-faint);
}

.product-info__sku {
    letter-spacing: 0.04em;
}

.product-info__availability {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
}

.product-info__availability.is-available {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.product-info__availability.is-unavailable {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.product-info__savings {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--color-success-text);
}

.product-info__lead {
    margin: var(--space-5) 0 0;
    font-size: var(--fs-md);
    color: var(--color-ink-soft);
    line-height: var(--lh-normal);
}

.product-attributes {
    margin: var(--space-6) 0 0;
    border-top: 1px solid var(--color-cream-deep);
}

.product-attributes__row {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-deep);
}

.product-attributes__row dt {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.product-attributes__row dd {
    margin: 0;
    color: var(--color-ink);
}

.product-info__actions {
    margin-top: var(--space-7);
}

.product-info__note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--color-ink-faint);
}

.product-description {
    max-width: 72ch;
}

.product-description h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-4);
}

.product-description p {
    margin-bottom: var(--space-4);
    line-height: var(--lh-normal);
    color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .product-detail__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 860px) {
    .shop-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .shop-filters-toggle {
        display: inline-block;
        width: 100%;
    }

    /* Pe mobil filtrele devin drawer off-canvas, ascunse până la deschidere.
       Pornește sub header (nu de la marginea ecranului): altfel headerul
       (z-index 100) acoperea capul sertarului, inclusiv butonul de închidere. */
    .shop-filters {
        position: fixed;
        top: 68px;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(340px, 88vw);
        overflow-y: auto;
        z-index: 60;
        border-radius: 0;
        border: 0;
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--dur-base) var(--ease-out);
    }

    .shop-filters.is-open {
        transform: translateX(0);
    }

    .shop-filters__close {
        display: block;
    }

    body.has-drawer-open {
        overflow: hidden;
    }
}

@media (max-width: 640px) {
    /* Două produse pe rând și pe cel mai îngust telefon (375px): lățimea
       minimă e calculată ca 2 coloane + spațiul dintre ele să încapă în
       container, altfel grila ar cădea pe o singură coloană. */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
        gap: var(--space-3);
    }

    .product-card__body { padding: var(--space-3) var(--space-3) var(--space-4); }
    .product-card__excerpt { display: none; }
    .product-card__cta { margin-top: var(--space-3); padding: 0.7rem 1rem; font-size: var(--fs-xs); }

    .shop-hero__nav {
        width: 38px;
        height: 38px;
        font-size: 1.5rem;
    }

    .shop-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card__img,
    .shop-hero__slide,
    .shop-filters {
        transition: none;
    }

    .product-card:hover {
        transform: none;
    }

    .product-card:hover .product-card__img {
        transform: none;
    }
}
/* ==========================================================================
   Atelier Cheia Gold — storefront
   Navbar comercial, mega-menu, căutare, coș, favorite, cont, checkout.

   Extinde shop.css (catalog + pagina produs). Folosește exclusiv token-urile
   din tokens.css și nu conține niciun stil inline — CSP-ul are style-src 'self'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Acțiuni din navbar
   -------------------------------------------------------------------------- */
.site-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-4);
}

.site-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-out);
}

.site-action:hover,
.site-action:focus-visible {
    color: var(--color-gold-deep);
}

.site-action__icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* Glifa de căutare (⌕) e vizual mai mică decât celelalte la același
   font-size — o mărim separat ca să pară la fel de mare. */
[data-search-open] .site-action__icon {
    font-size: 2rem;
    position: relative;
    top: -0.15em;
}

.site-action__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-action__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-ink);
    background: var(--gradient-gold);
    border-radius: var(--radius-pill);
}

.site-action__badge.is-empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Mega-menu
   -------------------------------------------------------------------------- */
.site-nav__list .has-mega {
    position: static;
}

.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    background: var(--color-paper);
    border-top: 1px solid var(--color-cream-deep);
    box-shadow: var(--shadow-md);
    animation: megaFade var(--dur-fast) var(--ease-out);
}

@keyframes megaFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mega-menu__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6) var(--container-pad);
}

.mega-menu__title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: var(--color-ink);
    text-decoration: none;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-cream-deep);
}

.mega-menu__title:hover { color: var(--color-gold-deep); }

.mega-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mega-menu__list a {
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    text-decoration: none;
}

.mega-menu__list a:hover,
.mega-menu__list a:focus-visible { color: var(--color-gold-deep); }

.mega-menu__col--promo {
    background: var(--color-cream);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.mega-menu__eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
    margin: 0 0 var(--space-2);
}

.mega-menu__promo-text {
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-4);
}

/* --------------------------------------------------------------------------
   Overlay de căutare
   -------------------------------------------------------------------------- */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(34, 27, 20, 0.55);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    overflow-y: auto;
}

.search-overlay.is-open { opacity: 1; }

/* Acelasi motiv ca la sertarul de cos: headerul (z-index 100) acoperea
   campul de cautare si butonul de inchidere, care porneau de la top:0. */
@media (max-width: 860px) {
    .search-overlay {
        padding-top: 68px;
    }
}

.search-overlay__inner {
    background: var(--color-paper);
    padding: var(--space-7) var(--container-pad) var(--space-8);
    position: relative;
}

.search-overlay__close {
    position: absolute;
    top: var(--space-4);
    right: var(--container-pad);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-soft);
}

.search-overlay__form {
    display: flex;
    gap: var(--space-3);
    max-width: 720px;
    margin: 0 auto var(--space-6);
}

.search-overlay__form input[type="search"] {
    flex: 1;
    font-size: var(--fs-md);
    padding: var(--space-3) var(--space-4);
}

.search-overlay__results { max-width: 720px; margin: 0 auto; }

.search-overlay__section {
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin: var(--space-5) 0 var(--space-3);
}

.search-overlay__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-overlay__cats a {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    text-decoration: none;
}

.search-overlay__cats a:hover {
    border-color: var(--color-gold);
    color: var(--color-gold-deep);
}

.search-overlay__products { list-style: none; padding: 0; margin: 0; }

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast) var(--ease-out);
}

.search-result:hover { background: var(--color-cream); }

.search-result img,
.search-result__placeholder {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-light);
    flex-shrink: 0;
}

.search-result__body { display: flex; flex-direction: column; gap: 2px; }
.search-result__name { font-weight: 500; }
.search-result__cat { font-size: var(--fs-xs); color: var(--color-ink-faint); }
.search-result__price { font-size: var(--fs-sm); color: var(--color-gold-deep); }
.search-result__price s { color: var(--color-ink-faint); margin-right: var(--space-2); }

.search-overlay__all {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-gold-deep);
}

.search-overlay__empty,
.quickview__loading {
    color: var(--color-ink-faint);
    text-align: center;
    padding: var(--space-6) 0;
}

.search-page-form {
    display: flex;
    gap: var(--space-3);
    max-width: 620px;
    margin: 0 0 var(--space-7);
}

.search-page-form input[type="search"] { flex: 1; }

/* --------------------------------------------------------------------------
   Sertarul de coș
   -------------------------------------------------------------------------- */
.cart-drawer { position: fixed; inset: 0; z-index: 95; }

.cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(34, 27, 20, 0.5);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--color-paper);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
}

.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

/* Pe ecrane inguste headerul (z-index 100) acoperea capul sertarului —
   inclusiv titlul si butonul de inchidere, care stateau la top:0. Sub
   pragul de 860px (acelasi prag folosit pentru meniul mobil), panoul si
   fundalul incep sub header, nu de la marginea ecranului. */
@media (max-width: 860px) {
    .cart-drawer__panel,
    .cart-drawer__backdrop {
        top: 68px;
    }
}

.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-cream-deep);
}

.cart-drawer__head h2 { font-size: var(--fs-md); margin: 0; }

.cart-drawer__close {
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-soft);
}

/* Doar lista derulează; capul și butoanele rămân fixe. */
.cart-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

.cart-drawer__empty {
    text-align: center;
    color: var(--color-ink-faint);
    padding: var(--space-7) 0;
}

.cart-drawer__foot {
    border-top: 1px solid var(--color-cream-deep);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cart-drawer__row {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-md);
}

.cart-drawer__foot .btn { text-align: center; }

.cart-lines { list-style: none; padding: 0; margin: 0; }

.cart-line {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-cream-deep);
}

.cart-line.is-unavailable { opacity: 0.55; }

.cart-line__img,
.cart-line__placeholder {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-light);
    flex-shrink: 0;
}

.cart-line__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.cart-line__name { color: inherit; text-decoration: none; font-weight: 500; }
.cart-line__name:hover { color: var(--color-gold-deep); }
.cart-line__pers { font-size: var(--fs-xs); color: var(--color-ink-faint); }
.cart-line__warning { font-size: var(--fs-xs); color: var(--color-error-text); }

.cart-line__qty {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1;
    background: none;
}

.qty-btn:hover { border-color: var(--color-gold); color: var(--color-gold-deep); }
.qty-value { min-width: 1.5rem; text-align: center; font-size: var(--fs-sm); }

.cart-line__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.cart-line__total { font-weight: 600; white-space: nowrap; }

.cart-line__remove {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-ink-faint);
    cursor: pointer;
    background: none;
    border: 0;
}

.cart-line__remove:hover { color: var(--color-error-text); }

/* --------------------------------------------------------------------------
   Notificări scurte
   -------------------------------------------------------------------------- */
.toast-stack {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: var(--color-white);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--error { background: var(--color-error-text); }

body.has-overlay-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Card produs — hover, favorite, vizualizare rapidă
   -------------------------------------------------------------------------- */
.product-card__media-link { display: block; width: 100%; height: 100%; }

.product-card.has-hover-image .product-card__media picture + picture {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

/* A doua imagine apare doar unde există hover real (nu pe touch). */
@media (hover: hover) {
    .product-card.has-hover-image:hover .product-card__media picture + picture { opacity: 1; }
}

/* Pe touch (fără hover), aceeași a doua imagine apare la swipe — clasa
   e comutată din product-card-swipe.js. */
.product-card.has-hover-image.is-showing-hover .product-card__media picture + picture {
    opacity: 1;
}

.product-card__wish {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 253, 249, 0.9);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-ink-soft);
    z-index: 2;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.product-card__wish:hover { border-color: var(--color-gold); color: var(--color-gold-deep); }
.product-card__wish.is-active { color: var(--color-error-text); border-color: var(--color-error-text); }

.product-card__quick {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    padding: 0.55rem 0.9rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 253, 249, 0.94);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-pill);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
    .product-card:hover .product-card__quick,
    .product-card:focus-within .product-card__quick { opacity: 1; transform: translateY(0); }
}

/* Fără hover (mobil), butonul de quick view nu are cum să apară — îl ascundem. */
@media (hover: none) {
    .product-card__quick { display: none; }
}

.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a:hover { color: var(--color-gold-deep); }

.product-card__cta { width: 100%; margin-top: auto; text-align: center; }
.product-card__form { margin-top: auto; }

.badge--best { background: var(--color-ink); color: var(--color-gold-light); }

/* --------------------------------------------------------------------------
   Vizualizare rapidă
   -------------------------------------------------------------------------- */
.quickview {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(34, 27, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    overflow-y: auto;
}

.quickview.is-open { opacity: 1; }

.quickview__panel {
    position: relative;
    background: var(--color-paper);
    border-radius: var(--radius-md);
    width: min(880px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.quickview__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    color: var(--color-ink-soft);
}

.quickview__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
}

.quickview__media picture { display: block; }

.quickview__img,
.quickview__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-cream);
}

.quickview__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-gold-light);
}

.quickview__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.quickview__thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }

.quickview__title { font-family: var(--font-heading); font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.quickview__sku { font-size: var(--fs-xs); color: var(--color-ink-faint); margin: 0 0 var(--space-3); }
.quickview__lead { color: var(--color-ink-soft); margin: var(--space-4) 0; }

.quickview__availability {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    margin: var(--space-3) 0;
}

.quickview__availability.is-available { background: var(--color-success-bg); color: var(--color-success-text); }
.quickview__availability.is-unavailable { background: var(--color-warning-bg); color: var(--color-warning-text); }

.quickview__attributes { margin: var(--space-4) 0; }

.quickview__attributes > div {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-cream-deep);
}

.quickview__attributes dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-faint);
    min-width: 110px;
}

.quickview__attributes dd { margin: 0; }

.quickview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-5) 0 var(--space-4);
}

.quickview__actions form { margin: 0; }

.quickview__wish {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-pill);
    background: none;
    cursor: pointer;
    font-size: var(--fs-sm);
}

.quickview__wish.is-active { color: var(--color-error-text); border-color: var(--color-error-text); }

/* --------------------------------------------------------------------------
   Pagina coș
   -------------------------------------------------------------------------- */
.page-header--compact { padding-bottom: var(--space-4); }

.cart-empty { text-align: center; padding: var(--space-7) 0; }
.cart-empty .btn { margin-top: var(--space-4); }

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-7);
    align-items: start;
}

.cart-table { width: 100%; border-collapse: collapse; }

.cart-table th {
    text-align: left;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    font-weight: 500;
    padding: 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-cream-deep);
}

.cart-table td {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-cream-deep);
    vertical-align: middle;
}

.cart-table tr.is-unavailable { opacity: 0.6; }

.cart-product { display: flex; gap: var(--space-4); align-items: flex-start; }
.cart-product__img img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-product__name { display: block; font-weight: 500; color: inherit; text-decoration: none; }
.cart-product__name:hover { color: var(--color-gold-deep); }

.cart-product__sku,
.cart-product__pers {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-ink-faint);
    margin-top: 2px;
}

.cart-product__warning { display: block; font-size: var(--fs-xs); color: var(--color-error-text); margin-top: var(--space-2); }

.cart-qty-form { display: flex; align-items: center; gap: var(--space-2); }
.cart-qty-input { width: 4.5rem; }

.cart-remove {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--color-ink-faint);
    background: none;
    border: 0;
    cursor: pointer;
}

.cart-remove:hover { color: var(--color-error-text); }

.cart-actions { margin-top: var(--space-5); }

.cart-summary {
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: sticky;
    top: var(--space-7);
}

.cart-summary h2 { font-size: var(--fs-md); margin: 0 0 var(--space-4); }

.cart-discount { margin-bottom: var(--space-5); }
.cart-discount label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-faint); margin-bottom: var(--space-2); }
.cart-discount__row { display: flex; gap: var(--space-2); }
.cart-discount__row input { flex: 1; min-width: 0; }

.cart-discount--applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.cart-totals { margin: 0 0 var(--space-5); }

.cart-totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.cart-totals__row dt { color: var(--color-ink-soft); }
.cart-totals__row dd { margin: 0; font-weight: 500; }
.cart-totals__row--discount dd { color: var(--color-success-text); }

.cart-totals__row--total {
    border-top: 1px solid var(--color-cream-deep);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    font-size: var(--fs-md);
}

.cart-totals__row--total dd { font-weight: 600; }

.cart-summary__cta { width: 100%; text-align: center; }
.cart-summary__note { font-size: var(--fs-xs); color: var(--color-ink-faint); margin: var(--space-3) 0 0; }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-7);
    align-items: start;
}

.checkout-step {
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.checkout-step__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-md);
    margin: 0 0 var(--space-5);
}

.checkout-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-gold);
    color: var(--color-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.checkout-note {
    font-size: var(--fs-xs);
    color: var(--color-ink-faint);
    background: var(--color-cream);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin: var(--space-4) 0;
}

.checkout-summary {
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: sticky;
    top: var(--space-7);
}

.checkout-summary h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-md);
    margin: 0 0 var(--space-4);
}

.checkout-lines { list-style: none; padding: 0; margin: 0 0 var(--space-5); }

.checkout-line {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-deep);
    font-size: var(--fs-sm);
}

.checkout-line__qty { color: var(--color-ink-faint); flex-shrink: 0; }
.checkout-line__name { flex: 1; }
.checkout-line__name small { display: block; font-size: var(--fs-xs); color: var(--color-ink-faint); }
.checkout-line__total { font-weight: 500; white-space: nowrap; }

.checkout-submit { width: 100%; text-align: center; margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   Confirmare comandă
   -------------------------------------------------------------------------- */
.confirmation { max-width: 780px; margin: 0 auto; text-align: center; }
.confirmation__mark { font-size: 3rem; color: var(--color-gold); margin: 0 0 var(--space-4); }
.confirmation__lead { color: var(--color-ink-soft); margin-bottom: var(--space-7); }

.confirmation__panel {
    text-align: left;
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.confirmation__panel h2 { font-size: var(--fs-md); margin: 0 0 var(--space-4); }
.confirmation__status { margin-top: var(--space-4); font-size: var(--fs-sm); }
.confirmation__note { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-ink-faint); }

.confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Cont client
   -------------------------------------------------------------------------- */
.auth-layout { display: flex; justify-content: center; }

.auth-card {
    width: min(460px, 100%);
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.auth-card--wide { width: min(680px, 100%); }
.auth-card h1 { font-size: var(--fs-xl); margin: 0 0 var(--space-5); }
.auth-card__submit { width: 100%; text-align: center; margin-top: var(--space-3); }
.auth-card__alt { margin: var(--space-5) 0 0; font-size: var(--fs-sm); color: var(--color-ink-soft); text-align: center; }
.auth-card__google-hint { margin-top: var(--space-3); text-align: center; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: var(--color-ink-faint);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-cream-deep);
}

.btn--google {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-cream-deep);
    color: var(--color-ink);
}

.btn--google:hover {
    background: var(--color-cream);
}

.account-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.account-nav ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }

.account-nav a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.account-nav a:hover { background: var(--color-cream); color: var(--color-ink); }
.account-nav a.is-active { background: var(--color-cream-deep); color: var(--color-gold-deep); font-weight: 500; }

.account-logout {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-ink-faint);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.account-logout:hover { color: var(--color-error-text); }

.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.account-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.account-stat:hover { border-color: var(--color-gold); }
.account-stat__value { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-gold-deep); }
.account-stat__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-faint); }

.account-panel {
    background: var(--color-paper);
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.account-panel h2 { font-size: var(--fs-md); margin: 0 0 var(--space-5); }

.account-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.account-panel__head h2 { margin: 0; }

.order-list { list-style: none; padding: 0; margin: 0; }

.order-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-cream-deep);
    font-size: var(--fs-sm);
}

.order-row__number { font-weight: 600; }
.order-row__date,
.order-row__status { color: var(--color-ink-faint); }
.order-row__total { font-weight: 500; }

.account-addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.account-addresses h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-faint); margin: 0 0 var(--space-3); }
.account-address { line-height: var(--lh-normal); color: var(--color-ink-soft); margin: 0; }

.address-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }

.address-card {
    position: relative;
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}

.address-card.is-default { border-color: var(--color-gold); }

.address-card__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: var(--fs-xs);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--gradient-gold);
    color: var(--color-ink);
}

.address-card h3 { font-size: var(--fs-sm); margin: 0 0 var(--space-2); }

.form-hint { font-size: var(--fs-xs); color: var(--color-ink-faint); margin: var(--space-1) 0 0; }

/* --------------------------------------------------------------------------
   Secțiuni de magazin pe homepage
   -------------------------------------------------------------------------- */
.home-shop-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.home-shop-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.home-shop-section__head h2 { font-family: var(--font-heading); font-size: var(--fs-xl); margin: 0; }

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

.category-card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--color-cream);
    color: var(--color-white);
    text-decoration: none;
}

.category-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.category-card:hover .category-card__img { transform: scale(1.05); }

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34, 27, 20, 0.05) 40%, rgba(34, 27, 20, 0.8) 100%);
}

.category-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: var(--space-5);
}

.category-card__title { font-family: var(--font-heading); font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
.category-card__desc { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); margin: 0; }

.category-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   Personalizare pe pagina produsului
   -------------------------------------------------------------------------- */
.personalization {
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin: var(--space-5) 0;
    background: var(--color-cream);
}

.personalization__title { font-size: var(--fs-md); margin: 0 0 var(--space-4); }
.personalization__field { margin-bottom: var(--space-4); }
.personalization__field label { display: block; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.personalization__field input,
.personalization__field select { width: 100%; }
.personalization__hint { font-size: var(--fs-xs); color: var(--color-ink-faint); margin: var(--space-1) 0 0; }
.personalization__price { color: var(--color-gold-deep); font-size: var(--fs-xs); }

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-1) 0 var(--space-2);
}
.color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    width: 4.75rem;
}
.color-swatch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.color-swatch__dot {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-cream-deep);
    box-shadow: inset 0 0 0 2px var(--color-cream);
}
.color-swatch input:checked + .color-swatch__dot {
    outline: 2px solid var(--color-gold-deep);
    outline-offset: 2px;
}
.color-swatch input:focus-visible + .color-swatch__dot {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
.color-swatch__label {
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--color-ink-faint);
    text-align: center;
}

/* Culorile implicite de șnur — style="" inline e blocat de CSP (style-src 'self'), de-asta sunt clase fixe. */
.color-swatch__dot--rosu { background: #C1272D; }
.color-swatch__dot--negru { background: #1A1A1A; }
.color-swatch__dot--albastru-deschis { background: #4FB6E8; }
.color-swatch__dot--albastru-inchis { background: #1B3E8C; }
.color-swatch__dot--mov { background: #6E3FA3; }
.color-swatch__dot--roz { background: #F2A6C1; }
.color-swatch__dot--fucsia { background: #D6146E; }
.color-swatch__dot--verde { background: #3A8F4B; }
.color-swatch__dot--alb { background: #FFFFFF; }
.color-swatch__dot--crem { background: #F1E2C4; }
.color-swatch__dot--default { background: #CCCCCC; }

.product-buy { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-5); }
.product-buy__qty-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.product-buy__qty-wrap label { font-size: var(--fs-xs); color: var(--color-ink-faint); }
.product-buy__qty { width: 5rem; }
.product-buy .btn { flex: 1; min-width: 200px; text-align: center; }

.whatsapp-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #E9F9EF;
    border: 1px solid #BFE8CE;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.whatsapp-note:hover { border-color: #25D366; }
.whatsapp-note__icon { flex-shrink: 0; }
.whatsapp-note span:last-child { min-width: 0; }

.product-wish-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--color-cream-deep);
    border-radius: var(--radius-pill);
    background: none;
    cursor: pointer;
    font-size: var(--fs-sm);
}

.product-wish-btn.is-active { color: var(--color-error-text); border-color: var(--color-error-text); }

/* Taburi pe pagina produsului */
.product-tabs { margin-top: var(--space-8); }

.product-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    border-bottom: 1px solid var(--color-cream-deep);
    margin-bottom: var(--space-5);
}

.product-tabs__btn {
    padding: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.product-tabs__btn.is-active { color: var(--color-gold-deep); border-bottom-color: var(--color-gold); }
.product-tabs__panel { line-height: var(--lh-normal); color: var(--color-ink-soft); max-width: 72ch; }
.product-tabs__panel p { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .cart-layout,
    .checkout-layout { grid-template-columns: minmax(0, 1fr); }
    .cart-summary,
    .checkout-summary { position: static; }
}

@media (max-width: 900px) {
    .account-layout { grid-template-columns: minmax(0, 1fr); }
    .account-nav ul { flex-direction: row; flex-wrap: wrap; }
    .quickview__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    /* Meniul mobil: acțiunile rămân în bară, mega-menu devine listă simplă. */
    .site-action__label { display: none; }
    .site-actions { margin-left: auto; margin-right: var(--space-2); }
    .site-action { padding: var(--space-3); }
    [data-search-open] .site-action__icon { font-size: 2.2rem; top: -0.05em; }
    .mega-menu { position: static; box-shadow: none; border-top: 0; }
    .mega-menu__inner { grid-template-columns: 1fr; padding: var(--space-4) 0; gap: var(--space-4); }
    .mega-menu__col--promo { display: none; }
    .site-nav__list .has-mega .mega-menu[hidden] { display: none; }

    .order-row { grid-template-columns: 1fr 1fr; gap: var(--space-2); }

    /* Tabelele devin liste pe mobil, cu etichete din data-label. */
    .cart-table thead { display: none; }
    .cart-table tr { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-cream-deep); }
    .cart-table td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-2) 0; }
    .cart-table td::before { content: attr(data-label); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-faint); }
    .cart-table td:first-child { display: block; }
    .cart-table td:first-child::before { display: none; }
}

@media (max-width: 640px) {
    .search-overlay__form { flex-direction: column; }
    .confirmation__actions { flex-direction: column; }
    .product-buy .btn { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .cart-drawer__panel,
    .cart-drawer__backdrop,
    .search-overlay,
    .quickview,
    .category-card__img,
    .product-card__quick,
    .product-card.has-hover-image .product-card__media picture + picture { transition: none; }

    .mega-menu { animation: none; }
    .category-card:hover .category-card__img { transform: none; }
}

/* Autentificare — texte auxiliare */
.auth-card__intro {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-ink-soft);
}

.auth-card__forgot {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-xs);
    text-align: right;
}

/* Avertisment vizibil cât timp trimiterea de email nu e activată */
.auth-card__notice {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
}

/* Mesaje flash pe partea publica */
.flash-stack {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Telefon mic (≤480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Bara de sus: logo + 4 iconițe + butonul de meniu însumau ~357px într-un
       spațiu de 335px, iar meniul ieșea 2px din ecran. Spații mai mici între
       elemente; zona de atingere a iconițelor rămâne de ~40px. */
    .site-header__inner {
        gap: var(--space-2);
    }

    .site-actions {
        margin-right: 0;
    }

    .site-action {
        padding: 0.625rem;
    }

    /* Widgetul Turnstile are 300px fix: cu padding de 24px interiorul cardului
       avea doar ~263px, iar widgetul împingea tot grid-ul de checkout mai lat
       decât ecranul. Cu 16px interiorul ajunge la ~300px. */
    .checkout-step {
        padding: var(--space-4);
    }
}

@media (max-width: 380px) {
    /* Pe telefoanele de 360px mai rămâne puțin loc: marginea laterală a barei de
       sus coboară la 16px, ca meniul să nu atingă marginea ecranului. */
    .site-header__inner {
        padding-inline: var(--space-4);
    }
}
/* Atelier Cheia Gold — tranziții & animații (GPU-friendly: opacity/transform) */

/* ---------- Hero: fade + scale/pan subtil cinematic (Ken Burns) ---------- */

.hero__slide {
    transition: opacity var(--dur-hero) var(--ease-cinematic);
}

.hero__image {
    transform: scale(1.03);
    transition: transform calc(var(--dur-hero) * 3.2) var(--ease-cinematic);
}

.hero__slide:nth-child(odd) .hero__image {
    transform: scale(1.04) translate3d(-1.4%, -1%, 0);
}

.hero__slide:nth-child(even) .hero__image {
    transform: scale(1.04) translate3d(1.4%, 1%, 0);
}

.hero__slide.is-active .hero__image {
    transform: scale(1) translate3d(0, 0, 0);
}

.hero__overlay {
    transition: opacity var(--dur-hero) var(--ease-cinematic);
}

.hero__dot::before {
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(228, 199, 122, 0.55); }
    50% { box-shadow: 0 0 0 7px rgba(228, 199, 122, 0); }
}

.hero__dot.is-active::before {
    animation: dotPulse 2.4s ease-out infinite;
}

@keyframes scrollCueMove {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.4; }
}

.hero__scroll-cue span {
    animation: scrollCueMove 2.2s ease-in-out infinite;
}

/* ---------- Hero: intrare cinematică la încărcarea paginii ---------- */

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroHeadingPulse {
    0% { opacity: 0.35; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
    animation: heroFadeUp 850ms var(--ease-out) both;
    animation-delay: 150ms;
}

.hero__heading {
    animation: heroFadeUp 850ms var(--ease-out) both;
    animation-delay: 300ms;
}

.hero__heading--pulse {
    animation: heroHeadingPulse 550ms var(--ease-out) both;
}

.hero__panel.is-active .hero__subtitle {
    animation: heroFadeUp 850ms var(--ease-out) both;
    animation-delay: 120ms;
}

.hero__panel.is-active .btn {
    animation: heroFadeUp 850ms var(--ease-out) both;
    animation-delay: 260ms;
}

.hero__dots {
    animation: heroFadeUp 850ms var(--ease-out) both;
    animation-delay: 750ms;
}

.hero__scroll-cue {
    animation: heroFadeUp 850ms var(--ease-out) both;
    animation-delay: 850ms;
}

/* ---------- Reveal la scroll ---------- */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/*
 * Grilele de produse și categorii: deplasare foarte mică și tranziție mai
 * scurtă decât reveal-ul generic (28px / 620ms) — sunt liste care se schimbă
 * des (filtre, sortare, paginare, schimbare de categorie) și trebuie să
 * apară crisp, nu cinematic. Stagger-ul vine din data-reveal-delay, setat
 * per-card în PHP.
 *
 * Regula stă în afara media query-ului de reduced-motion cu bună știință:
 * .reveal (mai jos) rămâne singura sursă de adevăr pentru acel caz, iar
 * aici modificăm doar valorile, nu comportamentul.
 */
@media (prefers-reduced-motion: no-preference) {
    .product-grid .reveal,
    .category-grid .reveal {
        transform: translateY(10px);
        transition-duration: var(--dur-base);
    }
}

/* ---------- Utilitare parallax (transform-ul e setat din JS, per-frame) ---------- */

[data-parallax] {
    transform: translate3d(0, 0, 0);
}

/* ---------- Reducere mișcare ---------- */

@media (prefers-reduced-motion: reduce) {
    .hero__image {
        transform: none !important;
    }

    .hero__scroll-cue {
        display: none;
    }

    .hero__dot.is-active {
        animation: none;
    }

    .hero__eyebrow,
    .hero__heading,
    .hero__heading--pulse,
    .hero__panel.is-active .hero__subtitle,
    .hero__panel.is-active .btn,
    .hero__dots,
    .hero__scroll-cue {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero__content {
        transform: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}
/* ==========================================================================
   Atelier Cheia Gold — tranziții între pagini (View Transitions API)

   Mecanism nativ de browser (cross-document View Transitions), fără JS și
   fără a întârzia navigarea: browserul face capturi ale paginii vechi și noi
   și le animă în paralel cu schimbarea reală a documentului. Pe browserele
   care nu suportă încă API-ul (Firefox, Safari la data scrierii), regula
   `@view-transition` e ignorată silențios — navigarea rămâne instantă, exact
   ca înainte. Zero risc de navigare ruptă sau întârziată.

   Pornește DOAR când vizitatorul nu a cerut mișcare redusă — acesta e
   pattern-ul recomandat oficial pentru respectarea prefers-reduced-motion
   la tranziții cross-document.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* --------------------------------------------------------------------------
   Tranziția generală: fade + slide subtil, 300–500ms (folosim 400ms).
   Pagina care pleacă urcă ușor și dispare; pagina care sosește coboară ușor
   în poziție, din transparent în opac — nu o simplă tăiere/apariție bruscă.
   -------------------------------------------------------------------------- */
::view-transition-group(root) {
    animation-duration: var(--dur-page);
}

::view-transition-old(root) {
    animation: acg-page-out var(--dur-page) var(--ease-out) both;
}

::view-transition-new(root) {
    animation: acg-page-in var(--dur-page) var(--ease-out) both;
}

@keyframes acg-page-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes acg-page-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   Magazin și categorii: aceeași tranziție, puțin mai rapidă (250–350ms,
   folosim 300ms) — navigarea prin catalog trebuie să simtă mai „ageră" decât
   trecerea între pagini de conținut. Scop marcat de server prin atributul
   data-transition-scope pe <html>, în funcție de pagina curentă (vezi
   header.php) — nu necesită JavaScript.
   -------------------------------------------------------------------------- */
html[data-transition-scope="shop"]::view-transition-group(root) {
    animation-duration: var(--dur-page-fast);
}

html[data-transition-scope="shop"]::view-transition-old(root) {
    animation-duration: var(--dur-page-fast);
}

html[data-transition-scope="shop"]::view-transition-new(root) {
    animation-duration: var(--dur-page-fast);
}

/* --------------------------------------------------------------------------
   Mișcare redusă: elimină animația chiar dacă browserul ar porni-o oricum.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}