/* ============================================================
   occasions.css — секция 4 «THERE'S A BAG FOR THAT» (белый). Поток, токены.
   ============================================================ */

.occ {
  background: var(--c-white);
  padding: 40px var(--side) 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.occ__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.occ__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-head); color: var(--c-ink);
}
.occ__sub {
  margin-top: 12px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

.occ__grid {
  margin-top: 24px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.occ__card {
  background: var(--c-ivory);
  border-radius: var(--r-card); padding: 8px 8px 16px;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; text-align: left;
}
.occ__ph { width: 100%; aspect-ratio: 6 / 5; border-radius: var(--r-tile); overflow: hidden; }
.occ__ph img { width: 100%; height: 100%; object-fit: cover; }
.occ__t {
  margin: 12px 6px 0;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.05; letter-spacing: .2px; text-transform: uppercase; color: var(--c-ink);
}
.occ__d {
  margin: 8px 6px 0;
  font-size: var(--fs-card-d); line-height: var(--lh-body); color: var(--c-muted);
}

.occ__close {
  margin-top: 26px;
  font-family: var(--ff-body); font-weight: 700;
  font-size: var(--fs-note); line-height: var(--lh-body); color: var(--c-ink);
}

.occ__cta { margin-top: 24px; }