/* ---------------------------------------------------------------------------
 * La lente — la silueta firma de la etiqueta.
 *
 * Es el barril de dos arcos que en el frasco recorta el blanco sobre el color
 * del SKU. Acá se usa INVERTIDA respecto de la etiqueta: el fondo es blanco y
 * la lente recorta la IMAGEN.
 *
 * Se descartó la versión literal (fondo a todo color, lente blanca calada, el
 * texto adentro) porque el ancho útil de la lente es ~48 % del disponible: en
 * desktop deja el texto en una columna angosta, y en mobile hay que abrirla
 * tanto que deja de leerse como lente.
 *
 * clipPathUnits="objectBoundingBox" ⇒ escala a cualquier caja sin recalcular.
 * ------------------------------------------------------------------------- */
.ari-lens {
  -webkit-clip-path: url(#ari-lens-clip);
          clip-path: url(#ari-lens-clip);
}

/* En mobile el barril se achata: los puntos de control se acercan al borde,
   si no la lente se come el ancho de lectura. */
@media (max-width: 767px) {
  .ari-lens {
    -webkit-clip-path: url(#ari-lens-clip-flat);
            clip-path: url(#ari-lens-clip-flat);
  }
}

/* ---------------------------------------------------------------------------
 * Texturas. Generadas por tools/build-pattern-tiles.py — no editar los SVG.
 *
 * ⚠️ SIEMPRE sobre un background-color. Coliflor-1 y shroom-1 tienen rellenos
 *    #ffffff: sobre la lente blanca desaparecen y quedan como contornos huecos.
 * ------------------------------------------------------------------------- */
.ari-texture-aceitunas,
.ari-texture-encurtidos {
  background-repeat: repeat;
  background-size: 300px 300px;
}

.ari-texture-aceitunas {
  background-image: url('../img/pattern-aceitunas.svg');
}

.ari-texture-encurtidos {
  background-image: url('../img/pattern-encurtidos.svg');
}

/* ---------------------------------------------------------------------------
 * Banda decorativa fina (hoy: overlay de búsqueda).
 *
 * ⚠️ El tile mide 300×300 px. Recortado a una banda de 8–12 px sólo se veía una
 *    TAJADA horizontal de los motivos —pepinos y zanahorias cortados por la
 *    mitad— y se leía como ruido o como un glitch, no como decoración. El owner
 *    lo reportó como "bugged or too thin".
 *
 *    La banda necesita DOS cosas a la vez: algo más de alto, y un tile más chico
 *    para que entren motivos ENTEROS en esa altura. Con sólo subir el alto se
 *    siguen viendo motivos cortados.
 *
 * ⚠️ No toca el background-size de .ari-texture-*: esas clases se usan también
 *    en el bento, la banda del catálogo y la tarjeta de horarios, donde el tile
 *    de 300 px es el correcto.
 * ------------------------------------------------------------------------- */
.ari-texture--band {
  background-size: 100px 100px;
  background-position: center;
}

@media (min-width: 768px) {
  .ari-texture--band { background-size: 120px 120px; }
}