/*
Theme Name: Storefront Lapsi
Template: storefront
*/

/*
body::before {
  content: "Tämä on testi – pinkki tausta!";
  display: block;
  width: 100%;
  background: #ffc0cb;
  color: #111;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 16px 0;
  margin-bottom: 20px;
  z-index: 9999;
  position: relative;
}*/

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fa-solid-900.woff2') format('woff2');
  font-display: swap;               /* näyttäytyy heti fallbackillä */
}

.responsive-kuvalinkit {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  margin: 24px 0;
}

.responsive-kuvalinkit figure {
  margin: 0;
  padding: 0;
  flex: 1 1 240px;
  max-width: 320px;
  min-width: 180px;
  box-sizing: border-box;
  display: flex;               /* MUUTETTU: otetaan käyttöön flex-asettelu */
  flex-direction: column;      /* LISÄTTY: kuva ja teksti allekkain */
  align-items: center;         /* LISÄTTY: keskittää kuvan ja tekstin */
  justify-content: flex-start; /* LISÄTTY: asettaa elementit yläreunaan */
}

.responsive-kuvalinkit img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 2px 16px #0001;
  transition: transform 0.2s;
}

.responsive-kuvalinkit img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px #0002;
}

.responsive-kuvalinkit figcaption {
  text-align: center;
  font-size: 1.1rem;
  margin-top: 8px;
  color: #222;
  font-weight: 500;
  letter-spacing: 0.02em;
  width: 100%;             /* LISÄTTY: varmistaa keskityksen */
  display: block;          /* LISÄTTY: estää mahdollisen asetteluvirheen */
}

/* Responsiivisuus: alle 700px ruuduilla allekkain */
@media (max-width: 700px) {
  .responsive-kuvalinkit {
    flex-direction: column;
    gap: 16px;
  }
  .responsive-kuvalinkit figure {
    max-width: 100%;
  }
}


/* FACEBOOK – lisää teksti ikonista oikealle */
.wp-block-social-links .wp-social-link-facebook a::after {
    content: " Seuraa Facebookissa";
    margin-left: 6px;
    font-size: 14px;
    color: #000; /* voit muuttaa */
}

/* INSTAGRAM – lisää teksti ikonista oikealle */
.wp-block-social-links .wp-social-link-instagram a::after {
    content: " Seuraa Instagramissa";
    margin-left: 6px;
    font-size: 14px;
    color: #000; /* voit muuttaa */
}


.putkia-vismapay-banner-under-description {
    margin: 18px 0 28px 0;
    text-align: left;
}

.putkia-vismapay-banner-under-description img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.putkia-vismapay-banner-inline {
    margin: 0 0 24px 0;
    text-align: left;
}

.putkia-vismapay-banner-inline img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.putkia-vismapay-banner-cart-checkout {
    margin: 0 0 24px 0;
    text-align: left;
}

.putkia-vismapay-banner-cart-checkout img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}