/* ============================================================
   PAVI'S LAB — offers.css
   Buyer offers page. Reuses .prod-card / .prod-grid from
   products.css and only adds the offer-specific chrome.
   ============================================================ */

/* ── Hero banner ── */
.offer-banner {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 0, 127, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
/* Banners are designed artwork — show the whole thing, never crop it */
.offer-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Layout: side images flank the sections ──
   Hidden rails are display:none, so they leave the grid entirely. The column
   template is therefore driven by classes JS sets for the rails that actually
   exist — otherwise the main column would land in a 200px rail slot and
   squash every product card. */
.offer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (min-width: 1100px) {
  .offer-layout.has-side-1.has-side-2 {
    grid-template-columns: 190px minmax(0, 1fr) 190px;
  }
  .offer-layout.has-side-1:not(.has-side-2) {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .offer-layout.has-side-2:not(.has-side-1) {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
  .offer-side { position: sticky; top: 96px; }
}
.offer-main { min-width: 0; }

.offer-side {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.offer-side img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Section ── */
.offer-section { margin-bottom: 38px; }

.offer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.offer-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.offer-section-icon { font-size: 22px; }
.offer-section-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* The shared .prod-grid is a fixed 4 columns, which gets cramped once the side
   rails take their share. Inside the offers page, fit as many as comfortably
   fit instead. */
.offer-main .prod-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
@media (max-width: 768px) {
  .offer-main .prod-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ── Card extras ── */
.offer-card .prod-img-wrap { position: relative; }

.offer-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.offer-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.offer-price-was {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.offer-save {
  font-size: 11px;
  font-weight: 600;
  color: #66bb6a;
  margin-top: 2px;
}
.offer-ship-note {
  font-size: 11px;
  font-weight: 600;
  color: #66bb6a;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Empty / loading ── */
.offer-loading,
.offer-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.offer-empty-icon { font-size: 44px; margin-bottom: 12px; }
.offer-empty-btn {
  display: inline-block;
  margin-top: 14px;
  background: var(--pink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 24px;
  text-decoration: none;
}
.offer-empty-btn:hover { background: var(--pink-deep); }

@media (max-width: 600px) {
  .offer-section-title { font-size: 17px; }
  .offer-banner img { max-height: 200px; }
}