/* ============================================================
   CCM Product Card  — .ccmg-card
   Diseño: CCM web design 2026 · Figma node 669-5286
   ============================================================ */

/* ---- Variables ---- */

.ccmg-card {
    --ccmg-card-radius:       24px;
    --ccmg-card-img-radius:   16px;
    --ccmg-card-bg:           #ffffff;
    --ccmg-card-accent:       #e60000;
    --ccmg-card-accent-hot:   #ff3b00;     /* badge "MÁS VENDIDOS" */
    --ccmg-card-sold-out-bg:  #191919;
    --ccmg-card-border:       rgba(25, 24, 24, 0.3);
    --ccmg-card-border-w:     1.5px;
    --ccmg-card-font:         "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* ATC flotante */
    --ccmg-card-atc-bg:       rgba(25, 24, 24, 0.9);
    --ccmg-card-atc-size:     32px;
    --ccmg-card-atc-icon-size: 13px;
    --ccmg-card-atc-expand-max-width: 220px;
    --ccmg-card-atc-expand-gap: 8px;
    --ccmg-card-atc-expand-padding: 8px 12px 8px 8px;
    --ccmg-card-atc-label-size: 14px;
    --ccmg-card-atc-label-line-height: 14px;
    --ccmg-card-atc-label-max-width: 200px;
    --ccmg-card-atc-pulse-shrink: 0.88;
    --ccmg-card-atc-pulse-grow: 1.08;

    /* Colores de texto */
    --ccmg-card-title-color:  #000000;
    --ccmg-card-price-color:  #191919;
    --ccmg-card-del-color:    #707070;
    --ccmg-card-ship-bg:      rgb(225, 241, 227);
    --ccmg-card-ship-color:   rgb(0, 148, 19);

    display:          flex;
    flex-direction:   column;
    gap:              16px;
    background:       var(--ccmg-card-bg);
    font-family:      var(--ccmg-card-font);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Container queries: responde al ancho de la propia tarjeta */
    container-type:   inline-size;
    container-name:   card;
}

/* ============================================================
   Zona de imagen (.ccmg-card__media)
   Contiene: imagen, badge de categoría, botón ATC flotante
   ============================================================ */

.ccmg-card__media {
    position:      relative;
    border-radius: var(--ccmg-card-radius);
    overflow:      hidden;
    aspect-ratio:  var(--ccmg-card-nav-anchor-aspect-ratio);
    background:    #ffffff;
}

/* ---- Link de imagen (aria-hidden, no tab) ---- */

.ccmg-card__img-link {
    display:         block;
    width:           100%;
    height:          100%;
    text-decoration: none;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Wrapper interno con padding 10px (Figma) ---- */
/* El radio 16px aplica al inner frame del diseño         */

.ccmg-card__image-wrap {
    position:      relative;
    width:         100%;
    height:        100%;
    padding:       10px;
    box-sizing:    border-box;
    overflow:      hidden;
    border-radius: var(--ccmg-card-img-radius);
}

.ccmg-card__img {
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    contain;    /* Figma: scaleMode = FIT */
    border-radius: var(--ccmg-card-img-radius);
    transition:    opacity 0.3s ease;
}

.ccmg-card__img--placeholder {
    opacity: 0.35;
}

/* ---- Imagen hover (segunda imagen de galería) ---- */

.ccmg-card__img--hover {
    position:      absolute;
    inset:         10px;          /* respeta el padding del wrapper */
    width:         calc(100% - 20px);
    height:        calc(100% - 20px);
    object-fit:    contain;
    border-radius: var(--ccmg-card-img-radius);
    opacity:       0;
    transition:    opacity 0.35s ease;
}

/* ---- Overlay permanente (Figma: Background + Overlay layers) ---- */

.ccmg-card__overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index:        1;
}

/* ---- Badge de categoría en imagen ---- */
/* Badge default: top=9px left=6px · pill bg=#191919 · 12px/500/white lh=18 */

.ccmg-card__cat-badge {
    position:        absolute;
    top:             9px;
    left:            6px;
    z-index:         2;
    display:         inline-flex;
    align-items:     center;
    padding:         3px 12px 0;
    border-radius:   100px;
    background:      var(--ccmg-card-sold-out-bg);
    color:           #ffffff;
    font-family:     var(--ccmg-card-font);
    font-size:       12px;
    font-weight:     500;
    line-height:     18px;
    white-space:     nowrap;
    pointer-events:  none;
    text-transform:  uppercase;
    letter-spacing:  0.02em;
}

.ccmg-card__cat-badge--sold-out {
    background: var(--ccmg-card-accent-hot);
}

/* ============================================================
   Botón ATC flotante
   Figma: bottom=12px right=10px · 32×32 circle · bg=rgba(25,24,24,0.9)
   Hover: expande a pill mostrando "Añadir al carrito" (14px/500)
   ============================================================ */

.ccmg-card__atc {
    all:             unset;
    position:        absolute !important;  /* WooCommerce .button aplica position:relative */
    bottom:          12px;
    right:           10px;
    z-index:         3;

    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    gap:             0;

    height:          var(--ccmg-card-atc-size) !important;
    min-width:       var(--ccmg-card-atc-size) !important;  /* fuerza ancho = alto → círculo */
    max-width:       var(--ccmg-card-atc-size);
    padding:         8px !important;

    /* !important para ganar a los estilos .button de WooCommerce/tema */
    border-radius:   100px !important;
    background:      var(--ccmg-card-atc-bg) !important;
    color:           #ffffff !important;
    cursor:          pointer !important;

    overflow:        hidden !important;  /* WooCommerce .button fuerza overflow:visible */
    white-space:     nowrap;
    box-sizing:      border-box !important;
    line-height:     1;
    text-decoration: none;

    transition:
        max-width  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        gap        0.38s cubic-bezier(0.4, 0, 0.2, 1),
        padding    0.38s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.15s ease;

    -webkit-tap-highlight-color: transparent;
}

/*
 * Expansión hover solo en dispositivos con puntero fino (ratón/trackpad).
 * En touch, :hover queda "pegado" al primer tap y provoca el estado
 * expandido de forma permanente hasta el siguiente tap.
 * (hover:hover) + (pointer:fine) = ratón real, nunca pantalla táctil.
 */
@media (hover: hover) and (pointer: fine) {
    .ccmg-card__image-wrap--has-hover:hover .ccmg-card__img--primary {
        opacity: 0;
    }

    .ccmg-card__image-wrap--has-hover:hover .ccmg-card__img--hover {
        opacity: 1;
    }

    /* Card hover → expande el botón */
    .ccmg-card:hover .ccmg-card__atc:not([disabled]):not([aria-disabled="true"]) {
        max-width: var(--ccmg-card-atc-expand-max-width);
        gap:       var(--ccmg-card-atc-expand-gap);
        padding:   var(--ccmg-card-atc-expand-padding);
    }

    /* Hover directo sobre el botón */
    .ccmg-card__atc:hover:not([disabled]) {
        background: rgba(25, 24, 24, 1);
    }
}

.ccmg-card__atc:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-card__atc[disabled],
.ccmg-card__atc[aria-disabled="true"] {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* Estados gestionados por WooCommerce + estado local explícito */
.ccmg-card__atc.loading:not([disabled]),
.ccmg-card__atc.added:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="pending"]:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="success"]:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="error"]:not([disabled]) {
    max-width: var(--ccmg-card-atc-expand-max-width);
    gap:       var(--ccmg-card-atc-expand-gap);
    padding:   var(--ccmg-card-atc-expand-padding);
}

.ccmg-card__atc.loading .ccmg-card__atc-label,
.ccmg-card__atc.added .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-label {
    max-width: var(--ccmg-card-atc-label-max-width);
    opacity:   1;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"] {
    background: rgba(25, 24, 24, 1) !important;
    opacity:    1;
    cursor:     progress !important;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"][aria-disabled="true"],
.ccmg-card__atc[data-ccmg-atc-state="success"][aria-disabled="true"] {
    opacity: 1;
}

.ccmg-card__atc[data-ccmg-atc-state="success"] {
    animation:  ccmg-atc-pulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    background: rgba(25, 24, 24, 1) !important;
}

.ccmg-card__atc[data-ccmg-atc-state="error"] {
    background: rgba(164, 24, 24, 0.96) !important;
    opacity:    1;
}

/* Ícono del carrito */
.ccmg-card__atc-icon {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ccmg-card-atc-icon-size);
    height:          var(--ccmg-card-atc-icon-size);
    flex-shrink:     0;
}

.ccmg-card__atc-icon svg {
    display: block;
    width:   var(--ccmg-card-atc-icon-size);
    height:  var(--ccmg-card-atc-icon-size);
}

/* Íconos intercambiables: carrito ↔ check */
.ccmg-card__atc-icon-cart,
.ccmg-card__atc-icon-check {
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items:     center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.ccmg-card__atc-icon-check { opacity: 0; }

/* Pending / error mantienen el carrito visible */
.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-icon-cart,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-icon-cart {
    opacity: 1;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-icon-check,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-icon-check {
    opacity: 0;
}

/* Estado added (WooCommerce confirma) */
.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-icon-cart,
.ccmg-card__atc.added .ccmg-card__atc-icon-cart { opacity: 0; }

.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-icon-check,
.ccmg-card__atc.added .ccmg-card__atc-icon-check { opacity: 1; }

/* ============================================================
   Animación de éxito
   Se activa cuando WooCommerce confirma el add-to-cart.
   ============================================================ */

@keyframes ccmg-atc-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(var(--ccmg-card-atc-pulse-shrink)); }
    65%  { transform: scale(var(--ccmg-card-atc-pulse-grow)); }
    100% { transform: scale(1); }
}

.ccmg-card__media > .added_to_cart,
.ccmg-card__media > .added_to_cart.wc-forward {
    display: none !important;
}

/* Texto del botón */
.ccmg-card__atc-label {
    font-family:  var(--ccmg-card-font);
    font-size:    var(--ccmg-card-atc-label-size);
    font-weight:  500;
    line-height:  var(--ccmg-card-atc-label-line-height);
    color:        #ffffff;
    white-space:  nowrap;
    overflow:     hidden;
    max-width:    0;
    opacity:      0;
    transition:
        max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.2s  ease 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .ccmg-card:hover .ccmg-card__atc:not([disabled]) .ccmg-card__atc-label {
        max-width: var(--ccmg-card-atc-label-max-width);
        opacity:   1;
    }
}

/* Variante producto variable (enlace) */
.ccmg-card__atc--variable {
    background: rgba(25, 24, 24, 0.9);
    text-decoration: none;
}

/* ============================================================
   Cuerpo (.ccmg-card__body-link + .ccmg-card__body)
   ============================================================ */

.ccmg-card__body-link {
    display:         block;
    min-width:       0;        /* evita overflow horizontal en flex */
    text-decoration: none;
    color:           inherit;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-card__body-link:focus-visible .ccmg-card__body {
    outline:        2px solid var(--ccmg-card-accent);
    outline-offset: 4px;
    border-radius:  4px;
}

.ccmg-card__body {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        0 6px;
    min-width:      0;         /* evita que el contenido desborde el slide */
    overflow:       hidden;    /* recorta badges/precios que excedan el ancho */
}

/* ---- Badge de descuento (Figma: outlined red pill) ---- */
/* Figma: border=1px rgb(230,0,0) · r=100px · pad=3px 12px 0 · 14px/700/lh=18 */

.ccmg-card__badge {
    display:         inline-flex;
    align-self:      flex-start;
    align-items:     center;
    padding:         3px 12px 0;
    border-radius:   100px;
    background:      transparent;
    border:          1px solid var(--ccmg-card-accent);
    color:           var(--ccmg-card-accent);
    font-family:     var(--ccmg-card-font);
    font-size:       14px;
    font-weight:     500;
    line-height:     16px;
    white-space:     nowrap;
    pointer-events:  none;
}

/* ---- Bloque info: título + precio + envío ---- */

.ccmg-card__info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

/* ---- Título ---- */
/* Figma: 14px / 500 / lh=14 / #000 */

.ccmg-card__title {
    all:                unset;
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
    font-family:        var(--ccmg-card-font);
    font-size:          14px;
    font-weight:        500;
    color:              var(--ccmg-card-title-color);
    line-height:        14px;
    max-height:         28px;
}

/* ---- Precio ---- */
/* Figma: current=18px/500/lh=18/#191919 | del=14px/400/lh=12/#707070 */
/* Orden: precio actual primero, luego tachado                          */

.ccmg-card__price {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-wrap:   wrap;
    padding-top: 4px;
}

.ccmg-card__price-current {
    all:         unset;
    font-family: var(--ccmg-card-font);
    font-size:   18px;
    font-weight: 500;
    line-height: 18px;
    color:       var(--ccmg-card-price-color);
}

.ccmg-card__price-regular {
    all:                   unset;
    font-family:           var(--ccmg-card-font);
    font-size:             14px;
    font-weight:           400;
    line-height:           12px;
    color:                 var(--ccmg-card-del-color);
    text-decoration:       line-through;
    text-decoration-thickness: 1px;
}

/* WooCommerce inyecta .woocommerce-Price-amount y bdi */
.ccmg-card__price-current .woocommerce-Price-amount,
.ccmg-card__price-current bdi,
.ccmg-card__price-regular .woocommerce-Price-amount,
.ccmg-card__price-regular bdi {
    color:   inherit;
    font:    inherit;
    display: inline;
}

/* ---- Etiqueta de envío ---- */
/* Figma: pill bg=rgb(225,241,227) · r=100 · pad=2px 8px 0 · 12px/500/rgb(0,148,19)/lh=14 */

.ccmg-card__shipping {
    display:         inline-flex;
    align-items:     center;
    align-self:      flex-start;
    padding:         2px 8px 0;
    border-radius:   100px;
    background:      var(--ccmg-card-ship-bg);
    color:           var(--ccmg-card-ship-color);
    font-family:     var(--ccmg-card-font);
    font-size:       12px;
    font-weight:     500;
    line-height:     14px;
    white-space:     nowrap;
    pointer-events:  none;
}

/* ============================================================
   Accesibilidad
   ============================================================ */

.ccmg-card .screen-reader-text {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

/* ============================================================
   Responsive — Container Queries (tendencia 2026)
   + Media Queries como fallback
   ============================================================ */

/* --- Tarjetas muy pequeñas < 130px (4+ columnas en móvil) --- */
@container card (max-width: 130px) {
    .ccmg-card            { gap: 10px; }
    .ccmg-card__body      { gap: 8px; padding: 0 4px; }
    .ccmg-card__info      { gap: 3px; }
    .ccmg-card__badge     { font-size: 10px; padding: 2px 8px 0; }
    .ccmg-card__cat-badge { font-size: 10px; padding: 2px 8px 0; top: 6px; left: 4px; }
    .ccmg-card__title     { font-size: 11px; line-height: 12px; max-height: 24px; }
    .ccmg-card__price-current { font-size: 13px; line-height: 13px; }
    .ccmg-card__price-regular { font-size: 11px; }
    .ccmg-card__shipping  { font-size: 10px; padding: 2px 6px 0; }
    .ccmg-card__atc       {
        --ccmg-card-atc-size: 26px;
        --ccmg-card-atc-icon-size: 11px;
        --ccmg-card-atc-expand-max-width: 126px;
        --ccmg-card-atc-expand-gap: 5px;
        --ccmg-card-atc-expand-padding: 5px 8px 5px 5px;
        --ccmg-card-atc-label-size: 10px;
        --ccmg-card-atc-label-line-height: 10px;
        --ccmg-card-atc-label-max-width: 88px;
        --ccmg-card-atc-pulse-shrink: 0.95;
        --ccmg-card-atc-pulse-grow: 1.02;
        bottom: 8px;
        right: 6px;
    }
}

/* --- Tarjetas pequeñas 131–180px (3 columnas tablet/móvil) --- */
@container card (min-width: 131px) and (max-width: 180px) {
    .ccmg-card            { gap: 12px; }
    .ccmg-card__title     { font-size: 12px; line-height: 13px; max-height: 26px; }
    .ccmg-card__price-current { font-size: 15px; line-height: 15px; }
    .ccmg-card__atc       {
        --ccmg-card-atc-size: 28px;
        --ccmg-card-atc-icon-size: 12px;
        --ccmg-card-atc-expand-max-width: 144px;
        --ccmg-card-atc-expand-gap: 6px;
        --ccmg-card-atc-expand-padding: 6px 10px 6px 6px;
        --ccmg-card-atc-label-size: 11px;
        --ccmg-card-atc-label-line-height: 11px;
        --ccmg-card-atc-label-max-width: 104px;
        --ccmg-card-atc-pulse-shrink: 0.94;
        --ccmg-card-atc-pulse-grow: 1.03;
    }
}

/* --- Estándar 180–280px — aplica el diseño base --- */

/* --- Tarjetas grandes > 280px --- */
@container card (min-width: 280px) {
    .ccmg-card__title         { font-size: 14px; }
    .ccmg-card__price-current { font-size: 18px; }
}

@media (max-width: 599px) {
    .ccmg-card {
        --ccmg-card-radius: 16px;
    }
}

/* ---- Viewport mobile ---- */

@media (max-width: 479px) {
    /* Gap reducido entre imagen y body */
    .ccmg-card {
        gap: 8px;
    }

    .ccmg-card__body {
        padding: 0 4px;
        gap:     8px;
    }

    .ccmg-card__title {
        font-size:  13px;
        line-height: 14px;
        max-height:  26px;  /* 2 líneas × 13px */
    }

    .ccmg-card__cat-badge {
        font-size: 11px;
        line-height: 11px;
        padding:   4px 10px 0;
    }

    .ccmg-card__price-current {
        font-size:  clamp(12px, 3.4vw, 16px);
        line-height: clamp(12px, 3.4vw, 16px);
    }

    .ccmg-card__price-regular {
        font-size:  clamp(10px, 2.8vw, 13px);
        line-height: 11px;
    }

    .ccmg-card__badge {
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 12px;
        padding: 3px 8px 0;
    }

    .ccmg-card__info {
        gap: 3px;
    }
}

/* ---- Preferencia de movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
    .ccmg-card__img,
    .ccmg-card__img--hover,
    .ccmg-card__atc,
    .ccmg-card__atc-label {
        transition: none;
    }
}