/* Size buttons for variable products (see inc/variation-buttons.php). Peach tokens from storefront.css. */
.fcn-variation-choice { position: relative; }
.fcn-variation-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.fcn-variation-button {
  min-width: 76px; min-height: 44px; padding: 10px 16px;
  border: 1px solid #d8b79f; border-radius: 6px; background: #fffaf6;
  color: var(--fcn-ink); font: 15px/1.2 var(--fcn-sans);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.fcn-variation-button:hover:not(:disabled) { border-color: var(--fcn-accent); background: #f8e8dc; }
.fcn-variation-button.is-selected {
  border-color: var(--fcn-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--fcn-ink); font-weight: 600;
}
.fcn-variation-button.is-unavailable { color: #a8998e; background: #f7f1ec; text-decoration: line-through; cursor: not-allowed; }
.fcn-variation-button:focus-visible { outline: 2px solid var(--fcn-accent); outline-offset: 2px; }

/* WooCommerce's select stays in the DOM as the source of truth, off screen once the buttons work
   (assets/variation-buttons.js adds .is-ready); until then the buttons are hidden and the select is used. */
.fcn-variation-choice:not(.is-ready) .fcn-variation-buttons { display: none; }
.fcn-variation-choice.is-ready select[data-fcn-native-select] {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.woocommerce div.product form.cart .variations,
body.woocommerce div.product form.cart .variations tr,
body.woocommerce div.product form.cart .variations th,
body.woocommerce div.product form.cart .variations td { display: block; width: 100%; padding: 0; border: 0; background: none; }
body.woocommerce div.product form.cart .variations th.label label {
  display: block; margin: 0 0 6px; font: 600 12px/1.4 var(--fcn-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fcn-muted);
}
body.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--fcn-muted); text-decoration: underline; }
body.woocommerce div.product .single_variation .price { font-size: 22px; color: var(--fcn-ink); }
body.woocommerce div.product .single_variation .stock { margin: 4px 0 0; font-size: 14px; }

/* Price "vanaf" label and the size list on product cards. */
.fcn-price-from { font-size: .72em; color: var(--fcn-muted); text-transform: lowercase; }
.fcn-card-variations { margin: -2px 0 6px; font-size: 13px; color: var(--fcn-muted); }

/* Product page: second price line excl. VAT (see functions.php). */
.fcn-price-excl { display: block; margin-top: 2px; font-size: .72em; color: var(--fcn-muted); }
.fcn-price-excl small { font-size: 1em; }

/* Announcement bar on desktop: three columns over the header's width (.fcn-wrap). "Met liefde
   voor nagels" lines up with the logo, the shipping notice sits in the middle, "Verzonden vanuit
   België" lines up with the icons. Below 1051px only the shipping notice shows (storefront.css). */
@media (min-width: 1051px) {
  .fcn-announcement {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding-inline: max(40px, calc((100% - 1320px) / 2));
  }
  .fcn-announcement-love { justify-self: start; }
  .fcn-announcement .fcn-shipping-notice { grid-column: 2; justify-self: center; }
  .fcn-announcement-origin { justify-self: end; }
}

/* Brand logos (assets/images/brands/<slug>.webp) in the Webshop menu, the mobile menu and the
   "Shop jouw favoriete merk" row. White tiles because the logos are drawn on white. */
.fcn-brand-card.fcn-brand-has-logo { background: #fff; justify-content: center; border: 1px solid var(--fcn-line); }
.fcn-brand-card img.fcn-brand-logo { aspect-ratio: 2; object-fit: contain; padding: 8px 12px; border-radius: var(--fcn-panel-radius); background: #fff; }
.fcn-brand-card.fcn-brand-has-logo:hover { border-color: var(--fcn-peach); }
.fcn-brand-row a.fcn-brand-has-logo { justify-content: center; background: #fff; padding: 10px 14px; }
.fcn-brand-row a.fcn-brand-has-logo:hover { background: #fff; border-color: var(--fcn-peach); }
.fcn-brand-row img.fcn-brand-logo { width: 100%; max-width: 220px; height: auto; aspect-ratio: 2; object-fit: contain; }

/* Sale badge in the site's peach, like the buttons. */
body .woocommerce span.onsale, body.woocommerce span.onsale { background: var(--fcn-peach); color: #352318; }
/* The discount as a peach disc in the photo's top-right corner ("-60%"), dark text like the buttons. */
body .woocommerce span.onsale.fcn-sale-percentage, body.woocommerce span.onsale.fcn-sale-percentage { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; background: var(--fcn-peach); color: #352318; font: 700 13px/1 var(--fcn-sans); letter-spacing: -.02em; box-shadow: 0 2px 6px #00000026; }

/* Webshop menu without JavaScript: the brand tree in two independent columns (fcn_mega_brand_columns()). */
.fcn-mega-panel .fcn-mega-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.fcn-mega-panel .fcn-mega-columns > ul { display: block; columns: auto; }

.fcn-filters optgroup { font-style: normal; font-weight: 600; }
.fcn-filters optgroup option { font-weight: 400; }

/* Mobile menu: quick actions, search and shortcuts first; Webshop and Merken as a one-open accordion. */
.fcn-drawer-heading{position:sticky;top:-16px;z-index:2;margin:-16px -16px 0;padding:16px 16px 8px;background:var(--fcn-paper)}
.fcn-drawer-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:14px 0 12px}
.fcn-drawer-action{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:68px;padding:10px 4px;border:1px solid var(--fcn-line);border-radius:14px;background:#fff;color:var(--fcn-ink);font-size:13px;line-height:1.2;text-align:center}
.fcn-drawer-action svg{width:22px;height:22px}
.fcn-drawer-action:hover{background:#f3e5da;color:var(--fcn-ink)}
.fcn-drawer-cart,.fcn-drawer-cart:hover{background:var(--fcn-peach);border-color:#d59168}
.fcn-drawer-cart .fcn-cart-count{top:6px;right:calc(50% - 24px);min-width:20px;height:20px;padding:0 4px;border:2px solid var(--fcn-peach);background:var(--fcn-ink);color:#fffaf6;font-size:10px;line-height:16px}
.fcn-drawer-search .fcn-search{max-width:none;margin:0 0 4px;border:1px solid var(--fcn-line);border-radius:999px;background:#fff;padding-left:16px}
.fcn-drawer-shortcuts{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 14px}
.fcn-drawer-shortcuts ul,.fcn-drawer-shortcuts li{display:contents}
.fcn-drawer .fcn-drawer-shortcuts a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--fcn-line);border-radius:999px;background:#fff;font-size:14px;line-height:1.2}
.fcn-drawer .fcn-drawer-shortcuts a:hover{background:#f3e5da}
.fcn-drawer nav>details:last-of-type{border-bottom:1px solid var(--fcn-line)}
.fcn-drawer-section>summary{scroll-margin-top:72px}
.fcn-drawer-section .fcn-brand-grid{padding-top:4px}

/* Sold-out cards: the notice fills the purchase row like the quantity + button do, and the photo is dimmed. */
#main ul.products li.product > .fcn-stock-link { align-self: stretch; width: 100%; border-color: var(--fcn-line); background: #f3ebe4; color: #7a6558; }
#main ul.products li.product > .fcn-stock-link:hover { background: #ecdfd4; color: #5f4b40; border-color: #d9c3b3; }
#main ul.products li.product.outofstock img { opacity: .55; filter: grayscale(.35); }

/* Product cards: optional second photo, faded in on hover once loaded (inc/card-images.php). */
#main ul.products li.product a img.fcn-card-hover-image { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
#main ul.products li.product a img.fcn-card-hover-image:not([src]) { display: none; }
#main ul.products li.product .fcn-card-image > img.fcn-card-photo { transition: opacity .25s ease; }
/* Photos can differ in shape, so the main photo fades out while the second one fades in. */
@media (hover: hover) {
  #main ul.products li.product.fcn-hover-ready:hover img.fcn-card-hover-image { opacity: 1; }
  #main ul.products li.product.fcn-hover-ready:hover .fcn-card-image > img.fcn-card-photo { opacity: 0; }
  #main ul.products li.product.outofstock.fcn-hover-ready:hover img.fcn-card-hover-image { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { #main ul.products li.product a img.fcn-card-hover-image, #main ul.products li.product .fcn-card-image > img.fcn-card-photo { transition: none; } }

/* Card photo frame lives on the wrapper; the photo keeps its proportions, so its own corners are
   rounded (Wim's example) instead of the letterboxed box around it. Both photos share one grid cell. */
:is(#main, body) ul.products li.product .fcn-card-image { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1; min-height: 0; overflow: hidden; margin: 0 0 12px; padding: 12px; border: 1px solid var(--fcn-line); border-radius: var(--fcn-panel-radius); background: #fffdfb; }
:is(#main, body) ul.products li.product .fcn-card-image > img { grid-area: 1 / 1; display: block; margin: 0; padding: 0; border: 0; background: none; aspect-ratio: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; border-radius: var(--fcn-item-radius); }
:is(#main, body) ul.products li.product .fcn-card-image > img.is-wide { width: 100%; height: auto; max-height: 100%; }
:is(#main, body) ul.products li.product .fcn-card-image > img.is-tall { width: auto; height: 100%; max-width: 100%; }

/* Mobile menu: brand logos in two columns, so they stay readable. */
.fcn-drawer .fcn-drawer-section .fcn-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Webshop panel listing brand categories: two narrow columns, the rest of the width for the logos. */
@media (min-width: 1051px) {
  .fcn-mega-panel.fcn-mega-panel--brands { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
}
/* A category without subcategories lines up with the text of the expandable ones beside it. */
.fcn-mega-columns > ul > li > a { padding-left: 28px; }

/* Tag filter: on/off buttons ("Kenmerken") in the grouped catalogue filter. */
.fcn-filter-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.fcn-filter-tags legend { float: left; margin-right: 4px; padding: 0; font-size: 13px; color: var(--fcn-muted); }
.fcn-toggle { position: relative; display: inline-flex; }
.fcn-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fcn-toggle span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--fcn-line); border-radius: 999px; background: #fff; font-size: 13px; line-height: 1.2; }
.fcn-toggle input:checked + span { background: var(--fcn-peach); border-color: #d59168; }
.fcn-toggle input:focus-visible + span { outline: 2px solid var(--fcn-accent); outline-offset: 2px; }
/* The filter form is a wrapping flex row of labels; the tag buttons take their own line as compact pills. */
.fcn-filters .fcn-filter-tags { flex: 1 0 100%; }
.fcn-filters .fcn-toggle { flex: 0 0 auto; flex-direction: row; min-width: 0; gap: 0; }
/* "Klear heeft geen Buildergel …": why the category was reset after a brand change. */
.fcn-filters .fcn-filter-notice { flex: 1 0 100%; margin: 0; padding: 8px 12px; border-radius: var(--fcn-item-radius); background: #fff; font-size: 13px; color: var(--fcn-ink); }

/* Product page: "Andere klanten kochten ook" and "Past goed bij" (inc/recommendations.php), spaced like "Vergelijkbaar". */
.woocommerce div.product .fcn-recommendations { clear: both; padding-top: 35px; }

/* Brand menu (inc/brand-menu.php): counts after each type, product lines under their type. */
.fcn-brand-tree .fcn-count { margin-left: 4px; color: var(--fcn-muted); font-size: .85em; }
.fcn-brand-tree .fcn-lines { margin: 0 0 4px 14px; padding: 0; list-style: none; }
.fcn-brand-tree .fcn-lines a { padding-block: 6px; font-size: 12px; }

/* WooCommerce Product Collection block (cart "Vergeet je niets?", empty cart "Nieuw in de shop"):
   styled like the shop's product cards instead of the block's dark buttons and centred serif titles. */
.wp-block-woocommerce-product-collection .wc-block-product { text-align: left; }
.wp-block-woocommerce-product-collection .wc-block-components-product-image { margin: 0 0 12px; }
.wp-block-woocommerce-product-collection .wc-block-components-product-image img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 12px; background: #fffdfb; border: 1px solid var(--fcn-line); border-radius: var(--fcn-panel-radius); }
.wp-block-woocommerce-product-collection .wp-block-post-title { margin: 0 0 8px !important; text-align: left; font-family: var(--fcn-sans) !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 400; }
.wp-block-woocommerce-product-collection .wp-block-post-title a { color: var(--fcn-ink); text-decoration: none; }
.wp-block-woocommerce-product-collection .wc-block-components-product-price { margin-bottom: 10px; text-align: left; font-size: 15px !important; }
.wp-block-woocommerce-product-collection .wc-block-components-product-button { align-items: stretch; justify-content: flex-start; text-align: left; }
.wp-block-woocommerce-product-collection .wp-block-button__link,
.wp-block-woocommerce-product-collection .wc-block-components-product-button__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; border: 1px solid #d59168; border-radius: 6px; background: var(--fcn-peach); color: var(--fcn-ink); font: 600 13px/1.3 var(--fcn-sans) !important; text-decoration: none; }
.wp-block-woocommerce-product-collection .wp-block-button__link:hover,
.wp-block-woocommerce-product-collection .wc-block-components-product-button__button:hover { background: #d59168; color: var(--fcn-ink); }

/* Page numbers under the catalogue: peach instead of WooCommerce's default purple-grey. */
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--fcn-line); border-radius: var(--fcn-item-radius); background: #fff; color: var(--fcn-ink); }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus { background: var(--fcn-peach); border-color: #d59168; color: var(--fcn-ink); }

/* Mobile menu drill-down (inc/drawer-menu.php): each level is a panel sliding over the menu. */
.fcn-drill-root { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; border-top: 1px solid var(--fcn-line); background: none; color: var(--fcn-ink); font: 20px/28px var(--fcn-serif); text-align: left; cursor: pointer; }
.fcn-drill-root svg { width: 19px; height: 19px; flex: none; color: var(--fcn-peach); stroke-width: 1.8; }
.fcn-drill-root span { flex: 1; }
.fcn-drill-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px; background: var(--fcn-paper); box-shadow: -8px 0 24px #2a1d1514; transform: translateX(100%); transition: transform .25s ease; }
.fcn-drill-panel.is-open { transform: none; }
.fcn-drill-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 -16px 8px; padding: 10px 16px 8px; background: var(--fcn-paper); border-bottom: 1px solid var(--fcn-line); }
.fcn-drill-back { width: 44px; height: 44px; margin-left: -10px; }
.fcn-drill-back svg { transform: rotate(180deg); }
.fcn-drill-title { overflow: hidden; font: 20px/1.2 var(--fcn-serif); text-overflow: ellipsis; white-space: nowrap; }
.fcn-drill-all { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 8px 0 4px; padding: 10px 14px; border-radius: var(--fcn-item-radius); background: var(--fcn-peach); color: var(--fcn-ink); font-weight: 600; font-size: 14px; }
.fcn-drill-heading { margin: 18px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fcn-accent); }
.fcn-drill-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--fcn-line); background: none; color: var(--fcn-ink); font: 15px/1.3 var(--fcn-sans); text-align: left; cursor: pointer; }
.fcn-drill-row svg { width: 16px; height: 16px; flex: none; color: var(--fcn-accent); }
.fcn-drill-row .fcn-count, .fcn-drill-panel .fcn-count { margin-left: 6px; color: var(--fcn-muted); font-size: .85em; }
@media (prefers-reduced-motion: reduce) { .fcn-drill-panel { transition: none; } }

/* Catalogue filter as a sidebar (inc/catalog-sidebar.php): desktop only; phones keep the bar. */
.fcn-catalog-sidebar { display: none; }
@media (min-width: 1051px) {
  .fcn-catalog-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; align-items: start; }
  /* Stays in view without an inner scroll area: when it is taller than the window (several brands open)
     it scrolls along with the page until its end is in view, and back up again (assets/fcn-additions.js). */
  .fcn-catalog-sidebar { display: block; padding: 18px; border-radius: var(--fcn-panel-radius); background: #f5e9df; font-size: 14px; }
  .fcn-catalog-sidebar.is-sticky { position: sticky; top: 20px; }
  .fcn-has-sidebar:not(.fcn-filter-both) #fcn-catalog-filters { display: none !important; }
}
.fcn-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fcn-side-head .fcn-eyebrow { margin: 0; }
.fcn-side-clear { font-size: 13px; text-decoration: underline; }
.fcn-catalog-sidebar .fcn-filter-notice { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--fcn-item-radius); background: #fff; font-size: 13px; }
.fcn-side-section, .fcn-side-search { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6d3c4; }
.fcn-side-title { display: block; margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.fcn-side-search .fcn-search { max-width: none; margin: 0; padding-left: 12px; border: 1px solid #cdb5a4; border-radius: var(--fcn-item-radius); background: var(--fcn-paper); }
.fcn-side-search input[type="search"] { font-size: 14px; }
.fcn-side-list { margin: 0; padding: 0; list-style: none; }
.fcn-side-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: var(--fcn-item-radius); color: var(--fcn-ink); }
.fcn-side-list a:hover { background: #efdccf; }
.fcn-side-list a[aria-current="true"] { background: var(--fcn-peach); font-weight: 600; }
.fcn-side-list .fcn-count { color: var(--fcn-muted); font-size: 12px; }
.fcn-side-list a[aria-current="true"] .fcn-count { color: var(--fcn-ink); }
.fcn-side-sub { margin: 2px 0 4px 12px; padding-left: 8px; border-left: 1px solid #e0c5b2; }
.fcn-side-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fcn-side-tag { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--fcn-line); border-radius: 999px; background: #fff; font-size: 13px; color: var(--fcn-ink); }
.fcn-side-tag[aria-pressed="true"] { background: var(--fcn-peach); border-color: #d59168; }

/* Sidebar categories with subcategories fold open in place, like the Webshop menu. */
.fcn-side-group > summary { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: var(--fcn-item-radius); list-style: none; cursor: pointer; }
.fcn-side-group > summary::-webkit-details-marker { display: none; }
.fcn-side-group > summary span:first-child { flex: 1; }
.fcn-side-group > summary::after { content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 3px 2px; border: solid var(--fcn-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.fcn-side-group[open] > summary::after { transform: rotate(225deg); margin-top: 4px; margin-bottom: 0; }
.fcn-side-group > summary:hover { background: #efdccf; }
.fcn-side-group[open] > summary { font-weight: 600; }
/* Categories with a sub-level come first in a brand and are bold; the ones without follow in normal weight. */
.fcn-side-parent > summary { font-weight: 700; }
.fcn-side-group > summary .fcn-count { color: var(--fcn-muted); font-size: 12px; font-weight: 400; }
/* Sidebar layouts: the page title sits above both columns; the columns start on the same line. */
.fcn-has-sidebar .fcn-catalog-header { margin-bottom: 18px; }
.fcn-has-sidebar .fcn-catalog-main > .woocommerce-products-header:empty { display: none; }

/* Product Collection block (cart "Vergeet je niets?"): the add button as on the shop cards, a bag icon
   with "Toevoegen", icon only where the card is narrow (the block's long "Toevoegen aan winkelwagen"
   broke letter by letter next to the quantity). */
.wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button,
.wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button { gap: 8px; min-width: 0; font-size: 0 !important; white-space: nowrap; }
.wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button::before,
.wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("icons/bag.svg") center/contain no-repeat; mask: url("icons/bag.svg") center/contain no-repeat; }
.wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button::after,
.wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button::after { content: "Toevoegen"; font: 600 13px/1.3 var(--fcn-sans); }
@media (max-width: 1050px) {
  .wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button,
  .wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button { padding: 0 !important; }
  .wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button::after,
  .wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button::after { content: none; }
}
/* Same compact 44px row as the shop cards: quantity and add button level, the icon centred. */
.wp-block-woocommerce-product-collection .fcn-card-purchase { align-items: center; }
.wp-block-woocommerce-product-collection .fcn-card-quantity { height: 44px; min-height: 44px; box-sizing: border-box; }
.wp-block-woocommerce-product-collection .fcn-card-quantity input.qty,
.wp-block-woocommerce-product-collection .fcn-card-quantity .fcn-quantity-step { height: 100%; min-height: 0; padding-block: 0; line-height: 1; font-size: 15px; }
.wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button,
.wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button { display: inline-flex !important; align-items: center; justify-content: center; height: 44px; min-height: 44px; margin: 0 !important; line-height: 1 !important; }
@media (max-width: 1050px) {
  .wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button,
  .wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button { width: 44px; gap: 0; } /* The hidden label still takes a flex slot: no gap, so the icon sits centred. */
}
/* The same per card, not per window: three block cards next to the cart totals are narrow on a wide screen
   too. Below 260px the card has no room for "Toevoegen" next to the quantity box: bag only. */
.wp-block-woocommerce-product-collection li.wc-block-product { container-type: inline-size; }
@container (max-width: 259px) {
  .wp-block-woocommerce-product-collection .fcn-card-purchase.fcn-quantity-ready { grid-template-columns: minmax(0, 1fr) 44px; gap: 0 6px; }
  .wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button,
  .wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button { width: 44px; gap: 0; padding: 0 !important; }
  .wp-block-woocommerce-product-collection .fcn-card-purchase .add_to_cart_button::after,
  .wp-block-woocommerce-product-collection .fcn-card-purchase .wc-block-components-product-button__button::after { content: none; }
}
/* Tags ("Kenmerken") live in the sidebar when it is shown; the bar keeps them only on phones, where it is the only filter. */
@media (min-width: 1051px) {
  .fcn-has-sidebar #fcn-catalog-filters .fcn-filter-tags { display: none !important; }
}

/* Verlanglijst (plugin fcn-wishlist): a heart in the corner of every product photo, filled when saved;
   on the product page a heart with text under the add button. */
ul.products li.product { position: relative; }
.fcn-wishlist-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--fcn-ink); cursor: pointer; }
.fcn-wishlist-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s ease; }
.fcn-wishlist-toggle[aria-pressed="true"] svg { fill: var(--fcn-accent); stroke: var(--fcn-accent); }
.fcn-wishlist-toggle:active svg { transform: scale(.85); }
/* Bottom-right of the square card image, clear of the sale badge (top-right); 100cqw = the image height. */
ul.products li.product { container-type: inline-size; }
/* A card too narrow for the "Toevoegen" label (sidebar next to the grid, three cards in the cart, a zoomed
   page): the button shows the bag only. Decided per card, not by the window width. */
@container (max-width: 224px) {
  .fcn-card-purchase.fcn-quantity-ready { grid-template-columns: minmax(0, 1fr) 44px; gap: 0 6px; }
  .fcn-card-cart-label { display: none; }
  #main ul.products .fcn-card-purchase > .button { padding: 0; }
}
@container (max-width: 150px) {
  .fcn-quantity-ready .fcn-card-quantity { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
}
ul.products li.product > .fcn-wishlist-toggle { position: absolute; top: calc(100cqw - 48px); right: 8px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: #ffffffe6; box-shadow: 0 1px 4px #38291e1f; }
ul.products li.product > .fcn-wishlist-toggle:hover { background: #fff; color: var(--fcn-accent); }
.fcn-wishlist-single { margin: 14px 0 18px; }
.fcn-wishlist-toggle--label { min-height: 44px; font: 600 14px/1.3 var(--fcn-sans); }
.fcn-wishlist-toggle--label:hover { color: var(--fcn-accent); }
@media (max-width: 760px) {
  ul.products li.product > .fcn-wishlist-toggle { top: calc(100cqw - 42px); right: 6px; width: 36px; height: 36px; }
  ul.products li.product > .fcn-wishlist-toggle svg { width: 18px; height: 18px; }
}
/* The list (My Account > Verlanglijst, or the page for guests). */
.fcn-wishlist-empty { display: none; padding: 28px; background: #fff; border: 1px solid var(--fcn-line); border-radius: var(--fcn-panel-radius); text-align: center; }
.fcn-wishlist.is-empty .fcn-wishlist-empty { display: block; }
.fcn-wishlist.is-empty .fcn-wishlist-guest { display: none; }
.fcn-wishlist-empty p { margin-bottom: 16px; color: var(--fcn-muted); }
.fcn-wishlist-guest { margin-bottom: 20px; color: var(--fcn-muted); font-size: 14px; }
.fcn-wishlist-guest a { color: var(--fcn-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Header heart: the number of saved products, like the cart count (its own class: the cart fragments replace .fcn-cart-count). */
.fcn-wishlist-count { position: absolute; right: 0; top: 0; min-width: 18px; height: 18px; padding: 0 4px; background: var(--fcn-peach); color: #30251e; font: 11px/18px var(--fcn-sans); text-align: center; border-radius: 12px; }
.fcn-wishlist-count[hidden] { display: none; }

/* Webshop menu as a browser (desktop, brands with their categories; built by assets/fcn-additions.js). */
.fcn-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; margin-bottom: 16px; }
.fcn-mega-panel--browser .fcn-eyebrow { font-size: 11px; letter-spacing: .14em; }
.fcn-mega-panel.fcn-mega-panel--browser { border-color: var(--fcn-line); box-shadow: 0 12px 32px #332a2412; }
.fcn-menu-heading .fcn-eyebrow { margin: 0; }
.fcn-mega-panel .fcn-menu-heading .fcn-menu-shop-all { min-height: 32px; margin: 0; padding: 6px 11px; border: 0; border-radius: var(--fcn-item-radius); font-size: 12px; font-weight: 500; }
.fcn-mega-panel .fcn-menu-heading .fcn-menu-shop-all span { font-size: 16px; line-height: 1; }
@media (min-width: 1051px) {
  .fcn-mega-panel--browser > div:last-child { padding-left: 24px; border-left: 1px solid var(--fcn-line); }
  .fcn-mega-panel--browser > div:last-child > .fcn-eyebrow { display: flex; align-items: center; min-height: 34px; margin: 0 0 16px; }
}
.fcn-brand-tree[hidden] { display: none; }
.fcn-menu-browser { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.fcn-menu-browser-brands { display: grid; min-width: 0; }
.fcn-menu-browser .fcn-menu-browser-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 32px; margin: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fcn-ink); font: 400 13px/1.45 var(--fcn-sans); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.fcn-menu-browser-list .fcn-menu-browser-row { min-height: 34px; }
.fcn-menu-browser-label { min-width: 0; overflow-wrap: anywhere; }
.fcn-menu-browser .fcn-count { margin-left: 2px; color: var(--fcn-muted); font-size: .85em; }
.fcn-menu-browser .fcn-menu-browser-row:hover { background: #f5e7dc; color: var(--fcn-ink); }
.fcn-menu-browser .fcn-menu-browser-row[aria-pressed="true"] { background: #f5e7dc; box-shadow: inset 2px 0 var(--fcn-peach); font-weight: 600; }
.fcn-menu-browser-arrow { display: block; flex: 0 0 6px; width: 6px; height: 6px; margin-right: 3px; border: solid var(--fcn-peach); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.fcn-menu-browser-panel { min-width: 0; padding: 5px 0 5px 16px; border-left: 1px solid var(--fcn-line); }
.fcn-menu-browser-caption { margin: 0 10px 6px; color: var(--fcn-muted); font: 400 10px/1.5 var(--fcn-sans); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.fcn-menu-browser .fcn-menu-browser-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; color: var(--fcn-ink); font: 400 24px/1.2 var(--fcn-serif); text-decoration: none; overflow-wrap: anywhere; transition: background-color .15s; }
.fcn-menu-browser .fcn-menu-browser-heading::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 4px; border: solid var(--fcn-peach); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
/* Hovered like the rows beside it; the line under it now sits on top of the list. */
.fcn-menu-browser .fcn-menu-browser-heading:hover { background: #f5e7dc; color: var(--fcn-ink); }
.fcn-menu-browser-list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--fcn-line); }
.fcn-menu-browser-list > li { margin: 0; padding: 0; }
.fcn-menu-browser .fcn-menu-browser-back { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: -5px 0 10px; padding: 5px 10px; border: 0; border-radius: 8px; background: #f5e7dc; color: var(--fcn-ink); font: 400 11px/1.4 var(--fcn-sans); cursor: pointer; }
.fcn-menu-browser-back:hover { background: #f1ddce; }
.fcn-mega-panel--browser .fcn-brand-grid a:hover { border-color: var(--fcn-peach); box-shadow: 0 2px 8px #9557370d; }
.fcn-menu-browser :focus-visible { outline: 2px solid var(--fcn-accent); outline-offset: 2px; }

/* Search fields: a clear focus ring for keyboard users, like the other controls (was a 1px line). */
.fcn-search:focus-within { outline: 2px solid var(--fcn-accent); outline-offset: 3px; border-radius: 4px; }

/* "Zet de shop op je startscherm": the install offer for logged-in customers on a phone (inc/app-install.php). */
.fcn-app-install { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--fcn-line); border-radius: var(--fcn-panel-radius, 16px); background: #fff; font-size: 14px; line-height: 1.35; }
.fcn-app-install[hidden], .fcn-app-install [hidden] { display: none; }
.fcn-app-install img { flex: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--fcn-line); }
.fcn-app-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--fcn-muted); }
.fcn-app-install-text strong { color: var(--fcn-ink); font-weight: 600; }
.fcn-app-install-text b { color: var(--fcn-ink); }
.fcn-app-install-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.fcn-app-install-go { min-height: 40px; padding: 8px 14px; border: 1px solid var(--fcn-peach); border-radius: var(--fcn-item-radius, 10px); background: var(--fcn-peach); color: #352318; font: 600 13px/1.2 var(--fcn-sans); }
.fcn-app-install-go:hover { background: #d59168; }
.fcn-app-install-no { min-height: 32px; padding: 4px 6px; border: 0; background: none; color: var(--fcn-muted); font: 13px/1.2 var(--fcn-sans); text-decoration: underline; text-underline-offset: 3px; }
.fcn-app-install--card { margin: 0 0 22px; }
.fcn-app-install--menu { margin-top: 18px; }
.fcn-app-install-share { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: var(--fcn-accent); stroke-width: 1.8; }
/* The actions sit under the text (aligned with it), so the instruction keeps the full width. */
.fcn-app-install { flex-wrap: wrap; row-gap: 6px; }
.fcn-app-install-actions { flex: 0 0 100%; flex-direction: row; align-items: center; gap: 14px; padding-left: 60px; }
.fcn-app-install-no { padding-inline: 0; }

/* A chosen size that is sold out shows only "Uitverkocht": no quantity field and no (disabled) add-to-cart
   button. WooCommerce marks that state on the button; "no size chosen yet" keeps the button visible. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart:has(.single_add_to_cart_button.wc-variation-is-unavailable) { display: none; }
/* The general stock line gives way to the chosen size's own stock line (assets/variation-buttons.js). */
.fcn-size-chosen .fcn-product-stock { display: none; }
/* A sold-out size in a product card's size line. */
.fcn-card-variations .fcn-card-sold-out { color: #a8998e; }