:root{--ma-copper:#c87942;--ma-ember:#e87835;--ma-gold:#e1b270;--ma-ink:#0b0d0c;--ma-panel:#121512;--ma-cream:#f2eadc;--ma-muted:#aaa398;--ma-line:rgb(200 121 66/.27)}
.metalicart-categories{display:grid;gap:clamp(1rem,1.6vw,1.5rem)}
/* Cardurile au colțuri concave: cu spațiu mai mic, arcele vecine se ating și par pete negre. */
.metalicart-catalog{display:grid;gap:clamp(14px,1.2vw,16px)}
/* Coloanele grilelor vin din „MetalicArt → Catalog”, ca proprietăți personalizate scrise în pagină.
   Regulile sunt scrise de la ecranul mic în sus, ca fiecare prag să acopere exact intervalul din
   eticheta lui: telefon sub 480, telefon lat de la 480, tabletă de la 783, laptop de la 1100, desktop de la 1440. Scrise
   invers, „laptop” prindea și un ecran de 900 px, iar patru coloane lăsau carduri de 215 px. */
.metalicart-catalog{grid-template-columns:repeat(var(--ma-works-mobile,1),minmax(0,1fr))}
.metalicart-categories{grid-template-columns:repeat(var(--ma-categories-mobile,1),minmax(0,1fr))}
@media(min-width:480px){
.metalicart-catalog{grid-template-columns:repeat(var(--ma-works-wide,2),minmax(0,1fr))}
.metalicart-categories{grid-template-columns:repeat(var(--ma-categories-wide,2),minmax(0,1fr))}}
@media(min-width:783px){
.metalicart-catalog{grid-template-columns:repeat(var(--ma-works-tablet,3),minmax(0,1fr))}
.metalicart-categories{grid-template-columns:repeat(var(--ma-categories-tablet,3),minmax(0,1fr))}}
@media(min-width:1100px){
.metalicart-catalog{grid-template-columns:repeat(var(--ma-works-laptop,4),minmax(0,1fr))}
.metalicart-categories{grid-template-columns:repeat(var(--ma-categories-laptop,4),minmax(0,1fr))}}
@media(min-width:1440px){
.metalicart-catalog{grid-template-columns:repeat(var(--ma-works-desktop,4),minmax(0,1fr))}
.metalicart-categories{grid-template-columns:repeat(var(--ma-categories-desktop,4),minmax(0,1fr))}}


/* Codul nu se rupe niciodată: la patru coloane, un card de 234 px îl tăia în „PG-” și „0001”. */
/* ------------------------------------------------------------------ cardul lucrării
 * Fotografia sus, corpul strâns dedesubt, bara de acțiune lipită de marginea de jos: așa toate
 * cardurile unui rând se termină la fel, oricât de lung ar fi titlul. Aici este numai desenul de
 * bază: crestăturile din colț și firul de cupru care le urmează vin din foaia temei, care le
 * desenează dintr-o mască — un singur mecanism pentru toate locurile unde apare grila.
 */
.metalicart-work-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid rgb(242 234 220/.13);background:#111310;box-shadow:0 14px 38px rgb(0 0 0/.18);transition:border-color .35s ease,box-shadow .35s ease}
.metalicart-work-card:hover,.metalicart-work-card:focus-within{border-color:rgb(200 121 66/.58);box-shadow:0 24px 60px rgb(0 0 0/.34)}
/* Cutia fotografiei: raport stabil, fără deformare; decupajul cade de la mijloc. */
.metalicart-work-card__media{position:relative;overflow:hidden;isolation:isolate}
.metalicart-work-image{position:relative;display:block;overflow:hidden;aspect-ratio:5/4;background:radial-gradient(circle at 50% 45%,#292b27,#090a09 72%)}
.metalicart-work-image::after{position:absolute;inset:auto 0 0;z-index:1;height:38%;content:"";pointer-events:none;background:linear-gradient(180deg,rgb(11 13 12/0),rgb(11 13 12/.82))}
/* Fotografia umple caseta și se decupează de la mijloc.
   `height:100%` nu se agăța de nimic — caseta își ia înălțimea din `aspect-ratio` — așa că
   imaginea rămânea la mărimea ei firească și se vedea doar partea de sus: la o fotografie
   înaltă și îngustă, numai cerul. Cu `inset:0` cutia e limpede, iar `cover` taie de la mijloc. */
.metalicart-work-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/*
 * Fotografia prea mică nu se întinde: se arată cât este, în mijlocul cadrului.
 *
 * Cinci lucrări au fotografii sub pragul de șapte sute de pixeli pe latura scurtă. Întinse peste
 * card, s-ar fi văzut pixelii; lăsate la mărimea lor, se citesc.
 *
 * Centrarea o dă caseta, nu imaginea. Scoasă din poziționarea absolută, imaginea nu mai are de la ce
 * să se centreze, iar caseta, `block`, o lăsa lipită de colțul din stânga sus — așa a rămas BL-79 de
 * la strângerea cardului încoace. Caseta devine o grilă de un câmp numai pentru cazul acesta, iar
 * imaginea stă în mijlocul lui.
 *
 * Marginea nu mai este o măsură scrisă — două sute treizeci pe o sută optzeci, cât miniaturile de
 * pe situl vechi —, ci cea mai mică dintre casetă și fotografia însăși: cele patru miniaturi rămân
 * la mărimea lor, fără să fie mărite, iar cea de șase sute pe opt sute umple cadrul pe înălțime.
 * Mărimea fișierului vine din datele atașamentului, scrisă în două proprietăți: cu `sizes="auto"`,
 * browserul socotește dimensiunea intrinsecă după cât loc are pe ecran, deci nu se poate întreba.
 */
.metalicart-work-card.is-low-resolution .metalicart-work-image{display:flex;align-items:center;justify-content:center}
.metalicart-work-card.is-low-resolution .metalicart-work-image img{position:relative;inset:auto;width:auto;height:auto;max-width:min(100%,var(--ma-foto-latime,100%));max-height:min(100%,var(--ma-foto-inaltime,100%));object-fit:contain}
/* Fotografia mică nu se apropie la trecerea mausului: mărită, s-ar vedea tocmai ce ascunde. */
.metalicart-catalog .metalicart-work-card.is-low-resolution:hover .metalicart-work-image img{transform:none}
/*
 * Îndemnul stă în mijlocul fotografiei, nu pe marginea ei.
 *
 * Pe marginea de jos se aduna cu eticheta codului, care acum stă călare pe cusătură, iar pe
 * marginea de sus cu insigna galeriei și cu creionul atelierului. În mijloc nu are cu ce să se
 * ciocnească, iar la rest cardul rămâne curat: îndemnul apare doar la trecerea mausului sau când
 * fotografia primește focus de tastatură.
 */
.metalicart-work-image__hint{position:absolute;z-index:2;top:50%;left:50%;padding:.5rem .8rem;border:1px solid rgb(200 121 66/.72);color:var(--ma-cream);background:rgb(9 10 9/.74);font-size:var(--ma-fs-xs, .58rem);font-weight:700;letter-spacing:.16em;text-align:center;text-transform:uppercase;opacity:0;transform:translate(-50%,-42%);transition:opacity .25s ease,transform .25s ease}
.metalicart-work-card:hover .metalicart-work-image__hint,.metalicart-work-image:focus-visible .metalicart-work-image__hint{opacity:1;transform:translate(-50%,-50%)}
/* Insigna „N fotografii”: colțul din dreapta sus, departe de watermark-ul centrat. */
.metalicart-work-image__count{position:absolute;z-index:4;top:.6rem;right:.6rem;display:inline-flex;align-items:center;gap:.32rem;padding:.3rem .45rem;border:1px solid rgb(242 234 220/.32);color:#fff6e8;background:rgb(9 10 9/.72);font-size:var(--ma-fs-xs, .68rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.metalicart-work-image__count b{font-weight:700}
/*
 * Semnul se taie din culoarea insignei, nu se aduce colorat.
 *
 * Adus ca imagine, rămânea de aramă lângă o cifră de cremă: două culori pentru același lucru. Ca
 * mască peste `currentColor`, semnul și numărul sunt de-o culoare și se sting împreună dacă
 * insigna își schimbă vreodată tonul. Forma este chiar fișierul livrat, cu cele două fotografii
 * suprapuse; fundalul închis al insignei rămâne al ei.
 */
.metalicart-work-image__count .metalicart-work-image__semn{
  flex:none;width:18px;height:18px;
  background:currentColor;
  -webkit-mask:var(--ma-ui-fotografii-multiple, url("ui-icons/96/fotografii-multiple.png")) center / contain no-repeat;
  mask:var(--ma-ui-fotografii-multiple, url("ui-icons/96/fotografii-multiple.png")) center / contain no-repeat}

/*
 * Semnul insignei: cât cere pachetul pe ecran lat, mai strâns pe telefon.
 *
 * Pachetul îl vrea între douăzeci și patru și treizeci de pixeli, dar tot el cere ca insigna să nu
 * ajungă să concureze cu fotografia. La trei sute șaizeci de pixeli cardul are o fotografie de o
 * sută cincizeci și cinci: o insignă de cincizeci și doi ar fi ținut o treime din ea, iar în
 * celălalt colț stă deja butonul de patruzeci și patru. Sub prag rămâne la optsprezece, cât avea și
 * desenul dinainte; de la prag în sus urcă la douăzeci și patru, cât are și creionul de alături.
 */
@media(min-width:780px){
  .metalicart-work-image__count .metalicart-work-image__semn{width:24px;height:24px}
}
/* Corpul cardului: codul călare pe cusătură, titlul la două rânduri, bara lipită de fund. */
.metalicart-work-card__body{position:relative;z-index:3;display:flex;flex:1 1 auto;flex-direction:column;min-width:0;padding:.95rem .85rem .75rem;color:var(--ma-cream)}
.metalicart-work-card__title{margin:0 0 .5rem;min-width:0}
.metalicart-work-card__body>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin:0 0 .6rem;color:rgb(242 234 220/.62);font-size:var(--ma-fs-md, .84rem);line-height:1.4}
.metalicart-code{display:inline-flex;padding:.32rem .52rem;border:1px solid var(--ma-copper);color:#efaa73;background:rgb(9 10 9/.72);font:700 var(--ma-fs-xs, .66rem)/1.2 var(--ma-font-sans, system-ui,sans-serif);letter-spacing:.14em;white-space:nowrap}
/* Eticheta codului stă pe marginea de jos a fotografiei, nu sub ea: nu mai cere un rând al ei. */
.metalicart-work-card .metalicart-code{position:absolute;top:0;left:.85rem;z-index:4;transform:translateY(-100%)}
.metalicart-category{min-width:0;max-width:62%;color:rgb(242 234 220/.68);font-size:var(--ma-fs-xs, .68rem);line-height:1.35;letter-spacing:.08em;text-align:right;text-transform:uppercase;overflow-wrap:anywhere}
.metalicart-work-card h3{margin:0 0 .6rem;font:500 clamp(.95rem,2.4vw,1.18rem)/1.28 var(--ma-font-display, Georgia,serif)}.metalicart-work-card h3 a{color:var(--ma-cream);text-decoration:none}
/* Bara de acțiune: toată suprafața e apăsabilă, cu cel puțin 48 px pe înălțime. */
.metalicart-whatsapp{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:48px;margin-top:auto;padding:.55rem .1rem 0;border-top:1px solid rgb(242 234 220/.14);color:#e9a06c;font-size:var(--ma-fs-sm, .78rem);font-weight:750;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.metalicart-whatsapp__eticheta{min-width:0}
/* Semnul de marcă se arată cum a fost livrat: fără să fie stins la nouă zecimi, ca desenul de dinainte. */
.metalicart-whatsapp__semn{flex:none;transition:transform .2s ease}
.metalicart-whatsapp:hover .metalicart-whatsapp__semn{transform:scale(1.06)}
/* Raportul 4:5 este forma cropurilor livrate, deci fotografia intră fără să fie tăiată
   suplimentar sau întinsă. Înainte era o înălțime fixă, care schimba raportul cu lățimea. */
.metalicart-category-tile{position:relative;min-width:0;aspect-ratio:4/5;overflow:hidden;color:var(--ma-cream);background:#111;text-decoration:none;isolation:isolate}
/* Focusul de tastatură trebuie să se vadă peste fotografie, nu sub gradient. */
.metalicart-category-tile:focus-visible{outline:3px solid #f0a56d;outline-offset:3px}.metalicart-category-tile__media,.metalicart-category-tile__media::after{position:absolute;inset:0}.metalicart-category-tile__media::after{content:"";background:linear-gradient(180deg,rgb(5 6 5/.12),rgb(5 6 5/.18) 34%,rgb(5 6 5/.9) 75%,#080908)}.metalicart-category-tile__image{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.08) brightness(.86);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease}.metalicart-category-tile:hover .metalicart-category-tile__image{transform:scale(1.025);filter:saturate(.92) contrast(1.08) brightness(.82)}.metalicart-category-tile__number{position:absolute;top:1.35rem;right:1.5rem;z-index:3;color:rgb(255 249 239/.75);font:400 1.05rem/1 var(--ma-font-display, Georgia,serif);letter-spacing:.1em}.metalicart-category-tile__content{position:absolute;inset:auto 0 0;z-index:2;display:flex;min-width:0;min-height:62%;box-sizing:border-box;flex-direction:column;justify-content:flex-end;padding:clamp(1.25rem,2.4vw,2rem);text-shadow:0 2px 18px rgb(0 0 0/.75)}.metalicart-category-tile__content small{margin-bottom:.55rem;color:#f0a56d;font-size:var(--ma-fs-xs, .62rem);font-weight:750;letter-spacing:.14em;text-transform:uppercase}.metalicart-category-tile__content strong{display:block;max-width:100%;color:#fff9ef;font:500 clamp(1.45rem,calc(1.05rem + 1vw),2rem)/1.08 var(--ma-font-display, Georgia,serif);overflow-wrap:break-word;text-wrap:balance}.metalicart-category-tile__content p{min-height:2.8em;margin:.7rem 0 0;color:rgb(255 249 239/.76);font-size:var(--ma-fs-md, .78rem);line-height:1.45;text-shadow:0 1px 10px #000}.metalicart-category-tile__content>span{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid rgb(242 234 220/.38);color:#f4ecdf;font-size:var(--ma-fs-xs, .66rem);font-weight:700;line-height:1.35;letter-spacing:.09em;text-transform:uppercase}
.metalicart-home-categories .metalicart-home-categories 
.metalicart-search-panel{display:grid;grid-template-columns:minmax(190px,.65fr) 2fr;gap:clamp(1.2rem,3vw,3rem);align-items:end;margin:2.25rem 0 3rem;padding:clamp(1.25rem,2.5vw,2rem);border:1px solid var(--ma-line);background:linear-gradient(135deg,rgb(255 255 255/.045),rgb(255 255 255/.015));box-shadow:inset 0 1px rgb(255 255 255/.04)}
.metalicart-search-panel__intro span{display:block;color:#d58b55;font-size:var(--ma-fs-xs, .66rem);font-weight:750;letter-spacing:.14em;text-transform:uppercase}.metalicart-search-panel__intro strong{display:block;margin-top:.35rem;color:var(--ma-cream);font:500 clamp(1.25rem,2vw,1.7rem)/1.1 var(--ma-font-display, Georgia,serif)}
.metalicart-code-search{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,.7fr) auto;gap:.75rem;align-items:end;margin:0}.metalicart-code-search label{display:grid;gap:.38rem}.metalicart-code-search label>span{color:rgb(242 234 220/.65);font-size:var(--ma-fs-xs, .64rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase}.metalicart-code-search input,.metalicart-code-search select{min-height:50px;box-sizing:border-box;border:1px solid rgb(242 234 220/.2);border-radius:0;padding:.7rem .85rem;color:var(--ma-cream);background:#0b0d0c;font:inherit}.metalicart-code-search button{min-height:50px;border:1px solid var(--ma-copper);padding:.7rem 1.1rem;color:#100e0b;background:var(--ma-copper);font-size:var(--ma-fs-sm, .72rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.metalicart-code-search button:hover{background:var(--ma-ember)}.metalicart-no-results{grid-column:1/-1;padding:1.5rem;border:1px solid var(--ma-line);color:var(--ma-cream);background:rgb(255 255 255/.03)}
.page-numbers{display:inline-grid;place-items:center;min-width:42px;min-height:42px;margin:2.5rem .2rem 0;border:1px solid rgb(242 234 220/.2);color:var(--ma-cream);text-decoration:none}.page-numbers.current,.page-numbers:hover{border-color:var(--ma-copper);color:#111;background:var(--ma-copper)}
.metalicart-pagination.is-enhanced{display:none}
/* ======================================================== „Colecția continuă”
 *
 * Un singur ansamblu în locul butonului mare și al rândului de stare de dedesubt: ornament,
 * supratitlu, chemare și bara parcursului. Nu are casetă proprie — stă pe fundalul întunecat al
 * listării, ca sigiliul de final cu care face schimb la ultima încărcare.
 *
 * Toate cifrele din el se scriu din JavaScript, din starea reală a grilei. Foaia nu cunoaște
 * niciun număr de lucrări: poziția rombului vine dintr-o proprietate scrisă la fiecare încărcare.
 */
.metalicart-infinite-loader{position:relative;display:grid;justify-items:center;margin-top:clamp(26px,3.4vw,38px)}
.ma-colectie-continua{
  --ma-continua-fir:1px;
  --ma-continua-arama:color-mix(in srgb, var(--ma-copper) 62%, transparent);
  /* Poziția rombului și lungimea firului parcurs: rescrise la fiecare încărcare. */
  --ma-progres:0%;
  --ma-concav-raza:12px;
  --ma-concav-fir:1px;
  display:grid;justify-items:center;width:min(100%,720px)}
/* Ornamentul: două fire și un pătrat întors pe colț, aceeași grosime peste tot ca la sigiliu. */
.ma-colectie-continua__ornament{display:flex;width:82%;align-items:center;gap:clamp(.65rem,2vw,1rem)}
.ma-colectie-continua__ornament::before,.ma-colectie-continua__ornament::after{flex:1;height:var(--ma-continua-fir);background:var(--ma-continua-arama);content:""}
.ma-colectie-continua__romb{width:clamp(8px,1vw,10px);height:clamp(8px,1vw,10px);flex:none;border:var(--ma-continua-fir) solid var(--ma-continua-arama);transform:rotate(45deg)}
.ma-colectie-continua__supratitlu{margin:clamp(.85rem,1.75vw,1.19rem) 0 clamp(1rem,2.1vw,1.3rem);color:var(--ma-copper);font-size:clamp(.76rem,.72rem + .12vw,.86rem);font-weight:700;letter-spacing:.24em;line-height:1.2;text-transform:uppercase}
/*
 * Chemarea.
 *
 * Butonul nu poartă el masca concavă: masca taie tot ce desenează elementul pe care stă, deci
 * inelul de focus s-ar fi retezat în crestături. Pătura de dedesubt ia crestăturile și firul,
 * butonul rămâne cu focusul lui.
 */
.ma-colectie-continua__cta{position:relative;display:flex;width:100%;min-height:62px;align-items:center;justify-content:center;gap:.7rem;padding:0 clamp(1rem,3vw,2rem);border:0;color:#f4ece0;background:transparent;font-family:inherit;font-size:clamp(.78rem,.7rem + .36vw,.95rem);font-weight:700;letter-spacing:.14em;line-height:1.2;text-align:center;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Mai specific decât `.ma-concav`: utilitatea îl face `relative`, iar pătura trebuie întinsă. */
.ma-colectie-continua__cta>.ma-colectie-continua__fundal{position:absolute;z-index:0;inset:0;background:#0a0b0a}
.ma-colectie-continua__fundal .ma-concav__traseu{stroke:var(--ma-copper);stroke-width:var(--ma-concav-fir)}
.ma-colectie-continua__text,.ma-colectie-continua__sageata{position:relative;z-index:1}
/* Săgeata este semnul din butonul de căutare al aceleiași foi — niciun fișier nou. */
.ma-colectie-continua__sageata{flex:none;font-size:1.15em;line-height:1;transition:transform .2s ease}
.ma-colectie-continua__cta:hover{color:#fff7ea}
.ma-colectie-continua__cta:hover .ma-colectie-continua__fundal{background:#101110}
.ma-colectie-continua__cta:hover .ma-colectie-continua__sageata{transform:translateX(3px)}
.ma-colectie-continua__cta:focus-visible{outline:2px solid var(--ma-gold);outline-offset:4px}
.ma-colectie-continua__cta[aria-disabled="true"]{cursor:wait}
.ma-colectie-continua__cta[aria-disabled="true"] .ma-colectie-continua__sageata{visibility:hidden}
/* Etichetele parcursului, la capetele barei. */
.ma-colectie-continua__etichete{display:flex;width:100%;justify-content:space-between;gap:1rem;margin:clamp(1.15rem,2.2vw,1.6rem) 0 clamp(.45rem,.9vw,.55rem);color:var(--ma-muted);font-size:clamp(.7rem,.68rem + .06vw,.78rem);font-weight:600;letter-spacing:.13em;line-height:1.2;text-transform:uppercase}
/* Bara: firul rămas, firul parcurs și rombul de la hotarul dintre ele. */
.ma-colectie-continua__progres{position:relative;width:100%;height:11px}
.ma-colectie-continua__progres::before{position:absolute;top:50%;right:0;left:0;height:2px;background:rgb(170 163 152/.32);content:"";translate:0 -50%}
.ma-colectie-continua__umplut{position:absolute;top:50%;left:0;width:var(--ma-progres);height:2px;background:var(--ma-copper);translate:0 -50%;transition:width .35s ease}
.ma-colectie-continua__reper{position:absolute;top:50%;left:var(--ma-progres);width:7px;height:7px;background:var(--ma-copper);rotate:45deg;translate:-50% -50%;transition:left .35s ease}
/*
 * Rândul de stare nu se vede în mersul obișnuit: bara poartă deja numărul parcurs, iar macheta
 * n-are rând de text. Rămâne în arbore pentru cititorul de ecran și iese la vedere în două
 * împrejurări, când are ceva de spus și ochiului: încărcarea a eșuat și se poate încerca din nou,
 * sau listarea s-a terminat pe o pagină care n-are sigiliu de final — arhiva întreagă, unde
 * „Descoperă alte colecții” ar trimite înapoi la ea însăși.
 */
.metalicart-infinite-loader__status{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.metalicart-infinite-loader.are-eroare .metalicart-infinite-loader__status,
.metalicart-infinite-loader.is-complete .metalicart-infinite-loader__status{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;color:rgb(242 234 220/.65);font-size:var(--ma-fs-sm, .78rem);white-space:normal}
.metalicart-infinite-loader.are-eroare .metalicart-infinite-loader__status{margin-top:.9rem;color:#e0a06e}
/* Colecția parcursă: ansamblul se stinge, iar sigiliul scris de server îi ia locul. */
.metalicart-infinite-loader.is-complete .ma-colectie-continua{display:none}
/*
 * Sub 480 px chemarea se strânge, ca să rămână pe un rând.
 *
 * Pe un buton de trei sute douăzeci de pixeli, „Descoperă următoarele 24 de lucrări” trecea pe al
 * doilea rând. Litera se micșorează puțin și, mai ales, se strânge spațierea: la treizeci și cinci
 * de semne, patru sutimi de em pe fiecare fac cât o silabă întreagă.
 */
@media(max-width:479px){
.ma-colectie-continua__cta{padding-inline:.7rem;font-size:.72rem;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){
.ma-colectie-continua__umplut,.ma-colectie-continua__reper,.ma-colectie-continua__sageata{transition:none}
.ma-colectie-continua__cta:hover .ma-colectie-continua__sageata{transform:none}}
/* `hidden` nu poate stinge o cutie cu `display` scris în foaie: regula browserului este mai slabă. */
.metalicart-infinite-loader[hidden]{display:none}
/* Evidențierea nativă la atingere desenează un dreptunghi albăstrui, care ignoră colțul rotund
   al butonului. Se stinge și se pune în loc o apăsare proprie. Inelul de focus nu este
   afectat: `-webkit-tap-highlight-color` privește numai atingerea, nu tastatura. */
.metalicart-code-search button,.page-numbers,.metalicart-infinite-loader button,
.metalicart-work-card h3 a{-webkit-tap-highlight-color:transparent}
/* Butoanele n-aveau regulă proprie de focus, deci primeau inelul albastru implicit, dreptunghiular. */
.metalicart-work-image:focus-visible{outline:3px solid #f0a56d;outline-offset:-3px}
@keyframes ma-dialog-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* Panoul de căutare și grila de carduri pe ecrane mici — fără legătură cu lightboxul. */
@media(max-width:1024px){.metalicart-search-panel{grid-template-columns:1fr}}
/* Cardul are raport 4:5, deci înălțimea vine din lățime. */
@media(max-width:782px){.metalicart-work-image{aspect-ratio:4/5}.metalicart-code-search{grid-template-columns:1fr 1fr}.metalicart-code-search button{grid-column:1/-1}}
@media(max-width:480px){.metalicart-search-panel{padding:1rem}.metalicart-code-search{grid-template-columns:1fr}.metalicart-code-search button{grid-column:auto}}

/* =========================================================== Lightbox multi-fotografie
 *
 * Fotografia este subiectul: scena ține 83 % din lățime pe desktop, iar fișa lucrării 17 %.
 * Miniaturile nu sunt o a doua galerie — stau într-o bandă suprapusă peste marginea de jos a
 * scenei, sub 56 px, și apar numai când lucrarea chiar are mai multe fotografii. Descrierea și
 * ajutorul extins stau într-un panou „Detalii”, restrâns implicit.
 *
 * Colțurile concave și firul lor sunt utilitatea canonică `.ma-concav` din navigație, cu conturul
 * desenat din `catalog.js`: aceeași grosime pe laturi și pe arce, la orice mărime a cutiei.
 */
.metalicart-lightbox{--ma-concav-raza:12px;--ma-concav-fir:1px;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:var(--ma-cream);background:rgb(7 8 7/.98);overflow:hidden}
.metalicart-lightbox[open]{animation:ma-dialog-in .28s ease both}
.metalicart-lightbox::backdrop{background:rgb(0 0 0/.86)}
.metalicart-lightbox__shell{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:100%}
.metalicart-lightbox .ma-concav__traseu{stroke:rgb(225 178 112/.55)}

/* ------------------------------------------------------------------ bara de sus */
.metalicart-lightbox__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;padding:.7rem clamp(1rem,3vw,2.5rem);border-bottom:1px solid rgb(242 234 220/.13);background:rgb(10 11 10/.9)}
.metalicart-lightbox__brand{display:flex;align-items:center;gap:.75rem;min-width:0;color:#d9935e;font-size:var(--ma-fs-xs, .68rem);font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metalicart-lightbox__brand::before{flex:none;width:8px;height:8px;border:1px solid currentColor;content:"";transform:rotate(45deg)}
.metalicart-lightbox__controls{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.5rem)}
.metalicart-lightbox__counter{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.25rem);color:rgb(242 234 220/.62);font-size:var(--ma-fs-xs, .68rem);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.metalicart-lightbox__counter b{color:var(--ma-cream);font-weight:800}
.metalicart-lightbox__counter-photo{padding-right:clamp(.7rem,1.4vw,1.25rem);border-right:1px solid rgb(242 234 220/.2)}
.metalicart-lightbox__counter-photo[hidden]{display:none}

/* ------------------------------------------------------------------ butoanele */
.metalicart-lightbox button{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgb(242 234 220/.25);border-radius:50%;color:var(--ma-cream);background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.metalicart-lightbox button:hover{border-color:var(--ma-copper);color:var(--ma-copper)}
.metalicart-lightbox button:focus:not(:focus-visible){outline:none;box-shadow:none}
.metalicart-lightbox button:focus-visible{outline:2px solid #d7aa69;outline-offset:3px}
.metalicart-lightbox button:active{transform:scale(.93)}
.metalicart-lightbox__close{font-size:1.35rem;line-height:1}
.metalicart-lightbox__nav svg{display:block}
.metalicart-lightbox__next svg{transform:scaleX(-1)}

/* --------------------------------------------------------------------- scena */
/* Raportul 83/17 este cel aprobat; marginea rămâne mică tocmai ca scena să stea în banda 82–84 %. */
.metalicart-lightbox__content{display:grid;grid-template-columns:83fr 17fr;gap:4px;min-height:0;padding:4px}
.metalicart-lightbox__stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-width:0;min-height:0;padding:clamp(.75rem,2vw,2rem);background:radial-gradient(circle at center,#252723 0,#0a0b0a 68%)}
.metalicart-lightbox__image-wrap{display:grid;place-items:center;min-width:0;min-height:0;height:100%;margin:0;position:relative}
.metalicart-lightbox__image{display:block;width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 90px rgb(0 0 0/.42)}
.metalicart-lightbox__nav{position:relative;z-index:2;margin:.5rem}

/* ------------------------------------------------- banda de miniaturi, suprapusă */
/* `hidden` trebuie să învingă `display:flex` de mai jos, altfel la lucrările cu o singură
   fotografie rămânea o dungă goală, cu ramă cu tot, peste marginea de jos a scenei. */
.metalicart-lightbox__rail.ma-concav[hidden]{display:none}
.metalicart-lightbox__rail.ma-concav{position:absolute;z-index:3;right:clamp(.75rem,2vw,2rem);bottom:clamp(.6rem,1.4vw,1.25rem);left:clamp(.75rem,2vw,2rem);display:flex;align-items:center;gap:1rem;box-sizing:border-box;max-height:56px;padding:4px 12px;background:rgb(9 10 9/.82)}
.metalicart-lightbox__thumbs{display:flex;gap:6px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px}
.metalicart-lightbox__thumbs::-webkit-scrollbar{display:none}
.metalicart-lightbox button.metalicart-lightbox__thumb{position:relative;flex:none;width:48px;height:48px;padding:0;border:1px solid rgb(242 234 220/.28);border-radius:0;background:#000;opacity:.62;transition:opacity .2s ease,border-color .2s ease}
.metalicart-lightbox__thumb img{width:100%;height:100%;object-fit:cover;box-shadow:none}
.metalicart-lightbox button.metalicart-lightbox__thumb:hover{opacity:.9}
.metalicart-lightbox button.metalicart-lightbox__thumb[aria-current="true"]{opacity:1;border:2px solid var(--ma-gold)}
.metalicart-lightbox__thumb-index{position:absolute;right:0;bottom:0;display:none;padding:1px 3px;color:var(--ma-cream);background:rgb(9 10 9/.72);font-size:9px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.metalicart-lightbox__caption{flex:1 1 auto;min-width:0;margin:0;padding-left:1rem;border-left:1px solid rgb(242 234 220/.2);color:rgb(242 234 220/.78);font-size:var(--ma-fs-sm, .8rem);line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.metalicart-lightbox__caption[hidden]{display:none}

/* ------------------------------------------------------------ fișa lucrării */
.metalicart-lightbox__info{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.5rem;min-width:0;min-height:0;overflow-y:auto;padding:clamp(1rem,1.8vw,2.25rem);background:#10120f}
.metalicart-lightbox__category{margin:0;color:#d9935e;font-size:var(--ma-fs-xs, .66rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.metalicart-lightbox__info h2{margin:0;font:500 clamp(1.7rem,2.6vw,3rem)/1 var(--ma-font-display, Georgia,serif)}
.metalicart-lightbox__title{margin:0;color:rgb(242 234 220/.82);font:400 var(--ma-fs-base, .95rem)/1.25 var(--ma-font-display, Georgia,serif)}
.metalicart-lightbox__photos{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 0;color:rgb(242 234 220/.6);font-size:var(--ma-fs-xs, .7rem);letter-spacing:.06em}
.metalicart-lightbox__photos[hidden]{display:none}
.metalicart-lightbox__photos svg{flex:none}
.metalicart-lightbox__cta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.75rem;padding:.8rem .9rem;color:#17120e;background:var(--ma-copper);font-size:var(--ma-fs-xs, .68rem);font-weight:850;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.metalicart-lightbox__cta:hover{background:var(--ma-ember)}
/* În coloana îngustă de pe desktop, săgeata mănâncă un rând din etichetă. Semnul WhatsApp
   spune oricum unde duce, deci săgeata se retrage acolo unde locul e strâmt. */
@media(min-width:1100px){.metalicart-lightbox__cta>span[aria-hidden="true"]{display:none}
  .metalicart-lightbox__cta{justify-content:flex-start}}
/* Eticheta e lungă și stă într-o coloană îngustă: rândurile se rup echilibrat, nu „CERE” singur. */
.metalicart-lightbox__cta-label{display:inline-flex;align-items:center;gap:.55rem;min-width:0;line-height:1.3;text-wrap:balance}
/* Semnul îndemnului: pe ecran lat are loc să se vadă lucrat, pe telefon rămâne cât degetul. */
.metalicart-lightbox__cta-icon{flex:none;width:24px;height:24px}
@media(min-width:780px){.metalicart-lightbox__cta-icon{width:32px;height:32px}}
.metalicart-lightbox button.metalicart-lightbox__details-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:44px;height:auto;padding:.55rem .8rem;border-radius:0;color:rgb(242 234 220/.8);font-size:var(--ma-fs-xs, .66rem);font-weight:750;letter-spacing:.12em;text-transform:uppercase}
/*
 * Semnul se rotește, nu sare.
 *
 * „+” devine „×” printr-o rotire de patruzeci și cinci de grade, care până acum se făcea pe loc.
 * Acum durează cât urcarea sertarului, 240 ms, cu aceeași curbă: cele două mișcări pornesc și se
 * opresc împreună.
 */
.metalicart-lightbox__details-sign{display:inline-block;font-size:1.1rem;line-height:1;transition:transform 240ms cubic-bezier(.22,.61,.36,1)}
.metalicart-lightbox.is-details-open .metalicart-lightbox__details-sign{transform:rotate(45deg)}
/*
 * Apăsat, butonul „Detalii” se luminează, dar nu se micșorează.
 *
 * Regula comună a butoanelor din lightbox le strânge la 93% cât ține degetul. Pe săgețile și pe
 * crucea rotunde pare un clic fizic; pe un buton lat, cu text, arăta ca o schimbare de mărime — de
 * la 99 la 92 px, chiar sub deget.
 */
.metalicart-lightbox button.metalicart-lightbox__details-toggle:active{transform:none;background:rgb(225 178 112/.12)}
/*
 * Panoul de detalii: închis din clasa de pe dialog, nu din atributul `hidden`.
 *
 * Pe telefon el este coada sertarului și trebuie să aibă înălțime chiar și închis, ca translatarea
 * să aibă ce coborî sub marginea ecranului. `inert` îl ține în afara tabulării și a cititoarelor
 * de ecran; aici se hotărăște doar dacă se vede.
 */
/* Mânerul există numai în sertar. Gol, dar prezent, el adăuga un interval în coloana fișei de
   desktop și împingea tot ce urma cu opt pixeli. */
.metalicart-lightbox__handle{display:none}
/* Rama comună a ansamblului există numai pe telefon; pe desktop scena și fișa își au ramele lor. */
.metalicart-lightbox__rama{display:none}
/* Pe desktop și pe tabletă învelișul nu există pentru așezare, iar „Distribuie” lipsește. */
.metalicart-lightbox__actiuni{display:contents}
/* Specificitatea butonului: `.metalicart-lightbox button` îi dădea `display: grid` și îl aducea pe desktop. */
.metalicart-lightbox button.metalicart-lightbox__share{display:none}
/* Coada etichetei este un înveliș pentru telefon; pe desktop nu trebuie să schimbe rândurile. */
.metalicart-lightbox__cta-tail{display:contents}
.metalicart-lightbox__details{display:none;gap:.6rem;margin-top:.4rem}
.metalicart-lightbox.is-details-open .metalicart-lightbox__details{display:grid}
.metalicart-lightbox__description{margin:0;color:rgb(242 234 220/.7);font-size:var(--ma-fs-md, .85rem);line-height:1.5}
.metalicart-lightbox__hint{margin:0;color:rgb(242 234 220/.45);font-size:var(--ma-fs-xs, .68rem);line-height:1.45}

/* Anunțul pentru cititoarele de ecran: unul singur, nevăzut. */
.metalicart-lightbox__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.metalicart-lightbox-open{overflow:hidden}
.metalicart-lightbox-open body{overflow:hidden}

/* ------------------------------------------- tabletă, laptop îngust și telefon */
@media(max-width:1099px){
  .metalicart-lightbox__content{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:.5rem;padding:.5rem}
  .metalicart-lightbox__stage{grid-template-columns:minmax(0,1fr);padding:.6rem}
  .metalicart-lightbox__image-wrap{grid-area:1/1;align-self:stretch}
  .metalicart-lightbox__image{max-height:min(100%,72dvh)}
  .metalicart-lightbox button.metalicart-lightbox__nav{grid-area:1/1;z-index:4;align-self:center;width:48px;height:48px;margin:0;border-color:rgb(242 234 220/.55);color:#fff8ee;background:rgb(7 8 7/.72);box-shadow:0 6px 18px rgb(0 0 0/.45)}
  .metalicart-lightbox__prev{justify-self:start}
  .metalicart-lightbox__next{justify-self:end}
  .metalicart-lightbox__rail{right:.6rem;left:.6rem;bottom:.6rem;max-height:64px;padding:4px 8px}
  .metalicart-lightbox button.metalicart-lightbox__thumb{width:44px;height:44px}
  .metalicart-lightbox__thumb-index{display:block}
  .metalicart-lightbox__caption{padding-left:.75rem;font-size:var(--ma-fs-xs, .72rem)}

  /* Bara compactă de identitate: cod, titlu și „Detalii”. Restul stă în panoul extensibil. */
  .metalicart-lightbox__info{flex-flow:row wrap;align-items:center;justify-content:space-between;gap:.35rem .9rem;min-height:70px;max-height:46dvh;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px))}
  .metalicart-lightbox__category,.metalicart-lightbox__photos{display:none}
  .metalicart-lightbox__info h2{font-size:1.5rem}
  .metalicart-lightbox__title{flex:1 1 100%;order:3;overflow:hidden;font-size:var(--ma-fs-sm, .8rem);white-space:nowrap;text-overflow:ellipsis}
  .metalicart-lightbox button.metalicart-lightbox__details-toggle{width:auto;min-width:132px;min-height:48px;border-color:rgb(225 178 112/.5);color:var(--ma-gold)}
  .metalicart-lightbox__cta{display:none}
  .metalicart-lightbox__details{flex:1 1 100%;order:4}
  .metalicart-lightbox.is-details-open .metalicart-lightbox__cta:not([hidden]){display:flex;flex:1 1 100%;order:5;margin-top:0;min-height:48px}
  .metalicart-lightbox__hint{display:none}
}

/* Sub 700 px prefixul „MetalicArt ·” nu mai încape lângă numărători: iese el, nu titlul. */
@media(max-width:700px){.metalicart-lightbox__brand-full{display:none}}

@media(max-width:480px){
  .metalicart-lightbox__top{min-height:0;padding:.45rem .75rem}
  .metalicart-lightbox__brand{font-size:var(--ma-fs-xs, .58rem);letter-spacing:.12em}
  .metalicart-lightbox__brand-full,.metalicart-lightbox__brand-tail{display:none}
  /* Numărătorile stau una sub alta, cu „/” în loc de „din”: așa încape și cuvântul „Galerie”. */
  .metalicart-lightbox__counter{flex-direction:column;align-items:flex-end;gap:.1rem;font-size:var(--ma-fs-xs, .6rem);letter-spacing:.08em;line-height:1.25}
  .metalicart-lightbox__counter-photo{padding-right:0;border-right:0}
  .metalicart-lightbox__din{font-size:0}
  .metalicart-lightbox__din::before{content:" / ";font-size:var(--ma-fs-xs, .6rem)}
  .metalicart-lightbox__info h2{font-size:1.3rem}
  .metalicart-work-image__hint{display:none}
}

/*
 * Telefonul întors are lățime de tabletă și înălțime de nimic.
 *
 * Stivuită, bara de identitate lăsa fotografiei 159 px din 360. Pe ecranele joase fișa trece
 * lateral, ca pe desktop, și fotografia primește toată înălțimea. Descrierea rămâne tot în
 * panoul „Detalii”, deci coloana stă îngustă.
 */
@media(max-width:1099px) and (max-height:500px) and (orientation:landscape){
  .metalicart-lightbox__content{grid-template-columns:minmax(0,1fr) minmax(210px,30%);grid-template-rows:minmax(0,1fr)}
  .metalicart-lightbox__info{flex-flow:column nowrap;align-items:stretch;justify-content:center;min-height:0;max-height:none;padding:.8rem .9rem;border-top:0;border-left:1px solid rgb(242 234 220/.13)}
  .metalicart-lightbox__info>*{order:0}
  .metalicart-lightbox__info h2{font-size:1.3rem}
  .metalicart-lightbox__title{flex:none;overflow:visible;white-space:normal}
  .metalicart-lightbox button.metalicart-lightbox__details-toggle{width:100%}
  .metalicart-lightbox__image{max-height:100%}
}


@media(prefers-reduced-motion:reduce){.metalicart-work-card,.metalicart-work-card img,.metalicart-category-tile__image,.metalicart-lightbox{animation:none!important;scroll-behavior:auto;transition:none!important}}
.metalicart-lightbox__image{opacity:1;transform:none;transition:opacity .24s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.metalicart-lightbox.is-loading .metalicart-lightbox__image{opacity:.18;transform:scale(.985)}
.metalicart-lightbox__image-wrap{position:relative}
/* Mărirea privește numai fotografia: cadrul o taie la marginile lui, iar bara de sus, fișa și
   săgețile rămân pe loc. `touch-action:none` ia gestul de la browser, care altfel ar mări
   toată pagina. */
.metalicart-lightbox__image-wrap{overflow:hidden;touch-action:none}
.metalicart-lightbox__image{transform-origin:center center}
.metalicart-lightbox.is-zoomed .metalicart-lightbox__image{cursor:grab}
.metalicart-lightbox.is-zoomed .metalicart-lightbox__image:active{cursor:grabbing}
/* În timpul gestului transformarea urmează degetul, fără interpolare. */
.metalicart-lightbox.is-pinching .metalicart-lightbox__image{transition:none!important}
.metalicart-lightbox.is-loading .metalicart-lightbox__image-wrap::after{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-18px;border:2px solid rgb(242 234 220/.2);border-top-color:var(--ma-copper);border-radius:50%;content:"";animation:ma-spin .7s linear infinite}
@keyframes ma-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.metalicart-lightbox__image{transition:none!important}.metalicart-lightbox.is-loading .metalicart-lightbox__image-wrap::after{animation:none}}
.metalicart-code,.metalicart-whatsapp,.metalicart-category-tile__content small,.metalicart-search-panel__intro span,.metalicart-lightbox__brand,.metalicart-lightbox__category{color:var(--ma-gold)}

/*
 * Selecția albastră care apărea peste fotografie la clicuri repezi pe săgeți.
 *
 * Două apăsări apropiate pe același buton sunt, pentru browser, un dublu-clic, iar dublu-clicul
 * selectează conținutul din jur: selecția se întindea peste toată scena și fotografia se colora
 * în albastru. Se oprește selecția pe bara de sus, pe scenă și pe butoane — acolo n-ai ce copia.
 * Panoul cu detalii rămâne selectabil, ca acel cod al lucrării să poată fi luat cu mouse-ul.
 */
.metalicart-lightbox__top,
.metalicart-lightbox__stage,
.metalicart-lightbox button {
  -webkit-user-select: none;
  user-select: none;
}
.metalicart-lightbox__info {
  -webkit-user-select: text;
  user-select: text;
}

/*
 * Ce ascunde JavaScriptul trebuie să se și ascundă.
 *
 * `[hidden]` din foaia browserului este `display: none` cu specificitate zero, deci orice `display`
 * scris aici îl bate. Pe amândouă elementele de mai jos JS-ul pune `hidden`, iar amândouă aveau
 * `display` propriu: butonul rămânea pe ecran cu adresa lucrării dinainte, iar pastila de cod
 * rămânea goală după o editare rapidă. Regulile acestea le pun la locul lor.
 *
 * Verificat pe toate cele zece elemente pe care le ascunde JS-ul din proiect: restul de opt fie au
 * deja regula, fie n-au niciun `display` propriu, deci se ascund singure.
 */
.metalicart-lightbox__cta[hidden],
.metalicart-code[hidden] { display: none; }


/* ------------------------------------------------------- controalele cardului
 *
 * Trei ținte peste aceeași fotografie: creionul atelierului, insigna galeriei și legătura care
 * deschide lightboxul. Creionul are 44 px, cât cere degetul, și stă în colțul liber din stânga sus.
 * Inelul de focus este cuprul casei, nu albastrul browserului — două pixeli, ca să se vadă și peste
 * fotografii luminoase.
 *
 * Butonul de editare are un desen al lui în `quick-edit.css`, făcut pentru un buton scris cu
 * litere: margine de sus, colț rotunjit și, la trecerea mausului, fundal auriu plin. Toate trei se
 * scriu din nou aici — mai ales fundalul, fiindcă peste el scrisul auriu ar fi rămas auriu pe
 * auriu, adică nevăzut.
 */
.metalicart-work-card .ma-quick-edit--card{position:absolute;z-index:5;top:.6rem;left:.6rem;display:inline-flex;
  align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;
  border:1px solid rgb(242 234 220/.32);border-radius:0;color:var(--ma-cream);background:rgb(9 10 9/.72);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.metalicart-work-card .ma-quick-edit--card:hover,
.metalicart-work-card .ma-quick-edit--card:focus-visible{border-color:var(--ma-copper);color:#efaa73;background:rgb(9 10 9/.9)}
.metalicart-work-card .ma-quick-edit--card .ma-quick-edit__semn{width:24px;height:24px}

.metalicart-work-image,.metalicart-work-card__title a,.metalicart-whatsapp,.ma-quick-edit--card{-webkit-tap-highlight-color:transparent}
.metalicart-work-image:focus-visible,.metalicart-work-card__title a:focus-visible,
.metalicart-whatsapp:focus-visible,.ma-quick-edit--card:focus-visible{outline:2px solid var(--ma-copper);outline-offset:2px}

/* Insigna și creionul nu prind clicuri în locul fotografiei; numărul fotografiilor e doar de citit. */
.metalicart-work-image__count{pointer-events:none}

/* Etapa restaurării: eticheta de peste fotografie și titlurile din bandă. */
.metalicart-lightbox__etapa{position:absolute;top:.75rem;left:.75rem;z-index:2;padding:.3rem .62rem;border:1px solid rgb(242 234 220/.26);border-radius:999px;background:rgb(16 14 12/.72);color:rgb(242 234 220/.92);font-size:var(--ma-fs-xs, .72rem);letter-spacing:.04em;text-transform:uppercase;line-height:1;backdrop-filter:blur(6px)}
.metalicart-lightbox__etapa[data-etapa="inainte"]{border-color:rgb(215 170 105/.4);color:rgb(226 196 150/.96)}
.metalicart-lightbox__etapa[hidden]{display:none}
.metalicart-lightbox__thumb-group{display:flex;align-items:center;flex:0 0 auto;padding:0 .5rem;color:rgb(242 234 220/.6);font-size:var(--ma-fs-xs, .72rem);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.metalicart-lightbox__thumb-group::before{content:"";width:1px;height:1.6rem;margin-right:.5rem;background:rgb(242 234 220/.2)}
.metalicart-lightbox__thumb-group:first-child::before{display:none}

/* ===================================================================== Lightbox, pe telefon
 *
 * Sub 768 px fișa lucrării nu mai stă sub fotografie, ca un al doilea panou care îi mănâncă
 * jumătate din înălțime, ci devine un sertar ancorat la poala ecranului.
 *
 * Închis, se vede doar bara: codul, titlul pe un rând și „Detalii”. Deschis, sertarul urcă peste
 * marginea de jos a fotografiei. Fotografia nu se mișcă și nu se redimensionează: sertarul stă în
 * aceeași celulă de grilă ca scena, lipit de capătul de jos, și se mută numai prin `transform`.
 * De aceea deschiderea nu produce nici reașezare, nici o a doua descărcare a imaginii.
 *
 * Coborârea este `translateY(calc(100% - var(--ma-lb-bara)))`: „100%” este chiar înălțimea
 * sertarului, deci rămâne la vedere exact bara, a cărei înălțime o măsoară scriptul.
 *
 * Ecranele scunde rămân pe afară: pe un telefon întors, fișa trece lateral — regula de mai sus —,
 * fiindcă acolo înălțimea este tot ce lipsește, iar un sertar ar fi mâncat o treime din ea.
 */
@media(max-width:767px) and (min-height:501px){
  /*
   * Un singur ansamblu, o singură ramă.
   *
   * Scena, banda de miniaturi și sertarul stau toate în învelișul acesta, iar el poartă masca
   * concavă și conturul — aceeași formulă ca utilitatea canonică `.ma-concav`, aceeași rază, același
   * fir. Așa colțurile concave sunt patru și numai la exterior: sus la scenă, jos la baza
   * sertarului. Spațiul de la margini și bara de gesturi stau în afara ramei, ca margine.
   */
  .metalicart-lightbox__content{position:relative;grid-template-rows:minmax(0,1fr);gap:0;margin:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));padding:0;background:#0a0b0a;
    -webkit-mask:
      radial-gradient(circle at 0 0,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 0 0/51% 51% no-repeat,
      radial-gradient(circle at 100% 0,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 100% 0/51% 51% no-repeat,
      radial-gradient(circle at 0 100%,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 0 100%/51% 51% no-repeat,
      radial-gradient(circle at 100% 100%,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 100% 100%/51% 51% no-repeat;
    mask:
      radial-gradient(circle at 0 0,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 0 0/51% 51% no-repeat,
      radial-gradient(circle at 100% 0,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 100% 0/51% 51% no-repeat,
      radial-gradient(circle at 0 100%,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 0 100%/51% 51% no-repeat,
      radial-gradient(circle at 100% 100%,#0000 0 calc(var(--ma-concav-raza) - .25px),#000 calc(var(--ma-concav-raza) + .25px)) 100% 100%/51% 51% no-repeat}
  /* Rama stă deasupra sertarului: laturile și colțurile de jos se văd și peste el. */
  /* Specificitate dublă: `.ma-concav__contur` din foaia navigației îi dă z-index 3 și se încarcă după. */
  .metalicart-lightbox .metalicart-lightbox__rama{display:block;z-index:7}

  /* Scena, banda și sertarul nu mai au nici mască, nici contur: le încadrează învelișul. */
  .metalicart-lightbox__stage.ma-concav,
  .metalicart-lightbox__rail.ma-concav,
  .metalicart-lightbox__info.ma-concav{-webkit-mask:none;mask:none}
  .metalicart-lightbox__stage>.ma-concav__contur,
  .metalicart-lightbox__info>.ma-concav__contur{display:none}
  /*
   * Scena se oprește deasupra barei sertarului.
   *
   * Întinsă până în poala ecranului, ea își centra fotografia pe toată înălțimea, deci rămânea un
   * gol negru sus și fotografia intra pe sub sertar. Poala este cât bara — o mărime care nu se
   * schimbă la deschidere —, deci fotografia stă pe loc când sertarul urcă.
   */
  .metalicart-lightbox__stage{grid-area:1/1;padding:.5rem;padding-bottom:calc(var(--ma-lb-bara,96px) + .5rem)}
  .metalicart-lightbox__image{max-height:100%}

  /* Bara de sus: romb, „Galerie”, numărătorile pe două rânduri, crucea într-un cerc. */
  .metalicart-lightbox__top{min-height:60px;padding:.5rem .75rem;padding-top:calc(.5rem + env(safe-area-inset-top,0px))}
  .metalicart-lightbox__brand{gap:.55rem}
  .metalicart-lightbox button.metalicart-lightbox__close{display:flex;width:44px;height:44px;flex:none;align-items:center;justify-content:center;padding:0;border:1px solid rgb(225 178 112/.55);border-radius:50%;color:var(--ma-cream);background:rgb(7 8 7/.6);font-size:1.3rem;line-height:1}

  /* Săgețile: cercuri negre, un singur fir de aramă, vârf ivoriu. */
  .metalicart-lightbox button.metalicart-lightbox__nav{width:46px;height:46px;border:1px solid rgb(225 178 112/.6);color:var(--ma-cream);background:rgb(7 8 7/.74);box-shadow:none}
  .metalicart-lightbox__prev{margin-left:-6px}
  .metalicart-lightbox__next{margin-right:-6px}

  /*
   * Banda de miniaturi stă peste poala fotografiei, deasupra sertarului închis.
   *
   * Fără cutie și fără contur: în macheta aprobată miniaturile stau direct pe fotografie. Capătul
   * benzii se stinge, ca să se vadă că urmează și altele.
   */
  .metalicart-lightbox__rail.ma-concav{right:.5rem;left:.5rem;bottom:calc(var(--ma-lb-bara,96px) + .4rem);max-height:60px;padding:0;background:transparent}
  .metalicart-lightbox__rail>.ma-concav__contur{display:none}
  .metalicart-lightbox__thumbs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
  .metalicart-lightbox button.metalicart-lightbox__thumb{width:48px;height:48px;opacity:.55}
  .metalicart-lightbox button.metalicart-lightbox__thumb[aria-current="true"]{border-color:var(--ma-gold);opacity:1}
  .metalicart-lightbox__caption{display:none}

  /* ------------------------------------------------------------------ sertarul */
  /* `border-box`: cu lățime de 100% peste căptușeală, sertarul ieșea cu treizeci de pixeli din
     cutie și împingea scena la stânga de fiecare dată când se deschidea. */
  .metalicart-lightbox__info{box-sizing:border-box;grid-area:1/1;z-index:6;align-self:end;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:.3rem .8rem;min-height:0;max-height:44dvh;overflow:visible;padding:1.4rem .95rem .9rem;border:0;border-top:1px solid rgb(225 178 112/.55);border-radius:0;transform:translateY(calc(100% - var(--ma-lb-bara,96px)));transition:transform 240ms cubic-bezier(.22,.61,.36,1)}
  /* Pe telefon coada sertarului are înălțime și când este închisă: ea este ce se coboară. */
  .metalicart-lightbox__details{display:grid}
  .metalicart-lightbox.is-details-open .metalicart-lightbox__info{transform:translateY(0)}

  /* Mânerul: o singură liniuță, centrată, cât să spună că panoul se trage. */
  .metalicart-lightbox__handle{display:block;position:absolute;top:13px;left:50%;width:40px;height:3px;border-radius:0;background:rgb(225 178 112/.5);transform:translateX(-50%)}

  .metalicart-lightbox__info h2{grid-area:1/1;margin:0;font-size:1.65rem;line-height:1.1}
  .metalicart-lightbox button.metalicart-lightbox__details-toggle{grid-area:1/2;align-self:center;width:auto;min-width:0;min-height:44px;padding:.5rem .85rem;border-color:rgb(225 178 112/.55);color:var(--ma-gold)}
  .metalicart-lightbox__title{grid-area:2/1/2/3;flex:none;order:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .metalicart-lightbox__details{grid-area:3/1/3/3;flex:none;order:0;min-height:0;overflow-y:auto;margin-top:.5rem;padding-top:.75rem;border-top:1px solid rgb(242 234 220/.16);overscroll-behavior:contain}
  /*
   * Îndemnul stă în sertar și când sertarul este închis.
   *
   * Arătat abia la deschidere, el creștea panoul cu cincizeci de pixeli chiar în clipa în care
   * acesta urca: mișcarea nu mai era curată, fiindcă se schimba și înălțimea, nu doar poziția.
   * Așezat de la bun început, coboară odată cu restul cozii sub marginea ecranului.
   */
  /*
   * Două butoane alăturate, în locul blocului lat.
   *
   * „Cere detalii” ocupa singur tot rândul, cu 52 px înălțime: cel mai mare lucru din sertar,
   * mai mare decât descrierea pe care o încheia. Acum stă alături de „Distribuie”, amândouă de
   * 48 px — cât cere un deget, nu mai mult.
   */
  .metalicart-lightbox__actiuni{display:grid;grid-area:4/1/4/3;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.7rem}
  .metalicart-lightbox .metalicart-lightbox__cta:not([hidden]){display:flex;grid-area:auto;flex:none;order:0;align-items:center;justify-content:center;min-height:48px;height:48px;margin-top:0;padding:0 .6rem}
  /*
   * Ordinea de pe ecran este ordinea din marcaj: întâi „Cere detalii”, apoi „Distribuie”.
   *
   * Regula de tabletă îi dă îndemnului `order: 5` și, mai specifică, îl trimitea în dreapta. Cine
   * merge cu tastatura sau cu un cititor de ecran îl întâlnește primul, deci primul trebuie să și stea.
   */
  .metalicart-lightbox.is-details-open .metalicart-lightbox__actiuni>.metalicart-lightbox__cta{order:0}
  .metalicart-lightbox__cta-arrow{display:none}
  /*
   * Semnele celor două butoane, potrivite din ochi, nu doar din cifre.
   *
   * Desenele umplu aproape la fel din planșa lor — 72,7 × 71,1 %, față de 72,9 × 69,8 % —, deci la
   * aceeași cutie ies de aceeași mărime. Numai că semnul WhatsApp este un disc strâns, iar cel de
   * „Distribuie” are trei noduri depărtate: la 26 px amândouă, al doilea părea mai mare. Stă de aceea
   * cu o idee mai mic, în 23 px.
   */
  .metalicart-lightbox .metalicart-lightbox__cta .metalicart-lightbox__cta-icon{width:26px;height:26px}
  .metalicart-lightbox .metalicart-lightbox__share-icon{width:23px;height:23px}
  .metalicart-lightbox button.metalicart-lightbox__share{display:flex;align-items:center;justify-content:center;gap:.5rem;width:auto;height:48px;min-height:48px;padding:0 .6rem;border:1px solid rgb(225 178 112/.55);border-radius:0;color:var(--ma-gold);background:transparent;font-size:var(--ma-fs-xs, .68rem);font-weight:850;letter-spacing:.06em;text-transform:uppercase}
  .metalicart-lightbox button.metalicart-lightbox__share:active{transform:none;background:rgb(225 178 112/.12)}
  .metalicart-lightbox__share-icon{display:block;flex:none}
  /* Fără îndemn — o lucrare fără adresă de WhatsApp —, „Distribuie” ia tot rândul. */
  .metalicart-lightbox__cta[hidden]+.metalicart-lightbox__share{grid-column:1/-1}
  .metalicart-lightbox__cta-tail{display:none}

  /* Închis, coada sertarului este sub marginea ecranului: nimic de citit și nimic de atins. */
  .metalicart-lightbox:not(.is-details-open) .metalicart-lightbox__details,
  .metalicart-lightbox:not(.is-details-open) .metalicart-lightbox__cta,
  .metalicart-lightbox:not(.is-details-open) .metalicart-lightbox__share{visibility:hidden}
}

/* Mișcarea sertarului și a semnului se oprește, nu și ele: starea se schimbă pe loc. */
@media(prefers-reduced-motion:reduce){
  .metalicart-lightbox__info,
  .metalicart-lightbox__details-sign{transition:none!important}
}

/*
 * Galeria pe desktop: bara de sus mai joasă, fotografia mai mare.
 *
 * Bara avea 72 px minimum, plus umplutura (2 × .7rem), adică 95 px; acum se potrivește butonului de
 * închidere (40 px, destul pentru mouse) și are ~54 px. Marginea din jurul fotografiei scade și ea,
 * iar spațiul câștigat merge în fotografie, care ocupă tot ce rămâne (`max-height: 100%`).
 * Telefonul își păstrează regulile lui.
 */
@media (min-width: 768px) {
  .metalicart-lightbox__top { min-height: 0; padding-block: .45rem; }
  .metalicart-lightbox__top button { width: 40px; height: 40px; }
  .metalicart-lightbox__stage { padding: clamp(.5rem, 1.2vw, 1.25rem); }
}

/*
 * Telefonul întors: bara de sus nu mai ține un rând al ei.
 *
 * Din 390 px înălțime — pe telefon chiar mai puțin, cu bara browserului — rândul de identitate
 * lua 55, numai ca să arate un nume pe care vizitatorul îl știe deja și două numere. Aici
 * înălțimea este a fotografiei: numele dispare, iar contorul și închiderea se așază în capul
 * coloanei din dreapta, deasupra fișei, care se scurtează cu atât.
 *
 * Stă la sfârșitul foii fiindcă regulile de tabletă de mai sus (`min-width:768px`) prind și
 * telefonul întors și ar fi venit după ea.
 */
@media(max-width:1099px) and (max-height:500px) and (orientation:landscape){
  .metalicart-lightbox__shell{position:relative;grid-template-rows:minmax(0,1fr)}
  .metalicart-lightbox__top{position:absolute;z-index:8;top:.35rem;right:calc(.5rem + env(safe-area-inset-right,0px));justify-content:flex-end;box-sizing:border-box;width:max(210px,calc((100% - 1.5rem) * .3));min-height:0;padding:0 .9rem;border:0;background:none;pointer-events:none}
  .metalicart-lightbox__brand{display:none}
  .metalicart-lightbox__controls{flex:1;justify-content:space-between;gap:.5rem;pointer-events:auto}
  .metalicart-lightbox__counter{flex-direction:column;align-items:flex-start;gap:.1rem;line-height:1.3}
  .metalicart-lightbox__counter-photo{padding-right:0;border-right:0}
  .metalicart-lightbox__top button{width:40px;height:40px}
  /*
   * Fișa începe sub contor, nu pe sub el.
   *
   * Întâi contorul plutea peste capul fișei, iar fișa își lăsa loc cu un `padding`. Ținea cât
   * textul încăpea; la o descriere lungă fișa derulează, iar rândurile urcau pe sub contor și
   * se citeau unele peste altele. Acum fișa însăși este mai scurtă: tot ce derulează rămâne
   * înăuntrul ei, iar contorul stă deasupra, pe fondul ferestrei.
   *
   * Textul stă la mijloc prin margini `auto`, nu prin `justify-content:center`: când nu încape,
   * marginile se fac zero și textul începe de sus. Centrat simplu, capătul de sus ieșea din fișă
   * și nu se mai putea ajunge la el nici derulând.
   */
  .metalicart-lightbox__info{margin-top:3.1rem;justify-content:flex-start}
  .metalicart-lightbox__info>.metalicart-lightbox__code{margin-top:auto}
  .metalicart-lightbox__info::after{flex:none;margin-bottom:auto;content:""}
  /*
   * Chenarul fișei stă pe loc cât derulează textul.
   *
   * Linia chenarului este un element din fișă, așezat absolut, deci la derulare pleca odată cu
   * textul: urca peste butonul de WhatsApp, iar butonul părea ieșit din chenar. Aici linia este
   * lipită de marginea de sus a fișei (`sticky`) și nu ocupă loc în șirul ei: își ia înălțimea
   * din a fișei (`cqh`) și și-o dă înapoi prin marginea de jos.
   */
  .metalicart-lightbox__info{container-type:size}
  .metalicart-lightbox__info>.ma-concav__contur{position:sticky;top:-.8rem;inset-inline:auto;order:-1;flex:none;width:calc(100% + 1.8rem);height:calc(100cqh + 1.6rem);margin:-.8rem -.9rem calc(-100cqh - .8rem - .35rem)}
  /* Pe o fișă atât de joasă butonul spune numai „Cere detalii”, pe un rând, ca pe telefonul ținut drept. */
  .metalicart-lightbox__cta-tail{display:none}
  /*
   * Butonul își ia înălțimea din ce are în el, nu din fișă.
   *
   * Regula de tabletă îi dă `flex:1 1 100%`, ca să ocupe un rând întreg când fișa curge pe
   * orizontală. Aici fișa curge pe verticală, deci același „100 %” însemna înălțime: butonul
   * ieșea de 74 px pentru un singur rând de text.
   */
  .metalicart-lightbox.is-details-open .metalicart-lightbox__cta:not([hidden]){box-sizing:border-box;flex:none;min-height:44px;padding-block:.55rem}
  .metalicart-lightbox__info{padding-bottom:.8rem}
}