/* Higan Haozi: Halo Shop integration. Palette follows the active theme. */
html:has(.shop-entry) {
  --shop-color-base-100: var(--color-base-100);
  --shop-color-base-200: var(--color-base-200);
  --shop-color-base-300: var(--color-base-300);
  --shop-color-base-content: var(--color-base-content);
  --shop-color-primary: var(--color-primary);
  --shop-color-primary-content: var(--color-primary-content);
  --shop-color-secondary: var(--color-base-200);
  --shop-color-secondary-content: var(--color-base-content);
  --shop-color-accent: var(--color-accent);
  --shop-color-accent-content: var(--color-accent-content);
  --shop-color-neutral: var(--color-neutral);
  --shop-color-neutral-content: var(--color-neutral-content);
  --shop-gray-50: var(--color-base-100);
  --shop-gray-100: var(--color-base-200);
  --shop-gray-200: var(--color-base-300);
  --shop-gray-300: color-mix(in srgb, var(--color-base-content) 25%, var(--color-base-100));
  --shop-gray-400: color-mix(in srgb, var(--color-base-content) 65%, var(--color-base-100));
  --shop-gray-500: color-mix(in srgb, var(--color-base-content) 75%, var(--color-base-100));
  --shop-gray-600: color-mix(in srgb, var(--color-base-content) 80%, var(--color-base-100));
  --shop-gray-700: color-mix(in srgb, var(--color-base-content) 85%, var(--color-base-100));
  --shop-gray-800: color-mix(in srgb, var(--color-base-content) 92%, var(--color-base-100));
  --shop-gray-900: var(--color-base-content);
  --shop-font-family: var(--higan-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Override the blog column only while a shop page is present. */
html:has(.shop-entry) .max-width {
  width: 100%;
  max-width: 80rem;
  min-width: 0;
}

html:has(.shop-entry) .shop-entry {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-inline: 0;
  color: var(--shop-color-base-content);
  font-family: var(--shop-font-family);
  font-size: var(--shop-font-size-base);
  line-height: 1.5;
}

/* Keep small screens safe even below the plugin's 200px card minimum. */
html:has(.shop-entry) .shop-product-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

html:has(.shop-entry) :is(.shop-product-card, .shop-filter__left, .shop-filter__right) {
  min-width: 0;
}

html:has(.shop-entry) :is(.shop-input, .shop-select) {
  max-width: 100%;
}

/* The blog's optional heading underline is unsuitable for product names. */
html:has(.shop-entry) .shop-entry h3 {
  text-decoration: none;
}