:root {
  --radius: 12px;

  --1: #7F55B1; /* primary */
  --2: #9B7EBD; /* secondary */
  --3: #F49BAB; /* accent */
  --4: #F3ECFA; /* soft background */
  --5: #E6E1F2; /* surface */

  --border-soft: rgba(0, 0, 0, 0.06);
  --shadow-soft: rgba(0, 0, 0, 0.10);
}

/* ================= Big Product ================= */

.BigProduct {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 48px 48px 48px 0px;
  width: 270px;
  height: 400px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--1) 18%, var(--4)),
    color-mix(in srgb, var(--2) 20%, var(--5))
  );
  clip-path: path(
    "M20,0H250A20,20 0,0,1 270,20V380A20,20 0,0,1 250,400H87A29,29 0,0,1 58,371V361A29,29 0,0,0 29,332H29A29,29 0,0,1 0,303V20A20,20 0,0,1 20,0Z"
  );
  box-shadow: 0 10px 26px var(--shadow-soft);
}

/* بخش تصویر */

.BigProduct img {
  width: 200px;
  height: 250px;
  object-fit: cover;
  border-radius: 0px 0px 200px 200px;
  display: block;
  margin: 0 auto;
}

/* متا دیتا */

.BigProduct .meta {
    margin-top: 12px;
    width: 230px;
    text-align: justify;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.meta h4 {
  margin: 8px 0;
  color: var(--1);
  font-size: 16px;
  font-weight: 700;
}

.meta p {
  color: #2f2f2f;
  font-size: 13px;
  margin: 0 0 10px;
  min-height: 36px;
}

/* قیمت */

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  gap: 8px;
}

.price {
  font-weight: 700;
  color: var(--3);
}

/* جعبه دکمه */

.BigProduct .button {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: 33px;
  background: linear-gradient(
    180deg,
    var(--2),
    color-mix(in srgb, var(--2) 75%, #000)
  );
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 60px;
  height: 70px;
  z-index: 2;
}

/* دکمه افزودن به سبد */

.add {
  height: 60px;
  width: 50px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border: none;
  background: linear-gradient(
    180deg,
    var(--1),
    color-mix(in srgb, var(--1) 75%, #000)
  );
  color: #fff;
  border-radius: 0px 25px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  z-index: 5;
}

.add:hover {
  background: linear-gradient(
    180deg,
    var(--3),
    color-mix(in srgb, var(--3) 75%, #000)
  );
}

/* ================= Category Cards ================= */

.CategorysCard {
  clip-path: path(
    "M20,0H221A20,20 0,0,1 241,20V221A20,20 0,0,1 221,241H86A27,27 0,0,1 59,214V201A27,27 0,0,0 32,174H27A27,27 0,0,1 0,147V20A20,20 0,0,1 20,0Z"
  );
  width: 241px;
  height: 241px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--4) 70%, var(--5)),
    color-mix(in srgb, var(--2) 22%, var(--5))
  );
  box-shadow: 0 8px 22px var(--shadow-soft);
}