/* -------------------------
   Product desktop (≥1024px)
------------------------- */

body {
  background-color: #f9f9f9;
}

.detalle-page {
  padding-top: 96px;
}

.detalle-layout {
  background-color: white;
  display: grid;
  grid-template-columns: minmax(520px, 1.2fr) minmax(340px, 1fr);
  grid-template-areas: "right left";
  gap: 32px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 0 32px;
  align-items: start;
}

.detalle-left {
  grid-area: left;
  display: block;
  max-height: none;
  overflow: visible;
  padding: 0 32px 0 16px;
}

.detalle-left::-webkit-scrollbar {
  width: 6px;
}

.detalle-left::-webkit-scrollbar-track {
  background: transparent;
}

.detalle-left::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 10px;
}

.detalle-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.detalle-hero {
  margin-top: 0;
}

.detalle-img-wrapper {
  /* background: #f3f3f3; */
  border-radius: 20px;
  padding: 24px;
  max-width: 520px;
  margin: 0 auto;
}

.carousel-container {
  height: 520px;
}

.carousel-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 74px);
  gap: 8px;
  margin-top: 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.carousel-thumbs.is-hidden {
  display: none;
}

.carousel-thumb {
  width: 74px;
  height: 74px;
  padding: 0;
}

.carousel-thumb img {
  object-fit: contain;
}

.carousel-control {
  width: 42px;
  height: 42px;
}

.carousel-control img {
  width: 18px;
  height: 18px;
}

.detalle-variants {
  padding: 0 4px;
  margin-top: -6px;
}

.variant-options {
  gap: 8px;
  --variant-thumb-height: 56px;
  --variant-thumb-max: 96px;
}

.variant-btn {
  width: 56px;
  height: var(--variant-thumb-height, 56px);
}

.presentation-section {
  margin-top: 10px;
}

.custom-select-trigger {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
  width: 100%;
  max-width: 300px;
  border-color: #c5c5c5;
}

.custom-select-wrapper {
  max-width: 300px;
}

.detalle-info {
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.detalle-header .nombre-producto {
  font-size: 21px;
}

.detalle-descripcion {
  font-size: 11px;
  color: #6d6d6d;
  max-width: 650px;
  white-space: pre-line;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.35;
}

.detalle-descripcion-title {
  font-size: 12px;
  color: #4f5358;
  display: inline;
  margin-right: 6px;
}

.detalle-descripcion.is-collapsed {
  position: relative;
}

.detalle-descripcion.is-collapsed::after {
  background: linear-gradient(to bottom, transparent, #f9f9f9);
}

.detalle-header .btn-fav {
  margin-top: 6px;
  width: 36px;
  height: 36px;
}

.detalle-header-actions {
  gap: 10px;
}

.detalle-header-actions .btn-share {
  margin-top: 6px;
  width: 36px;
  height: 36px;
}

.precio,
.precio-oferta {
  font-size: 22px;
}

.precio-original {
  font-size: 14px;
}

.precio-original.tachado {
  font-size: 14px;
}

.variante_name {
  font-size: 12px;
}

.detalle-tabs {
  margin: 12px 0 8px;
}

.detalle-actions {
  margin-bottom: 18px;
}

.btn-outline,
.btn-solid {
  height: 50px;
  font-size: 13px;
}

.detalle-actions {
  justify-content: flex-start;
  margin-bottom: 24px;
  width: 100%;
}

.selected-option {
  color: #828282;
}

.btn-outline,
.btn-solid {
  width: 100%;
  max-width: none;
}

.btn-consultar {
  width: 100%;
  max-width: none;
}

.productos-relacionados {
  max-width: 1360px;
  margin: 24px auto 0;
  padding: 0 5.3rem;
}

.productos-relacionados .productos-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.productos-relacionados .producto-card {
  width: 100%;
  height: auto;
}

.productos-relacionados .producto-img-wrapper {
  width: calc(100% - 20px);
  height: 150px;
  margin: 10px auto 8px;
  overflow: hidden;
}

.productos-relacionados .producto-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.productos-relacionados .producto-footer .precio,
.productos-relacionados .precio-oferta {
  font-size: 13px;
}

.productos-relacionados .precio-original {
  font-size: 11px;
}

@media (min-width: 1200px) {
  .detalle-layout {
    grid-template-columns: minmax(380px, 1fr) minmax(560px, 1.3fr);
  }
}