/* Etusivun uudet osiot. Väritokenit style.css:n :root-lohkossa. */

.pe-section {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
    /* Kategoriaosion jälkeen tulee vanhaa UX Builder -sisältöä (esim. venetsialaiset-kortti),
       joka ei ole omaa .pe-section-luokkaamme — margin-top-sääntö osioiden välissä ei siis
       kata tätä siirtymää. margin-bottom varmistaa tilan riippumatta siitä mitä seuraa. */
    margin-bottom: 32px;
}

.pe-section + .pe-section,
.pe-section + .pe-esittely,
.pe-section + .pe-myyntipisteet,
.pe-section + .pe-discord-newsletter {
    margin-top: 56px;
}

/* ── Nostot: etukoodi ja toimituksen hinta ────────────────────────────────────── */

.pe-nostot {
    max-width: 1360px;
    margin: 0 auto 32px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.pe-nosto {
    background: var(--pyronet-white);
    border-radius: 14px;
    box-shadow: 2px 3px 8px #00000029;
    padding: 24px 26px;
    border-top: 4px solid #e7e0d2;
}

.pe-nosto--etu {
    border-top-color: var(--pyronet-kipina);
}

.pe-nosto__title {
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--pyronet-ruuti);
    margin: 8px 0 10px;
}

.pe-nosto__text {
    font-size: 15px;
    line-height: 1.55;
    color: #4a4a4a;
    margin: 0;
}

.pe-nosto__text + .pe-nosto__text {
    margin-top: 10px;
}

.pe-nosto__text--korostus {
    padding-top: 10px;
    border-top: 1px solid #e7e0d2;
    color: var(--pyronet-ruuti);
}

.pe-nosto__cta {
    margin: 14px 0 0;
}

.pe-nosto__koodi {
    display: inline-block;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pyronet-ruuti);
    background: var(--pyronet-kipina);
    border-radius: 6px;
    padding: 2px 8px;
}

.pe-h2 {
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--pyronet-ruuti);
}

.pe-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pe-section-head__right {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Pysyy oikeassa laidassa myös silloin kun rivi rivittyy kapealla näytöllä omalle
       rivilleen (silloin "justify-content:space-between" ei enää vaikuta yksinäiseen riviin). */
    margin-left: auto;
}

.pe-link-all {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.pe-arrow-group {
    display: flex;
    gap: 4px;
}

.pe-arrow {
    width: 38px;
    height: 38px;
    /* Sivuston oma customizer-CSS pakottaa kaikille napeille border-radius:10px!important
       (button:not(.icon)) — ympyrän muoto vaatii saman painoarvon voittaakseen sen. */
    border-radius: 50% !important;
    border: 1px solid var(--pyronet-ruuti);
    background: var(--pyronet-white);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.pe-arrow:hover {
    background: var(--pyronet-kipina);
}

/* ── Kategoriat ───────────────────────────────────────────────────────────────── */

.pe-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 22px;
}

.pe-cat-hero,
.pe-cat-card {
    background: var(--pyronet-white);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: 2px 3px 8px #00000029;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    display: flex;
    flex-direction: column;
}

.pe-cat-hero {
    /* Hero erottuu pysyvästi kevyellä kipinä-reunuksella, ei vain hoverissa. */
    border-color: rgba(253, 200, 87, 0.6);
}

.pe-cat-hero:hover,
.pe-cat-card:hover {
    border-color: var(--pyronet-kipina);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px #0000002e;
}

.pe-cat-hero {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    align-self: stretch;
}

.pe-cat-hero__image {
    position: relative;
    flex: 1;
    min-height: 280px;
    display: grid;
    place-items: center;
    padding: 20px 20px 0;
}

.pe-cat-hero__kipina {
    position: absolute;
    top: 16px;
    right: 16px;
    height: 20px;
    width: auto;
}

.pe-cat-hero__image img:not(.pe-cat-hero__kipina) {
    height: 280px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.pe-cat-hero__body {
    padding: 0 20px 20px;
}

.pe-cat-hero__title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pe-cat-hero__name {
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: var(--pyronet-ruuti);
}

.pe-cat-hero__count {
    font-size: 13px;
    color: var(--pyronet-gray);
}

.pe-cat-hero__pills {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.pe-pill {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 500;
    color: #4a4a4a;
    border: 1px solid #e7e0d2;
    background: #faf7f0;
    border-radius: 999px;
    padding: 6px 13px;
    white-space: nowrap;
    margin: 0 !important;
}

.pe-pill:hover {
    background: var(--pyronet-kipina);
    border-color: var(--pyronet-kipina);
    color: var(--pyronet-ruuti);
}

/* Hero-kortti on nyt tumma (ks. .pe-cat-hero), joten sen pillerit tarvitsevat vaalean
   kontrastin — .pe-pill:n oletustyyli on suunniteltu valkoiselle kortille (myyntipisteosio). */

.pe-cat-card__image {
    height: 132px;
    display: grid;
    place-items: center;
    padding: 16px;
    position: relative;
}

.pe-cat-card__image img:not(.pe-cat-card__kipina) {
    height: 112px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.pe-cat-card__kipina {
    position: absolute;
    top: 10px;
    right: 12px;
    height: 16px;
    width: auto;
}

.pe-cat-card__body {
    margin-top: auto;
    padding: 13px 16px 15px;
    border-top: 1px solid #e7e0d2;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pe-cat-card__name {
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--pyronet-ruuti);
    /* Varataan tilaa kahdelle riville aina, jotta pitkä nimi (esim. "Sähkösytyttimet ja
       -järjestelmät") ei tee kortista muita korkeampaa — kaikki kortit pysyvät samankorkuisina
       riippumatta siitä rivittyykö nimi vai ei. */
    min-height: 34px;
}

.pe-cat-card__count {
    font-size: 11.5px;
    color: var(--pyronet-gray);
}

/* ── Tuotelistat (karuselli + ruudukko) ──────────────────────────────────────── */

.pe-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 22px 2px 8px;
    scrollbar-width: none;
    margin: 0;
}

.pe-carousel::-webkit-scrollbar {
    display: none;
}

.pe-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.pe-product-card {
    background: var(--pyronet-white);
    border-radius: 14px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: 2px 3px 8px #00000029;
    transition: border-color 0.18s;
}

.pe-carousel .pe-product-card {
    flex: 0 0 236px;
    scroll-snap-align: start;
}

.pe-product-card:hover {
    border-color: var(--pyronet-kipina);
}

.pe-product-card__image {
    position: relative;
    display: block;
    height: 186px;
}

.pe-product-card__image img:not(.pe-product-card__brand) {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.pe-product-card__brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 62px;
    height: 26px;
    object-fit: contain;
    object-position: left center;
    z-index: 2;
}

.pe-badge-uutuus {
    position: absolute;
    top: 0;
    right: 0;
    background: #d8262c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: 9px;
    z-index: 2;
}

.pe-product-card__name {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    margin-top: 10px;
    color: var(--pyronet-ruuti);
}

.pe-product-card__price {
    font-size: 20px;
    font-weight: 800;
    color: var(--pyronet-red);
    margin-top: 4px;
}

.pe-product-card__cta {
    margin-top: 12px;
}

/* Toinen luokkaselektori (myös a.added_to_cart-linkille) nostaa spesifisyyden Flatsomen
   a.added_to_cart{padding:10px 0}:n yli — sama spesifisyys ratkeaisi muuten latausjärjestyksellä. */
.pe-product-card__cta a,
.pe-product-card__cta a.added_to_cart {
    display: inline-block;
    background: var(--pyronet-ruuti);
    color: var(--pyronet-kipina);
    padding: 12px 24px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    /* Flatsomen .button-perusluokka asettaa line-height:2.4em ja min-height:2.5em,
       jotka tekevät napista liian korkean ilman näitä ylikirjoituksia. */
    line-height: 1;
    min-height: 0;
    margin: 0;
    letter-spacing: 0.05em;
}

.pe-product-card__cta a:hover {
    background: var(--pyronet-kipina);
    color: var(--pyronet-ruuti);
}

/* ── Napit (yleiset) ──────────────────────────────────────────────────────────── */

.pe-btn {
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 9px;
    padding: 13px 26px;
    white-space: nowrap;
}

.pe-btn--primary {
    background: var(--pyronet-kipina);
    color: var(--pyronet-ruuti);
}

.pe-btn--primary:hover {
    background: #fff;
}

.pe-btn--secondary {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.pe-btn--secondary:hover {
    background: var(--pyronet-kipina);
    color: var(--pyronet-ruuti);
    border-color: var(--pyronet-kipina);
}

.pe-btn--kipina {
    background: var(--pyronet-kipina);
    color: var(--pyronet-ruuti);
}

.pe-btn--kipina:hover {
    background: #fff;
}

.pe-btn--outline {
    border: 1px solid var(--pyronet-ruuti);
    color: var(--pyronet-ruuti);
    border-radius: 999px;
}

.pe-btn--outline:hover {
    background: var(--pyronet-kipina);
}

/* ── Esittelyosio ─────────────────────────────────────────────────────────────── */

.pe-esittely {
    max-width: 1360px;
    margin: 0 auto;
    background: var(--pyronet-ruuti);
    color: #fff;
    border-radius: 14px;
    padding: 36px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 36px;
    align-items: start;
}

.pe-esittely__title {
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    /* Sivuston oma sääntö h1,h2,...{color:#1c1c1c} on suora (ei periytyvä) ja voittaa
       kortin color:#fff:n periytymisen — sama bugi kuin Discord-kortin otsikossa. */
    color: #fff;
}

.pe-esittely__image {
    width: 100%;
    border-radius: 12px;
    margin-top: 22px;
    display: block;
}

.pe-esittely__text {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.pe-esittely__text strong {
    color: var(--pyronet-kipina);
}

.pe-esittely__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Kaksi toissijaista nappia pysyvät aina samalla rivillä yhtenä ryhmänä (eivät koskaan
   erilleen), vaikka koko rivi tilaa napista tilaa ei riittäisi. */
.pe-esittely__buttons-secondary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Myyntipisteet + FAQ ──────────────────────────────────────────────────────── */

/* Kolme rinnakkaista pisteryhmää (varastot / kumppanien noutopisteet / sesonkikaupungit) ja
   niiden yllä koko leveyden otsikkorivi. Aiempi kahden sarakkeen jako kasasi kaiken vasempaan
   sarakkeeseen, jolloin kortista tuli kohtuuttoman korkea ja oikealle jäi iso tyhjä alue. */
.pe-myyntipisteet {
    max-width: 1360px;
    margin: 0 auto;
    background: var(--pyronet-white);
    border-radius: 14px;
    box-shadow: 2px 3px 8px #00000029;
    padding: 32px;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1.3fr);
    gap: 28px 32px;
    align-items: start;
}

.pe-myyntipisteet__header {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 24px;
    flex-wrap: wrap;
}

.pe-myyntipisteet__desc {
    font-size: 16px;
    color: #4a4a4a;
    max-width: 760px;
    margin: 10px 0 0;
}

/* Pisteryhmä = yläotsikko + sen pisteet + mahdollinen huomioteksti. */
.pe-pisteryhma {
    min-width: 0;
}

.pe-ymparivuotiset,
.pe-noutopisteet {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.pe-noutopisteet {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}

/* Yhteinen laatikko molemmille ympärivuotisille pistetyypeille. Kipinäreunus erottaa
   korostetun varastopistetyypin, kuten /myyntipisteet-2026/-sivullakin. */
.pe-pistelaatikko {
    display: block;
    border: 1px solid #e7e0d2;
    border-radius: 10px;
    padding: 9px 11px;
    background: #faf7f0;
    text-decoration: none;
    line-height: 1.35;
}

.pe-pistelaatikko--varasto {
    border-color: var(--pyronet-kipina);
}

a.pe-pistelaatikko:hover {
    border-color: var(--pyronet-kipina);
    box-shadow: 2px 3px 8px #00000029;
}

.pe-pistelaatikko__kaupunki {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--pyronet-ruuti);
}

.pe-pistelaatikko__rivi {
    display: block;
    font-size: 12.5px;
    color: var(--pyronet-gray);
}

.pe-pistelaatikko__paiva {
    display: block;
    font-size: 12px;
    color: #4a4a4a;
    margin-top: 3px;
}

.pe-pisteryhma__note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pyronet-gray);
    margin: 10px 0 0;
}

.pe-pisteryhma__uusi {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--pyronet-ruuti);
    background: var(--pyronet-kipina);
    border-radius: 999px;
    padding: 2px 7px;
    margin-right: 4px;
}

/* Vasta lisätyt sesonkipisteet erottuvat pienellä merkinnällä pillerin sisällä. */
.pe-pill__uusi {
    margin-left: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--pyronet-white);
    background: var(--pyronet-ruuti);
    border-radius: 999px;
    padding: 2px 6px;
}

.pe-eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--pyronet-gray);
}

.pe-kaupunkipillerit {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.pe-pill--kaupunki {
    padding: 5px 12px;
}

.pe-faq__more {
    text-align: center;
    margin-top: 24px;
}

.pe-faq {
    grid-column: 1 / -1;
    border-top: 1px solid #e7e0d2;
    padding-top: 26px;
}

/* Sarakkeet jaetaan PHP:ssä (kiinteä jako), ei CSS Gridillä eikä CSS-monipalstalla: Grid
   venyttäisi rivin kaikki solut korkeimman mukaan (tyhjää tilaa), ja CSS-monipalsta laskisi
   sarakkeet uudelleen aina kun jonkin kysymyksen korkeus muuttuu (kysymykset "hyppisivät"
   sarakkeesta toiseen auki/kiinni-klikkauksessa). Jokainen .pe-faq__column on oma pystysuora
   flex-pino, joka ei koskaan vaikuta muihin sarakkeisiin. */
.pe-faq__grid {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    align-items: flex-start;
}

.pe-faq__column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pe-faq__item {
    border: 1px solid #e7e0d2;
    border-radius: 12px;
    background: #faf7f0;
}

.pe-faq__question {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pyronet-ruuti);
}

.pe-faq__icon {
    font-size: 20px;
    font-weight: 700;
    color: var(--pyronet-gray);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* Liukuanimaatio ilman JS-korkeusmittausta: grid-template-rows 0fr -> 1fr on ainoa CSS-tapa
   animoida kohti "auto"-korkeutta. Sisempi div on pakollinen, koska rivikoko mitataan sen
   sisällön mukaan.

   minmax(0, ...) eikä pelkkä 0fr: fr-radan minimi on oletuksena auto eli sisällön korkeus,
   joten pelkkä 0fr ei kuroudu nollaan vaan jättää sisällöstä kaistaleen näkyviin suljettunakin.
   Sama grid-radan automaattisen minimikoon ansa kuin sarakkeissa (ks. minmax(0, 1fr) muualla
   tässä tiedostossa) — myös sisemmän divin min-height: 0 on siksi pakollinen. */
.pe-faq__answer {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    transition: grid-template-rows 250ms ease;
}

.pe-faq__item--open .pe-faq__answer {
    grid-template-rows: minmax(0, 1fr);
}

.pe-faq__answer-inner {
    min-height: 0;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a4a4a;
    padding: 0 16px 16px;
}

/* ── Discord + uutiskirje ─────────────────────────────────────────────────────── */

.pe-discord-newsletter {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    /* align-items: stretch (oletus) — kortit samankorkuisia. Aiemmin oli align-items:start,
       koska uutiskirjelomakkeessa oli CF7:n <br/>-bugi joka teki siitä turhan korkean; nyt
       kun lomake on korjattu (ks. .wpcf7-form p -sääntö), kortit voivat taas venyä yhtä
       korkeiksi ilman että kumpikaan näyttää tyhjältä. */
    gap: 20px;
}

.pe-discord-card,
.pe-newsletter-card {
    display: flex;
    flex-direction: column;
}

.pe-discord-card {
    background: var(--pyronet-ruuti);
    color: #fff;
    border-radius: 14px;
    padding: 32px;
    border-top: 4px solid var(--pyronet-kipina);
}

.pe-discord-card__title,
.pe-newsletter-card__title {
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* Sivuston oma sääntö h1-h6{color:#1c1c1c} on suora (ei periytyvä) sääntö, joka voittaa
   kortin color:#fff:n periytymisen — otsikon väri pitää asettaa tähän eksplisiittisesti. */
.pe-discord-card__title {
    color: #fff;
}

.pe-discord-card__text {
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
}

.pe-newsletter-card {
    background: var(--pyronet-white);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 2px 3px 8px #00000029;
}

.pe-newsletter-card__text {
    color: #4a4a4a;
    margin: 0 0 16px;
}

/* CF7-lomakkeen todellinen rakenne on .wpcf7-form > div > p > (kenttä + <br/> + nappi) —
   flex pitää kohdistaa tuohon <p>:hen asti, ei .wpcf7-form-elementtiin itseensä, koska
   siinä on vain yksi wrapper-div välissä. <br/> piilotetaan, koska se pudottaisi napin
   omalle rivilleen flex-asettelusta huolimatta. */
.pe-newsletter-card .wpcf7-form p {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.pe-newsletter-card .wpcf7-form br {
    display: none;
}

.pe-newsletter-card .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 200px;
}

.pe-newsletter-card input[type="email"] {
    width: 100%;
    border: 1px solid #e7e0d2;
    background: #faf7f0;
    border-radius: 9px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.pe-newsletter-card input[type="submit"] {
    background: var(--pyronet-ruuti);
    color: var(--pyronet-kipina);
    border-radius: 9px;
    padding: 0 26px;
    border: 0;
    font-weight: 800;
}

.pe-newsletter-card input[type="submit"]:hover {
    background: var(--pyronet-kipina);
    color: var(--pyronet-ruuti);
}

/* ── Mobiiliylikirjoitukset (tarkoituksella tiedoston lopussa) ────────────────── */
/* CSS-kaskadi ratkeaa lähdejärjestyksellä kun spesifisyys on sama: jos ehdollinen
   (media query) sääntö olisi ENNEN sitä korvaavaa ehdotonta perussääntöä tiedostossa,
   perussääntö voittaisi silti aina, vaikka media query täsmäisikin. Siksi kaikki
   mobiiliylikirjoitukset ovat tässä, tiedoston lopussa, kaikkien perussääntöjen jälkeen.
   Tämä oli aiempien vuotojen todellinen juurisyy monessa kohtaa. */
/* Kolme pistesaraketta ahtautuisi tabletilla — kahdelle sarakkeelle ja sesonkikaupungit
   koko leveydelle. Tämä lohko on ennen kapeampia media queryjä, jotta ne voittavat sen. */
@media only screen and (max-width: 64em) {
    .pe-myyntipisteet {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pe-pisteryhma--sesonki {
        grid-column: 1 / -1;
    }
}

@media only screen and (max-width: 48em) {
    /* Kavennetaan sivumarginaali entisestään mobiilissa — sisällön pitäisi käyttää
       lähes koko leveyden, vain pieni marginaali reunoihin. */
    .pe-section,
    .pe-esittely,
    .pe-myyntipisteet,
    .pe-discord-newsletter,
    .pe-nostot {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pe-nostot {
        grid-template-columns: minmax(0, 1fr);
    }

    .pe-nosto {
        padding: 20px;
    }

    .pe-nosto__title {
        font-size: 22px;
    }

    /* Korttien omat sisäpaddaukset (32–36px) syövät lisää leveyttä jo kapealla sivulla —
       kavennetaan nekin mobiilissa. */
    .pe-esittely {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* .pe-myyntipisteet: vain pysty, vaaka on jo kavennettu ylempänä (padding-left/right:12px). */
    .pe-myyntipisteet {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .pe-discord-card,
    .pe-newsletter-card {
        padding: 20px;
    }

    /* Kavennetaan hieman, jotta "Tietoa meistä" + "Miten tilaan?" mahtuvat varmemmin samalle
       riville isommallakin mobiililla ilman että ne pakottaisi vaakavuotoa. */
    .pe-esittely__buttons-secondary .pe-btn {
        padding: 11px 18px;
        font-size: 13.5px;
    }

    /* Aiemmin oli tässä overflow-x:hidden -turvaverkko vaakavuotoja vastaan, mutta se leikkasi
       korttien box-shadow'n terävästi (overflow-x asettaminen muuttaa overflow-y:n
       automaattisesti "auto":ksi CSS:n oman sivuvaikutuksen takia, vaikka overflow-y erikseen
       yritettäisiin pitää "visible":nä). Poistettu kokonaan — todelliset vaakavuotojen syyt
       (kaskadijärjestys, grid-track-minimit) on jo korjattu muualla, joten turvaverkkoa ei
       enää tarvita eikä sen sivuvaikutuksia haluta. */

    /* minmax(196px, 1fr) pakottaa kahdelle sarakkeelle vähintään 196px+196px+väli, mikä ei
       mahdu tavalliselle puhelinnäytölle (~390–414px) — kortit vuotavat näytön reunan yli.
       Kaksi tasan joustavaa saraketta sen sijaan mahtuu aina koko leveydelle. */
    .pe-categories-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    /* Pienemmät karusellikortit mobiilissa, jotta näkyvissä on enemmän kuin yksi kerrallaan. */
    .pe-carousel .pe-product-card {
        flex-basis: 148px;
        padding: 10px;
    }

    .pe-product-card__image {
        height: 118px;
    }

    /* "OSTOSKORIIN"-napin oma paddaus+fontti (12px 24px / 13.5px) ei mahdu 148px kortin
       sisään (148 - 2×15px paddaus = 118px sisältöleveys) — nappi pakotti kortin näkyvästi
       leveämmäksi kuin flex-basis, mikä söi tilan toiselta kortilta. Kavennetaan. */
    .pe-carousel .pe-product-card__cta a {
        padding: 8px 10px;
        font-size: 11px;
        letter-spacing: 0.02em;
    }

    .pe-carousel .pe-product-card__name {
        font-size: 13px;
    }

    .pe-carousel .pe-product-card__price {
        font-size: 16px;
    }

    /* Sama riski kapeimmilla puhelimilla (esim. 320–375px leveät): auto-fit/minmax(320–340px)
       on niin lähellä sisältöleveyttä paddauksen jälkeen, että se voi vuotaa. Pakotetaan yksi
       sarake sen sijaan että luotettaisiin minmax-kynnykseen. */
    .pe-esittely,
    .pe-discord-newsletter {
        grid-template-columns: minmax(0, 1fr);
    }

    .pe-cat-hero {
        grid-column: span 2;
        grid-row: span 1;
    }

    .pe-cat-hero__image {
        min-height: 0;
        padding: 16px 16px 0;
    }

    .pe-cat-hero__image img:not(.pe-cat-hero__kipina) {
        height: 150px;
    }
}

@media only screen and (max-width: 47.5em) {
    .pe-myyntipisteet {
        grid-template-columns: minmax(0, 1fr);
    }

    .pe-faq__grid {
        flex-direction: column;
        /* align-items:flex-start pätee alkuperäiseen vaakariviin (poikittaisakseli=korkeus).
           Kun pääakseli kääntyy pystyksi, sama arvo tekisi sarakkeista vain sisältönsä
           levyisiä leveyden venymisen sijaan — juuri se aiheutti FAQ-korttien vuodon yli
           näytön reunan. */
        align-items: stretch;
    }
}