/* ScoreShop — uitnodigend / conversion-focused layer */
:root {
  --invite-bg: #f0f7fa;
  --invite-card: #ffffff;
  --invite-navy: #06283a;
  --invite-cyan: #00b4d8;
  --invite-cyan-deep: #0096c7;
  --invite-accent: #ff6b35;
  --invite-green: #1b9e5a;
  --invite-shadow: 0 12px 40px rgba(6, 40, 58, 0.1);
}

body { background: var(--invite-bg) !important; }

/* Sticky urgency bar */
.invite-urgency {
  background: linear-gradient(90deg, #ff6b35, #ff8c42);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.invite-urgency span { opacity: 0.95; }

/* Header softer */
.header {
  background: linear-gradient(180deg, #073e56 0%, #06283a 100%) !important;
}
.head-main { gap: 28px; }
.search {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border: 2px solid transparent;
  transition: border-color .15s;
}
.search:focus-within { border-color: var(--invite-cyan); }
.search button {
  background: linear-gradient(180deg, #14cfff, #00a8cc) !important;
  font-weight: 700;
}

/* Hero — warmer, clearer CTA (uploaded image via inline style wins) */
.hero {
  min-height: 440px !important;
  background-color: #0a4d68;
  background-image:
    linear-gradient(105deg, rgba(4, 28, 42, 0.94) 0%, rgba(4, 28, 42, 0.55) 48%, rgba(4, 28, 42, 0.25) 100%),
    linear-gradient(135deg, #0a4d68, #1488a8 40%, #7eb8a2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 32px 32px !important;
  position: relative;
}
/* Inline style from PHP sets background-image when .has-image — reinforce */
.hero.has-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(transparent, var(--invite-bg));
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.hero .eyebrow {
  display: inline-block;
  background: rgba(0, 180, 216, 0.2);
  border: 1px solid rgba(0, 180, 216, 0.45);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: 14px !important;
}
.hero h1 {
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  margin-bottom: 16px !important;
}
.hero h1 strong { color: #5eead4 !important; }
.hero p:not(.eyebrow) {
  font-size: 18px !important;
  opacity: 0.92;
  max-width: 480px;
  margin-bottom: 22px !important;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero .btn {
  padding: 15px 28px !important;
  font-size: 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff8a4c, #ff6b35) !important;
  box-shadow: 0 10px 28px rgba(255, 107, 53, 0.4) !important;
}
.hero .btn:hover { filter: brightness(1.08); }
.hero .btn-ghost {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.55) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 22px;
  font-size: 13px;
  opacity: 0.9;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* Social proof strip */
.social-proof {
  max-width: 1250px;
  margin: -20px auto 28px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.social-proof-inner {
  background: #fff;
  border-radius: 18px;
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 14px;
  box-shadow: var(--invite-shadow);
  border: 1px solid #e2eef3;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--invite-navy);
}
.social-proof-inner strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--invite-cyan-deep);
  margin-bottom: 2px;
}

/* Section titles */
.section-head h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
.section {
  padding-top: 28px !important;
  padding-bottom: 12px !important;
}

/* Category pills more playful */
.cat-card {
  border-radius: 20px !important;
  border: 1px solid #dff0f6 !important;
}
.cat-card:hover {
  border-color: var(--invite-cyan) !important;
  box-shadow: 0 16px 32px rgba(0, 180, 216, 0.15) !important;
}
.cat-img {
  background: linear-gradient(145deg, #e0f7fa, #b2ebf2) !important;
  color: #006d7a !important;
}

/* Product cards — buy focused */
.product {
  border-radius: 20px !important;
  border: 1px solid #e4eef2 !important;
  background: #fff !important;
  position: relative;
}
.product:hover {
  border-color: #9ddceb !important;
  box-shadow: 0 20px 44px rgba(6, 40, 58, 0.14) !important;
}
.product-price strong {
  font-size: 20px !important;
  color: var(--invite-navy) !important;
}
.product-price del { font-size: 13px; }
.product-save {
  display: inline-block;
  background: #e8faf0;
  color: var(--invite-green);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.product form button,
.product .buy-btn {
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, #00c4e0, #0096c7) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 14px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(0, 150, 199, 0.3);
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.product form button:hover,
.product .buy-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

/* Score day deal — urgency */
.score-day {
  background: linear-gradient(120deg, #06283a, #0a4d68 50%, #0e6b7c) !important;
  border-radius: 28px !important;
  margin: 20px auto 36px !important;
  max-width: 1250px;
  box-shadow: 0 24px 60px rgba(6, 40, 58, 0.22) !important;
}
.score-day .btn {
  background: linear-gradient(180deg, #ff8a4c, #ff6b35) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(255, 107, 53, 0.35) !important;
}

/* Promo tiles */
.promo-grid {
  max-width: 1250px;
  margin: 10px auto 30px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.promo {
  border-radius: 20px !important;
  min-height: 160px;
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 24px rgba(6,40,58,0.08);
}
.promo:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(6,40,58,0.14);
}
.promo strong { font-size: 20px; display: block; margin-bottom: 6px; }
.promo b {
  margin-top: 12px;
  display: inline-flex;
  background: rgba(255,255,255,0.2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

/* Benefits trust */
.benefits {
  max-width: 1250px !important;
  margin: 8px auto 40px !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}
.benefits > div {
  background: #fff !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  text-align: center;
  border: 1px solid #e4eef2;
  box-shadow: 0 4px 16px rgba(6,40,58,0.05);
  font-size: 14px;
}
.benefits > div b { display: block; margin: 8px 0 4px; color: var(--invite-navy); font-size: 14px; }
.benefits > div small { color: #6f7f89; font-size: 12px; }

/* Primary site buttons */
a.btn, button.btn, .btn {
  border-radius: 999px !important;
}

/* Footer warmer */
footer {
  margin-top: 20px;
  padding-top: 48px !important;
}

@media (max-width: 900px) {
  .promo-grid { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr 1fr !important; }
  .social-proof { margin-top: 0; }
}
@media (max-width: 560px) {
  .benefits { grid-template-columns: 1fr !important; }
}



/* Categorie-tegels: groter + vierkant */
.cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 18px !important;
}
.cat-grid .cat-card,
a.cat-card {
  overflow: hidden;
  max-width: 100%;
  padding: 14px 12px 16px !important;
}
.cat-grid .cat-img,
a.cat-card .cat-img,
.cat-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 12px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: block !important;
  flex-shrink: 0 !important;
  background: linear-gradient(145deg, #e0f7fa, #b2ebf2) !important;
}
.cat-img img,
.cat-grid .cat-img img,
a.cat-card .cat-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
  display: block !important;
  margin: 0 !important;
}
.cat-img span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 120px;
  font-size: 42px !important;
  font-weight: 800;
  color: #0a4d68;
}
.cat-card h3 {
  font-size: 15px !important;
  margin-top: 4px !important;
}
@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}