/* Skeidar homepage blocks — uses design-system.css tokens */

.skeidar-block {
  width: 100%;
}

.skeidar-block--full {
  max-width: none;
}

.skeidar-block--contained {
  max-width: var(--container-max-width, 1440px);
  margin-inline: auto;
}

/* Theme — CMS Theme dropdown: White / Gray / Dark (legacy Light/Brand still map here) */
.skeidar-block--theme-dark {
  color: var(--color-white, #fff);
  background: var(--color-black, #111);
}

.skeidar-block--theme-brand {
  /* Gray theme surface (matches live TextSection band) */
  background: var(--color-brand-surface, #f5f5f5);
  color: #000;
}

.skeidar-block--theme-light {
  /* White theme */
  background: #ffffff;
  color: #000;
}

/* Spacing — CMS Top/Bottom Spacing: None / Small / Medium / Large */
.skeidar-block--top-small { padding-top: 20px; }
.skeidar-block--top-medium { padding-top: 40px; }
.skeidar-block--top-large { padding-top: 64px; }
.skeidar-block--bottom-small { padding-bottom: 20px; }
.skeidar-block--bottom-medium { padding-bottom: 40px; }
.skeidar-block--bottom-large { padding-bottom: 64px; }

/* Animation — CMS Animation dropdown: Fade / Slide */
@keyframes skeidar-block-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes skeidar-block-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeidar-block--anim-fade {
  animation: skeidar-block-fade-in 0.55s ease both;
}

.skeidar-block--anim-slide {
  animation: skeidar-block-slide-up 0.55s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .skeidar-block--anim-fade,
  .skeidar-block--anim-slide {
    animation: none;
  }
}

/* Responsive visibility (Base Block Desktop/Tablet/Mobile toggles) */
@media (max-width: 599.95px) {
  .skeidar-block--hide-mobile {
    display: none !important;
  }
}

@media (min-width: 600px) and (max-width: 899.95px) {
  .skeidar-block--hide-tablet {
    display: none !important;
  }
}

@media (min-width: 900px) {
  .skeidar-block--hide-desktop {
    display: none !important;
  }
}

.home-page {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Section headings — production titleLarge */
.category-carousel__heading,
.promotion-grid__heading,
.magazine-section__heading,
.brand-partners__heading,
.product-collection__title,
.social-feed__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  text-align: center;
  color: var(--color-text);
}

/* Product carousel heading is owned by product-carousel.css (left + underline). */
.product-carousel__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  text-align: start;
  color: var(--color-text);
}

@media (max-width: 599.95px) {
  .category-carousel__heading,
  .promotion-grid__heading,
  .magazine-section__heading,
  .brand-partners__heading,
  .product-collection__title,
  .product-carousel__heading,
  .social-feed__heading {
    font-size: var(--font-size-title-large-mobile);
  }
}

/* Product carousel — full-bleed edge-to-edge (matches live ProductCollection) */
.product-carousel,
.product-carousel.skeidar-block--contained,
.product-carousel.skeidar-block--full {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

.category-carousel__track,
.card-slides__track,
.promo-block__products {
  display: flex;
  gap: var(--category-gap-mobile);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* Product carousel/collection tracks are owned by product-carousel.css + CSwiper. */
.category-carousel__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 600px) {
  .category-carousel__track {
    gap: var(--category-gap-desktop);
  }
}

@media (min-width: 900px) {
  .category-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--category-gap-desktop);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
}

.category-carousel {
  max-width: 100%;
  overflow-x: clip;
}

.category-carousel .skeidar-container {
  max-width: 100%;
  overflow-x: clip;
}

.category-carousel__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: var(--category-card-width-mobile);
  gap: var(--category-gap-mobile);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  text-align: center;
}

@media (min-width: 600px) {
  .category-carousel__card {
    width: var(--category-card-width-desktop);
    gap: var(--category-gap-desktop);
  }
}

@media (min-width: 900px) {
  .category-carousel__card {
    flex: 0 0 auto;
    width: var(--category-card-width-desktop);
  }
}

.category-carousel__image-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--category-card-width-mobile);
  height: var(--category-image-height-mobile);
  background: var(--color-surface);
}

@media (min-width: 600px) {
  .category-carousel__image-wrap {
    width: var(--category-card-width-desktop);
    height: var(--category-image-height-desktop);
  }
}

.category-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-surface);
}

.category-carousel__title {
  width: 100%;
  font-size: var(--category-title-size-desktop);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

@media (max-width: 599.95px) {
  .category-carousel__title {
    font-size: var(--category-title-size-mobile);
  }
}

/* Rich text — live TextSection (titleLarge 36/36, body 16/24, stack gap 8, pad 0 40) */
.rich-text-section.ComponentWrapper,
.ComponentWrapper.rich-text-section,
[data-name="TextSection"].ComponentWrapper {
  width: 100%;
  max-width: none !important; /* theme background is full-bleed */
  margin-inline: 0;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* Keep CMS spacing classes; don't wipe vertical padding from theme/layout */
.rich-text-section.skeidar-block--theme-light,
.rich-text-section.skeidar-block--theme-brand,
.rich-text-section.skeidar-block--theme-dark {
  width: 100%;
}

.rich-text-section.skeidar-block--theme-dark .rich-text-section__title,
.rich-text-section.skeidar-block--theme-dark .rich-text-section__body {
  color: #fff;
}

@media (max-width: 599.95px) {
  .rich-text-section.ComponentWrapper,
  .ComponentWrapper.rich-text-section,
  [data-name="TextSection"].ComponentWrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.rich-text-section__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.rich-text-section__title {
  margin: 0;
  font-size: 2.25rem; /* 36px — MuiTypography-titleLarge */
  font-weight: 400;
  line-height: 2.25rem;
  color: #000000;
  text-align: center;
}

@media (max-width: 599.95px) {
  .rich-text-section__title {
    font-size: 1.125rem; /* 18px mobile titleLarge */
    line-height: 1.125rem;
  }
}

.rich-text-section__body {
  width: 100%;
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.rich-text-section__body .ck-content,
.rich-text-section__body p {
  margin: 0;
  text-align: center;
  color: #000000;
  font-weight: 400;
}

.rich-text-section__body a {
  color: #000000;
  font-weight: 400;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Beds intro → Product Spotlight: tighter gap like live */
[data-name="TextSection"]:has(+ [data-name="ProductSpotlight"]) {
  padding-bottom: 8px !important;
}

[data-name="TextSection"] + [data-name="ProductSpotlight"],
[data-name="TextSection"] + .product-spotlight {
  margin-top: 0;
}

/* Live magazine intro — “Les her” under the DM heading */
[data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__title {
  font-weight: 400;
  color: #000000;
  line-height: 1;
}

[data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__body,
[data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__body p,
[data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__body a {
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
}

@media (max-width: 599.95px) {
  [data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__body,
  [data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__body p,
  [data-name="TextSection"]:has(+ [data-name="CardView"]) .rich-text-section__body a {
    font-size: 0.75rem;
  }
}

/* Promotion / column-splitter mosaic — full-bleed edge-to-edge (live skeidar.no) */
.column-splitter,
.promotion-grid,
.column-splitter.skeidar-block--contained,
.promotion-grid.skeidar-block--contained {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

.promotion-grid__heading {
  margin: 0 0 16px;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  text-align: start;
}

.column-splitter__grid.custom-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 12.5px;
  width: 100%;
  padding: 0;
}

.column-splitter__cell {
  grid-column: span var(--promo-col, 3);
  grid-row: span var(--promo-row, 1);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

@media (max-width: 899.95px) {
  .column-splitter__grid.custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .column-splitter__cell {
    grid-column: span 1;
    grid-row: span 1;
  }

  .column-splitter__cell.col-12,
  .column-splitter__cell.col-6 {
    grid-column: span 2;
  }
}

@media (max-width: 599.95px) {
  .column-splitter__grid.custom-grid {
    grid-template-columns: 1fr;
  }

  .column-splitter__cell,
  .column-splitter__cell.col-12,
  .column-splitter__cell.col-6,
  .column-splitter__cell.col-4,
  .column-splitter__cell.col-3 {
    grid-column: span 1;
  }
}

/* Tile framing matches live SizeConfiguration (css-giytmn = 707/674). */
.column-splitter__tile {
  position: relative;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 707 / 674;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background: #d9d9d9;
}

.column-splitter__cell.col-6:not(.column-splitter__cell--tall) .column-splitter__tile,
.column-splitter__cell.col-12 .column-splitter__tile {
  aspect-ratio: 707 / 332;
}

.column-splitter__cell.col-4 .column-splitter__tile {
  aspect-ratio: 1 / 1;
}

/* Tall featured cell sets mosaic height (live 707/674). */
.column-splitter__cell--tall .column-splitter__tile {
  aspect-ratio: 707 / 674;
  height: auto;
  flex: 0 0 auto;
}

/*
 * When a tall cell is present, sibling tiles must fill their grid tracks
 * so the bottom row (Bilder / Dekor) shares one baseline — fixes the short last tile.
 */
@media (min-width: 900px) {
  .column-splitter__grid.custom-grid:has(.column-splitter__cell--tall) .column-splitter__cell--tall {
    align-self: stretch;
  }

  .column-splitter__grid.custom-grid:has(.column-splitter__cell--tall)
    .column-splitter__cell:not(.column-splitter__cell--tall)
    .column-splitter__tile {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
    max-height: none;
    flex: 1 1 auto;
  }
}

@media (max-width: 899.95px) {
  .column-splitter__tile,
  .column-splitter__cell.col-6:not(.column-splitter__cell--tall) .column-splitter__tile,
  .column-splitter__cell.col-12 .column-splitter__tile,
  .column-splitter__cell.col-4 .column-splitter__tile,
  .column-splitter__cell--tall .column-splitter__tile {
    aspect-ratio: 393 / 200;
    height: auto;
    min-height: 0;
  }
}

.column-splitter__media {
  position: absolute;
  inset: 0;
  display: block;
}

.column-splitter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.45s ease-out;
}

.column-splitter__tile:hover .column-splitter__media img {
  transform: scale(1.02);
}

.column-splitter__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 12px 0 6px;
  text-align: center;
  pointer-events: none;
  background: transparent;
}

@media (min-width: 900px) {
  .column-splitter__copy {
    padding: 22px 4px 8px;
  }
}

.column-splitter__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: #ffffff;
  text-align: center;
}

.column-splitter__title {
  margin: 0;
  font-family: var(--font-mark-ot, Arial, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
}

@media (min-width: 900px) {
  .column-splitter__title {
    font-size: 20px;
  }
}

.column-splitter__subtitle {
  margin: 0;
  font-family: var(--font-mark-ot, Arial, sans-serif);
  font-size: 35px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

@media (min-width: 900px) {
  .column-splitter__subtitle {
    font-size: 60px;
  }
}

.column-splitter__cta {
  font-family: var(--font-mark-ot, Arial, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: auto;
  color: #ffffff;
  white-space: nowrap;
}

/*
 * Brand partner promos only — scoped via Css Class "column-splitter--brands"
 * on that Column Splitter instance. Furniture / Interior mosaics are unchanged.
 */
.column-splitter--brands .column-splitter__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (min-width: 900px) {
  .column-splitter--brands .column-splitter__title {
    font-size: 28px;
  }
}

.column-splitter--brands .column-splitter__cta {
  font-size: 14px;
}

@media (min-width: 900px) {
  .column-splitter--brands .column-splitter__cta {
    font-size: 16px;
  }
}

/*
 * CTA Bar (Info Banner / CTAWidget) — live skeidar.no CTAWidget:
 * full-bleed, padding 24px (14px <900), titleLarge 2.25rem / 1.125rem mobile.
 */
.cta-banner,
.cta-banner.skeidar-block--contained,
.cta-banner.skeidar-block--full,
[data-name="CTAWidget"].cta-banner {
  width: 100%;
  max-width: none !important;
  margin-inline: 0;
  height: auto;
  min-height: 0;
  padding: 24px 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #ecd483;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 899.95px) {
  .cta-banner,
  .cta-banner.skeidar-block--contained,
  .cta-banner.skeidar-block--full,
  [data-name="CTAWidget"].cta-banner {
    padding: 14px 0;
  }
}

.cta-banner__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.cta-banner__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px 24px;
}

.cta-banner__links--single {
  justify-content: center;
}

.cta-banner__links--multi {
  justify-content: space-evenly;
}

.cta-banner__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* Live MuiTypography-titleLarge on CTAWidget */
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  box-sizing: border-box;
}

@media (max-width: 899.95px) {
  .cta-banner__link {
    font-size: 1.125rem;
  }
}

.cta-banner__link:hover {
  opacity: 0.5;
}

.cta-banner__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  text-align: center;
  gap: 8px;
}

.cta-banner__title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 899.95px) {
  .cta-banner__title {
    font-size: 1.125rem;
  }
}

.cta-banner__description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.cta-banner__description p {
  margin: 0;
}

/* Card slides — live sofa series cards (image + underlined title link) */
.card-slides,
.card-slides.ComponentWrapper,
.card-slides.skeidar-block--contained,
.card-slides.skeidar-block--full {
  width: 100%;
  max-width: none;
  margin: 24px 0 0;
  padding: 0 40px;
  box-sizing: border-box;
}

@media (max-width: 599.95px) {
  .card-slides,
  .card-slides.ComponentWrapper,
  .card-slides.skeidar-block--contained,
  .card-slides.skeidar-block--full {
    margin-top: 16px;
    padding: 0 20px;
  }
}

.card-slides__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

@media (min-width: 900px) {
  .card-slides__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.card-slides__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.card-slides__hit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.card-slides__hit--static {
  cursor: default;
}

.card-slides__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e8e8e8;
}

.card-slides__title {
  display: inline-block;
  margin: 0;
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-slides__card--overlay .card-slides__title {
  margin-top: -3rem;
  position: relative;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
}

.card-slides__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-y) var(--button-padding-x);
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  border-radius: var(--button-radius);
  border: 0;
}

/* Promo media styles live in promo-media.css */

/*
 * Magazine / DM — live skeidar.no CardView
 * Desktop: 3 cards × grid-md-3 (25% width), centered — NOT full-row thirds.
 * Mobile: grid-xs-6 (2-up). Gray band shared with the TextSection above.
 */
[data-name="TextSection"]:has(+ [data-name="CardView"]),
[data-name="TextSection"]:has(+ [data-name="CardView"]) + [data-name="CardView"] {
  background: var(--color-brand-surface, #f5f5f5);
}

[data-name="TextSection"]:has(+ [data-name="CardView"]) {
  padding-top: 40px;
  padding-bottom: 8px;
}

.magazine-section,
.magazine-section.ComponentWrapper,
.magazine-section.skeidar-block--contained,
.magazine-section.skeidar-block--full,
[data-name="CardView"].magazine-section {
  width: 100%;
  max-width: none !important;
  margin-inline: 0;
  padding: 0 40px 24px;
  box-sizing: border-box;
  background: var(--color-brand-surface, #f5f5f5);
}

@media (max-width: 599.95px) {
  .magazine-section,
  .magazine-section.ComponentWrapper,
  .magazine-section.skeidar-block--contained,
  .magazine-section.skeidar-block--full,
  [data-name="CardView"].magazine-section {
    padding: 0 20px 20px;
  }

  [data-name="TextSection"]:has(+ [data-name="CardView"]) {
    padding-top: 20px;
  }
}

.magazine-section__heading {
  margin: 0 0 16px;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  color: #000000;
}

/* Live MuiGrid: justify center, gap 9 / 25, cards xs-6 / md-3 */
.magazine-section__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 9px;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .magazine-section__grid {
    gap: 25px;
  }
}

.magazine-card {
  /* xs-6: half row minus gap share — live calc(100% * 6/12 - …) */
  flex: 0 0 calc(50% - 4.5px);
  width: calc(50% - 4.5px);
  max-width: calc(50% - 4.5px);
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .magazine-card {
    /* md-3: 25% − (9 × 25px / 12) — live emotion formula */
    flex: 0 0 calc(25% - 18.75px);
    width: calc(25% - 18.75px);
    max-width: calc(25% - 18.75px);
  }
}

.magazine-card__hit {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 187 / 202;
  border-radius: 0;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
}

.magazine-card__hit--static {
  cursor: default;
}

@media (min-width: 900px) {
  .magazine-card__hit {
    aspect-ratio: 340 / 365;
  }
}

.magazine-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.magazine-card__title {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  margin: 0;
  padding: 1px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-align: center;
}

@media (max-width: 899.95px) {
  .magazine-card__title {
    bottom: 6px;
    font-size: 0.75rem;
  }
}

/* Promo block — live 50/50 media + copy (flippable Left/Right) */
.promo-block,
.promo-block.ComponentWrapper,
.promo-block.skeidar-block--contained,
.promo-block.skeidar-block--full {
  width: 100%;
  max-width: none !important;
  margin: 40px 0 0;
  padding: 0 40px;
  box-sizing: border-box;
  background: transparent;
}

@media (max-width: 599.95px) {
  .promo-block,
  .promo-block.ComponentWrapper,
  .promo-block.skeidar-block--contained,
  .promo-block.skeidar-block--full {
    margin-top: 24px;
    padding: 0 20px;
  }
}

/* Live MuiGrid: column gap 32px, row gap 24px */
.promo-block__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  min-height: 0;
}

@media (min-width: 900px) {
  .promo-block__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "media content";
    gap: 32px;
    align-items: stretch;
  }

  .promo-block--media-right .promo-block__inner {
    grid-template-areas: "content media";
  }
}

.promo-block__media,
.promo-block__content {
  min-width: 0;
}

/*
 * Media height: live stretches the image to the text column.
 * No fixed 4/3 lock on desktop — absolute cover fill + shared row height.
 */
.promo-block__media {
  grid-area: media;
  order: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8e8e8;
  border-radius: 0;
}

@media (min-width: 900px) {
  .promo-block__media {
    aspect-ratio: unset;
    min-height: 560px;
    height: auto;
    align-self: stretch;
  }
}

.promo-block__image,
.promo-block__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (min-width: 900px) {
  .promo-block__image,
  .promo-block__video {
    position: absolute;
    inset: 0;
  }
}

/* Live text column — full half-width so the title can stay on one line */
.promo-block__content {
  grid-area: content;
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 28px;
  box-sizing: border-box;
  background: var(--color-brand-surface, #f5f5f5);
  border-radius: 0;
}

@media (min-width: 900px) {
  .promo-block__content {
    min-height: 560px;
    padding: 64px 32px;
  }
}

@media (max-width: 599.95px) {
  .promo-block__content {
    padding: 32px 16px;
  }
}

.promo-block--media-right .promo-block__media {
  order: 2;
}

.promo-block--media-right .promo-block__content {
  order: 1;
}

.promo-block__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: none;
  text-align: center;
}

/* Live titleLarge 2.25rem — keep one line on desktop */
.promo-block__title {
  margin: 0;
  width: 100%;
  color: #000000;
  font-size: clamp(1.375rem, 1.6vw + 0.6rem, 2.25rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 899.95px) {
  .promo-block__title {
    white-space: normal;
    font-size: 1.125rem;
  }
}

.promo-block__description {
  margin: 0;
  width: 100%;
  max-width: 36rem; /* body measure only — title stays full column / one line */
  color: #000000;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
}

.promo-block__description .ck-content,
.promo-block__description p,
.promo-block__description span {
  margin: 0;
  color: #000000;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 599.95px) {
  .promo-block__description {
    font-size: 0.75rem;
  }
}

.promo-block a.promo-block__cta,
.promo-block__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0 !important;
  background: #000000;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
}

.promo-block a.promo-block__cta:hover,
.promo-block__cta:hover {
  opacity: 0.85;
  color: #ffffff;
}

/* Slides styles live in slides-block.css */

/* Brand partners */
.brand-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .brand-partners__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.brand-partners__tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.brand-partners__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Generic product cards — carousel cards are overridden in product-carousel.css */
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  padding: 1rem;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  background: #fff;
}

.product-card__title {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Social feed */
.social-feed__embed {
  min-height: 200px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Phase A/C root page parity: specialty JSON-driven block sections.
   Minimal, clean layouts — refine visually once real content is seeded.
   --------------------------------------------------------------------- */

.brand-listing__title,
.blog-listing__title,
.store-locator__title,
.metric-section__title,
.tabular__title,
.vertical-timeline__title,
.info-section__title,
.faq-section__title,
.link-list-grid__title,
.split-image__title,
.social-feed__title {
  display: block;
  margin: 0 0 24px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.brand-listing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 24px;
  align-items: center;
}

.brand-listing__hit,
.brand-listing__hit--static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.brand-listing__image {
  width: 100%;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

.brand-listing__label {
  font-size: 0.875rem;
  text-align: center;
}

.blog-listing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.blog-listing__hit,
.blog-listing__hit--static {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.blog-listing__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-listing__card-title {
  font-weight: 600;
}

.blog-listing__excerpt {
  font-size: 0.875rem;
  opacity: 0.8;
}

.store-locator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.store-locator__hit,
.store-locator__hit--static {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  padding: 16px;
  background: var(--color-brand-surface, #f5f5f5);
}

.store-locator__name {
  font-weight: 600;
}

.store-locator__address {
  font-size: 0.875rem;
  opacity: 0.8;
}

.metric-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  text-align: center;
}

.metric-section__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-section__value {
  font-size: 2rem;
  font-weight: 700;
}

.metric-section__label {
  font-size: 0.875rem;
  opacity: 0.8;
}

.tabular__table-wrap {
  overflow-x: auto;
}

.tabular__table {
  width: 100%;
  border-collapse: collapse;
}

.tabular__cell {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.vertical-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--color-border, #e0e0e0);
}

.vertical-timeline__item {
  position: relative;
  padding: 0 0 24px 24px;
}

.vertical-timeline__date {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

.vertical-timeline__event-title {
  display: block;
  font-weight: 600;
}

.faq-section__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 800px;
  margin-inline: auto;
}

.faq-section__item {
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  padding: 12px 0;
}

.faq-section__question {
  cursor: pointer;
  font-weight: 600;
}

.faq-section__answer {
  margin-top: 8px;
}

.split-image {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media (min-width: 900px) {
  .split-image {
    grid-template-columns: 1fr 1fr;
  }

  .split-image--media-right .split-image__media {
    order: 2;
  }
}

.split-image__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.split-image__cta {
  display: inline-block;
  margin-top: 16px;
}

.link-list-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.link-list-grid__item {
  display: block;
  padding: 12px 16px;
  background: var(--color-brand-surface, #f5f5f5);
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.social-feed__embed {
  min-height: 200px;
}