/*
Theme Name: Sesderma
Description: Тема сайту Sesderma Україна: власна шапка з меню «Продукція» (за потребою, лінією, типом засобу) і мобільним меню; сторінки, підвал і шаблони магазину — Elementor.
Author: mrakells
Version: 1.0.0
Requires PHP: 8.1
Text Domain: sesderma
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*---------------- Woocommerce ----------------*/
/* Checkout */
#billing_country_field,
#shipping_country_field {
  display: none;
}

/* Adjust height in products cards on archive Woo pages */
.products .product > .eael-product-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.onsale,
.outofstock-badge {
  display: none !important;
}

/* Light WooCommerce buttons matching the site's neutral palette. */
:is(.woocommerce, .woocommerce-page)
  :is(a.button, button.button, input.button, a.added_to_cart),
.wc-block-components-button:not(.is-link) {
  background-color: #212b36 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--e-global-typography-accent-font-family, "Montserrat"), sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

:is(.woocommerce, .woocommerce-page)
  :is(a.button, button.button, input.button, a.added_to_cart):is(:hover, :focus),
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
  background-color: #2f455e !important;
  color: #fff !important;
}

:is(.woocommerce, .woocommerce-page)
  :is(a.button, button.button, input.button, a.added_to_cart):focus-visible,
.wc-block-components-button:not(.is-link):focus-visible {
  outline: 2px solid #94a5c1;
  outline-offset: 2px;
}

/* The parent theme fixes every select at 200px, which cuts off the sorting labels. */
.woocommerce-ordering select.orderby {
  width: auto;
  max-width: 100%;
}

/*---------------- Home ----------------*/
/* Hero slider (Elementor Slides): the slide height follows the banner images instead of a fixed
   px height, so slides get neither empty bands (contain) nor cropped edges (cover).
   5492aac — desktop and tablet, images 2560×832; 24780ad — mobile, images 1280×1280. */
.elementor-widget-slides:is(.elementor-element-5492aac, .elementor-element-24780ad)
  .elementor-slides-wrapper .elementor-slides .swiper-slide {
  height: auto;
  aspect-ratio: 2560 / 832;
}

.elementor-widget-slides.elementor-element-24780ad
  .elementor-slides-wrapper .elementor-slides .swiper-slide {
  aspect-ratio: 1;
}

.elementor-widget-slides:is(.elementor-element-5492aac, .elementor-element-24780ad)
  .elementor-slides-wrapper .swiper-slide .swiper-slide-bg {
  background-size: cover;
}

/* The only portrait mobile banner (513×642): keep its headline, crop the bottom. */
.elementor-widget-slides.elementor-element-24780ad
  .elementor-slides-wrapper .elementor-repeater-item-a32571f .swiper-slide-bg {
  background-position: center top;
}