/** Shopify CDN: Minification failed

Line 365:4 Unexpected "{"
Line 365:5 Expected identifier but found "%"
Line 365:44 Unexpected "{"
Line 365:45 Expected identifier but found "%"
Line 941:2 Unexpected "{"
Line 941:3 Expected identifier but found "%"
Line 946:4 Unexpected "{"
Line 946:5 Expected identifier but found "%"

**/
.media-highlight {
    position: relative;
    min-height: 600px;
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    background-color: #efefef;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  /* ============================================
   * BACKGROUND LAYER (Full Width)
   * ============================================ */
  .media-highlight__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .media-highlight__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Gradient Overlay - Direction based on content position */
  .media-highlight__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Right content: gradient from left (light) to right (dark) */
  .media-highlight--right .media-highlight__overlay {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.24) 0%,
      rgba(0, 0, 0, 0.65) 67.915%
    );
  }

  /* Left content: gradient from right (light) to left (dark) */
  .media-highlight--left .media-highlight__overlay {
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.24) 0%,
      rgba(0, 0, 0, 0.65) 67.915%
    );
  }

  /* Center content: uniform overlay */
  .media-highlight--center .media-highlight__overlay {
    background: rgba(0, 0, 0, 0.65);
  }

  /* ============================================
   * CONTAINER
   * ============================================ */
  .media-highlight__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 10px;
    display: flex;
  }

  /* ============================================
   * CONTENT BLOCK (Vertical Layout)
   * Title → Text → Video → Button
   * ============================================ */
  .media-highlight__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 473px;
  }

  /* Position: Right (default - Frame 74) */
  .media-highlight--right .media-highlight__container {
    justify-content: flex-end;
  }

  /* Position: Left */
  .media-highlight--left .media-highlight__container {
    justify-content: flex-start;
  }

  /* Position: Center */
  .media-highlight--center .media-highlight__container {
    justify-content: center;
  }

  .media-highlight--center .media-highlight__content {
    align-items: center;
    text-align: center;
  }

  /* ============================================
   * TEXT BLOCK (Title + Description)
   * ============================================ */
  .media-highlight__text-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .media-highlight__subheading {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    text-rendering: geometricPrecision;
  }

  .media-highlight__heading {
    font-family: var(--font-h-family);
    font-size: 32px;
    line-height: 1.15;
    margin: 0;
    color: var(--section-heading-color);
  }

    .media-highlight__text, .media-highlight__text p {
        font-family: var(--font-family);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        color: var(--section-text-color);
        text-rendering: geometricPrecision;
    }

  .media-highlight__text p {
    margin: 0 0 1em;
  }

  .media-highlight__text p:last-child {
    margin-bottom: 0;
  }

  /* ============================================
   * VIDEO PREVIEW (Autoplay, muted, loop)
   * ============================================ */
  .media-highlight__featured {
    position: relative;
    width: 100%;
  }

  .media-highlight__video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
  }

  .media-highlight__video-wrapper:hover .media-highlight__video-cta {
    opacity: 0.9;
  }

  .media-highlight__video-preview {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 473 / 281;
  }

  /* ============================================
   * VIDEO CTA OVERLAY BAR
   * Positioned at bottom of video preview
   * Height: 72px, Background: rgba(0,0,0,0.75)
   * ============================================ */
  .media-highlight__video-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #f6f6f6;
    text-decoration: none;
    border: none;
    pointer-events: none; /* Click is handled by the wrapper */
    transition: opacity 250ms ease-in-out;
    z-index: 2;
  }

  .media-highlight__play-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .media-highlight__video-text {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-align: center;
  }

  .media-highlight__video-duration {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 8px;
  }

  /* ============================================
   * VIDEO MODAL OVERLAY
   * Figma: backdrop-blur-[6px] bg-[rgba(0,0,0,0.85)]
   * ============================================ */
  .media-highlight__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
  }

  .media-highlight__modal[aria-hidden="false"] {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  .media-highlight__modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .media-highlight__modal {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .media-highlight__modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1130px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Close Button - Figma: 40px circle, #444444 bg */
  .media-highlight__modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background: #444444;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background-color 200ms ease;
    z-index: 10;
  }

  .media-highlight__modal-close:hover {
    background: #555555;
  }

  /* Modal Title - Figma: Unna Regular 32px white */
  .media-highlight__modal-title {
    font-family: var(--font-h-family);
    font-size: 32px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    padding-right: 60px;
  }

  /* Video Container */
  .media-highlight__modal-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    overflow: hidden;
  }

  .media-highlight__modal-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ============================================
   * CUSTOM VIDEO CONTROLS
   * Figma: bg-[rgba(45,45,45,0.9)] blur rounded-[17.786px]
   * ============================================ */
  .media-highlight__video-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 28px;
    background: rgba(45, 45, 45, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    color: #ffffff;
    width: 80%;
  }

  /* Auto-hide class: smooth hide/show */
  .media-highlight__video-controls {
    transition: opacity 220ms ease, transform 220ms ease;
    will-change: opacity, transform;
    opacity: 1;
    {% comment %} transform: translateY(0); {% endcomment %}
  }

  /* Hidden state: invisible and non-interactive */
  .media-highlight__video-controls--hidden {
    opacity: 0;
    transform: translate(8px);
    pointer-events: none;
  }

  .media-highlight__control-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Control Buttons */
  .media-highlight__control-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .media-highlight__control-btn:hover {
    opacity: 1;
    transform: scale(1.1);
  }

  /* Play Button larger */
  .media-highlight__play-btn {
    padding: 8px;
  }

  /* Volume Group */
  .media-highlight__volume-group {
    gap: 6px;
  }

  .media-highlight__volume-slider {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
  }

  .media-highlight__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
  }

  .media-highlight__volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }

  /* Playback Controls */
  .media-highlight__playback-group {
    gap: 12px;
  }

  /* Timeline Group - Figma: 472.446px width */
  .media-highlight__timeline-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
  }

  .media-highlight__time-current,
  .media-highlight__time-total {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    min-width: 36px;
    text-align: center;
  }

  .media-highlight__timeline {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
  }

  .media-highlight__timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ffffff;
    border-radius: 2px;
    width: 0%;
    pointer-events: none;
    z-index: 1;
    will-change: width;
  }

  .media-highlight__timeline-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    will-change: left;
  }

  .media-highlight__timeline-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
  }

  /* ============================================
   * CTA BUTTON
   * ============================================ */
  .media-highlight__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    line-height: normal;
    border: none;
    cursor: pointer;
    transition: all 250ms ease-in-out;
    align-self: flex-start;
  }

  .media-highlight--center .media-highlight__button {
    align-self: center;
  }

  .media-highlight__button.button--primary {
    background-color: rgb(var(--color-btn-bg, var(--color-primary, 0, 0, 0)));
    color: rgb(var(--color-btn-fg, 255, 255, 255));
  }

  .media-highlight__button.button--primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .media-highlight__button.button--secondary {
    background-color: #ffffff;
    color: #000000;
  }

  .media-highlight__button.button--secondary:hover {
    background-color: #f0f0f0;
  }

  .media-highlight__button.button--outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
  }

  .media-highlight__button.button--outline:hover {
    background-color: #ffffff;
    color: #000000;
  }

  /* ============================================
   * SIDE BY SIDE LAYOUT
   * ============================================ */
  .media-highlight--side-by-side {
    min-height: auto;
  }

  .media-highlight--side-by-side .media-highlight__background {
    display: none;
  }

  .media-highlight--side-by-side .media-highlight__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 56px 40px;
  }

  .media-highlight--side-by-side .media-highlight__content {
    display: contents;
  }

  .media-highlight--side-by-side .media-highlight__featured {
    flex: 0 0 710px;
    width: 710px;
    order: 1;
  }

  .media-highlight--side-by-side .media-highlight__video-preview {
    aspect-ratio: 16/9;
  }

  .media-highlight--side-by-side .media-highlight__text-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 56px;
    max-width: 647px;
    order: 2;
  }

  .media-highlight--side-by-side .media-highlight__text {
    color: var(--section-text-color);
  }

  .media-highlight--side-by-side .media-highlight__heading {
    font-family: var(--font-h-family);
    font-size: 32px;
    line-height: 1.15;
    color: var(--section-heading-color);
  }

  .media-highlight__text-block .media-highlight__text p{
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: rgb(var(--color-text));
    max-width: 490px;
  }

  /* Position: Left = Video Right, Text Left */
  .media-highlight--side-by-side.media-highlight--left .media-highlight__featured {
    order: 2;
  }

  .media-highlight--side-by-side.media-highlight--left .media-highlight__text-block {
    order: 1;
    padding-left: 0;
    padding-right: 56px;
  }

  /* ============================================
   * WITHOUT BACKGROUND IMAGE (Light Mode)
   * ============================================ */
  .media-highlight:not(.media-highlight--has-bg) .media-highlight__overlay {
    display: none;
  }

  .media-highlight:not(.media-highlight--has-bg) .media-highlight__subheading {
    color: rgba(0, 0, 0, 0.6);
  }

  .media-highlight:not(.media-highlight--has-bg) .media-highlight__heading {
    color: #000000;
  }

  .media-highlight:not(.media-highlight--has-bg) .media-highlight__text {
    color: rgb(var(--color-text));
  }

  .media-highlight:not(.media-highlight--has-bg) .media-highlight__button.button--outline {
    color: #000000;
    border-color: #000000;
  }

  .media-highlight:not(.media-highlight--has-bg) .media-highlight__button.button--outline:hover {
    background-color: #000000;
    color: #ffffff;
  }

  /* ============================================
   * MOBILE STYLES (< 640px)
   * ============================================ */
  @media (max-width: 639px) {
    .media-highlight {
      min-height: auto;
      padding: 0;
      display: block;
    }

    /* Side by Side Mobile */
    .media-highlight--side-by-side {
      padding: 24px 0;
    }

    .media-highlight--side-by-side .media-highlight__container {
      flex-direction: column;
      padding: 0 10px;
      gap: 32px;
    }

    .media-highlight--side-by-side .media-highlight__featured {
      flex: none;
      width: 100%;
      order: -1 !important;
    }

    .media-highlight--side-by-side .media-highlight__video-preview {
      aspect-ratio: 16/9;
    }

    .media-highlight--side-by-side .media-highlight__text-block {
      flex: none;
      width: 100%;
      padding: 0 !important;
      order: 0 !important;
      gap: 24px;
    }

    .media-highlight--side-by-side .media-highlight__heading {
      font-size: 32px;
    }

    .media-highlight--side-by-side .media-highlight__text {
      font-size: 18px;
      max-width: 100%;
      margin-bottom: 8px;
    }

    .media-highlight--side-by-side .media-highlight__button {
      width: 100%;
      margin: 0 !important;
      order: 1 !important;
    }

    /* Mobile WITHOUT background image (Overlay mode) */
    .media-highlight--overlay:not(.media-highlight--has-bg) {
      padding: 24px 0;
    }

    .media-highlight--overlay:not(.media-highlight--has-bg) .media-highlight__container {
      padding: 0 10px;
    }

    .media-highlight--overlay:not(.media-highlight--has-bg) .media-highlight__content {
      gap: 24px;
    }

    .media-highlight--overlay:not(.media-highlight--has-bg) .media-highlight__featured {
      order: -1;
    }

    /* Mobile WITH BACKGROUND IMAGE (Overlay mode) */
    .media-highlight--overlay.media-highlight--has-bg {
      min-height: 801px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 574px;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__background-image {
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__overlay {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.255) 0%,
        rgba(0, 0, 0, 0.85) 68.762%
      ) !important;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__container {
      position: relative;
      z-index: 1;
      padding: 0 10px 24px 10px;
      margin-top: auto;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__content {
      max-width: 100%;
      gap: 26.385px;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__text-block {
      gap: 19.789px;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__heading {
      font-size: 32px;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__text {
      font-size: 16px;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__featured {
      order: 0;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__video-wrapper {
      overflow: hidden;
    }

    .media-highlight--overlay.media-highlight--has-bg .media-highlight__video-preview {
      aspect-ratio: 370 / 232;
    }

    /* General mobile styles */
    .media-highlight__container {
      padding: 0 10px;
      justify-content: flex-start !important;
    }

    .media-highlight__content {
      max-width: 100%;
      gap: 24px;
    }

    .media-highlight__text-block {
      gap: 16px;
    }

    .media-highlight__heading {
      font-size: 28px;
    }

    .media-highlight__text {
      font-size: 16px;
    }

    .media-highlight__button {
      width: 100%;
      justify-content: center;
    }

    /* Video CTA mobile */
    .media-highlight__video-cta {
      gap: 8px;
    }

    .media-highlight__video-text {
      font-size: 14px;
    }

    /* Modal mobile */
    .media-highlight__modal-content {
      padding: 16px;
      gap: 12px;
    }

    .media-highlight__modal-title {
      font-size: 24px;
      padding-right: 50px;
    }

    .media-highlight__modal-close {
      width: 36px;
      height: 36px;
    }

    /* Controls mobile - simplified */
    .media-highlight__video-controls {
      flex-wrap: wrap;
      gap: 12px;
      padding: 10px 16px;
      bottom: 10px;
      border-radius: 12px;
    }

    .media-highlight__timeline-group {
      order: 10;
      width: 100%;
      min-width: 100%;
    }

    .media-highlight__volume-group {
      order: 1;
    }

    .media-highlight__playback-group {
      order: 2;
      margin-left: auto;
      margin-right: auto;
    }

    .media-highlight__control-btn[data-fullscreen-btn] {
      order: 3;
    }
  }

  /* ============================================
   * TABLET STYLES (640px - 1023px)
   * ============================================ */
  @media (min-width: 640px) and (max-width: 1023px) {
    .media-highlight--overlay {
      min-height: 500px;
    }

    .media-highlight--overlay .media-highlight__container {
      padding: 40px 24px;
    }

    .media-highlight--overlay .media-highlight__content {
      max-width: 400px;
    }

    .media-highlight--overlay .media-highlight__heading {
      font-size: 36px;
    }

    .media-highlight--overlay .media-highlight__text {
      font-size: 17px;
    }

    /* Side by Side Tablet */
    .media-highlight--side-by-side .media-highlight__container {
      padding: 40px 24px;
      gap: 24px;
    }

    .media-highlight--side-by-side .media-highlight__featured {
      flex: 0 0 45%;
      width: 45%;
    }

    .media-highlight--side-by-side .media-highlight__text-block {
      flex: 1;
      padding-left: 32px;
    }

    .media-highlight--side-by-side.media-highlight--left .media-highlight__text-block {
      padding-left: 0;
      padding-right: 32px;
    }

    .media-highlight--side-by-side .media-highlight__heading {
      font-size: 28px;
    }

    .media-highlight--side-by-side .media-highlight__text {
      font-size: 16px;
      max-width: 100%;
    }

    /* Modal tablet */
    .media-highlight__modal-content {
      max-width: 90%;
    }
  }

  {% comment %} @media (max-width: 1150px) and (min-width: 1028px) {
    .media-highlight--side-by-side .media-highlight__featured {
      width: initial;
      flex: initial;
    } 
  } {% endcomment %}

  /* ============================================
   * DESKTOP STYLES (1024px+)
   * ============================================ */
  @media (min-width: 1024px) {
    .media-highlight--overlay {
      min-height: 740px;
    }

    .media-highlight--overlay .media-highlight__container {
      padding: 67px 64px;
    }

    .media-highlight--overlay .media-highlight__content {
      max-width: 473px;
    }

    .media-highlight--overlay .media-highlight__heading {
      font-size: 40px;
    }

    .media-highlight--overlay .media-highlight__text {
      font-size: 18px;
      line-height: 140%;
    }

    .media-highlight--overlay .media-highlight__video-preview {
      aspect-ratio: 473 / 281;
    }

    /* Side by Side Layout */
    .media-highlight--side-by-side {
      min-height: 634px;
    }

    .media-highlight--side-by-side .media-highlight__container {
      padding: 56px 40px;
      align-items: center;
    }

    .media-highlight--side-by-side .media-highlight__video-preview {
      aspect-ratio: 16/9;
    }

    .media-highlight--side-by-side .media-highlight__text-block {
      max-width: 647px;
      padding-left: 56px;
      min-width: 399px;
    }

    .media-highlight--side-by-side.media-highlight--left .media-highlight__text-block {
      padding-left: 0;
      padding-right: 56px;
    }

    .media-highlight--side-by-side .media-highlight__heading {
      font-size: 32px;
    }

    .media-highlight--side-by-side .media-highlight__text {
      font-size: 18px;
      max-width: 490px;
    }
  }

  /* ============================================
   * LARGE DESKTOP STYLES (1280px+)
   * ============================================ */
  @media (min-width: 1280px) {
    .media-highlight--overlay .media-highlight__container {
      padding: 67px 120px;
    }
  }