.product-detail-enhanced {
  grid-template-columns: minmax(600px, 1.45fr) minmax(390px, .72fr);
  gap: clamp(2.5rem, 4.5vw, 5.5rem);
  padding: 0 clamp(2rem, 3.5vw, 4.5rem);
}

.product-detail-enhanced .detail-gallery {
  min-height: calc(100svh - 128px);
  padding-left: clamp(88px, 7.5vw, 120px);
}

.detail-thumbnails {
  position: absolute;
  z-index: 5;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0;
  width: clamp(74px, 6vw, 104px);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.detail-thumb {
  flex: 0 0 clamp(86px, 9vw, 126px);
  width: 100%;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.detail-thumb:hover { transform: translateY(-2px); }
.detail-thumb.is-selected { border-color: #b8b8b8; }
.detail-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-detail-enhanced .detail-controls { display: none; }

.product-detail-enhanced .detail-product-stage {
  position: relative;
  width: min(100%, 800px, calc(100svh - 142px));
  overflow: hidden;
  isolation: isolate;
}

.product-detail-enhanced .detail-product-stage > img {
  position: absolute;
  inset: 0;
  margin: auto;
  --product-scale: 1;
  --product-x-scale: 1;
  --product-x: 0px;
  --product-y: 0px;
  cursor: zoom-in;
  transition: transform .35s ease;
  transform-origin: center;
  transform: translate(var(--product-x), var(--product-y)) scale(var(--product-scale)) scaleX(var(--product-x-scale));
}

#tomatodo-1200 .detail-product-stage > img {
  --product-scale: 1.06;
  --product-y: 0px;
}

#tomatodo-600 .detail-product-stage > img {
  --product-scale: .86;
  --product-y: 10px;
}

#tomatodo-kallpa .detail-product-stage > img {
  --product-scale: .96;
  --product-y: 5px;
}

#tomatodo-brisa .detail-product-stage > img {
  --product-scale: .78;
  --product-y: 18px;
}

#tomatodo-brisa .detail-product-stage > img[src*="stage-brisa-negro"] {
  --product-scale: .9;
  --product-y: 12px;
}

/* Las vistas con tapa abierta tienen más aire interno en el archivo.
   Se compensan en ambos colores para mantener la misma presencia visual. */
#tomatodo-brisa .detail-product-stage > img[src*="-abierto"] {
  --product-scale: .86;
  --product-y: 14px;
}

#tomatodo-brisa .detail-product-stage > img[src*="stage-brisa-negro-abierto"] {
  --product-scale: .96;
  --product-y: 10px;
}

#tomatodo-brisa .detail-product-stage > img[src*="stage-brisa-cafe-cerrado"],
#tomatodo-brisa .detail-product-stage > img[src*="stage-brisa-negro-cerrado"] {
  --product-scale: .73;
  --product-y: 21px;
}

#tomatodo-brisa .detail-product-stage > img[src*="stage-brisa-negro-cerrado"] {
  --product-scale: .89;
  --product-y: 12px;
}

.product-detail-enhanced .detail-product-stage.is-zoomed > img {
  transform: translate(var(--product-x), var(--product-y)) scale(calc(var(--product-scale) * 1.14)) scaleX(var(--product-x-scale));
  cursor: zoom-out;
}

.enhanced-gallery-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #dedede;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111;
  font-size: 1.15rem;
  cursor: pointer;
  transform: translateY(-50%);
}

.enhanced-gallery-prev { left: 0; }
.enhanced-gallery-next { right: 0; }

.detail-zoom-button {
  position: absolute;
  z-index: 4;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  border: 1px solid #dedede;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.product-detail-enhanced .detail-panel {
  max-width: 520px;
  margin-top: clamp(2.5rem, 6vh, 5.5rem);
  padding: clamp(1.25rem, 2vw, 2.25rem);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.personalize-label {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: .65rem 1rem;
  background: #f1f1f1;
  color: #111;
  font-size: .9rem;
}

.product-detail-enhanced .detail-panel h1 {
  margin-bottom: .8rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 2.7vw, 3rem);
  font-weight: 400;
  letter-spacing: -.04em;
}

.product-detail-enhanced .detail-price-row { margin-bottom: 1.6rem; }
.product-detail-enhanced .detail-price-row strong {
  font-size: clamp(1.8rem, 2.4vw, 2.45rem);
  font-weight: 500;
}

.detail-facts { display: grid; gap: 1rem; margin: 0 0 1.8rem; }
.detail-facts > div {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  column-gap: .7rem;
}
.detail-facts .detail-fact-icon {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #111;
}
.detail-fact-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.detail-facts small { color: #777; font-size: .72rem; }
.detail-facts strong { color: #222; font-size: .95rem; font-weight: 500; }

.detail-size-selector {
  display: grid;
  justify-items: start;
  gap: .65rem;
  margin: 0 0 1.6rem;
}
.detail-size-selector > span {
  color: #222;
  font-size: .76rem;
  font-weight: 500;
}
.detail-size-selector > strong {
  min-width: 82px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: .65rem .9rem;
  border: 1px solid #222;
  color: #222;
  font-size: .9rem;
  font-weight: 500;
  text-transform: uppercase;
}

.product-detail-enhanced .add-cart-button {
  min-height: 52px;
  margin-bottom: .55rem;
  border: 1px solid #333;
  border-radius: 0;
  background: #fff;
  color: #333;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.buy-now-button {
  width: 100%;
  min-height: 52px;
  border: 1px solid #484848;
  background: #484848;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.purchase-reassurance {
  margin: 1.4rem 0 .8rem;
  padding: 1rem 1.15rem;
  border: 1px solid #222;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.25;
}
.purchase-reassurance span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-right: .5rem;
  place-items: center;
  border-radius: 50%;
  background: #c9f3d4;
  color: #17823a;
}
.panel-free-shipping { margin: .65rem 0 0; text-align: center; font-size: .85rem; }
.panel-free-shipping strong, .free-shipping strong { color: #ff3030; }

.product-detail-enhanced .detail-bottom {
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding-bottom: 0;
}

.product-recommendations {
  margin: 5rem calc(-1 * clamp(2rem, 4vw, 5rem)) 0;
  padding: 3.75rem clamp(2rem, 4vw, 5rem) 5rem;
  border-top: 1px solid #e5e5e5;
  scroll-margin-top: 130px;
}
.product-recommendations h2 {
  margin: 0 0 3rem;
  text-align: center;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  font-weight: 400;
}
.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.recommendation-card { color: #111; text-decoration: none; }
.recommendation-card > div {
  position: relative;
  height: clamp(340px, 28vw, 470px);
  display: grid;
  place-items: center;
  padding: clamp(.35rem, .8vw, .8rem);
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.recommendation-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: clamp(.55rem, 1vw, 1rem);
  object-fit: contain;
  transition: transform .3s ease;
}
.recommendation-card:hover img { transform: scale(1.04); }
.recommendation-card[href="#tomatodo-brisa"] img {
  inset: 9%;
  width: 82%;
  height: 82%;
}
.recommendation-card[href="#tomatodo-brisa"]:hover img {
  transform: scale(1.03);
}
.recommendation-card > span:not(.recommendation-swatches), .recommendation-card > strong {
  display: block;
  margin-top: .35rem;
  font-size: .9rem;
  font-weight: 500;
}
.recommendation-card > small {
  display: block;
  margin-top: .3rem;
  color: #6b7280;
  font-size: .78rem;
}
.recommendation-swatches {
  display: flex;
  align-items: center;
  gap: .48rem;
  margin-top: .75rem;
}
.recommendation-swatches i {
  width: 22px;
  height: 22px;
  display: block;
  border: 1px solid rgba(17, 24, 39, .24);
  border-radius: 50%;
  background: var(--recommendation-swatch);
}
.recommendation-swatches i.is-selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #111827;
}

.sumaq-product-footer {
  margin: 0 calc(-1 * clamp(2rem, 4vw, 5rem));
  margin-bottom: -76px;
  padding: 3rem clamp(2rem, 4vw, 5rem) calc(1rem + 76px);
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 1fr auto;
  gap: 2.5rem;
  background: #050505;
  color: #fff;
  min-height: 330px;
}
.footer-brand { font-size: 2.4rem; font-weight: 700; letter-spacing: .08em; }
.sumaq-product-footer > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
.sumaq-product-footer p { margin: .25rem 0; }
.sumaq-product-footer a { color: #fff; text-decoration: none; }
.footer-copy { white-space: nowrap; }
.free-shipping {
  grid-column: 1 / -1;
  align-self: end;
  text-align: center;
  font-size: 1rem;
}

@media (max-width: 980px) {
  .product-detail-enhanced {
    grid-template-columns: 1fr;
    grid-template-areas: "gallery" "panel" "bottom";
    padding-inline: 1rem;
  }
  .product-detail-enhanced .detail-gallery { min-height: 72svh; padding-left: 78px; }
  .detail-thumbnails { top: 60px; width: 68px; }
  .product-detail-enhanced .detail-panel { max-width: none; margin-top: 0; }
  .recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sumaq-product-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .product-detail-enhanced .detail-gallery { min-height: 62svh; padding-left: 0; padding-top: 84px; }
  .detail-thumbnails {
    top: 4px; right: 0; bottom: auto; width: auto; height: 70px;
    flex-direction: row; overflow-x: auto;
  }
  .detail-thumb { width: 58px; flex-basis: 58px; }
  .enhanced-gallery-prev { left: .25rem; }
  .enhanced-gallery-next { right: .25rem; }
  .recommendation-grid, .sumaq-product-footer { grid-template-columns: 1fr; }
  .free-shipping { grid-column: 1; }
}