/* =================================================================
   PEERZ — warmth.css
   Verfijningslaag: rondere hoeken, zachte schaduwen en wat warmte.
   Wordt als laatste ingeladen, zodat dit netjes over de rest valt.
   ================================================================= */

:root {
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-soft:  0 10px 30px -14px rgba(44, 26, 14, 0.20);
  --shadow-hover: 0 26px 55px -20px rgba(44, 26, 14, 0.30);
}

/* Heel subtiele warme gloed achter de pagina */
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, #FBF7EF 0%, rgba(251,247,239,0) 60%),
    var(--clr-cream);
  background-attachment: fixed;
}

/* ---- Knoppen: zachte hoeken + tastbare hover ---- */
.btn { border-radius: var(--radius-sm); }
.btn:hover { box-shadow: 0 12px 26px -12px rgba(44, 26, 14, 0.38); }

/* ---- Productkaarten: rond + rustende schaduw ---- */
.product-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.product-card:hover { box-shadow: var(--shadow-hover); }
.featured__grid .product-card,
.collectie-grid .product-card { background: var(--clr-white); }

/* ---- Velden, filters, kleine elementen ---- */
.filter-btn { border-radius: var(--radius-sm); }
.form-group input,
.form-group select,
.form-group textarea { border-radius: var(--radius-sm); }
.form-success { border-radius: var(--radius-sm); }

/* ---- Beelden netjes afgerond ---- */
.mood-banner__image,
.mood-banner__placeholder,
.story__image,
.story__img-placeholder {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.product-detail__media,
.product-detail__placeholder { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.product-detail__note { border-radius: var(--radius-sm); }

/* ---- USP-iconen als warm rondje ---- */
.usp__icon {
  width: 66px; height: 66px;
  margin: 0 auto 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(224,201,154,0.55), rgba(201,169,110,0.18));
  border-radius: 50%;
}

/* ---- Waarden: zachter ---- */
.value-item {
  background: var(--clr-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ---- Mobiel menu: zachte linkerrand ---- */
@media (max-width: 768px) {
  .nav__links { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}

/* ---- Beheer: zelfde warme afronding ---- */
.admin-card, .panel, .stat, .modal { border-radius: var(--radius); }
.btn-sm, .icon-btn, .cat-chip,
.fld input, .fld select, .fld textarea { border-radius: var(--radius-sm); }
.admin-banner, .annc-preview { border-radius: var(--radius-sm); }
.admin-card { box-shadow: var(--shadow-soft); }
.stat { box-shadow: var(--shadow-soft); }