/*
Theme Name: Color Mexique
Theme URI: https://example.com/color-mexique
Author: Tu Nombre
Author URI: https://example.com
Description: Un tema moderno FSE con Tailwind CSS y soporte para WooCommerce
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: color-mexique
Tags: block-patterns, block-styles, custom-colors, e-commerce, full-site-editing, template-editing, wide-blocks, accessibility-ready
*/

.wp-block-group {
  margin-bottom: 2rem;
}

/* Alineación de bloques anchos y completos */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: 100%;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Evita que la imagen del producto se desborde */
.lupa-container img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Ajuste específico para que las tarjetas no crezcan infinito
.group.flex-col {
  max-width: 180px; /* O el ancho que prefieras para cada tarjeta */
  /* margin-left: auto;
  margin-right: auto;
} */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.input {
  @apply w-full bg-zinc-50 dark:bg-black/50 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 text-sm;
}

.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-xl font-bold;
}

.header-logo {
  height: 7rem;
  padding-top: 2rem;
}

.footer-logo {
  height: 7rem;
  padding-top: 2rem;
}

.list-none {
  list-style: none;
}

.esquinas-recortadas {
    --r: 20px; /* Radio del recorte */
    background: #6f1d38ae; /* Tu color vino */
    mask: radial-gradient(var(--r) at var(--r) var(--r),#0000 98%,#000) calc(-1*var(--r)) calc(-1*var(--r));
    /* Esto crea el efecto de que las esquinas han sido perforadas */
}