/* Layout shared by every theme; each theme sets its fonts, colors and shapes on top. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --bg: #ffffff;
  --text: #1f1f1f;
  --muted: #666666;
  --line: #e4e4e4;
  /* Shared with the dashboard: dark enough to see on white, short of black. */
  --input-line: #6f6b66;
  --surface: #f6f6f6;
  --radius: 6px;
  --heading-font: inherit;
  --max-width: 1120px;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
  padding-top: 32px;
  padding-bottom: 56px;
}
h1,
h2,
h3 {
  font-family: var(--heading-font);
  line-height: 1.2;
}
h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 24px;
}
a {
  color: var(--primary);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.announcement {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.95rem;
}
.site-header {
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--heading-font);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--primary);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}
.header-centered {
  text-align: center;
  padding-top: 28px;
  padding-bottom: 16px;
}
.tagline {
  color: var(--muted);
  margin: 6px 0 0;
}
.nav {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.header-centered .nav {
  justify-content: center;
  margin-top: 16px;
}
.nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.nav a:hover,
.nav a:focus-visible {
  color: var(--primary);
}
.badge {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}
.site-header .container {
  max-width: 90%;
  padding-left: 40px;
  padding-right: 40px;
}
.header-bar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  grid-template-areas: 'identity search tools' 'tagline tagline .';
  align-items: center;
  column-gap: 52px;
  row-gap: 6px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  text-decoration: none;
  color: inherit;
}
.header-bar .tagline {
  grid-area: tagline;
  margin: 0;
}
.logo-mark {
  max-height: 48px;
  max-width: 160px;
  object-fit: contain;
}
.shop-name {
  min-width: 0;
}
.search {
  grid-area: search;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--input-line);
  border-radius: max(12px, var(--radius));
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--text);
}
.search button {
  font: inherit;
  font-weight: 600;
  padding: 8px 18px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.tools {
  grid-area: tools;
}
.tools {
  justify-content: flex-end;
}
.store-frame {
  display: grid;
  flex: 1;
  /* Equal side columns keep the catalogue centred. The minimum side
     width is what the vertical menu needs, so the centre column shrinks
     on a narrower desktop instead of pushing the menu off the page. */
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1120px) minmax(220px, 1fr);
  align-items: start;
  padding: 0 24px;
}
.store-frame > main {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
/* The negative margin cancels the centre column's side padding, so the picture
   spans that column and sits directly under the navigation. Browsers do not
   show the alt text on hover, so the same words appear in a tip. */
.store-banner-frame {
  position: relative;
  width: calc(100% + 40px);
  max-width: none;
  margin: 0 -20px 28px;
}
.store-banner {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}
.banner-tip {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: min(640px, calc(100% - 48px));
  margin: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(29, 42, 34, 0.92);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.store-banner-frame:hover .banner-tip,
.store-banner-frame:focus-within .banner-tip {
  opacity: 1;
}
.category-rail {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: end;
  width: min(240px, 100%);
  margin: 0;
  padding: 32px 28px 32px 24px;
}
.rail-title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 700;
}
.category-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-rail a {
  display: block;
  padding: 7px 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.category-rail .child a {
  padding-left: 16px;
  color: var(--muted);
  font-weight: 500;
}
.category-rail a:hover,
.category-rail a:focus-visible {
  color: var(--primary);
}
/* The category name stays a link. Only the chevron opens the sub-categories,
   so the two actions do not share one click. */
.cat-branch {
  position: relative;
}
.cat-branch > a {
  padding-right: 32px;
}
.subcats > summary {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.subcats > summary::-webkit-details-marker {
  display: none;
}
.subcats > summary::marker {
  content: '';
}
.subcats > summary:hover,
.subcats > summary:focus-visible {
  color: var(--primary);
  background: var(--surface);
}
.subcats .chevron {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.15s ease;
}
.subcats[open] .chevron {
  transform: rotate(90deg);
}
.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.icon-link svg {
  width: 24px;
  height: 24px;
  display: block;
}
.icon-tip {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #1d2a22;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.icon-link:hover .icon-tip,
.icon-link:focus-visible .icon-tip {
  opacity: 1;
}
.inline-form {
  display: inline;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  max-width: 760px;
}
.account-grid form,
.favorite-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.account {
  max-width: 760px;
  margin-inline: auto;
}
.account h1 {
  text-align: center;
}
.account h2 {
  margin: 0;
}
.account form {
  width: 100%;
}
.account > form {
  max-width: 360px;
}
.account-grid form {
  align-items: stretch;
}
.account-grid form .button {
  margin-top: auto;
}
.account label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-weight: 600;
}
.account input:not([type='checkbox']) {
  width: 100%;
  font-weight: 400;
}
.account label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.account label.check input {
  width: auto;
}
.account .password {
  position: relative;
  display: flex;
  width: 100%;
  font-weight: 400;
}
.account .password input {
  flex: 1;
  padding-right: 44px;
}
.account .password .reveal {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.account .password .reveal[hidden] {
  display: none;
}
.account .password .reveal .cross {
  display: none;
}
.account .password .reveal[aria-pressed='true'] .cross {
  display: inline;
}
.account .button {
  width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
}
.card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-image {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.card a:hover img {
  transform: scale(1.03);
}
.card h3 {
  font-size: 1.05rem;
  margin: 12px 0 4px;
}
.price {
  margin: 0;
  font-weight: 600;
}
.price s {
  color: var(--muted);
  font-weight: 400;
  margin-right: 6px;
}
.price.large {
  font-size: 1.5rem;
  margin-bottom: 16px;
}
.sold-out {
  color: #b42318;
  font-weight: 600;
  margin-left: 8px;
}
.no-image {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, var(--surface), var(--line));
}
.no-image.large {
  aspect-ratio: 1;
  border-radius: var(--radius);
}
.empty,
.muted {
  color: var(--muted);
}

.back {
  margin: 0 0 16px;
}
.back a {
  text-decoration: none;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}
.breadcrumb li + li::before {
  content: '›';
  margin-right: 6px;
}
.breadcrumb a {
  text-decoration: none;
}
.subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.subcategories a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
}
.subcategories a:hover,
.subcategories a:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.gallery {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.main-image {
  flex: 1;
  min-width: 0;
  width: 100%;
  border-radius: var(--radius);
}
/* Two columns keep seven photos beside the large image instead of a long strip. */
.thumbnails {
  display: grid;
  grid-template-columns: repeat(2, 80px);
  gap: 8px;
  flex: none;
  margin: 0;
}
.thumbnails .thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  line-height: 0;
}
.thumbnails .thumb.is-selected,
.thumbnails .thumb:focus-visible {
  border-color: var(--primary);
}
.thumbnails img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  display: block;
}
.description {
  white-space: pre-line;
  margin-top: 24px;
}
.maker-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.maker-card img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  flex: none;
}
.maker-card h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.maker-card p {
  margin: 0;
}
.maker-more {
  margin-top: 8px;
}
/* The left column is narrow, so the portrait stacks above the name. */
.category-rail .maker-card {
  flex-direction: column;
  align-items: center;
  margin: 28px 0 0;
  padding: 16px 12px;
  text-align: center;
}
.category-rail .maker-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
}
.category-rail .maker-card h2 {
  font-size: 1.05rem;
}
.maker-page {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.maker-page img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.maker-page .story {
  white-space: pre-line;
}
.stock-note {
  color: #b54708;
  font-weight: 600;
}
.add-to-cart {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.add-to-cart label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  gap: 4px;
}
.add-to-cart input {
  width: 80px;
}

input,
select,
textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--input-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--primary);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}
.button.primary {
  background: var(--primary);
  color: #fff;
}
.button:hover {
  filter: brightness(1.08);
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  padding: 0;
}
.notice {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  padding: 12px 16px;
  border-radius: var(--radius);
}
.error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  padding: 12px 16px;
  border-radius: var(--radius);
  color: #b42318;
}

.cart table,
.order-summary {
  width: 100%;
  border-collapse: collapse;
}
.cart th,
.cart td,
.order-summary td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.cart input {
  width: 72px;
}
.amount {
  text-align: right !important;
  white-space: nowrap;
}
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.subtotal {
  font-size: 1.15rem;
  margin: 0;
}
.actions {
  text-align: right;
}
.order-summary .total td {
  font-weight: 700;
  font-size: 1.1rem;
}

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.address-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
  flex: 1;
}
.field.invalid input,
.field.invalid select {
  border-color: #d92d20;
}
.row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.estimate {
  margin: 28px 0 8px;
  max-width: 460px;
}
.estimate h2 {
  font-size: 1.2rem;
  margin: 0 0 10px;
}
.estimate-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.estimate-result {
  margin-top: 14px;
}
.address-form.review address {
  font-style: normal;
  line-height: 1.6;
}
.shipping-methods {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shipping-methods legend {
  padding: 0 4px;
  font-weight: 600;
}
.shipping-method {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}
.shipping-method:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.shipping-method-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.address-form.review .button {
  align-self: flex-start;
}
.total-line.grand {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 1.1rem;
}
.secure {
  color: var(--muted);
  font-size: 0.9rem;
}
.summary {
  background: var(--surface);
  padding: 20px;
  border-radius: var(--radius);
}
.summary h2 {
  margin-top: 0;
  font-size: 1.2rem;
}
.summary ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.summary li,
.total-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  margin: 0;
}
.success,
.error-page {
  max-width: 640px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer p {
  margin: 4px 0;
}
.powered {
  font-size: 0.8rem;
}
.powered a {
  color: inherit;
  text-decoration: none;
}
.powered a:hover,
.powered a:focus-visible {
  text-decoration: underline;
}
.site-header .portal-link,
.site-footer .portal-link {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
.site-header .portal-link:hover,
.site-header .portal-link:focus-visible,
.site-footer .portal-link:hover,
.site-footer .portal-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

/* The right column mirrors the category menu: the centre stays put, and the
   slider sits beside the products. */
.filters {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  justify-self: start;
  width: min(260px, 100%);
  margin: 0;
  padding: 32px 24px 32px 28px;
}
.filters fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.filters legend {
  padding: 0;
  font-weight: 600;
}
.price-readout {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}
.range {
  position: relative;
  height: 32px;
}
.range::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--line) var(--from, 0%),
    var(--primary) var(--from, 0%),
    var(--primary) var(--to, 100%),
    var(--line) var(--to, 100%)
  );
}
.range input[type='range'] {
  position: absolute;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  appearance: none;
}
.range input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.range input[type='range']::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.range input[type='range']::-moz-range-track {
  height: 4px;
  background: transparent;
  border: 0;
}
.range input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.filters fieldset + fieldset,
.filters .filter-select,
.filters .filter-select + fieldset {
  margin-top: 18px;
}
.filters .choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.filters .choices label,
.review-form .choices label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 400;
}
.filters .filter-select,
.review-form .filter-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}
.filters select,
.review-form textarea {
  font: inherit;
  font-weight: 400;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--input-line);
  border-radius: var(--radius);
  background: #fff;
}
.result-count {
  margin: 0 0 12px;
  color: var(--muted);
}
.card-rating {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}
.pager {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
.reviews {
  margin-top: 40px;
}
.reviews h2 {
  margin-bottom: 8px;
}
.review-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
}
.review-meta {
  margin-bottom: 4px;
}
.review-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}
.review-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.filters-apply {
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.filters-live .filters-apply {
  display: none;
}
.filters a {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .category-rail {
    display: none;
  }
  /* The categories are gone, but the way back to the shop stays above the page. */
  .category-rail.back-rail {
    display: block;
    width: auto;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 20px 0;
  }
  /* The menu is hidden, but the front-page portrait stays, above the banner. */
  .category-rail:has(.maker-card) {
    display: block;
    width: auto;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 8px 20px 0;
  }
  .category-rail:has(.maker-card) > :not(.maker-card) {
    display: none;
  }
  .category-rail .maker-card {
    margin: 0 0 8px;
  }
  .store-frame {
    display: block;
  }
  .filters {
    width: auto;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 20px 0;
  }
}
@media (max-width: 860px) {
  .header-bar {
    grid-template-columns: 1fr;
    grid-template-areas: 'identity' 'tagline' 'search' 'tools';
    column-gap: 16px;
  }
  .site-header .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 760px) {
  .product,
  .checkout,
  .maker-page {
    grid-template-columns: 1fr;
  }
  .maker-page img {
    max-width: 240px;
  }
  .thumbnails {
    grid-template-columns: repeat(2, 56px);
  }
  .cart th:nth-child(2),
  .cart td:nth-child(2) {
    display: none;
  }
}

/* Dark templates invert the fields. Light templates keep the white controls. */
.theme-dark {
  color-scheme: dark;
}
.theme-dark input,
.theme-dark select,
.theme-dark textarea,
.theme-dark .filters select,
.theme-dark .review-form textarea {
  background: var(--surface);
  color: var(--text);
}
.theme-dark .button:not(.primary) {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}