/*
 * Họa tiết thứ hai của Greenkite: đàn diều tam giác nét mảnh ở góc phải trên của thẻ trắng (assets/images/card-kites.svg).
 * Họa tiết thứ nhất (hình thoi lồng nhau, header-pattern.svg) dành cho header, chân trang, nền trang danh mục.
 * Nằm dưới nội dung thẻ (z-index -1 trong isolation), không nhận chuột. `gk-kites-sm` cho thẻ hẹp (ô danh mục trang chủ).
 */
.gk-kites {
  position: relative;
  isolation: isolate;
}

.gk-kites::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(100%, 16rem);
  aspect-ratio: 4 / 3;
  background-color: var(--color-line-action);
  content: '';
  pointer-events: none;
  opacity: 0.32;
  mask: url('../../assets/images/card-kites.svg') top right / contain no-repeat;
}

.gk-kites-sm::before {
  width: min(100%, 12rem);
}

/* Thẻ sản phẩm template-parts/catalog-product.php — dùng ở trang danh mục và khối sản phẩm chủ lực trang chủ. */
.gk-catalog-product-image {
  position: relative;
}

.gk-catalog-product a {
  text-decoration: none;
}

.gk-catalog-product-secondary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-surface);
  opacity: 0;
}

.gk-catalog-product-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.gk-catalog-product-details {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.gk-catalog-product:focus-within .gk-catalog-product-secondary {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .gk-catalog-product-details {
    pointer-events: none;
    opacity: 0;
  }

  .gk-catalog-product:hover .gk-catalog-product-details,
  .gk-catalog-product:focus-within .gk-catalog-product-details {
    pointer-events: auto;
    opacity: 1;
  }

  .gk-catalog-product:hover .gk-catalog-product-secondary {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gk-catalog-product-secondary,
  .gk-catalog-product-details {
    transition: opacity 180ms ease;
  }
}

.gk-catalog-product-origin {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.gk-catalog-product-tags {
  display: flex;
  min-width: 0;
  gap: 0.375rem;
  overflow: hidden;
}

.gk-catalog-product-tag {
  max-width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  padding: 0.25rem 0.5rem;
  overflow-wrap: anywhere;
}

.gk-catalog-product-tags > .gk-catalog-product-tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Khối trang chủ (giới thiệu, ngành hàng): đàn diều lớn hơn, nhạt hơn, làm nền cho cả khối thay vì từng thẻ. */
.gk-kites-lg::before {
  width: min(50%, 12rem);
  opacity: 0.16;
}

@media (width >= 48rem) {
  .gk-kites-lg::before {
    width: 26rem;
  }
}

/*
 * Dải nền chéo: khối nền phụ thành hình bình hành, mép trên và mép dưới cùng nghiêng xuống bên phải như cánh diều
 * đang bay. Nền vẽ ở lớp ::before nên nội dung, viền focus, họa tiết không bị cắt; khối cần thêm khoảng đệm dọc
 * bằng độ nghiêng (py-16 md:py-28 thay cho py-12 md:py-20).
 */
.gk-band {
  --gk-band-slant: 1.5rem;

  position: relative;
  isolation: isolate;
}

.gk-band::before {
  position: absolute;
  z-index: -1;
  background-color: var(--color-surface-muted);
  content: '';
  clip-path: polygon(
    0 0,
    100% var(--gk-band-slant),
    100% 100%,
    0 calc(100% - var(--gk-band-slant))
  );
  inset: 0;
  pointer-events: none;
}

@media (width >= 48rem) {
  .gk-band {
    --gk-band-slant: 4rem;
  }
}

/*
 * Nền khối có họa tiết (câu chuyện trang chủ): hình thoi lồng nhau của header (header-pattern.svg) chìm ở góc trái trên
 * và góc phải dưới, nhạt để không tranh với ảnh và chữ. Mép khối cắt phần thừa của hình.
 */
.gk-pattern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.gk-pattern::before,
.gk-pattern::after {
  position: absolute;
  z-index: -1;
  width: min(70%, 36rem);
  height: clamp(9rem, 20vw, 16rem);
  background-color: var(--color-link);
  content: '';
  pointer-events: none;
  opacity: 0.8;
  mask: url('../../assets/images/header-pattern.svg') left center / cover no-repeat;
}

.gk-pattern::before {
  top: 0;
  left: 0;
}

.gk-pattern::after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}