/* SAGI Universe shop — small additions on top of Bootstrap.
   To restyle with Bootstrap Studio, export your design and let its assets/css/styles.css
   (loaded after this file) override anything here. */
:root {
  --sagi-accent: #b0523a;          /* terracotta */
  --sagi-accent-soft: #f6ebe6;
  --sagi-hero-bg: #f4efe8;
}
[data-bs-theme="dark"] {
  --sagi-accent-soft: #3a2a25;
  --sagi-hero-bg: #221f1c;
}
.hero {
  background:
    radial-gradient(circle at 12px 12px, rgba(176, 82, 58, .10) 2px, transparent 2.5px) 0 0 / 24px 24px,
    var(--sagi-hero-bg);
}
.etsy-banner {
  background: var(--sagi-accent-soft);
  border: 1px solid rgba(176, 82, 58, .25);
}
.etsy-banner-icon {
  width: 56px; height: 56px; flex: 0 0 56px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sagi-accent); color: #fff; font-size: 1.5rem;
}
.product-card { transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.10) !important; }
.product-card img { transition: transform .3s ease; }
.product-card:hover img { transform: scale(1.03); }
.product-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; min-height: 2.7em;
}
.gallery-thumbs button { opacity: .6; }
.gallery-thumbs button.active, .gallery-thumbs button:hover { opacity: 1; outline: 2px solid var(--sagi-accent); }
.product-description { white-space: normal; line-height: 1.6; }
.min-w-0 { min-width: 0; }