/* Yhteinen teema: värit, mitat ja perustyylit, joita etusivu ja myymäläsivut käyttävät.
   Muuttujat ovat :root-tasolla, mutta ne eivät vaikuta mihinkään ennen kuin niitä käytetään.
   Komponenttiluokat alkavat fy-, jotta ne eivät törmää main.css:n vanhoihin luokkiin. */

:root {
    --fy-accent: #FFD300;
    --fy-accent-hover: #F2C200;
    --fy-accent-soft: #FFF8D6;
    --fy-red: #E41A1B;
    --fy-red-soft: #FDECEC;
    --fy-red-dark: #B5121A;
    --fy-blue-soft: #EEF4FB;
    --fy-blue-border: #CFE0F3;
    --fy-text: #1f1f1f;
    --fy-muted: #5c5c5c;
    --fy-border: #e4e4e4;
    --fy-surface: #f7f7f5;
    --fy-link: #1f63b5;
    --fy-link-hover: #0f4a8f;
    --fy-radius: 10px;
    --fy-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Kortti: vaalea pinta, ohut reuna, pyöristetyt kulmat (vrt. myymäläsivujen .store-card) */
.fy-card {
    position: relative;
    box-sizing: border-box;
    background: var(--fy-surface);
    border: 1px solid var(--fy-border);
    border-radius: var(--fy-radius);
    color: var(--fy-text);
    overflow: hidden;
}

/* Värilliset korttiversiot */

/* Keltainen: vahva brändiväri */
.fy-card--yellow {
    --fy-card-link: var(--fy-text);
    --fy-card-link-hover: var(--fy-text);
    background: var(--fy-accent);
    border-color: var(--fy-accent-hover);
}

    .fy-card--yellow .fy-title {
        border-left-color: var(--fy-text);
    }

    .fy-card--yellow .fy-price {
        background: var(--fy-text);
        color: #fff;
    }

    .fy-card--yellow .fy-link {
        color: var(--fy-text);
    }

/* Punainen: valkoinen teksti */
.fy-card--red {
    --fy-card-link: #fff;
    --fy-card-link-hover: var(--fy-accent);
    background: var(--fy-red);
    border-color: var(--fy-red-dark);
    color: #fff;
}

    .fy-card--red .fy-title {
        border-left-color: #fff;
        color: #fff;
    }

    .fy-card--red .fy-link {
        color: #fff;
    }

        .fy-card--red .fy-link:hover {
            color: var(--fy-accent);
        }

    .fy-card--red .fy-chip {
        border-color: #fff;
    }

        .fy-card--red .fy-chip:hover,
        .fy-card--red .fy-chip:focus-visible {
            background: var(--fy-accent);
            border-color: var(--fy-accent);
        }

/* Sininen: rauhallinen infokortti */
.fy-card--blue {
    background: var(--fy-blue-soft);
    border-color: var(--fy-blue-border);
}

    .fy-card--blue .fy-title {
        border-left-color: var(--fy-link);
    }

/* Klikattava kortti */
.fy-card-link {
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .fy-card-link:hover {
        box-shadow: var(--fy-shadow-hover);
        transform: translateY(-2px);
    }

/* Otsikko keltaisella vasemmalla reunalla (vrt. .store-section h3) */
.fy-title {
    margin: 0 0 14px 0;
    padding: 0 0 0 12px;
    border-left: 5px solid var(--fy-accent);
    background: none;
    color: var(--fy-text);
    font-weight: 700;
    font-size: 1.45em;
    line-height: 1.25;
}

/* Punainen korostus (vanha .redH2) */
.fy-title--red {
    border-left-color: var(--fy-red);
}

/* Tekstilinkki */
.fy-link {
    color: var(--fy-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

    .fy-link:hover {
        color: var(--fy-link-hover);
    }

/* Linkkinappi (pilleri) */
.fy-chip {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--fy-border);
    border-radius: 999px;
    color: var(--fy-text);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

    .fy-chip:hover,
    .fy-chip:focus-visible {
        background: var(--fy-accent-soft);
        border-color: var(--fy-accent);
        color: var(--fy-text);
        text-decoration: none;
    }

/* Painikkeet: pääpainike keltainen, toissijainen ääriviivoin */
.fy-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 11px 22px;
    border: 2px solid var(--fy-accent);
    border-radius: 999px;
    background: var(--fy-accent);
    color: var(--fy-text);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .fy-btn:hover,
    .fy-btn:focus-visible {
        background: var(--fy-accent-hover);
        border-color: var(--fy-accent-hover);
        color: var(--fy-text);
        text-decoration: none;
    }

.fy-btn--outline {
    background: #fff;
    border-color: var(--fy-text);
}

    .fy-btn--outline:hover,
    .fy-btn--outline:focus-visible {
        background: var(--fy-accent-soft);
        border-color: var(--fy-text);
    }

/* Hinta */
.fy-price {
    display: inline-block;
    padding: 1px 9px;
    background: var(--fy-accent);
    color: var(--fy-text);
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
}

/* Banneri */
.fy-banner {
    display: block;
}

    .fy-banner img,
    img.fy-banner {
        display: block;
        border-radius: var(--fy-radius);
    }

/* Ylläpitäjän muokkauslaatikko */
.fy-admin {
    box-sizing: border-box;
    margin: 12px 0;
    padding: 12px 16px;
    background: #EEF4FB;
    border: 1px dashed var(--fy-link);
    border-radius: 6px;
}