/* ==========================================================
   VITRINA · gama presentada como estanteria iluminada
   Pared y balda: fotografia generada (Higgsfield) y recortada.
   Los envases son los packshots oficiales recortados a fondo
   transparente. Cada fila es una balda a todo el ancho: las
   filas incompletas se centran, como en una tienda real.
   ========================================================== */
.vt{
  --h:128px;                 /* alto visual de un tarro           */
  --cols:6;
  --strip:152px;             /* alto de la franja de balda        */
  --base:20px;               /* donde apoya el envase en la franja */
  position:relative; isolation:isolate; overflow:hidden; overflow:clip; contain:paint;
  background:#0d0b09 url(/assets/images/caviaroli/vitrina/pared.webp) center top/cover no-repeat;
}
.vt::before{ /* oscurece la pared y la funde con el fondo de la pagina arriba y abajo */
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg,var(--ink) 0,rgba(14,13,12,0) 140px,rgba(14,13,12,0) calc(100% - 140px),var(--ink) 100%),
    linear-gradient(180deg,rgba(24,18,13,.80),rgba(24,18,13,.86) 40%,rgba(24,18,13,.92));
}
@media(max-width:1099px){ .vt{ --cols:4; --h:112px; } }
@media(max-width:759px){  .vt{ --cols:3; --h:88px; --strip:126px; --base:17px; } }

.vt-fam{ max-width:1180px; margin:0 auto; }
.vt-fam + .vt-fam{ margin-top:clamp(30px,4vw,64px); }
.vt-fam-t{
  font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(245,240,230,.55); margin:0 0 6px; text-align:center;
}

.vt-shelf{
  --sh:calc(var(--h) + 26px);
  display:flex; flex-wrap:wrap; justify-content:center;
  list-style:none; margin:0; padding:0;
}
.vt-shelf.is-tall{ --sh:calc(var(--h) * 1.85 + 26px); }

.vt-it{ flex:0 0 auto; position:relative; margin:0; }
/* la balda: cada envase dibuja la franja a todo el ancho; como la
   textura es uniforme, las copias superpuestas no se notan */
.vt-it::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-100vw; right:-100vw; height:var(--strip);
  top:calc(var(--sh) - var(--base));
  background:url(/assets/images/caviaroli/vitrina/balda.webp) 0 0/auto 100% repeat-x;
  -webkit-mask:linear-gradient(180deg,transparent,#000 8px,#000 30%,rgba(0,0,0,.45) 55%,transparent);
          mask:linear-gradient(180deg,transparent,#000 8px,#000 30%,rgba(0,0,0,.45) 55%,transparent);
}
/* reparto equilibrado: cada balda indica en data-c6/c4/c3 cuantos
   envases por fila caben en cada ancho; la fila se centra y la
   separacion entre envases es la misma en todas las baldas */
.vt-it::before{ display:none; }
.vt-shelf{ width:calc(100% * var(--cols) / var(--max)); margin:0 auto; }
.vt-it{ flex-basis:calc(100% / var(--cols)); }
@media(min-width:1100px){
  .vt{ --max:6; }
  .vt-shelf[data-c6="1"]{ --cols:1; } .vt-shelf[data-c6="1"] .vt-it:nth-child(1n+1)::before{ display:block; }
  .vt-shelf[data-c6="2"]{ --cols:2; } .vt-shelf[data-c6="2"] .vt-it:nth-child(2n+1)::before{ display:block; }
  .vt-shelf[data-c6="3"]{ --cols:3; } .vt-shelf[data-c6="3"] .vt-it:nth-child(3n+1)::before{ display:block; }
  .vt-shelf[data-c6="4"]{ --cols:4; } .vt-shelf[data-c6="4"] .vt-it:nth-child(4n+1)::before{ display:block; }
  .vt-shelf[data-c6="5"]{ --cols:5; } .vt-shelf[data-c6="5"] .vt-it:nth-child(5n+1)::before{ display:block; }
  .vt-shelf[data-c6="6"]{ --cols:6; } .vt-shelf[data-c6="6"] .vt-it:nth-child(6n+1)::before{ display:block; }
}
@media(min-width:760px) and (max-width:1099px){
  .vt{ --max:4; }
  .vt-shelf[data-c4="1"]{ --cols:1; } .vt-shelf[data-c4="1"] .vt-it:nth-child(1n+1)::before{ display:block; }
  .vt-shelf[data-c4="2"]{ --cols:2; } .vt-shelf[data-c4="2"] .vt-it:nth-child(2n+1)::before{ display:block; }
  .vt-shelf[data-c4="3"]{ --cols:3; } .vt-shelf[data-c4="3"] .vt-it:nth-child(3n+1)::before{ display:block; }
  .vt-shelf[data-c4="4"]{ --cols:4; } .vt-shelf[data-c4="4"] .vt-it:nth-child(4n+1)::before{ display:block; }
}
@media(max-width:759px){
  .vt{ --max:3; }
  .vt-shelf[data-c3="1"]{ --cols:1; } .vt-shelf[data-c3="1"] .vt-it:nth-child(1n+1)::before{ display:block; }
  .vt-shelf[data-c3="2"]{ --cols:2; } .vt-shelf[data-c3="2"] .vt-it:nth-child(2n+1)::before{ display:block; }
  .vt-shelf[data-c3="3"]{ --cols:3; } .vt-shelf[data-c3="3"] .vt-it:nth-child(3n+1)::before{ display:block; }
}

/* foco cenital: solo al pasar o enfocar */
.vt-it::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:0; width:min(100%,260px); height:var(--sh); transform:translateX(-50%);
  background:radial-gradient(60% 75% at 50% 70%,rgba(255,226,170,.16),transparent 70%);
  opacity:0; transition:opacity .45s ease;
}
.vt-it:hover::after,.vt-it:focus-within::after{ opacity:1; }

.vt-b{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; width:100%; padding:0 6px clamp(44px,4.6vw,68px);
}
.vt-st{ height:var(--sh); display:flex; align-items:flex-end; justify-content:center; width:100%; }
.vt-img{
  height:var(--h); width:auto; max-width:92%; object-fit:contain; display:block;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.6));
  transform:translateY(0); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.vt-img.is-tall{ height:calc(var(--h) * 1.85); }
.vt-b:hover .vt-img,.vt-b:focus-visible .vt-img{ transform:translateY(-3px); }
.vt-b:focus-visible{ outline:none; }
.vt-b:focus-visible .vt-n{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }

/* el rotulo va pegado al canto de su balda, como una etiqueta de tienda */
.vt-cap{ margin-top:calc(var(--base) + 12px); text-align:center; max-width:190px; }
.vt-n{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--serif); font-size:14.5px; line-height:1.3; color:var(--cream);
}
.vt-k{ display:block; margin-top:5px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:.85; }
.vt-d{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
@media(max-width:759px){
  .vt-b{ padding-left:3px; padding-right:3px; }
  .vt-n{ font-size:12px; }
  .vt-b{ padding-bottom:34px; }
  .vt-k{ font-size:9px; letter-spacing:.14em; }
}

/* ---------- ficha ampliada ---------- */
.vt-dlg{
  border:0; padding:0; margin:auto; width:min(1100px,94vw); max-height:92vh;
  background:#0d0b09; color:var(--cream); border-radius:8px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.vt-dlg::backdrop{ background:rgba(7,7,6,.82); backdrop-filter:blur(6px); }
.vt-dlg-in{ display:grid; grid-template-columns:1.15fr 1fr; min-height:min(620px,86vh); }
.vt-dlg-st{
  position:relative; isolation:isolate; display:flex; align-items:flex-end; justify-content:center;
  padding:56px 32px 132px;
  background:
    radial-gradient(50% 55% at 50% 52%,rgba(255,226,170,.12),transparent 72%),
    linear-gradient(rgba(24,18,13,.82),rgba(24,18,13,.9)),
    #15110d url(/assets/images/caviaroli/vitrina/pared.webp) center/cover;
}
.vt-dlg-st::after{
  content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:152px;
  background:url(/assets/images/caviaroli/vitrina/balda.webp) 0 0/auto 100% repeat-x;
  -webkit-mask:linear-gradient(180deg,transparent,#000 8px,#000 30%,rgba(0,0,0,.45) 55%,transparent);
          mask:linear-gradient(180deg,transparent,#000 8px,#000 30%,rgba(0,0,0,.45) 55%,transparent);
}
.vt-dlg-st img{ max-height:min(300px,40vh); max-width:80%; width:auto; height:auto;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.6)); }
.vt-dlg-st img.is-tall{ max-height:min(440px,56vh); }
.vt-dlg-tx{ padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:14px; border-left:1px solid var(--line-soft); }
.vt-dlg-f{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,240,230,.5); margin:0; }
.vt-dlg-n{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,40px); line-height:1.12; margin:0; color:var(--cream); }
.vt-dlg-k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0; }
.vt-dlg-d{ font-size:16px; line-height:1.65; color:rgba(245,240,230,.75); margin:4px 0 8px; max-width:42ch; }
.vt-dlg-a{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.vt-dlg-nav{ display:flex; gap:8px; margin-top:auto; padding-top:18px; }
.vt-x,.vt-p,.vt-s{
  all:unset; cursor:pointer; box-sizing:border-box; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line); color:var(--cream);
  transition:border-color .25s, background .25s;
}
.vt-x{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(14,13,12,.6); }
.vt-x:hover,.vt-p:hover,.vt-s:hover,.vt-x:focus-visible,.vt-p:focus-visible,.vt-s:focus-visible{ border-color:var(--gold-line); background:rgba(245,166,35,.08); }
.vt-x svg,.vt-p svg,.vt-s svg{ width:18px; height:18px; }
@media(max-width:759px){
  .vt-dlg{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .vt-dlg-in{ grid-template-columns:1fr; grid-template-rows:minmax(0,52%) auto; height:100%; min-height:0; }
  .vt-dlg-st{ padding:56px 20px 112px; }
  .vt-dlg-st::after{ height:126px; }
  .vt-dlg-st img{ max-height:24vh; } .vt-dlg-st img.is-tall{ max-height:32vh; }
  .vt-dlg-tx{ border-left:0; border-top:1px solid var(--line-soft); padding:22px 20px 24px; gap:10px; overflow:auto; }
  .vt-dlg-d{ font-size:15px; }
}
/* entrada sin View Transitions */
.vt-dlg[open]{ animation:vtIn .35s cubic-bezier(.2,.7,.2,1); }
/* cambio de producto dentro de la ficha */
.vt-mv .vt-dlg-st img,.vt-mv .vt-dlg-tx>*{ animation:vtMv .35s ease both; }
@keyframes vtMv{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vtIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
::view-transition-group(vt-p){ animation-duration:.5s; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
@media(prefers-reduced-motion:reduce){
  .vt-img,.vt-it::after{ transition:none; }
  .vt-dlg[open]{ animation:none; }
}

/* pie de la vitrina: referencias bajo pedido en desplegable y credito corto */
.vt-pie{ max-width:640px; margin:clamp(36px,4vw,56px) auto 0; text-align:center; }
.vt-mas summary{ display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.vt-mas summary::-webkit-details-marker{ display:none; }
.vt-mas summary::after{ content:"+"; font-size:15px; letter-spacing:0; transition:transform .3s ease; }
.vt-mas[open] summary::after{ transform:rotate(45deg); }
.vt-mas summary:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; }
.vt-mas p{ margin:10px auto 0; font-size:14px; line-height:1.7; color:rgba(245,240,230,.7); max-width:56ch; }
.vt-cred{ margin:14px 0 0; font-size:11px; letter-spacing:.06em; color:rgba(245,240,230,.38); }