/* The SSR header needs the existing runtime reset before Nuxt hydration. */
html[data-en-home] body{margin:0;background:#ededed}
html[data-en-home] .header-topbar .tabs-item{margin:0;padding:0;list-style:none}
/* EN homepage only. Preserve the desktop layout and use its archived mobile assets below 700px. */
@media screen and (max-width: 1220px) {
  html[data-en-home],
  html[data-en-home] body,
  html[data-en-home] #__nuxt,
  html[data-en-home] #__layout,
  html[data-en-home] #app.app-wrap,
  html[data-en-home] .app-container,
  html[data-en-home] .pageContainer,
  html[data-en-home] #products,
  html[data-en-home] #about {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  html[data-en-home] body {
    margin: 0;
  }

  html[data-en-home] #app.app-wrap {
    height: auto;
  }

  html[data-en-home] #products .banner,
  html[data-en-home] #products .banner .carrousel-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto !important;
    aspect-ratio: 13 / 5;
    overflow: hidden;
  }

  html[data-en-home] #products .banner .carrousel-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  html[data-en-home] #products .product-context {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: #fff;
  }

  html[data-en-home] #about {
    padding: 64px 8%;
    scroll-margin-top: 54px;
  }

  html[data-en-home] #about p {
    width: 100%;
    max-width: none;
    overflow-wrap: anywhere;
  }

  html[data-en-home] #about img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }

  html[data-en-home] .divider {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 700px) {
  html[data-en-home] #products .banner,
  html[data-en-home] #banner {
    width: 100%;
    height: auto !important;
    min-width: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  html[data-en-home] #products .banner .carrousel-wrap,
  html[data-en-home] #banner .carrousel-wrap,
  html[data-en-home] #products .banner .carrousel-item,
  html[data-en-home] #banner .carrousel-item {
    height: 100% !important;
  }

  html[data-en-home] #products .banner .carrousel-img,
  html[data-en-home] #banner .carrousel-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  html[data-en-home].en-home-mobile-carousel-fallback #products .banner .carrousel-item:first-of-type .carrousel-img {
    object-position: 60% center;
  }

  html[data-en-home] #products .banner .carrousel-dots,
  html[data-en-home] #banner .carrousel-dots {
    right: 0;
    bottom: 12px !important;
    left: 0;
    width: auto;
    display: flex;
    justify-content: center;
    transform: none;
  }

  /* The mobile bundle uses this order and grouping. Recreate it for the desktop
     bundle fallback without replacing the carousel or its click handlers. */
  html[data-en-home] #products .product-context:has(.col.vertical) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 4px;
    padding: 4px;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) > .row,
  html[data-en-home] #products .product-context:has(.col.vertical) .col,
  html[data-en-home] #products .product-context:has(.col.vertical) .col.vertical > div {
    display: contents !important;
    width: auto;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    margin: 0;
    object-fit: contain;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) > .row:first-child > .col:first-child img {
    grid-column: 1 / -1;
    order: 0;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) .col.vertical > div:nth-child(2) img {
    order: 1;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) > .row:nth-child(2) > .col:nth-child(1) img {
    order: 2;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) > .row:nth-child(2) > .col:nth-child(3) img {
    order: 3;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) > .row:nth-child(2) > .col:nth-child(2) img {
    order: 4;
  }

  html[data-en-home] #products .product-context:has(.col.vertical) .col.vertical > div:first-child img {
    grid-column: 1 / -1;
    order: 5;
  }

  /* Native OverviewMobile markup already has the intended card order. */
  html[data-en-home] #banner + .product-context:not(:has(.col.vertical)) {
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    background: #fff;
  }

  html[data-en-home] #banner + .product-context:not(:has(.col.vertical)) > .tnt-img {
    margin-bottom: 4px;
  }

  html[data-en-home] #banner + .product-context:not(:has(.col.vertical)) > .row {
    display: flex;
    width: 100%;
    height: auto !important;
    margin: 0 0 4px;
    gap: 4px;
  }

  html[data-en-home] #banner + .product-context:not(:has(.col.vertical)) > .row > .col {
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 !important;
  }

  html[data-en-home] #banner + .product-context:not(:has(.col.vertical)) > div:last-child {
    width: 100%;
  }

  html[data-en-home] #banner + .product-context:not(:has(.col.vertical)) img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
  }

  html[data-en-home] #about {
    padding: 48px 20px 40px;
    scroll-margin-top: 54px;
  }

  html[data-en-home] #about h1 {
    margin: 0 0 25px;
    font-size: 28px;
    line-height: 1.2;
  }

  html[data-en-home] #about p {
    width: 100%;
    max-width: none;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  html[data-en-home] #about img {
    margin-top: 28px;
  }

  html[data-en-home] #contact {
    display: none !important;
  }
}

/* The archived three-card strip retains a 1140px UL between mobile and desktop. */
@media (min-width:737px) and (max-width:1220px) {
  html[data-en-home] .banner-list > ul {width:100%;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;box-sizing:border-box}
  html[data-en-home] .banner-list > ul > li {width:auto;height:auto;aspect-ratio:366 / 209;margin:0;min-width:0}
  html[data-en-home] .banner-list > ul > li > a {display:block;width:100%;height:100%}
  html[data-en-home] .banner-list .banner-image {width:100%;height:100%;background-size:contain}
}

/* English homepage sections only; the footer keeps its own background. */
html[data-en-home] #products,html[data-en-home] .archive-en-video-banners,html[data-en-home] .archive-en-video-banners .banner-list,html[data-en-home] #about.about{background-color:#f5f5f7}

/* Restore the archived desktop card dimensions when high-density assets are used. */
@media screen and (min-width: 701px) {
  html[data-en-home] #products .product-context:has(.col.vertical) > .row { width: min(1220px, 100%); margin-left: auto; margin-right: auto; flex-wrap: nowrap; }
  html[data-en-home] #products .product-context:has(.col.vertical) > .row > .col { box-sizing: border-box; min-width: 0; flex: 1 1 0; }
  html[data-en-home] #products .product-context:has(.col.vertical) img { display: block; width: 100%; height: auto; }
  html[data-en-home] #products .product-context:has(.col.vertical) .col.vertical img { aspect-ratio: 605 / 340; object-fit: contain; }
  html[data-en-home] #products .product-context:has(.col.vertical) > .row:nth-child(2) img { aspect-ratio: 400 / 530; object-fit: contain; }
}