@layer components {

@media (max-width: 1023px) {

  .main-content > .hv-hero {
    padding-top: calc(var(--navbar-h) + var(--hero-lede));
    padding-bottom: var(--stack-lg);
  }
  .hv-hero .section-route {
    margin-top: var(--stack-sm);
    text-align: left;
  }

  .hv-tour {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .hv-tab {
    flex: 0 0 236px;
    gap: var(--space-3);
    scroll-snap-align: start;
  }
  .hv-tab .hv-ph {
    padding: 5px;
    border-radius: 26px;
  }
  .hv-tab .hv-ph-img { border-radius: 21px; }
  .hv-tab-cap {
    text-align: left;
    font-size: 15px;
    line-height: 1.4;
  }
  .hv-tab-cap b { font-size: 15px; }

  .hv-split,
  .hv-split--rev {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-md);
  }
  .hv-split-text .site-head { margin-bottom: 0; }

  .hv-crop img {
    height: 100%;
    object-fit: cover;
  }
  .hv-crop--product { aspect-ratio: 165 / 290; }
  .hv-crop--product img { object-position: 50% 89.5%; }
  .hv-crop--cart { aspect-ratio: 165 / 290; }
  .hv-crop--cart img { object-position: 50% 59.7%; }
  .hv-crop--home { aspect-ratio: 165 / 170; }
  .hv-crop--home img { object-position: 50% 43.9%; }
  .hv-crop--fit { aspect-ratio: 342 / 250; }
  .hv-crop--fit img { object-position: 50% 51%; }

  .hv-m-two,
  .hv-m-four {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .hv-m-four { row-gap: 16px; }
  .hv-m-two .hv-lab,
  .hv-m-four .hv-lab { margin-top: 10px; }

  .hv-rows { max-width: none; }
  .hv-rows li {
    gap: 12px;
    font-size: 15px;
  }
  .hv-rows li span:last-child { max-width: 44%; }
  .hv-chap-sec .hv-lab { margin-bottom: 6px; }

  .hv-m-sale {
    display: grid;
    gap: var(--stack-sm);
  }
  .hv-m-sale .hv-sale-card {
    width: auto;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .hv-m-sale .hv-wdg-k { font-size: 12px; letter-spacing: 0.08em; }
  .hv-m-sale .hv-sale-v { margin-top: 2px; font-size: 15px; }
  .hv-m-sale .hv-sale-amt { font-size: 26px; }

  .hv-m-reach {
    display: grid;
    gap: 12px;
  }
  .hv-m-w {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .hv-m-w .hv-wdg {
    width: auto;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .hv-m-reach .hv-wdg-k {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .hv-m-reach .hv-wdg-v {
    font-size: 14px;
    line-height: 1.3;
  }
  .hv-m-reach .hv-dock {
    width: auto;
    padding: 16px 14px 14px;
    gap: 12px;
  }
  .hv-m-reach .hv-dock-h { font-size: 12px; }
  .hv-m-reach .hv-app-i {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .hv-m-calm {
    display: grid;
    gap: var(--stack-sm);
  }

  .hv-m-fit {
    display: grid;
    gap: 10px;
  }
  .hv-m-fit .hv-chip { padding: 12px 14px; border-radius: 14px; }
  .hv-m-fit .hv-chip-k { font-size: 12px; letter-spacing: 0.1em; }
  .hv-drop {
    justify-self: center;
    width: 1px;
    height: 28px;
    background: linear-gradient(color-mix(in srgb, var(--text-primary) 30%, transparent), var(--accent-ink));
  }

  .hv-sys { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 16px; }
  .hv-sys-a { padding: 14px 14px 16px; }
  .hv-sys > .hv-sys-haven { padding: 20px; }
  .hv-sys-n { font-size: 15px; }
  .hv-sys-haven .hv-sys-n { font-size: 18px; }
  .hv-sys-d { font-size: 13px; line-height: 1.4; }
}

@media (max-width: 1023px) and (min-width: 600px) {
  .hv-shift-m,
  .hv-m-sale,
  .hv-m-fit {
    max-width: 620px;
    margin-inline: auto;
  }
}

}