/* sangrez-polish.css - Sangrez Galleria pre-launch corrections.
   Added 21 September 2026. Linked last in includes/common-header.php.
   Selectors prefixed with body so they win regardless of load order.
   No existing rule edited; remove the link line to revert. */

/* 1. The three rules that were dimming the site */
body .image-banner img { opacity: 1; }
body .about-image-single img { filter: none; }
body .artwork-card:hover img { filter: none; }

/* 2. Stop cropping the paintings. Photos are 1600x2000 (4:5) and the
   grid forced them into a 1:1 box with object-fit:cover, discarding
   about 20% of every painting. */
body .artwork-image-wrapper {
  aspect-ratio: 4 / 5;
  max-width: 100%;
  background: #F5F4F1;
  box-sizing: border-box;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
body .artwork-image-wrapper a { display: block; width: 100%; height: 100%; }
body .artwork-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
body .artwork-card:hover .artwork-image-wrapper img { transform: scale(1.025); }
@supports not (aspect-ratio: 4 / 5) {
  body .artwork-image-wrapper { height: 0; padding-bottom: 125%; position: relative; }
  body .artwork-image-wrapper a { position: absolute; inset: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body .artwork-image-wrapper img { transition: none; }
  body .artwork-card:hover .artwork-image-wrapper img { transform: none; }
}

/* 3. Alignment. .artwork-card was display:block, so the price row and
   the Add to Cart control sat wherever the title above them ended. */
body .artwork-card { display: flex; flex-direction: column; height: 100%; }
body .artwork-content { display: flex; flex-direction: column; flex: 1; gap: 10px; }
body .artwork-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
body .artwork-artist { margin: 0; }
body .price-wishlist-row { margin-top: auto; align-items: center; }
body .artwork-price { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 4. Sold should not look like a button you can press */
body .sold-out-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid #C9C6BF;
  color: #6E6A63;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 16px;
  cursor: default;
  pointer-events: none;
}

/* 5. Event posters. event.css used a fixed 360px box with cover,
   which sliced the tops and bottoms off near-square posters. */
body .event-card-image {
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: 100%;
  background: #141414;
  overflow: hidden;
}
body .event-card-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
@supports not (aspect-ratio: 1 / 1) {
  body .event-card-image { height: 0; padding-bottom: 100%; position: relative; }
  body .event-card-image img { position: absolute; inset: 0; }
}

/* 6. Phone */
@media (max-width: 575.98px) {
  body .artworks-shop-grid { grid-template-columns: 1fr; gap: 28px; padding-inline: 16px; }
  body .artwork-content { padding: 20px 18px 22px; }
  body .artwork-title { font-size: 17px; }
  body .artwork-image-wrapper { padding: 14px; }
  body .heart-btn2, body .button-group > * {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  body .event-card-content { padding: 18px 16px 20px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  body .artworks-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; padding-inline: 20px; }
}

/* 7. Small craft */
body a:focus-visible, body button:focus-visible, body .heart-btn2:focus-visible {
  outline: 2px solid #8A6A2F;
  outline-offset: 3px;
}
body .event-card-content h3 { overflow-wrap: anywhere; }
body img { max-width: 100%; }

/* 8. Similar Artworks strip on the product page.
   product-detail.css pins .related-grid .artwork-image-wrapper to a
   fixed 250px box with object-fit:cover, and its selector outranks the
   general rule above, so those thumbnails were still being cropped
   after the shop grid was fixed. Matching specificity here. */
body .related-grid .artwork-image-wrapper {
  aspect-ratio: 4 / 5;
  height: auto;
  max-width: 100%;
  background: #F5F4F1;
  box-sizing: border-box;
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 10px;
}
body .related-grid .artwork-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
body .related-grid .artwork-card:hover .artwork-image-wrapper img { transform: scale(1.025); }

/* the strip uses price-availability-row rather than price-wishlist-row,
   so it needs its own rule to share a baseline across cards */
body .price-availability-row { margin-top: auto; align-items: center; }

@supports not (aspect-ratio: 4 / 5) {
  body .related-grid .artwork-image-wrapper { height: 0; padding-bottom: 125%; position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  body .related-grid .artwork-image-wrapper img { transition: none; }
  body .related-grid .artwork-card:hover .artwork-image-wrapper img { transform: none; }
}