#fpm-root{
  --fpm-ink:#1c1c1a;
  --fpm-paper:#fbfaf7;
  --fpm-line:#e3e0d6;
  --fpm-muted:#8b8a82;

  /* The variables below are overridden inline per-site from
     Producten > Instellingen (FPM_Shortcode::maybe_enqueue). The
     values here are just a sensible fallback if that inline style
     somehow fails to load. */
  --fpm-rust:#b8442f;
  --fpm-rust-dark:#9a3624;
  --fpm-btn-text:#ffffff;
  --fpm-price:#b8442f;
  --fpm-cart-bg:#ffffff;
  --fpm-cart-text:#1c1c1a;
  --fpm-cart-accent:#b8442f;
  --fpm-cat-text:#1c1c1a;
  --fpm-cat-active-bg:#b8442f;
  --fpm-cat-active-text:#ffffff;
  --fpm-cat-hover:#f3efe9;
  --fpm-card-hover:#f3efe9;
  --fpm-selection-bg:#b8442f;
  --fpm-selection-text:#ffffff;
  --fpm-remove-bg:#b8442f;
  --fpm-remove-bg-dark:#9a3624;
  --fpm-remove-text:#ffffff;
  --fpm-placeorder-bg:#b8442f;
  --fpm-placeorder-bg-dark:#9a3624;
  --fpm-placeorder-text:#ffffff;
  --fpm-cat-padding-v:16px;
  --fpm-cat-padding-h:20px;
  --fpm-cat-icon-size:26px;
  --fpm-cat-gap:10px;
  --fpm-content-width:1240px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fpm-ink);
  background: var(--fpm-paper);
  padding: 64px 24px;
  box-sizing: border-box;
  position: relative;
  /* Page builders (Elementor, Divi, etc.) often wrap shortcode output
     in a flex or grid container of their own. Without an explicit
     width, some of those containers let #fpm-root shrink to the width
     of its widest unbreakable content instead of filling the column,
     which then starves the grid below and causes the sidebar/cards to
     collapse and clip text. Claiming the full width here makes this
     plugin's own layout the one in control, regardless of the parent
     theme/builder markup it's dropped into. */
  width: 100%;
  min-width: 0;
  /* The banner above cancels this element's own padding with a negative
     margin so it can run edge-to-edge (see .fpm-banner below). Without
     overflow:hidden here, anything that negative margin pulls slightly
     too far up — a stray pixel from a builder's own spacing, or just a
     slide image whose proportions don't perfectly match the banner's
     aspect-ratio — can spill out above #fpm-root and visibly overlap
     whatever sits before it on the page. Clipping at this boundary is
     the floor: nothing the plugin renders should ever escape its own
     container. */
  overflow: hidden;
}
#fpm-root *{ box-sizing: border-box; }

/* Text-selection color (what shows when a visitor clicks and drags to
   select text). Scoped to #fpm-root only, so it doesn't change the
   selection color anywhere else on the site. Firefox requires the
   "*" to apply ::selection recursively to all descendants; WebKit/
   Blink browsers apply it from the ancestor rule alone, but including
   both is harmless and keeps behavior consistent across browsers. */
#fpm-root::selection,
#fpm-root *::selection{
  background-color: var(--fpm-selection-bg);
  color: var(--fpm-selection-text);
}

.fpm-banner{
  position: relative;
  width: 100%;
  /* Cancels #fpm-root's own side padding so the banner runs edge-to-edge
     within whatever column/container the shortcode is placed in, rather
     than being inset like the rest of the menu. */
  margin: -64px -24px 40px;
  width: calc(100% + 48px);
  aspect-ratio: 16/6;
  overflow: hidden;
  background: #1c1c1a;
}
.fpm-banner-track{
  position: relative;
  width: 100%;
  height: 100%;
}
.fpm-banner-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fpm-banner-fade .5s ease forwards;
}
.fpm-banner-slide[hidden]{ display: block; opacity: 0; animation: none; }
@keyframes fpm-banner-fade{ from{ opacity: 0; } to{ opacity: 1; } }
.fpm-banner-slide picture{
  display: block; width: 100%; height: 100%;
}
.fpm-banner-slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fpm-banner-dots{
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 2;
}
.fpm-banner-dot{
  width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.5);
  transition: background .15s ease, transform .15s ease;
}
.fpm-banner-dot:hover{ background: rgba(255,255,255,.8); }
.fpm-banner-dot[aria-current="true"]{ background: #ffffff; transform: scale(1.2); }

@media (max-width: 860px){
  .fpm-banner{ aspect-ratio: 4/3; margin: -40px -14px 32px; width: calc(100% + 28px); }
}

.fpm-cart-toggle-row{
  display: flex;
  justify-content: flex-end;
  max-width: var(--fpm-content-width);
  margin: 0 auto 32px;
}

.fpm-head-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:flex-start;
  max-width: var(--fpm-content-width);
  margin: 0 auto 48px;
  gap: 20px;
}
.fpm-head{ text-align:center; max-width:640px; margin:0 auto; grid-column: 2; }
.fpm-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--fpm-rust); font-weight:600; margin-bottom:14px;
}
.fpm-eyebrow::before, .fpm-eyebrow::after{
  content:""; width:18px; height:1px; background: var(--fpm-rust); opacity:.5;
}
.fpm-title{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4vw, 46px);
  line-height:1.05; margin:0 0 12px; font-weight:700; letter-spacing:-.01em;
}
.fpm-sub{ color: var(--fpm-muted); font-size:16px; margin:0; }
.fpm-sub a{ color: var(--fpm-muted); text-decoration: underline; text-decoration-color: var(--fpm-line); text-underline-offset: 3px; transition: color .15s ease; }
.fpm-sub a:hover{ color: var(--fpm-rust); }

.fpm-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  max-width: var(--fpm-content-width);
  width: 100%;
  margin: 0 auto;
  align-items:start;
}
.fpm-layout > *{ min-width: 0; }

/* Position variants — default DOM order is always nav then grid, so
   markup, JS, and accessibility tab order stay the same. These rules
   only change the *visual* placement via CSS grid order/columns. */
.fpm-layout--right{
  grid-template-columns: 1fr 260px;
}
.fpm-layout--right .fpm-nav{ order: 2; }
.fpm-layout--right .fpm-grid{ order: 1; }

.fpm-layout--top,
.fpm-layout--bottom{
  grid-template-columns: 1fr;
}
.fpm-layout--top .fpm-nav,
.fpm-layout--bottom .fpm-nav{
  position: static;
  display:flex; flex-wrap: nowrap; overflow-x:auto;
  gap:6px; padding:8px; border:none; background:transparent;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.fpm-layout--top .fpm-nav li,
.fpm-layout--bottom .fpm-nav li{ flex: 0 0 auto; min-height: auto; }
.fpm-layout--top .fpm-nav li + li,
.fpm-layout--bottom .fpm-nav li + li{ border-top: none; }
.fpm-layout--top .fpm-nav li .fpm-cat,
.fpm-layout--bottom .fpm-nav li .fpm-cat{
  border-radius: 999px !important;
  border: 1px solid var(--fpm-line);
  background: #fff;
  white-space: nowrap;
  /* Pills stay horizontal (name + icon side by side) — same row
     layout as the sidebar now, just with static positioning since a
     pill needs to size to its own content, not fill a
     relatively-positioned <li>. */
  position: static;
  flex-direction: row !important;
  align-items: center !important;
  width: auto;
}
.fpm-layout--top .fpm-nav li .fpm-cat[aria-current="true"],
.fpm-layout--bottom .fpm-nav li .fpm-cat[aria-current="true"]{
  background: var(--fpm-cat-active-bg);
  border-color: var(--fpm-cat-active-bg);
}
.fpm-layout--bottom .fpm-nav{ order: 2; }
.fpm-layout--bottom .fpm-grid{ order: 1; }

.fpm-nav{
  background: #ffffff;
  border: 1px solid var(--fpm-line);
  border-radius: 14px;
  list-style:none;
  margin:0; padding:0;
  position: sticky;
  top: 24px;
  min-width: 180px;
  /* No overflow:hidden here. Combined with position:sticky, Chrome's
     overflow:hidden clipping is unreliable on the sticky element
     itself, which let the first/active row's rounded corner +
     background bleed a sliver past the nav's own right edge — making
     that row look wider than the others. Each row now rounds and
     clips its own corners instead (see .fpm-nav li below), so nothing
     depends on the parent's overflow behavior. */
}
.fpm-nav li{
  margin:0; width:100%; overflow:hidden; position: relative;
  /* Explicit height instead of letting content determine it: now
     that .fpm-cat is position:absolute (see below), it's taken out
     of normal flow and no longer contributes to this <li>'s height
     the way an in-flow child would — without this, every <li>
     collapsed to ~0px tall and the whole nav looked empty. The sum
     mirrors what .fpm-cat's own box would have been: top+bottom
     padding plus whichever is taller, the icon or the name's text
     line (name and icon now sit side by side on one row, not
     stacked, so it's a max() rather than a sum of the two). */
  min-height: calc(var(--fpm-cat-padding-v) * 2 + max(var(--fpm-cat-icon-size), 18px));
}
.fpm-nav li:first-child{ border-radius: 13px 13px 0 0; }
.fpm-nav li:last-child{ border-radius: 0 0 13px 13px; }
.fpm-nav li + li{ border-top: 1px solid var(--fpm-line); }
.fpm-cat{
  /* Positioned to fill the <li> exactly, instead of relying on
     width:100% on the button itself. Some buttons were measuring
     ~177px instead of the full ~258px <li> width even with
     width:100% !important set directly on .fpm-cat — something in
     this site's theme/Elementor CSS was sizing the button to its
     content despite that. Absolute positioning against the <li>
     (which has a real, unambiguous 100% width from the CSS grid
     column) sidesteps that fight entirely: the button's box is set
     by its relatively-positioned parent, not by its own width rules. */
  position: absolute;
  inset: 0;
  max-width: none;
  min-width: 0;
  /* Single horizontal row: name left, icon right, both centered on
     the same vertical line. align-items:center is what puts the name
     text and the icon's vertical midpoint at the same height — the
     earlier stacked name-row/icon-row layout put the icon visibly
     below the name instead of beside it. */
  display:flex !important; flex-direction: row !important; align-items:center !important; justify-content:space-between !important;
  gap: var(--fpm-cat-gap);
  background:transparent !important; border:none !important;
  padding: var(--fpm-cat-padding-v) 4px var(--fpm-cat-padding-v) var(--fpm-cat-padding-h) !important;
  font-family: inherit;
  font-size: 13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color: var(--fpm-cat-text) !important;
  border-radius: 0;
  cursor:pointer;
  transition: background .18s ease, color .18s ease;
  text-align:left;
  box-sizing: border-box;
  text-decoration: none !important;
  box-shadow: none !important;
  line-height: normal !important;
  vertical-align: middle !important;
}
.fpm-cat[aria-current="true"]{ color: var(--fpm-cat-active-text) !important; }
.fpm-cat,
.fpm-cat:hover,
.fpm-cat:focus,
.fpm-cat span{
  text-decoration: none !important;
  border-bottom: none !important;
  vertical-align: middle !important;
  margin: 0 !important;
  line-height: normal !important;
}
.fpm-cat span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
  display: block;
  /* Flexible, not fixed: lets the name shrink within whatever space
     remains after the icon's own fixed-width slot, so it never forces
     the button wider than its 100%-of-<li> box (a fixed px width here
     was the original cause of the icon getting squeezed off-screen
     for longer category names). */
  flex: 1 1 auto;
  min-width: 0;
}
.fpm-cat-icon{
  width: var(--fpm-cat-icon-size); height: var(--fpm-cat-icon-size);
  /* Fixed-width slot, sized to the icon setting (never smaller than
     36px), so the slot's position is stable regardless of icon size
     or name length. */
  flex: 0 0 max(36px, var(--fpm-cat-icon-size));
  /* Right-pinned, not centered: even with each SVG's ink bounding box
     now normalized to fill its own square viewBox equally, a centered
     fit still anchors on the *box*, not the rightmost ink pixel. The
     icon's own fixed-width slot (flex-basis above) only positions the
     26x26 box itself — object-position then has to pin the artwork to
     that box's right edge too, or a snugger silhouette (e.g. a
     crouched rabbit) still ends up with visible slack on the right
     that a wider one (e.g. a turkey's tail) doesn't. */
  object-fit:contain; object-position:right center;
  display:block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  /* Icon stays clearly visible for every category, not just the
     active one — only the active row's highlighted background (set
     below) signals selection, not a faded icon on everything else. */
  opacity:.85;
}
.fpm-cat:hover{
  /* !important here too: devtools showed Elementor's own button
     reset (.elementor-kit-26 button, [type="button"], etc., from
     post-26.css) winning the background-color property specifically
     — our rule set background without !important, so on a tie in
     source order / specificity that pink/magenta global accent color
     showed through instead of this hover tint. */
  background: var(--fpm-cat-hover) !important;
  color: var(--fpm-cat-text) !important;
}
.fpm-cat[aria-current="true"]{ background: var(--fpm-cat-active-bg) !important; color: var(--fpm-cat-active-text) !important; }
.fpm-cat[aria-current="true"]:hover{ background: var(--fpm-cat-active-bg) !important; filter: brightness(0.95); color: var(--fpm-cat-active-text) !important; }
.fpm-cat[aria-current="true"] .fpm-cat-icon{ opacity:1; filter: brightness(0) invert(1); }
.fpm-cat:focus-visible{ outline: 2px solid var(--fpm-cat-active-bg); outline-offset: 2px; }

.fpm-grid{
  position: relative;
}
.fpm-panel{ display:block; }
.fpm-panel[hidden]{ display:none; }
.fpm-grid-inner{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

.fpm-card{
  background:#fff;
  border: 1px solid var(--fpm-line);
  border-radius: 16px;
  padding: 18px;
  display:flex; flex-direction:column;
  transition: background-color .15s ease;
}
.fpm-card:hover{ background: var(--fpm-card-hover); }

.fpm-thumb{
  position:relative;
  aspect-ratio: 1/1;
  border-radius: 12px;
  background: linear-gradient(135deg,#f4f1ea,#ece7da);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  overflow:hidden;
}
.fpm-thumb img{ width:100%; height:100%; object-fit:cover; }
.fpm-thumb-placeholder{ width:50%; height:50%; opacity:.5; }
.fpm-thumb-placeholder svg{ width:100%; height:100%; }
.fpm-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:#d6a13c; color:#1c1c1a;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
}

.fpm-name{ font-size:17px; font-weight:700; margin:0 0 6px; }
.fpm-sku{ color: var(--fpm-muted); font-size:12.5px; letter-spacing:.03em; margin:0 0 10px; flex-grow:1; }

.fpm-price{ margin:0 0 8px; font-size:15px; }
.fpm-price .now{ color: var(--fpm-price); font-weight:700; }
.fpm-price .was{ color: var(--fpm-muted); text-decoration: line-through; margin-left:8px; font-weight:500; }

.fpm-desc{ color: var(--fpm-muted); font-size:13.5px; line-height:1.5; margin: 0 0 18px; flex-grow:1; }
.fpm-empty{ text-align:center; color: var(--fpm-muted); padding: 60px 20px; font-size:14px; }

.fpm-load-sentinel{
  display:flex; align-items:center; justify-content:center;
  padding: 28px 0 8px;
  min-height: 40px;
}
.fpm-load-spinner{
  width:24px; height:24px;
  border-radius:50%;
  border: 3px solid var(--fpm-line);
  border-top-color: var(--fpm-rust);
  animation: fpm-spin .7s linear infinite;
}
@keyframes fpm-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .fpm-load-spinner{ animation: none; }
}

.fpm-add{
  border:none; cursor:pointer;
  background: var(--fpm-rust); color: var(--fpm-btn-text);
  font-family: inherit;
  font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding: 12px 18px; border-radius: 999px;
  transition: background .15s ease, transform .1s ease;
}
.fpm-add:hover{ background: var(--fpm-rust-dark); }
.fpm-add:active{ transform: scale(.97); }
.fpm-add.is-added{ background: #4a7c4e; }

.fpm-cart-toggle{
  display:flex; align-items:center; gap:8px;
  background: var(--fpm-cart-accent); color: var(--fpm-btn-text);
  border:none; cursor:pointer;
  font-family: inherit; font-size:13px; font-weight:700; letter-spacing:.04em;
  padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  flex-shrink: 0;
  white-space: nowrap;
  transition: filter .15s ease;
  grid-column: 3;
  justify-self: end;
}
.fpm-cart-toggle:hover{ filter: brightness(0.92); }
.fpm-cart-icon{ width:18px; height:18px; flex:0 0 18px; }

.fpm-cart-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 999;
}
.fpm-cart-panel{
  position: fixed; top:0; right:0; height:100vh; width: min(380px, 100vw);
  background: var(--fpm-cart-bg); color: var(--fpm-cart-text);
  z-index:1000;
  display:flex; flex-direction:column;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  padding: 22px;
  overflow-y:auto;
}
.fpm-cart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.fpm-cart-head h3{ margin:0; font-size:18px; color: inherit; }
.fpm-cart-close{ background:none; border:none; font-size:24px; cursor:pointer; line-height:1; color: inherit; opacity:.6; }

.fpm-cart-items{ flex-grow:0; margin-bottom:16px; }
.fpm-cart-empty{ color: inherit; opacity:.65; font-size:14px; }
.fpm-cart-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom: 1px solid var(--fpm-line);
  flex-wrap: wrap;
}
.fpm-cart-row .ci-name{ font-size:14px; font-weight:600; }
.fpm-cart-row .ci-meta{ font-size:12px; opacity:.65; }
.fpm-cart-qty{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.fpm-cart-qty button{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--fpm-line);
  background:transparent; color:inherit; cursor:pointer; font-size:14px; line-height:1;
}
.fpm-cart-remove{
  border:none; cursor:pointer;
  background: var(--fpm-remove-bg); color: var(--fpm-remove-text);
  font-family: inherit; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  transition: background .15s ease;
}
.fpm-cart-remove:hover{ background: var(--fpm-remove-bg-dark); }

.fpm-cart-total{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; padding:12px 0; border-top: 1px solid var(--fpm-line); margin-bottom:16px;
}
.fpm-cart-total strong{ color: var(--fpm-cart-accent); }

.fpm-checkout-form{ display:flex; flex-direction:column; gap:10px; }
.fpm-checkout-title{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.65; margin: 4px 0; }
.fpm-checkout-form input, .fpm-checkout-form textarea{
  font-family: inherit; font-size:14px;
  border: 1px solid var(--fpm-line); border-radius: 8px; padding: 10px 12px;
  width:100%; resize: vertical;
  background: transparent; color: inherit;
}
.fpm-place-order{
  border:none; cursor:pointer; background: var(--fpm-placeorder-bg); color: var(--fpm-placeorder-text);
  font-family: inherit; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:12px 18px; border-radius:999px; margin-top:6px;
}
.fpm-place-order:hover{ background: var(--fpm-placeorder-bg-dark); }
.fpm-place-order:disabled{ opacity:.6; cursor:default; }
.fpm-checkout-msg{ font-size:13px; margin:6px 0 0; min-height:18px; }
.fpm-checkout-msg.is-error{ color:#c0392b; }
.fpm-checkout-msg.is-success{ color:#4a7c4e; }

.fpm-toast{
  position: fixed; left:50%; bottom:28px; transform: translate(-50%, 20px);
  background: var(--fpm-ink); color:#fff;
  font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:1001;
}
.fpm-toast.show{ opacity:1; transform: translate(-50%, 0); }

@media (max-width: 860px){
  .fpm-head-row{ grid-template-columns: 1fr; gap: 16px; }
  .fpm-head{ grid-column: 1; }
  .fpm-cart-toggle{ grid-column: 1; justify-self: center; }
  .fpm-layout{ grid-template-columns: 1fr; }
  .fpm-nav{ position: static; display:flex; flex-wrap: nowrap; overflow-x:auto; gap:4px; padding:8px 6px; border:none; background:transparent; -webkit-overflow-scrolling: touch; }
  .fpm-nav li{ flex: 0 0 auto; width:auto; min-height: auto; }
  .fpm-nav li + li{ border-top: none; }
  .fpm-nav li .fpm-cat{ border-radius: 999px !important; border: 1px solid var(--fpm-line); background: #fff; padding: 10px 14px; gap:6px; position: static; flex-direction: row !important; align-items: center !important; width: auto; }
  .fpm-nav li .fpm-cat[aria-current="true"]{ background: var(--fpm-cat-active-bg); border-color: var(--fpm-cat-active-bg); }
  .fpm-cat{ white-space:nowrap; }
  .fpm-cat span{ width:auto; flex:0 1 auto; }
  .fpm-cat-icon{ width:18px; height:18px; flex:0 0 18px; margin-left:4px; }
  .fpm-grid-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .fpm-grid-inner{ grid-template-columns: 1fr; }
  #fpm-root{ padding: 40px 14px; }
  .fpm-cart-panel{ width: 100vw; }
}