/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ── Rose Glow polish ───────────────────────────────────────────────────── */

/* Carrusel de productos: aire para que el hover/lift no se corte y flechas rosa */
.sa-products--carousel .splide__track { padding: 6px 2px 14px; }
.sa-products .splide .splide__arrow {
  background: rgb(var(--cl-surface-raised));
  border: 1px solid var(--cl-border);
  color: rgb(var(--cl-accent));
  opacity: 1;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.sa-products .splide .splide__arrow:hover:not(:disabled) {
  background: rgba(var(--cl-accent), .14);
  border-color: rgba(var(--cl-accent), .45);
}
.sa-products .splide .splide__arrow:disabled { opacity: .3; }
.sa-products .splide .splide__arrow svg { fill: currentColor; }
.sa-products .splide__pagination__page { background: rgba(var(--cl-accent), .25); }
.sa-products .splide__pagination__page.is-active { background: rgb(var(--cl-accent)); transform: scale(1.25); }

/* Modal de grupos: filas compactas (miniatura + nombre + stock + precio) */
.sa-group-modal .sa-product-card--compact-row {
  padding: .6rem .75rem;
  gap: .85rem;
  border-radius: calc(var(--radius-card, 16px) - 2px);
  background: rgb(var(--cl-surface-raised));
}
.sa-group-modal .sa-product-card-thumb { width: 5.25rem; }
.sa-group-modal .sa-product-card--compact-row:hover {
  border-color: rgba(var(--cl-accent), .4);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 6%, rgb(var(--cl-surface-raised)));
}
.sa-group-modal .sa-product-card-title { font-size: .9rem; }
@media (max-width: 480px) {
  .sa-group-modal .sa-product-card-thumb { width: 4.25rem; }
}

/* Tabla de descuentos por volumen: filas más limpias */
.sa-product-volume-table table { table-layout: auto; }
.sa-product-volume-table tbody tr[class*="bg-accent-500"] td:first-child {
  box-shadow: inset 3px 0 0 rgb(var(--cl-accent));
}

/* ── Fix glitch visual (GPU) v2 ───────────────────────────────────────── */
/* Escritorio: solo quitamos lo más pesado */
.pfx-noise { display: none !important; }
.pfx-glows::before,
.pfx-glows-corners::after,
.hero-bg-glow,
.sfx-glow,
.pfx-orb { filter: none !important; }

/* Móvil: sin animaciones infinitas, sin blur, sin capas aceleradas.
   El glow rosa se queda como degradado estático. */
@media (max-width: 900px), (pointer: coarse) {
  .pfx-particles { display: none !important; }

  .pfx-glows::before,
  .pfx-glows-corners::after,
  .hero-bg-glow,
  .sfx-glow {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .page-fx,
  .page-fx *,
  .sfx,
  .sfx * {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .backdrop-blur,
  .backdrop-blur-md,
  .backdrop-blur-sm,
  .backdrop-blur-lg,
  .backdrop-blur-xl,
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  *, *::before, *::after {
    will-change: auto !important;
  }

  .hfx-tilt { transform: none !important; }
  .hfx-spotlight::after { display: none !important; }
}