html,
body {
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video {
  max-width: 100%;
}

.products-filter-sidebar {
  position: sticky !important;
  top: 72px !important;
  z-index: 35;
  align-self: flex-start;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  background: #fff;
  padding-bottom: 20px;
}

@media (max-width: 1023px) {
  .top-logo-area {
    height: 72px !important;
  }

  .top-logo-area .logo-img {
    height: 78px !important;
    margin-top: 18px !important;
  }

  .top-nav-area {
    height: 48px !important;
  }

  .site-header.scrolled .top-nav-area .nav-inner {
    padding-left: 0 !important;
  }

  .top-nav-area .logo-scrolled img {
    height: 52px !important;
  }

  .mobile-toggle {
    right: 18px !important;
  }

  .mobile-menu {
    right: 0 !important;
    left: auto !important;
    width: min(82vw, 360px) !important;
    transform: translateX(100%);
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .hero-section {
    height: calc(100svh - 120px) !important;
    min-height: 420px;
    margin-top: 120px !important;
  }

  .hero-banner {
    margin-top: 120px !important;
  }

  .page-wrap {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="width:1326px"],
  [style*="width:1230px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .star-carousel-wrapper {
    max-width: 100% !important;
  }

  .star-card-btn {
    max-width: 84vw !important;
  }

  [style*="padding:0 80px"],
  [style*="padding:0 60px"],
  [style*="padding:48px 76px"],
  [style*="padding:32px 56px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="display:grid;grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  [style*="display:flex;gap:0px;max-width:1440px"] {
    display: block !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="width:180px;flex:none"] {
    position: static !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin: 0 0 28px !important;
  }

  .tut-nav-parent,
  .tut-nav-sub {
    display: inline-flex !important;
    align-items: center;
    margin-right: 14px;
    padding: 8px 0 !important;
  }

  .tut-nav-sub.collapsed {
    display: none !important;
  }

  .module-row,
  .module-row.reverse {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-bottom: 56px !important;
    padding: 0 !important;
    gap: 22px !important;
  }

  .story-row {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .story-row [style*="flex:0 0 440px"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .story-row [style*="flex:1;padding-top:60px"] {
    width: 100% !important;
    padding-top: 0 !important;
  }

  .story-row h3 {
    margin: 0 0 24px !important;
  }

  [style*="display:flex;justify-content:space-between;align-items:center;gap:60px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  [style*="width:620px;height:465px"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  .module-image {
    width: min(100%, 420px) !important;
    margin: 0 auto !important;
  }

  .tutorial-layer {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 371 / 571;
  }

  .tut-media-title {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .module-text {
    width: 100% !important;
    margin-left: 0 !important;
  }

  [style*="display:flex;align-items:center;gap:50px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  [style*="width:270px"] {
    width: min(100%, 220px) !important;
  }

  .tut-features .tut-feat:not(:first-child) {
    margin-top: 0 !important;
  }

  .tut-feat-icon {
    width: 72px !important;
    height: 72px !important;
  }

  .tut-mode-btns {
    gap: 22px !important;
    flex-wrap: wrap;
  }

  .tut-cards {
    gap: 10px !important;
  }

  .tut-card {
    width: calc(50% - 5px) !important;
    min-height: 72px;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  .page-wrap[style*="display:flex"],
  [style*="display:flex;gap:48px;align-items:flex-start"] {
    flex-direction: column !important;
    gap: 28px !important;
  }

  aside[style*="flex:0 0 280px"] {
    position: static !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .product-row {
    flex-direction: column !important;
    gap: 28px !important;
  }

  [style*="display:flex;gap:12px;flex:0 0 48%"] {
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
  }

  [style*="flex-direction:column;gap:8px;flex-shrink:0"] {
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }

  .product-img-col {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .other-card-btn {
    width: auto !important;
    min-width: 96px;
  }
}

@media (max-width: 640px) {
  .hero-section {
    min-height: 360px;
  }

  .hero-banner {
    height: 220px !important;
  }

  .headline {
    font-size: 28px !important;
  }

  [style*="display:grid;grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .product-grid {
    grid-template-columns: 1fr !important;
  }

  .pc-card__media {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .module-row {
    margin-bottom: 48px !important;
  }

  .tut-card {
    width: 100% !important;
  }

  .btn-wrap {
    flex-wrap: wrap;
  }

  [style*="padding:24px 0 0;display:flex;align-items:center;gap:32px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  [style*="padding:24px 0 0;display:flex;align-items:center;gap:32px"] button {
    width: 100% !important;
  }

  footer [style*="display:flex;justify-content:center;align-items:center;gap:16px"] {
    flex-wrap: wrap !important;
  }
}