/*
 * card-produit.css — Calzedonia Maroc
 * Tile produit (listing + carousel homepage).
 * Structure extraite : data-testid="product-tile-horizontal-stack"
 * Padding inline 1rem (css-wpqgce), nom h2 light, prix tabular-nums.
 * Hover : actions overlay + quick-view.
 * Propriétés logiques partout — RTL natif.
 */

/* ─────────────────────────────────────────────
   CARD — CONTAINER
   Extrait : product-tile-horizontal-stack
   css-wpqgce : flex-direction:column; position:relative; width:100%;
                padding-inline:1rem
   ───────────────────────────────────────────── */

.clz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--color-white);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.25, 0, 0, 1),
              box-shadow 220ms cubic-bezier(0.25, 0, 0, 1);
}

/* Hover global — élévation douce (uniforme carousel + grille) */
.clz-card:hover {
  text-decoration: none;
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Tactile : pas de lift */
@media (hover: none) {
  .clz-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ─────────────────────────────────────────────
   IMAGE WRAPPER
   Ratio portrait 3:4 — standard mode lingerie/maillots Calzedonia
   ───────────────────────────────────────────── */

.clz-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--color-neutral-100);
}

/* Image principale */
.clz-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 600ms ease-out, opacity 300ms ease-out;
  will-change: transform;
}

/* ─────────────────────────────────────────────
   PLACEHOLDER PRODUIT — image CSS générée (zéro réseau)
   Dégradés thématiques cohérents avec l'identité chromatique.
   Aucune requête externe : fonctionne en localhost et hors-ligne.
   ───────────────────────────────────────────── */

.clz-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.clz-card__placeholder[data-grad="rose"]    { background: linear-gradient(160deg, #F9C5D1 0%, #E8A0B0 60%, #D4708A 100%); }
.clz-card__placeholder[data-grad="coral"]   { background: linear-gradient(160deg, #FFB5A0 0%, #F4846B 60%, #E06050 100%); }
.clz-card__placeholder[data-grad="noir"]    { background: linear-gradient(160deg, #3A3A3A 0%, #1E1E1E 60%, #0A0A0A 100%); }
.clz-card__placeholder[data-grad="sable"]   { background: linear-gradient(160deg, #F2E8DC 0%, #E8D5C0 60%, #D4B896 100%); }
.clz-card__placeholder[data-grad="bleu"]    { background: linear-gradient(160deg, #B3D4F0 0%, #7EB8E8 60%, #4A96D0 100%); }
.clz-card__placeholder[data-grad="vert"]    { background: linear-gradient(160deg, #B8E8C8 0%, #85CCA0 60%, #52A870 100%); }
.clz-card__placeholder[data-grad="maroc"]   { background: linear-gradient(160deg, #D4AF37 0%, #B8960C 40%, #1B6B8A 100%); }
.clz-card__placeholder[data-grad="fuchsia"] { background: linear-gradient(160deg, #E87090 0%, #D71F56 60%, #9B0D23 100%); }

/* Monogramme filigrane — élégant sur le dégradé, sans requête réseau */
.clz-card__placeholder .clz-multicard__mono {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

/* Léger zoom du placeholder au survol — parité avec l'image réelle */
.clz-card:hover .clz-card__placeholder {
  transform: scale(1.03);
  transition: transform 600ms ease-out;
}

/* Image secondaire (hover — 2ème vue produit) */
.clz-card__img--hover {
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.clz-card:hover .clz-card__img--hover {
  opacity: 1;
}

.clz-card:hover .clz-card__img--main {
  opacity: 0;
}

/* Zoom discret au hover si une seule image */
.clz-card:hover .clz-card__img:only-child {
  transform: scale(1.03);
}

/* ─────────────────────────────────────────────
   BADGES / TAGS (superposés sur l'image)
   Extrait : data-testid="product-tag"
   ───────────────────────────────────────────── */

.clz-card__badges {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
  pointer-events: none;
}

.clz-card__badge {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding-inline: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.625rem;             /* 8.75px — très petit sur image */
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.clz-card__badge--new {
  background-color: var(--color-black);
  color: var(--color-white);
}

.clz-card__badge--sale {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.clz-card__badge--promo {
  background-color: var(--color-promo);
  color: var(--color-black);
}

.clz-card__badge--maroc {
  background-color: var(--color-accent-maroc);
  color: var(--color-black);
}

.clz-card__badge--exclusive {
  background-color: var(--color-accent-zellige);
  color: var(--color-white);
}

/* ─────────────────────────────────────────────
   WISHLIST — BOUTON (superposé sur l'image)
   Extrait : icône droite dans product-tile-horizontal-stack-info
   ───────────────────────────────────────────── */

.clz-card__wish {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: 3;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-fast);
  backdrop-filter: blur(4px);

  /* Masqué par défaut, visible au hover */
  opacity: 0;
  transform: scale(0.85);
}

@media (hover: none) {
  /* Touch devices : toujours visible */
  .clz-card__wish {
    opacity: 1;
    transform: scale(1);
  }
}

.clz-card:hover .clz-card__wish,
.clz-card__wish:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.clz-card__wish:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  transform: scale(1.08);
}

.clz-card__wish.is-active {
  color: var(--color-primary);
  opacity: 1;
  transform: scale(1);
}

.clz-card__wish.is-active:hover {
  color: var(--color-primary-dark);
}

.clz-card__wish svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-fast);
}

.clz-card__wish.is-active svg {
  fill: var(--color-primary);
}

/* ─────────────────────────────────────────────
   ACTIONS HOVER — QUICK VIEW + ADD TO CART
   Superposé en bas de l'image au survol
   ───────────────────────────────────────────── */

.clz-card__actions {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}

.clz-card:hover .clz-card__actions {
  transform: translateY(0);
}

@media (hover: none) {
  .clz-card__actions {
    display: none;   /* touch : bouton dans la section info à la place */
  }
}

.clz-card__action-btn {
  flex: 1;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
}

.clz-card__action-btn--cart {
  background-color: var(--color-black);
  color: var(--color-white);
}

.clz-card__action-btn--cart:hover {
  background-color: var(--color-neutral-900);
}

.clz-card__action-btn--quick {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-black);
  flex: 0 0 auto;
  padding-inline: var(--space-3);
  backdrop-filter: blur(4px);
}

.clz-card__action-btn--quick:hover {
  background-color: var(--color-white);
}

.clz-card__action-btn svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   SWATCHES COULEURS
   ───────────────────────────────────────────── */

.clz-card__colors {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) 0;
  flex-wrap: wrap;
}

.clz-card__swatch {
  position: relative;
  width: 1.25rem;    /* 17.5px — légèrement agrandie */
  height: 1.25rem;
  border-radius: var(--radius-full);
  border: var(--border-1) solid var(--color-neutral-300);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

/* Zone de touche étendue 44×44px (WCAG 2.5.5) */
.clz-card__swatch::before {
  content: '';
  position: absolute;
  inset: -13px;  /* 17.5 + 26 = 43.5px ≈ 44px */
}

.clz-card__swatch:hover,
.clz-card__swatch.is-active {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-black);
}

.clz-card__colors-count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-light);
  color: var(--color-text-tertiary);
  margin-inline-start: var(--space-1);
}

/* ─────────────────────────────────────────────
   INFO SECTION
   Extrait : product-tile-horizontal-stack-info
   css-wpqgce : padding-inline:1rem; flex-direction:column
   ───────────────────────────────────────────── */

.clz-card__info {
  display: flex;
  flex-direction: column;
  padding-inline: var(--card-pad-x);   /* 1rem — extrait exact */
  padding-block: var(--space-3) var(--space-4);
  gap: var(--space-2);
  flex: 1;
}

/* Ligne nom + compteur couleurs */
.clz-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Nom du produit
   Extrait : h2.chakra-text[data-testid="product-tile-name"]
   font-size env: 0.875rem light — pas d'extraction directe */
.clz-card__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);          /* 0.875rem */
  font-weight: var(--fw-light);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1;
  /* Réserve 2 lignes : noms non tronqués + alignement des prix entre cartes */
  min-height: calc(var(--leading-snug) * 2);
  transition: color var(--transition-fast);
}

.clz-card:hover .clz-card__name {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* ─────────────────────────────────────────────
   PRIX
   Format : "385 MAD" / barré si promo
   Extrait : "35,00 €" → conversion ×11 ≈ MAD
   ───────────────────────────────────────────── */

.clz-card__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.clz-card__price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.clz-card__price--sale {
  color: var(--color-primary);
}

.clz-card__price--original {
  font-weight: var(--fw-light);
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  font-size: var(--text-xs);
}

/* Économie */
.clz-card__price-save {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────
   TAILLES DISPONIBLES (aperçu rapide)
   ───────────────────────────────────────────── */

.clz-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

.clz-card__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
  border: var(--border-1) solid var(--color-neutral-300);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.clz-card__size:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}

.clz-card__size.is-active {
  border-color: var(--color-black);
  background-color: var(--color-black);
  color: var(--color-white);
}

.clz-card__size.is-oos {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ─────────────────────────────────────────────
   BOUTON ADD TO CART MOBILE (touch devices)
   ───────────────────────────────────────────── */

.clz-card__add-mobile {
  display: none;
  width: 100%;
  height: var(--btn-height);
  margin-block-start: var(--space-2);
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

@media (hover: none) {
  .clz-card__add-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }
}

.clz-card__add-mobile:hover {
  background-color: var(--color-neutral-900);
}

/* ─────────────────────────────────────────────
   VARIANTES DE CARD
   ───────────────────────────────────────────── */

/* En scroll-track : largeur COHÉRENTE et fixe (ne pas laisser l'image
   intrinsèque dicter la largeur → cartes inégales). Toutes identiques. */
.clz-card.scroll-track__item {
  width: calc(50vw - var(--space-6));   /* ~2 visibles mobile */
}

@media (min-width: 768px) {
  .clz-card.scroll-track__item {
    width: calc(33.333vw - var(--space-8));   /* ~3 visibles tablette */
  }
}

@media (min-width: 1024px) {
  .clz-card.scroll-track__item {
    width: 15.5rem;   /* largeur fixe élégante — ~5 visibles desktop */
  }
}

/* Carousel homepage — plus compact */
.clz-card--carousel .clz-card__info {
  padding-block: var(--space-2) var(--space-3);
}

.clz-card--carousel .clz-card__sizes {
  display: none;   /* masqués dans le carousel */
}

/* Card en mode skeleton (chargement) */
.clz-card--skeleton .clz-card__media {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 25%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.clz-card--skeleton .clz-card__name,
.clz-card--skeleton .clz-card__price {
  background-color: var(--color-neutral-200);
  color: transparent;
  border-radius: var(--radius-xs);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(
    90deg,
    var(--color-neutral-100) 25%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 75%
  );
  user-select: none;
}

.clz-card--skeleton .clz-card__name {
  width: 80%;
  height: var(--text-sm);
}

.clz-card--skeleton .clz-card__price {
  width: 4rem;
  height: var(--text-sm);
}

/* ─────────────────────────────────────────────
   QUICK VIEW MODAL
   Invoqué depuis .clz-card__action-btn--quick
   ───────────────────────────────────────────── */

.clz-quick-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Backdrop sombre (couvre toute la surface, ferme au clic) */
.clz-quick-view__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

/* Média en dégradé CSS (zéro réseau) — réutilise le système placeholder */
.clz-quick-view__media .clz-card__placeholder {
  position: relative;
}

.clz-quick-view.is-open {
  pointer-events: auto;
  opacity: 1;
}

.clz-quick-view__panel {
  position: relative;
  background-color: var(--color-white);
  width: 100%;
  max-width: 54rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
  transform: translateY(1rem);
  transition: transform var(--transition-normal);
}

@media (min-width: 768px) {
  .clz-quick-view__panel {
    grid-template-columns: 1fr 1fr;
  }
}

.clz-quick-view.is-open .clz-quick-view__panel {
  transform: translateY(0);
}

/* Image côté gauche */
.clz-quick-view__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-neutral-100);
}

.clz-quick-view__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Contenu côté droit */
.clz-quick-view__content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
}

.clz-quick-view__brand {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
}

.clz-quick-view__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-black);
}

.clz-quick-view__pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.clz-quick-view__price {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.clz-quick-view__price--sale { color: var(--color-primary); }

.clz-quick-view__price--original {
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

/* Sélecteur taille */
.clz-quick-view__size-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  margin-block-end: var(--space-2);
}

.clz-quick-view__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.clz-quick-view__size-btn {
  min-width: 3rem;
  height: 2.5rem;
  padding-inline: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  border: var(--border-1) solid var(--color-neutral-300);
  border-radius: var(--radius-xs);
  background: none;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              color var(--transition-fast);
}

.clz-quick-view__size-btn:hover {
  border-color: var(--color-black);
}

.clz-quick-view__size-btn.is-active {
  border-color: var(--color-black);
  background-color: var(--color-black);
  color: var(--color-white);
}

.clz-quick-view__size-btn.is-oos {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* CTA add to cart */
.clz-quick-view__cta {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Lien page produit complète */
.clz-quick-view__full-link {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition-fast);
}

.clz-quick-view__full-link:hover {
  color: var(--color-black);
}

/* Bouton fermeture */
.clz-quick-view__close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  z-index: 1;
}

.clz-quick-view__close:hover {
  color: var(--color-black);
  background-color: var(--color-neutral-100);
}

.clz-quick-view__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .clz-card__img         { transition: opacity 150ms ease-out; }
  .clz-card__wish        { transition: none; }
  .clz-card__actions     { transition: none; }
  .clz-quick-view__panel { transition: none; transform: none !important; }
  .clz-card--skeleton .clz-card__media,
  .clz-card--skeleton .clz-card__name,
  .clz-card--skeleton .clz-card__price { animation: none; }
}