/* Fotografías reales sin recortar los frascos ni cubrir el producto con texto. */
.photo-column{min-width:0}
.main-photo{height:650px;background:#874b3c}
.main-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 76%}
.variant{display:grid;grid-template-columns:62px minmax(0,1fr) auto auto;gap:12px;min-height:100px;padding:12px 0}
.variant-photo{position:relative;width:62px;height:76px;padding:0;border:0;background:#874b3c;cursor:zoom-in;overflow:hidden}
.variant-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 65%}
.variant-photo[data-presentation-photo="st-ch"]>img{transform:scale(1.35);transform-origin:50% 70%}
.variant-photo>span{position:absolute;right:2px;bottom:2px;background:var(--paper);color:var(--green);font-size:16px;line-height:18px;width:18px;text-align:center}
.variant>.size-marker{width:62px;height:76px;background:var(--cream);border:1px solid var(--line);border-radius:0;font-size:12px}
.variant-name{min-width:0}
.variant-name h3{font-size:14px;line-height:1.45;overflow-wrap:normal}
.variant-price{white-space:nowrap}
.variant .stepper{height:44px;gap:0}
.variant .stepper button{width:34px;height:42px}
.variant .stepper output{width:23px}
.variant>.sold-out{width:93px}
.photo-dialog{width:min(960px,calc(100% - 32px));max-width:960px;max-height:94dvh;padding:20px;overflow:auto}
.photo-dialog .dialog-top{margin:0 0 14px}
.photo-dialog h2{font:26px/1.3 var(--serif);letter-spacing:-.4px}
.photo-dialog .close-button{width:44px;height:44px;flex-shrink:0}
.photo-viewer-stage{display:flex;align-items:center;justify-content:center}
.photo-viewer-stage>img{width:auto;height:auto;max-width:100%;max-height:69dvh;object-fit:contain}
@media(min-width:1450px){.main-photo{height:705px}}
@media(min-width:1101px) and (min-height:900px){.photo-column{position:sticky;top:24px}}
@media(min-width:761px) and (max-width:1100px){
  .main-photo{height:625px}
  .variant{grid-template-columns:58px minmax(0,1fr) auto;gap:4px 10px}
  .variant-photo,.variant>.size-marker{grid-column:1;grid-row:1/3;width:58px;height:78px}
  .variant-name{grid-column:2;grid-row:1/3}
  .variant-price{grid-column:3;grid-row:1;justify-self:end}
  .variant>.stepper,.variant>.sold-out{grid-column:3;grid-row:2;justify-self:end}
}
@media(max-width:760px){
  .main-photo{height:clamp(210px,69vw,270px)}
  .variant{grid-template-columns:64px minmax(0,1fr) auto;gap:4px 10px;min-height:114px;padding:14px 0}
  .variant-photo,.variant>.size-marker{grid-column:1;grid-row:1/3;width:64px;height:86px}
  .variant-name{grid-column:2;grid-row:1/3}
  .variant-name h3{font-size:16px;line-height:1.4}
  .variant-name>span{font-size:14px}
  .variant-price{grid-column:3;grid-row:1;font-size:17px;justify-self:end}
  .variant>.stepper,.variant>.sold-out{grid-column:3;grid-row:2;justify-self:end}
  .variant .stepper{height:46px}
  .variant .stepper button{width:44px;height:44px}
  .variant .stepper output{width:26px}
  .variant>.sold-out{width:116px;min-width:0;font-size:10px}
  .photo-dialog{width:calc(100% - 20px);padding:16px;max-height:94dvh}
  .photo-dialog h2{font-size:23px}
  .photo-viewer-stage>img{max-height:65dvh}
}
@media(max-width:390px){
  .variant{grid-template-columns:56px minmax(0,1fr) auto;gap:4px 8px}
  .variant-photo,.variant>.size-marker{width:56px;height:82px}
  .variant-name h3{font-size:14px}
  .variant-name>span{font-size:13px}
  .variant-price{font-size:16px}
}
@media(max-width:340px){
  .variant{grid-template-columns:56px minmax(0,1fr);gap:7px 12px}
  .variant-photo,.variant>.size-marker{grid-column:1;grid-row:1/3}
  .variant-name{grid-column:2;grid-row:1}
  .variant-price{grid-column:2;grid-row:2;justify-self:start}
  .variant>.stepper,.variant>.sold-out{grid-column:2;grid-row:3;justify-self:start}
}