/* 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. */
.fcn-variation-choice 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; }

/* Webshop menu, "links" mode: a flat two-column list of top-level categories. */
.fcn-mega-panel .fcn-categories > .fcn-category-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; columns: auto; }
.fcn-mega-panel .fcn-category-links a { display: block; padding: 9px 10px; border-radius: var(--fcn-item-radius); }
.fcn-mega-panel .fcn-category-links a:hover { background: #f5e7dc; }

/* Webshop menu, "expand" mode: two independent columns (see fcn_mega_category_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; }

/* Catalogue filter, "grouped" style: subcategory chips above the filter. */
.fcn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.fcn-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--fcn-line); border-radius: 999px; background: #fff; color: var(--fcn-ink); font-size: 14px;
}
.fcn-chip:hover { border-color: var(--fcn-peach); background: #fbeee4; color: var(--fcn-ink); }
.fcn-chip-count { font-size: 12px; color: var(--fcn-muted); }
.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}

/* Mobile menu follows the same "Webshop menu" setting: plain links (links) or two independent columns (expand). */
.fcn-drawer .fcn-mega-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; align-items: start; }
.fcn-drawer .fcn-mega-columns > ul { display: block; margin: 0; padding: 0; list-style: none; columns: auto; }
.fcn-drawer .fcn-mega-columns > ul > li,
.fcn-drawer .fcn-categories > .fcn-category-links > li { border-bottom: 1px solid var(--fcn-line); }
.fcn-drawer .fcn-mega-columns > ul > li > a,
.fcn-drawer .fcn-mega-columns > ul > li > details > summary,
.fcn-drawer .fcn-categories > .fcn-category-links a { min-height: 44px; font-size: 13px; line-height: 1.4; padding-block: 10px; }
.fcn-drawer .fcn-mega-columns details[open] > summary { background: #f1e1d5; }
.fcn-drawer .fcn-mega-columns .fcn-category-all { display: block; padding: 8px; font-size: 13px; }

/* 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; }
/* "Per soort": every type with its subtypes in columns. */
@media (min-width: 1051px) { .fcn-mega-panel.fcn-mega-panel--types { grid-template-columns: 1fr; } }
.fcn-type-menu { columns: 4 180px; column-gap: 24px; }
.fcn-type-group { break-inside: avoid; margin-bottom: 14px; }
.fcn-type-group a { display: block; padding: 5px 8px; font-size: 13px; border-radius: var(--fcn-item-radius); }
.fcn-type-group a:hover { background: #f3e4d8; }
.fcn-type-group .fcn-type-top { font-weight: 600; font-size: 14px; }
.fcn-drawer .fcn-type-menu { columns: 2; padding-bottom: 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; } }

/* Wishlist page (TI WooCommerce Wishlist) in the theme's style. The page title "Verlanglijst" already
   names it, so the plugin's own "Wishlist" heading goes; buttons are peach like the rest of the shop
   instead of WooCommerce's purple "alt" buttons, and never wrap letter by letter. */
.tinv-wishlist .tinv-header { display: none; }
.tinv-wishlist table.tinvwl-table-manage-list { width: 100%; margin: 0 0 18px; border: 0; border-collapse: collapse; font-size: 15px; }
.tinv-wishlist table.tinvwl-table-manage-list th { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--fcn-line); color: var(--fcn-muted); font: 600 13px/1.3 var(--fcn-sans); text-align: left; text-transform: none; letter-spacing: 0; }
.tinv-wishlist table.tinvwl-table-manage-list td { padding: 14px 12px; border: 0; border-bottom: 1px solid var(--fcn-line); vertical-align: middle; }
.tinv-wishlist table.tinvwl-table-manage-list tfoot td { padding-top: 18px; border-bottom: 0; }
.tinv-wishlist .product-thumbnail img { width: 72px; max-width: 72px; height: 72px; padding: 6px; object-fit: contain; background: #fffdfb; border: 1px solid var(--fcn-line); border-radius: var(--fcn-item-radius); }
.tinv-wishlist .product-name a { color: var(--fcn-ink); }
/* Remove: the same trash button as in the cart (storefront.css, .wc-block-cart-item__remove-link). */
.tinv-wishlist .product-remove button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid #e4c6b2; border-radius: 12px; background: #f8e9de; color: var(--fcn-accent); box-shadow: none; cursor: pointer; }
.tinv-wishlist .product-remove button i { display: none; }
.tinv-wishlist .product-remove button::before { content: ""; display: block; width: 21px; height: 21px; background: currentColor; -webkit-mask: url("icons/trash.svg") center/contain no-repeat; mask: url("icons/trash.svg") center/contain no-repeat; }
.tinv-wishlist .product-remove button:hover { background: #f0d3be; border-color: #d5aa8d; color: #733f28; }
.tinv-wishlist .product-remove button:focus-visible { outline: 2px solid var(--fcn-accent); outline-offset: 3px; }
/* Stock status: icon and text together, aligned left like the other columns. */
.tinv-wishlist .product-stock p.stock { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 0; text-align: left; }
.tinv-wishlist .button,
.tinv-wishlist button.button,
.tinv-wishlist .button.alt { width: auto !important; min-height: 44px; padding: 10px 16px !important; border: 1px solid #d59168 !important; border-radius: 6px !important; background: #fff !important; color: var(--fcn-ink) !important; font: 600 13px/1.3 var(--fcn-sans) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
.tinv-wishlist .button:hover,
.tinv-wishlist .button.alt:hover { background: #f8e9de !important; }
/* One filled main button ("Alles toevoegen aan mandje"); the rest are outlined, so the page is not a wall of peach. */
.tinv-wishlist button[name="tinvwl-action-product_all"] { background: var(--fcn-peach) !important; }
.tinv-wishlist button[name="tinvwl-action-product_all"]:hover { background: #d59168 !important; }
.tinv-wishlist .tinvwl-to-left.look_in,
.tinv-wishlist .tinvwl-to-right.look_in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tinv-wishlist .tinvwl-to-right.look_in { justify-content: flex-end; }
.tinv-wishlist .tinvwl-input-group { display: flex; align-items: center; gap: 8px; width: auto; }
.tinv-wishlist .tinvwl-input-group-btn { display: inline-flex; width: auto; }
.tinv-wishlist select.tinvwl-break-input-filed { width: auto; min-width: 180px; min-height: 44px; padding: 8px 10px; border: 1px solid #cdb5a4; border-radius: var(--fcn-item-radius); background: var(--fcn-paper); color: var(--fcn-ink); font-size: 15px; }
/* Wishlist on a phone: each product as a compact card instead of one cell per line. */
@media (max-width: 767px) {
  .tinv-wishlist table.tinvwl-table-manage-list,
  .tinv-wishlist table.tinvwl-table-manage-list tbody,
  .tinv-wishlist table.tinvwl-table-manage-list tfoot,
  .tinv-wishlist table.tinvwl-table-manage-list tfoot tr,
  .tinv-wishlist table.tinvwl-table-manage-list tfoot td { display: block !important; width: 100% !important; }
  .tinv-wishlist table.tinvwl-table-manage-list thead { display: none !important; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody tr { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) 44px; grid-template-areas: "img name remove" "img price remove" "img stock stock" "action action action"; column-gap: 12px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--fcn-line); }
  .tinv-wishlist table.tinvwl-table-manage-list tbody td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .tinv-wishlist table.tinvwl-table-manage-list tbody .product-cb,
  .tinv-wishlist table.tinvwl-table-manage-list tbody .product-date { display: none !important; }
  .tinv-wishlist .product-thumbnail { grid-area: img; }
  .tinv-wishlist .product-name { grid-area: name; font-size: 15px; }
  .tinv-wishlist .product-price { grid-area: price; }
  .tinv-wishlist .product-stock { grid-area: stock; font-size: 13px; color: var(--fcn-muted); }
  .tinv-wishlist .product-remove { grid-area: remove; justify-self: end; }
  .tinv-wishlist .product-action { grid-area: action; margin-top: 10px; }
  .tinv-wishlist .product-action .button { width: 100% !important; }
  .tinv-wishlist .tinvwl-to-left.look_in, .tinv-wishlist .tinvwl-to-right.look_in { justify-content: stretch; }
  .tinv-wishlist .tinvwl-to-right.look_in .button { flex: 1 1 100%; }
  /* Out of stock: the stock line already says "Uitverkocht", the action cell would repeat it. */
  .tinv-wishlist .product-action:not(:has(.button)) { display: none !important; }
  /* No checkboxes on a phone (every card has its own add and remove), so no actions on a selection either. */
  .tinv-wishlist .tinvwl-to-left.look_in,
  .tinv-wishlist button[name="tinvwl-action-product_selected"] { display: none !important; }
  /* The action row lines up with the product cards. */
  .tinv-wishlist table.tinvwl-table-manage-list tfoot td { padding: 14px 0 0 !important; }
  .tinv-wishlist .tinvwl-to-right.look_in { margin: 0 !important; }
}

/* 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; }
  /* Scrolls with the page (no inner scroll area and scrollbar); stays in view only when it fits on screen. */
  .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, .fcn-has-sidebar .fcn-chips { 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; }
.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. */
}