/* ============================================================
   FidgetParadise — WooCommerce in onze huisstijl
   Legt het FidgetParadise-ontwerp over de standaard Woo-markup.
   ============================================================ */

.fp-woo { }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  padding: .85rem 1.1rem .85rem 1.1rem !important;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  margin-bottom: 1rem;
}
.woocommerce-message { border-left: 4px solid #3ed99f; }
.woocommerce-info    { border-left: 4px solid var(--purple); }
.woocommerce-error   { border-left: 4px solid var(--pink); }

/* Dot-icoon links */
.woocommerce-message::before,
.woocommerce-info::before {
  content: '';
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.woocommerce-message::before { background: #3ed99f; }
.woocommerce-info::before    { background: var(--purple); }

/* "Ongedaan maken" / "Ga naar winkelwagen" link-knop */
.woocommerce-message a.button,
.woocommerce-info a.button {
  margin-left: auto !important;
  float: none !important;
  background: transparent !important;
  color: var(--pink) !important;
  border: 1.5px solid var(--pink) !important;
  border-radius: var(--pill) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  padding: .35em .9em !important;
  white-space: nowrap;
  transition: background .2s, color .2s;
  box-shadow: none !important;
  text-decoration: none;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background: var(--pink) !important;
  color: #fff !important;
}

/* ---- Product grid (shop / categorie) ---- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  text-align: left;
  position: relative;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--line-2);
}
.woocommerce ul.products li.product a img {
  margin: 0 !important;
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.02rem !important;
  letter-spacing: -.01em;
  color: var(--text);
  padding: .9rem 1.1rem .2rem !important;
  line-height: 1.25;
}
.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 1.1rem;
  color: var(--text) !important;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.woocommerce ul.products li.product .price del { color: var(--faint); font-weight: 500; font-size: .85em; margin-right: .35em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: .5rem 1.1rem 0; font-size: .8em; color: #f5b301; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: block !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto 1.1rem 1.1rem !important; /* margin-top:auto → knop altijd onderaan kaart */
  background: var(--grad) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: .8rem;
  padding: .72em 1em;
  border-radius: var(--pill);
  box-shadow: var(--sh-pink);
  border: none !important;
  transition: transform .2s, box-shadow .2s;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(233,30,140,.4);
  color: #fff;
}

/* Sale flash */
/* Hogere specificity dan WooCommerce's eigen .woocommerce ul.products li.product .onsale regel */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale {
  position: absolute !important;
  top: .75rem !important;
  right: .75rem !important;
  left: auto !important;
  margin: 0 !important;
  min-height: auto; min-width: auto;
  padding: .32em .72em;
  border-radius: var(--pill);
  background: var(--grad);
  color: #fff;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.2;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(233,30,140,.35);
}

/* "As seen on TikTok" badge — op de productfoto (zwart, TikTok-stijl), botst niet met de sale-badge */
.fp-tiktok-badge {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: .32rem;
  background: #000; color: #fff; font-weight: 800;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2;
  padding: .36em .62em; border-radius: var(--pill); white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.fp-tiktok-badge svg { width: 11px; height: 11px; flex: 0 0 auto; }
/* Kaart: linksboven (sale-badge zit rechtsboven) */
.woocommerce ul.products li.product .fp-tiktok-badge { top: .75rem; left: .75rem; }
/* Enkel product: linksboven op de gallery; bij sale-product eronder zodat ze niet overlappen */
.woocommerce div.product .fp-tiktok-badge { top: .9rem; left: .9rem; }
.woocommerce div.product.sale .fp-tiktok-badge { top: 3.1rem; }

/* Result count + ordering */
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }
.woocommerce .woocommerce-ordering select {
  padding: .6rem 1rem; border: 1px solid var(--line-2);
  border-radius: var(--pill); font-size: .88rem; background: #fff; outline: none;
}

/* ---- Enkel product — flexbox (tabs krijgen automatisch volle breedte via flex-basis:100%) ---- */
.woocommerce div.product { display: flex !important; flex-wrap: wrap !important; gap: clamp(28px,4vw,56px) !important; align-items: flex-start !important; }
.woocommerce div.product .woocommerce-product-gallery { flex: 1 1 calc(50% - clamp(14px,2vw,28px)) !important; min-width: 280px !important; width: auto !important; margin: 0 !important; float: none !important; align-self: flex-start; opacity: 1 !important; }
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.woocommerce div.product .summary { flex: 1 1 calc(50% - clamp(14px,2vw,28px)) !important; min-width: 280px !important; width: auto !important; margin: 0 !important; float: none !important; position: relative; top: auto !important; align-self: flex-start; z-index: 1; }
/* Sale-badge op single product: linksboven op de productfoto, niet over de summary-kaart */
.woocommerce div.product > span.onsale { left: .9rem !important; right: auto !important; top: .9rem !important; }
.woocommerce div.product .product_title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(1.8rem,3.4vw,2.6rem); letter-spacing: -.02em; margin: .2rem 0 .8rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--text); font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 2rem; letter-spacing: -.02em; margin-bottom: 1.2rem;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { color: var(--faint); font-weight: 600; font-size: .55em; opacity: .8; margin-right: .45rem; text-decoration-thickness: 1.5px; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none; color: var(--pink); background: transparent; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); line-height: 1.7; margin-bottom: 1.6rem; }
.woocommerce div.product .star-rating { color: #f5b301; }

/* Quantity + add to cart */
.woocommerce div.product form.cart { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.woocommerce .quantity .qty {
  height: 48px; width: 72px; text-align: center;
  border: 1.5px solid var(--line-2); border-radius: var(--pill);
  font-weight: 700; font-size: 1rem; color: var(--text); background: #fff;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--grad) !important; color: #fff !important;
  font-weight: 700; font-size: 1rem; padding: .95em 1.8em;
  border-radius: var(--pill); border: none; box-shadow: var(--sh-pink);
  transition: transform .2s, box-shadow .2s; flex: 1; min-width: 200px;
}
.woocommerce div.product form.cart .button:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(233,30,140,.4); }

/* Variations */
.woocommerce div.product .variations { margin-bottom: 1rem; }
.woocommerce div.product .variations td, .woocommerce div.product .variations th { padding: .4rem .6rem .4rem 0; }
.woocommerce div.product .variations select {
  padding: .7rem 1rem; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; outline: none;
}

/* Tabs — flex-basis:100% dwingt nieuwe rij af (werkt altijd, ongeacht WC-core) */
.woocommerce div.product .woocommerce-tabs { flex: 0 0 100% !important; width: 100% !important; margin-top: 0; position: relative; z-index: 2; background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 !important;
  border-bottom: 1px solid var(--line); margin-bottom: 1.4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: none; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: .8rem 1.2rem !important; font-weight: 600;
  color: var(--muted) !important; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--pink-700) !important; border-color: var(--pink); }
/* Beschrijving-paneel als zachte afgeronde kaart (niet meer vierkant) */
.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--muted); line-height: 1.8;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.6rem);
  box-shadow: var(--sh-sm);
}
.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-tabs .panel > h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  color: var(--text); letter-spacing: -.01em; line-height: 1.25;
  margin: 1.7rem 0 .7rem;
}
.woocommerce div.product .woocommerce-tabs .panel > h2 { font-size: clamp(1.15rem,2vw,1.45rem); }
.woocommerce div.product .woocommerce-tabs .panel > h3 { font-size: clamp(1.05rem,1.8vw,1.25rem); color: var(--pink-700); }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-top: 0; font-size: clamp(1.35rem,2.4vw,1.7rem); }
.woocommerce div.product .woocommerce-tabs .panel p { margin: 0 0 1rem; }
.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs .panel strong { color: var(--text); font-weight: 700; }
.woocommerce div.product .woocommerce-tabs .panel hr { border: none; height: 2px; background: var(--line); margin: 1.8rem 0; }
/* Lijsten met merk-bullets */
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { margin: .4rem 0 1.1rem; padding-left: 0; list-style: none; }
.woocommerce div.product .woocommerce-tabs .panel ul li { position: relative; padding-left: 1.6rem; margin: .4rem 0; }
.woocommerce div.product .woocommerce-tabs .panel ul li::before {
  content: ''; position: absolute; left: .25rem; top: .65em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}
.woocommerce div.product .woocommerce-tabs .panel ol { counter-reset: fp-step; }
.woocommerce div.product .woocommerce-tabs .panel ol li { position: relative; padding-left: 2.6rem; margin: .55rem 0; counter-increment: fp-step; }
.woocommerce div.product .woocommerce-tabs .panel ol li::before {
  content: counter(fp-step); position: absolute; left: 0; top: -.05em;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 700; font-size: .85rem;
  display: grid; place-items: center; box-shadow: var(--sh-pink);
}

/* ---- "As seen on TikTok" video-showcase op productpagina ---- */
.woocommerce div.product .fp-tiktok-showcase { flex: 0 0 100% !important; width: 100% !important; margin: clamp(1.8rem,4vw,2.8rem) 0 0; }
.fp-tt-head { text-align: center; max-width: 640px; margin: 0 auto 1.6rem; }
.fp-tt-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--grad); padding: .4rem .9rem; border-radius: var(--pill);
  box-shadow: var(--sh-pink); margin-bottom: .9rem;
}
.fp-tt-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem,2.6vw,2rem); letter-spacing: -.02em; margin: .1rem 0 .45rem; line-height: 1.2;
}
.fp-tt-head p { color: var(--muted); line-height: 1.6; margin: 0; }
.fp-tt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; max-width: 1000px; margin: 0 auto; }
.fp-tt-video {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden;
  background: #000; box-shadow: var(--sh); border: 1px solid var(--line);
}
.fp-tt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fp-tt-note { text-align: center; color: var(--muted); font-size: .82rem; margin: 1.1rem 0 0; }
@media (max-width: 760px) {
  .fp-tt-grid { grid-template-columns: 1fr; max-width: 340px; }
}

/* ---- Productvideo als slide in de galerij ---- */
.woocommerce-product-gallery__image.fp-gallery-video { position: relative; }
.woocommerce-product-gallery__image.fp-gallery-video video {
  width: 100%; display: block; max-height: 560px; object-fit: contain;
  background: #000; border-radius: var(--r-lg); border: 1px solid var(--line);
}
.fp-gallery-video-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 3;
  background: #000; color: #fff; font-weight: 800; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
  padding: .34em .62em; border-radius: var(--pill); pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* Play-icoon op de video-thumbnail in de galerij-strip */
.woocommerce-product-gallery .flex-control-thumbs li.fp-thumb-video { position: relative; }
.woocommerce-product-gallery .flex-control-thumbs li.fp-thumb-video::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0,0,0,.32); pointer-events: none;
}
.woocommerce-product-gallery .flex-control-thumbs li.fp-thumb-video::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-38%,-50%); pointer-events: none;
  border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ---- Video op de shop-kaart (speelt bij hover) ---- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; display: block; }
.fp-card-video {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; background: #fff; border-radius: 0;
  opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 3;
}
.woocommerce ul.products li.product:hover .fp-card-video,
.woocommerce ul.products li.product:focus-within .fp-card-video,
.fp-card-video.fp-playing { opacity: 1; }

/* ---- Gepersonaliseerde productopties (THWEPO plugin): mooie invoer + selector ---- */
.woocommerce div.product form.cart table.thwepo-extra-options {
  width: 100%; margin: 0 0 1.4rem; border-collapse: separate; border-spacing: 0;
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden;
}
.woocommerce div.product form.cart table.thwepo-extra-options tr,
.woocommerce div.product form.cart table.thwepo-extra-options tbody { background: none; border: none; }
.woocommerce div.product form.cart table.thwepo-extra-options td {
  border: none !important; padding: .85rem 1.1rem; vertical-align: middle; background: none;
}
.woocommerce div.product form.cart table.thwepo-extra-options tr + tr td { border-top: 1px solid var(--line) !important; }
.woocommerce div.product form.cart table.thwepo-extra-options td.label {
  width: 1%; white-space: nowrap; font-weight: 600; color: var(--text); font-size: .95rem;
}
.woocommerce div.product form.cart table.thwepo-extra-options td.label .label-tag { display: inline; }
.woocommerce div.product form.cart table.thwepo-extra-options td.label .required,
.woocommerce div.product form.cart table.thwepo-extra-options td.label abbr { color: var(--pink); border: none; text-decoration: none; margin-left: .15rem; }
.woocommerce div.product form.cart .thwepof-input-field {
  width: 100% !important; box-sizing: border-box !important; max-width: 100% !important;
  border: 1.5px solid var(--line-2) !important; border-radius: var(--r-sm) !important;
  padding: .8rem 1.05rem !important; font-size: .95rem !important; line-height: 1.3 !important;
  font-family: inherit !important; color: var(--text) !important;
  background: var(--surface) !important; height: auto !important; min-height: 46px !important;
  box-shadow: var(--sh-sm) !important; transition: border-color .15s ease, box-shadow .15s ease !important;
}
.woocommerce div.product form.cart .thwepof-input-field::placeholder { color: var(--muted); opacity: .8; }
.woocommerce div.product form.cart .thwepof-input-field:focus {
  outline: none !important; border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,.13) !important;
}
.woocommerce div.product form.cart select.thwepof-input-field {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  cursor: pointer; padding-right: 2.7rem !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2367647d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 1.05rem center !important;
}
/* Stapel label boven veld op smalle schermen */
@media (max-width: 480px) {
  .woocommerce div.product form.cart table.thwepo-extra-options td { display: block; width: 100% !important; padding: .7rem 1rem; }
  .woocommerce div.product form.cart table.thwepo-extra-options td.label { padding-bottom: .35rem; white-space: normal; }
  .woocommerce div.product form.cart table.thwepo-extra-options tr + tr td.label { border-top: 1px solid var(--line) !important; }
  .woocommerce div.product form.cart table.thwepo-extra-options td.value { border-top: none !important; padding-top: 0; }
}

/* Related products heading */
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem,2.4vw,1.9rem); margin-bottom: 1.4rem;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: .88rem; margin-bottom: 1.2rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--pink-700); }

/* ---- Voorraadstatus — pill-badge in thema-stijl ---- */
.woocommerce div.product p.stock {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .38em .9em .38em .6em;
  border-radius: var(--pill);
  margin: 0 0 1.4rem;
  line-height: 1.2;
}
.woocommerce div.product p.stock::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}
.woocommerce div.product p.stock.in-stock {
  background: rgba(62,217,159,.1);
  color: #1a9467;
  border: 1px solid rgba(62,217,159,.3);
}
.woocommerce div.product p.stock.in-stock::before {
  background: #3ed99f;
  box-shadow: 0 0 5px rgba(62,217,159,.55);
}
.woocommerce div.product p.stock.out-of-stock {
  background: rgba(233,30,140,.08);
  color: var(--pink-700);
  border: 1px solid rgba(233,30,140,.22);
}
.woocommerce div.product p.stock.out-of-stock::before {
  background: var(--pink);
}
.woocommerce div.product p.stock.available-on-backorder {
  background: rgba(245,179,1,.1);
  color: #946700;
  border: 1px solid rgba(245,179,1,.3);
}
.woocommerce div.product p.stock.available-on-backorder::before {
  background: #f5b301;
}

/* ============================================================
   Winkelwagen — thema-stijl
   ============================================================ */

/* Forceer normale tabel-weergave (WC block-CSS zet display:grid) */
.woocommerce table.shop_table          { display: table         !important; }
.woocommerce table.shop_table thead    { display: table-header-group !important; }
.woocommerce table.shop_table tbody    { display: table-row-group    !important; }
.woocommerce table.shop_table tfoot    { display: table-footer-group !important; }
.woocommerce table.shop_table tr       { display: table-row          !important; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th       { display: table-cell         !important; }

/* Basistabel */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.woocommerce table.shop_table th {
  background: var(--paper-2);
  font-weight: 700;
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .85rem 1.2rem;
  border-bottom: 1.5px solid var(--line);
}
.woocommerce table.shop_table td {
  padding: 1.1rem 1.2rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table tbody tr:hover td { background: var(--paper); }

/* Kolom-breedtes */
.woocommerce .cart td.product-remove    { width: 44px; text-align: center; padding-right: .5rem; }
.woocommerce .cart td.product-thumbnail { width: 88px; }
.woocommerce .cart td.product-name      { min-width: 200px; }
.woocommerce .cart td.product-price     { width: 110px; text-align: right; }
.woocommerce .cart td.product-quantity  { width: 130px; text-align: center; }
.woocommerce .cart td.product-subtotal  { width: 110px; text-align: right; font-weight: 700; color: var(--pink); }

/* Productafbeelding */
.woocommerce .cart .product-thumbnail img {
  width: 68px; height: 68px; object-fit: cover;
  border-radius: var(--r-sm); box-shadow: var(--sh-sm);
}

/* Productnaam link */
.woocommerce .cart td.product-name a {
  font-weight: 600; color: var(--ink); text-decoration: none;
  transition: color .2s;
}
.woocommerce .cart td.product-name a:hover { color: var(--pink); }
.woocommerce .cart td.product-name .variation { font-size: .82rem; color: var(--muted); margin-top: .25rem; }

/* Verwijder-knop */
.woocommerce a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--paper-2); border-radius: 50%;
  color: var(--muted) !important;
  font-size: 1.1rem; font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
  line-height: 1;
}
.woocommerce a.remove:hover {
  background: #ffe4ef; color: var(--pink) !important;
}

/* Aantal-invoer */
.woocommerce .cart .qty {
  width: 72px; text-align: center;
  border: 1.5px solid var(--line-2); border-radius: var(--pill);
  padding: .45rem .6rem; font-weight: 600;
  background: #fff;
  -moz-appearance: textfield;
}
.woocommerce .cart .qty::-webkit-inner-spin-button,
.woocommerce .cart .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.woocommerce .cart .qty:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(233,30,140,.1); outline: none; }

/* +/- aantal-knoppen (cart, AJAX-update zonder reload) */
.woocommerce .cart .fp-qty-wrap {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line-2); border-radius: var(--pill);
  background: #fff; overflow: hidden;
  transition: opacity .15s ease, border-color .15s ease;
}
.woocommerce .cart .fp-qty-wrap:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(233,30,140,.1); }
.woocommerce .cart .fp-qty-wrap .qty {
  width: 44px !important; border: none !important; border-radius: 0 !important;
  padding: .45rem .1rem !important; box-shadow: none !important; background: transparent;
}
.fp-qty-btn {
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
  width: 34px; height: 40px; flex: 0 0 auto; cursor: pointer; line-height: 1;
  font-size: 1.25rem; font-weight: 800; color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.fp-qty-btn:hover:not(:disabled) { background: #ffe4ef; }
.fp-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.fp-qty-wrap.fp-qty-loading { opacity: .5; pointer-events: none; }
/* Totalen-box dimt zacht terwijl de server de definitieve bedragen (verzending/totaal) berekent.
   Aantal, regelprijs en de gratis-verzending-balk zijn al direct lokaal bijgewerkt. */
.cart_totals.fp-totals-pending .order-total,
.cart_totals.fp-totals-pending .shipping,
.cart_totals.fp-totals-pending .cart-subtotal { opacity: .45; transition: opacity .15s ease; }

/* Actie-rij (coupon + update) */
.woocommerce table.cart td.actions { padding: 1rem 1.2rem; background: var(--paper); }
.woocommerce #coupon_code {
  border: 1.5px solid var(--line-2); border-radius: var(--pill);
  padding: .6rem 1rem; font-size: .9rem;
  width: 180px !important;
  transition: border-color .2s;
}
.woocommerce #coupon_code:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 3px rgba(233,30,140,.1); }
.woocommerce table.cart td.actions .coupon { display: flex; gap: .5rem; align-items: center; float: left; }

/* Waardebon-knop → gradient (primary action) */
.woocommerce table.cart td.actions .button[name="apply_coupon"] {
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: var(--sh-pink);
  border: none;
  border-radius: var(--pill);
  font-weight: 700;
  padding: .65em 1.2em;
  font-size: .88rem;
  transition: transform .2s, box-shadow .2s;
}
.woocommerce table.cart td.actions .button[name="apply_coupon"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(233,30,140,.4);
  color: #fff !important;
}

/* "Winkelwagen bijwerken"-knop verbergen — overbodig: de +/− knoppen en
   handmatig typen werken automatisch via AJAX. */
.woocommerce table.cart td.actions .button[name="update_cart"],
.woocommerce table.cart td.actions input[name="update_cart"] {
  display: none !important;
}

/* Tweekoloms cart-layout
   .fp-woo > div.woocommerce > [form.woocommerce-cart-form, div.cart-collaterals]
   Grid zit dus op het .woocommerce element, niet op .fp-woo */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr 380px; }
  .woocommerce-cart .woocommerce .woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .woocommerce .cart-collaterals { grid-column: 2; position: sticky; top: 6rem; }
}

/* Cart-totalen kaart */
.woocommerce .cart-collaterals .cart_totals h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.3rem;
  margin-bottom: 1.1rem; color: var(--ink);
}
.woocommerce .cart_totals {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: var(--sh);
  min-width: 260px;
}
.woocommerce .cart_totals table.shop_table {
  box-shadow: none; border: none; border-radius: 0;
  margin-bottom: 1rem;
}
.woocommerce .cart_totals table.shop_table tr th { background: transparent; text-transform: none; padding: .6rem 0; }
.woocommerce .cart_totals table.shop_table tr td { padding: .6rem 0; text-align: right; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-weight: 800; font-size: 1.1rem; color: var(--ink); border-top: 1.5px solid var(--line); }

/* ---- Winkelwagen MOBIEL: kaart-layout. Hoge specificiteit + !important om WC's
   eigen mobiele grid (display:grid op .cart_item) te overrulen. ---- */
@media (max-width: 600px) {
  /* Kaart mag niet clippen */
  .woocommerce-cart .woocommerce table.cart { overflow: visible !important; }
  .woocommerce-cart .woocommerce table.cart,
  .woocommerce-cart .woocommerce table.cart tbody { display: block !important; width: 100% !important; }
  .woocommerce-cart .woocommerce table.cart thead { display: none !important; }

  /* Productregel = 3-koloms grid die niet kan overflowen.
     thumb (col1) naast naam/prijs; onderrij: aantal-regelaar krijgt col1+col2, subtotaal col3. */
  .woocommerce-cart .woocommerce table.cart tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "thumb name   remove"
      "thumb price  price"
      "qty   qty    subtotal" !important;
    column-gap: .7rem !important;
    row-gap: .4rem !important;
    align-items: center;
    padding: 1rem 1.1rem !important;
    border-bottom: 1px solid var(--line);
  }
  .woocommerce-cart .woocommerce table.cart tbody tr.cart_item td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .woocommerce-cart .woocommerce .cart td.product-thumbnail { grid-area: thumb; align-self: start; }
  .woocommerce-cart .woocommerce .cart td.product-thumbnail img { width: 56px !important; height: 56px !important; }
  .woocommerce-cart .woocommerce .cart td.product-name { grid-area: name; align-self: center; font-size: .95rem; }
  .woocommerce-cart .woocommerce .cart td.product-remove { grid-area: remove; justify-self: end; align-self: start; }
  .woocommerce-cart .woocommerce .cart td.product-price { grid-area: price; align-self: center; }
  .woocommerce-cart .woocommerce .cart td.product-quantity { grid-area: qty; justify-self: start; margin-top: .3rem; }
  .woocommerce-cart .woocommerce .cart td.product-subtotal { grid-area: subtotal; justify-self: end; align-self: center; text-align: right !important; margin-top: .3rem; }
  .woocommerce-cart .woocommerce .cart td.product-price::before,
  .woocommerce-cart .woocommerce .cart td.product-subtotal::before {
    content: attr(data-title);
    display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700; margin-bottom: .15rem;
  }
  /* Onderdruk WC's eigen data-title-labels op deze cellen (overbodig "Product:" + losse ":") */
  .woocommerce-cart .woocommerce .cart td.product-name::before,
  .woocommerce-cart .woocommerce .cart td.product-thumbnail::before,
  .woocommerce-cart .woocommerce .cart td.product-remove::before,
  .woocommerce-cart .woocommerce .cart td.product-quantity::before { content: none !important; display: none !important; }

  /* Coupon/actie-rij: full-width, netjes onder elkaar */
  .woocommerce-cart .woocommerce table.cart tbody tr:last-child,
  .woocommerce-cart .woocommerce table.cart td.actions { display: block !important; width: 100% !important; }
  .woocommerce-cart .woocommerce table.cart td.actions .coupon { float: none !important; width: 100% !important; display: flex !important; flex-wrap: wrap; gap: .5rem; }
  .woocommerce-cart .woocommerce #coupon_code { width: 100% !important; box-sizing: border-box; flex: 1 1 100%; }
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .button[name="apply_coupon"] { width: 100% !important; }
}

/* Afrekenen-knop */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block; width: 100%; text-align: center;
  background: var(--grad) !important;
  color: #fff !important;
  font-weight: 700; font-size: .92rem;
  border-radius: var(--pill);
  padding: .9em 1.2em;
  box-shadow: var(--sh-pink);
  transition: opacity .2s, transform .2s;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  opacity: .9; transform: translateY(-2px);
}

/* Generieke Woo-knoppen */
.woocommerce .button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--ink); color: #fff; border-radius: var(--pill);
  font-weight: 700; padding: .8em 1.4em; border: none; transition: transform .2s, background .2s;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: #24233f; transform: translateY(-1px); color: #fff; }
.woocommerce .button.alt, .woocommerce a.button.alt { background: var(--grad); box-shadow: var(--sh-pink); }

/* ============================================================
/* ============================================================
   Checkout — layout + formulier  (VERVANGT volledig fp-checkout-current.css)
   Klassieke WC shortcode-checkout. body.woocommerce-checkout + !important
   verslaat WC core plugin-CSS (die VOOR dit bestand laadt).
   Tokens uit fp.css :root. Geen nieuwe kleuren.
   ============================================================ */

/* ------------------------------------------------------------
   0. NEUTRALISEER ALLE CORE CLEARFIX-PSEUDO'S
   Core zet display:table op .col2-set::before/::after en op ELKE
   .form-row::before/::after. In een grid/flex-container worden die
   anonieme items -> spook-cellen die de layout laten verspringen.
   content:none verwijdert ze volledig (sterker dan display:none).
   ------------------------------------------------------------ */
body.woocommerce-checkout form.checkout::before,
body.woocommerce-checkout form.checkout::after,
body.woocommerce-checkout #customer_details::before,
body.woocommerce-checkout #customer_details::after,
body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after,
body.woocommerce-checkout .form-row::before,
body.woocommerce-checkout .form-row::after {
  content: none !important;
  display: none !important;
}

/* Lege WC custom-elements (order-attribution) zitten los in .col-1,
   .col-2, .additional-fields EN direct in form.checkout -> zou loze
   grid/flex-items worden. Hard uit de flow halen. */
body.woocommerce-checkout wc-order-attribution-inputs {
  display: none !important;
}

/* ------------------------------------------------------------
   1. PAGINA-GRID op form.checkout (formulier links, review rechts)
   grid-template-areas i.p.v. rij-nummers => deterministisch en
   immuun voor onverwachte extra kinderen.
   ------------------------------------------------------------ */
body.woocommerce-checkout form.checkout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px !important;
  grid-template-areas:
    "cust   review-head"
    "cust   review" !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 2.5rem !important;
  row-gap: 0 !important;
  align-items: start !important;
  float: none !important;
  width: 100% !important;
  max-width: var(--maxw, 1240px) !important;
  margin: 0 auto !important;
}

/* Klantvelden-kolom (col2-set) links, intern vol-breed gestapeld.
   Flex-column negeert child-floats vanzelf. */
body.woocommerce-checkout #customer_details {
  grid-area: cust !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  margin: 0 !important;
}
/* col-1 (billing) + col-2 (shipping) hard van float ontdaan, vol-breed.
   Geen 'clear' nodig binnen een flex-column. */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Notes-kaart is een SIBLING van .col-1/.col-2 binnen #customer_details
   (niet in .col-2). Bevestig vol-breed, geen core-clear. */
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: none !important;
  margin: 0 !important;
}

/* Review-heading + review-kaart hard in kolom 2. */
body.woocommerce-checkout form.checkout #order_review_heading {
  grid-area: review-head !important;
  align-self: start !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: var(--ink) !important;
  margin: 0 0 .75rem !important;
}
body.woocommerce-checkout form.checkout #order_review {
  grid-area: review !important;
  align-self: start !important;   /* cruciaal: zonder dit rekt de cel en doet sticky niets */
  position: sticky !important;
  top: 6rem !important;
  float: none !important;
  width: 100% !important;
}

/* Coupon-toggle / info-notices die WC eventueel IN de form rendert:
   over beide kolommen, bovenaan. */
body.woocommerce-checkout form.checkout > .woocommerce-info,
body.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout > .woocommerce-form-login-toggle {
  grid-column: 1 / -1 !important;
}

/* ------------------------------------------------------------
   2. BILLING / SHIPPING / NOTES — elk een witte kaart met kleur-accent
   ------------------------------------------------------------ */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-top: 3px solid var(--pink) !important;
  border-radius: var(--r) !important;
  padding: 1.75rem 2rem !important;
  box-shadow: var(--sh) !important;
}
/* Kaart-koppen (Factuurgegevens / Bestelnotities).
   #ship-to-different-address expliciet UITGESLOTEN — dat is een
   checkbox-toggle, geen kaartkop. */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3:not(#ship-to-different-address),
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: var(--ink) !important;
  margin: 0 0 1.2rem !important;
  padding-bottom: .8rem !important;
  border-bottom: 1.5px solid var(--line) !important;
}

/* ------------------------------------------------------------
   3. FIELD-WRAPPER = FLEX (voornaam+achternaam naast elkaar, rest vol)
   ALTIJD directe-child (>) selectors: geneste .form-rows (in #payment,
   payment_box) blijven ongemoeid. Dit is waarom poging 2 brak.
   ------------------------------------------------------------ */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 1rem !important;
  row-gap: 0 !important;
}
/* Standaard: ELKE form-row vol-breed, core-float/width/padding hard weg.
   padding:0 neutraliseert core's padding:3px die anders (met border-box)
   de calc(50%)-som laat overlopen en wrap triggert. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 0 .9rem !important;
  padding: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* Voornaam + Achternaam delen één rij. Gordel-EN-bretels:
   zowel flex-basis ALS width ALS max-width = 50% - halve gap, zodat
   core's 47% nooit kan terugvallen en sub-pixel-wrap uitblijft. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
  flex: 0 0 calc(50% - .5rem) !important;
  width: calc(50% - .5rem) !important;
  max-width: calc(50% - .5rem) !important;
}

/* ------------------------------------------------------------
   4. INPUT-WRAPPER vol-breed (HOOFDOORZAAK van 'scheef/smal')
   De inline <span.woocommerce-input-wrapper> krijgt nu display:block
   +width:100%, zodat input/select/textarea-100% t.o.v. de form-row
   rekent i.p.v. de krimpende inline-span.
   ------------------------------------------------------------ */
body.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}

/* ------------------------------------------------------------
   5. FORM-ROW labels + inputs
   Label-styling strak gescoped tot adres-rows (>) zodat checkbox- en
   betaal-labels niet ongewenst uppercase worden.
   ------------------------------------------------------------ */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row > label,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row > label,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row > label {
  display: block !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--muted) !important;
  margin-bottom: .35rem !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}
/* screen-reader-only labels (Appartement) echt verbergen zonder de
   layout te verspringen. */
body.woocommerce-checkout .form-row label.screen-reader-text {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}
body.woocommerce-checkout .form-row .required { color: var(--pink) !important; visibility: visible !important; }
body.woocommerce-checkout .form-row .optional { color: var(--faint) !important; font-weight: 400 !important; }
body.woocommerce-checkout .form-row abbr { text-decoration: none !important; color: var(--pink) !important; }

/* ------------------------------------------------------------
   5b. NUCLEAR FIX — form-row als flex-column zodat label ALTIJD
   boven de input staat. De <p> is al een flex-item van de wrapper;
   door hem ook flex-column container te maken zijn zijn kinderen
   (label + woocommerce-input-wrapper) gegarandeerd verticaal gestapeld,
   ongeacht block/inline-eigenaardigheden van de kinderen.
   ------------------------------------------------------------ */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.woocommerce-checkout #customer_details .form-row > label:not(.woocommerce-form__label-for-checkbox),
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row > label {
  display: block !important;
  float: none !important;
  flex-shrink: 0 !important;
  order: 0 !important;
}
body.woocommerce-checkout #customer_details .form-row > .woocommerce-input-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row > .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
  flex: 1 0 auto !important;
  order: 1 !important;
}

/* Inputs / selects / textarea — vol-breed, border-box, huisstijl. */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important;
  padding: .82rem 1rem !important;
  background: var(--surface) !important;
  font-family: inherit !important;
  font-size: .93rem !important;
  line-height: 1.4 !important;
  height: auto !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body.woocommerce-checkout .form-row textarea {
  min-height: 5.5em !important;
  resize: vertical !important;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233, 30, 140, .12) !important;
}
/* Native <select> pijl (kale select, pre-select2). */
body.woocommerce-checkout .form-row select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2367647d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px 8px !important;
  padding-right: 2.5rem !important;
}

/* ------------------------------------------------------------
   5b. select2 / selectWoo (Land/regio wordt live vervangen)
   Zonder dit rendert dit ENE veld smaller = scheef. Match de
   container + selection aan de input-look.
   ------------------------------------------------------------ */
body.woocommerce-checkout .form-row .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto !important;
  min-height: calc(.82rem * 2 + 1.4em) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  padding: .82rem 2.5rem .82rem 1rem !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-size: .93rem !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 1rem !important;
}
body.woocommerce-checkout .select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--focus .select2-selection--single {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233, 30, 140, .12) !important;
}
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected] {
  background: var(--pink) !important;
}

/* ------------------------------------------------------------
   6. VERZENDADRES-toggle (h3#ship-to-different-address)
   Core zet hier float:left/clear op de heading en clears op de
   shipping children -> hard neutraliseren, anders klapt de kolom in.
   ------------------------------------------------------------ */
body.woocommerce-checkout #ship-to-different-address {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  display: block !important;
  margin: 0 0 .25rem !important;
  padding: 0 !important;
  border-bottom: none !important;
}
body.woocommerce-checkout #ship-to-different-address label {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout #ship-to-different-address-checkbox {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--pink) !important;
  flex-shrink: 0 !important;
}
/* Shipping-adresblok + notes: core-clears weg, vol-breed. */
body.woocommerce-checkout .shipping_address {
  clear: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout .checkout .col-2 .form-row-first,
body.woocommerce-checkout .checkout .col-2 .form-row-last,
body.woocommerce-checkout .checkout .col-2 .notes,
body.woocommerce-checkout .form-row.notes {
  clear: none !important;
}
/* Notes-textarea vult zijn wrapper. */
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row.notes {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------------------------
   7. BESTELLING-kaart (#order_review) — sticky rechts
   ------------------------------------------------------------ */
body.woocommerce-checkout #order_review_heading {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: .65rem !important;
  letter-spacing: -.01em !important;
}

body.woocommerce-checkout #order_review {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-top: 3px solid var(--purple) !important;
  border-radius: var(--r) !important;
  padding: 1.5rem !important;
  box-shadow: var(--sh) !important;
  box-sizing: border-box !important;
  align-self: start !important;
}

body.woocommerce-checkout #order_review .shop_table {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 0 .5rem !important;
}

/* thead: duidelijke kolom-headers */
body.woocommerce-checkout #order_review .shop_table thead th {
  font-weight: 700 !important;
  font-size: .78rem !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 0 0 .5rem !important;
  border-bottom: 1.5px solid var(--line-2) !important;
  background: transparent !important;
}
body.woocommerce-checkout #order_review .shop_table thead th.product-total {
  text-align: right !important;
}

/* tbody + tfoot cellen: meer lucht */
body.woocommerce-checkout #order_review .shop_table td,
body.woocommerce-checkout #order_review .shop_table th {
  padding: .75rem 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: .9rem !important;
}

/* product-naam in tbody */
body.woocommerce-checkout #order_review .shop_table tbody .cart_item td.product-name {
  font-weight: 600 !important;
  color: var(--text) !important;
  font-size: .93rem !important;
}

/* quantity badge: gradient pill */
body.woocommerce-checkout #order_review .shop_table .cart_item td.product-name .product-quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--grad) !important;
  color: #fff !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  padding: .1em .45em !important;
  border-radius: var(--pill) !important;
  margin-left: .35rem !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

/* product-total in tbody */
body.woocommerce-checkout #order_review .shop_table tbody .cart_item td.product-total {
  font-weight: 600 !important;
  color: var(--text) !important;
  text-align: right !important;
  font-size: .93rem !important;
  white-space: nowrap !important;
}

/* tfoot basis: leesbaar */
body.woocommerce-checkout #order_review .shop_table tfoot tr th,
body.woocommerce-checkout #order_review .shop_table tfoot tr td {
  font-size: .88rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot tr th {
  font-weight: 500 !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot td {
  text-align: right !important;
  white-space: nowrap !important;
}

/* Verzendcel: PHP-filter verbergt methode-naam, alleen bedrag zichtbaar */
body.woocommerce-checkout #order_review .shop_table tr.shipping td {
  text-align: right !important;
  white-space: nowrap !important;
}

/* order-total rij: groot, vet, gradient tekst */
body.woocommerce-checkout #order_review .shop_table .order-total th,
body.woocommerce-checkout #order_review .shop_table .order-total td {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  border-top: 2px solid var(--line) !important;
  border-bottom: none !important;
  padding-top: 1rem !important;
}
body.woocommerce-checkout #order_review .shop_table .order-total td strong,
body.woocommerce-checkout #order_review .shop_table .order-total td .woocommerce-Price-amount {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

/* Veiligheids-badge: toegevoegd via PHP-hook als <tr> in tfoot */
body.woocommerce-checkout #order_review .shop_table tfoot tr.fp-secure-badge td {
  text-align: center !important;
  font-size: .73rem !important;
  color: var(--muted) !important;
  padding: .55rem 0 .15rem !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: none !important;
}

body.woocommerce-checkout #order_review .woocommerce-Price-amount { white-space: nowrap !important; }

/* ------------------------------------------------------------
   8. BETAALWIJZE-sectie (#payment)
   ------------------------------------------------------------ */
body.woocommerce-checkout #payment {
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 1.25rem !important;
  margin-top: 1rem !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
}

/* Elke betaalmethode = klikbare kaart */
body.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: border-color .18s, box-shadow .18s !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: rgba(233,30,140,.4) !important;
  box-shadow: 0 2px 8px rgba(233,30,140,.09) !important;
}
/* Geselecteerde kaart: roze rand + licht roze achtergrond */
body.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--pink) !important;
  background: #fff0f8 !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,.1) !important;
}
body.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  width: 100% !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  color: var(--text) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: .7rem .9rem !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  accent-color: var(--pink) !important;
}
body.woocommerce-checkout #payment ul.payment_methods li label img {
  max-height: 22px !important;
  width: auto !important;
  float: none !important;
  margin: 0 0 0 auto !important;
  display: block !important;
  flex-shrink: 0 !important;
  filter: grayscale(15%) opacity(.9) !important;
}
body.woocommerce-checkout #payment .payment_box {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: .6rem .9rem !important;
  margin: 0 !important;
  font-size: .82rem !important;
  color: var(--muted) !important;
}
body.woocommerce-checkout #payment .payment_box::before { display: none !important; }

/* Plaats bestelling knop */
body.woocommerce-checkout #payment .place-order {
  margin-top: 1rem !important;
  padding: 0 !important;
}
body.woocommerce-checkout #payment .place-order #place_order {
  float: none !important;
  display: block !important;
  width: 100% !important;
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pill) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  padding: .65em 1.5em !important;
  box-shadow: 0 4px 16px rgba(233,30,140,.25), 0 1px 4px rgba(108,99,255,.15) !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  transition: opacity .18s, box-shadow .18s, transform .12s !important;
}
body.woocommerce-checkout #payment .place-order #place_order:hover {
  opacity: .92 !important;
  box-shadow: 0 6px 22px rgba(233,30,140,.32), 0 2px 8px rgba(108,99,255,.2) !important;
  transform: translateY(-1px) !important;
}
body.woocommerce-checkout #payment .place-order #place_order:active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-size: .72rem !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
  margin-top: .75rem !important;
  text-align: center !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--purple) !important;
  text-decoration: underline !important;
}

/* ------------------------------------------------------------
   9. RESPONSIVE
   <=860px: 1 kolom (review onder formulier, niet meer sticky)
   <=500px: voornaam/achternaam ook gestapeld
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "cust"
      "review-head"
      "review" !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 0 !important;
  }
  body.woocommerce-checkout form.checkout #order_review {
    position: static !important;
    top: auto !important;
    margin-top: 1.5rem !important;
  }
  body.woocommerce-checkout form.checkout #order_review_heading {
    margin-top: 1.5rem !important;
  }
}
@media (max-width: 500px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields {
    padding: 1.25rem 1.1rem !important;
  }
}

/* ---- Checkout / account formulieren (algemeen, ook voor mijn-account) ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account .woocommerce form input {
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: .82rem 1rem; background: #fff; outline: none;
  font-size: .93rem; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--pink); box-shadow: 0 0 0 3px rgba(233,30,140,.1);
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary { flex: 0 0 100% !important; min-width: 0 !important; position: static !important; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .woocommerce div.product form.cart .button { min-width: 0; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ---- Lege winkelwagen ---- */
.fp-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  grid-column: 1 / -1;
}
.fp-cart-empty__icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 1.1rem;
}
.fp-cart-empty__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.fp-cart-empty__sub {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 1.8rem;
}
.fp-cart-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* ---- Product hover: tweede afbeelding ---- */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img.wp-post-image {
  transition: opacity .15s ease;
}

/* ---- Winkelwagen mobiel (< 640px) ---- */
@media (max-width: 640px) {
  /* Schakel de 6-koloms tabel om naar kaart-stijl blokken */
  .woocommerce table.shop_table.cart          { display: block  !important; border: none; box-shadow: none; background: transparent; }
  .woocommerce table.shop_table.cart thead    { display: none   !important; }
  .woocommerce table.shop_table.cart tbody    { display: block  !important; }
  .woocommerce table.shop_table.cart tfoot    { display: block  !important; }

  /* Elke rij = productregel als kaartje */
  .woocommerce table.shop_table.cart tbody tr {
    display: grid !important;
    grid-template-columns: 72px 1fr 36px;
    grid-template-areas:
      "thumb name   remove"
      "thumb qty    sub";
    gap: .35rem .75rem;
    padding: 1rem;
    margin-bottom: .5rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
  }

  .woocommerce table.shop_table.cart td {
    display: block !important;
    border: none  !important;
    padding: 0    !important;
    width: auto   !important;
    text-align: left !important;
    vertical-align: top;
  }

  /* Plaatsing per cel */
  .woocommerce .cart td.product-thumbnail { grid-area: thumb; }
  .woocommerce .cart td.product-name      { grid-area: name;  font-size: .9rem; align-self: center; }
  .woocommerce .cart td.product-remove    { grid-area: remove; text-align: right !important; align-self: start; }
  .woocommerce .cart td.product-quantity  { grid-area: qty;   align-self: center; }
  .woocommerce .cart td.product-subtotal  { grid-area: sub;   text-align: right !important; align-self: center; font-weight: 700; color: var(--pink); }
  .woocommerce .cart td.product-price     { display: none !important; } /* stukprijs verborgen — subtotaal toont het */

  /* Thumbnail afmetingen */
  .woocommerce .cart .product-thumbnail img { width: 64px; height: 64px; }

  /* Tfoot rijen — acties + coupon */
  .woocommerce table.shop_table.cart tfoot tr {
    display: block !important;
    padding: 0; margin: 0;
    border: none; background: transparent; box-shadow: none;
  }

  /* Actie-rij: stapel coupon + update-knop */
  .woocommerce table.cart td.actions {
    display: flex !important;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem !important;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    margin-bottom: .5rem;
    box-shadow: var(--sh-sm);
  }
  .woocommerce table.cart td.actions::after { display: none; } /* clear float */
  .woocommerce table.cart td.actions .coupon {
    float: none !important;
    display: flex !important;
    width: 100%;
    gap: .5rem;
  }
  .woocommerce table.cart td.actions .coupon #coupon_code {
    flex: 1;
    width: auto !important;
    min-width: 0;
  }
  .woocommerce table.cart td.actions .button[name="update_cart"] {
    float: none !important;
    width: 100%;
    text-align: center;
  }
}