/* ==========================================================================
   Complimentje - WooCommerce-meldingen (mandje/succes/info/fout) in de huisstijl.

   Apart bestand, laadt NA de gegenereerde style.css (zie functions.php).
   style.css wordt gegenereerd uit het design-lab; dit bestand niet, hier mag
   met de hand. Doel: de brede grijze/accentbalk vervangen door een rustige
   kaart met een rond badge-icoon, in de warme tint van de rest van de winkel.
   ========================================================================== */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  display:flex;align-items:center;flex-wrap:nowrap;gap:12px;
  background:var(--white);
  border:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));
  border-left:var(--lijn-dikte) solid var(--line,var(--kleur-lijn)); /* accentbalk links weg */
  border-radius:var(--r-vlak);
  padding:12px 16px;
  margin:0 0 24px;
  color:var(--ink,var(--kleur-ink));
  font:500 var(--fs-body) 'Figtree',system-ui,sans-serif;line-height:1.45;
  box-shadow:none;
  animation:cmpl-melding-in .45s cubic-bezier(.16,.84,.44,1) both;
}

/* Rond badge-icoon vooraan. Per soort een eigen tint + inline-SVG icoon. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  content:"";display:inline-block;flex:0 0 auto;
  width:36px;height:36px;border-radius:50%;
  background:var(--kleur-grond) no-repeat center / 20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6b52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.woocommerce-info::before{
  background-color:var(--kleur-grond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.woocommerce-error::before{
  background-color:var(--kleur-grond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9414c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* Tekst neemt de middenruimte; productnaam iets nadrukkelijker. */
.cmpl-melding__tekst{flex:1 1 auto;min-width:0}
.cmpl-melding__tekst strong{font-weight:700}

/* De actieknop netjes rechts (erft de ghost-pil uit style.css). */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
  margin-left:auto;flex:0 0 auto;white-space:nowrap;
}

@keyframes cmpl-melding-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{animation:none}
}

/* Smal scherm: laat de knop onder de tekst vallen i.p.v. knellen. */
@media (max-width:480px){
  .woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error,
  .woocommerce-message,.woocommerce-info,.woocommerce-error{flex-wrap:wrap}
  .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{margin-left:48px}
}

/* ==========================================================================
   Twee dingen die WooCommerce zelf nog deed, en die hier fout uitpakten.
   Gevonden in de route-audit van 30 augustus 2026, nagemeten op live.
   ========================================================================== */

/* 1. Het icoon lag over de eerste woorden heen.
      WooCommerce zet `position:absolute; left:1.5em` op deze ::before, en
      rekent daarbij op zijn eigen `padding-left:64px`. Dat padding is hier
      vervangen door 16px, maar de absolute plaatsing bleef staan: het rondje
      begon op 22,5 px en de tekst op 16. Hierboven is het bedoeld als gewoon
      flex-item, en dat vraagt om `position:static` — anders telt het niet mee
      in de rij en gaat het er dus overheen. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  position:static;
  top:auto;left:auto;right:auto;bottom:auto;
}

/* 2. De balk liep van rand tot rand terwijl de pagina eronder een kolom is.
      Op afrekenen mat hij 1265 px tegen 1120 voor de inhoud, en hij begon dus
      links van alles wat eronder stond.

      De maat staat op de balk zelf en niet op `.woocommerce-notices-wrapper`:
      de waardebonbalk hangt namelijk in `.woocommerce-form-coupon-toggle` en
      niet in die wrapper, dus die ene regel raakte precies de balk niet die in
      de audit stond. 1064 = 1120 min de twee keer 28 px die `.wrap` als
      binnenmarge heeft; zo lopen de randen gelijk.

      Staat de melding al binnen een kolom, dan doet `margin-inline:auto` niets
      en vult hij die kolom, wat daar juist klopt. */
/* De `.woocommerce`-voorvoegsels staan er niet voor de sier: het basisblok
   bovenaan dit bestand zet `margin:0 0 24px` op `.woocommerce .woocommerce-info`,
   en dat is specifieker dan een kale klasse. Zonder deze tweede selector bleef
   de balk keurig 1064 px breed maar plakte hij aan de linkerrand. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  max-width:1064px;
  margin-inline:auto;
}

/* Onder die breedte is er niets meer te centreren, maar dan hoort de balk wel
   dezelfde kantlijn te houden als de inhoud eronder. Binnen `.wrap` niet: daar
   zorgt de kolom zelf al voor de marge en zou dit hem dubbel inspringen. */
@media (max-width:1176px){
  .woocommerce .woocommerce-message,
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error{ margin-inline:32px; }

  .woocommerce .wrap .woocommerce-message,
  .woocommerce .wrap .woocommerce-info,
  .woocommerce .wrap .woocommerce-error,
  .wrap .woocommerce-message,
  .wrap .woocommerce-info,
  .wrap .woocommerce-error{ margin-inline:auto; }
}

/* ==========================================================================
   Drie dingen uit de mandje-ronde van 30 augustus 2026, nagemeten in de
   browser op de route "product verwijderen uit de winkelwagen".
   ========================================================================== */

/* 1. De melding plakte aan de plakkende sitekop.
      Gemeten: de kop eindigt op 77 px en de balk begon op 77. Er zat dus geen
      haar tussen, en omdat WooCommerce de focus naar de melding verplaatst
      lag de focusring er ook nog eens strak tegenaan. Samen leest dat als een
      balk die halverwege is blijven steken in plaats van als een mededeling.

      scroll-margin-top hoort erbij: springt de focus ernaartoe, dan schuift de
      pagina anders precies zo ver dat de balk weer onder de kop verdwijnt. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  margin-top:24px;
  scroll-margin-top:96px;
}
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus{
  outline-offset:3px;
}

/* 2. "Ongedaan maken?" was platte tekst.
      WooCommerce geeft die link de klasse `restore-item` en niet `button`, dus
      alle knopopmaak hierboven ging eraan voorbij. Juist deze link wil je
      kunnen vinden: het is de weg terug nadat je per ongeluk iets weggooide. */
.woocommerce-message .restore-item,
.woocommerce-message a[href*="undo_item"]{
  margin-left:auto;flex:0 0 auto;white-space:nowrap;
  display:inline-flex;align-items:center;
  padding:8px 16px;
  border:var(--lijn-dikte) solid var(--knop-vol,var(--kleur-rood));
  border-radius:var(--r-rond);
  color:var(--knop-vol-hover,var(--kleur-rood-hover));
  font-weight:600;font-size:var(--fs-body);text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.woocommerce-message .restore-item:focus-visible{
  background:var(--knop-vol,var(--kleur-rood));color:var(--kleur-grond);
}
@media (hover: hover) and (pointer: fine){.woocommerce-message .restore-item:hover, .woocommerce-message a[href*="undo_item"]:hover{
  background:var(--knop-vol,var(--kleur-rood));color:var(--kleur-grond);
}}

/* 3. "Terug naar winkel" hing buiten de pagina.
      Gemeten op 0 px terwijl de kolom op 168 begint: de knop uit het lege-mandje
      sjabloon van WooCommerce staat buiten .wrap en erfde dus geen kantlijn.
      Dezelfde maat als de meldingen hierboven, zodat alles op één lijn staat. */
.woocommerce .return-to-shop,
.return-to-shop{
  max-width:1064px;
  margin:24px auto 48px;
}
@media (max-width:1176px){
  .woocommerce .return-to-shop,
  .return-to-shop{ margin-inline:32px; }
  .woocommerce .wrap .return-to-shop,
  .wrap .return-to-shop{ margin-inline:auto; }
}