﻿/* Completari la stilurile prototipului (style.css + refinement.css), pentru ce exista doar in magazin. */
a.category { display: block; color: inherit; }
.verighete-bj .section-heading > p a.text-link { color: var(--wine); border-bottom: 1px solid currentColor; display: inline-block; margin-top: 10px; }
[data-theme=dark] .verighete-bj .section-heading > p a.text-link { color: #d9bf9e; }
.noscript-list { columns: 2; font-size: 14px; line-height: 2; }
footer > div:not(.footer-bottom) { flex-wrap: wrap; }
/* Ecrane late: prototipul e desenat pentru ~1400 px, cu dimensiuni fixe in pixeli. Peste 1500 px toata
   pagina se mareste proportional, ca latimea folosita sa ramana ~1400 px (1900 / 1.35 = 1407). */
:root { --z: 1; }
@media (min-width: 1500px) { :root { --z: 1.1; } }
@media (min-width: 1700px) { :root { --z: 1.22; } }
@media (min-width: 1850px) { :root { --z: 1.35; } }
@media (min-width: 2200px) { :root { --z: 1.55; } }
@media (min-width: 2800px) { :root { --z: 1.95; } }
html { zoom: var(--z); }
/* Sub zoom, vh se mareste si el: dialogurile ar iesi din ecran. Se imparte inapoi la zoom. */
dialog { max-height: calc(90vh / var(--z)); width: min(1000px, calc(90vw / var(--z))); }
.drawer { height: calc(100vh / var(--z)); max-height: calc(100vh / var(--z)); width: min(470px, calc(100vw / var(--z))); }

/* SEO: titlul principal (h1) e randul mic cu localitatile; "Purtate, prind viata" ramane mare, ca h2. */
.lookbook-copy h1.eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; margin: 0 0 22px; }
.lookbook-copy h2.lookbook-titlu { letter-spacing: -.035em; }

/* Adresele magazinelor in subsol */
footer address.magazine { font-style: normal; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; }
footer address.magazine strong { font-weight: 600; }

/* Fara lookbook, titlul principal (h1) e randul mic din reflector - aceeasi infatisare ca eticheta de deasupra. */
.hero-copy h1.hero-h1 { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; margin: 0; }
.hero-copy h1.hero-h1 + h2 { font-size: clamp(50px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.04em; margin: 34px 0 24px; }

/* Fereastra produsului: unde se poate vedea piesa (14.10) */
.detail-store { font-size: 13px; line-height: 1.6; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.detail-store .stoc { color: #2e7d4f; font-weight: 600; }
.detail-store a, .magazine a, .visit a.harta { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Un singur set, cu portret generos in stanga si preview-urile pieselor in dreapta. */
.lookbook-compact { align-items: center; }
.lookbook-compact .lookbook-portrait { margin: 0; width: min(100%, 400px); box-shadow: none; }
.lookbook-compact .lookbook-portrait > img { height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
/* Aceeasi miscare discreta ca la hover pe piesa; punctele raman pe bijuterii. */
@keyframes lookbook-photo-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.lookbook-changing > #lookbook-photo, .lookbook-changing > #lookbook-spots { animation: lookbook-photo-settle .8s ease-out both; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .lookbook-changing > #lookbook-photo, .lookbook-changing > #lookbook-spots { animation: none; } }
.lookbook-compact .lookbook-copy h2 { font-size: clamp(54px, 5.8vw, 80px); line-height: 1.02; }
.lookbook-compact #lookbook-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; max-height: 260px; overflow-y: auto; }
.lookbook-preview { display: flex; gap: 10px; padding: 12px; color: inherit; border: 1px solid var(--line); }
.lookbook-preview:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lookbook-preview img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; background: var(--image-panel); }
.lookbook-preview > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lookbook-preview small { font-size: 9px; line-height: 1.4; }
.lookbook-preview strong { font-size: 12px; line-height: 1.4; font-weight: 500; }
.lookbook-preview em { font-size: 12px; color: var(--accent); }
.lookbook-compact .lookbook-cta { margin-top: 20px; }
.lookbook-compact .lookbook-copy { min-width: 0; }
.lookbook-strip { position: relative; display: flex; width: 100%; max-width: 420px; min-width: 0; margin: 18px 0 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; touch-action: pan-x pan-y; -webkit-mask-image: linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent); mask-image: linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent); }
.lookbook-strip::-webkit-scrollbar { display: none; }
.lookbook-strip:active { cursor: grabbing; }
.lookbook-strip-group,.lookbook-strip-cycle { display: flex; flex: 0 0 auto; }
.lookbook-strip-cycle { gap: 24px; padding: 0 12px; }
.lookbook-strip button { flex: 0 0 auto; min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 400; white-space: nowrap; user-select: none; }
.lookbook-strip button[aria-pressed=true] { color: var(--ink); }
.lookbook-strip:focus-visible { outline-offset: 2px; }
.lookbook-portrait > #lookbook-photo { touch-action: pan-y; cursor: grab; }
.lookbook-portrait > #lookbook-photo:active { cursor: grabbing; }
@media (max-width: 560px) {
    .lookbook-compact .lookbook-copy { display: contents; }
    .lookbook-compact .lookbook-copy h2 { order: 1; font-size: 46px; line-height: 1.05; align-self: start; }
    .lookbook-compact .lookbook-copy h2 br { display: none; }
    .lookbook-compact .lookbook-cta { order: 3; margin: 0 0 24px; }
    .lookbook-compact .lookbook-strip { order: 4; width: 100%; max-width: 340px; align-self: center; margin: 0 0 14px; }
    .lookbook-compact .lookbook-portrait { order: 5; max-width: 340px; }
    .lookbook-compact #lookbook-pieces { order: 6; width: 100%; grid-template-columns: 1fr; }
    .lookbook-preview strong { font-size: 13px; }
}

/* Pe telefon/tableta, piesele raman lizibile si nu au o derulare separata. */
@media (max-width: 900px) {
    .lookbook-compact #lookbook-pieces { grid-template-columns: 1fr; max-height: none; overflow: visible; }
}

.lookbook-play { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: #21191eb3; color: #fff; border: 1px solid #ffffff80; border-radius: 50%; font-size: 20px; z-index: 1; }
.lookbook-play[hidden] { display: none; }

.lookbook-spots { position: absolute; pointer-events: none; z-index: 2; }
.lookbook-spots[hidden] { display: none; }
.bijou-spot { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; transform: translate(-50%,-50%); pointer-events: auto; color: #fff; }
.bijou-spot > svg { width: 30px; height: 30px; overflow: visible; fill: none; stroke: none; opacity: .02; filter: drop-shadow(0 1px 1px #00000024); transition: opacity .45s ease, transform .45s ease; transform: scale(.82); }
@media (hover: hover) { .lookbook-portrait:hover .bijou-spot > svg,.bijou-spot:hover > svg,.bijou-spot:focus-visible > svg { opacity: .8; transform: scale(1); } }
@keyframes bijou-spot-spin { from { transform: scale(1) rotate(0deg); } to { transform: scale(1) rotate(360deg); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lookbook-portrait:hover .bijou-spot > svg,.bijou-spot:hover > svg,.bijou-spot:focus-visible > svg { animation: bijou-spot-spin 3s linear infinite; }
}
@keyframes bijou-spot-touch { 0%, 20%, 100% { opacity: .02; transform: scale(.84); } 48%, 70% { opacity: .3; transform: scale(1); } }
@media (hover: none) {
    .bijou-spot > svg { animation: bijou-spot-touch 4.8s ease-in-out infinite; }
    .bijou-spot:nth-child(2n) > svg { animation-delay: -2.4s; }
    .bijou-spot:active > svg,.bijou-spot:focus-visible > svg { animation: none; opacity: .3; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .bijou-spot > svg { transition: none; animation: none; } }
@media (prefers-reduced-motion: reduce) and (hover: none) { .bijou-spot > svg { opacity: .3; transform: scale(1); } }
.lookbook-compact .lookbook-play { z-index: 3; }

/* In cos, poza si numele deschid din nou detaliile; fundalul deschis pastreaza poza lizibila in tema dark. */
.drawer .bag-item { grid-template-columns: minmax(0, 1fr) 22px; }
.drawer .bag-product { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 15px; align-items: center; min-width: 0; }
.drawer .bag-product img { width: 85px; height: 85px; object-fit: contain; background: var(--image-panel); mix-blend-mode: normal; }
.drawer .bag-product span { min-width: 0; }
.drawer .bag-product strong { display: block; font-size: 15px; line-height: 1.5; }
.drawer .bag-product small { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }
.drawer .bag-product:hover strong, .drawer .bag-product:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }


/* Sigla Brilliant Jewels 2D transparenta. */
.brand .brand-logo{display:block;width:auto;height:80px;max-width:100%;object-fit:contain;flex-shrink:0}
header .brand{flex-shrink:0}
footer .brand .brand-logo{height:100px}
@media(max-width:800px){header .brand .brand-logo{height:62px}}