/* ============================================
   KUKI KARTEL — Image-Based Product Cards
   Premium dark photography styling
   ============================================ */

/* --- PRODUCT CARD IMAGES --- */
.product-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.5s ease;
  filter: brightness(0.92) contrast(1.05);
}

.product-card:hover .product-photo {
  transform: scale(1.08);
  filter: brightness(1) contrast(1.08);
}

.product-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(15, 8, 3, 0.55) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(15, 8, 3, 0.6);
  border: 1px solid rgba(196, 164, 105, 0.25);
  color: var(--gold-dark, #C4A469);
}

/* --- HERO CELLS (category showcase) --- */
.hcell {
  position: relative;
  overflow: hidden;
}

.hcell-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: brightness(0.5) contrast(1.1) saturate(1.1);
}

.hcell:hover .hcell-bg-img {
  transform: scale(1.06);
  filter: brightness(0.6) contrast(1.15) saturate(1.15);
}

.hcell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 8, 3, 0.7) 0%,
    rgba(15, 8, 3, 0.3) 50%,
    rgba(15, 8, 3, 0.65) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hcell > * {
  position: relative;
  z-index: 2;
}

/* --- CATEGORY CARDS --- */
.cat-card {
  position: relative;
  overflow: hidden;
}

.cat-card-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.4) contrast(1.1);
}

.cat-card:hover .cat-card-bg-img {
  transform: scale(1.08);
  filter: brightness(0.55) contrast(1.15);
}

.cat-card > * {
  position: relative;
  z-index: 2;
}

/* --- MODAL PRODUCT IMAGE --- */
#mEmoji {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.modal-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 220px;
  max-height: 320px;
  border-radius: 16px;
  filter: brightness(0.95) contrast(1.05);
  transition: transform 0.4s ease;
}

.modal-product-img:hover {
  transform: scale(1.03);
}

/* --- CART SIDEBAR ITEM IMAGES --- */
.cart-item-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(196, 164, 105, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  filter: brightness(0.95) contrast(1.05);
}

/* Hide the old emoji span styling if still present */
.cart-item-emoji {
  display: none;
}

/* --- CHECKOUT SUMMARY IMAGES --- */
.checkout-summary-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 12px;
  border: 1px solid rgba(196, 164, 105, 0.12);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.checkout-summary-emoji {
  display: none;
}

/* --- ORDER SUMMARY IMAGES --- */
.order-summary-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid rgba(196, 164, 105, 0.1);
}

/* --- PREMIUM POLISH --- */

/* Card entrance handled by GSAP */

/* Enhanced card hover shadow */
.product-card {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(196, 164, 105, 0.1);
}

/* Cart item hover */
.cart-item {
  transition: background 0.2s ease;
}

.cart-item:hover {
  background: rgba(196, 164, 105, 0.05);
}

/* Image loading placeholder */
.product-photo[src=""],
.product-photo:not([src]) {
  background: linear-gradient(135deg, #1A0F05, #3D2010);
  min-height: 180px;
}

/* ===== HERO CELL IMAGES ===== */
.hcell-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  filter: brightness(0.4) contrast(1.1);
  transition: filter 0.5s, transform 0.5s;
}
.hcell:hover .hcell-img {
  filter: brightness(0.55) contrast(1.15);
  transform: scale(1.08);
}
.hcell {
  position: relative;
  justify-content: center;
}
.hcell-label {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

/* ===== CATEGORY CARD IMAGES ===== */
.cat-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) contrast(1.1) saturate(0.9);
  transition: filter 0.5s, transform 0.5s;
  z-index: 0;
}
.cat-card:hover .cat-bg-img {
  filter: brightness(0.45) contrast(1.15) saturate(1);
  transform: scale(1.06);
}
.cat-card {
  background: #1C1108 !important;
}

/* ===== WHOWE VISUAL ===== */
.whowe-visual {
  font-size: unset !important;
  overflow: hidden;
}

/* ===== MODAL IMAGE ===== */
.modal-img-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: 4px;
}
.modal-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== PRODUCT CARD IMAGE FIX ===== */
.product-img {
  height: auto !important;
  aspect-ratio: 1/1 !important;
}
.product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.featured-grid .product-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(201,151,58,0.15);
}