/* Tonalidades incorporadas directamente al contenido de cada tarro. */
.honey-collection [data-honey-tone] img.honey-direct-tone,
.honey-showcase [data-honey-tone] img.honey-direct-tone {
  filter:
    brightness(var(--honey-hover-brightness,1))
    contrast(var(--honey-hover-contrast,1))
    drop-shadow(0 0 .9px rgba(0,0,0,.96))
    drop-shadow(0 24px 20px rgba(0,0,0,.66));
  transition:filter .45s ease;
  -webkit-mask-image:
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png'),
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png'),
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png'),
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png');
  mask-image:
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png'),
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png'),
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png'),
    url('../imagenes/productos/miel/miel-furia-azahar-transparente-v1.png');
  -webkit-mask-size:contain,contain,contain,contain;
  mask-size:contain,contain,contain,contain;
  -webkit-mask-position:calc(50% - 2px) center,calc(50% + 2px) center,center calc(50% - 2px),center calc(50% + 2px);
  mask-position:calc(50% - 2px) center,calc(50% + 2px) center,center calc(50% - 2px),center calc(50% + 2px);
  -webkit-mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  mask-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  -webkit-mask-composite:source-in,source-in,source-in;
  mask-composite:intersect,intersect,intersect;
}
.honey-collection [data-honey-tone]:hover,
.honey-collection [data-honey-tone]:focus-within,
.honey-showcase [data-honey-tone]:hover,
.honey-showcase [data-honey-tone]:focus-visible {
  --honey-hover-brightness:1.08;
  --honey-hover-contrast:1.025;
}

/* Flores: imagen aprobada íntegra; conserva el marco de producto y compensa su margen negro. */
.honey-jar[data-honey-tone="flores"],
.honey-product[data-honey-tone="flores"] {
  mix-blend-mode: normal;
}
[data-honey-tone="flores"] img.honey-flores-approved,
[data-variant-choice="flores"] img.honey-flores-approved {
  pointer-events: none;
  --honey-flores-scale: 1.18;
  /* Margen inferior real: Flores 18.25%; máscara común 6.41%, con su recorte de 2px.
     Las proporciones del lienzo mantienen la compensación al variar el ancho/alto. */
  translate: 4.6% calc(min(100%, 117.3575cqw) * .1825 * var(--honey-flores-scale) - min(100%, 106.6722cqw) * .0641 - 2px);
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-fit: contain;
  mix-blend-mode: normal;
  scale: var(--honey-flores-scale);
}
@media (min-width: 1025px) {
  .honey-showcase [data-honey-tone="flores"] img.honey-flores-approved { --honey-flores-scale: 1.3; }
}

/* Máscara de presentación propia: retira solo el margen negro exterior del PNG aprobado. */
[data-honey-tone="flores"] img.honey-flores-approved,
[data-variant-choice="flores"] img.honey-flores-approved {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1158 1359'%3E%3Cpath fill='white' d='M480 168H608L744 184 794 204 820 232 830 248V326L810 370 866 400 890 430V1064L866 1085 810 1110 715 1124H330L235 1105 180 1080 160 1060V430L184 406 246 376 224 322V248L254 216 300 191 380 174Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1158 1359'%3E%3Cpath fill='white' d='M480 168H608L744 184 794 204 820 232 830 248V326L810 370 866 400 890 430V1064L866 1085 810 1110 715 1124H330L235 1105 180 1080 160 1060V430L184 406 246 376 224 322V248L254 216 300 191 380 174Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Línea de base compartida: el marco mantiene su tamaño y el producto se apoya abajo.
   cqw mide la columna, no el viewport. Flores compensa únicamente el margen de su PNG. */
.honey-showcase [data-honey-tone],
.honey-collection .honey-product[data-honey-tone] {
  container-type: inline-size;
}
.honey-collection .honey-jar[data-honey-tone="flores"] img.honey-flores-approved {
  translate: 4.6% calc(18.25% * var(--honey-flores-scale) - 5.8265% - 2px);
}
:is(.honey-collection, .honey-showcase) [data-honey-tone] img.honey-direct-tone,
:is(.honey-collection, .honey-showcase) [data-honey-tone] img.honey-flores-approved {
  object-position: center bottom;
  transform-origin: center bottom;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}
:is(.honey-collection, .honey-showcase) [data-honey-tone] img.honey-direct-tone:not(.honey-flores-approved) {
  -webkit-mask-position: calc(50% - 2px) bottom, calc(50% + 2px) bottom, center calc(100% - 2px), center calc(100% + 2px);
  mask-position: calc(50% - 2px) bottom, calc(50% + 2px) bottom, center calc(100% - 2px), center calc(100% + 2px);
}