/* ===========================
   SHOP STYLES
   =========================== */

/* ---- Hero ---- */
.shop-hero {
  background:
    linear-gradient(150deg, rgba(45,80,22,.92) 0%, rgba(212,134,11,.7) 100%),
    url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=1400&q=80') center/cover no-repeat;
  padding: 8rem 0 5rem;
  color: var(--cream);
}
.shop-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.shop-hero__text { flex: 1; min-width: 280px; }
.shop-hero__text h1 { color: #fff; margin-bottom: 1rem; }
.shop-hero__text p  { color: rgba(255,255,255,.8); font-size: 1.05rem; max-width: 52ch; }

.shop-impact-badge {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
}
.badge-emoji { font-size: 2.5rem; }
.shop-impact-badge strong { font-size: 1.2rem; }
.shop-impact-badge span  { font-size: .9rem; color: rgba(255,255,255,.7); }

/* ---- Notice ---- */
.shop-notice {
  background: #fff8e1;
  border-bottom: 1px solid #ffd54f;
  padding: .75rem 0;
  font-size: .82rem;
  color: #555;
  text-align: center;
}
.shop-notice a { color: var(--amber); text-decoration: underline; }

/* ---- Shop header ---- */
.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.shop-header h2 { margin: 0; }
.shop-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
.shop-filter {
  padding: .45rem 1.1rem;
  border-radius: 50px;
  border: 2px solid var(--light);
  background: transparent;
  font-size: .83rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all var(--transition);
}
.shop-filter:hover { border-color: var(--amber); color: var(--amber); }
.shop-filter.active {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
}
.product-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-card.hidden { display: none; }

.product-card__img-wrap { position: relative; }
.product-card__img {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  position: relative;
}
/* Product colour backgrounds */
.product-card__img--tee      { background: linear-gradient(135deg, #2D5016 0%, #5A7A3A 100%); }
.product-card__img--hoodie   { background: linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 100%); }
.product-card__img--cap      { background: linear-gradient(135deg, #7B2D3E 0%, #9E4057 100%); }
.product-card__img--notebook { background: linear-gradient(135deg, #FAF6EF 0%, #F0E9D6 100%); border-bottom: 1px solid var(--light); }
.product-card__img--bookmark { background: linear-gradient(135deg, #D4860B 0%, #F2A93B 100%); }
.product-card__img--notepad  { background: linear-gradient(135deg, #5A7A3A 0%, #7FB069 100%); }
.product-card__img--tote     { background: linear-gradient(135deg, #F0E9D6 0%, #E8E0D0 100%); border-bottom: 1px solid var(--light); }
.product-card__img--mug      { background: linear-gradient(135deg, #FAF6EF 0%, #F0E9D6 100%); border-bottom: 1px solid var(--light); }
.product-card__img--anthology{ background: linear-gradient(135deg, #2D5016 0%, #7B2D3E 100%); }

.product-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--forest);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 50px;
}
.product-badge--amber { background: var(--amber); }

.product-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .4rem;
  display: block;
}
.product-card__body h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.product-card__body p  { font-size: .85rem; color: var(--gray); flex: 1; margin-bottom: 1.25rem; max-width: none; }
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.product-price {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--forest);
}
.btn--sm {
  padding: .55rem 1.1rem;
  font-size: .82rem;
}

/* ---- Bundles ---- */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}
.bundle-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.bundle-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.bundle-card--featured {
  background: var(--forest);
  color: var(--cream);
}
.bundle-card--featured h3 { color: #fff; }
.bundle-card--featured p  { color: rgba(255,255,255,.75); }
.bundle-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .9rem;
  border-radius: 50px;
  white-space: nowrap;
}
.bundle-emoji { font-size: 2.5rem; margin-bottom: 1rem; }
.bundle-card h3 { margin-bottom: .5rem; }
.bundle-card p  { font-size: .88rem; color: var(--gray); margin-bottom: 1.25rem; max-width: none; }
.bundle-card--featured p { color: rgba(255,255,255,.75); }
.bundle-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.bundle-was {
  font-size: .95rem;
  color: var(--gray);
  text-decoration: line-through;
}
.bundle-card--featured .bundle-was { color: rgba(255,255,255,.5); }
.bundle-now {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--amber);
}

/* ---- Mission bar ---- */
.shop-mission {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: var(--parchment);
  border-radius: var(--radius-lg);
  padding: 3rem;
  flex-wrap: wrap;
}
.shop-mission__icon { font-size: 3.5rem; flex-shrink: 0; }
.shop-mission h2 { margin-bottom: .75rem; }
.shop-mission p  { color: var(--gray); max-width: 60ch; }

/* Responsive */
@media (max-width: 600px) {
  .shop-header { flex-direction: column; align-items: flex-start; }
  .shop-mission { flex-direction: column; text-align: center; }
  .shop-mission p { margin-inline: auto; }
  .shop-hero__inner { flex-direction: column; }
}