/* === Shop – Category Cards (4-up) === */

/* Page base background: Ivory Mist */
.shop-archive,
.shop-categories-wrap,
.shop-products-wrap {
  --ia-ivory-mist: #F7F5EF;
  background: var(--ia-ivory-mist);
}

/* section container */
.shop-categories-wrap .container,
.shop-products-wrap .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 4 column grid */
.shop-categories-grid {
  list-style: none;
  margin: 28px 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Card */
.shop-cat-card {
  background: var(--ia-ivory-mist);
  border-radius: 22px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.shop-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 28px rgba(0,0,0,.08);
}

.shop-cat-card__link { display:block; text-decoration:none; color:inherit; }

/* Image (rounded top, fixed ratio) */
.shop-cat-card__media {
  aspect-ratio: 4 / 3;
  background: #ddd;
  overflow: hidden;
}
.shop-cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Text area like reference */
.shop-cat-card__body {
  background: #fff; /* inner panel card feel */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  margin-top: -18px;
  padding: 16px 18px 18px;
}

.shop-cat-card__title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  font-weight: 600;
  color: var(--ia-obsidian, #0C3B2E);
  margin: 0 0 6px;
  letter-spacing: .2px;
}

.shop-cat-card__desc {
  margin: 0;
  font-family: var(--font-body, 'Lora', serif);
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(12,59,46,.75);
}

/* Responsive */
@media (max-width: 1100px) {
  .shop-categories-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .shop-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 520px) {
  .shop-categories-grid { grid-template-columns: 1fr; }
}

/* spacing above products so sections don't crash into each other */
.shop-products-wrap { padding: 28px 0 40px; }
