/* ==========================================================================
   FRONT PAGE — styled to match volttikauppa.fi
   (components/_banner, _icon-box(es), _highlights, _link-box(es),
   gutenberg/blocks/_featured-products, layout/_entry-content)

   Markup on this site is core Gutenberg blocks + the [products] shortcode,
   so the production selectors are mapped onto those elements here.
   ========================================================================== */

/* Treat the page wrapper like production's .entry-content: full width,
   each section sizes itself. */
.home #site-main > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Top-level text blocks: centred, narrow column (entry-content rules). */
.home #site-main > .container > h1,
.home #site-main > .container > h2,
.home #site-main > .container > h3,
.home #site-main > .container > p,
.home #site-main > .container > ul,
.home #site-main > .container > ol {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 3rem;
  max-width: 45rem;
}
.home #site-main > .container > h1,
.home #site-main > .container > h2,
.home #site-main > .container > h3 {
  margin-top: 4rem;
  font-weight: 700;
}

/* An empty columns block (placeholder) should not take space. */
.home #site-main > .container > .wp-block-columns:not(:has(p, a, img, h2, h3, figure)) {
  display: none;
}

/* ==========================================================================
   BANNER (core cover block styled as production .banner)
   ========================================================================== */
.home #site-main > .container > .wp-block-group.is-nowrap {
  display: block;
  margin: 0;
  padding: 0;
}
.home .wp-block-cover {
  position: relative;
  width: 100%;
  min-height: 28rem;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  border-radius: 0;
  aspect-ratio: auto;
}
@media (min-width: 50rem) {
  .home .wp-block-cover { min-height: 30rem; }
}
@media (min-width: 80rem) {
  .home .wp-block-cover { min-height: 36rem; }
}

.home .wp-block-cover .wp-block-cover__image-background {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  aspect-ratio: auto;
}
/* Narrow screens: the cover grows with the text, and some mobile browsers size the
   <img> by its own aspect ratio, leaving bands above and below. Paint the same photo
   as a background on the cover itself so the whole block is always covered. */
@media (max-width: 59.98rem) {
  /* Some mobile browsers size the <img> by its own aspect ratio; hide it there and
     let the cover's own background (below) paint the photo edge to edge. */
  .home .wp-block-cover .wp-block-cover__image-background { display: none !important; }
  .home .wp-block-cover { min-height: 32rem; }
  .home .wp-block-cover {
    background-image: url("/wp-content/uploads/2022/08/banner.jpg");
    /* zoom past the flat sky at the top of the square photo so clouds and panels fill the block */
    background-size: auto 150%;
    background-position: 50% 58%;
    background-repeat: no-repeat;
    background-color: #06283d;
  }
}
@media (min-width: 60rem) {
  /* Production shows the photo on the right 80 % with the gradient on top. */
  .home .wp-block-cover .wp-block-cover__image-background {
    left: auto;
    right: 0;
    width: 80%;
  }
}

/* Gradient overlay (production .banner__background) */
/* Narrow screens: a lighter, even overlay so the photo stays visible behind the
   whole block (production's near-solid bottom hid the panels on tall phone layouts). */
.home .wp-block-cover .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(
    0deg,
    rgba(6, 40, 61, 0.78) 0%,
    rgba(6, 40, 61, 0.6) 35%,
    rgba(6, 40, 61, 0.5) 70%,
    rgba(6, 40, 61, 0.55) 100%
  ) !important;
}
@media (max-width: 59.98rem) {
  .home .wp-block-cover .wp-block-cover__image-background { object-position: 50% 45% !important; }
}
@media (min-width: 60rem) {
  .home .wp-block-cover .wp-block-cover__background {
    background: linear-gradient(
      90deg,
      #06283d 31.77%,
      rgba(6, 40, 61, 0.9) 50.4%,
      rgba(6, 40, 61, 0.8) 55.21%,
      rgba(6, 40, 61, 0.735135) 59.9%,
      rgba(6, 40, 61, 0.4) 70.83%,
      rgba(6, 40, 61, 0.25) 81.25%,
      rgba(0, 153, 255, 0.25) 100%
    ) !important;
  }
}

/* Content (production .banner__content.container) */
.home .wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 85rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* WP's constrained-layout CSS sets margin-left/right: auto !important on
   these children, so the overrides need !important too. */
.home .wp-block-cover .wp-block-cover__inner-container > * {
  max-width: none !important;
  margin: 8px 0 !important;
  text-align: left;
}
@media (min-width: 60rem) {
  .home .wp-block-cover .wp-block-cover__inner-container > * {
    width: 60%;
    margin: 1rem 0 !important;
  }
}
.home .wp-block-cover h1 {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  color: #fff !important;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
}
.home .wp-block-cover p {
  font-size: 16px !important;
  line-height: 30px;
  color: #fff !important;
  text-shadow: none;
}
@media (min-width: 60rem) {
  .home .wp-block-cover h1 { font-size: 34px; line-height: 44px; }
  .home .wp-block-cover p { font-size: 18px !important; }
}

/* Buttons (production .banner__buttons .btn) */
.home .wp-block-cover .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 60rem) {
  .home .wp-block-cover .wp-block-buttons { gap: 2rem; }
}
.home .wp-block-cover .wp-block-button { margin: 0; }
.home .wp-block-cover .wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: 12px 10px;
  font-size: 12px;
  border: 2px solid;
  border-radius: 40px;
  background: transparent;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.4s;
}
@media (min-width: 40rem) {
  .home .wp-block-cover .wp-block-button .wp-block-button__link {
    padding: 1rem 1.75rem;
    font-size: 16px;
    border-width: 3px;
  }
}
.home .wp-block-cover .wp-block-button .wp-block-button__link:hover { opacity: 0.4; }
.home .wp-block-cover .wp-block-button:nth-child(odd) .wp-block-button__link {
  color: #47b5ff !important;
  border-color: #47b5ff !important;
}
.home .wp-block-cover .wp-block-button:nth-child(even) .wp-block-button__link {
  color: #f9f871 !important;
  border-color: #f9f871 !important;
}

/* ==========================================================================
   FEATURED PRODUCTS ([products] shortcode styled as production cards)
   ========================================================================== */
.home #site-main > .container > h2:has(+ .woocommerce) {
  max-width: 85rem;
  text-align: left;
  font-weight: 700;
  font-size: 24px;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
@media (min-width: 50rem) {
  .home #site-main > .container > h2:has(+ .woocommerce) {
    margin-bottom: 3rem;
    font-size: 30px;
  }
}

.home #site-main > .container > .woocommerce {
  max-width: 85rem;
  margin: 0 auto 4rem;
  padding: 0 1rem;
}
.home ul.products {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 2rem;
  list-style: none;
  margin: 0 !important;
  padding: 0;
}
.home ul.products::before,
.home ul.products::after { display: none; }
@media (min-width: 35rem) {
  .home ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 40rem) {
  .home ul.products { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 80rem) {
  .home ul.products {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2rem;
    row-gap: 3rem;
  }
}
@media (min-width: 100rem) {
  .home ul.products { grid-template-columns: repeat(6, 1fr); }
}

.home ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.3s ease;
  background-color: #fff;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
  min-height: 100%;
}
.home ul.products li.product:hover { transform: translateY(-6px); }

.home ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: #000;
}
.home ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0;
}
.home ul.products li.product .woocommerce-loop-product__title {
  font-size: 12px;
  line-height: 1.45;
  color: #000;
  font-weight: 700;
  padding: 0 0.5rem;
  margin: 0.75rem 0 0.5rem;
}
@media (min-width: 50rem) {
  .home ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
}
@media (min-width: 60rem) {
  .home ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }
}
.home ul.products li.product .price {
  display: block;
  padding: 0 0.5rem;
  margin: 0 0 0.5rem;
  color: #000;
}
.home ul.products li.product .price > * { display: block; }
.home ul.products li.product .price del { text-decoration: line-through; }
.home ul.products li.product .price .screen-reader-text { display: none; }

/* Production cards show no badge or stock text. */
.home ul.products li.product .onsale,
.home ul.products li.product .product-flash,
.home ul.products li.product .availability,
.home ul.products li.product .custom-stock-wrapper,
.home ul.products li.product .added_to_cart,
.home ul.products li.product .product-brand-logo,
.home ul.products li.product .product-brand-name {
  display: none !important;
}

.home ul.products li.product .button {
  display: block;
  position: relative;
  font-size: 12px;
  color: #fff;
  background-color: #1363df;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0;
  width: 100%;
  margin: 0.75rem 0 0;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  transition: opacity 0.3s ease;
}
@media (min-width: 60rem) {
  .home ul.products li.product .button {
    font-size: 14px;
    margin-top: 1rem;
  }
}
@media (min-width: 100rem) {
  .home ul.products li.product .button { font-size: 16px; }
}
.home ul.products li.product .button:hover { opacity: 0.7; }
.home ul.products li.product .button.loading { opacity: 0.5; }

/* ==========================================================================
   ICON BOXES
   ========================================================================== */
.home .icon-boxes-wrapper {
  padding-top: 5rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media (min-width: 60rem) {
  .home .icon-boxes-wrapper {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
}
.home .icon-boxes-wrapper > .wp-block-group__inner-container { max-width: none; }
.home .icon-boxes-title {
  margin: 0 0 8rem;
  font-weight: 700;
}
.home .icon-boxes {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10rem !important;
}
@media (min-width: 60rem) {
  .home .icon-boxes { grid-template-columns: 1fr 1fr !important; }
}
.home .icon-box {
  position: relative;
  background-color: #06283d;
  color: #fff;
  padding: 6rem 2.5rem 2.5rem;
  border-radius: 4px;
}
@media (min-width: 50rem) {
  .home .icon-box { padding: 6rem 3.5rem 3.5rem; }
}
.home .icon-box > .wp-block-group__inner-container { max-width: none; }
.home .icon-box > .wp-block-group__inner-container > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.home .icon-box > .wp-block-group__inner-container > * + * { margin-top: 1rem; }
@media (min-width: 60rem) {
  .home .icon-box > .wp-block-group__inner-container > * + * { margin-top: 2rem; }
}
.home .icon-box .wp-block-image {
  position: absolute;
  top: -75px;
  margin: 0;
  width: 150px;
  height: 150px;
}
.home .icon-box .wp-block-image img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.home .icon-box:hover .wp-block-image img {
  animation: MoveUpDown 1.5s ease-in-out infinite;
}
.home .icon-box h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0;
}
.home .icon-box p { color: #fff; }
.home .icon-box .wp-block-buttons { gap: 2rem; }
.home .icon-box .wp-block-button { margin: 0; }
.home .icon-box .wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: 1rem 2rem;
  border: 3px solid #47b5ff;
  border-radius: 40px;
  background: transparent;
  color: #47b5ff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.4s;
}
.home .icon-box .wp-block-button .wp-block-button__link:hover { opacity: 0.4; }

/* ==========================================================================
   MEDIA + TEXT
   ========================================================================== */
.home #site-main > .container > .wp-block-media-text {
  width: 100%;
  max-width: 85rem;
  margin: 6rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 60rem) {
  .home #site-main > .container > .wp-block-media-text { margin: 10rem auto; }
}
.home .wp-block-media-text img { border-radius: 4px; }
.home .wp-block-media-text__content > * { margin-bottom: 2rem; }
.home .wp-block-media-text__content h2 {
  font-weight: 700;
  margin-top: 0;
}

/* ==========================================================================
   LINK BOXES (if/when added as a group with .link-boxes / .link-box)
   ========================================================================== */
.home .link-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 50rem) {
  .home .link-boxes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 80rem) {
  .home .link-boxes { grid-template-columns: 1fr 1fr 1fr; }
}
.home .link-box {
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 190px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 24px;
  font-weight: 600;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.3s ease;
  border-radius: 4px;
}
.home .link-box:hover { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5); }

/* ==========================================================================
   HIGHLIGHTS
   ========================================================================== */
.home .highlights-wrapper { margin-top: 8rem; }
@media (min-width: 60rem) {
  .home .highlights-wrapper { margin-top: 12rem; }
}
.home .highlights-wrapper > .wp-block-group__inner-container { max-width: none; }
.home .highlights-title {
  margin: 0 0 3rem;
  font-weight: 700;
}
@media (min-width: 60rem) {
  .home .highlights-title { margin-bottom: 5rem; }
}
.home .highlights {
  display: grid !important;
  gap: 2rem !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 50rem) {
  .home .highlights { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 80rem) {
  .home .highlights { grid-template-columns: repeat(4, 1fr) !important; }
}
.home .highlight > .wp-block-group__inner-container { max-width: none; }
.home .highlight > .wp-block-group__inner-container > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.home .highlight .wp-block-image {
  margin: 0;
  width: 80px;
  height: 80px;
}
.home .highlight .wp-block-image img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.home .highlight h3 {
  font-weight: 700;
  margin: 1rem 0;
}

/* ==========================================================================
   Clickable containers (kept from the previous theme JS)
   ========================================================================== */
.clickable-container {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.clickable-container:hover { transform: translateY(-2px); }