/* 
   K-Kart UI Polish Patch  May 2026  (v2  modal regression fixed)
   Drop AFTER your existing styles.css link in base.eta:
   <link rel="stylesheet" href="/assets/safe-polish.css">
    */

/* 1. CARD HOVER scale + shadow (NO isolation, will-change on hover only) */
.card-hover {
  position: relative;
  transition:
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s;
}
.card-hover:hover {
  will-change: transform;       /* only during hover safe for fixed children */
  box-shadow: 0 12px 32px rgba(44,40,38,0.13),
              0 4px  8px  rgba(44,40,38,0.06);
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(212,165,116,0.35);
}

/* 2. CATEGORY CIRCLE HOVER */
.category-card-link {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}
.category-card-link:hover {
  transform: translateY(-2px) scale(1.015);
}
.category-card-link:hover .category-img-wrap {
  box-shadow: 0 8px 24px rgba(44,40,38,0.12);
  border-color: rgba(212,165,116,0.55) !important;
}

/* 3. ICON BUTTON SPRING */
.bookmark-pin,
.quick-add-btn {
  transition:
    color      0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bookmark-pin:hover,
.quick-add-btn:hover  { transform: scale(1.12); }
.bookmark-pin:active,
.quick-add-btn:active { transform: scale(0.94); }

/* Shimmer CTA press depth */
.shimmer-btn:active { transform: translateY(2px) scale(0.98); }

/* 4. LAYOUT SOFTENING */
.ga-product-card > div:last-child { padding: 18px 16px 14px; }
.ga-product-card { border-color: rgba(232,226,217,0.5) !important; border-radius: 14px; }
header { border-bottom-color: rgba(232,226,217,0.45) !important; }
#mobile-menu { border-top-color: rgba(232,226,217,0.45) !important; }

/* 6. COLOUR FIXES */
:root {
  --color-warm-gray: #6b6460; /* was #9c9590 — fixes WCAG AA fail */
}
.btn-primary { font-weight: 800; letter-spacing: 0.05em; }

/* 7. PRODUCT DETAIL ZOOM MODAL GUARD
   The #product-zoom-modal is position:fixed z-index:80.
   Ancestors must never have isolation/will-change/transform set
   statically — they would trap the fixed modal inside a layer.  */
#main-image-wrap,
.product-zoom {
  isolation: auto !important;
  will-change: auto !important;
}

/* 8. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .stagger-item,
  main,
  .card-hover,
  .category-card-link,
  .section-heading-animate {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}