/* ════════════════════════════════
   CATALOG · NOS PLANCHES (spécifique)
   Hérite de catalog-category.css pour le hero + base carte.
   Ajoute : grille 2 col cartes hautes, sélecteur de taille (size pills).
════════════════════════════════ */

/* Note : les classes `.hp-hero-title-line` et `.hp-hero-title-stamp` (qui
   stampent un mot du h1 avec le tampon jaune de la home) sont définies dans
   catalog-category.css → dispo sur toutes les pages catégorie. */

/* Cartes plus hautes que la base (image grande + 3 tailles + footer) */
.cc-planches-card {
    /* La carte ne contraint pas sa hauteur - laisse le contenu pousser */
}

/* Sélecteur de taille (3 pills) */
.cc-planches-card .cc-card-pills {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.cc-planches-card .cc-card-pill {
    flex: 1 1 0;
    min-width: 0;
    background: var(--cc-pill-bg);
    border-radius: 20px;
    padding: 14px 8px;
    text-align: center;
    color: #000;
    font-family: var(--cc-font-body);
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.cc-planches-card .cc-card-pill-name {
    display: block;
    font-weight: 400;
    margin-bottom: 2px;
}

.cc-planches-card .cc-card-pill-price {
    display: block;
    font-weight: 700;
}

.cc-planches-card .cc-card-pill:hover {
    background: var(--cc-orange-2);
    color: #fff;
    transform: translateY(-2px);
}

.cc-planches-card .cc-card-pill--selected {
    background: var(--cc-red);
    color: #fff;
}

.cc-planches-card .cc-card-pill--selected:hover {
    background: var(--cc-red);
    transform: translateY(-2px);
}

/* ─── Promo sur une taille (planche) ─── */
.cc-planches-card .cc-card-pill--promo {
    background: rgba(232, 90, 40, 0.10);
    border-color: var(--cc-red);
}
.cc-planches-card .cc-card-pill--promo:hover {
    background: var(--cc-red);
    color: #fff;
}
.cc-planches-card .cc-card-pill--promo.cc-card-pill--selected {
    background: var(--cc-red);
    color: #fff;
}
.cc-planches-card .cc-card-pill-price-strike {
    display: inline-block;
    margin-left: 4px;
    color: var(--cc-grey, #b6a99a);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    font-size: 0.82em;
}
.cc-planches-card .cc-card-pill--selected .cc-card-pill-price-strike,
.cc-planches-card .cc-card-pill:hover .cc-card-pill-price-strike {
    color: rgba(255, 255, 255, 0.7);
}

/* Bouton CTA noir uniquement sur la première carte (visuel "vedette" comme Figma) */
.cc-planches-grid .cc-planches-card:first-child .cc-card-cta {
    background: #000;
}

.cc-planches-grid .cc-planches-card:first-child .cc-card-cta:hover {
    background: var(--cc-red);
}