/* ========================================
   PRODUCT CATEGORIES (Product Category Buttons)
   ======================================== */
.product-categories {
  border: var(--border-width) solid var(--color-blackened);
  border-top: none;
  position: relative;
  overflow: hidden;
}

.product-categories-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 464px);
  justify-content: center;
  gap: 0;
  padding: 108px 0;
}

.product-button {
  background: var(--color-cream-transparent);
  border: var(--border-width) solid var(--color-blackened);
  aspect-ratio: 464 / 456;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 60px;
  padding: 75px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

/* 2-column grid: even items (right column) have no left border */
.product-button:nth-child(2n) {
  border-left: none;
}

/* 2-column grid: rows 2+ have no top border */
.product-button:nth-child(n+3) {
  border-top: none;
}

.product-button::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: var(--border-width) solid var(--color-gilded);
  pointer-events: none;
}

.product-button:hover {
  background: var(--color-peach);
}

.product-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 140px;
}

.product-icon img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.product-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.product-button:has(.product-subtitle) .product-text {
  margin-top: -20px;
}

.product-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--color-gilded);
  -webkit-text-stroke: 1px var(--color-blackened);
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-blackened);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 8px;
}

@media (max-width: 1020px) {
    .product-categories-grid {
        grid-template-columns: repeat(2, 332px);
    }
}

@media (max-width: 768px) {
    .product-categories-grid {
        grid-template-columns: repeat(1, 400px);
        gap: 20px;
    }
    
    .product-categories-grid .product-button {
        gap:0;
        padding:20px;
        justify-content:center;
        border-style: solid;
        border-width:2px;
    }
    
    .product-categories-grid .product-button .product-icon {
        margin-top:20px;
        margin-bottom:0;
    }
}