/* Merchant-selected colors and shared state hooks. Template files own layout and component styling. */
body {
  --shop-info-bg: #fff;
  --shop-info-fg: #2570e8;
  --shop-info-border: #2570e8;
  --shop-info-hover-bg: #2570e8;
  --shop-info-hover-fg: #fff;
  --shop-info-size: 14px;
  --shop-group-bg: #fff;
  --shop-group-fg: #2570e8;
  --shop-group-border: #2570e8;
  --shop-group-hover-bg: #2570e8;
  --shop-group-hover-fg: #fff;
  --shop-group-size: 14px;
  --shop-orders-bg: #fff;
  --shop-orders-fg: #2570e8;
  --shop-orders-border: #2570e8;
  --shop-orders-hover-bg: #2570e8;
  --shop-orders-hover-fg: #fff;
  --shop-orders-size: 14px;
  --shop-home-bg: #fff;
  --shop-home-fg: #2570e8;
  --shop-home-border: #2570e8;
  --shop-home-hover-bg: #2570e8;
  --shop-home-hover-fg: #fff;
  --shop-home-size: 14px;
  --shop-category-bg: #fff;
  --shop-category-fg: #2570e8;
  --shop-category-border: #2570e8;
  --shop-category-hover-bg: #2570e8;
  --shop-category-hover-fg: #fff;
  --shop-category-size: 14px;
  --shop-purchase-bg: #2570e8;
  --shop-purchase-fg: #fff;
  --shop-purchase-border: #2570e8;
  --shop-purchase-hover-bg: #1f66d0;
  --shop-purchase-hover-fg: #fff;
  --shop-purchase-size: 14px;
  --shop-product-size: 16px;
  --shop-price-color: #d92d3a;
}
.store-reference .store-btn-info,
.store-reference #storeMerchantClose {
  background: var(--shop-info-bg);
  color: var(--shop-info-fg);
  border-color: var(--shop-info-border);
  font-size: var(--shop-info-size);
}
.store-reference .store-btn-info:hover,
.store-reference #storeMerchantClose:hover {
  background: var(--shop-info-hover-bg);
  color: var(--shop-info-hover-fg);
}
.store-reference .store-btn-group-link {
  background: var(--shop-group-bg);
  color: var(--shop-group-fg);
  border-color: var(--shop-group-border);
  font-size: var(--shop-group-size);
}
.store-reference .store-btn-group-link:hover {
  background: var(--shop-group-hover-bg);
  color: var(--shop-group-hover-fg);
}
.store-reference .store-btn-orders {
  background: var(--shop-orders-bg);
  color: var(--shop-orders-fg);
  border-color: var(--shop-orders-border);
  font-size: var(--shop-orders-size);
}
.store-reference .store-btn-orders:hover {
  background: var(--shop-orders-hover-bg);
  color: var(--shop-orders-hover-fg);
}
.store-reference .store-btn-home {
  background: var(--shop-home-bg);
  color: var(--shop-home-fg);
  border-color: var(--shop-home-border);
  font-size: var(--shop-home-size);
}
.store-reference .store-btn-home:hover {
  background: var(--shop-home-hover-bg);
  color: var(--shop-home-hover-fg);
}
.store-reference .store-badge-row > span {
  gap: 6px;
}
.store-reference .store-badge-row svg,
.shop-deposit-label svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.store-merchant-details dd,
.store-merchant-details dd a {
  color: var(--shop-contact-info-color);
  font-weight: var(--shop-contact-info-weight);
}
.store-merchant-details dd a.store-contact-group {
  color: var(--shop-contact-group-color);
  font-weight: var(--shop-contact-group-weight);
}
.store-reference #goodsList .price {
  color: var(--shop-price-color);
}
body #submitOrder {
  background: var(--shop-purchase-bg);
  color: var(--shop-purchase-fg);
  border-color: var(--shop-purchase-border);
  font-size: var(--shop-purchase-size);
}
body #submitOrder:hover {
  background: var(--shop-purchase-hover-bg);
  color: var(--shop-purchase-hover-fg);
}
.shop-deposit-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}