/* MYGEAR Store UI — base layout */
.mg-ui-v2 .mg-store-root {
  font-family: var(--store-font);
  font-size: var(--store-fs-base);
  line-height: var(--store-leading);
  color: var(--store-text);
}

.mg-ui-v2 .mg-store-container {
  width: 100%;
  max-width: var(--store-container);
  margin-inline: auto;
  padding-inline: var(--store-gap);
}

@media (max-width: 991px) {
  .mg-ui-v2 {
    --store-container: 100%;
    --store-gap: 12px;
  }
}

@media (min-width: 992px) {
  .mg-ui-v2 {
    --store-container: var(--theme-container-mg, min(1240px, calc(100vw - 40px)));
  }

  .mg-ui-v2 .mg-store-container {
    width: min(100%, var(--store-container));
  }
}

@media (min-width: 1280px) {
  .mg-ui-v2 {
    --store-container: var(--theme-container-mg, min(1400px, calc(100vw - 48px)));
  }

  .mg-ui-v2 .mg-store-container {
    padding-inline: var(--store-gap-lg);
  }
}

@media (min-width: 1600px) {
  .mg-ui-v2 {
    --store-container: var(--theme-container-mg, min(1560px, calc(100vw - 48px)));
  }
}

@media (min-width: 1920px) {
  .mg-ui-v2 {
    --store-container: var(--theme-container-mg, min(1800px, calc(100vw - 56px)));
  }
}

.mg-ui-v2 .mg-store-stack {
  display: flex;
  flex-direction: column;
  gap: var(--store-gap-lg);
}

.mg-ui-v2 .mg-store-grid-5 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--store-gap);
}

@media (min-width: 768px) {
  .mg-ui-v2 .mg-store-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .mg-ui-v2 .mg-store-grid-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .mg-ui-v2 .mg-store-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.mg-ui-v2 .mg-store-dev-note {
  padding: 14px 16px;
  font-size: var(--store-fs-sm);
  color: var(--store-text-muted);
  background: var(--store-surface);
  border: 1px solid var(--store-border);
  border-left: 3px solid var(--store-brand);
  border-radius: var(--store-radius-sm);
}