/* ===== Product Card (Final) ===== */

.product-card{
  position: relative;
  width: 100%;
  aspect-ratio: 294.75 / 254.75;
  border-radius: 1rem;
  overflow: hidden;
  background: transparent;
  transition: transform 0.5s ease-out;
}

.product-card:hover{
  transform: translateY(-5px) scale(1.015);
}

/* رابط المنتج يغطي الكرت كله (تحت البراند) */
.product-card__link{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* ===== Masked Body (image + title + hover shine) ===== */
.product-card__body{
  position: absolute;
  inset: 0;
  z-index: 1;

  clip-path: url('#card-curve');
  background-color: var(--card-bg);
}

/* لمعة الهوفر */
.product-card__body::after{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,0.05);
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.product-card:hover .product-card__body::after{
  background-color: rgba(255,255,255,0.15);
}

/* ===== Image Area ===== */
.product-card__image{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 75.663%;
  display: flex;
  justify-content: center;

  padding: 2rem 1rem 0;
}

.product-image{
  max-width: 86.5%;
  max-height: 100%;
  object-fit: contain;

  transition: all 0.4s ease-in-out;

  opacity: 0;
  visibility: hidden;
}

.product-image.ready{
  opacity: 1;
  visibility: visible;
}

/* نفس سلوكك القديم (landscape / portrait) */
.product-image.landscape{
  max-width: 95%;
  max-height: 95%;
}

.product-image.portrait{
  max-height: 100%;
  max-width: 74.3%;
}

/* ===== Title ===== */
.product-card__title{
  position: absolute;
  bottom: 0;
  left: 0;

  width: 81.2%;
  padding: 0 1rem 1rem;

  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #111;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ===== Brand (Outside Mask, Bottom Corner) ===== */
.product-card__brand{
  position: absolute;
  right: 0rem;
  bottom: 0rem;
  z-index: 3;
  width: 17%;
  height: 19.6%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background-color: var(--brand-bg);
  text-decoration: none;
  --brand-rotate: 0deg;
  transform: rotate(var(--brand-rotate));
  transition: transform 0.5s ease-in-out;
}

/* دوران البراند عند hover على الكرت */
.product-card:hover .product-card__brand{
  --brand-rotate: 30deg;
}

/* الشعار داخل البراند */
.product-card__brandLogo{
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-card__brandLogo img{
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* أيقونة الدخول */
.product-card__brandIcon{
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;

  color: rgba(255,255,255,0.95);
}

/* نبضة/وميض */
.product-card__brand::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;

  opacity: 0;
  pointer-events: none;

  background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%);
}

/* عند hover على البراند: اخفاء الشعار + اظهار الأيقونة + نبضة */
.product-card__brand:hover{
  transform: rotate(var(--brand-rotate)) scale(1);
}

.product-card__brand:hover .product-card__brandLogo{
  opacity: 0;
  transform: scale(0.88);
}

.product-card__brand:hover .product-card__brandIcon{
  opacity: 1;
  transform: scale(1);
}

.product-card__brand:hover::after{
  animation: brandPulse 650ms ease-out;
}

@keyframes brandPulse{
  0%   { opacity: 0;   transform: scale(0.85); }
  35%  { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.18); }
}

/* ===== Accessibility Focus ===== */
.product-card__link:focus-visible,
.product-card__brand:focus-visible{
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 4px;
  border-radius: 12px;
}


.product-card-square {
  width: 100%;
  /* أو ثابت مثلاً 294.75px */
  aspect-ratio: 1 / 1;
  /* أو aspect-ratio: 1 / 0.864; */
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #fff;
  inset: 0;
  background: var(--bg-c-value);
  display: block;
}


.product-card-square .product-image-cover {
  transition: all 0.4s ease-in-out;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}