html {
  background: var(--theme-body-bg);
}

body.storefront-body,
body.admin-template-body,
body.storefront-body button,
body.storefront-body input,
body.storefront-body select,
body.storefront-body textarea,
body.admin-template-body button,
body.admin-template-body input,
body.admin-template-body select,
body.admin-template-body textarea {
  font-family: var(--theme-font-body);
}

body.storefront-body,
body.admin-template-body {
  min-width: 320px;
  margin: 0;
  background: var(--theme-body-bg);
  color: var(--theme-text);
  font-size: var(--theme-font-size);
  line-height: var(--theme-line-height);
  overflow-x: hidden;
}

body.storefront-body h1,
body.storefront-body h2,
body.storefront-body h3,
body.storefront-body h4,
body.admin-template-body h1,
body.admin-template-body h2,
body.admin-template-body h3,
body.admin-template-body h4 {
  color: var(--theme-heading);
  font-family: var(--theme-font-heading);
  letter-spacing: 0;
}

body.storefront-body .container,
body.storefront-body .hh-container,
body.admin-template-body .container,
body.admin-template-body .admin-layout {
  width: calc(100% - (var(--theme-container-gap) * 2));
  max-width: 1480px;
  margin-right: auto;
  margin-left: auto;
}

body.storefront-body .page {
  min-height: 48vh;
  padding: var(--theme-section-gap) 0 calc(var(--theme-section-gap) * 1.5);
}

body.admin-template-body .page {
  min-height: calc(100vh - 58px);
  padding: 10px 0 14px;
}

body.storefront-body .grid,
body.admin-template-body .grid,
body.admin-template-body .metric-grid {
  gap: var(--theme-grid-gap);
}

body.storefront-body .section-head,
body.admin-template-body .section-head {
  gap: 12px;
  margin: var(--theme-section-gap) 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--theme-border);
}

body.storefront-body .section-head:first-child,
body.admin-template-body .section-head:first-child {
  margin-top: 0;
}

body.admin-template-body .admin-layout {
  display: grid;
  grid-template-columns: var(--theme-sidebar-width) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

body.admin-template-body .admin-main {
  min-width: 0;
}

body.storefront-body .product-detail,
body.storefront-body .account-shell {
  gap: calc(var(--theme-grid-gap) * 1.25);
}

body.storefront-body img,
body.admin-template-body img {
  max-width: 100%;
}