/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 80:0 Unexpected "<"

**/
<div class="sylor-note note--rose-strong" role="status" aria-live="polite">
  <span class="icon" aria-hidden="true">
    <img src="https://cdn.shopify.com/s/files/1/0772/6330/7090/files/rosa_1_2.png?v=1761001619" alt="">
  </span>
  <div class="txt">
    <span class="lead">
      <strong>Last roses of the season:</strong> We only harvest <strong>twice a year</strong> and there are <strong>very few units left</strong>.
</span><br>
<span class="sub">Get yours now before it sells out again.</span>
  </div>
</div>

<style>
/* ===== Aviso SYLOR (pulso detrás del icono) ===== */
.sylor-note{
  --halo-color: rgba(255, 202, 212, .75);
  --halo-size: 110%;
  --halo-start: 1.00;
  --halo-peak: 1.80;
  --halo-opacity: .80;
  --halo-speed: 1.6s;

  background:#FFFFFF;
  border:1px solid #FFCAD4;
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0;
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  color:inherit;
}

/* Icono */
.sylor-note .icon{ position:relative; display:inline-block; width:16px; height:16px; min-width:16px; min-height:16px; flex:0 0 16px; line-height:0; margin-top:2px; isolation:isolate; }
.sylor-note .icon img{ position:relative; z-index:2; width:100%; height:100%; display:block; object-fit:contain; }

/* Halo detrás del icono */
.sylor-note .icon::after{
  content:""; position:absolute; z-index:1; left:50%; top:50%;
  width:var(--halo-size); height:var(--halo-size);
  transform:translate(-50%,-50%) scale(var(--halo-start));
  border-radius:50%; background:var(--halo-color); opacity:var(--halo-opacity);
  animation:halo-scale var(--halo-speed) ease-out infinite; pointer-events:none;
}

/* Texto + jerarquía */
.sylor-note .txt{ text-align:  center; line-height:1.4; }
.sylor-note .txt .lead{ font-size:15px; font-weight:500; display:inline-block; }
.sylor-note .txt .sub { font-size:14px; color:#444; display:inline-block; margin-top:4px; }

/* Animación */
@keyframes halo-scale{
  0%{ transform:translate(-50%,-50%) scale(var(--halo-start)); opacity:var(--halo-opacity); }
  70%{ transform:translate(-50%,-50%) scale(var(--halo-peak));  opacity:0; }
  100%{ transform:translate(-50%,-50%) scale(var(--halo-start)); opacity:0; }
}

/* Móvil: lead un pelín mayor, sub un paso menor */
@media (max-width:749px){
  .sylor-note{ padding:10px 12px; }
  .sylor-note .icon{ width:18px; height:18px; min-width:18px; min-height:18px; }
  .sylor-note .txt .lead{ font-size:13px; }
  .sylor-note .txt .sub { font-size:11.5px; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .sylor-note .icon::after{
    animation:none; opacity:.35;
    transform:translate(-50%,-50%) scale(calc((var(--halo-start) + var(--halo-peak))/2));
  }
}
</style>