.vs360-category-page {
  box-sizing: border-box;
  padding-block: var(--vs360-space-4);
}

.vs360-category-hero {
  background: linear-gradient(115deg, var(--vs360-color-primary) 0%, var(--vs360-color-primary) 52%, var(--vs360-category-accent, var(--vs360-color-primary)) 100%);
  border-radius: var(--vs360-radius-lg);
  color: var(--vs360-color-white);
  display: grid;
  min-block-size: clamp(20rem, 36vw, 31rem);
  overflow: hidden;
}

.vs360-category-hero__content {
  align-self: center;
  padding: clamp(2rem, 6vw, 4rem);
  position: relative;
  z-index: 2;
}

.vs360-category-hero__eyebrow { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; margin: 0 0 var(--vs360-space-2); text-transform: uppercase; }
.vs360-category-hero h1 { color: inherit; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; margin: 0; }
.vs360-category-hero__content > p:not(.vs360-category-hero__eyebrow) { line-height: 1.55; max-inline-size: 34rem; }
.vs360-category-hero__visual { align-items: center; background: linear-gradient(110deg, transparent, rgb(255 255 255 / 12%)); display: flex; justify-content: center; min-inline-size: 0; overflow: hidden; }
.vs360-category-hero__visual picture, .vs360-category-hero__visual > img { block-size: 100%; display: block; inline-size: 100%; }
.vs360-category-hero__visual img { block-size: 100%; inline-size: 100%; object-fit: cover; }
.vs360-category-hero__products { align-items: center; display: flex; gap: var(--vs360-space-3); inline-size: 100%; justify-content: center; padding: var(--vs360-space-4); }
.vs360-category-hero__products img { aspect-ratio: 1; background: var(--vs360-color-white); border-radius: var(--vs360-radius-md); box-shadow: var(--vs360-shadow-lg); inline-size: min(29%, 11rem); object-fit: contain; }
.vs360-category-hero__products img:nth-child(2) { inline-size: min(36%, 14rem); transform: translateY(-4%); }
.vs360-category-hero__fallback { color: rgb(255 255 255 / 80%); inline-size: clamp(7rem, 20vw, 13rem); }

.vs360-category-children { background: var(--vs360-color-light); border-radius: var(--vs360-radius-lg); margin-block: var(--vs360-space-3) var(--vs360-space-5); padding: var(--vs360-space-4); }
.vs360-category-children h2 { color: var(--vs360-color-primary); font-size: clamp(1.25rem, 3vw, 1.7rem); margin: 0 0 var(--vs360-space-3); }
.vs360-category-children > div { display: grid; gap: var(--vs360-space-3); grid-auto-columns: minmax(8rem, 42vw); grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x proximity; }
.vs360-category-children a { background: var(--vs360-color-white); border: 1px solid var(--vs360-color-border); border-radius: var(--vs360-radius-md); color: var(--vs360-color-primary); overflow: hidden; scroll-snap-align: start; text-align: center; text-decoration: none; }
.vs360-category-children a > span { align-items: center; aspect-ratio: 4 / 3; display: flex; justify-content: center; overflow: hidden; }
.vs360-category-children img { block-size: 100%; inline-size: 100%; object-fit: cover; }
.vs360-category-children .vs360-category-icon { color: var(--vs360-color-secondary); inline-size: 4rem; }
.vs360-category-children strong { align-items: center; display: flex; font-size: 0.8125rem; justify-content: center; min-block-size: 44px; padding: var(--vs360-space-1); }

.vs360-category-promotion { align-items: center; background: var(--vs360-color-primary); border-radius: var(--vs360-radius-lg); color: var(--vs360-color-white); display: grid; gap: var(--vs360-space-3); margin-block: var(--vs360-space-5); padding: var(--vs360-space-4) var(--vs360-space-5); }
.vs360-category-promotion > div { align-items: center; border: 2px solid var(--vs360-color-white); border-radius: 50%; display: flex; block-size: 44px; inline-size: 44px; justify-content: center; }
.vs360-category-promotion p { font-weight: 700; margin: 0; }
.vs360-category-description { border: 1px solid var(--vs360-color-border); border-radius: var(--vs360-radius-lg); margin-block: var(--vs360-space-5); padding: var(--vs360-space-4); }
.vs360-category-description h2 { color: var(--vs360-color-primary); font-size: 1.25rem; margin: 0 0 var(--vs360-space-2); }
.vs360-category-description div { color: var(--vs360-color-muted); font-size: 0.9rem; line-height: 1.6; }

@media (min-width: 48rem) {
  .vs360-category-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .vs360-category-children > div { grid-auto-flow: initial; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .vs360-category-promotion { grid-template-columns: auto 1fr auto; }
}

@media (min-width: 64rem) {
  .vs360-category-children > div { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 47.9375rem) {
  .vs360-category-hero__visual { min-block-size: 15rem; }
  .vs360-category-hero__visual picture { aspect-ratio: 4 / 3; }
  .vs360-category-promotion .vs360-button { inline-size: 100%; }
}