/*
 * Category as Product Card – CSS
 * Anpassat för Shoptimizer-temat från CommerceGurus.
 *
 * Målet: en markerad kategori ska se identisk ut med
 * omgivande produktkort, med enda skillnaden att ett
 * "Systemprodukt"-badge syns och knappen är annorlunda.
 */

/* ── 1. Återställ product-category-undantag i Shoptimizer ─────────────── */

/*
 * Shoptimizer exkluderar .product-category från skugga och hover-effekter
 * via :not(.product-category). Vårt kort använder INTE klassen product-category
 * utan enbart .type-product, så Shoptimizerss regler gäller automatiskt.
 *
 * Inga overrides behövs här – vi "ärver" rätt stilar gratis.
 */


/* ── 2. Systemprodukt-badge ────────────────────────────────────────────── */

.cap-category-as-product .woocommerce-image__wrapper {
    position: relative; /* säkerställ relativ positionering för badge */
}

.cap-system-badge {
    position:         absolute;
    top:              10px;
    left:             10px;
    background-color: #1a1a2e;      /* Mörk bakgrund – byt till er varumärkesfärg */
    color:            #ffffff;
    font-size:        11px;
    font-weight:      600;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    padding:          4px 9px;
    border-radius:    3px;
    z-index:          5;
    pointer-events:   none;
    line-height:      1.4;
}


/* ── 3. Antal delar-text (ersätter pris-raden) ─────────────────────────── */

.cap-parts-count {
    display:      block;
    font-size:    13px;
    color:        #767676;          /* Matchar Shoptimizerss muted-text */
    margin-top:   2px;
    margin-bottom: 6px;
}


/* ── 4. "Utforska systemet"-knapp ──────────────────────────────────────── */

/*
 * Vi ger knappen samma grundstil som WooCommercees .button,
 * men med en något annorlunda accent så att den skiljer sig
 * från "Lägg i varukorg" visuellt.
 */

.cap-explore-button {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    width:            100%;
    justify-content:  center;

    /* Shoptimizer sätter vanligen bakgrundsfärg via CSS-variabel --color-secondary
       eller --color-primary beroende på tema-inställning.
       Vi använder en outline-stil för att skilja från "lägg i korg". */
    background-color: transparent !important;
    color:            currentColor !important;
    border:           1px solid currentColor !important;
    font-size:        13px;
    font-weight:      600;
    padding:          10px 16px;
    text-decoration:  none;
    transition:       background-color 0.2s ease, color 0.2s ease;
    border-radius:    var(--button-border-radius, 3px);
    line-height:      1;
}

.cap-explore-button:hover,
.cap-explore-button:focus {
    background-color: #1a1a2e !important;  /* Byt till er varumärkesfärg */
    color:            #ffffff !important;
    border-color:     #1a1a2e !important;
    text-decoration:  none;
}

.cap-explore-button svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cap-explore-button:hover svg,
.cap-explore-button:focus svg {
    transform: translateX(3px);
}


/* ── 5. Säkerställ att product-content-header ser likadan ut ───────────── */

/*
 * Shoptimizer lägger .product-content-header inuti produktkort.
 * Vår template skriver ut samma klass, så stilarna ärvs.
 * Vi ser bara till att ankar-taggen inuti inte har understrykning.
 */

.cap-category-as-product .product-content-header a {
    text-decoration: none;
    color:           inherit;
}

.cap-category-as-product .woocommerce-loop-product__title {
    margin-bottom: 4px;
}


/* ── 6. Ta bort hover-skalning på bilden (kategori behöver inte skala) ─── */
/*
 * Valfritt – kommentera bort om ni vill ha skalning även på kategorikortet.
 */
.cap-category-as-product:hover .woocommerce-image__wrapper {
    transform: none;
}
.cap-category-as-product:hover .woocommerce-image__wrapper img {
    transform: scale(0.98);
}