.header-menu .header-menu-ul .sub-menu {
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

 
.product-card[id] {
  grid-column-start: 1;
}

 
.product-card[id],
main section[id],
main li[id^="style-"] {
  scroll-margin-top: 100px;
}

 
@media (min-width:1200px) and (max-width:1399.98px) {
  .header-menu .header-menu-ul > li > a { padding-inline:8px; font-size:15px; }
}

 
@media (min-width:768px) and (max-width:1399.98px) {
  #home-hero, main > section:first-child.bg_qianzi:has(> picture) { display:grid; }
  #home-hero > picture,
  #home-hero > .position-absolute,
  main > section:first-child.bg_qianzi:has(> picture) > picture,
  main > section:first-child.bg_qianzi:has(> picture) > .position-absolute { grid-area:1 / 1; }
  #home-hero > picture, main > section:first-child.bg_qianzi:has(> picture) > picture { position:relative; min-height:40vw; }
  #home-hero > picture img, main > section:first-child.bg_qianzi:has(> picture) > picture img { position:absolute; width:100%; height:100%; object-fit:cover; }
  #home-hero > .position-absolute, main > section:first-child.bg_qianzi:has(> picture) > .position-absolute { position:relative!important; padding-block:28px; }
  #home-hero .d-flex.h-100, main > section:first-child.bg_qianzi:has(> picture) .d-flex.h-100 { align-items:center; padding-block:0!important; }
}

 
@media (max-width: 767.98px) {
  .ribbon-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
    background-color: var(--hero-photo-bg);
  }

  .ribbon-hero > picture {
    order: 1;
    display: block;
    width: 100%;
    max-width: 640px;
  }

  .ribbon-hero > picture img {
    display: block;
    width: 100%;
    height: auto;
  }

  .ribbon-hero-copy {
    position: static !important;
    width: 100%;
    max-width: 560px;
    padding: 32px 20px 24px;
  }

  .ribbon-hero-copy,
  .ribbon-hero-copy .h-100 {
    height: auto !important;
  }

  .ribbon-hero-copy .container,
  .ribbon-hero-copy .d-flex.h-100 {
    max-width: none;
    padding: 0 !important;
  }

  .ribbon-hero-copy .col-md-6,
  .ribbon-hero-copy .col-10 {
    width: 100%;
  }

  .ribbon-hero-copy h1 {
    margin-bottom: 12px !important;
  }

  .ribbon-hero-copy p,
  .ribbon-hero-copy ul {
    margin-bottom: 0 !important;
  }

  .ribbon-hero-copy p + ul {
    margin-top: 12px;
  }

  .ribbon-hero-copy .site-cta-group {
    margin-top: 20px !important;
  }

  #home-hero .site-cta {
    padding-inline: 15px !important;
  }

   
  .ribbon-hero-directory::before {
    content: "";
    width: min(100%, 270px);
    aspect-ratio: 1080 / 401;
    background: url("/assets/img/pages/collections/index/photos/ribbon-range-studio-v3-mobile-top.webp") center / contain no-repeat;
  }

  .ribbon-hero-directory .ribbon-hero-copy {
    padding-top: 20px;
  }
}