/* ══════════════════════════════════════════════════════════════════
   Collection page only (products.html). Loaded after css/style.css: rules keep
   the order they have in the design, so the cascade is the same.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Page hero ---------- */
.page-hero{padding:calc(var(--header-h) + var(--s30)) var(--pad) var(--s24)}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s10);align-items:end}
.page-hero__grid p{color:var(--grigio);max-width:440px;margin:0}

/* ---------- Showcase: 3 staggered columns ---------- */
.gallery-wrap{padding:var(--s16) var(--pad) var(--s24);overflow:hidden}
.vgrid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);align-items:start}
.vcol{display:flex;flex-direction:column;gap:var(--s8);will-change:transform}
.vcol--2{margin-top:var(--s40)}
.vcol--3{margin-top:var(--s16)}
/* the design declares .vcard three times (layout, width, cursor): merged here, same result */
.vcard{margin:0;display:flex;flex-direction:column;gap:var(--s4);width:100%;cursor:default}
.vcard__media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:0;transition:transform .6s var(--ease),border-radius .6s var(--ease)}
.vcard__media .ph{position:absolute;inset:0}
.vcard:hover .vcard__media,.vcard:focus-visible .vcard__media{transform:scale(1.03);border-radius:var(--r-btn)}
@media (max-width:960px){.vgrid{gap:var(--s4)}.vcol{gap:var(--s4)}.vcol--2{margin-top:var(--s24)}.vcol--3{margin-top:var(--s10)}}
@media (max-width:760px){.vgrid{grid-template-columns:1fr;gap:var(--s4)}.vcol,.vcol--2,.vcol--3{margin-top:0;transform:none!important}}

/* ---------- Image modal (lightbox) ---------- */
.vgrid__more{height:1px}
.vcard:focus-visible{outline:1px solid var(--oro);outline-offset:4px}
body.modal-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center;padding:var(--s6);background:rgba(11,11,11,.72);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.lightbox__panel{position:relative;display:flex;flex-direction:column;gap:var(--s4);max-width:min(640px,100%);max-height:100%;padding:var(--s4);background:var(--bianco);border:1px solid var(--oro);transform:translateY(16px) scale(.98);transition:transform .6s var(--ease)}
.lightbox.is-open .lightbox__panel{transform:none}
.lightbox__fig{margin:0;display:grid;place-items:center;min-height:0;background:var(--beige)}
.lightbox__fig img{display:block;max-width:100%;max-height:calc(100svh - 200px);width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .5s var(--ease)}
.lightbox__fig img.is-in{opacity:1}
.lightbox__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.lightbox__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(11,11,11,.3);border-radius:0;background:var(--bianco);color:var(--nero);font:300 20px/1 var(--sans);cursor:pointer;transition:border-radius .6s var(--ease),background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.lightbox__btn:hover,.lightbox__btn:focus-visible{border-radius:var(--r-btn);background:var(--nero);border-color:var(--nero);color:var(--bianco)}
.lightbox__close{position:absolute;z-index:3;top:var(--s6);right:var(--s6);font-size:26px}
.lightbox__count{font:italic 300 20px/1 var(--serif);color:var(--grigio)}
.lightbox.is-single .lightbox__nav{display:none}
@media (max-width:760px){.lightbox{padding:var(--s3)}.lightbox__panel{padding:var(--s3)}.lightbox__close{top:var(--s5);right:var(--s5)}.lightbox__fig img{max-height:calc(100svh - 160px)}}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .page-hero__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-hero{padding:calc(var(--header-h) + var(--s16)) var(--pad) var(--s14)}
}

/* ---------- Former inline styles (last, so they win as the inline styles did) ---------- */
.page-hero__title{display:flex;flex-direction:column;gap:var(--s7)}