:root{ --thonem-radius: 16px; }

/* Make Thonem loader overlay play nicely with template */
.thonem-loader,
#preload{ z-index: 99999; }

/* Normalize links with template */
a{ text-decoration: none; }

/* Small utility for server-rendered validation messages */
.velvet-alert{ padding:12px 14px; border-radius: 12px; margin: 12px 0; }
.velvet-alert--error{ background: rgba(220,70,70,.08); border:1px solid rgba(220,70,70,.25); }
.velvet-alert--success{ background: rgba(25,135,84,.08); border:1px solid rgba(25,135,84,.25); }

/* Mini cart badge */
.velvet-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; font-size:12px; line-height:18px; background:#DC4646; color:#fff; }

/*
 * Bootstrap 5 input-group compatibility.
 *
 * The theme bundle includes the input-group children but omits the base flex
 * contract. Framework widgets such as form_phone() therefore place the
 * country selector and number field on separate rows. Keep the repair at the
 * Bootstrap component boundary so individual forms need no markup overrides.
 */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 5;
}

.input-group > .input-group-prepend,
.input-group > .input-group-append {
  display: flex;
  flex: 0 0 auto;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[dir="rtl"] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: var(--bs-border-radius, 5px);
  border-bottom-right-radius: var(--bs-border-radius, 5px);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-right: -1px;
  margin-left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius, 5px);
  border-bottom-left-radius: var(--bs-border-radius, 5px);
}

/* Prevent layout shifts on images */
img{ height:auto; }

/* Match the inlined first-paint geometry after the full CSS has loaded. */
.ec-main-slider .ec-slider {
  width: 100%;
  height: min(80vh, 36.8229167vw);
  overflow: hidden;
  contain: layout paint;
}
.ec-main-slider .swiper-wrapper,
.ec-main-slider .ec-slide-item { height: 100%; }
.ec-main-slider .ec-slide-picture,
.ec-main-slider .ec-slide-image { display: block; width: 100%; height: 100%; }
.ec-main-slider .ec-slide-image { object-fit: cover; }

/*
 * Desktop navigation and mega menu.
 *
 * Dedicated component classes deliberately replace the previous `d-flex` and
 * `d-block` utility classes. The base theme applies flex layout to every UL
 * inside `.ec-main-menu`; component-specific rules keep the four brand columns
 * predictable and every link list vertical.
 */
@media (min-width: 992px) {
  .ec-main-menu-slot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 50px;
  }

  .ec-main-menu-slot > #ec-main-menu-desk {
    width: 100%;
  }

  .ec-main-menu-slot > .sticky-nav.menu_fixed,
  .ec-main-menu-slot > .sticky-nav.menu_fixed_up {
    top: 0;
    transform: translate3d(0, 0, 0);
    transition: transform .22s ease;
    will-change: transform;
  }

  .ec-main-menu-slot > .sticky-nav.menu_fixed_up {
    transform: translate3d(0, -100%, 0);
  }

  .ec-main-menu > .ec-menu-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    min-height: 50px;
  }

  .ec-main-menu > .ec-menu-list > li {
    flex: 0 0 auto;
    margin-right: clamp(12px, 1.4vw, 22px);
    margin-left: clamp(12px, 1.4vw, 22px);
  }

  .ec-main-menu > .ec-menu-list > .ec-mega-menu-parent {
    position: static !important;
  }

  .ec-main-menu > .ec-menu-list > .ec-mega-menu-parent > .ec-mega-menu {
    display: block;
    position: absolute !important;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 70px);
    margin: 8px 0 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid #e8edf3;
    border-top: 2px solid #3474d4;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 45px rgba(31, 41, 55, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events: none;
  }

  .ec-main-menu > .ec-menu-list > .ec-mega-menu-parent:hover > .ec-mega-menu,
  .ec-main-menu > .ec-menu-list > .ec-mega-menu-parent:focus-within > .ec-mega-menu {
    margin-top: 8px;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
    pointer-events: auto;
  }

  .ec-main-menu .ec-mega-menu > .ec-mega-menu__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 26px;
    width: 100%;
    margin: 0 !important;
    padding: 30px 34px 34px;
    box-sizing: border-box;
  }

  .ec-main-menu .ec-mega-menu .ec-mega-menu__column {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    text-align: start;
  }

  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > li {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0;
  }

  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > li > a {
    display: block !important;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 8px;
    color: #667085;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    white-space: normal;
    transition: color .16s ease, background-color .16s ease;
  }

  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > li > a:hover,
  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > li > a:focus-visible {
    color: #225eb8 !important;
    background: #f3f7fd;
    outline: none;
  }

  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > .menu_title > a {
    margin: 0 0 8px;
    padding: 0 0 11px;
    border-bottom: 2px solid #e8edf3;
    border-radius: 0;
    color: #344054;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
  }

  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > .menu_title > a:hover,
  .ec-main-menu .ec-mega-menu .ec-mega-menu__column > .menu_title > a:focus-visible {
    color: #225eb8 !important;
    background: transparent;
    border-bottom-color: #3474d4;
  }
}

@media (max-width: 991px) {
  .ec-main-slider .ec-slider { height: clamp(300px, 50vh, 520px); }
}

@media (max-width: 575px) {
  .ec-main-slider .ec-slider { height: 300px; }
}

@media (max-width: 480px) {
  .ec-main-slider .ec-slider { height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-main-menu .ec-mega-menu,
  .ec-main-menu .ec-mega-menu a {
    transition: none !important;
  }
}

/* -------------------------------------------------
   Product-card image normalization
   ------------------------------------------------- */
.ec-product-content {
  display: flex;
}

.ec-product-content > .ec-product-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.ec-product-inner .ec-pro-image-outer,
.ec-product-inner .ec-pro-image {
  width: 100%;
}

.ec-product-inner .ec-pro-image {
  aspect-ratio: 1 / 1;
}

.ec-product-inner .ec-pro-image .image {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

.ec-product-inner .ec-pro-image .image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ec-product-inner .ec-pro-image .image img,
.ec-product-inner .ec-pro-image .image picture img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Labels remain visible without blocking the product link below them. */
.ec-product-inner .ec-pro-image .flags,
.ec-product-inner .ec-pro-image .percentage {
  pointer-events: none;
}

.ec-product-inner .ec-pro-content {
  flex: 1 1 auto;
}