@media all {

  img,
  media-carousel {
    display: block
  }

  *,
  :after,
  :before {
    box-sizing  : border-box;
    border-style: solid;
    border-width: 0;
    border-color: rgb(var(--text-color) / .12)
  }

  h1,
  h3,
  h4 {
    font-size  : inherit;
    font-weight: inherit
  }

  h1,
  h3,
  h4,
  p {
    margin: 0
  }

  :disabled {
    cursor: default
  }

  img {
    vertical-align: middle;
    color         : #0000;
    max-width     : min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%);
    height        : auto
  }

  .full-bleed {
    margin-inline-start: calc(-1 * var(--container-outer-width));
    margin-inline-end  : calc(-1 * var(--container-outer-width));
    display            : grid
  }

  [role=main] .oola-lifestyle-framework-details {
    --section-is-first                : 0;
    --hash-difference                 : calc(var(--section-background-hash) - var(--previous-section-background-hash, -1));
    --hash-difference-abs             : max(var(--hash-difference), -1 * var(--hash-difference));
    --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1));
    background                        : rgb(var(--background));
    position                          : relative
  }

  [role=main] .oola-lifestyle-framework-details:not(.contents) {
    display: flow-root
  }

  [role=main] .oola-lifestyle-framework-details:empty {
    display: none
  }

  [role=main] .oola-lifestyle-framework-details:first-child {
    --section-is-first: 1
  }

  .section {
    --context-section-spacing-block-start   : var(--section-outer-spacing-block);
    --context-section-spacing-block-end     : var(--section-outer-spacing-block);
    --context-section-spacing-inline        : var(--container-gutter);
    --calculated-section-spacing-block-start: var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start)));
    --calculated-section-spacing-block-end  : var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end)));
    --calculated-section-spacing-inline     : var(--section-spacing-inline, var(--context-section-spacing-inline));
    --container-inner-width                 : min((100vw - var(--scrollbar-width, 0px)) - var(--calculated-section-spacing-inline, 0px) * 2, var(--container-max-width));
    --container-outer-width                 : calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width, 0px)) / 2);
    --section-stack-spacing-inline          : var(--section-inner-spacing-inline, 0px);
    padding-inline-start                    : max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width)/ 2);
    padding-inline-end                      : max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width)/ 2);
    padding-block-start                     : calc(var(--background-differs-from-previous) * var(--calculated-section-spacing-block-start));
    padding-block-end                       : var(--calculated-section-spacing-block-end)
  }

  .section--tight {
    --calculated-section-spacing-block-start: min(48px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start))));
    --calculated-section-spacing-block-end  : min(48px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end))));
    --calculated-section-spacing-inline     : min(48px, var(--section-spacing-inline, var(--context-section-spacing-inline)))
  }

  @media screen and (min-width:700px) {
    img {
      max-width: min(var(--image-max-width, 100%), 100%)
    }

    .section--tight {
      --calculated-section-spacing-block-start: min(48px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start, 0px))));
      --calculated-section-spacing-block-end  : min(48px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end, 0px))))
    }

    .oola-lifestyle-framework-details:first-child {
      --section-outer-spacing-block-start: 24px
    }
  }

  .prose>:first-child {
    margin-block-start: 0 !important
  }

  .prose>:last-child,
  .prose>:last-child :last-child {
    margin-block-end: 0 !important
  }

  .prose *+:is(p, div, ul, ol) {
    margin-block-start: var(--spacing-3)
  }

  .prose :is(.h0, .h1, .h2, .h3, .h4, h1, h2, h3, h4)+* {
    margin-block-start: var(--spacing-5)
  }

  .product {
    grid       : var(--product-grid);
    gap        : var(--container-gutter) var(--spacing-10);
    align-items: start;
    display    : grid
  }

  @media screen and (min-width:1150px) {
    .prose *+p {
      margin-block-start: var(--spacing-6)
    }

    .prose :is(.h3, .h4, h3, h4)+* {
      margin-block-start: var(--spacing-6)
    }

    .product {
      column-gap: var(--spacing-12)
    }
  }

  @media screen and (min-width:1600px) {
    .section--tight {
      --calculated-section-spacing-block-start: min(64px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start, 0px))));
      --calculated-section-spacing-block-end  : min(64px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end, 0px))))
    }

    .product {
      column-gap: var(--spacing-24)
    }
  }

  .product-info {
    --product-info-block-spacing: var(--spacing-6)
  }

  .product-info>*+* {
    margin-block-start: var(--product-info-block-spacing);
    margin-block-end  : var(--product-info-block-spacing)
  }

  .product-info>:last-child {
    margin-block-end: 0
  }

  .product-info__title {
    --product-info-block-spacing: var(--spacing-2)
  }

  @media screen and (min-width:700px) {
    .prose *+:is(p, div, ul, ol) {
      margin-block-start: var(--spacing-4)
    }

    .prose :is(.h4, h4)+* {
      margin-block-start: var(--spacing-5)
    }

    .product-info__title {
      --product-info-block-spacing: var(--spacing-4)
    }
  }

  .product-gallery {
    gap              : var(--spacing-5);
    grid-auto-columns: minmax(0, 1fr);
    display          : grid
  }

  .product-gallery__ar-wrapper {
    gap    : var(--spacing-2-5);
    display: grid
  }

  .product-gallery__media-list-wrapper {
    display : grid;
    position: relative
  }

  .product-gallery__media-list {
    grid       : var(--product-gallery-media-list-grid);
    gap        : var(--product-gallery-media-list-gap);
    align-items: start;
    transition : height .1s;
    display    : grid
  }

  .product-gallery__media {
    position: relative
  }

  .product-gallery__media img {
    margin-inline-start: auto;
    margin-inline-end  : auto
  }

  @media screen and (max-width:999px) {

    .product-gallery--mobile-expanded .product-gallery__media,
    .product-gallery--mobile-expanded .product-gallery__media>* {
      border-radius: 0
    }
  }

  @media screen and (min-width:1000px) {
    .md\:unbleed {
      margin-inline-start  : 0;
      margin-inline-end    : 0;
      padding-inline-start : 0;
      padding-inline-end   : 0;
      scroll-padding-inline: 0
    }

    .product-info {
      top     : calc(var(--sticky-area-height) + 20px);
      z-index : 1;
      position: sticky
    }

    .product-gallery {
      gap: var(--spacing-6) var(--spacing-12)
    }
  }

  @media screen and (min-width:1150px) {
    .product-gallery--desktop-thumbnails-left {
      grid       : auto/auto-flow auto minmax(0, 1fr);
      align-items: start
    }
  }

  .rounded {
    border-radius: var(--rounded)
  }

  .scroll-area {
    scrollbar-width      : none;
    scroll-snap-type     : x mandatory;
    overscroll-behavior-x: contain;
    overflow-x           : auto;
    overflow-y           : hidden
  }

  .scroll-area::-webkit-scrollbar {
    display: none
  }

  .snap-center {
    scroll-snap-align: center;
    scroll-snap-stop : always
  }

  .h1,
  .prose :is(h1, h2, h3, h4, h5, h6) {
    font-family   : var(--heading-font-family);
    font-weight   : var(--heading-font-weight);
    font-style    : var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    overflow-wrap : anywhere
  }

  .h1 {
    font-size  : var(--text-h1);
    line-height: 1.1
  }

  .prose h3:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-size  : var(--text-h3);
    line-height: 1.2
  }

  .prose h4:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-size  : var(--text-h4);
    line-height: 1.3
  }
}

/*! CSS Used from: Embedded */
.oola-lifestyle-framework-details {
  --section-background-hash        : 0;
  --product-grid                   : auto/minmax(0, 1fr);
  --product-gallery-media-list-grid: auto/auto-flow 100%;
  --product-gallery-media-list-gap : var(--spacing-0-5)
}

/*! CSS Used from: Embedded */
@media screen and (max-width:999px) {
  .oola-lifestyle-framework-details {
    --section-spacing-block-start: 0px
  }
}

@media screen and (min-width:1000px) {
  .oola-lifestyle-framework-details {
    --product-grid                   : auto/minmax(0, 0.8fr) minmax(0, 1.2fr);
    --product-gallery-media-list-grid: auto/auto-flow 100%;
    --product-gallery-media-list-gap : calc(var(--grid-gutter) / 2)
  }
}

@media screen and (min-width:1400px) {
  .oola-lifestyle-framework-details {
    --product-gallery-media-list-gap: var(--grid-gutter)
  }
}

@media screen and (min-width: 1150px) {
    :root {
        --container-gutter: var(--spacing-12);
    }
}