/* ================================================================
   DRASANVI CATALOG — Ficha de Producto
   Scope:   .ficha-de-producto (single-drasanvi_producto.php)
   Tokens:  var(--dsv-*) — definidas en drasanvi-kit.css
   v2.0 · Marzo 2026
   ================================================================

   01. Wrapper & contenedor
   02. Tarjeta hero (imagen + panel derecho)
   03. Galería de imágenes
   04. Panel derecho — layout
   05. Título h1
   06. Descripción corta expandible
   07. Sellos de certificación
   08. SKU / EAN
   09. Botones de acción
   10. Selector de punto de venta (CP)
   11. Compartir en redes
   12. Ficha-body — ingredientes / modo de uso / botanical
   13. Details — datos extra / advertencias (ficha-detail)
   14. Tablas nutricional / cosmética / analítica
   15. Skeleton loaders
   16. Productos relacionados
   17. Responsive
   ================================================================ */


/* ─── 01. WRAPPER ────────────────────────────────────────────── */
/*
 * Extendemos el fondo gris de la ficha a los contenedores
 * de Astra (content-area, entry, article) para que no quede
 * el bloque de producto flotando sobre un fondo blanco.
 */
body.producto #content,
body.producto #primary,
body.producto .site-main,
body.producto .ast-article-post,
body.producto .entry-content {
  background: var(--dsv-bg);
  padding: 0 !important;
  margin: 0 !important;
}

.ficha-de-producto {
  background: var(--dsv-bg);
  padding-bottom: 4rem;
}
.ficha-de-producto > .container {
  padding-top: 1.75rem;
}


/* ─── 02. FICHA HERO — acento superior ───────────────────────── */
.ficha-de-producto .ficha-hero {
  position: relative;
  border-bottom: 1px solid var(--dsv-border);
}

/* Columna imagen — fondo neutro suave */
.ficha-de-producto .ficha-hero > .col-md-6:first-child {
  background: var(--dsv-bg);
}

/* Eliminar separador vertical entre columnas del hero */
.ficha-de-producto .ficha-hero .border-end {
  border-right: none !important;
}


/* ─── 03. GALERÍA ────────────────────────────────────────────── */
.ficha-de-producto .main_image {
  min-height: 420px;
  max-height: 540px;
  padding: 3rem 2.5rem;
  background: transparent;   /* hereda el fondo neutro de la columna */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ficha-de-producto .main_image iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}
.ficha-de-producto .main_image .card-img {
  max-height: 420px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 12px 32px rgba(0,105,90,.10));
}
.ficha-de-producto .main_image .card-img:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 16px 40px rgba(0,105,90,.15));
}

/* Botón zoom */
.ficha-de-producto #zoomIcon {
  position: absolute;
  bottom: .875rem;
  right: .875rem;
  width: 2.125rem;
  height: 2.125rem;
  background: var(--dsv-white);
  border: 1px solid var(--dsv-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .65;
  transition: opacity var(--dsv-ease-fast), box-shadow var(--dsv-ease-fast);
  padding: 0;
  box-shadow: var(--dsv-shadow-sm);
}
.ficha-de-producto #zoomIcon:hover {
  opacity: 1;
  box-shadow: var(--dsv-shadow);
}
.ficha-de-producto #zoomIcon svg {
  width: .825rem;
  height: .825rem;
  fill: var(--dsv-ink-muted);
}

/* Strip de miniaturas */
.ficha-de-producto #thumbnailCarousel {
  border-top: 1px solid var(--dsv-border);
  background: var(--dsv-bg-soft);
  padding: .5rem .75rem .375rem;
}
.ficha-de-producto #thumbnailCarousel .carousel-inner {
  padding: 0;
}
.ficha-de-producto .img-thumbnail-div {
  width: 60px;
  height: 60px;
  margin: .25rem;
  border-radius: var(--dsv-radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color var(--dsv-ease-fast), box-shadow var(--dsv-ease-fast);
  background: var(--dsv-white);
}
.ficha-de-producto .img-thumbnail-div:hover {
  border-color: var(--dsv-primary);
  box-shadow: 0 0 0 2px var(--dsv-primary-xlight);
}
.ficha-de-producto .img-thumbnail-div .img-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px !important;
  border: none !important;
  border-radius: 0;
}
.ficha-de-producto .video-thumbnail {
  position: relative;
}
.ficha-de-producto .video-thumbnail svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

/* Controles del carousel */
.ficha-de-producto #thumbnailCarousel .carousel-control-prev,
.ficha-de-producto #thumbnailCarousel .carousel-control-next {
  width: 1.5rem;
  opacity: .6;
  border-radius: 0 !important;
}
.ficha-de-producto #thumbnailCarousel .carousel-control-prev:hover,
.ficha-de-producto #thumbnailCarousel .carousel-control-next:hover {
  opacity: 1;
}
.ficha-de-producto #thumbnailCarousel .carousel-control-prev-icon,
.ficha-de-producto #thumbnailCarousel .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
  filter: invert(1) brightness(.4);
}


/* ─── 04. PANEL DERECHO — LAYOUT ─────────────────────────────── */
.ficha-de-producto .right-side {
  padding: 2.5rem 2.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  background: var(--dsv-white);
}


/* ─── 05. TÍTULO h1 ──────────────────────────────────────────── */
.ficha-de-producto h1 {
  font-family: var(--dsv-font-heading) !important;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 600;
  color: var(--dsv-ink);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.025em;
}
/* Etiqueta de tipo/línea de producto */
.ficha-de-producto .product-line-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--dsv-font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dsv-primary-dark);
  background: var(--dsv-primary-xlight);
  border-radius: var(--dsv-radius-full);
  padding: .2em .75em;
  margin-bottom: .25rem;
  width: fit-content;
}


/* ─── 06. DESCRIPCIÓN CORTA EXPANDIBLE ───────────────────────── */
.ficha-de-producto .desc-short-wrap {
  position: relative;
}
.ficha-de-producto .desc-short {
  max-height: 4.8em;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
  font-family: var(--dsv-font-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--dsv-ink-muted);
}
.ficha-de-producto .desc-short.expanded {
  max-height: 80em;
}
.ficha-de-producto .desc-full {
  font-family: var(--dsv-font-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--dsv-ink-muted);
}
.ficha-de-producto .desc-full p {
  margin: 0 0 .5em;
}
.ficha-de-producto .desc-short p {
  margin: 0 0 .5em;
}
.ficha-de-producto .desc-short p:last-child {
  margin-bottom: 0;
}

/* Gradiente fade-out inferior */
.ficha-de-producto .desc-short-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.25em;
  background: linear-gradient(transparent, var(--dsv-white));
  pointer-events: none;
  transition: opacity .25s ease;
}
.ficha-de-producto .desc-short-fade.hidden {
  opacity: 0;
}

/* Botón «Leer más / Leer menos» */
.ficha-de-producto .desc-short-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  padding: .25rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--dsv-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--dsv-primary);
  cursor: pointer;
  letter-spacing: .01em;
  transition: color var(--dsv-ease-fast);
}
.ficha-de-producto .desc-short-btn:hover,
.ficha-de-producto .desc-short-btn:focus {
  background: none !important;
  box-shadow: none !important;
  color: var(--dsv-primary);
}
.ficha-de-producto .desc-short-btn svg {
  width: .75em;
  height: .75em;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.ficha-de-producto .desc-short-btn.expanded svg {
  transform: rotate(180deg);
}

/* Fila: Leer más + desplegables en línea */
.ficha-de-producto .desc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .125rem 1.25rem;
  padding-top: .125rem;
}
.ficha-de-producto .desc-actions .desc-short-btn {
  flex: none;
}
.ficha-de-producto .desc-actions .ficha-detail {
  margin-top: 0;
  flex: none;
}


/* ─── 07. SELLOS DE CERTIFICACIÓN ────────────────────────────── */
.ficha-de-producto .altomax {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
}
.ficha-de-producto .altomax .col-3 {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  text-align: center;
}
.ficha-de-producto .altomax img {
  height: 46px;
  width: auto;
  display: block;
}
.ficha-de-producto .altomax .ecotext {
  font-family: var(--dsv-font-body);
  font-size: .6rem;
  font-weight: 700;
  color: var(--dsv-primary-dark);
  text-align: center;
  margin-top: .2rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ─── 08. SKU / EAN ──────────────────────────────────────────── */
.ficha-de-producto .skus {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ficha-de-producto .skus small {
  font-family: var(--dsv-font-body);
  font-size: .75rem;
  color: var(--dsv-ink-subtle);
  background: var(--dsv-bg-soft);
  border: 1px solid var(--dsv-border);
  border-radius: var(--dsv-radius-sm);
  padding: .15em .6em;
  white-space: nowrap;
  display: inline-block;
}


/* ─── 09. BOTONES DE ACCIÓN ──────────────────────────────────── */
.ficha-de-producto .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  padding: .125rem 0;
}

/* Reset base */
.ficha-de-producto .buttons .btn,
.ficha-de-producto .buttons button {
  font-family: var(--dsv-font-body) !important;
  font-size: .875rem !important;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--dsv-radius-full) !important;
  padding: .55rem 1.375rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  transition: background var(--dsv-ease-fast), color var(--dsv-ease-fast),
              border-color var(--dsv-ease-fast), box-shadow var(--dsv-ease-fast);
  text-decoration: none;
}

/* Ficha técnica — outline verde */
.ficha-de-producto .buttons #ficha {
  background: transparent !important;
  border: 2px solid var(--dsv-primary) !important;
  color: var(--dsv-primary) !important;
}
.ficha-de-producto .buttons #ficha svg path { fill: var(--dsv-primary); }
.ficha-de-producto .buttons #ficha:hover {
  background: var(--dsv-primary) !important;
  color: var(--dsv-white) !important;
  box-shadow: 0 4px 14px rgba(0, 105, 90, .2) !important;
}
.ficha-de-producto .buttons #ficha:hover svg path { fill: var(--dsv-white); }

/* Dónde comprar — sólido verde */
.ficha-de-producto .buttons .donde,
.ficha-de-producto .buttons #vercp {
  background: var(--dsv-primary) !important;
  border: 2px solid var(--dsv-primary) !important;
  color: var(--dsv-white) !important;
}
.ficha-de-producto .buttons .donde svg path,
.ficha-de-producto .buttons #vercp svg path { fill: var(--dsv-white); }
.ficha-de-producto .buttons .donde:hover,
.ficha-de-producto .buttons #vercp:hover {
  background: var(--dsv-primary-dark) !important;
  border-color: var(--dsv-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(0, 105, 90, .28) !important;
}

/* Icono SVG dentro de botones */
.ficha-de-producto .buttons svg {
  width: .875em;
  height: .875em;
  flex-shrink: 0;
}


/* ─── 10. SELECTOR DE PUNTO DE VENTA ─────────────────────────── */
.ficha-de-producto #cp-selector {
  background: var(--dsv-bg-soft);
  border: 1px solid var(--dsv-border);
  border-radius: var(--dsv-radius-md);
  padding: 1rem 1.25rem;
  font-family: var(--dsv-font-body);
  font-size: .875rem;
}
.ficha-de-producto #cp-selector .form-control {
  border-color: var(--dsv-border);
  border-radius: var(--dsv-radius) !important;
  font-family: var(--dsv-font-body);
  font-size: .875rem;
}
.ficha-de-producto #cp-selector .form-control:focus {
  border-color: var(--dsv-primary);
  box-shadow: 0 0 0 3px rgba(0, 105, 90, .12);
  outline: none;
}
.ficha-de-producto #cp-selector #use-location {
  background: var(--dsv-primary);
  border-color: var(--dsv-primary);
  border-radius: var(--dsv-radius-full) !important;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--dsv-white);
}
.ficha-de-producto #cp-selector #use-location:hover {
  background: var(--dsv-primary-dark);
  border-color: var(--dsv-primary-dark);
}
.ficha-de-producto #cp-selector #resultado {
  font-size: .8125rem;
  color: var(--dsv-ink-muted);
  margin-top: .375rem;
}
.ficha-de-producto #cp-selector #close-cp-selector {
  border-color: var(--dsv-border);
  color: var(--dsv-ink-muted);
  font-size: .8125rem;
  border-radius: var(--dsv-radius-full) !important;
}
.ficha-de-producto #cp-selector #close-cp-selector:hover {
  background: var(--dsv-bg-soft);
  border-color: var(--dsv-ink-subtle);
}


/* ─── 11. COMPARTIR EN REDES ─────────────────────────────────── */
.ficha-de-producto .compartir {
  margin-top: auto;
  padding-top: .875rem;
  font-family: var(--dsv-font-body);
  font-size: .8125rem;
  color: var(--dsv-ink-subtle);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.ficha-de-producto .compartir b {
  color: var(--dsv-ink-muted);
  font-weight: 600;
  margin-right: .125rem;
}
.ficha-de-producto .compartir .icono-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--dsv-bg-soft);
  border: 1px solid var(--dsv-border);
  transition: background var(--dsv-ease-fast), border-color var(--dsv-ease-fast);
  text-decoration: none !important;
}
.ficha-de-producto .compartir .icono-s:hover {
  background: var(--dsv-primary-xlight);
  border-color: var(--dsv-primary);
}
.ficha-de-producto .compartir svg {
  width: .825em;
  height: .825em;
  fill: var(--dsv-ink-muted);
}
.ficha-de-producto .compartir .icono-s:hover svg {
  fill: var(--dsv-primary);
}


/* ─── 12. FICHA-BODY — ingredientes / modo de uso ────────────── */
.ficha-de-producto .ficha-body {
  background: var(--dsv-white);
}
.ficha-de-producto .ficha-body > .col-md-6,
.ficha-de-producto .ficha-body > [class*=" col-"] {
  padding: 2.5rem 2.75rem 3rem;
}
/* Sin separador vertical entre columnas del cuerpo */
.ficha-de-producto .ficha-body .border-end {
  border-right: none !important;
}
/* Divisor sutil entre columnas vía sombra derecha */
.ficha-de-producto .ficha-body .ficha-ingredients {
  border-right: 1px solid var(--dsv-border);
}

/* Tipografía común en el cuerpo */
.ficha-de-producto .ficha-body p,
.ficha-de-producto .ficha-body li {
  font-family: var(--dsv-font-body);
  font-size: .9375rem;
  color: var(--dsv-ink-muted);
  line-height: 1.75;
}
.ficha-de-producto .ficha-body ul,
.ficha-de-producto .ficha-body ol {
  padding-left: 1.25rem;
}
.ficha-de-producto .ficha-body h2 {
  font-family: var(--dsv-font-heading) !important;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dsv-ink);
  margin: 0 0 .875rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--dsv-primary-xlight);
  letter-spacing: -.01em;
}
.ficha-de-producto .ficha-body h2:not(:first-child) {
  margin-top: 1.75rem;
}
.ficha-de-producto .ficha-body h3 {
  font-family: var(--dsv-font-heading) !important;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--dsv-ink-muted);
  margin: 1.25rem 0 .375rem;
}

/* Texto en 2 columnas para ingredientes largos */
.ficha-de-producto .ingredientes.two-cols p,
.ficha-de-producto .ingredientes.two-cols li {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid var(--dsv-border);
}

/* Columna modo de uso / presentación */
.ficha-de-producto .ficha-usage p,
.ficha-de-producto .ficha-usage li {
  font-size: .9375rem;
  color: var(--dsv-ink-muted);
}

/* Botanical: datos extra en columna completa */
.ficha-de-producto .ficha-botanical {
  padding: 2rem;
}
.ficha-de-producto .ficha-botanical h2 {
  font-family: var(--dsv-font-heading) !important;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dsv-ink);
  margin: 0 0 .875rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--dsv-primary-xlight);
}


/* ─── 13. DETAILS — DATOS EXTRA / ADVERTENCIAS ──────────────── */
.ficha-de-producto details.ficha-detail {
  border: none;
  margin-top: .25rem;
}
.ficha-de-producto .ficha-detail-summary {
  font-family: var(--dsv-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--dsv-ink-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .35em;
  padding: .375rem 0;
  user-select: none;
}
.ficha-de-producto .ficha-detail-summary::-webkit-details-marker {
  display: none;
}
.ficha-de-producto .ficha-detail-summary svg {
  width: .65em;
  height: .65em;
  flex-shrink: 0;
  transition: transform .25s ease;
  fill: var(--dsv-ink-muted);
}
.ficha-de-producto details[open] .ficha-detail-summary svg {
  transform: rotate(180deg);
}
.ficha-de-producto .ficha-detail-body {
  font-family: var(--dsv-font-body);
  font-size: .875rem;
  color: var(--dsv-ink-muted);
  line-height: 1.7;
  padding: .375rem 0 .75rem;
}
.ficha-de-producto .ficha-detail-body p:last-child {
  margin-bottom: 0;
}
.ficha-de-producto .ficha-detail-body h1,
.ficha-de-producto .ficha-detail-body h2,
.ficha-de-producto .ficha-detail-body h3,
.ficha-de-producto .ficha-detail-body h4 {
  font-size: .875rem;
  font-weight: 600;
  color: var(--dsv-ink);
  margin: .5rem 0 .2rem;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: 0;
}


/* ─── 14. TABLAS ─────────────────────────────────────────────── */
.ficha-de-producto .ficha-tables {
  padding: 2rem 2rem 1.5rem;
  background: #fff;
  border-radius: var(--dsv-radius);
}
.ficha-de-producto .ficha-tables h2 {
  font-family: var(--dsv-font-heading) !important;
  font-size: 1.125rem;
  color: var(--dsv-ink);
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--dsv-primary-xlight);
  letter-spacing: -.01em;
}

/* Tabla base */
.ficha-de-producto table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dsv-font-body);
  font-size: .875rem;
  color: var(--dsv-ink-muted);
  margin-bottom: 2rem;
  border-radius: var(--dsv-radius);
  overflow: hidden;
}
.ficha-de-producto table thead th {
  background: var(--dsv-primary);
  color: var(--dsv-white);
  font-size: .75rem;
  font-weight: 600;
  text-align: left;
  padding: .625rem .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ficha-de-producto table tbody tr {
  transition: background var(--dsv-ease-fast);
}
.ficha-de-producto table tbody tr:nth-child(even) {
  background: var(--dsv-bg-soft);
}
.ficha-de-producto table tbody tr:hover {
  background: var(--dsv-primary-xlight);
}
.ficha-de-producto table td,
.ficha-de-producto table th {
  padding: .5rem .875rem;
  border-bottom: 1px solid var(--dsv-border);
  vertical-align: middle;
}
.ficha-de-producto table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--dsv-ink);
}
.ficha-de-producto table tbody tr:last-child td {
  border-bottom: none;
}


/* ─── 15. SKELETON LOADERS ───────────────────────────────────── */
.skeleton-line {
  height: .825rem;
  background: linear-gradient(
    90deg,
    var(--dsv-bg-soft) 25%,
    #dde3e0             50%,
    var(--dsv-bg-soft) 75%
  );
  background-size: 200% 100%;
  animation: dsv-product-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--dsv-radius-sm);
  margin-bottom: .625rem;
  width: 100%;
}
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-85 { width: 85%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.skeleton-title {
  height: 1.375rem;
  width: 60%;
  margin-bottom: .875rem;
}
@keyframes dsv-product-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}


/* ─── 16. PRODUCTOS RELACIONADOS ─────────────────────────────── */
.productos-relacionados {
  background: var(--dsv-bg);
  padding: 3rem 0 4rem;
  border-top: 1px solid var(--dsv-border);
}
.productos-relacionados h2 {
  font-family: var(--dsv-font-heading) !important;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--dsv-ink);
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: -.02em;
}
/* Etiqueta de sección — estilo manual de marca */
.productos-relacionados .section-label {
  font-family: var(--dsv-font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dsv-primary);
  text-align: center;
  margin-bottom: .5rem;
}
.productos-relacionados .card {
  background: var(--dsv-white) !important;
  border: none !important;
  border-radius: var(--dsv-radius-md) !important;
  overflow: hidden;
  transition: transform var(--dsv-ease), box-shadow var(--dsv-ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.productos-relacionados .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,105,90,.12) !important;
}
.productos-relacionados .card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 1.25rem;
  background: var(--dsv-bg);
  transition: background var(--dsv-ease);
}
.productos-relacionados .card:hover .card-img-top {
  background: var(--dsv-primary-xlight);
}
.productos-relacionados .card-text {
  font-family: var(--dsv-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--dsv-ink);
  line-height: 1.35;
}


/* ─── 17. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .ficha-de-producto .main_image {
    min-height: 280px;
    max-height: 340px;
    padding: 1.5rem;
  }
  .ficha-de-producto .main_image .card-img {
    max-height: 280px;
    filter: drop-shadow(0 6px 16px rgba(0,105,90,.10));
  }
  .ficha-de-producto .right-side {
    padding: 1.5rem 1.25rem 1.25rem;
    gap: .75rem;
    border-top: 1px solid var(--dsv-border);
  }
  .ficha-de-producto h1 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  .ficha-de-producto .ficha-hero > .col-md-6:first-child {
    background: var(--dsv-bg);
  }
  .ficha-de-producto .buttons {
    flex-direction: column;
  }
  .ficha-de-producto .buttons .btn,
  .ficha-de-producto .buttons button {
    width: 100%;
    justify-content: center;
  }
  .ficha-de-producto .ficha-body .ficha-ingredients {
    border-right: none;
    border-bottom: 1px solid var(--dsv-border);
  }
  .ficha-de-producto .ficha-body > .col-md-6,
  .ficha-de-producto .ficha-body > [class*=" col-"] {
    padding: 1.75rem 1.25rem 2rem;
  }
  .ficha-de-producto .ingredientes.two-cols p,
  .ficha-de-producto .ingredientes.two-cols li {
    column-count: 1;
    column-rule: none;
  }
  .ficha-de-producto .compartir {
    flex-wrap: wrap;
  }
}
