/* ============================================================
   FX3D SHOP — Flujo de producto en 3D
   Catálogo /products, ficha de producto, buybox, variantes,
   galería, addons, deals, carrito lateral y modales.
   ============================================================ */

/* ---------- CATÁLOGO /products: grid con profundidad escalonada ---------- */
[class*="products-page"] main,
[class*="products-page"] main { perspective: 1500px; }

.products-page-grid > div { transform-style: preserve-3d; }
.products-page-grid > div:nth-child(3n+1) { transition-delay: 0ms; }
.products-page-grid > div:nth-child(3n+2) { transition-delay: 60ms; }
.products-page-grid > div:nth-child(3n+3) { transition-delay: 120ms; }

/* ---------- FICHA DE PRODUCTO: layout en escena ---------- */
.product-page-wrap,
.product-wrapper { perspective: 1400px; perspective-origin: 50% 18%; }

.product-gallery-card,
.product-buybox,
.product-description-premium { transform-style: preserve-3d; }

.product-gallery-card {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
  animation: fx3d-gallery-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fx3d-gallery-in {
  from { opacity: 0; transform: translateX(-40px) translateZ(-110px) rotateY(10deg); }
  to { opacity: 1; transform: none; }
}
.product-gallery-card:hover { transform: translateZ(24px) rotateY(2.4deg); box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--cl-accent), .12); }

.product-buybox { animation: fx3d-buybox-in .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .12s; }
@keyframes fx3d-buybox-in {
  from { opacity: 0; transform: translateX(40px) translateZ(-110px) rotateY(-10deg); }
  to { opacity: 1; transform: none; }
}
.product-buybox:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 44px rgba(var(--cl-accent), .1); transition: box-shadow .5s ease; }

/* ---------- TÍTULO y PRECIO con relieve ---------- */
.product-page-wrap h1,
.product-title { transform-style: preserve-3d; transition: transform .35s ease, text-shadow .35s ease; }
.product-page-wrap h1:hover { transform: translateZ(22px); text-shadow: 0 14px 34px rgba(var(--cl-accent), .3); }
.product-buybox-price strong,
.product-page-price { display: inline-block; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), text-shadow .3s; }
.product-buybox:hover .product-page-price { transform: translateZ(30px) scale(1.04); text-shadow: 0 12px 30px rgba(var(--cl-accent), .45); }

/* ---------- VARIANTES: pills con cara 3D ---------- */
.variant-pill,
.premium-variant-select label,
[class*="variant"] button,
.checkout-variants button {
  position: relative; transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, border-color .2s, background .2s;
}
.variant-pill:hover,
.checkout-variants button:hover:not(:disabled) {
  transform: translateY(-3px) translateZ(26px) rotateX(10deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 6px 16px rgba(var(--cl-accent), .16);
}
.variant-pill:active,
.checkout-variants button:active:not(:disabled) {
  transform: translateY(1px) translateZ(4px) scale(.97);
  transition-duration: .07s;
}
.variant-pill.is-selected,
.checkout-variants button[aria-pressed="true"],
.checkout-variants .is-active {
  transform: translateZ(18px);
  box-shadow: 0 10px 26px rgba(var(--cl-accent), .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- CANTIDAD: stepper con presión ---------- */
.premium-quantity,
.mobile-purchase-bar__quantity { transform-style: preserve-3d; }
.premium-quantity button {
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), background .2s;
  transform-style: preserve-3d;
}
.premium-quantity button:hover { transform: translateZ(18px) scale(1.08); }
.premium-quantity button:active { transform: translateZ(2px) scale(.92); transition-duration: .06s; }

/* ---------- ADDONS y DEALS: mini-cards 3D ---------- */
.checkout-addons > div,
.quantity-deal-card,
[class*="bundle"] {
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .25s;
}
.checkout-addons > div:hover,
.quantity-deal-card:hover {
  transform: translateY(-4px) translateZ(28px) rotateX(3deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 8px 22px rgba(var(--cl-accent), .14);
  border-color: rgba(var(--cl-accent), .4);
}

/* ---------- CTA del buybox: bloque 3D con jerarquía ---------- */
.product-buybox .checkout-field,
.product-buybox label { transform-style: preserve-3d; }
.product-buybox button[type="button"],
.product-buybox button[type="submit"] {
  position: relative; transform-style: preserve-3d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.product-buybox button[type="button"]:hover:not(:disabled),
.product-buybox button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-4px) translateZ(30px) rotateX(6deg);
  box-shadow: 0 24px 52px rgba(var(--cl-accent), .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  filter: brightness(1.06);
}
.product-buybox button[type="button"]:active:not(:disabled),
.product-buybox button[type="submit"]:active:not(:disabled) {
  transform: translateY(1px) translateZ(2px) rotateX(-3deg) scale(.985);
  transition-duration: .06s;
}

/* ---------- CARRITO LATERAL: panel que entra en 3D ---------- */
.sa-cart-panel {
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.sa-cart-panel .sa-cart-item,
.sa-cart-panel [class*="cart-item"] {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s;
}
.sa-cart-panel .sa-cart-item:hover,
.sa-cart-panel [class*="cart-item"]:hover {
  transform: translateX(4px) translateZ(18px) rotateY(-2.4deg);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}
.sa-cart-panel button {
  transform-style: preserve-3d;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1);
}
.sa-cart-panel button:hover { transform: translateZ(16px) scale(1.06); }
.sa-cart-panel button:active { transform: translateZ(2px) scale(.93); }

/* ---------- MODALES (grupo, buscador, filtros): profundidad ---------- */
.sa-group-modal .group-modal__card,
.product-search-modal__panel,
.group-modal [class*="modal-card"] { transform-style: preserve-3d; }
.sa-group-modal img,
.product-search-modal img {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}
.sa-group-modal a:hover img,
.product-search-modal a:hover img { transform: translateZ(40px) scale(1.06) rotateY(-4deg); }

/* ---------- TAX / total: número que salta ---------- */
.checkout-total strong,
[class*="cart-total"] strong { display: inline-block; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.checkout-total:hover strong,
[class*="cart-total"]:hover strong { transform: translateZ(24px) scale(1.05); }

/* ---------- PÁGINA de catálogo vacía/filtros ---------- */
[class*="products-filter"],
[class*="products-filter"] { transform-style: preserve-3d; }
[class*="products-filter"] a,
[class*="products-filter"] a,
[class*="products-filter"] button {
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
[class*="products-filter"] a:hover,
[class*="products-filter"] a:hover,
[class*="products-filter"] button:hover { transform: translateZ(20px) rotateX(8deg); box-shadow: 0 12px 28px rgba(var(--cl-accent), .2); }

/* ---------- Migas y badge de stock con relieve ---------- */
.sa-breadcrumbs a { transition: transform .2s ease; display: inline-block; }
.sa-breadcrumbs a:hover { transform: translateZ(14px) translateY(-1px); }
.text-success, .text-error { transition: transform .25s ease, text-shadow .25s; }
.text-success:hover, .text-error:hover { transform: translateZ(12px); text-shadow: 0 0 16px currentColor; }

/* ---------- Recomendaciones del carrito: cards 3D ---------- */
.cart-recommendation-card {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, background .3s, box-shadow .35s;
}
.cart-recommendation-card:hover {
  transform: translateY(-8px) translateZ(38px) rotateX(4deg) rotateY(-3deg);
  box-shadow: 0 26px 56px rgba(0, 0, 0, .45), 0 12px 32px rgba(var(--cl-accent), .16);
}
.cart-recommendation-card__media img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cart-recommendation-card:hover .cart-recommendation-card__media img { transform: translateZ(30px) scale(1.06); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-gallery-card, .product-buybox { animation: none !important; }
  .sa-cart-panel .sa-cart-item, .variant-pill, .checkout-addons > div,
  .quantity-deal-card { transform: none !important; transition: none !important; }
}