/* stylelint-disable media-feature-range-notation -- critical CSS also serves Chromium 99 */

/* Render-blocking, shared by EDS and AEM Author. No imports or CSS nesting.
 * The base skeleton works in Chromium 99 before any module executes. */

/* These faces match fonts.css and reuse the same requests. Hidden authored text
 * needs the real font metrics too; otherwise short mobile headings can gain a
 * line when the component is revealed. The skeleton itself never waits on fonts. */
@font-face {
  font-family: "Hisense Sans Alfabet";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Hisense-Sans-Alfabet.otf") format("opentype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hisense Sans Alfabet";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Hisense-Sans-Alfabet-Medium.otf") format("opentype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
}

main > div:not([data-section-status]) {
  margin: 0;
  padding: 80px 0;
}

main > div:not([data-section-status]):first-child {
  padding-top: 0;
}

main > div:not([data-section-status]) > div[class] {
  box-sizing: border-box;
  max-width: min(1120px, calc(100% - 60px));
  margin: 0 auto 32px;
}

/* Metadata and non-page UI must never flash as content. */
main .section-metadata,
main :is(.cross-page-redirect, .third-party-integration, .popup-module, .popup-title, .popup-text, .popup-image, .popup-quote, .popup-key-stats, .popup-info-card):not([data-block-status="loaded"]) {
  display: none;
}

/* Both sides of decorateSections(): raw classed rows and decorated blocks.
 * Visibility preserves measurements needed by carousels. No authored rows are
 * removed, reparented or replaced to draw a skeleton. */
:where(main > div:not([data-section-status]) > div[class], [data-block-name]):not([data-block-status="loaded"]) {
  --loading-height: 160px;
  --loading-surface: #f3f6f6;
  --loading-ink: #e6ecec;
  --loading-detail: #d8e1e1;
  --loading-radius: 12px;
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) 24px 28px / 42% 20px,
    linear-gradient(var(--loading-ink) 0 0) 24px 68px / 78% 12px,
    linear-gradient(var(--loading-ink) 0 0) 24px 92px / 62% 12px;

  position: relative;
  box-sizing: border-box;
  height: var(--loading-height);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
}

:where(main > div:not([data-section-status]) > div[class], [data-block-name]):not([data-block-status="loaded"]) * {
  visibility: hidden !important;
}

:where(main > div:not([data-section-status]) > div[class], [data-block-name]):not([data-block-status="loaded"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  box-sizing: border-box;
  border-radius: var(--loading-radius);
  background: var(--loading-shapes), var(--loading-surface);
  background-repeat: no-repeat;
  visibility: visible !important;
  pointer-events: none;
  animation: loading-breathe 1.8s ease-in-out infinite alternate;
}

:where(main > div:not([data-section-status]) > div[class], [data-block-name]):not([data-block-status="loaded"])::after {
  visibility: hidden !important;
}

/* First visible slide, not the sum of all authored slides. Publish caps the
 * 16:9 media at the viewport; Author keeps its uncapped editing canvas. */
:is(.hero-banner, .minimalist-hero-banner):not([data-block-status="loaded"]) {
  --loading-height: min(56.25vw, 100vh);
  --loading-radius: 0;
  --loading-content-left: max(11.11111111vw, calc((min(100vw, 1920px) - 1120px) / 2));
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) var(--loading-content-left) 36% / 16% 16px,
    linear-gradient(var(--loading-ink) 0 0) var(--loading-content-left) 46% / 36% 42px,
    linear-gradient(var(--loading-ink) 0 0) var(--loading-content-left) 55% / 27% 32px,
    radial-gradient(circle, var(--loading-detail) 48%, transparent 52%) 48% 96% / 10px 10px,
    linear-gradient(var(--loading-detail) 0 0) 52% 96% / 64px 8px;
}

:is(.hero-banner, .minimalist-hero-banner):not([data-block-status="loaded"])::after {
  content: "";
  position: absolute;
  z-index: 101;
  top: 66%;
  left: var(--loading-content-left);
  width: min(15vw, 184px);
  height: min(3.47222222vw, 50px);
  border-radius: 999px;
  background: var(--loading-detail);
  box-shadow: min(16.1vw, 200px) 0 0 var(--loading-ink);
  visibility: visible !important;
}

main > div:not([data-section-status]) > div:is(.hero-banner, .minimalist-hero-banner) {
  max-width: 1920px;
  margin-bottom: 0;
}

/* decorateSections creates these wrappers before the block stylesheet arrives.
 * Keep the Hero full width throughout that intermediate state as well. */
main > .section > .hero-banner-wrapper,
main > .section > .minimalist-hero-banner-wrapper {
  max-width: 1920px;
  padding: 0;
}

/* Dark section themes must not show through beside a capped Hero skeleton. */
main > .hero-banner-container:not([data-section-status="loaded"]),
main > .minimalist-hero-banner-container:not([data-section-status="loaded"]) {
  background: #f2f4f4 !important;
}

.hero-banner[data-aue-resource]:not([data-block-status="loaded"]) {
  --loading-height: min(56.25vw, 1080px);
}

.hero-banner.only-picture:not([data-block-status="loaded"]) {
  --loading-height: min(44.44444444vw, 853px);
  --loading-shapes: linear-gradient(115deg, #f3f6f6, #e8eeee);
}

.hero-banner.only-picture:not([data-block-status="loaded"])::after {
  content: none;
}

.hero-presence:not([data-block-status="loaded"]) {
  --loading-height: 100vh;
  --loading-radius: 0;
  --loading-shapes: radial-gradient(ellipse at center, #e1e9e9, #f3f6f6 72%);

  padding-top: 56px;
  margin-top: -56px;
}

@media (min-width: 1180px) {
  .hero-presence:not([data-block-status="loaded"]) {
    padding-top: 82px;
    margin-top: -82px;
  }
}

.minimalist-hero-banner:not([data-block-status="loaded"]) {
  --loading-height: min(27.77777778vw, 400px);
}

:is(.feature-banner, .calltoaction-banner, .campaign-bundle-banner):not([data-block-status="loaded"]) {
  --loading-height: min(30.55555556vw, 440px);
  --loading-radius: 24px;
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) 7% 30% / 36% 30px,
    linear-gradient(var(--loading-ink) 0 0) 7% 44% / 31% 24px,
    linear-gradient(var(--loading-ink) 0 0) 7% 58% / 36% 12px,
    linear-gradient(var(--loading-ink) 0 0) 7% 66% / 29% 12px,
    linear-gradient(var(--loading-detail) 0 0) 7% 84% / 17% 40px,
    linear-gradient(#e7ebeb 0 0) right / 48% 100%;
}

/* Collection Banner keeps its real title, copy and authored CTA count in the
 * layout, hidden beneath CSS placeholders. Raw fields and decorated fields use
 * the same typography: wrapping and button positions follow each instance. */
main .collection-banner:not([data-block-status="loaded"]) {
  --loading-height: min(30.55555556vw, 440px);
  --loading-radius: 24px;
  --loading-shapes: linear-gradient(110deg, #f3f6f6 40%, #e9efef);
  --loading-banner-title-size: min(2.77777778vw, 40px);
  --loading-banner-title-line: min(3.33333333vw, 48px);
  --loading-banner-copy-size: min(0.97222222vw, 14px);
  --loading-banner-copy-line: min(1.45833333vw, 21px);
  --loading-banner-gap: min(0.55555556vw, 8px);
  --loading-banner-cta-gap: min(2.22222222vw, 32px);
  --loading-banner-button-height: min(3.47222222vw, 50px);

  display: grid;
  grid-template-columns: min(29.72222222vw, 428px) 1fr;
  align-content: center;
  gap: var(--loading-banner-gap) 0;
  padding: 0 min(3.33333333vw, 48px);
  font-family: var(--font-family, "Hisense Sans Alfabet", Arial, sans-serif);
}

main .collection-banner:not([data-block-status="loaded"]) > div {
  grid-column: 1;
}

main .collection-banner:not([data-block-status="loaded"])::after {
  content: "";
  position: absolute;
  top: 11%;
  right: 4%;
  left: auto;
  inset-inline-start: auto;
  z-index: 100;
  width: 48%;
  height: 78%;
  border-radius: 16px;
  background: linear-gradient(145deg, #e0e8e8, #eaf0f0);
  visibility: visible !important;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(-n+3):not(.content-container) {
  display: none;
}

main .collection-banner:not([data-block-status="loaded"]) .content-container {
  position: relative;
  z-index: 101;
  display: flex;
  flex-direction: column;
  gap: var(--loading-banner-cta-gap);
}

main .collection-banner:not([data-block-status="loaded"]) .body-container {
  display: flex;
  flex-direction: column;
  gap: var(--loading-banner-gap);
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(4):not([class]),
main .collection-banner:not([data-block-status="loaded"]) .title {
  position: relative;
  font-size: var(--loading-banner-title-size);
  line-height: var(--loading-banner-title-line);
  font-weight: 500;
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(5):not([class]),
main .collection-banner:not([data-block-status="loaded"]) .body-text {
  position: relative;
  font-size: var(--loading-banner-copy-size);
  line-height: var(--loading-banner-copy-line);
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

main .collection-banner:not([data-block-status="loaded"]) :is(p, h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  font: inherit;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(4):not([class])::before,
main .collection-banner:not([data-block-status="loaded"]) .title::before,
main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(5):not([class])::before,
main .collection-banner:not([data-block-status="loaded"]) .body-text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  border-radius: 4px;
  background: repeating-linear-gradient(transparent 0 0.2em, var(--loading-detail) 0.2em 0.85em, transparent 0.85em var(--loading-banner-title-line));
  visibility: visible !important;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(5):not([class])::before,
main .collection-banner:not([data-block-status="loaded"]) .body-text::before {
  inset-inline-end: 6%;
  background: repeating-linear-gradient(transparent 0 0.3em, var(--loading-ink) 0.3em 0.85em, transparent 0.85em var(--loading-banner-copy-line));
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) {
  margin-top: calc(var(--loading-banner-cta-gap) - var(--loading-banner-gap));
}

/* EDS turns paragraph links into buttons; a bare media/content URL is omitted
 * by the decorator and must not create a phantom CTA in the SSR skeleton. */
main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) > div > a {
  display: none;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) > div,
main .collection-banner:not([data-block-status="loaded"]) .cta-container {
  display: flex;
  gap: var(--loading-banner-gap);
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) p a,
main .collection-banner:not([data-block-status="loaded"]) .cta-container a {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  height: var(--loading-banner-button-height);
  margin: 0;
  padding: 0 min(2.22222222vw, 32px);
  border: 0;
  font-size: var(--loading-banner-copy-size);
  font-weight: 500;
  white-space: nowrap;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) p a::before,
main .collection-banner:not([data-block-status="loaded"]) .cta-container a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  border-radius: 999px;
  background: var(--loading-detail);
  visibility: visible !important;
}

main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) p + p a::before,
main .collection-banner:not([data-block-status="loaded"]) .cta-container > :nth-child(2) a::before {
  border: 1px solid var(--loading-detail);
  background: var(--loading-surface);
}

:is(.collection-title, .module-title, .support-module-title, .about-hisense-module-title, .about-hisense-section-title, .page-header, .region-page-title, .article-title):not([data-block-status="loaded"]) {
  --loading-height: 80px;
  --loading-radius: 0;
  --loading-surface: transparent;
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) left 4px / 20% 18px,
    linear-gradient(var(--loading-ink) 0 0) left 45px / 46% 28px;
}

/* Collection Cards preserves the authored item count in CSS alone. The same
 * square shapes apply to raw rows and the UL/LI produced by the decorator. */
.collection-cards:not([data-block-status="loaded"]) {
  --loading-surface: #f0f7f7;
  --loading-radius: 24px;
  --loading-card-title-top: min(2.77777778vw, 40px);
  --loading-card-title-size: min(1.25vw, 18px);
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) center var(--loading-card-title-top) / 58% var(--loading-card-title-size);

  display: flex;
  gap: min(1.66666667vw, 24px);
  height: auto;
  min-height: 0;
}

.collection-cards:not([data-block-status="loaded"])::before {
  content: none;
}

.collection-cards:not([data-block-status="loaded"]) > ul {
  display: flex;
  flex: 1;
  gap: min(1.66666667vw, 24px);
  margin: 0;
  padding: 0;
}

.collection-cards:not([data-block-status="loaded"]) > div,
.collection-cards:not([data-block-status="loaded"]) > ul > li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
}

.collection-cards:not([data-block-status="loaded"]) > div > * {
  position: absolute;
}

.collection-cards:not([data-block-status="loaded"]) > div:nth-child(n+5) {
  display: none;
}

.collection-cards:not([data-block-status="loaded"]) > div::before,
.collection-cards:not([data-block-status="loaded"]) > ul > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  border-radius: var(--loading-radius, 24px);
  background: var(--loading-shapes), var(--loading-surface);
  background-repeat: no-repeat;
  visibility: visible !important;
  animation: loading-breathe 1.8s ease-in-out infinite alternate;
}

.collection-cards:not([data-block-status="loaded"]) > div::after,
.collection-cards:not([data-block-status="loaded"]) > ul > li::after {
  content: "";
  position: absolute;
  z-index: 101;
  top: 35%;
  left: 20%;
  width: 60%;
  height: 44%;
  border-radius: 8px;
  background: linear-gradient(145deg, #e1eaea, #e8efef);
  visibility: visible !important;
}

.collection-cards:is(.cover-style, .cover-dark):not([data-block-status="loaded"]) {
  --loading-surface: #eaf0f0;
  --loading-card-title-top: min(2.22222222vw, 32px);
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) center var(--loading-card-title-top) / 60% var(--loading-card-title-size),
    linear-gradient(180deg, #e0e8e8, #f5f8f8);
}

.collection-cards.cover-dark:not([data-block-status="loaded"]) {
  --loading-shapes:
    linear-gradient(var(--loading-detail) 0 0) center var(--loading-card-title-top) / 60% var(--loading-card-title-size),
    linear-gradient(180deg, #f5f8f8, #e0e8e8);
}

.collection-cards:is(.cover-style, .cover-dark):not([data-block-status="loaded"]) > div::after,
.collection-cards:is(.cover-style, .cover-dark):not([data-block-status="loaded"]) > ul > li::after {
  top: 29%;
  left: 8%;
  width: 84%;
  height: 60%;
  background: linear-gradient(145deg, #d9e3e3, #e6eded);
}

:is(.card-grid, .product-card, .news-card-list, .retailer-card-grid, .related-news, .category-carousel, .campaign-collection):not([data-block-status="loaded"]) {
  --loading-height: min(26.77777778vw, 386px);
  --loading-shapes:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 18px), #fff calc(25% - 18px), #fff 25%) left top / 100% 100%,
    linear-gradient(var(--loading-ink) 0 0) left top / 100% 65%,
    linear-gradient(var(--loading-detail) 0 0) left 78% / 100% 16px,
    linear-gradient(var(--loading-ink) 0 0) left 90% / 100% 10px;
}

:is(.product-gallery, .image-comparison-slider, .video, .videoinfo, .campaign-image, .adaptive-images, .dynamic-media-image):not([data-block-status="loaded"]) {
  --loading-height: min(46vw, 560px);
  --loading-shapes: radial-gradient(ellipse, var(--loading-ink) 64%, transparent 65%) center / 60% 65%;
}

:is(.columns, .bi-directional-content, .gradient-text-image, .product-information):not([data-block-status="loaded"]) {
  --loading-height: min(36vw, 440px);
  --loading-shapes:
    linear-gradient(var(--loading-ink) 0 0) left / 46% 100%,
    linear-gradient(var(--loading-detail) 0 0) 94% 22% / 36% 28px,
    linear-gradient(var(--loading-ink) 0 0) 94% 42% / 36% 14px,
    linear-gradient(var(--loading-ink) 0 0) 91% 53% / 32% 14px,
    linear-gradient(var(--loading-detail) 0 0) 77% 79% / 22% 40px;
}

:is(.text, .article-body, .legal-content, .disclaimer, .recall-text-info, .warranty-description, .faq-module, .warranty-accordion, .product-specifications, .resource-list, .information-list-module):not([data-block-status="loaded"]) {
  --loading-height: 156px;
  --loading-radius: 0;
  --loading-surface: transparent;
  --loading-shapes: repeating-linear-gradient(transparent 0, transparent 8px, var(--loading-ink) 8px, var(--loading-ink) 18px, transparent 18px, transparent 32px) left / 92% 100%;
}

:is(.search-box, .search-box-navigation, .request-service, .store-locator, .store-map):not([data-block-status="loaded"]) {
  --loading-height: 280px;
  --loading-shapes:
    linear-gradient(var(--loading-ink) 0 0) center 16% / 90% 48px,
    linear-gradient(var(--loading-ink) 0 0) center 48% / 90% 48px,
    linear-gradient(var(--loading-detail) 0 0) 7% 86% / 22% 44px;
}

/* Text-driven headings retain their authored line count, including wrapping on
 * mobile. The neutral bars cover the hidden text without a JS measurement. */
.collection-title:not([data-block-status="loaded"]),
.card-carousel:not([data-block-status="loaded"]) {
  --loading-eyebrow-size: min(1.38888889vw, 20px);
  --loading-eyebrow-line: min(1.66666667vw, 24px);
  --loading-heading-size: min(2.36111111vw, 34px);
  --loading-heading-line: min(2.77777778vw, 40px);
  --loading-heading-gap: min(1.11111111vw, 16px);

  height: auto;
  font-family: var(--font-family, "Hisense Sans Alfabet", Arial, sans-serif);
  font-weight: 500;
}

.collection-title:not([data-block-status="loaded"])::before,
.card-carousel:not([data-block-status="loaded"])::before {
  content: none;
}

.collection-title:not([data-block-status="loaded"]) > div,
.card-carousel:not([data-block-status="loaded"]) > div:nth-child(-n+2):not(.card-carousel-title-box, .card-carousel-viewport),
.card-carousel:not([data-block-status="loaded"]) .card-carousel-title-box > div {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: var(--loading-eyebrow-size);
  line-height: var(--loading-eyebrow-line);
  text-transform: uppercase;
  white-space: normal;
}

.collection-title:not([data-block-status="loaded"]) > div:nth-child(2),
.card-carousel:not([data-block-status="loaded"]) > div:nth-child(2):not(.card-carousel-viewport),
.card-carousel:not([data-block-status="loaded"]) .card-carousel-title-box > div:nth-child(2) {
  margin-top: var(--loading-heading-gap);
  font-size: var(--loading-heading-size);
  line-height: var(--loading-heading-line);
  text-transform: capitalize;
}

.collection-title:not([data-block-status="loaded"]) :is(p, h1, h2, h3, h4, h5, h6),
.card-carousel:not([data-block-status="loaded"]) :is(p, h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  font: inherit;
}

.collection-title:not([data-block-status="loaded"]) > div::before,
.card-carousel:not([data-block-status="loaded"]) > div:nth-child(-n+2):not(.card-carousel-title-box, .card-carousel-viewport)::before,
.card-carousel:not([data-block-status="loaded"]) .card-carousel-title-box > div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  border-radius: 4px;
  background: repeating-linear-gradient(transparent 0 0.15em, var(--loading-detail) 0.15em 0.85em, transparent 0.85em var(--loading-eyebrow-line));
  visibility: visible !important;
}

.collection-title:not([data-block-status="loaded"]) > div:nth-child(2)::before,
.card-carousel:not([data-block-status="loaded"]) > div:nth-child(2):not(.card-carousel-viewport)::before,
.card-carousel:not([data-block-status="loaded"]) .card-carousel-title-box > div:nth-child(2)::before {
  background: repeating-linear-gradient(transparent 0 0.15em, var(--loading-ink) 0.15em 0.9em, transparent 0.9em var(--loading-heading-line));
}

/* Carousel rows start after two authored heading rows. The decorated track has
 * identical card widths, so both states preserve the next-card preview. */
.card-carousel:not([data-block-status="loaded"]) {
  --loading-heading-gap: min(0.55555556vw, 8px);
  --loading-carousel-gap: min(1.66666667vw, 24px);
  --loading-carousel-top: min(2.22222222vw, 32px);
  --loading-carousel-width: min(14.23611111vw, 205px);
  --loading-carousel-height: min(17.77777778vw, 256px);
  --loading-carousel-inset: min(2.22222222vw, 32px);
  --loading-carousel-icon: min(6.94444444vw, 100px);

  display: block;
  white-space: nowrap;
  font-size: 0;
}

.card-carousel.text-left:not([data-block-status="loaded"]) {
  --loading-carousel-width: min(18.19444444vw, 262px);
  --loading-carousel-height: min(19.58333333vw, 282px);
  --loading-carousel-icon: min(5.55555556vw, 80px);
}

.card-carousel:not([data-block-status="loaded"]) > .card-carousel-title-box {
  display: block;
}

.card-carousel:not([data-block-status="loaded"]) > .card-carousel-viewport {
  margin-top: var(--loading-carousel-top);
}

.card-carousel:not([data-block-status="loaded"]) .card-carousel-track {
  display: flex;
  gap: var(--loading-carousel-gap);
  margin: 0;
  padding: 0;
  transform: none !important;
}

.card-carousel:not([data-block-status="loaded"]) > div:nth-child(n+3),
.card-carousel:not([data-block-status="loaded"]) .card-carousel-track > li {
  position: relative;
  display: inline-block;
  flex: 0 0 var(--loading-carousel-width);
  box-sizing: border-box;
  width: var(--loading-carousel-width);
  height: var(--loading-carousel-height);
  padding: 0;
  overflow: hidden;
  vertical-align: top;
}

.card-carousel:not([data-block-status="loaded"]) > div:nth-child(n+3) {
  margin-top: var(--loading-carousel-top);
  margin-inline-end: var(--loading-carousel-gap);
}

.card-carousel:not([data-block-status="loaded"]) > div:nth-child(n+3) > *,
.card-carousel:not([data-block-status="loaded"]) .card-carousel-track > li > * {
  position: absolute;
}

.card-carousel:not([data-block-status="loaded"]) > div:nth-child(n+3)::before,
.card-carousel:not([data-block-status="loaded"]) .card-carousel-track > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  box-sizing: border-box;
  border: 1px solid #e1e6e6;
  border-radius: 24px;
  background:
    linear-gradient(var(--loading-ink) 0 0) center 26% / var(--loading-carousel-icon) var(--loading-carousel-icon),
    linear-gradient(var(--loading-detail) 0 0) center 78% / 62% 16px,
    #f7f8f8;
  background-repeat: no-repeat;
  visibility: visible !important;
}

.card-carousel.text-left:not([data-block-status="loaded"]) > div:nth-child(n+3)::before,
.card-carousel.text-left:not([data-block-status="loaded"]) .card-carousel-track > li::before {
  background:
    linear-gradient(var(--loading-ink) 0 0) var(--loading-carousel-inset) var(--loading-carousel-inset) / var(--loading-carousel-icon) var(--loading-carousel-icon),
    linear-gradient(var(--loading-detail) 0 0) var(--loading-carousel-inset) 53% / 57% 16px,
    #f7f8f8;
  background-repeat: no-repeat;
}

.card-carousel.text-left:not([data-block-status="loaded"]) > div:nth-child(n+3)::after,
.card-carousel.text-left:not([data-block-status="loaded"]) .card-carousel-track > li::after {
  content: "";
  position: absolute;
  z-index: 102;
  left: var(--loading-carousel-inset);
  bottom: var(--loading-carousel-inset);
  width: 52%;
  height: min(2.77777778vw, 40px);
  border-radius: 999px;
  background: var(--loading-detail);
  visibility: visible !important;
}

.disclaimer:not([data-block-status="loaded"]) {
  height: auto;
  padding: min(2.77777778vw, 40px) 0 min(5.55555556vw, 80px);
  font: 400 min(0.83333333vw, 12px)/min(1.25vw, 18px) var(--font-family, "Hisense Sans Alfabet", Arial, sans-serif);
}

.disclaimer:not([data-block-status="loaded"])::before {
  content: none;
}

.disclaimer:not([data-block-status="loaded"]) > div {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.disclaimer:not([data-block-status="loaded"]) :is(div, p, li) {
  margin: 0;
  padding: 0;
  font: inherit;
}

.disclaimer:not([data-block-status="loaded"]) > div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  background: repeating-linear-gradient(transparent 0 0.3em, var(--loading-ink) 0.3em 0.85em, transparent 0.85em 1.5em);
  visibility: visible !important;
}

body:not(.appear) > header:empty,
body > header > .header:not([data-block-status="loaded"]) {
  position: absolute;
  inset: 0 0 auto;
  z-index: 101;
  height: 100px;
}

body:not(.appear) > header:empty::before,
body > header > .header:not([data-block-status="loaded"])::before {
  --loading-header-inset: max(30px, calc((100vw - 1120px) / 2));

  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(#d8e1e1 0 0) var(--loading-header-inset) center / 125px 22px,
    repeating-linear-gradient(90deg, #e6ecec 0 68px, transparent 68px 102px) calc(var(--loading-header-inset) + 172px) center / 670px 12px,
    radial-gradient(circle, #e6ecec 66%, transparent 70%) right var(--loading-header-inset) center / 22px 22px,
    radial-gradient(circle, #e6ecec 66%, transparent 70%) right calc(var(--loading-header-inset) + 48px) center / 22px 22px,
    radial-gradient(circle, #e6ecec 66%, transparent 70%) right calc(var(--loading-header-inset) + 96px) center / 22px 22px,
    #fff;
  background-repeat: no-repeat;
  visibility: visible;
}

/* The footer arrives as a fragment. Its empty SSR host reserves the same
 * logo / link columns / legal area as the pending fragment. */
body > footer:empty,
body > footer > .footer:not([data-block-status="loaded"]) {
  --loading-footer-inset: max(30px, calc((100vw - 1120px) / 2));
  --loading-footer-width: min(1120px, calc(100vw - 60px));

  position: relative;
  height: 872px;
  overflow: hidden;
}

body > footer:empty::before,
body > footer > .footer:not([data-block-status="loaded"])::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(#d8e5e5 0 0) var(--loading-footer-inset) 38px / 164px 26px,
    repeating-linear-gradient(90deg, transparent 0 19%, #f4fafa 19% 25%) var(--loading-footer-inset) 116px / var(--loading-footer-width) 560px,
    repeating-linear-gradient(transparent 0 0, #e1ebeb 0 10px, transparent 10px 30px) var(--loading-footer-inset) 116px / var(--loading-footer-width) 330px,
    repeating-linear-gradient(transparent 0 0, #e1ebeb 0 10px, transparent 10px 30px) var(--loading-footer-inset) 498px / var(--loading-footer-width) 180px,
    linear-gradient(#d8e5e5 0 0) var(--loading-footer-inset) 790px / 44% 10px,
    linear-gradient(#e1ebeb 0 0) var(--loading-footer-inset) 826px / 30% 10px,
    linear-gradient(#edf8f8 0 0) left bottom / 100% 118px,
    #f4fafa;
  background-repeat: no-repeat;
  visibility: visible !important;
}

@media (max-width: 1179px) {
  body:not(.appear) > header:empty,
  body > header > .header:not([data-block-status="loaded"]) { height: 56px; }

  body:not(.appear) > header:empty::before,
  body > header > .header:not([data-block-status="loaded"])::before {
    background:
      linear-gradient(#d8e1e1 0 0) 18px center / 83px 16px,
      radial-gradient(circle, #e6ecec 66%, transparent 70%) right 18px center / 20px 20px,
      radial-gradient(circle, #e6ecec 66%, transparent 70%) right 58px center / 20px 20px,
      radial-gradient(circle, #e6ecec 66%, transparent 70%) right 98px center / 20px 20px,
      radial-gradient(circle, #e6ecec 66%, transparent 70%) right 138px center / 20px 20px,
      #fff;
    background-repeat: no-repeat;
  }
}

/* Keep failed authored DOM for the editor, but never reveal its field table.
 * This pseudo-element also survives a late decorator replacing child nodes. */
[data-block-name][data-block-status="error"][data-loading-message] {
  display: block;
  width: 100%;
  height: 96px;
  min-height: 96px;
  padding: 0;
  aspect-ratio: auto;
  visibility: visible;
}

[data-block-name][data-block-status="error"][data-loading-message] > * {
  display: none !important;
}

[data-block-name][data-block-status="error"][data-loading-message]::before {
  content: attr(data-loading-message);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f2f4f4;
  color: #505050;
  font: 14px/1.5 sans-serif;
  text-align: center;
  animation: none;
}

[data-block-name][data-block-status="error"][data-loading-message] *::before,
[data-block-name][data-block-status="error"][data-loading-message] *::after,
[data-block-name][data-block-status="error"][data-loading-message]::after {
  visibility: hidden !important;
}

@keyframes loading-breathe {
  to { filter: brightness(0.97); }
}

@media (max-width: 639px) {
  main > div:not([data-section-status]) { padding: 40px 0; }

  main > div:not([data-section-status]) > div[class] {
    max-width: calc(100% - 36px);
    margin-bottom: 24px;
  }

  main > div:not([data-section-status]) > div:is(.hero-banner, .minimalist-hero-banner) {
    max-width: 100%;
    margin-bottom: 0;
  }

  :is(.hero-banner, .hero-banner[data-aue-resource], .minimalist-hero-banner):not([data-block-status="loaded"]) {
    --loading-height: min(164.1025641vw, 100vh);
    --loading-content-left: 24px;
    --loading-shapes:
      linear-gradient(var(--loading-detail) 0 0) 24px 50% / 35% 12px,
      linear-gradient(var(--loading-ink) 0 0) 24px 59% / 76% 30px,
      linear-gradient(var(--loading-ink) 0 0) 24px 68% / 60% 24px,
      linear-gradient(var(--loading-detail) 0 0) center 96% / 64px 6px;
  }

  :is(.hero-banner, .minimalist-hero-banner):not([data-block-status="loaded"])::after {
    top: 78%;
    width: 38%;
    height: 40px;
    box-shadow: calc(38vw + 8px) 0 0 var(--loading-ink);
  }

  .hero-banner.only-picture:not([data-block-status="loaded"]) {
    --loading-height: 123.07692308vw;
    --loading-shapes: linear-gradient(115deg, #f3f6f6, #e8eeee);
  }

  .minimalist-hero-banner:not([data-block-status="loaded"]) { --loading-height: 112.30769231vw; }

  .hero-presence:not([data-block-status="loaded"])::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 101;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--loading-detail);
    visibility: visible !important;
  }

  :is(.feature-banner, .calltoaction-banner, .campaign-bundle-banner):not([data-block-status="loaded"]) {
    --loading-height: auto;
    --loading-radius: 16px;
    --loading-shapes:
      linear-gradient(var(--loading-detail) 0 0) center 10% / 76% 26px,
      linear-gradient(var(--loading-ink) 0 0) center 20% / 66% 22px,
      linear-gradient(var(--loading-ink) 0 0) center 29% / 76% 12px,
      linear-gradient(var(--loading-detail) 0 0) center 42% / 46% 40px,
      linear-gradient(#e7ebeb 0 0) bottom / 100% 48%;

    aspect-ratio: 354 / 440;
  }

  main .collection-banner:not([data-block-status="loaded"]) {
    --loading-height: auto;
    --loading-radius: 16px;
    --loading-shapes: linear-gradient(160deg, #f3f6f6 40%, #e1eaea);
    --loading-banner-title-size: 7.69230769vw;
    --loading-banner-title-line: 9.23076923vw;
    --loading-banner-copy-size: 3.58974359vw;
    --loading-banner-copy-line: 5.38461538vw;
    --loading-banner-gap: 2.05128205vw;
    --loading-banner-cta-gap: 6.15384615vw;
    --loading-banner-button-height: 10.25641026vw;

    aspect-ratio: 354 / 440;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 8.20512821vw 6.15384615vw;
  }

  main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(5):not([class]),
  main .collection-banner:not([data-block-status="loaded"]) .body-text {
    -webkit-line-clamp: 4;
  }

  main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(4):not([class]),
  main .collection-banner:not([data-block-status="loaded"]) .title {
    -webkit-line-clamp: 3;
  }

  main .collection-banner:not([data-block-status="loaded"])::after {
    top: auto;
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    height: 34%;
    border-radius: 8px;
  }

  main .collection-banner:not([data-block-status="loaded"]) > div:nth-child(6):not([class]) p a,
  main .collection-banner:not([data-block-status="loaded"]) .cta-container a {
    padding: 0 6.15384615vw;
  }

  .collection-cards:not([data-block-status="loaded"]),
  .collection-cards:not([data-block-status="loaded"]) > ul { gap: 24px; }

  .collection-cards:not([data-block-status="loaded"]) {
    --loading-radius: 16px;
    --loading-card-title-top: 10.25641026vw;
    --loading-card-title-size: 4.1025641vw;
  }

  .collection-cards:is(.cover-style, .cover-dark):not([data-block-status="loaded"]) {
    --loading-card-title-top: 8.20512821vw;
  }

  .collection-cards:not([data-block-status="loaded"]) > div,
  .collection-cards:not([data-block-status="loaded"]) > ul > li { flex: 0 0 78.97435897vw; }

  :is(.card-grid, .product-card, .news-card-list, .category-carousel):not([data-block-status="loaded"]) { --loading-height: 98vw; }

  .collection-title:not([data-block-status="loaded"]),
  .card-carousel:not([data-block-status="loaded"]) {
    --loading-eyebrow-size: 5.12820513vw;
    --loading-eyebrow-line: 6.15384615vw;
    --loading-heading-size: 7.69230769vw;
    --loading-heading-line: 9.23076923vw;
    --loading-heading-gap: 4.1025641vw;
  }

  .card-carousel:not([data-block-status="loaded"]),
  .card-carousel.text-left:not([data-block-status="loaded"]) {
    --loading-heading-gap: 2.05128205vw;
    --loading-carousel-gap: 6.15384615vw;
    --loading-carousel-top: 6.15384615vw;
    --loading-carousel-width: 51.28205128vw;
    --loading-carousel-height: 65.64102564vw;
    --loading-carousel-inset: 8.20512821vw;
  }

  .card-carousel.text-left:not([data-block-status="loaded"]) {
    --loading-carousel-width: 78.97435897vw;
    --loading-carousel-height: 62.05128205vw;
    --loading-carousel-icon: 16.41025641vw;
  }

  .card-carousel:not([data-block-status="loaded"]) > div:nth-child(n+3)::before,
  .card-carousel:not([data-block-status="loaded"]) .card-carousel-track > li::before { border-radius: 16px; }

  .card-carousel.text-left:not([data-block-status="loaded"]) > div:nth-child(n+3)::after,
  .card-carousel.text-left:not([data-block-status="loaded"]) .card-carousel-track > li::after {
    width: calc(100% - var(--loading-carousel-inset) * 2);
    height: 10.25641026vw;
  }

  .disclaimer:not([data-block-status="loaded"]) {
    padding: 6.15384615vw 0 12.30769231vw;
    font-size: 3.07692308vw;
    line-height: 4.61538462vw;
  }

  :is(.columns, .bi-directional-content, .gradient-text-image, .product-information):not([data-block-status="loaded"]) { --loading-height: 100vw; }
  :is(.product-gallery, .image-comparison-slider, .video, .videoinfo, .campaign-image, .adaptive-images, .dynamic-media-image):not([data-block-status="loaded"]) { --loading-height: 86vw; }

  body > footer:empty,
  body > footer > .footer:not([data-block-status="loaded"]) { height: 1040px; }

  body > footer:empty::before,
  body > footer > .footer:not([data-block-status="loaded"])::before {
    background:
      linear-gradient(#d8e5e5 0 0) 18px 32px / 130px 22px,
      repeating-linear-gradient(90deg, #e1ebeb 0 16px, transparent 16px 36px) right 18px top 36px / 170px 14px,
      repeating-linear-gradient(#d8e5e5 0 14px, transparent 14px 70px) 18px 112px / 44% 520px,
      repeating-linear-gradient(transparent 0 45px, #dfeded 45px 46px, transparent 46px 70px) 18px 112px / calc(100% - 36px) 520px,
      repeating-linear-gradient(#e1ebeb 0 10px, transparent 10px 42px) 18px 694px / 62% 254px,
      linear-gradient(#d8e5e5 0 0) 18px 984px / 164px 26px,
      linear-gradient(#edf8f8 0 0) left bottom / 100% 390px,
      #f4fafa;
    background-repeat: no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(main > div:not([data-section-status]) > div[class], [data-block-name]):not([data-block-status="loaded"])::before,
  .collection-cards:not([data-block-status="loaded"]) > div::before,
    .collection-cards:not([data-block-status="loaded"]) > ul > li::before { animation: none; }
}

/* Empty-field Hero variants do not promise text or buttons that never appear.
 * Older engines retain the generic Hero frame; content hiding never depends
 * on :has(). Field offsets include the authored Dynamic Media switch. */
@supports selector(:has(*)) {
  .hero-banner:not([data-block-status="loaded"]):has(> div:first-child > div:nth-child(4):empty):has(> div:first-child > div:nth-child(5):empty):has(> div:first-child > div:nth-child(6):empty),
  .hero-banner:not([data-block-status="loaded"]):has(> .hero-banner-items-container):not(:has(> .hero-banner-items-container > li:nth-child(2) .text-content p:not(:empty), > .hero-banner-items-container > li:nth-child(2) .icon-svg picture)) {
    --loading-shapes: linear-gradient(115deg, #f3f6f6, #e8eeee);
  }

  .hero-banner:not([data-block-status="loaded"]):has(> div:first-child):not(:has(> div:first-child > div:nth-child(7) a:not([href="/"], [href="/.html"]), > div:first-child > div:nth-child(8) a:not([href="/"], [href="/.html"])))::after,
  .hero-banner:not([data-block-status="loaded"]):has(> .hero-banner-items-container):not(:has(> .hero-banner-items-container > li:nth-child(2) .hero-banner-item-cta a))::after {
    content: none;
  }

  .hero-banner:not([data-block-status="loaded"]):has(> div:first-child):not(:has(> div:first-child > div:nth-child(8) a:not([href="/"], [href="/.html"])))::after {
    box-shadow: none;
  }
}

/* Older SSR templates may still emit the retired full-page overlay. */
#aem-loading-overlay {
  display: none !important;
}