/*
 * IdeeFabriek redesign — support stylesheet.
 * Component styling lives in Bricks global classes (ifr-*). This file only
 * carries what a class cannot express: the webfont, no-JS defaults for the
 * USP rotator, and overrides on third-party (WooCommerce / Bricks) markup.
 */

/* ------------------------------------------------------------------ */
/* 0. Design tokens.                                                   */
/*    Bricks holds these as global variables too, but this site has    */
/*    `disableVariablesManager` set (Advanced Themer owns the variable */
/*    manager), so Bricks never prints them. Declaring them here makes */
/*    the ifr-* classes self-sufficient. Keep in sync with the Bricks  */
/*    variables in category "IdeeFabriek Redesign".                    */
/* ------------------------------------------------------------------ */
:root {
  --ifr-navy: #1D2B44;
  --ifr-coral: #F27E5A;
  --ifr-coral-light: #F89B7B;
  --ifr-coral-dark: #E86B45;
  --ifr-cream: #FBF0E4;
  --ifr-cream-light: #FDF7F0;
  --ifr-hairline: #F1E6D8;
  --ifr-peach: #FBE4D6;          /* the peach the category filter already uses */
  --ifr-input-border: #E5DACB;
  --ifr-border-cream: #E9DCCB;
  --ifr-muted: #8A7F73;
  --ifr-body-soft: #5C5347;
  --ifr-placeholder: #A89B8C;
  --ifr-body: #3A3F4A;
  --ifr-green: #3CB371;
  --ifr-green-hover: #2E9A5F;
  --ifr-instock: #2E8B57;
  --ifr-white: #ffffff;
  --ifr-canvas: #EDE6DD;
  --ifr-font: Nunito, Helvetica, Arial, sans-serif;
  --ifr-radius-pill: 999px;
  --ifr-radius-card: 14px;
  --ifr-radius-card-sm: 12px;
  --ifr-radius-input: 10px;
  --ifr-radius-chip: 4px;
  --ifr-radius-badge: 6px;
  --ifr-radius-thumb: 8px;
  --ifr-shadow-header: 0 2px 12px rgba(0,0,0,.08);
  --ifr-shadow-float: 0 1px 6px rgba(0,0,0,.15);
  --ifr-shadow-drawer: 8px 0 30px rgba(0,0,0,.15);
  --ifr-overlay: rgba(29,43,68,.45);
  --ifr-rotate-speed: 6s;
}


/* ------------------------------------------------------------------ */
/* 1. Nunito                                                           */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* 2. USP rotator — pre-JS / no-JS state                               */
/*    Every message is absolutely positioned; without JS only the      */
/*    first should be visible and the timer chips stay blank.          */
/* ------------------------------------------------------------------ */
.ifr-usp__viewport > .ifr-usp__msg,
.ifr-usp__viewport > .ifr-usp__msg--stack {
  visibility: hidden;
  opacity: 0;
}

/* Without JS, fall back to showing the first message only. This must NOT
   apply once the rotator is running, or message 1 stays painted on top of
   whichever message is current. */
html:not(.ifr-js) .ifr-usp__viewport > .ifr-usp__msg:first-child,
html:not(.ifr-js) .ifr-usp__viewport > .ifr-usp__msg--stack:first-child {
  visibility: visible;
  opacity: 1;
}

/* With JS the rotator owns visibility entirely, via data-ifr-state. */
.ifr-usp__viewport > [data-ifr-state="current"] {
  visibility: visible;
  opacity: 1;
}
.ifr-usp__viewport > [data-ifr-state="out"],
.ifr-usp__viewport > [data-ifr-state="next"] {
  visibility: visible;
}

/* A campaign message with no end date is removed by the script; keep it
   out of the flow until the script has had a chance to decide. */
.ifr-usp__viewport > [data-ifr-campaign] {
  display: none;
}
.ifr-js .ifr-usp__viewport > [data-ifr-campaign].ifr-campaign-on {
  display: flex;
}

/* ------------------------------------------------------------------ */
/* 3. Favourites — counters hide at zero (.ifr-fav lives in Bricks)    */
/* ------------------------------------------------------------------ */
[data-ifr-fav-count].ifr-is-zero,
[data-ifr-cart-count].ifr-is-zero { display: none !important; }

/* ------------------------------------------------------------------ */
/* 4. Bricks search element inside our pills                           */
/* ------------------------------------------------------------------ */
/* Neutralise only Bricks own input chrome — the pill itself (background,
   padding, radius) is owned by the ifr-hdr__search / ifr-hdr__mob-search
   global classes, so nothing here may use !important on those. */
.ifr-hdr__search .bricks-search-form,
.ifr-hdr__mob-search .bricks-search-form {
  border: 0 !important;
  box-shadow: none !important;
}
.ifr-hdr__search input[type="search"],
.ifr-hdr__mob-search input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}
.ifr-hdr__search .bricks-search-form button,
.ifr-hdr__mob-search .bricks-search-form button {
  position: static !important;
}

/* ------------------------------------------------------------------ */
/* 5. Mega menu — Bricks writes inline left/min-width on the panel     */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ifr-nav .brxe-dropdown > .brx-dropdown-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* 6. Drawer accordion — Bricks accordion inside the offcanvas         */
/* ------------------------------------------------------------------ */
.ifr-drawer .brxe-accordion-nested { display: block; }
.ifr-drawer .accordion-content-wrapper { padding: 0; }

/* ------------------------------------------------------------------ */
/* 7. Reduced motion                                                   */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ifr-usp__msg,
  .ifr-usp__msg--stack { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* 8. Mini-cart drawer (screen 3a).                                    */
/*    The shell is Bricks elements; the live rows below are rendered   */
/*    by the ifr-minicart plugin as WooCommerce fragments, so their    */
/*    styling has to live here rather than in a global class.          */
/* ------------------------------------------------------------------ */
.ifr-mini__items { display: flex; flex-direction: column; gap: 18px; }

.ifr-mini__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
}
.ifr-mini__thumb img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 10px; display: block; max-width: none;
}
.ifr-mini__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ifr-mini__label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ifr-muted);
}
.ifr-mini__name {
  font-size: 14px; font-weight: 800; color: var(--ifr-navy);
  text-decoration: none; line-height: 1.35;
}
.ifr-mini__name:hover { color: var(--ifr-coral); }
.ifr-mini__side {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 12px; height: 84px;
}
.ifr-mini__remove {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ifr-cream); color: var(--ifr-navy);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 15px; line-height: 1; flex-shrink: 0;
}
.ifr-mini__remove:hover { background: var(--ifr-border-cream); }
.ifr-mini__price { font-size: 15px; font-weight: 800; color: var(--ifr-navy); white-space: nowrap; }
.ifr-mini__empty { padding: 32px 0; text-align: center; font-weight: 700; color: var(--ifr-muted); margin: 0; }

/* quantity stepper */
.ifr-qty {
  display: inline-flex; align-items: center; gap: 2px;
  height: 40px; padding: 0 4px; margin-top: 2px;
  border: 1.5px solid var(--ifr-input-border); border-radius: 20px;
  background: #fff; width: fit-content;
}
.ifr-qty__btn {
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: var(--ifr-cream); color: var(--ifr-navy);
  font: 800 14px/1 Nunito, Helvetica, Arial, sans-serif;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ifr-qty__btn:hover { background: var(--ifr-border-cream); }
.ifr-qty__input {
  width: 34px; border: 0; background: none; text-align: center;
  font: 800 14px Nunito, Helvetica, Arial, sans-serif; color: var(--ifr-navy);
  -moz-appearance: textfield;
}
.ifr-qty__input::-webkit-outer-spin-button,
.ifr-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* free-shipping card */
.ifr-ship__text { margin: 0; font-size: 14px; font-weight: 600; color: var(--ifr-navy); }
.ifr-ship__text strong { font-weight: 800; }

/* cross-sell */
.ifr-crosssell__item { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.ifr-crosssell__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; max-width: none; }
.ifr-crosssell__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ifr-crosssell__name { font-size: 14px; font-weight: 800; color: var(--ifr-navy); text-decoration: none; line-height: 1.3; }
.ifr-crosssell__price { font-size: 13px; font-weight: 800; color: var(--ifr-coral); }
.ifr-crosssell__price del { display: none; }
.ifr-crosssell__add {
  height: 36px; padding: 0 14px; border-radius: 18px; border: 0;
  background: var(--ifr-coral-light); color: var(--ifr-navy);
  font: 800 12px/1 Nunito, Helvetica, Arial, sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ifr-crosssell__add:hover { background: var(--ifr-coral); color: #fff; }
.ifr-crosssell__add.loading { opacity: .6; pointer-events: none; }
.ifr-crosssell__add .added_to_cart { display: none; }

/* footer */
.ifr-mini__checkout { width: 100%; }

/* ------------------------------------------------------------------ */
/* 9. Fragment-only classes.                                           */
/*    Bricks emits a global class only when a Bricks ELEMENT uses it.   */
/*    These appear solely in PHP-rendered cart fragments, so they must  */
/*    be defined here or they arrive unstyled.                         */
/* ------------------------------------------------------------------ */
.ifr-cartdrawer .ifr-ship {
  background: var(--ifr-cream);
  border-radius: 12px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ifr-cartdrawer .ifr-ship__track {
  background: #fff; height: 8px; border-radius: 4px; overflow: hidden; width: 100%; display: block;
}
.ifr-cartdrawer .ifr-ship__fill {
  background: var(--ifr-coral); height: 8px; border-radius: 4px; display: block; transition: width .4s ease;
}

.ifr-cartdrawer .ifr-crosssell {
  background: var(--ifr-cream);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ifr-cartdrawer .ifr-crosssell:empty { display: none; }
.ifr-crosssell__heading {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ifr-muted);
}

/* checkout button — ifr-btn lives in Bricks and is not emitted here */
.ifr-mini__checkout {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; border-radius: 26px;
  background: var(--ifr-green); color: #fff;
  font: 800 13px/1 Nunito, Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; border: 0;
}
.ifr-mini__checkout:hover { background: var(--ifr-green-hover); color: #fff; }

/* subtotal row */

.ifr-mini__foot .ifr-summary__row {
  display: flex !important; align-items: baseline; justify-content: space-between;
  font-size: 16px; font-weight: 800; color: var(--ifr-navy);
}
/* the shortcode wrapper is the second flex item; push it to the right */
.ifr-mini__foot .ifr-summary__row > .brxe-shortcode,
.ifr-mini__foot .ifr-summary__row > [data-ifr-frag="total"] { margin-left: auto; }

/* ------------------------------------------------------------------ */
/* 10. Drawer detail polish                                            */
/* ------------------------------------------------------------------ */
/* Font Awesome is not loaded on the front end, so draw the × ourselves
   instead of shipping an empty circle. */
.ifr-drawer__close::after { content: "\00d7"; font-size: 20px; line-height: 1; }
.ifr-drawer__close svg,
.ifr-drawer__close i { display: none; }

.ifr-mini__label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ifr-mini__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ifr-mini__side { align-items: flex-end; }
.ifr-mini__price { margin-top: auto; }

/* ------------------------------------------------------------------ */
/* 11. Cart count badge (PHP fragment).                                */
/*     Bricks compiles typed controls to `.class.brxe-<element>`, so a  */
/*     global class only styles Bricks elements of that type — markup   */
/*     we render ourselves gets the _cssCustom half and nothing else.   */
/*     Style the badge fully here.                                     */
/* ------------------------------------------------------------------ */
.ifr-hdr__icon > .brxe-shortcode,
.ifr-hdr__mob-icon > .brxe-shortcode { position: static; line-height: 0; }

[data-ifr-frag="count"] {
  position: absolute;
  top: -10px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  border: 2px solid #fff;
  box-sizing: border-box;
  background: var(--ifr-green);
  color: #fff;
  font: 800 12px/1 Nunito, Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ifr-hdr__mob-icon [data-ifr-frag="count"] {
  top: -10px; right: -8px; min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px;
}
[data-ifr-frag="count"][hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* 12. Favourites page (/favorieten/)                                  */
/* ------------------------------------------------------------------ */
.ifr-favs__empty { padding: 40px 0; text-align: center; font-weight: 700; color: var(--ifr-muted); }
.ifr-favs__loading { padding: 40px 0; text-align: center; font-weight: 700; color: var(--ifr-muted); }

/* ------------------------------------------------------------------ */
/* 13. WooCommerce notices                                             */
/*     Only the "<product> verwijderd. Ongedaan maken?" messages are    */
/*     suppressed — errors and other info still show, so a bad coupon   */
/*     or an out-of-stock item is never silently swallowed.            */
/* ------------------------------------------------------------------ */
.woocommerce-message:has(a.restore-item) { display: none !important; }
.woocommerce-notices-wrapper:not(:has(*)) { display: none !important; }

/* ------------------------------------------------------------------ */
/* 14. Checkout form rows                                              */
/*     WooCommerce puts the checkbox INSIDE its label, and wraps some   */
/*     of them in an <h3>. Without this the label collapses into a      */
/*     narrow column beside the box and overlaps the next field.        */
/* ------------------------------------------------------------------ */
.ifr-form .woocommerce-billing-fields__field-wrapper,
.ifr-form .woocommerce-shipping-fields__field-wrapper,
.ifr-form .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  align-items: flex-start;
}

.ifr-form .form-row,
.ifr-form p.form-row {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  float: none !important;
  width: 100% !important;
}

/* Woo's own two-up rows */
/* In a flex-wrap container a width alone still shrinks; pin the basis too. */
.ifr-form .form-row.form-row-first,
.ifr-form .form-row.form-row-last {
  width: calc(50% - 6px) !important;
  flex: 0 0 calc(50% - 6px) !important;
}
.ifr-form .form-row.form-row-wide,
.ifr-form .form-row.notes {
  width: 100% !important;
  flex: 0 0 100% !important;
}
@media (max-width: 575px) {
  .ifr-form .form-row.form-row-first,
  .ifr-form .form-row.form-row-last { width: 100% !important; flex: 0 0 100% !important; }
}
@media (max-width: 575px) {
  .ifr-form .form-row-first,
  .ifr-form .form-row-last { width: 100% !important; margin-right: 0; }
}

/* Checkbox rows. Two shapes exist here:
     - Woo: <h3 id="ship-to-different-address"><label class="…checkbox"><input><span>
     - the company plugin: <h3 class="…checkbox"><label><input><span>
   so reset the h3 completely and lay the inner <label> out as the row. */
.ifr-form #company_fields,
.ifr-form #ship-to-different-address,
.ifr-form h3.woocommerce-form__label-for-checkbox {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 0 12px !important;
}
.ifr-form #company_fields { display: flex !important; flex-direction: column; gap: 12px; width: 100%; }
.ifr-form #company_fields > h3 { margin: 0 !important; }

.ifr-form #company_fields > h3 > label,
.ifr-form #ship-to-different-address > label,
.ifr-form h3.woocommerce-form__label-for-checkbox > label,
.ifr-form label.checkbox,
.ifr-form .woocommerce-form__label-for-checkbox,
.ifr-review .woocommerce-form__label-for-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ifr-navy);
  cursor: pointer;
}
.ifr-form input[type="checkbox"],
.ifr-review input[type="checkbox"] {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--ifr-coral);
  appearance: auto;
}
.ifr-form label span { flex: 1; min-width: 0; }

/* fields the design does not show, kept in the DOM for validation/autofill */
.ifr-form .form-row.ifr-hidden,
.ifr-form .ifr-hidden { display: none !important; }

/* group headings injected as Woo fields */
.ifr-form .form-row.ifr-headrow { width: 100% !important; display: block !important; margin: 22px 0 4px !important; }
.ifr-form .ifr-form__heading {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ifr-coral);
}
.ifr-form .woocommerce-billing-fields > h3,
.ifr-form .woocommerce-additional-fields > h3 { display: none; }

/* ------------------------------------------------------------------ */
/* 15. Place-order row                                                 */
/*     Terms above, full-width button below — never side by side.       */
/* ------------------------------------------------------------------ */
.ifr-review .form-row.place-order,
.ifr-review .place-order {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px;
  width: 100% !important;
  float: none !important;
  padding: 0;
  margin: 4px 0 0;
}
.ifr-review .woocommerce-terms-and-conditions-wrapper { width: 100%; margin: 0; }
.ifr-review .validate-required { width: 100%; }
.ifr-review #place_order { position: static !important; float: none !important; }
.ifr-review .woocommerce-privacy-policy-text p { font-size: 12px; color: var(--ifr-muted); }

/* ------------------------------------------------------------------ */
/* 16. Order review panel (screen 3c).                                 */
/*     WooCommerce's review table draws borders on every row and makes  */
/*     the product name a heavy multi-line link, with item meta (the    */
/*     personalisation fields) rendered as bold body text. Strip it     */
/*     back to the design: no rules except above the totals, a compact  */
/*     two-line name, and quiet meta.                                  */
/* ------------------------------------------------------------------ */
.ifr-review table.shop_table,
.ifr-review table.shop_table tr,
.ifr-review table.shop_table th,
.ifr-review table.shop_table td { border: 0 !important; }

/* the design has no PRODUCT / SUBTOTAAL header */
.ifr-review table.shop_table thead { display: none; }

.ifr-review .cart_item td {
  padding: 12px 0 !important;
  vertical-align: top;
  border-bottom: 1px solid var(--ifr-hairline) !important;
}
.ifr-review .cart_item:last-child td { border-bottom: 0 !important; }

.ifr-review .cart_item img {
  width: 56px !important; height: 56px !important;
  object-fit: cover; border-radius: 8px; float: left; margin: 0 12px 0 0;
}

.ifr-review .cart_item .product-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: var(--ifr-navy);
  text-align: left;
}
.ifr-review .cart_item .product-name > a {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ifr-navy);
  text-decoration: none;
}
/* clamp the name to two lines, but never a link that wraps the thumbnail */
.ifr-review .cart_item .product-name > a:not(:has(img)) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ifr-review .cart_item .product-name > a:has(img) { display: block; }
.ifr-review .cart_item .product-name > a img { float: left; margin: 0 12px 0 0; }
.ifr-line__label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ifr-muted);
  margin-bottom: 2px;
}
.ifr-review .product-quantity,
.ifr-review .cart_item .product-name .quantity {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ifr-muted) !important;
  margin-top: 2px;
}

/* personalisation / variation meta: quiet, never bold body copy */
.ifr-review .variation,
.ifr-review .wc-item-meta,
.ifr-review .cart_item dl {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.45;
  color: var(--ifr-muted) !important;
}
.ifr-review .variation dt,
.ifr-review .wc-item-meta strong,
.ifr-review .wc-item-meta .wc-item-meta-label {
  font-weight: 700 !important;
  color: var(--ifr-muted) !important;
  display: inline;
  float: none;
  margin: 0 4px 0 0;
}
.ifr-review .variation dd,
.ifr-review .wc-item-meta li { display: inline; margin: 0; }
.ifr-review .variation dd p,
.ifr-review .wc-item-meta li p { display: inline; margin: 0; }
.ifr-review .wc-item-meta { list-style: none; padding: 0; }

.ifr-review .cart_item .product-total { font-size: 14px !important; font-weight: 800 !important; white-space: nowrap; }

/* totals block */
.ifr-review .cart-subtotal th,
.ifr-review .cart-subtotal td,
.ifr-review .shipping th,
.ifr-review .shipping td,
.ifr-review tr.fee th,
.ifr-review tr.fee td { font-size: 14px !important; font-weight: 700 !important; padding: 6px 0 !important; }
.ifr-review .shipping td,
.ifr-review .cart-subtotal td { color: var(--ifr-navy); }

.ifr-review .order-total th,
.ifr-review .order-total td {
  border-top: 1px solid var(--ifr-border-cream) !important;
  padding-top: 14px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
.ifr-review .order-total small,
.ifr-review .includes_tax,
.ifr-review .tax_label {
  display: block;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ifr-muted) !important;
  white-space: normal;
}

/* terms checkbox gets the coral box from the design */
.ifr-review input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--ifr-coral) !important;
  border-radius: 6px;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.ifr-review input[type="checkbox"]:checked { background: var(--ifr-coral) !important; }
.ifr-review input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ */
/* 17. Cart page (screen 3b)                                           */
/* ------------------------------------------------------------------ */
/* WooCommerce's actions cell holds TWO things: a coupon form that duplicates
   our own block, and the "Update winkelwagen" button. Hiding the whole cell
   took the button with it. Hide just the coupon; keep the button, which is
   how a customer commits a quantity change without JavaScript. */
.ifr-cart__items .actions { display: table-cell !important; padding: 16px 0 0 !important; border: 0 !important; text-align: right; }
.ifr-cart__items .actions .coupon { display: none !important; }
.ifr-cart__items .actions button[name="update_cart"] {
  display: inline-block;
  height: 44px; padding: 0 22px;
  border: 1.5px solid var(--ifr-input-border); border-radius: 22px;
  background: #fff; color: var(--ifr-navy);
  font: 800 13px/1 Nunito, Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.ifr-cart__items .actions button[name="update_cart"]:hover:not([disabled]) { background: var(--ifr-cream); }
/* WooCommerce disables it until a quantity actually changes — same as live */
.ifr-cart__items .actions button[name="update_cart"][disabled] { opacity: .45; cursor: default; }

/* the design's table is PRODUCT / AANTAL / SUBTOTAAL — no unit price */
.ifr-cart__items th.product-price,
.ifr-cart__items td.product-price { display: none !important; }

.ifr-cart__items table { border-collapse: collapse; }
.ifr-cart__items tbody td { border-bottom: 1px solid var(--ifr-hairline) !important; }
.ifr-cart__items thead th { border-bottom: 1px solid var(--ifr-hairline) !important; }

.ifr-cart__items .product-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.ifr-cart__items .product-name > a {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ifr-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* personalisation meta, quiet like the design */
.ifr-cart__items .variation,
.ifr-cart__items .wc-item-meta,
.ifr-cart__items dl.variation {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.45;
  color: var(--ifr-muted) !important;
  list-style: none;
  padding: 0;
}
.ifr-cart__items .variation dt,
.ifr-cart__items .wc-item-meta strong,
.ifr-cart__items .wc-item-meta .wc-item-meta-label {
  font-weight: 700 !important; color: var(--ifr-muted) !important;
  display: inline; float: none; margin: 0 4px 0 0;
}
.ifr-cart__items .variation dd,
.ifr-cart__items .wc-item-meta li { display: inline; margin: 0; }
.ifr-cart__items .variation dd p,
.ifr-cart__items .wc-item-meta li p { display: inline; margin: 0; }

/* ---- totals panel ---- */
/* the panel has its own heading, so drop WooCommerce's second one */
.ifr-summary .cart_totals > h2 { display: none; }
.ifr-summary table { width: 100%; border-collapse: collapse; }
.ifr-summary th,
.ifr-summary td {
  border: 0 !important;
  padding: 8px 0 !important;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: var(--ifr-navy);
}
.ifr-summary td { text-align: right; }
.ifr-summary .order-total th,
.ifr-summary .order-total td {
  border-top: 1px solid var(--ifr-border-cream) !important;
  padding-top: 14px !important;
  font-size: 22px;
  font-weight: 800;
}
.ifr-summary .includes_tax,
.ifr-summary .order-total small {
  display: block; font-size: 11px; font-weight: 600; color: var(--ifr-muted);
}
/* shipping row: one line, no stray destination paragraph */
.ifr-summary .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.ifr-summary .woocommerce-shipping-methods li { display: flex; justify-content: flex-end; gap: 8px; text-align: right; }
.ifr-summary .woocommerce-shipping-methods label { font-weight: 700; }
.ifr-summary .woocommerce-shipping-destination { display: none; }
.ifr-summary .shipping-calculator-button { font-size: 12px; font-weight: 700; color: var(--ifr-coral); }
.ifr-summary .woocommerce-shipping-totals th { vertical-align: top; }

/* ------------------------------------------------------------------ */
/* 18. Coupon (cart + checkout)                                        */
/*     The checkout toggle ships as a full-width bright green banner;   */
/*     quiet it down to a cream row with a coral link.                 */
/* ------------------------------------------------------------------ */
.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout .woocommerce-form-coupon-toggle .woocommerce-message {
  background: var(--ifr-cream) !important;
  color: var(--ifr-navy) !important;
  border: 0 !important;
  border-radius: 12px;
  padding: 14px 18px !important;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-form-coupon-toggle .showcoupon {
  margin-left: auto;
  background: none !important;
  color: var(--ifr-coral) !important;
  font-weight: 800;
  text-decoration: underline;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
  font-size: 13px !important;
}
form.checkout_coupon {
  border: 1.5px solid var(--ifr-input-border) !important;
  border-radius: 12px;
  padding: 16px !important;
  margin: 0 0 20px !important;
  background: #fff;
}

/* ------------------------------------------------------------------ */
/* 19. Cart page — final alignment + the pieces that live outside the   */
/*     drawer, so they cannot rely on .ifr-cartdrawer scoping.         */
/* ------------------------------------------------------------------ */
.ifr-cart__items th,
.ifr-cart__items td { text-align: left !important; }
.ifr-cart__items .product-name,
.ifr-cart__items .product-name > a { text-align: left !important; }
.ifr-cart__items th.product-subtotal,
.ifr-cart__items td.product-subtotal { text-align: right !important; }
.ifr-cart__items th.product-quantity,
.ifr-cart__items td.product-quantity { text-align: center !important; }

/* free-shipping card is used on the cart page too, not only in the drawer */
.ifr-ship {
  background: var(--ifr-cream);
  border-radius: 12px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ifr-ship__track { background: #fff; height: 8px; border-radius: 4px; overflow: hidden; width: 100%; display: block; }
.ifr-ship__fill { background: var(--ifr-coral); height: 8px; border-radius: 4px; display: block; transition: width .4s ease; }

/* "Doorgaan naar afrekenen" — Woo renders a plain <a class="checkout-button"> */
.ifr-summary .checkout-button,
.ifr-summary a.checkout-button,
.ifr-summary .wc-proceed-to-checkout a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 52px;
  border-radius: 26px;
  background: var(--ifr-green) !important;
  color: #fff !important;
  font: 800 13px/1 Nunito, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  margin: 6px 0 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
}
.ifr-summary .checkout-button:hover { background: var(--ifr-green-hover) !important; }
.ifr-summary .wc-proceed-to-checkout { padding: 0 !important; margin: 0 !important; }

/* stepper reads − 1 + like the design */
.ifr-cart__items .quantity { display: inline-flex !important; align-items: center; }
.ifr-cart__items .quantity .bricks-quantity-minus { order: -1; }
.ifr-cart__items .quantity input { order: 0; }
.ifr-cart__items .quantity .bricks-quantity-plus { order: 1; }

/* ------------------------------------------------------------------ */
/* 20. Favourites page cards (PHP-rendered).                           */
/*     No Bricks element on the favourites page uses the ifr-card or   */
/*     ifr-grid classes, so Bricks emits none of their CSS - it has to  */
/*     live here.                                                      */
/* ------------------------------------------------------------------ */
.ifr-favs .ifr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 991px) { .ifr-favs .ifr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 575px) { .ifr-favs .ifr-grid { grid-template-columns: minmax(0, 1fr); } }

.ifr-favs .ifr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.ifr-favs .ifr-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
}
.ifr-favs .ifr-card__media img,
.ifr-favs .ifr-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ifr-favs .ifr-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--ifr-coral); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 6px; line-height: 1;
}
.ifr-favs .ifr-card__fav { position: absolute; top: 10px; right: 10px; z-index: 3; }
.ifr-favs .ifr-card__label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ifr-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ifr-favs .ifr-card__name {
  font-size: 16px; font-weight: 800; color: var(--ifr-navy);
  text-decoration: none; display: block; line-height: 1.35;
}
.ifr-favs .ifr-card__name:hover { color: var(--ifr-coral); }
.ifr-favs .ifr-card__prices {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 16px; font-weight: 800; color: var(--ifr-navy);
}
.ifr-favs .ifr-card__prices del { color: var(--ifr-placeholder); font-weight: 600; font-size: 14px; }
.ifr-favs .ifr-card__prices ins { text-decoration: none; color: var(--ifr-coral); font-weight: 800; }
.ifr-favs .ifr-card__cta { margin-top: auto; }
.ifr-favs .ifr-card__cta a {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: 23px; padding: 0 16px;
  background: var(--ifr-coral-light); color: var(--ifr-navy);
  font: 800 13px/1 Nunito, Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; text-align: center;
}
.ifr-favs .ifr-card__cta a:hover { background: var(--ifr-coral); color: #fff; }
.ifr-favs .ifr-card__cta .added_to_cart { display: none; }

/* the heart itself, for pages with no Bricks element carrying .ifr-fav */
.ifr-favs .ifr-fav,
.ifr-fav {
  width: 40px; height: 40px;
  border: 0; padding: 0; cursor: pointer;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ifr-shadow-float);
  transition: transform .15s ease;
}
.ifr-fav:active { transform: scale(.9); }
.ifr-fav svg { width: 21px; height: 21px; display: block; }
.ifr-fav svg path {
  /* Bricks inlines the uploaded SVG file, which carries style="fill:none;stroke:#000"
     on the path. An inline style outranks any selector, so these need !important
     or the heart never fills when pressed. */
  fill: none !important; stroke: var(--ifr-navy) !important; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: fill .15s ease, stroke .15s ease;
}
.ifr-fav[aria-pressed="true"] svg path { fill: var(--ifr-coral) !important; stroke: var(--ifr-coral) !important; }

/* WooCommerce prints an accessible price sentence next to the figures;
   keep it for screen readers, out of the visual flow. */
.ifr-favs .screen-reader-text,
.ifr-card__prices .screen-reader-text,
.ifr-review .screen-reader-text,
.ifr-cart__items .screen-reader-text,
.ifr-pdp__price .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* ------------------------------------------------------------------ */
/* 21. Product gallery (screens 1d / 2b).                              */
/*     The classic WooCommerce stylesheet is NOT enqueued on this site, */
/*     so FlexSlider's runtime markup arrives completely unstyled - the  */
/*     nav renders as a "Previous / Next" bullet list. Draw it here.    */
/* ------------------------------------------------------------------ */
.ifr-pdp__gallery .woocommerce-product-gallery { position: relative; }
.ifr-pdp__gallery .flex-viewport { position: relative; }
.ifr-pdp__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.ifr-pdp__gallery .woocommerce-product-gallery__image img { border-radius: 14px; display: block; width: 100%; }

/* main-image arrows */
.ifr-pdp__gallery .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.ifr-pdp__gallery .flex-direction-nav li { position: static; margin: 0; }
.ifr-pdp__gallery .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ifr-shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  overflow: hidden;
  text-indent: -9999px;
  opacity: 1;
}
.ifr-pdp__gallery .flex-direction-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  text-indent: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 18px/1 Nunito, Helvetica, Arial, sans-serif;
  color: var(--ifr-navy);
}
.ifr-pdp__gallery .flex-direction-nav .flex-prev { left: 12px; }
.ifr-pdp__gallery .flex-direction-nav .flex-next { right: 12px; }
.ifr-pdp__gallery .flex-direction-nav .flex-prev::after { content: "\2039"; }
.ifr-pdp__gallery .flex-direction-nav .flex-next::after { content: "\203A"; }
.ifr-pdp__gallery .flex-direction-nav .flex-disabled { opacity: .35; }

/* thumbnails */
/* One row whatever the image count: a fixed 5-column grid orphans the
   6th thumbnail onto a second row. Auto columns keep them on one line and
   scroll horizontally once they would get too small. */
.ifr-pdp__gallery .flex-control-nav,
.ifr-pdp__gallery .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(64px, 1fr) !important;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0 0 4px;
  list-style: none;
  position: static;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.ifr-pdp__gallery .flex-control-thumbs::-webkit-scrollbar { height: 4px; }
.ifr-pdp__gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
  background: var(--ifr-border-cream); border-radius: 2px;
}
.ifr-pdp__gallery .flex-control-thumbs li { margin: 0; width: auto; float: none; }
.ifr-pdp__gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  opacity: 1;
  cursor: pointer;
}
.ifr-pdp__gallery .flex-control-thumbs .flex-active,
.ifr-pdp__gallery .flex-control-thumbs img.flex-active {
  outline: 2px solid var(--ifr-coral);
  outline-offset: -2px;
  border-radius: 8px;
}

/* the custom product-video item: navy play badge over its thumbnail */
.ifr-pdp__gallery .video-thumb { position: relative; }
.ifr-pdp__gallery .video-thumb .ifbr-video-link { display: block; position: relative; }
.ifr-pdp__gallery .ifbr-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ifr-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ifr-pdp__gallery .ifbr-video-play-icon::before {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.ifr-pdp__gallery .video-thumb iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }

/* ------------------------------------------------------------------ */
/* 22. Related products ("Misschien vind je dit ook leuk").            */
/*     Bricks renders WooCommerce's stock loop, and with the classic    */
/*     Woo stylesheet absent it arrives as oversized headings and grey  */
/*     default buttons. Bring it in line with the ifr card.            */
/* ------------------------------------------------------------------ */
.brxe-product-related ul.products,
.brxe-product-upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991px) {
  .brxe-product-related ul.products,
  .brxe-product-upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
}
@media (max-width: 575px) {
  .brxe-product-related ul.products,
  .brxe-product-upsells ul.products { grid-template-columns: minmax(0, 1fr) !important; }
}

.brxe-product-related ul.products li.product,
.brxe-product-upsells ul.products li.product {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  text-align: left;
}
.brxe-product-related li.product img,
.brxe-product-upsells li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0 0 2px;
}
.brxe-product-related li.product .woocommerce-loop-product__title,
.brxe-product-upsells li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.35;
  color: var(--ifr-navy);
  margin: 0;
  padding: 0;
}
.brxe-product-related li.product .price,
.brxe-product-upsells li.product .price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ifr-navy);
  margin: 0;
}
.brxe-product-related li.product .price del,
.brxe-product-upsells li.product .price del {
  color: var(--ifr-placeholder); font-weight: 600; font-size: 14px; margin-right: 6px;
}
.brxe-product-related li.product .price ins,
.brxe-product-upsells li.product .price ins {
  text-decoration: none; color: var(--ifr-coral); font-weight: 800;
}
.brxe-product-related li.product .button,
.brxe-product-upsells li.product .button {
  margin-top: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 23px;
  padding: 0 16px;
  background: var(--ifr-coral-light) !important;
  color: var(--ifr-navy) !important;
  font: 800 13px/1 Nunito, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  border: 0 !important;
  text-align: center;
}
.brxe-product-related li.product .button:hover,
.brxe-product-upsells li.product .button:hover { background: var(--ifr-coral) !important; color: #fff !important; }
.brxe-product-related li.product .added_to_cart,
.brxe-product-upsells li.product .added_to_cart { display: none; }
.brxe-product-related li.product .screen-reader-text,
.brxe-product-upsells li.product .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* ------------------------------------------------------------------ */
/* 23. Product loop card extras (heart, label, sale badge).            */
/* ------------------------------------------------------------------ */
.brxe-product-related ul.products li.product,
.brxe-product-upsells ul.products li.product,
.brxe-woocommerce-products ul.products li.product {
  position: relative;
  height: 100%;
}

.ifr-loop__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.ifr-loop__label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ifr-muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WooCommerce's own sale flash, restyled to the design's badge */
.brxe-product-related li.product .onsale,
.brxe-product-upsells li.product .onsale,
.brxe-woocommerce-products li.product .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--ifr-coral);
  color: #fff;
  font: 800 11px/1 Nunito, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* keep the product title tidy so the CTAs line up across the row */
.brxe-product-related li.product .woocommerce-loop-product__title,
.brxe-product-upsells li.product .woocommerce-loop-product__title,
.brxe-woocommerce-products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the loop link must not swallow the whole card height */
.brxe-product-related li.product > a.woocommerce-LoopProduct-link,
.brxe-product-upsells li.product > a.woocommerce-LoopProduct-link,
.brxe-woocommerce-products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* 24. Mini-cart footer alignment.                                     */
/*     The subtotal amount comes from a shortcode, so the row's two     */
/*     children are a <span> and a .brxe-shortcode wrapper — force the  */
/*     split, and centre the trailing link and payment icons.          */
/* ------------------------------------------------------------------ */
.ifr-mini__foot .ifr-summary__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100%;
  font-size: 16px;
  font-weight: 800;
  color: var(--ifr-navy);
}
.ifr-mini__foot .ifr-summary__row > * { margin: 0; }
.ifr-mini__foot .ifr-summary__row > .brxe-shortcode,
.ifr-mini__foot .ifr-summary__row > [data-ifr-frag="total"] {
  margin-left: auto !important;
  display: block !important;
  white-space: nowrap;
  text-align: right;
}

.ifr-mini__foot .ifr-mini__note { text-align: left; margin: 0; }

.ifr-mini__viewcart {
  text-align: center !important;
  display: block;
  width: 100%;
  margin: 2px 0 0;
}

.ifr-mini__foot .ifr-pay {
  justify-content: center !important;
  width: 100%;
  margin-top: 2px;
}

/* Cross-sell row: 1fr must be minmax(0,1fr) or a long product name refuses
   to shrink and wraps a word per line next to the button. */
.ifr-crosssell__item {
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 10px;
}
.ifr-crosssell__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}
.ifr-crosssell__add {
  white-space: nowrap;
  padding: 0 12px;
  font-size: 11px;
  height: 34px;
}

/* ------------------------------------------------------------------ */
/* 25. Quantity stepper — real markup is                               */
/*     <div class="quantity"><input><span class="action minus"><span    */
/*     class="action plus">, so the number renders first. Reorder to    */
/*     the design's  −  1  +  and give it the pill.                    */
/* ------------------------------------------------------------------ */
.ifr-cart__items .quantity,
.ifr-pdp__buy .quantity {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 6px;
  border: 1.5px solid var(--ifr-input-border);
  border-radius: 22px;
  background: #fff;
  width: auto !important;
}
.ifr-pdp__buy .quantity { height: 52px; border-radius: 26px; }

.ifr-cart__items .quantity .action.minus,
.ifr-pdp__buy .quantity .action.minus { order: -1; }
.ifr-cart__items .quantity input.qty,
.ifr-pdp__buy .quantity input.qty { order: 0; }
.ifr-cart__items .quantity .action.plus,
.ifr-pdp__buy .quantity .action.plus { order: 1; }

.ifr-cart__items .quantity .action,
.ifr-pdp__buy .quantity .action {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ifr-cream);
  color: var(--ifr-navy);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 28px;
  padding: 0;
}
.ifr-pdp__buy .quantity .action { width: 34px; height: 34px; flex-basis: 34px; }
.ifr-cart__items .quantity .action:hover,
.ifr-pdp__buy .quantity .action:hover { background: var(--ifr-border-cream); }
.ifr-cart__items .quantity .action svg,
.ifr-pdp__buy .quantity .action svg { width: 14px; height: 14px; display: block; }

.ifr-cart__items .quantity input.qty,
.ifr-pdp__buy .quantity input.qty {
  width: 42px !important;
  min-width: 0;
  height: auto !important;
  border: 0 !important;
  background: none !important;
  text-align: center;
  font: 800 14px Nunito, Helvetica, Arial, sans-serif !important;
  color: var(--ifr-navy);
  padding: 0 !important;
  -moz-appearance: textfield;
}
.ifr-cart__items .quantity input.qty::-webkit-outer-spin-button,
.ifr-cart__items .quantity input.qty::-webkit-inner-spin-button,
.ifr-pdp__buy .quantity input.qty::-webkit-outer-spin-button,
.ifr-pdp__buy .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ifr-cart__items .quantity .screen-reader-text,
.ifr-pdp__buy .quantity .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* payment icons in the cart summary, centred like the mini-cart */
.ifr-summary .ifr-pay { justify-content: center !important; width: 100%; }

/* ------------------------------------------------------------------ */
/* 26. Checkout review: strip container chrome, keep the payment cards. */
/*     WooCommerce wraps the terms + place-order in several boxes that   */
/*     carry their own border/background. The payment method borders    */
/*     live on li.wc_payment_method and are untouched by this.          */
/* ------------------------------------------------------------------ */
.ifr-review #payment,
.ifr-review .woocommerce-checkout-payment,
.ifr-review .place-order,
.ifr-review .form-row.place-order,
.ifr-review .woocommerce-terms-and-conditions-wrapper,
.ifr-review .woocommerce-terms-and-conditions,
.ifr-review .woocommerce-privacy-policy-text,
.ifr-review p.form-row.validate-required {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* the required marker is a sibling span inside the label; without this it
   takes an equal flex share and drifts to the far right */
.ifr-review .woocommerce-form__label-for-checkbox > span { flex: 0 0 auto; }
.ifr-review .woocommerce-terms-and-conditions-checkbox-text {
  flex: 1 1 auto !important;
  min-width: 0;
}
.ifr-review .woocommerce-form__label-for-checkbox > span.required,
.ifr-review abbr.required {
  flex: 0 0 auto !important;
  margin-left: 2px;
  color: var(--ifr-coral);
  border: 0;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* 27. Mini-cart panel geometry.                                       */
/*     Bricks' own offcanvas rule pins the inner to 300px and sets      */
/*     align-items:flex-start, so children size to their content — the  */
/*     header came out narrower than the body and the rows clipped on   */
/*     small screens. Own the geometry and stretch every child.        */
/* ------------------------------------------------------------------ */
.ifr-cartdrawer .brx-offcanvas-inner {
  width: min(390px, 100%) !important;
  max-width: 100% !important;
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}
.ifr-cartdrawer .brx-offcanvas-inner > * { width: 100% !important; max-width: 100%; }

.ifr-mini__head,
.ifr-mini__body,
.ifr-mini__foot { width: 100% !important; }

/* shortcode wrappers are flex items; let them fill the row */
.ifr-mini__body > .brxe-shortcode,
.ifr-mini__body > * { width: 100%; max-width: 100%; }

/* rows must never push past the panel */
.ifr-mini__item {
  grid-template-columns: 84px minmax(0, 1fr) auto !important;
  column-gap: 12px;
  max-width: 100%;
}
.ifr-mini__info { min-width: 0; }
.ifr-mini__price { white-space: nowrap; }

@media (max-width: 420px) {
  .ifr-mini__item {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    column-gap: 10px;
  }
  .ifr-mini__thumb img { width: 64px !important; height: 64px !important; }
  .ifr-mini__body,
  .ifr-mini__foot { padding-left: 14px !important; padding-right: 14px !important; }
  .ifr-mini__head { padding-left: 14px !important; padding-right: 14px !important; }
  .ifr-qty { height: 34px; }
  .ifr-qty__btn { width: 24px; height: 24px; }
  .ifr-qty__input { width: 28px; }
}

/* the header is a direct child of the inner, so the width:100% rule above
   must not cascade to its own children or the close button wraps */
.ifr-mini__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.ifr-mini__head > * { width: auto !important; flex: 0 0 auto; }
.ifr-mini__head > .brxe-shortcode { flex: 1 1 auto; min-width: 0; }
.ifr-mini__head [data-ifr-frag="title"] { white-space: nowrap; }

/* Bricks ships the offcanvas inner as flex-wrap:wrap. On a short viewport the
   head+body column overflows the panel height and the footer wraps into a
   SECOND column, off-screen to the right. Pin the three rows into one column
   and let the item list take the scroll instead. */
.ifr-cartdrawer .brx-offcanvas-inner {
  flex-wrap: nowrap !important;
  /* Height is Bricks own: calc(var(--bricks-vh,1vh)*100), kept in sync with the
     VISIBLE viewport by bricksSetVh() on load and resize. Never override it with
     height:100% - a fixed element resolves that against the layout viewport, which
     on mobile is taller than the screen while the URL bar is shown, so the footer
     lands below the fold. Keep the inner scrollable as a safety net: the drawer
     sets data-no-scroll, so body{overflow:hidden} and this is the only escape. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
@supports (height: 100dvh) {
  .ifr-cartdrawer .brx-offcanvas-inner { height: 100dvh !important; }
}
.ifr-mini__head, .ifr-mini__foot { flex: 0 0 auto !important; }
.ifr-mini__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 29. Order-review table on very narrow screens.
   Woo's shop_table is auto-layout, so a long product name sets a min-content
   width the 320px viewport cannot honour and the table overflows. */
@media (max-width: 575px) {
  .ifr-order table.shop_table { table-layout: fixed; width: 100%; }
  .ifr-order table.shop_table th,
  .ifr-order table.shop_table td.product-name { overflow-wrap: anywhere; word-break: break-word; }
  .ifr-order table.shop_table td.product-total,
  .ifr-order table.shop_table .cart-subtotal td,
  .ifr-order table.shop_table .order-total td { width: 88px; white-space: nowrap; }
  .ifr-order .cart_item img { width: 48px; height: 48px; }
}

/* 30. Category filter off-canvas.
   Its own stylesheet sets .if-off-canvas-filter__content{position:relative} at
   (0,1,0), tying Bricks .brx-offcanvas-inner{position:fixed} and winning on
   order. That drops the CLOSED panel into normal flow, where it reserves its
   full height (2400px measured) between the filter button and the products.
   position:fixed still establishes a containing block, so the absolutely
   positioned close button is unaffected. */
.if-off-canvas-filter__content.brx-offcanvas-inner { position: fixed; }

/* ------------------------------------------------------------------ */
/* 31. Header rows: full-bleed background, content held to the measure. */
/*     .ifr-usp / .ifr-hdr__row / .ifr-nav are direct children of the   */
/*     header with no inner container, so on a wide screen the USP grid */
/*     and the logo/search/icons row spread across the whole viewport   */
/*     while the rest of the site stops at 1280px.                      */
/*     The side padding does the centring, so the cream and white bands */
/*     still run edge to edge. Their typed _padding compiles to         */
/*     .ifr-usp.brxe-div (0,2,0), so !important is what wins here       */
/*     rather than a specificity guess.                                 */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ifr-usp,
  .ifr-hdr__row { padding-inline: max(40px, (100% - 1280px) / 2) !important; }
  .ifr-nav      { padding-inline: max(0px,  (100% - 1280px) / 2) !important; }
}

/* ------------------------------------------------------------------ */
/* 32. USP bar messages (rendered by [ifr_usp_messages], ifr-usp.php)  */
/*     The messages are no longer Bricks elements, so the ifr-usp__msg  */
/*     global class emits no CSS any more (Bricks only prints a class   */
/*     an element uses). Its rules live here now, plus the softer clock.*/
/* ------------------------------------------------------------------ */
.ifr-usp__msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  column-gap: 8px;
  white-space: nowrap;
  transition: transform .4s ease, opacity .4s ease;
  transform: translateY(0); opacity: 1;
}
.ifr-usp__msg[data-ifr-state="out"]  { transform: translateY(-100%); opacity: 0; }
.ifr-usp__msg[data-ifr-state="next"] { transform: translateY(100%);  opacity: 0; transition: none; }
.ifr-usp__msg[hidden] { display: none !important; }
.ifr-usp__text { white-space: nowrap; }

/* The countdown. No dark box any more: the digits themselves carry the
   brand's dark colour, a step heavier than the sentence around them, with
   tabular figures so the width never jitters as the seconds tick. */
.ifr-clock {
  font-weight: 800;
  color: var(--ifr-navy);
  font-variant-numeric: tabular-nums;
  font-size: 1.08em;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Optional clock background, chosen in Instellingen > IdeeFabriek. The
   default is none; a chosen tone adds the chip padding and its own contrast. */
.ifr-clock--soft, .ifr-clock--peach, .ifr-clock--cream,
.ifr-clock--coral, .ifr-clock--navy, .ifr-clock--black { padding: 2px 8px; border-radius: 4px; }
.ifr-clock--soft  { background: var(--ifr-hairline); color: var(--ifr-navy); }
.ifr-clock--peach { background: var(--ifr-peach);    color: var(--ifr-navy); }
.ifr-clock--cream { background: var(--ifr-cream);    color: var(--ifr-navy); box-shadow: inset 0 0 0 1px var(--ifr-border-cream); }
.ifr-clock--coral { background: var(--ifr-coral);    color: #fff; }
.ifr-clock--navy  { background: var(--ifr-navy);     color: #fff; }
.ifr-clock--black { background: #000;                color: #fff; }

/* Mobile bar: everything rotates, arrows and icon are gone, so the message
   has the full width and stays on ONE line. The font steps down on the
   narrowest phones so the clock never wraps under the sentence. */
.ifr-usp--mob .ifr-usp__viewport { flex: 1 1 auto; min-width: 0; }
.ifr-usp--mob .ifr-usp__msg { font-size: 12.5px; column-gap: 6px; padding: 0 8px; }

/* Product page card: the rule text is split at {klok}; lead above, rest
   below. When the current rule has no clock the boxes are hidden. */
.ifr-timer__lead { display: block; font-weight: 800; color: var(--ifr-navy); }
.ifr-timer__rest { display: block; }
.ifr-timer__rest:empty { display: none; }
.ifr-timer--noclock .ifr-timer__boxes { display: none !important; }
/* Same, from the server's own verdict, so the boxes never flash 00:00:00
   before ifr.js has run. Keyed on the clock rather than the mode, because a
   closed day DOES have a clock once "laat de klok doorlopen" is switched on.
   Progressive: without :has() the JS class still works. */
.ifr-timer:has([data-ifr-noclock="1"]) .ifr-timer__boxes { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ifr-usp__msg { transition: none; }
}

/* ------------------------------------------------------------------ */
/* 33. Fixed USP slots (rendered by [ifr_usp_slot]) — the flag classes  */
/*     no longer sit on Bricks elements, so their CSS lives here.       */
/* ------------------------------------------------------------------ */
.ifr-usp__flags { display: inline-flex; align-items: center; column-gap: 6px; }
.ifr-usp__flag {
  display: inline-block; flex-shrink: 0;
  width: 18px; height: 12px; border-radius: 2px;
}
.ifr-usp__flag--nl { background: linear-gradient(#AE1C28 33%, #fff 33% 66%, #21468B 66%); }
.ifr-usp__flag--be { background: linear-gradient(90deg, #000 33%, #FAE042 33% 66%, #ED2939 66%); }

/* ------------------------------------------------------------------ */
/* 34. Toggles from Instellingen > IdeeFabriek, applied as body classes */
/*     by IFR_Shipping::body_class().                                  */
/* ------------------------------------------------------------------ */
/* WhatsApp bubble (Bricks template 36376 "Floating Content"). Its own CSS
   pins it with !important, so these must be !important too. */
body.ifr-wa-off .wa-float-container { display: none !important; }
@media (max-width: 767px) {
  body.ifr-wa-nomobile .wa-float-container { display: none !important; }
}
/* Product-page countdown card, per product or by the site default. */
body.ifr-no-countdown .ifr-timer { display: none !important; }
/* the shortcode wrapper inside each slot lays its text + flags out inline */
.ifr-usp__slot > .brxe-shortcode { display: flex; align-items: center; column-gap: 10px; min-width: 0; }
.ifr-usp__slot > .brxe-shortcode:empty { display: none; }

/* ------------------------------------------------------------------ */
/* 35. Mobile search collapses into an icon. The always-visible field  */
/*     cost 58px on every mobile page load; now it opens on tap.       */
/*     The Bricks element carries typed height/margin, so the hide     */
/*     needs !important to win against .ifr-hdr__mob-search.brxe-search*/
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .ifr-hdr__mob-search { display: none !important; }
  .ifr-hdr--search-open .ifr-hdr__mob-search {
    display: block !important;
    animation: ifr-search-drop .18s ease-out;
  }
  @keyframes ifr-search-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ifr-hdr__mob-search-btn {
    border: 0; background: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; color: var(--ifr-navy);
  }
  /* the magnifier SVG is white-stroked (it lives in the coral pill on desktop) */
  .ifr-hdr__mob-search-btn svg { width: 24px; height: 24px; display: block; stroke: currentColor; }
  .ifr-hdr--search-open .ifr-hdr__mob-search-btn { color: var(--ifr-coral); }
}
@media (prefers-reduced-motion: reduce) {
  .ifr-hdr--search-open .ifr-hdr__mob-search { animation: none; }
}

/* Hamburger: Bricks draws the bars at 40x4px whatever the button size, so it
   dwarfed the 34px logo. Scaling the glyph (Bricks own --brxe-toggle-scale)
   keeps the bar spacing and the open/close animation intact: 40 -> 24px. */
.ifr-hdr__burger.brxe-toggle { --brxe-toggle-scale: .6; }

/* A campaign box anywhere (banner AND product page) is hidden until ifr.js
   confirms the campaign is live. The banner one is also omitted server-side. */
[data-ifr-campaign]:not(.ifr-campaign-on) { display: none !important; }

/* ------------------------------------------------------------------ */
/* 36. Header options, and the floating WhatsApp bubble                */
/* ------------------------------------------------------------------ */

/* The heart beside the two fixed texts in the bar. Off by default: on a
   phone the logo sits directly underneath it, which reads as a duplicate.
   Switched back on under IdeeFabriek > Zoekbalk en iconen. */
body.ifr-usp-noicons .ifr-usp__icon,
body.ifr-usp-noicons .ifr-usp__icon--mob { display: none !important; }

/* The WhatsApp bubble is a fixed Bricks template with its own stacking
   context, and it painted straight over the open mobile menu. Lift both
   drawers above it (.brxe-offcanvas.ifr-drawer is (0,2,0), so it beats
   Bricks' own .brxe-offcanvas rule without !important), and take the bubble
   out of the way entirely while a drawer is open — floating over an open
   menu it is unreachable anyway. */
.brxe-offcanvas.ifr-drawer,
.brxe-offcanvas.ifr-cartdrawer { z-index: 10000; }
body:has(.brxe-offcanvas.brx-open) .wa-float-container { display: none !important; }

/* ------------------------------------------------------------------ */
/* 37. Product page: Omschrijving / Specificaties, and the sold-out    */
/*     badge. Rendered by [ifr_product_details] (includes/product.php) */
/*     as native <details>, so no JS and no Bricks accordion needed.   */
/* ------------------------------------------------------------------ */
.ifr-acc { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.ifr-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ifr-cream); color: var(--ifr-navy);
  font-weight: 800; font-size: 16px; line-height: 1.3;
  padding: 17px 22px; border-radius: 10px;
  cursor: pointer; user-select: none; list-style: none;
}
/* the default disclosure triangle, in both engines */
.ifr-acc__head::-webkit-details-marker { display: none; }
.ifr-acc__head::marker { content: ""; }
.ifr-acc__head:hover { background: var(--ifr-peach); }
.ifr-acc__head:focus-visible { outline: 2px solid var(--ifr-coral); outline-offset: 2px; }

/* a chevron drawn in CSS: points right when closed, down when open */
.ifr-acc__chev {
  width: 9px; height: 9px; flex-shrink: 0; margin-right: 2px;
  border-right: 2px solid var(--ifr-coral);
  border-bottom: 2px solid var(--ifr-coral);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.ifr-acc__item[open] > .ifr-acc__head .ifr-acc__chev { transform: rotate(45deg); }

.ifr-acc__body { padding: 20px 2px 6px; }
.ifr-acc__body > :first-child { margin-top: 0; }
.ifr-acc__body > :last-child { margin-bottom: 0; }

/* WooCommerce's own attributes table, dressed like the rest of the shop */
.ifr-acc__body .shop_attributes { width: 100%; border-collapse: collapse; font-size: 14px; }
.ifr-acc__body .shop_attributes tr { border-bottom: 1px solid var(--ifr-border-cream); }
.ifr-acc__body .shop_attributes tr:last-child { border-bottom: 0; }
.ifr-acc__body .shop_attributes th {
  background: var(--ifr-cream); color: var(--ifr-navy);
  font-weight: 800; text-align: left; vertical-align: top;
  padding: 13px 18px; width: 170px;
}
.ifr-acc__body .shop_attributes td {
  padding: 13px 18px; vertical-align: top; color: var(--ifr-body-soft);
}
.ifr-acc__body .shop_attributes td p { margin: 0; }
@media (max-width: 575px) {
  .ifr-acc__body .shop_attributes th { width: 120px; padding: 11px 13px; }
  .ifr-acc__body .shop_attributes td { padding: 11px 13px; }
  .ifr-acc__head { font-size: 15px; padding: 15px 18px; }
}

/* Sale and sold-out share one corner of the gallery, so only ever show one.
   The body class comes from IFR_Shipping::body_class(). */
.ifr-pdp__badge--out { display: none; background: var(--ifr-navy); }
body.ifr-pdp-out .ifr-pdp__badge--out { display: block; }
body.ifr-pdp-out .ifr-pdp__badge--sale { display: none !important; }

/* ------------------------------------------------------------------ */
/* 38. Mobile drawer: sub-panels must fill the drawer                  */
/* ------------------------------------------------------------------ */
/* Bricks renders each nested-accordion item as a .brxe-block, which is a
   flex column that does NOT stretch its children. The toggle row carries
   its own width:100% so it spanned the drawer, but the open sub-panel
   shrank to its widest link and left a white gutter down the right-hand
   side — which is what the phone screenshot shows. Make the item a plain
   block and let the panel fill it. */
.ifr-drawer .brxe-accordion-nested > .brxe-block {
  display: block;
  width: 100%;
}
.ifr-drawer__sub {
  width: 100%;
  box-sizing: border-box;
}
.ifr-drawer__sub > * { width: 100%; box-sizing: border-box; }

/* Breathing room, and a clear break between one group of links and the next. */
.ifr-drawer__sub-label:not(:first-child) { margin-top: 10px; }

/* The panel is scrolled, so give the last item clearance from the footer
   buttons rather than letting it sit flush against them. */
.ifr-drawer__body { padding-bottom: 8px; }

/* The featured tile is rendered by [ifr_featured] now, as one anchor. */
.ifr-mega__tile-link {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
}
.ifr-mega__tile-link .woocommerce-Price-amount { font: inherit; color: inherit; }
.ifr-mega__tile:empty { display: none; }

/* A product title can be far longer than the hand-written name it replaced,
   so cap it at two lines rather than letting the tile grow. */
.ifr-mega__tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* "Aanbevolen voor jou" sat a full section's padding below the cart. Close
   that gap so it reads as part of the same page rather than an afterthought. */
#brxe-ifr_cart_rec { padding-top: 0 !important; }
#brxe-ifr_cart_rec .ifr-recbox { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* 39. Checkout polish                                                 */
/* ------------------------------------------------------------------ */

/* The voucher bar is printed by WooCommerce above the template, so it sat
   flush against the top of the page. Give it room. */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-top: 26px; }

/* ...and the form it reveals was never styled: a bare input and WooCommerce's
   default button inside our rounded box. Make it one tidy row. */
form.checkout_coupon p { margin: 0 !important; }
form.checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
form.checkout_coupon .form-row-first,
form.checkout_coupon .form-row-last { width: auto !important; }
form.checkout_coupon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
form.checkout_coupon > p:first-of-type { flex: 1 1 100%; font-size: 13px; color: var(--ifr-muted); }
form.checkout_coupon input[type="text"] {
  flex: 1 1 200px; min-width: 0;
  height: 46px; padding: 0 16px;
  border: 1.5px solid var(--ifr-input-border) !important;
  border-radius: 23px !important;
  background: #fff; font: 600 14px Nunito, Helvetica, Arial, sans-serif;
}
form.checkout_coupon button[name="apply_coupon"] {
  flex: 0 0 auto;
  height: 46px; padding: 0 24px;
  border: 0 !important; border-radius: 23px !important;
  background: var(--ifr-coral) !important; color: #fff !important;
  font: 800 13px/1 Nunito, Helvetica, Arial, sans-serif;
  text-transform: none !important; cursor: pointer;
}
form.checkout_coupon button[name="apply_coupon"]:hover { background: var(--ifr-coral-dark) !important; }

/* The payment radios were picking up the browser's own accent, which came
   out orange and read as an error state. The house dark is calmer. */
.ifr-checkout input[type="radio"],
.ifr-review input[type="radio"],
.ifr-form input[type="radio"] { accent-color: var(--ifr-navy); }

/* Rounded corners on every field in the checkout, to match the rest. */
.ifr-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ifr-checkout select,
.ifr-checkout textarea,
.ifr-checkout .select2-selection {
  border-radius: 10px !important;
}
.ifr-checkout textarea { padding: 12px 14px; }
/* the payment method cards too */
.ifr-review li.wc_payment_method,
.ifr-review .payment_box { border-radius: 12px !important; }

/* On a phone the terms text and the order button had a gap between them big
   enough to read as two separate things. Pull the button back up. */
@media (max-width: 575px) {
  .ifr-review .woocommerce-terms-and-conditions-wrapper { margin-bottom: 10px !important; }
  .ifr-review .form-row.place-order,
  .ifr-review .place-order { margin-top: 0 !important; padding-top: 0 !important; }
  .ifr-review #place_order { margin-top: 10px !important; }
}

/* ------------------------------------------------------------------ */
/* 40. Two things the Bricks global classes no longer cover            */
/* ------------------------------------------------------------------ */

/* The mega-menu tile is drawn by [ifr_featured] now, so its label, name
   and price are plain <span>s — not Bricks text elements. The typed
   controls emitted .class.brxe-text-basic, which no longer matches, so
   the styling has to live here. Values copied from those controls. */
.ifr-mega__tile-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ifr-muted);
}
.ifr-mega__tile-name {
  font-size: 14px; font-weight: 800;
  color: var(--ifr-navy);
}
.ifr-mega__tile-price {
  font-size: 13px; font-weight: 700;
  color: var(--ifr-coral);
}
.ifr-mega__tile-price .woocommerce-Price-amount { font: inherit; color: inherit; }

/* WooCommerce's own notices ship as hard pink and green bars with an icon.
   Bring them into the house palette. Error keeps a coral edge so it still
   reads as different from a confirmation, without shouting. */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
body .woocommerce-error,
body .woocommerce-message,
body .woocommerce-info {
  border: 0 !important;
  border-radius: 12px !important;
  padding: 15px 18px !important;
  margin: 0 0 18px !important;
  font: 700 14px/1.5 Nunito, Helvetica, Arial, sans-serif !important;
  background: var(--ifr-cream) !important;
  color: var(--ifr-navy) !important;
  list-style: none !important;
}
body .woocommerce-error::before,
body .woocommerce-message::before,
body .woocommerce-info::before { display: none !important; }
body .woocommerce-error { background: var(--ifr-peach) !important; box-shadow: inset 3px 0 0 var(--ifr-coral); }
body .woocommerce-message { box-shadow: inset 3px 0 0 var(--ifr-coral-light); }
body .woocommerce-error li,
body .woocommerce-message li,
body .woocommerce-info li { list-style: none; margin: 0; }
/* the inline button WooCommerce drops into a notice */
body .woocommerce-error .button,
body .woocommerce-message .button,
body .woocommerce-info .button {
  background: var(--ifr-coral) !important; color: #fff !important;
  border: 0 !important; border-radius: 20px !important;
  padding: 8px 18px !important; font-weight: 800 !important;
  text-transform: none !important;
}

/* ------------------------------------------------------------------ */
/* 41. Header icon row: the cart label sat 4px below its neighbours     */
/* ------------------------------------------------------------------ */
/* .ifr-hdr__icon is a flex column with row-gap:4px. Blogs, Contact and
   Favo's have two children in flow (icon + label). The cart has three,
   because Bricks wraps [ifr_cart_count] in its own <div class=brxe-shortcode>
   which is zero-height but still a flex item — so it contributes a second
   4px gap and pushes "Winkelwagen" down. Favourites escapes this only
   because its badge is absolutely positioned and therefore out of flow.
   display:contents removes the wrapper from the box tree entirely, so the
   badge still positions against .ifr-hdr__icon (which is position:relative)
   and no extra gap is created. */
.ifr-hdr__icon > .brxe-shortcode { display: contents; }


/* ------------------------------------------------------------------ */
/* 42. Product-card badges: one badge, chosen in PHP                    */
/* ------------------------------------------------------------------ */
/* The three Bricks badge divs shared a single absolute position, so a
   product that was both on sale and sold out painted "Uitverkocht" on top
   of "Aanbieding" — it only looked right because the wider box happened to
   cover the narrower one. [ifr_card_badge] now emits at most one span, so
   the precedence is explicit rather than a coincidence of text width.
   Geometry and colour are carried over unchanged from the old
   .card-testtes__sale / __sale-text global classes, which Bricks stops
   emitting CSS for once no Bricks element references them. */
.ifr-cardbadge {
	position: absolute;
	top: var(--space-s);
	left: var(--space-s);
	z-index: 2;
	padding: .4rem .8rem;
	border-radius: 5px;
	background: var(--if-yellow);
	color: var(--if-black);
	font-size: var(--text-s);
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	pointer-events: none;
}

/* Sold out must not read as a promotion, so it drops out of the warm
   palette entirely. Low stock keeps a warm tint but a calmer one than a
   genuine discount. */
.ifr-cardbadge--oos {
	background: #e8e8e8;
	color: #4a4a4a;
}

.ifr-cardbadge--low {
	background: #fff4d6;
	color: #5a4300;
}

/* Bricks wraps shortcode output in its own <div class="brxe-shortcode">.
   The link wrapper is a flex container, so that empty div would otherwise
   sit in the flow and add a row gap — the same trap as the cart label in
   section 41. display:contents takes it out of the box tree while leaving
   the badge positioned against the wrapper. */
.bt-product-card7__link-wrapper > .brxe-shortcode,
.card-testtes__link-wrapper > .brxe-shortcode {
	display: contents;
}