/**
 * Shopify Storefront Web Components Styles
 *
 * The <shopify-cart> component uses shadow DOM, so we style it
 * via CSS ::part() selectors with Cartzilla CSS variables for
 * automatic dark mode support.
 */

/* Product grid - CSS Grid for Shopify web components compatibility */
.product-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Allow shopify-list-context to work within grid */
shopify-list-context {
  display: contents;
}

/* Exclude template elements from grid layout */
shopify-list-context > template {
  display: none;
}

/* Position shopify-media images inside ratio containers */
.ratio > shopify-media > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

shopify-cart::part(dialog) {
  background-color: var(--cz-body-bg);
  color: var(--cz-body-color);
  border-radius: 0.75rem;
  border: var(--cz-border-width) solid var(--cz-border-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

shopify-cart::part(primary-button) {
  background-color: var(--cz-dark);
  color: var(--cz-light);
  border: 0;
  border-radius: 50rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  transition: opacity 0.2s ease-in-out;
}

shopify-cart::part(primary-button):hover {
  opacity: 0.85;
}

shopify-cart::part(secondary-button) {
  background-color: var(--cz-secondary-bg);
  color: var(--cz-body-color);
  border: 0;
  border-radius: 0.375rem;
}

shopify-cart::part(tertiary-button) {
  background-color: transparent;
  color: var(--cz-body-color);
  border: var(--cz-border-width) solid var(--cz-border-color);
  border-radius: 0.375rem;
}

shopify-cart::part(line-heading) {
  color: var(--cz-heading-color);
}

shopify-cart::part(line-price) {
  color: var(--cz-body-color);
}

shopify-cart::part(line-options) {
  color: var(--cz-secondary-color);
}

shopify-cart::part(input-field) {
  background-color: var(--cz-body-bg);
  color: var(--cz-body-color);
  border: var(--cz-border-width) solid var(--cz-border-color);
  border-radius: 0.375rem;
}

shopify-cart::part(discount-code) {
  background-color: var(--cz-success-bg-subtle);
  color: var(--cz-success-text-emphasis);
  border-radius: 0.25rem;
}

shopify-cart::part(discount-error) {
  color: var(--cz-danger-text-emphasis);
}