/**
 * cgm-card.css — Единый стандарт карточки товара
 * curly.sale / CGM Navigator
 *
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  ЗАГРУЖАЕТСЯ ГЛОБАЛЬНО на всех страницах сайта.                ║
 * ║  Единственный источник правды для стилей карточки товара.      ║
 * ║  Менять внешний вид карточки — только здесь.                   ║
 * ╠══════════════════════════════════════════════════════════════════╣
 * ║  Заменяет дублирующиеся стили карточки из:                     ║
 * ║    • cgm-archive.css  §6-12  (удалены)                         ║
 * ║    • cgm-product.css  §ARCHIVE/CATALOG  (удалено)              ║
 * ║    • cgm-discounts.css  .badge-*  (перенесены сюда)            ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * Зависит от: curly-global.css (токены --brand, --fg-1, --border …)
 *
 * Upload to:
 *   /www/wwwroot/curly.sale/wp-content/themes/generatepress-child/assets/css/cgm-card.css
 *
 * @version 1.0.0 (Sprint 24 — Style Standardisation, May 2026)
 */

/* ============================================================
   1. PRODUCTS GRID
   ——————————————————————————————————————————————————————————
   Используется на всех страницах с листингом карточек:
   главная, /descuentos/, archive, taxonomy, /pelo/.
   DS breakpoints: <640 mobile · 640-1024 tablet · >1024 desktop
   ============================================================ */
.cgm-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 640px) {
    .cgm-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .cgm-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 359px) {
    .cgm-products-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   2. CARD SHELL
   ——————————————————————————————————————————————————————————
   DS: border-radius 4px (--radius-md), shadow = none
   Border несёт elevation. Hover: translateY(-2px) + border sage.
   ============================================================ */
.cgm-product-card {
    background: var(--bg-surface);
    border: none;                       /* soft shadow replaces border */
    border-radius: var(--radius-md);    /* 16px */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion), box-shadow var(--motion);
}

.cgm-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Ссылка-обёртка (вся карточка, кроме кнопки «Ver producto») */
.cgm-product-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.cgm-product-card__link:hover {
    text-decoration: none;
    color: inherit;
}

/* ============================================================
   3. CARD IMAGE
   ============================================================ */
.cgm-product-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-page);   /* Mint Mist */
}

.cgm-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
    box-sizing: border-box;
}

.cgm-product-card__no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 40px;
    color: var(--fg-3);
    background: var(--bg-page);
}

/* ============================================================
   4. CARD OVERLAY — badge верхний правый угол
   ——————————————————————————————————————————————————————————
   Унифицированный класс для ДВУХ режимов:
   a) score pill   → .cgm-card-overlay--score
   b) discount tag → .cgm-card-overlay--discount

   Цвет задаётся модификатором:
   Score:    --safe · --caution · --danger
   Discount: .badge-amber · .badge-crimson · .badge-violet
   ============================================================ */
.cgm-card-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    line-height: 1;
    pointer-events: none;
}

/* a) Score pill — круг с цифрой.
   Позиция: горизонтально по центру изображения, центр круга — на нижней границе. */
.cgm-card-overlay--score {
    /* лёгкая карточка (как в плане): score-кружок скрыт; CGM-соответствие
       показывает зелёный чип «CGM OK». Вернуть: display:flex. */
    display: none;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    /* Переопределяем базовый top-right из .cgm-card-overlay */
    top: auto;
    right: auto;
    bottom: 8px;
    left: 50%;
    /* translateY(40%) = опускает на радиус (50%) минус 20% радиуса (10%) */
    transform: translateX(-50%) translateY(40%);
}

.cgm-card-overlay--score.cgm-card-overlay--safe    { background: var(--brand); }
.cgm-card-overlay--score.cgm-card-overlay--caution { background: var(--cgm-amber); }
.cgm-card-overlay--score.cgm-card-overlay--danger  { background: var(--cgm-crimson); }

/* --tl больше не нужен — позиция встроена в .cgm-card-overlay--score */

/* b) Discount tag — «-32%», верхний ЛЕВЫЙ угол (как в плановом дизайне) */
.cgm-card-overlay--discount {
    top: 12px;
    left: 12px;
    right: auto;            /* перебиваем right:8px из базового .cgm-card-overlay */
    padding: 5px 11px;
    font-size: 13px;
    border-radius: var(--radius-sm);    /* 8px */
    letter-spacing: 0.02em;
    transform: none;
}

/* Discount colours — Design System: единый коралловый акцент для всех скидок
   (раньше tier-цвета amber/crimson/violet). Используются и в tab-badge /descuentos/. */
.badge-amber   { background: var(--brand);   color: #fff; }
.badge-crimson { background: var(--brand);   color: #fff; }
.badge-violet  { background: var(--brand);   color: #fff; }

/* ============================================================
   5. CARD BODY
   ——————————————————————————————————————————————————————————
   DS: padding 16px, gap 8px
   ============================================================ */
.cgm-product-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Бренд — micro uppercase, приглушённый (акцент-коралл бережём для CTA/скидок) */
.cgm-product-card__brand {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    line-height: 1;
}

/* Название продукта — sans-serif (Inter), НЕ Fraunces.
   Перебиваем глобальное правило h1–h6 → serif (заголовок карточки = heading). */
.cgm-product-card__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   6. MINI BADGES — Sin sulfatos / Sin siliconas / Sin proteínas
   ——————————————————————————————————————————————————————————
   DS: chip-cgm-ok — bg rgba(74,124,111,0.12), radius 2px
   ============================================================ */
.cgm-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 18px;
}

.cgm-mini-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-full);   /* pill chip */
    white-space: nowrap;
    line-height: 1.4;
    border: none;
}

/* "CGM OK" — success green reserved EXCLUSIVELY for CGM validation */
.cgm-mini-badge--ok {
    background: var(--cgm-success-soft);
    color: var(--cgm-success);
}

.cgm-mini-badge--warn {
    background: rgba(245, 158, 11, 0.16);
    color: #B45309;
}

/* ============================================================
   7. CARD FOOTER — CGM status chip + цена
   ——————————————————————————————————————————————————————————
   Flex row: status слева, цена справа.
   Separator — border-top.
   ============================================================ */
.cgm-product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    border-top: none;          /* лёгкая карточка: без разделителя */
    flex-wrap: wrap;
}

/* CGM status chip */
.cgm-card-status {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: var(--radius-full);   /* pill chip */
    flex-shrink: 0;
    line-height: 1.4;
}

/* --safe = "CGM OK" → success green (reserved); caution/danger keep semantic colours */
.cgm-card-status--safe    { background: var(--cgm-success-soft); color: var(--cgm-success); }
.cgm-card-status--caution { background: rgba(245, 158, 11, 0.16); color: #B45309; }
.cgm-card-status--danger  { background: rgba(232, 34, 10, 0.12);  color: var(--cgm-crimson); }

/* ============================================================
   8. CARD PRICE
   ——————————————————————————————————————————————————————————
   Два варианта:
   a) Обычный листинг: «Desde €6,50»
   b) Скидочный:       «12,59 EUR  ̶2̶0̶,̶9̶9̶ EUR»
   ============================================================ */
.cgm-card-price {
    font-weight: 700;
    color: var(--fg-1);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

/* Скидочный вариант — цена чуть крупнее */
.cgm-card-price--discount .cgm-card-price__current {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg-1);
}

.cgm-card-price__original {
    font-size: 12px;
    font-weight: 400;
    color: var(--fg-3);
    text-decoration: line-through;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* Out-of-stock fallback: precio tachado + etiqueta "Sin stock" */
.cgm-card-price--oos {
    color: var(--fg-3);
    font-weight: 400;
}
.cgm-card-price--oos s {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.cgm-oos-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--fg-3, #999);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================================
   9. BUY BUTTON — «Ver producto →»
   ——————————————————————————————————————————————————————————
   Full-width, крепится к низу карточки снаружи ссылки-обёртки.
   DS: .btn-primary — sage bg, white text, radius 0 0 4px 4px
   ============================================================ */
.cgm-card-buy-btn {
    display: none;          /* лёгкая карточка: вся карточка кликабельна → стр. товара.
                               Вернуть кнопку: display:block (всё ниже сохранено). */
    width: 100%;
    padding: 9px 16px;
    background: var(--brand);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: background var(--motion), transform var(--motion);
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-body, inherit);
}

.cgm-card-buy-btn:hover,
.cgm-card-buy-btn:visited {
    background: var(--brand-hover);
    color: #fff;
    text-decoration: none;
}

.cgm-card-buy-btn:active {
    transform: translateY(1px);
}

/* ============================================================
   10. RESPONSIVE — компактные правки для карточки
   ——————————————————————————————————————————————————————————
   Правки лayout архива (фильтры, wrapper) — в cgm-archive.css.
   ============================================================ */
@media (max-width: 639px) {
    .cgm-product-card__body {
        padding: 12px;
        gap: 6px;
    }

    .cgm-product-card__title {
        font-size: 12px;
    }

    .cgm-card-buy-btn {
        font-size: 12px;
        padding: 8px;
    }

    .cgm-card-overlay--score {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* ============================================================
   11. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cgm-product-card,
    .cgm-card-buy-btn {
        transition: none !important;
        transform: none !important;
    }
}