/* ============================================================================
   Kira Mundo Mascotas — Skin de la tienda
   Se carga DESPUÉS de styles.css (la base del storefront vanilla) y solo
   reescribe lo visual. Nunca toca estructura, estados ni lógica del contrato.

   Orden: 1) estructura 2) cabecera/nav 3) hero 4) categorías 5) filtros y
   catálogo 6) tarjetas 7) carrito/checkout 8) pie 9) responsive y movimiento.

   Todos los selectores van prefijados con html[data-brand='kira'] para ganarle
   a la base sin !important (reservado a los tokens de contrato).
   ========================================================================== */

/* --- 1. Estructura y decoración general ---------------------------------- */

html[data-brand='kira'] body {
  /* Halos suaves de la paleta: profundidad sin imágenes ni iconos nuevos. */
  background-image:
    radial-gradient(circle at 8% 0%, rgba(255, 155, 80, 0.16) 0, rgba(255, 155, 80, 0) 38%),
    radial-gradient(circle at 96% 12%, rgba(84, 35, 111, 0.08) 0, rgba(84, 35, 111, 0) 32%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-brand='kira'] .app {
  /* Se conserva el layout full-width de la base (28px de margen lateral). */
  width: 100%;
}

/* --- 2. Cabecera y navegación -------------------------------------------- */

/* Ojo: la base deja .site-header en position: sticky (top: 0). No se toca la
   posición, solo la pintura; así el header sigue pegándose al hacer scroll. */
html[data-brand='kira'] .site-header {
  background: var(--kira-white);
  border-bottom: 0;
  box-shadow: 0 6px 22px rgba(84, 35, 111, 0.06);
}

/* Firma de marca: filete naranja -> morado bajo la cabecera. */
html[data-brand='kira'] .site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kira-orange) 0%, var(--kira-orange) 42%, var(--kira-purple) 100%);
  pointer-events: none;
}

html[data-brand='kira'] .header-inner {
  padding: 14px 26px;
  gap: 22px;
}

html[data-brand='kira'] .brand-name {
  color: var(--kira-purple);
  font-family: var(--kira-font-display);
  font-weight: 400;
  font-size: 1.16rem;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

html[data-brand='kira'] .brand-tagline {
  color: var(--kira-muted);
  font-weight: 500;
}

/* Respaldo del logotipo: monograma morado con anillo naranja. */
html[data-brand='kira'] .brand-fallback {
  background: var(--kira-purple);
  color: var(--kira-white);
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--kira-orange-soft), 0 6px 14px rgba(84, 35, 111, 0.18);
  font-family: var(--kira-font-display);
  font-weight: 400;
}

html[data-brand='kira'] .header-search input {
  height: 44px;
  border: 1px solid var(--kira-line);
  border-radius: 999px;
  background: var(--kira-cream);
  color: var(--kira-purple-ink);
  font-family: var(--kira-font-body);
  font-weight: 500;
}

html[data-brand='kira'] .header-search input::placeholder {
  color: var(--kira-muted);
  font-weight: 500;
}

html[data-brand='kira'] .header-search input:focus {
  border-color: var(--kira-orange);
  background: var(--kira-white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kira-orange) 26%, transparent);
}

html[data-brand='kira'] .header-search svg {
  color: var(--kira-purple);
}

html[data-brand='kira'] .header-action,
html[data-brand='kira'] .mobile-menu-button {
  border-radius: 999px;
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .header-action:hover,
html[data-brand='kira'] .mobile-menu-button:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

/* El botón de carrito es el único bloque sólido de la cabecera. */
html[data-brand='kira'] .cart-button {
  background: var(--kira-purple);
  color: var(--kira-white);
  box-shadow: 0 8px 18px rgba(84, 35, 111, 0.22);
}

html[data-brand='kira'] .cart-button:hover {
  background: var(--kira-purple-dark);
  color: var(--kira-white);
}

html[data-brand='kira'] .cart-count {
  background: var(--kira-orange);
  color: var(--kira-purple);
  font-weight: 800;
}

html[data-brand='kira'] .account-menu {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius-md);
  background: var(--kira-white);
  box-shadow: var(--kira-shadow);
}

html[data-brand='kira'] .account-menu button,
html[data-brand='kira'] .account-menu a {
  border-radius: var(--kira-radius-sm);
  color: var(--kira-purple-ink);
  font-weight: 600;
}

html[data-brand='kira'] .account-menu button:hover,
html[data-brand='kira'] .account-menu a:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .nav-bar {
  border-top: 1px solid var(--kira-line);
  background: var(--kira-white);
}

html[data-brand='kira'] .nav-inner {
  min-height: 52px;
  padding: 0 26px;
}

html[data-brand='kira'] .nav-item {
  border-radius: 999px;
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .nav-item:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

/* Activo: pastilla naranja con texto morado (5.4:1, AA). */
html[data-brand='kira'] .nav-item.is-active {
  background: var(--kira-orange);
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .nav-item.is-demo {
  color: var(--kira-muted);
}

html[data-brand='kira'] .nav-badge {
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .nav-badge-icon {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

/* --- 3. Hero / carrusel -------------------------------------------------- */

html[data-brand='kira'] .hero,
html[data-brand='kira'] .hero.is-carousel {
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.72) 0, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 92% 88%, rgba(255, 155, 80, 0.32) 0, rgba(255, 155, 80, 0) 44%),
    linear-gradient(126deg, #fbe7d8 0%, #fdf5ee 46%, #f0e4f6 100%);
  box-shadow: var(--kira-shadow);
}

html[data-brand='kira'] .hero h1 {
  color: var(--kira-purple);
  font-family: var(--kira-font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
}

html[data-brand='kira'] .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kira-purple);
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* El acento naranja va como guía gráfica, nunca como color de texto
   (naranja sobre crema no alcanza AA). */
html[data-brand='kira'] .hero-eyebrow::before {
  content: '';
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--kira-orange);
}

html[data-brand='kira'] .hero-subtitle {
  color: var(--kira-purple-ink);
  font-size: 0.95rem !important;
  font-weight: 500;
}

html[data-brand='kira'] .hero-cta {
  border-radius: 999px;
  background: var(--kira-purple);
  color: var(--kira-white);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(84, 35, 111, 0.24);
}

html[data-brand='kira'] .hero-cta:hover {
  background: var(--kira-purple-dark);
}

html[data-brand='kira'] .hero-slide-empty {
  color: color-mix(in srgb, var(--kira-purple) 30%, white);
  background:
    radial-gradient(circle at 70% 42%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 32%),
    linear-gradient(135deg, #fbe9db, #f2e6f7);
}

html[data-brand='kira'] .hero-corner-paw,
html[data-brand='kira'] .hero-paw-one,
html[data-brand='kira'] .hero-paw-two {
  color: var(--kira-orange);
  opacity: 0.3;
}

html[data-brand='kira'] .hero-arrow {
  border-color: var(--kira-line);
  background: var(--kira-white);
  color: var(--kira-purple);
}

html[data-brand='kira'] .hero-arrow:hover {
  background: var(--kira-orange);
  color: var(--kira-purple);
}

html[data-brand='kira'] .hero-dot {
  background: rgba(84, 35, 111, 0.22);
}

html[data-brand='kira'] .hero-dot.is-active {
  background: var(--kira-purple);
}

html[data-brand='kira'] .hero.is-carousel .hero-controls {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(84, 35, 111, 0.2);
}

html[data-brand='kira'] .hero.is-carousel .hero-arrow:hover {
  background: var(--kira-orange);
  color: var(--kira-purple);
}

html[data-brand='kira'] .hero.is-carousel .hero-dot {
  background: color-mix(in srgb, var(--kira-purple) 26%, white);
}

html[data-brand='kira'] .hero.is-carousel .hero-dot.is-active {
  background: var(--kira-purple);
}

html[data-brand='kira'] .hero-slide-link:focus-visible {
  outline-color: var(--kira-purple);
}

/* --- 4. Categorías ------------------------------------------------------- */

html[data-brand='kira'] .category-strip-wrap {
  margin: 22px 0 26px;
}

html[data-brand='kira'] .category-circle {
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .category-icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--kira-line);
  background: var(--kira-white);
  color: var(--kira-purple);
  box-shadow: var(--kira-shadow-soft);
}

html[data-brand='kira'] .category-circle:hover .category-icon {
  border-color: var(--kira-orange);
  background: var(--kira-orange-mist);
  transform: translateY(-2px);
}

/* Activa: círculo naranja con icono morado. */
html[data-brand='kira'] .category-circle.is-active .category-icon {
  border-color: var(--kira-orange);
  background: var(--kira-orange);
  color: var(--kira-purple);
  box-shadow: 0 8px 18px rgba(255, 155, 80, 0.36);
}

html[data-brand='kira'] .category-circle.is-active .category-label {
  color: var(--kira-purple);
  font-weight: 700;
}

/* --- 5. Filtros y barra de catálogo -------------------------------------- */

html[data-brand='kira'] .filters-panel {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius);
  background: var(--kira-white);
  box-shadow: var(--kira-shadow-soft);
}

html[data-brand='kira'] .filters-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kira-line);
}

html[data-brand='kira'] .filters-header h2 {
  color: var(--kira-purple);
  font-weight: 700;
  letter-spacing: -0.01em;
}

html[data-brand='kira'] .clear-filters {
  border-radius: 999px;
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .clear-filters:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .filter-close {
  border-radius: 999px;
  background: var(--kira-cream);
  color: var(--kira-purple);
}

html[data-brand='kira'] .filter-section {
  border-top: 1px solid var(--kira-line);
}

html[data-brand='kira'] .filter-title {
  color: var(--kira-purple);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html[data-brand='kira'] .filter-option {
  border-radius: var(--kira-radius-sm);
  color: var(--kira-purple-ink);
  font-weight: 500;
}

html[data-brand='kira'] .filter-option:hover {
  background: var(--kira-orange-mist);
}

html[data-brand='kira'] .filter-option input {
  accent-color: var(--kira-orange);
}

html[data-brand='kira'] .filter-count {
  color: var(--kira-muted);
}

html[data-brand='kira'] .price-field {
  color: var(--kira-muted);
  font-weight: 600;
}

html[data-brand='kira'] .price-field input,
html[data-brand='kira'] .sort-select,
html[data-brand='kira'] .search-input {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius-sm);
  background: var(--kira-cream);
  color: var(--kira-purple-ink);
  font-family: var(--kira-font-body);
}

html[data-brand='kira'] .price-field input:focus,
html[data-brand='kira'] .sort-select:focus,
html[data-brand='kira'] .search-input:focus {
  border-color: var(--kira-orange);
  background: var(--kira-white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kira-orange) 22%, transparent);
}

/* Insignias de confianza: fondo crema, texto morado, icono naranja. */
html[data-brand='kira'] .filter-badge {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius-md);
  background: var(--kira-cream);
  color: var(--kira-purple-ink);
}

html[data-brand='kira'] .filter-badge-icon {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .filter-badge strong {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .filter-badge small {
  color: var(--kira-muted);
}

html[data-brand='kira'] .catalog-count,
html[data-brand='kira'] .sort-control {
  color: var(--kira-purple-ink);
  font-weight: 600;
}

html[data-brand='kira'] .open-filters-button {
  border: 1px solid var(--kira-purple);
  border-radius: 999px;
  background: var(--kira-white);
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .open-filters-button:hover {
  background: var(--kira-purple);
  color: var(--kira-white);
}

html[data-brand='kira'] .view-toggle {
  border: 1px solid var(--kira-line);
  border-radius: 999px;
  background: var(--kira-white);
}

html[data-brand='kira'] .view-button {
  border-radius: 999px;
  color: var(--kira-muted);
}

html[data-brand='kira'] .view-button:hover {
  background: var(--kira-orange-mist);
  color: var(--kira-purple);
}

html[data-brand='kira'] .view-button.is-active {
  background: var(--kira-purple);
  color: var(--kira-white);
}

/* --- 6. Tarjetas de producto --------------------------------------------- */

html[data-brand='kira'] .product-card {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius);
  background: var(--kira-white);
  box-shadow: var(--kira-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html[data-brand='kira'] .product-card:hover {
  border-color: var(--kira-orange);
  box-shadow: 0 18px 36px rgba(84, 35, 111, 0.14);
  transform: translateY(-3px);
}

html[data-brand='kira'] .product-media {
  background: var(--kira-orange-mist);
}

html[data-brand='kira'] .product-media img {
  padding: 12px;
}

html[data-brand='kira'] .product-fallback {
  color: var(--kira-purple);
  opacity: 0.42;
}

/* Etiquetas sobre la foto: naranja + morado (nunca blanco sobre naranja). */
html[data-brand='kira'] .product-badge {
  border-radius: 999px;
  background: var(--kira-orange);
  color: var(--kira-purple);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(84, 35, 111, 0.14);
}

html[data-brand='kira'] .product-badge.is-danger {
  background: var(--kira-purple);
  color: var(--kira-white);
}

html[data-brand='kira'] .product-badge.is-warn,
html[data-brand='kira'] .product-badge.is-best {
  background: var(--kira-orange);
  color: var(--kira-purple);
}

html[data-brand='kira'] .favorite-button {
  border: 1px solid var(--kira-line);
  background: var(--kira-white);
  color: var(--kira-purple);
  box-shadow: 0 4px 12px rgba(84, 35, 111, 0.1);
}

html[data-brand='kira'] .favorite-button:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .favorite-button.is-active {
  border-color: var(--kira-orange);
  background: var(--kira-orange);
  color: var(--kira-purple);
}

html[data-brand='kira'] .product-name {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .product-description,
html[data-brand='kira'] .rating-text {
  color: var(--kira-muted);
  font-weight: 500;
}

html[data-brand='kira'] .stars,
html[data-brand='kira'] .star {
  color: var(--kira-orange);
}

html[data-brand='kira'] .star.is-empty {
  color: color-mix(in srgb, var(--kira-purple) 22%, white);
}

html[data-brand='kira'] .product-price {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .product-compare {
  color: var(--kira-muted);
}

/* Verde acento solo como señal de disponibilidad, nunca como texto pequeño. */
html[data-brand='kira'] .stock-line {
  color: var(--kira-purple-ink);
  font-weight: 500;
}

html[data-brand='kira'] .stock-dot {
  background: var(--kira-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kira-green) 28%, white);
}

html[data-brand='kira'] .stock-line.is-out {
  color: var(--kira-muted);
}

html[data-brand='kira'] .stock-line.is-out .stock-dot {
  background: var(--kira-muted);
  box-shadow: none;
}

html[data-brand='kira'] .stock-units {
  color: var(--kira-muted);
}

html[data-brand='kira'] .add-button {
  min-height: 38px;
  border-radius: 999px;
  background: var(--kira-purple);
  color: var(--kira-white);
  font-weight: 600;
}

html[data-brand='kira'] .add-button:hover:not(:disabled) {
  background: var(--kira-purple-dark);
  box-shadow: 0 8px 18px rgba(84, 35, 111, 0.24);
}

html[data-brand='kira'] .add-button:disabled {
  background: color-mix(in srgb, var(--kira-purple) 8%, white);
  color: var(--kira-muted);
}

html[data-brand='kira'] .empty-icon,
html[data-brand='kira'] .prompt-icon,
html[data-brand='kira'] .error-icon {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .empty-state h3,
html[data-brand='kira'] .prompt-panel h1,
html[data-brand='kira'] .error-panel h1 {
  color: var(--kira-purple);
  font-family: var(--kira-font-display);
  font-weight: 400;
  font-size: 1.55rem;
}

html[data-brand='kira'] .empty-state p,
html[data-brand='kira'] .prompt-panel p,
html[data-brand='kira'] .error-panel p {
  color: var(--kira-muted);
  font-weight: 500;
}

html[data-brand='kira'] .empty-button,
html[data-brand='kira'] .primary-button {
  border-radius: 999px;
  background: var(--kira-purple);
  color: var(--kira-white);
  font-weight: 700;
}

html[data-brand='kira'] .empty-button:hover,
html[data-brand='kira'] .primary-button:hover {
  background: var(--kira-purple-dark);
}

html[data-brand='kira'] .error-panel code {
  background: var(--kira-cream);
  color: var(--kira-purple-ink);
}

/* --- 6b. Restos de la base que aún llevaban lavanda ---------------------- */

html[data-brand='kira'] .hero-visual[data-media='photo']::after {
  background: linear-gradient(90deg, var(--kira-cream) 0%, rgba(255, 246, 238, 0) 32%);
}

/* El arte de relleno ocupa el bloque visual completo: el degradado va de naranja suave
   a morado de marca para no dejar ninguna franja lavanda, y el borde izquierdo se
   difumina con `mask-image` para que la pieza se funda con el fondo crema del hero
   (antes se veía una costura vertical recta entre el texto y el arte). */
html[data-brand='kira'] .hero-placeholder {
  color: color-mix(in srgb, var(--kira-purple) 26%, white);
  background:
    radial-gradient(circle at 74% 32%, rgba(255, 255, 255, 0.74) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 88% 88%, rgba(255, 155, 80, 0.3) 0, rgba(255, 155, 80, 0) 46%),
    linear-gradient(100deg, #fbe7d8 0%, #f8eef0 44%, #ece0f3 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 18%, #000 44%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 18%, #000 44%);
}

html[data-brand='kira'] .hero-placeholder svg {
  color: var(--kira-purple);
  opacity: 0.2;
}

html[data-brand='kira'] .hero-spark,
html[data-brand='kira'] .hero-spark svg {
  color: var(--kira-orange);
  opacity: 0.4;
}

html[data-brand='kira'] .star.is-empty svg {
  color: color-mix(in srgb, var(--kira-purple) 22%, white);
}

html[data-brand='kira'] .service-media {
  background: var(--kira-orange-mist);
}

html[data-brand='kira'] .service-card {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius);
  background: var(--kira-white);
  box-shadow: var(--kira-shadow-soft);
}

html[data-brand='kira'] .service-body h3 {
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .service-description {
  color: var(--kira-muted);
}

html[data-brand='kira'] .service-price {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .contact-chip {
  border: 1px solid var(--kira-line);
  border-radius: 999px;
  background: var(--kira-cream);
  color: var(--kira-purple);
  font-weight: 600;
}

/* --- 7. Carrito, checkout y avisos --------------------------------------- */

html[data-brand='kira'] .filters-backdrop,
html[data-brand='kira'] .page-scrim {
  background: rgba(84, 35, 111, 0.34);
}

html[data-brand='kira'] .cart {
  border-left: 0;
  background: var(--kira-white);
  box-shadow: -24px 0 60px rgba(84, 35, 111, 0.22);
}

html[data-brand='kira'] .cart-header {
  border-top: 4px solid var(--kira-orange);
  border-bottom: 1px solid var(--kira-line);
  background: var(--kira-cream);
}

html[data-brand='kira'] .cart-header h2 {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .cart-header p {
  color: var(--kira-muted);
  font-weight: 500;
}

html[data-brand='kira'] .icon-button {
  border-radius: 999px;
  background: var(--kira-white);
  color: var(--kira-purple);
}

html[data-brand='kira'] .icon-button:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .cart-empty-icon {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .cart-empty p {
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .cart-empty small {
  color: var(--kira-muted);
}

html[data-brand='kira'] .cart-item {
  border-bottom: 1px solid var(--kira-line);
}

html[data-brand='kira'] .cart-thumb {
  border-radius: var(--kira-radius-sm);
  background: var(--kira-orange-mist);
}

html[data-brand='kira'] .cart-item-name {
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .cart-item-price,
html[data-brand='kira'] .cart-line-total {
  color: var(--kira-muted);
}

html[data-brand='kira'] .cart-line-total {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .qty-controls {
  border: 1px solid var(--kira-line);
  border-radius: 999px;
  background: var(--kira-cream);
}

html[data-brand='kira'] .qty-button {
  border-radius: 999px;
  color: var(--kira-purple);
}

html[data-brand='kira'] .qty-button:hover {
  background: var(--kira-orange-soft);
  color: var(--kira-purple);
}

html[data-brand='kira'] .qty-value {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .cart-footer {
  border-top: 1px solid var(--kira-line);
  background: var(--kira-white);
}

html[data-brand='kira'] .cart-total {
  color: var(--kira-purple-ink);
  font-weight: 600;
}

html[data-brand='kira'] .cart-total strong {
  color: var(--kira-purple);
  font-weight: 700;
}

html[data-brand='kira'] .checkout label {
  color: var(--kira-purple);
  font-weight: 600;
}

html[data-brand='kira'] .checkout input,
html[data-brand='kira'] .checkout textarea {
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius-sm);
  background: var(--kira-cream);
  color: var(--kira-purple-ink);
  font-family: var(--kira-font-body);
  font-weight: 500;
}

html[data-brand='kira'] .checkout input:focus,
html[data-brand='kira'] .checkout textarea:focus {
  border-color: var(--kira-orange);
  background: var(--kira-white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kira-orange) 22%, transparent);
}

html[data-brand='kira'] .toast {
  border-radius: var(--kira-radius-md);
  background: var(--kira-purple);
  color: var(--kira-white);
  font-weight: 500;
  box-shadow: 0 18px 40px rgba(84, 35, 111, 0.32);
}

/* Sin rojo en la paleta: el error se distingue por el filete naranja. */
html[data-brand='kira'] .toast.is-error {
  border-left: 5px solid var(--kira-orange);
  background: var(--kira-purple-dark);
}

/* --- 8. Pie de página ---------------------------------------------------- */

html[data-brand='kira'] .site-footer {
  position: relative;
  margin-top: 46px;
  padding: 28px 26px 26px;
  overflow: hidden;
  border-top: 0;
  border-radius: 26px 26px 0 0;
  background: var(--kira-purple);
  color: color-mix(in srgb, var(--kira-white) 88%, var(--kira-purple));
  font-size: 0.76rem;
  font-weight: 500;
}

/* Onda superior: semicírculos del color del fondo recortados sobre el morado. */
html[data-brand='kira'] .site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: radial-gradient(circle at 10px 0, var(--kira-cream) 9px, transparent 10px) repeat-x;
  background-size: 20px 10px;
  pointer-events: none;
}

html[data-brand='kira'] .footer-links a {
  color: var(--kira-white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--kira-orange);
  text-underline-offset: 3px;
}

html[data-brand='kira'] .footer-links a:hover {
  color: var(--kira-orange);
}

html[data-brand='kira'] .footer-links span {
  color: color-mix(in srgb, var(--kira-white) 70%, var(--kira-purple));
}

/* --- 9. Responsive y movimiento reducido --------------------------------- */

@media (max-width: 1023px) {
  html[data-brand='kira'] .header-inner {
    padding: 10px 16px;
    gap: 10px 14px;
  }

  html[data-brand='kira'] .nav-inner {
    padding: 8px 16px 12px;
  }

  html[data-brand='kira'] .nav-item {
    border-radius: var(--kira-radius-sm);
  }

  html[data-brand='kira'] .nav-item.is-active {
    border-radius: 999px;
  }

  html[data-brand='kira'] .filters-panel {
    border-radius: 0 var(--kira-radius) var(--kira-radius) 0;
  }

  /* Por debajo de 1024px el hero apila el arte debajo del texto: el difuminado
     tiene que nacer del borde superior y no del izquierdo. */
  html[data-brand='kira'] .hero-placeholder {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 12%, #000 34%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 12%, #000 34%);
  }

  html[data-brand='kira'] .hero-visual[data-media='photo']::after {
    background: linear-gradient(180deg, var(--kira-cream) 0%, rgba(255, 246, 238, 0) 28%);
  }
}

@media (max-width: 640px) {
  html[data-brand='kira'] .app {
    padding: 14px 14px 0;
  }

  html[data-brand='kira'] .header-inner {
    padding: 9px 14px;
  }

  html[data-brand='kira'] .brand-name {
    font-size: 1.02rem;
  }

  html[data-brand='kira'] .hero,
  html[data-brand='kira'] .hero.is-carousel {
    border-radius: 20px;
  }

  html[data-brand='kira'] .hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  html[data-brand='kira'] .site-footer {
    padding: 24px 18px 22px;
    border-radius: 20px 20px 0 0;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-brand='kira'] .product-card:hover {
    transform: none;
  }

  html[data-brand='kira'] .category-circle:hover .category-icon {
    transform: none;
  }
}