:root {
  --brand: #c84d08;
  --brand-deep: #993706;
  --brand-hover: #b54007;
  --brand-soft: #fff3e9;
  --brand-mark: #ffcb9a;
  --masthead: url('/assets/themes/masthead-orange.webp');
}
:root[data-theme='blue'] {
  --brand: #195cba;
  --brand-deep: #123f80;
  --brand-hover: #124c9c;
  --brand-soft: #edf4ff;
  --brand-mark: #9ac5ff;
  --masthead: url('/assets/themes/masthead-blue.webp');
}
:root[data-theme='green'] {
  --brand: #087957;
  --brand-deep: #05503c;
  --brand-hover: #076448;
  --brand-soft: #eaf8f1;
  --brand-mark: #8be2b7;
  --masthead: url('/assets/themes/masthead-green.webp');
}
.store-canvas .mast {
  height: auto !important;
  aspect-ratio: 1920 / 198;
  background: #f0f4f5 var(--masthead) center / 100% 100% no-repeat;
  border-top: 3px solid var(--brand);
}
.mast picture, .mast img { visibility: hidden; }
.store-canvas .mast img { height: auto !important; }
.store-canvas .nav {
  background: var(--brand) !important;
  border-bottom: 0;
  padding: 0 216px;
  box-shadow: 0 3px 12px #142d4817;
  isolation: isolate;
}
.store-canvas .nav a {
  flex: 0 0 auto;
  position: relative;
  padding: 0 23px;
  text-decoration: none;
  background: transparent;
  transition: background-color .18s ease;
}
.store-canvas .nav a:first-child { background: transparent; }
.store-canvas .nav a:hover { background: var(--brand-hover); }
.store-canvas .nav a[aria-current='page'] {
  background: var(--brand-deep) !important;
  box-shadow: inset 0 -3px 0 var(--brand-mark);
}
.store-canvas .nav a:focus-visible,
.store-canvas button:focus-visible {
  outline: 2px solid var(--brand-mark);
  outline-offset: -4px;
}
.store-canvas .nav a:nth-child(5),
.store-canvas .nav a:nth-child(6) { font-size: 13px !important; }
.store-canvas .nav a:nth-child(5)::before,
.store-canvas .nav a:nth-child(6)::before { content: none; }
.store-canvas .nav-search {
  position: absolute;
  right: 18px;
  width: 184px;
  margin: 0;
  height: 34px;
}
.store-canvas .nav-search button { color: var(--brand); }
.store-canvas .categories h2 { border-top-color: var(--brand) !important; color: var(--brand); }
.store-canvas .top-pick { color: var(--brand-deep) !important; background: var(--brand-soft); }
.store-canvas .category-list button:hover,
.store-canvas .category-list button.is-active {
  color: var(--brand-deep);
  background: var(--brand-soft);
}
.store-canvas .listing-card { transition: box-shadow .18s, border-color .18s; }
.store-canvas .listing-card:hover { border-color: var(--brand); box-shadow: 0 5px 16px #142d481c; }
.store-canvas .chat { color: var(--brand-deep); border-color: var(--brand); }
.store-canvas .chat:hover { color: white; background: var(--brand); }
.store-canvas .hero-link { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; }
.store-canvas .hero-link:hover { background: var(--brand); color: white; }
.static-title .eyebrow, .store-canvas footer > span:first-child { color: var(--brand); }
@media (max-width: 1100px) {
  .store-canvas .nav { padding: 0; }
  .store-canvas .nav-search { display: none; }
  .store-canvas .product-page { grid-template-columns: 160px minmax(0, 1fr); }
  .store-canvas .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .store-canvas .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .store-canvas .nav {
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: thin;
    height: 52px !important;
  }
  .store-canvas .nav a { height: 52px; padding: 0 17px; }
  .store-canvas .product-page { grid-template-columns: 124px minmax(0, 1fr); min-height: 70vh; }
  .store-canvas .categories { padding-left: 10px; padding-right: 10px; }
  .store-canvas .top-pick, .store-canvas .category-list, .store-canvas .categories h2 { margin-left: -10px; margin-right: -10px; }
  .store-canvas .category-list { padding: 3px 10px; }
  .store-canvas .listing { padding: 12px 10px 28px; }
  .store-canvas .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .store-canvas .listing-head { height: auto; min-height: 50px; }
  .store-canvas .listing-head h1 { font-size: 17px; }
  .store-canvas .price { font-size: 12px; overflow-wrap: anywhere; }
  .store-canvas footer { gap: 12px; flex-wrap: wrap; line-height: 1.6; }
  .static-page .static-columns { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .store-canvas .listing-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .store-canvas .nav a, .store-canvas .listing-card { transition: none; }
}