/* Flowersstore — Collections grid (tokens in theme.css).
 * Scroll entrance: root `data-cs-scroll-reveal` + `.reveal` on children — theme.css + components/js/animation.js */

section#collections {
    padding: clamp(64px, 9vw, 132px);
}
.container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 64px);
}
.eyebrow {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--theme-mocha-deep);
    margin-bottom: 1.1rem;
}
.section-title {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    color: #2a2320;
}
/* ---------- Collections ---------- */
.collections__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 300px;
  gap: clamp(14px, 1.6vw, 22px);
}
.cat-card {
  position: relative; overflow: hidden;
  border-radius: 10px;
  display: flex; align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.cat-card--tall { grid-row: span 2; }
.cat-card img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgba(42,35,32,0.75) 100%);
  transition: opacity 0.5s var(--ease);
}
.cat-card:hover img { transform: scale(1.07); }
.cat-card__body { padding: clamp(20px, 2.5vw, 34px); }
.cat-card__body h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 4px; }
.cat-card__body p { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-bottom: 12px; }
.cat-card__cta {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  display: inline-block;
}
.cat-card:hover .cat-card__cta { opacity: 1; transform: translateY(0); }
.section-head{
        max-width: 620px;
    margin-bottom: clamp(36px, 5vw, 60px);
}
@media (max-width: 640px) {
    .collections__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 260px;
    }
    section#collections{
      padding: 0px;
    }
}