/* ═══════════════════════════════════════════════════════════
   Sähkolaudat.fi – WooCommerce Archive / Category
   Musta-valkoinen design – yhteensopiva hello-elementor-child
═══════════════════════════════════════════════════════════ */

/* ── Muuttujat ───────────────────────────────────────────── */
:root {
    --wca-black:   #0a0a0a;
    --wca-dark:    #1a1a1a;
    --wca-mid:     #6b7280;
    --wca-light:   #f8f8f8;
    --wca-border:  #e5e7eb;
    --wca-white:   #ffffff;
    --wca-red:     #dc2626;
    --wca-green:   #16a34a;
    --wca-amber:   #d97706;
    --wca-radius:  12px;
    --wca-radius-lg: 20px;
    --wca-shadow:  0 4px 24px rgba(0,0,0,.07);
    --wca-shadow-lg: 0 12px 48px rgba(0,0,0,.12);
    --wca-trans:   all 0.28s cubic-bezier(.4,0,.2,1);
}

/* ── Layout-reset – neutralisoi teeman ylimääräiset wrapit ── */
.wca-page .woocommerce-breadcrumb,
.wca-page .woocommerce-result-count,
.wca-page .woocommerce-ordering {
    display: none !important;
}

/* ── WC Notices – "Tuote lisätty ostoskoriin" ym. ─────────── */
.wca-page .woocommerce-notices-wrapper {
    margin-bottom: 24px;
}
.wca-page .woocommerce-message {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--wca-white);
    border: 1.5px solid var(--wca-green);
    border-left: 4px solid var(--wca-green);
    border-radius: var(--wca-radius);
    padding: 16px 20px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--wca-black);
    box-shadow: 0 2px 12px rgba(22, 163, 74, .1);
    animation: wcaNoticeIn .4s ease-out;
}
.wca-page .woocommerce-message::before {
    content: none !important;
}
.wca-page .woocommerce-message a.button,
.wca-page .woocommerce-message a.restore-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wca-black) !important;
    color: var(--wca-white) !important;
    font-size: .82rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--wca-radius);
    text-decoration: none !important;
    white-space: nowrap;
    transition: var(--wca-trans);
    border: none !important;
    order: -1;
}
.wca-page .woocommerce-message a.button:hover {
    background: #333 !important;
    transform: translateY(-1px);
    box-shadow: var(--wca-shadow);
}
.wca-page .woocommerce-error {
    display: block !important;
    background: var(--wca-white);
    border: 1.5px solid var(--wca-red);
    border-left: 4px solid var(--wca-red);
    border-radius: var(--wca-radius);
    padding: 16px 20px;
    font-size: .9rem;
    color: var(--wca-black);
    animation: wcaNoticeIn .4s ease-out;
}
.wca-page .woocommerce-error::before {
    content: none !important;
}
.wca-page .woocommerce-info {
    display: block !important;
    background: var(--wca-white);
    border: 1.5px solid var(--wca-border);
    border-left: 4px solid var(--wca-black);
    border-radius: var(--wca-radius);
    padding: 16px 20px;
    font-size: .9rem;
    color: var(--wca-black);
    animation: wcaNoticeIn .4s ease-out;
}
.wca-page .woocommerce-info::before {
    content: none !important;
}
@keyframes wcaNoticeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hello Elementor saattaa lisätä ylimääräisiä padding/margin ─ */
.wca-page .entry-content,
.wca-page .content-area {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ── Container ───────────────────────────────────────────── */
.wca-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.wca-hero {
    background: var(--wca-light);
    padding: 52px 0 44px;
    border-bottom: 1px solid var(--wca-border);
    position: relative;
    overflow: hidden;
}

/* Ruudukkopattern taustalle */
.wca-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 100% at 0% 50%, black 40%, transparent 100%);
    pointer-events: none;
}

/* Hero kategoriakuvalla */
.wca-hero--has-img {
    padding: 80px 0 72px;
    color: var(--wca-white);
}
.wca-hero__bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.wca-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1;
}
.wca-hero--has-img .wca-container { position: relative; z-index: 2; }

/* Breadcrumb */
.wca-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--wca-mid);
    margin-bottom: 20px;
}
.wca-breadcrumb a {
    color: var(--wca-mid);
    text-decoration: none;
    transition: color .2s;
}
.wca-breadcrumb a:hover { color: var(--wca-black); text-decoration: none; }
.wca-breadcrumb__current { color: var(--wca-black); font-weight: 600; }
.wca-hero--has-img .wca-breadcrumb,
.wca-hero--has-img .wca-breadcrumb a,
.wca-hero--has-img .wca-breadcrumb__current { color: rgba(255,255,255,.65); }

.wca-hero__body { max-width: 680px; }
.wca-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--wca-black);
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.wca-hero--has-img .wca-hero__title { color: var(--wca-white); }
.wca-hero__desc {
    font-size: .975rem;
    color: var(--wca-mid);
    line-height: 1.7;
    margin-bottom: 18px;
    max-width: 560px;
}
.wca-hero--has-img .wca-hero__desc { color: rgba(255,255,255,.65); }

.wca-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.wca-count-pill {
    font-size: .78rem;
    font-weight: 700;
    background: var(--wca-white);
    border: 1.5px solid var(--wca-border);
    color: var(--wca-black);
    padding: 4px 12px;
    border-radius: 100px;
}
.wca-hero--has-img .wca-count-pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: var(--wca-white);
}
.wca-trust-pill {
    font-size: .78rem;
    font-weight: 600;
    color: var(--wca-mid);
}
.wca-hero--has-img .wca-trust-pill { color: rgba(255,255,255,.5); }

/* ══════════════════════════════════════════════════════════
   CONVERSION – Trust Bar
══════════════════════════════════════════════════════════ */
.wca-conversion {
    padding-bottom: 8px;
}
.wca-trust-bar {
    background: var(--wca-black);
    color: var(--wca-white);
    padding: 20px 0;
}
.wca-trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.wca-trust-bar__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wca-trust-bar__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wca-trust-bar__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wca-trust-bar__text strong {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.wca-trust-bar__text span {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   CONVERSION – USP Cards
══════════════════════════════════════════════════════════ */
.wca-usps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 0 0;
}
.wca-usp-card {
    background: var(--wca-white);
    border: 1.5px solid var(--wca-border);
    border-radius: var(--wca-radius-lg);
    padding: 28px 24px;
    text-align: center;
    transition: var(--wca-trans);
}
.wca-usp-card:hover {
    border-color: var(--wca-black);
    box-shadow: var(--wca-shadow);
    transform: translateY(-3px);
}
.wca-usp-card__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 14px;
}
.wca-usp-card__title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--wca-black);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.wca-usp-card__desc {
    font-size: .82rem;
    color: var(--wca-mid);
    line-height: 1.6;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   CONVERSION – CTA Banner
══════════════════════════════════════════════════════════ */
.wca-cta-banner {
    margin-top: 36px;
    background: linear-gradient(135deg, #f0f0f0 0%, #f8f8f8 100%);
    border: 1.5px solid var(--wca-border);
    border-radius: var(--wca-radius-lg);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.wca-cta-banner__body {
    flex: 1;
}
.wca-cta-banner__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--wca-black);
    margin: 0 0 6px;
}
.wca-cta-banner__desc {
    font-size: .88rem;
    color: var(--wca-mid);
    margin: 0;
    line-height: 1.6;
}
.wca-cta-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wca-black);
    color: var(--wca-white) !important;
    font-size: .9rem;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--wca-radius);
    text-decoration: none !important;
    transition: var(--wca-trans);
    white-space: nowrap;
}
.wca-cta-banner__btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: var(--wca-shadow);
    text-decoration: none !important;
    color: var(--wca-white) !important;
}

/* ══════════════════════════════════════════════════════════
   SEO Content – osaston kuvaus WordPressistä
══════════════════════════════════════════════════════════ */
.wca-seo-content {
    margin-top: 48px;
    padding: 40px;
    background: var(--wca-light);
    border: 1.5px solid var(--wca-border);
    border-radius: var(--wca-radius-lg);
}
.wca-seo-content__body {
    max-width: 780px;
}
.wca-seo-content__body h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--wca-black);
    margin: 32px 0 12px;
    letter-spacing: -.02em;
}
.wca-seo-content__body h2:first-child {
    margin-top: 0;
}
.wca-seo-content__body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wca-black);
    margin: 24px 0 8px;
}
.wca-seo-content__body p {
    font-size: .9rem;
    line-height: 1.8;
    color: var(--wca-mid);
    margin: 0 0 14px;
}
.wca-seo-content__body ul,
.wca-seo-content__body ol {
    padding-left: 20px;
    margin: 0 0 16px;
}
.wca-seo-content__body li {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--wca-mid);
    margin-bottom: 6px;
}
.wca-seo-content__body strong {
    color: var(--wca-black);
    font-weight: 700;
}
.wca-seo-content__body a {
    color: var(--wca-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity .2s;
}
.wca-seo-content__body a:hover {
    opacity: .7;
}

/* ══════════════════════════════════════════════════════════
   FAQ Section – tuotteiden alla
══════════════════════════════════════════════════════════ */
.wca-post-products {
    padding: 0 0 80px;
}
.wca-faq {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
}
.wca-faq__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--wca-black);
    margin: 0 0 24px;
    text-align: center;
    letter-spacing: -.02em;
}
.wca-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wca-faq__item {
    border-bottom: 1.5px solid var(--wca-border);
}
.wca-faq__item:first-child {
    border-top: 1.5px solid var(--wca-border);
}
.wca-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: .95rem;
    font-weight: 700;
    color: var(--wca-black);
    transition: color .2s;
}
.wca-faq__question:hover,
.wca-faq__question:focus,
.wca-faq__question:active,
.wca-faq__question:focus-visible {
    color: #555;
    background: none !important;
    background-color: transparent !important;
    outline: none;
    box-shadow: none;
}
.wca-faq__chevron {
    flex-shrink: 0;
    transition: transform .25s ease;
    color: var(--wca-mid);
}
.wca-faq__question[aria-expanded="true"] .wca-faq__chevron {
    transform: rotate(180deg);
}
.wca-faq__answer {
    padding: 0 4px 20px;
}
.wca-faq__answer p {
    font-size: .88rem;
    color: var(--wca-mid);
    line-height: 1.75;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   CONVERSION – Responsive
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wca-trust-bar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .wca-usps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .wca-trust-bar { padding: 16px 0; }
    .wca-trust-bar__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .wca-trust-bar__icon {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
        border-radius: 8px;
    }
    .wca-trust-bar__text strong { font-size: .75rem; }
    .wca-trust-bar__text span { font-size: .65rem; }

    .wca-usps {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 24px 0 0;
    }
    .wca-usp-card {
        padding: 20px 14px;
        border-radius: var(--wca-radius);
    }
    .wca-usp-card__icon { font-size: 1.5rem; margin-bottom: 10px; }
    .wca-usp-card__title { font-size: .82rem; }
    .wca-usp-card__desc { font-size: .73rem; }

    .wca-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        margin-top: 24px;
    }
    .wca-cta-banner__title { font-size: 1.05rem; }
    .wca-cta-banner__desc { font-size: .82rem; }
    .wca-cta-banner__btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    .wca-faq { padding-top: 10px; }
    .wca-faq__title { font-size: 1.2rem; margin-bottom: 16px; }
    .wca-faq__question { font-size: .88rem; padding: 16px 2px; }
    .wca-faq__answer p { font-size: .82rem; }
    .wca-post-products { padding: 0 12px 56px; }

    .wca-seo-content {
        padding: 24px 20px;
        margin-top: 32px;
        border-radius: var(--wca-radius);
    }
    .wca-seo-content__body h2 { font-size: 1.15rem; margin-top: 24px; }
    .wca-seo-content__body h3 { font-size: 1rem; }
    .wca-seo-content__body p,
    .wca-seo-content__body li { font-size: .82rem; }

    .wca-page .woocommerce-message {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
        font-size: .82rem;
    }
    .wca-page .woocommerce-message a.button {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
        order: 1;
    }
}

/* ══════════════════════════════════════════════════════════
   SHOP WRAPPER
══════════════════════════════════════════════════════════ */
.wca-shop-wrap {
    padding: 40px 24px 80px;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.wca-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid var(--wca-border);
    flex-wrap: wrap;
}
.wca-toolbar .woocommerce-result-count {
    display: block !important;
    font-size: .85rem;
    color: var(--wca-mid);
    margin: 0;
}
.wca-toolbar__count .woocommerce-result-count { display: block !important; }
.wca-toolbar__sort .woocommerce-ordering { display: block !important; }

.wca-toolbar .woocommerce-ordering select,
.woocommerce-ordering select {
    font-size: .875rem;
    font-weight: 600;
    color: var(--wca-black);
    background: var(--wca-white);
    border: 1.5px solid var(--wca-border);
    border-radius: var(--wca-radius);
    padding: 8px 36px 8px 14px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: var(--wca-trans);
    outline: none;
}
.woocommerce-ordering select:focus,
.woocommerce-ordering select:hover {
    border-color: var(--wca-black);
}

/* ══════════════════════════════════════════════════════════
   PRODUCT GRID – tuotteet-lista
══════════════════════════════════════════════════════════ */
.wca-page ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}
.wca-page ul.products::before,
.wca-page ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD – .wca-card
══════════════════════════════════════════════════════════ */
.wca-card {
    background: var(--wca-white);
    border: 1.5px solid var(--wca-border);
    border-radius: var(--wca-radius-lg);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    transition: var(--wca-trans);
    width: auto !important; /* WC lisää fixed width – resetoi */
    float: none !important;
    padding: 0 !important;
}
.wca-card:hover {
    border-color: var(--wca-black);
    box-shadow: var(--wca-shadow-lg);
    transform: translateY(-5px);
}

/* Kuva-alue */
.wca-card__img-link {
    display: block;
    position: relative;
    text-decoration: none;
}
.wca-card__img-wrap {
    background: #ffffff;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;        /* pieni hengitystila reunoilla */
}
.wca-card__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;  /* koko tuote näkyy, ei rajaudu */
    transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.wca-card:hover .wca-card__img {
    transform: scale(1.07);
}

/* Badget */
.wca-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}
.wca-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
}
.wca-badge--sale     { background: #fee2e2; color: var(--wca-red); }
.wca-badge--featured { background: var(--wca-black); color: var(--wca-white); }

/* Custom badge (kuvan alla, body:n sisällä) */
.wca-card__custom-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 10px;
    border-radius: 100px;
    line-height: 1.4;
    margin-bottom: 4px;
}

/* Kortin sisältö */
.wca-card__body {
    padding: 16px 18px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    align-items: center;   /* vaakasuunta: keskitys */
    text-align: center;    /* tekstit keskelle */
}
.wca-card__cat {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wca-mid);
}
.wca-card__name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    flex: 1;          /* venyttää nimen tilaa → hinta+saatavuus samalle tasolle */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.wca-card__name a {
    color: var(--wca-black);
    text-decoration: none;
    display: block;
    width: 100%;
}
.wca-card__name a:hover {
    color: #333;
    text-decoration: none;
}

/* Lyhyt kuvaus – speksit */
.wca-card__specs {
    font-size: .78rem;
    color: var(--wca-mid);
    line-height: 1.65;
}
.wca-card__specs p { margin: 0; }
/* WC:n emoji-speksit erotellaan omalle riville */
.wca-card__specs br { display: block; content: ''; }

/* Tähdet */
.wca-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wca-card__rating .star-rating {
    font-size: .85rem !important;
    color: #f59e0b !important;
}
.wca-card__rating-num {
    font-size: .75rem;
    color: var(--wca-mid);
}

/* Hinta */
.wca-card__price-row { margin-top: 4px; }
.wca-card__price ins,
.wca-card__price .price ins {
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 1.3rem;
    color: var(--wca-black) !important;
}
.wca-card__price del,
.wca-card__price .price del {
    font-size: .85rem !important;
    color: var(--wca-mid) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--wca-mid) !important;
    font-weight: 400 !important;
    margin-right: 6px;
    opacity: 1 !important;
}
.wca-card__price .price,
.wca-card__price .amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--wca-black);
}
/* WooCommerce lisää bdi-tagin valuutan ympärille */
.wca-card__price .woocommerce-Price-currencySymbol { font-size: 1rem; }

/* Free shipping badge */
.wca-card__free-ship {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--wca-black);
    background: var(--wca-light);
    border: 1px solid var(--wca-border);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 4px;
}

/* ── Shipping / availability info ──────────────────────────
   Replaces the old dot-based availability indicator.
   ──────────────────────────────────────────────────────────── */
.wca-card__shipping {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 6px;
    font-size: .72rem;
    line-height: 1.4;
    text-align: center;
}
.wca-card__shipping span:first-child {
    font-weight: 700;
}
.wca-card__shipping--local  span:first-child { color: var(--wca-green); }
.wca-card__shipping--central span:first-child { color: var(--wca-green); }
.wca-card__shipping--order  span:first-child { color: var(--wca-amber); }
.wca-card__shipping--oos    span:first-child { color: var(--wca-red); }
.wca-card__shipping span:not(:first-child) {
    color: var(--wca-mid);
    font-size: .68rem;
}

/* ── (legacy) Saatavuusstatus – pallerot + tekstit ────────
   Sama rakenne kuin functions.php:ssä:
   <div class="availability {class}">
     <span class="status"></span>  ← palleropiste
     <span>teksti</span>
   </div>
─────────────────────────────────────────────────────────── */
.wca-card .availability {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.4;
}
.wca-card .availability .status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    /* Poistetaan style.css:n lisäämä ✓ checkmark-ikoni */
    font-size: 0 !important;
    line-height: 0 !important;
}
.wca-card .availability .status::before,
.wca-card .availability .status::after {
    content: none !important;
}

/* Saatavilla heti – vihreä */
.wca-card .availability.in-stock         { color: var(--wca-green); }
.wca-card .availability.in-stock .status {
    background: var(--wca-green);
    box-shadow: 0 0 0 3px rgba(22,163,74,.18);
    animation: wcaStatusPulse 2s ease-in-out infinite;
}

/* Keskusvarasto (kaikki variantit) – vihreä */
.wca-card .availability.keskusvarasto,
.wca-card .availability.keskusvarasto2,
.wca-card .availability.keskusvarasto3         { color: var(--wca-green); }
.wca-card .availability.keskusvarasto .status,
.wca-card .availability.keskusvarasto2 .status,
.wca-card .availability.keskusvarasto3 .status {
    background: var(--wca-green);
    box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}

/* Tilapäisesti loppu – punainen */
.wca-card .availability.out-of-stock         { color: var(--wca-red); }
.wca-card .availability.out-of-stock .status {
    background: var(--wca-red);
    box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}

/* Tilattavissa (backorder) – amber */
.wca-card .availability.backorder         { color: var(--wca-amber); }
.wca-card .availability.backorder .status {
    background: var(--wca-amber);
}

@keyframes wcaStatusPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
    50%      { box-shadow: 0 0 0 5px rgba(22,163,74,.08); }
}

/* ── Hintarivi + functions.php:n sla-badget ───────────────── */
.wca-card__price {
    display: flex;
    flex-direction: column;
    align-items: center;   /* hinta + badget keskelle */
    gap: 4px;
    width: 100%;
    text-align: center;
}
/* sla-price-amount sisältää del+ins hinnat */
.wca-card__price .sla-price-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Saatavuusviesti keskelle */
.wca-card .availability {
    justify-content: center;
}

/* Ostospainike-alue */
.wca-card__footer {
    padding: 12px 18px 18px;
    margin-top: auto;
    width: 100%;   /* painike koko leveys */
}
.wca-card__footer .button,
.wca-card__footer a.button,
.wca-card__footer .wca-add-to-cart {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--wca-black) !important;
    color: var(--wca-white) !important;
    border: 2px solid var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    padding: 11px 16px !important;
    cursor: pointer;
    transition: var(--wca-trans) !important;
    text-decoration: none !important;
}
.wca-card__footer .button:hover,
.wca-card__footer a.button:hover {
    background: #333 !important;
    border-color: #333 !important;
    transform: none !important;
    text-decoration: none !important;
}
/* "Lisätty ostoskoriin" -tila */
.wca-card__footer .added_to_cart {
    display: block;
    text-align: center;
    font-size: .8rem;
    color: var(--wca-green);
    font-weight: 600;
    margin-top: 6px;
}
.wca-card__footer .added.button::after {
    content: ' ✓';
}

/* ══════════════════════════════════════════════════════════
   SIVUTUS
══════════════════════════════════════════════════════════ */
.wca-pagination {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}
.wca-pagination .woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: none !important;
}
.wca-pagination .woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    flex-wrap: wrap;
    justify-content: center;
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background: none !important;
}
.wca-pagination .woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul li {
    margin: 0 !important;
    border: none !important;
    border-right: none !important;
    background: none !important;
    float: none !important;
    overflow: visible !important;
}
.wca-pagination .woocommerce-pagination ul li a,
.wca-pagination .woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--wca-radius) !important;
    border: 1.5px solid var(--wca-border) !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    color: var(--wca-black) !important;
    background: var(--wca-white) !important;
    text-decoration: none !important;
    transition: var(--wca-trans) !important;
}
.wca-pagination .woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: var(--wca-black) !important;
    background: var(--wca-black) !important;
    color: var(--wca-white) !important;
    text-decoration: none !important;
}
.wca-pagination .woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--wca-black) !important;
    border-color: var(--wca-black) !important;
    color: var(--wca-white) !important;
}

/* ══════════════════════════════════════════════════════════
   TYHJÄ OSASTO
══════════════════════════════════════════════════════════ */
.wca-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--wca-mid);
    font-size: 1rem;
}
.wca-empty .woocommerce-info {
    background: var(--wca-light);
    border-left: 3px solid var(--wca-black);
    padding: 16px 20px;
    border-radius: var(--wca-radius);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════════
   WC-viestit
══════════════════════════════════════════════════════════ */
.wca-page .woocommerce-message,
.wca-page .woocommerce-error,
.wca-page .woocommerce-info {
    border-radius: var(--wca-radius);
    border-left-width: 4px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIIVISUUS
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wca-page ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .wca-hero { padding: 32px 0 28px; }
    .wca-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .wca-shop-wrap { padding: 20px 12px 56px; }
    .wca-container { padding: 0 12px; }

    /* 2 tuotetta vierekkäin – tiivis ruudukko */
    .wca-page ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Kuva-alue matalampi */
    .wca-card__img-wrap {
        aspect-ratio: 1 / 1;
        padding: 8px;
    }

    /* Kortin sisältö tiiviimpi */
    .wca-card__body {
        padding: 10px 10px 2px;
        gap: 4px;
    }

    /* Tuotteen nimi pienempi */
    .wca-card__name { font-size: .82rem; }

    /* Piilota speksit mobiilissa – säästää tilaa */
    .wca-card__specs { display: none; }

    /* Tähdet piiloon */
    .wca-card__rating { display: none; }

    /* Hinta pienempi */
    .wca-card__price ins,
    .wca-card__price .price ins,
    .wca-card__price .price,
    .wca-card__price .amount {
        font-size: 1rem !important;
    }
    .wca-card__price del,
    .wca-card__price .price del {
        font-size: .75rem !important;
    }

    /* Saatavuusteksti pienempi */
    .wca-card .availability { font-size: .68rem; }

    /* Painike tiiviimpi */
    .wca-card__footer { padding: 8px 10px 12px; }
    .wca-card__footer .button,
    .wca-card__footer a.button {
        font-size: .78rem !important;
        padding: 9px 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   SCF PLUGIN – Mustavalkoinen brändi-override
   Korvaa pluginin siniset värit child themen väreillä
══════════════════════════════════════════════════════════ */

/* ── SCF Variables override ─────────────────────────── */
.wca-page .scf-wrapper {
    --scf-primary: var(--wca-black);
    --scf-primary-hover: #333;
    --scf-border: var(--wca-border);
    --scf-background: var(--wca-light);
    --scf-surface: var(--wca-white);
    --scf-text-dark: var(--wca-black);
    --scf-text-muted: var(--wca-mid);
    margin-bottom: 8px;
}

/* ── Mobile Toggle ──────────────────────────────────── */
.wca-page .scf-mobile-toggle {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: var(--wca-shadow) !important;
}
.wca-page .scf-mobile-toggle:hover {
    background: #222 !important;
    box-shadow: var(--wca-shadow-lg) !important;
}
.wca-page .scf-mobile-toggle[aria-expanded="true"] {
    background: #111 !important;
    box-shadow: var(--wca-shadow) !important;
}

/* ── SEO Content Box ────────────────────────────────── */
.wca-page .scf-seo-content {
    background: var(--wca-light) !important;
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius-lg) !important;
    box-shadow: none !important;
}
.wca-page .scf-seo-title {
    color: var(--wca-black) !important;
    letter-spacing: -.02em !important;
}

/* ── Filter Container ───────────────────────────────── */
.wca-page .scf-filter-container {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius-lg) !important;
    box-shadow: var(--wca-shadow) !important;
    margin-bottom: 28px !important;
}
.wca-page .scf-filter-container:hover {
    border-color: var(--wca-black) !important;
    box-shadow: var(--wca-shadow-lg) !important;
}
.wca-page .scf-filter-inner {
    background: linear-gradient(to bottom, var(--wca-white) 0%, var(--wca-light) 100%) !important;
}
.wca-page .scf-filter-header {
    border-bottom: 1.5px solid var(--wca-border) !important;
}
.wca-page .scf-filter-icon {
    color: var(--wca-black) !important;
}
.wca-page .scf-filter-title {
    color: var(--wca-black) !important;
}

/* ── Select Fields ──────────────────────────────────── */
.wca-page .scf-filter-select {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
}
.wca-page .scf-filter-select:focus {
    border-color: var(--wca-black) !important;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, .08) !important;
}
.wca-page .scf-filter-select:hover {
    border-color: #999 !important;
}

/* ── Primary Button (Hae) ───────────────────────────── */
.wca-page .scf-filter-btn-primary {
    background: var(--wca-black) !important;
    border: 2px solid var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.wca-page .scf-filter-btn-primary:hover {
    background: #333 !important;
    border-color: #333 !important;
    box-shadow: var(--wca-shadow) !important;
    transform: translateY(-2px) !important;
}
.wca-page .scf-filter-btn-primary:active {
    background: #111 !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* ── Secondary Button (Tyhjennä) ────────────────────── */
.wca-page .scf-filter-btn-secondary {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
    color: var(--wca-black) !important;
}
.wca-page .scf-filter-btn-secondary:hover {
    border-color: var(--wca-black) !important;
    background: var(--wca-light) !important;
}

/* ── Active Filter Badge ────────────────────────────── */
.wca-page .scf-filter-active {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── Details Toggle ─────────────────────────────────── */
.wca-page .scf-details-toggle {
    background: var(--wca-white) !important;
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
    color: var(--wca-black) !important;
}
.wca-page .scf-details-toggle:hover {
    border-color: var(--wca-black) !important;
    background: var(--wca-light) !important;
}
.wca-page .scf-details-toggle[aria-expanded="true"] {
    background: var(--wca-black) !important;
    border-color: var(--wca-black) !important;
    color: var(--wca-white) !important;
}
.wca-page .scf-details-toggle[aria-expanded="true"] * {
    color: var(--wca-white) !important;
}

/* ── Brand/Model Info ───────────────────────────────── */
.wca-page .scf-brand-info,
.wca-page .scf-model-info {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
}
.wca-page .scf-brand-info h2,
.wca-page .scf-model-info h2 {
    border-bottom-color: var(--wca-border) !important;
    color: var(--wca-black) !important;
}
.wca-page .scf-model-issues {
    background: #fefce8 !important;
    border-color: var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
}

/* ── FAQ inside plugin ──────────────────────────────── */
.wca-page .scf-faq-item {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
}
.wca-page .scf-faq-item:hover {
    border-color: var(--wca-black) !important;
    box-shadow: var(--wca-shadow) !important;
}
.wca-page .scf-faq-question::before {
    color: var(--wca-black) !important;
}

/* ── Buying Guide ───────────────────────────────────── */
.wca-page .scf-buying-guide {
    border-left-color: var(--wca-black) !important;
    background: var(--wca-light) !important;
    border-radius: var(--wca-radius) !important;
}

/* ── Cross-Links ────────────────────────────────────── */
.wca-page .scf-cross-links {
    border-top-color: var(--wca-border) !important;
}
.wca-page .scf-cross-links-title svg {
    color: var(--wca-black) !important;
}
.wca-page .scf-cross-links-mobile-toggle {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
}
.wca-page .scf-cross-links-mobile-toggle:hover {
    background: #222 !important;
}
.wca-page .scf-cross-links-mobile-toggle[aria-expanded="true"] {
    background: #111 !important;
}
.wca-page .scf-cross-link-item {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
}
.wca-page .scf-cross-link-item::before {
    background: linear-gradient(90deg, rgba(0,0,0,.03) 0%, transparent 100%) !important;
}
.wca-page .scf-cross-link-item:hover {
    border-color: var(--wca-black) !important;
    box-shadow: var(--wca-shadow) !important;
    transform: translateX(3px) !important;
}
.wca-page .scf-cross-link-item:hover .scf-cross-link-name {
    color: var(--wca-black) !important;
}
.wca-page .scf-cross-link-item:hover .scf-cross-link-arrow {
    color: var(--wca-black) !important;
}

/* ── Show More Categories ───────────────────────────── */
.wca-page .scf-show-more-categories {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
}
.wca-page .scf-show-more-categories:hover {
    background: #222 !important;
}
.wca-page .scf-show-more-categories[aria-expanded="true"] {
    background: #111 !important;
}

/* ── Spare Parts Request Form ───────────────────────── */
.wca-page .scf-kukirin-banner {
    background: var(--wca-light) !important;
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
}
.wca-page .scf-kukirin-banner-text p {
    color: var(--wca-mid) !important;
}
.wca-page .scf-kukirin-toggle-btn {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
}
.wca-page .scf-kukirin-request-box {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius-lg) !important;
    box-shadow: var(--wca-shadow-lg) !important;
}
.wca-page .scf-kukirin-header {
    background: var(--wca-light) !important;
    border-bottom-color: var(--wca-border) !important;
}
.wca-page .scf-kukirin-title {
    color: var(--wca-black) !important;
}
.wca-page .scf-kukirin-close-btn {
    background: var(--wca-black) !important;
    border-radius: 6px !important;
}
.wca-page .scf-section {
    border: 1.5px solid var(--wca-border) !important;
    border-radius: var(--wca-radius) !important;
    background: var(--wca-light) !important;
}
.wca-page .scf-section-number {
    background: var(--wca-black) !important;
}
.wca-page .scf-remove-section-btn {
    background: var(--wca-black) !important;
}
.wca-page .scf-kukirin-input:focus,
.wca-page .scf-kukirin-textarea:focus {
    border-color: var(--wca-black) !important;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, .06) !important;
}
.wca-page .scf-kukirin-input:hover,
.wca-page .scf-kukirin-textarea:hover {
    border-color: #999 !important;
}
.wca-page .scf-add-part-btn,
.wca-page .scf-add-section-btn {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
}
.wca-page .scf-remove-part-btn {
    background: var(--wca-black) !important;
    border-radius: 8px !important;
}
.wca-page .scf-kukirin-submit-btn {
    background: var(--wca-black) !important;
    border-radius: var(--wca-radius) !important;
    box-shadow: none !important;
}
.wca-page .scf-kukirin-submit-btn:hover {
    background: #333 !important;
}
.wca-page .scf-kukirin-submit-btn:disabled {
    background: #999 !important;
}
.wca-page .scf-kukirin-message.success {
    background: #ecfdf5 !important;
    border-color: var(--wca-green) !important;
    color: #065f46 !important;
}
.wca-page .scf-kukirin-message.error {
    background: #fef2f2 !important;
    border-color: var(--wca-red) !important;
    color: #991b1b !important;
}

/* ── Kukirin landing banneri osastosivulla ──────────────── */
.wca-kukirin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    margin: 16px auto 0;
    background: var(--wca-dark);
    color: #fff !important;
    border-radius: var(--wca-radius);
    text-decoration: none !important;
    transition: background .2s;
}
.wca-kukirin-banner:hover { background: #333; }
.wca-kukirin-banner__text {
    font-size: .9rem;
    font-weight: 500;
}
.wca-kukirin-banner__cta {
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff !important;
}
@media (max-width: 600px) {
    .wca-kukirin-banner {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 14px 16px;
    }
}
