[block="product"] {
  overflow: hidden;
  position: relative;
  height: 450px;
  border-radius: var(--radius-md);
}

[block="product"] > a,[block="product"] > div {
    height: 100%;
    display: block;
    text-decoration: none;
    color: var(--color-on-background);
  }

:is([block="product"] > a,[block="product"] > div) .media {
      height: 100%;
      background-color: var(--color-surface-container);
    }

:is(:is([block="product"] > a,[block="product"] > div) .media) img {
        object-fit: cover;
        transition: var(--transition-standard-default-effects);
      }

:is(:is([block="product"] > a,[block="product"] > div) .media) > [ui-icon] {
        opacity: 0.3;
        position: absolute;
        translate: -50% -50%;
        left: 50%;
        inset-block-start: 50%;
      }

:is([block="product"] > a,[block="product"] > div) .price {
      width: fit-content;
      border-radius: var(--radius-sm);
      background-color: var(--color-background);
      padding: var(--spacing-8) var(--spacing-12);
    }

:is(:is([block="product"] > a,[block="product"] > div) .price) .compare-at-price {
        opacity: 0.8;
        text-decoration: line-through;
      }

:is([block="product"] > a,[block="product"] > div) .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

:is([block="product"] > a,[block="product"] > div) .head {
      width: 100%;
      position: absolute;
      padding: var(--spacing-12);
      inset-block-start: var(--spacing-0);
      display: flex;
      align-items: center;
      gap: var(--spacing-12) var(--spacing-8);
      justify-content: space-between;
    }

:is(:is([block="product"] > a,[block="product"] > div) .head) .badge {
        width: fit-content;
        font: var(--font-body-sm);
        border-radius: var(--radius-xs);
        color: var(--color-background);
        background-color: var(--color-on-background);
        padding: var(--spacing-6) var(--spacing-8);
      }

:is(:is(:is([block="product"] > a,[block="product"] > div) .head) ui-product-button) > button {
          clip-path: circle();
        }

:is(:is([block="product"] > a,[block="product"] > div) .head):has(.badge):has(ui-product-button) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

:is(:is([block="product"] > a,[block="product"] > div) .head):has(.badge):has(ui-product-button) .badge {
          order: 3;
        }

:is(:is([block="product"] > a,[block="product"] > div) .head):has(.badge):has(ui-product-button) ui-product-button {
          display: flex;
          justify-content: flex-end;
        }

:is([block="product"] > a,[block="product"] > div) .info {
      position: absolute;
      inset-block-end: var(--spacing-12);
      inset-inline-start: var(--spacing-12);
      background-color: var(--color-background);
      transform: translateY(calc(100% + var(--spacing-12)));
      border-radius: var(--radius-md);
      width: calc(100% - var(--spacing-24));
      padding: calc(var(--spacing-24) - var(--spacing-4));
      display: grid;
      align-items: center;
      grid-template-columns: auto auto;
      gap: var(--spacing-8);
      justify-content: space-between;
      transition: var(--transition-standard-slow-effects);
    }

:is(:is([block="product"] > a,[block="product"] > div) .info) .action {
        text-decoration: underline;
        text-underline-offset: var(--spacing-4);
      }

:is([block="product"] > a,[block="product"] > div) .min-info {
      display: none;
    }

:is([block="product"] > a,[block="product"] > div):hover img {
        filter: blur(5px);
      }

:is([block="product"] > a,[block="product"] > div):hover .info {
        transform: translateY(0%);
      }

/* Responsive */
@media (max-width: 640px) {
  [block="product"] {
    height: auto;
  }

    [block="product"] > a,[block="product"] > div {
      display: grid;
      gap: var(--spacing-8);
    }

      :is([block="product"] > a,[block="product"] > div) .media {
        height: 250px;
        overflow: hidden;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
      }

      :is([block="product"] > a,[block="product"] > div) .head {
        inset-block-start: auto;
        inset-block-end: calc(var(--spacing-48) + var(--spacing-12));
      }

        :is(:is([block="product"] > a,[block="product"] > div) .head) .price {
          display: none;
        }

        :is(:is([block="product"] > a,[block="product"] > div) .head) .badge {
          position: absolute;
          inset-inline-start: var(--spacing-12);
          inset-block-end: calc(250px - 28px - var(--spacing-12));
        }

        :is(:is([block="product"] > a,[block="product"] > div) .head) ui-product-button {
          justify-content: flex-start !important;
        }

      :is([block="product"] > a,[block="product"] > div) .info {
        display: none;
      }

      :is([block="product"] > a,[block="product"] > div) .min-info {
        display: grid;
        gap: var(--spacing-2);
        padding-inline: var(--spacing-4);
      }

        :is(:is([block="product"] > a,[block="product"] > div) .min-info) .price {
          padding: 0;
          opacity: 0.8;
        }
}


/* Keep product-card prices readable in Arabic: 149 درهم then 209 درهم. */
[block="product"] .price { direction: rtl; unicode-bidi: isolate; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 8px; }
[block="product"] .price .original-price, [block="product"] .price .compare-at-price { direction: rtl; unicode-bidi: isolate; white-space: nowrap; }


/* HAYYAK product cards mobile – equal height, badge on image */
@media (max-width: 769px) {
  [section="products"] .section-core,
  [section="products-by-collection"] .section-core {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  [section="products"] [block="product"],
  [section="products-by-collection"] [block="product"] {
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #FFFDF8 !important;
    border: 1px solid #E8E0D4 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  [section="products"] [block="product"] > a,
  [section="products-by-collection"] [block="product"] > a {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 100% !important;
    gap: 0 !important;
    position: relative !important;
  }

  /* Fixed image height so all cards match */
  [section="products"] [block="product"] .media,
  [section="products-by-collection"] [block="product"] .media {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    flex: 0 0 150px !important;
    overflow: hidden !important;
    order: 1 !important;
    position: relative !important;
    border-radius: 0 !important;
  }
  [section="products"] [block="product"] .media img,
  [section="products-by-collection"] [block="product"] .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }
  [section="products"] [block="product"] > a:hover img {
    filter: none !important;
  }

  /* Badge ON the image (top), never inside text area */
  [section="products"] [block="product"] .head,
  [section="products-by-collection"] [block="product"] .head {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    inset: 8px auto auto 8px !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    background: transparent !important;
    pointer-events: none !important;
    display: block !important;
  }
  [section="products"] [block="product"] .head .price,
  [section="products-by-collection"] [block="product"] .head .price {
    display: none !important;
  }
  [section="products"] [block="product"] .head ui-product-button,
  [section="products-by-collection"] [block="product"] .head ui-product-button {
    display: none !important;
  }
  [section="products"] [block="product"] .head .badge,
  [section="products-by-collection"] [block="product"] .head .badge {
    display: inline-flex !important;
    pointer-events: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #2A322E !important;
    color: #FFFDF8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  }

  /* Title + price – fixed min area, truncate long titles */
  [section="products"] [block="product"] .min-info,
  [section="products-by-collection"] [block="product"] .min-info {
    display: grid !important;
    gap: 4px !important;
    padding: 10px 10px 6px !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    min-height: 56px !important;
  }
  [section="products"] [block="product"] .min-info .title,
  [section="products-by-collection"] [block="product"] .min-info .title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    color: #273638 !important;
    font-weight: 850 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    max-height: 2.6em !important;
  }
  [section="products"] [block="product"] .min-info .price,
  [section="products-by-collection"] [block="product"] .min-info .price {
    background: transparent !important;
    padding: 0 !important;
    opacity: 1 !important;
    color: #273638 !important;
    font-weight: 950 !important;
    font-size: 13px !important;
  }
  [section="products"] [block="product"] .min-info .compare-at-price {
    color: #9A8B7A !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    font-weight: 600 !important;
  }

  /* Button always at bottom of card */
  [section="products"] [block="product"] .info,
  [section="products-by-collection"] [block="product"] .info {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px 12px !important;
    background: transparent !important;
    display: block !important;
    order: 3 !important;
    margin-top: auto !important;
  }
  [section="products"] [block="product"] .info .title {
    display: none !important;
  }
  [section="products"] [block="product"] .info .action,
  [section="products-by-collection"] [block="product"] .info .action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    background: linear-gradient(100deg, #C79442, #E0BF72, #B98232) !important;
    color: #2E2418 !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(177, 130, 50, 0.2) !important;
  }
}