/* Add custom CSS styles below */ body .s-product-card-entry .s-product-card-content-title,
body .s-product-card-entry .s-product-card-content-title a,
body .product-card .product-title,
body .product-card h3 {
  color: var(--psy-ivory) !important;
}
body .s-product-card-entry .s-product-card-price,
body .product-price {
  color: var(--psy-red) !important;
  font-weight: 800;
}
body .s-product-card-entry .s-product-card-content-subtitle,
body .s-product-card-entry .s-product-card-content-description {
  color: var(--psy-muted) !important;
}

/* CTA styles: keep Salla's native button behavior and add-to-cart logic. */
body .s-button-primary,
body button.s-button-primary,
body .btn-primary {
  background-color: var(--psy-red) !important;
  border-color: var(--psy-red) !important;
  color: #fff !important;
  border-radius: 11px !important;
  box-shadow: 0 12px 32px rgba(225,29,52,.12);
}
body .s-button-primary:hover,
body .btn-primary:hover {
  background-color: var(--psy-red-hover) !important;
  border-color: var(--psy-red-hover) !important;
}

/* Quiet framing for product sections. */
body .s-products-slider,
body .s-products-list {
  color: var(--psy-ivory);
}
body footer,
body .store-footer {
  background: #070708 !important;
  color: var(--psy-muted);
  border-top: 1px solid #231b1e;
}
body footer a,
body .store-footer a {
  color: var(--psy-ivory);
}
body footer a:hover,
body .store-footer a:hover {
  color: var(--psy-red);
}

/* Responsiveness: avoid injecting widths into the Salla component grid. */
@media (max-width: 640px) {
  body .s-product-card-entry,
  body .product-card {
    border-radius: 15px !important;
  }
}

body::after {
  content: "CSS WORKS";
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 2147483647;
  background: #EF2942;
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: 8px;
  font: bold 16px Arial, sans-serif;
}