/* SHOPLINE OS 3.0 layout and color-scheme integration. */
.rh26 {
  --brand: rgb(var(--color-button-background));
  --orange: rgb(var(--color-button-background));
  --beige: rgb(var(--color-background));
  --cream: rgb(var(--color-background));
  --brown: rgb(var(--color-text));
  --ink: rgb(var(--color-text));
  --purple: rgb(var(--color-button-text-link, var(--color-text)));
  --line: rgba(var(--color-text), 0.16);
  color: rgb(var(--color-text));
  background: rgb(var(--color-background));
}

.rh26 section:not(.hero) {
  padding-inline: var(--page-padding);
}

.rh26 .wrap {
  width: 100%;
  max-width: var(--page-width);
}

.rh26 .hero-copy {
  padding-left: max(var(--page-padding), calc((100vw - var(--page-width)) / 2));
}

.rh26 .btn-primary,
.rh26 .btn-outline,
.rh26 .shop-panel .btn,
.rh26 .product-tabs button[aria-selected="true"] {
  color: rgb(var(--color-button-text));
  background: rgb(var(--color-button-background));
  border-color: rgb(var(--color-button-background));
}

.rh26 .btn-secondary {
  color: rgb(var(--color-button-secondary-text));
  background: rgb(var(--color-button-secondary-background));
  border-color: rgb(var(--color-button-secondary-border));
  backdrop-filter: none;
}

.rh26 .product-arrow,
.rh26 .blog-arrow {
  color: rgb(var(--color-button-secondary-text));
  background: rgb(var(--color-button-secondary-background));
}

.rh26 .maker-arrow,
.rh26 .idea-num,
.rh26 .status {
  color: rgb(var(--color-button-text));
  background: rgb(var(--color-button-background));
}

.rh26 .maker-section,
.rh26 .shop-panel {
  color: rgb(var(--color-button-secondary-text));
  background: rgb(var(--color-button-secondary-background));
}

.rh26 .closing {
  color: rgb(var(--color-button-text));
  background: rgb(var(--color-button-background));
}

.rh26 .closing .eyebrow {
  color: inherit;
}

.rh26 .closing .btn-primary {
  color: rgb(var(--color-button-secondary-text));
  background: rgb(var(--color-button-secondary-background));
  border-color: rgb(var(--color-button-secondary-border));
}

@media (max-width: 900px) {
  .rh26 .hero-copy {
    padding-left: var(--page-padding);
  }
}

@media (max-width: 700px) {
  .rh26 .blog-grid {
    margin-right: calc(-1 * var(--page-padding));
    padding-right: var(--page-padding);
  }
}

@media (max-width: 620px) {
  .rh26 .hero-copy {
    padding-inline: var(--page-padding) !important;
  }
}