/* ==========================================================================
   Woonklasse white-label skin for the kies-sanitair dealer catalogue.
   Injected by badkamer-proxy AFTER the app's own stylesheets.
   Canonical color system: woonklasse-kleursysteem.md (2026-07).
   Rules: gold #E8B44A is SCARCE (buttons/clickables only, max ~2 per screen,
   text on gold #412402); no pure white/black; warm neutrals everywhere.
   ========================================================================== */

/* ---- fonts (self-hosted via the proxy origin) --------------------------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/__wk/fonts/anton-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/__wk/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --wk-merk: #3A3A38;
  --wk-actie: #E8B44A;
  --wk-achtergrond: #FAF9F7;
  --wk-vlak: #E5DED4;
  --wk-tekst: #2B2A28;
  --wk-merk-hover: #4C4C49;
  --wk-actie-hover: #D4A038;
  --wk-actie-tekst: #412402;
  --wk-tekst-secundair: #A2968A;
  --wk-rand: #DDD5C9;
  --wk-rand-sterk: #A2968A;
  --wk-succes: #3B6D11;
  --wk-succes-vlak: #EAF3DE;
  --wk-fout: #A32D2D;
  --wk-fout-vlak: #FCEBEB;
  --wk-radius: 8px;
}

/* ---- base ---------------------------------------------------------------- */
html, body {
  background: var(--wk-achtergrond) !important;
  color: var(--wk-tekst);
}
body *:not(svg):not(path) {
  font-family: 'Inter', 'Epilogue', sans-serif !important;
}

/* selection + focus in brand tones */
::selection { background: var(--wk-vlak); color: var(--wk-tekst); }
input:focus, select:focus, textarea:focus, button:focus {
  outline: 2px solid var(--wk-rand-sterk) !important;
  outline-offset: 1px;
}

/* ---- palette-class overrides (WEBDEV .-webdev-c-N / .-webdev-bc-N) ------- */
/* every orange text role -> body text */
.-webdev-c-2, .-webdev-c-7, .-webdev-c-14, .-webdev-c-19, .-webdev-c-24,
.-webdev-c-29, .-webdev-c-44, .-webdev-c-49, .-webdev-c-52, .-webdev-c-54,
.-webdev-c-59, .-webdev-c-62, .-webdev-c-71, .-webdev-c-73, .-webdev-c-76,
.-webdev-c-79, .-webdev-c-85, .-webdev-c-4, .-webdev-c-5, .-webdev-c-6,
.-webdev-c-9, .-webdev-c-80, .-webdev-c-12, .-webdev-c-17, .-webdev-c-68,
.-webdev-c-25, .-webdev-c-27, .-webdev-c-36, .-webdev-c-51, .-webdev-c-86,
.-webdev-c-1200181489, .-webdev-c-1198989264, .-webdev-c-1199048180 {
  color: var(--wk-tekst) !important;
}
/* every orange background role -> brand anthracite (gold stays reserved) */
.-webdev-bc-2, .-webdev-bc-7, .-webdev-bc-14, .-webdev-bc-19, .-webdev-bc-24,
.-webdev-bc-29, .-webdev-bc-44, .-webdev-bc-49, .-webdev-bc-52, .-webdev-bc-54,
.-webdev-bc-59, .-webdev-bc-62, .-webdev-bc-71, .-webdev-bc-73, .-webdev-bc-76,
.-webdev-bc-79, .-webdev-bc-85, .-webdev-bc-4, .-webdev-bc-5, .-webdev-bc-6,
.-webdev-bc-9, .-webdev-bc-80, .-webdev-bc-12, .-webdev-bc-17, .-webdev-bc-68,
.-webdev-bc-25, .-webdev-bc-27, .-webdev-bc-36, .-webdev-bc-51, .-webdev-bc-86,
.-webdev-bc-1200181489, .-webdev-bc-1198989264 {
  background-color: var(--wk-merk) !important;
  color: var(--wk-achtergrond) !important;
}
/* whites -> warm background */
.-webdev-bc-0, .-webdev-bc-3, .-webdev-bc-11, .-webdev-bc-15, .-webdev-bc-18,
.-webdev-bc-20, .-webdev-bc-28, .-webdev-bc-34, .-webdev-bc-35, .-webdev-bc-37,
.-webdev-bc-38, .-webdev-bc-41, .-webdev-bc-47, .-webdev-bc-48, .-webdev-bc-53,
.-webdev-bc-57, .-webdev-bc-69, .-webdev-bc-75, .-webdev-bc-84, .-webdev-bc-87,
.-webdev-bc-88, .-webdev-bc-89, .-webdev-bc-90, .-webdev-bc-91, .-webdev-bc-92,
.-webdev-bc-93, .-webdev-bc-94, .-webdev-bc-95, .-webdev-bc-96, .-webdev-bc-97,
.-webdev-bc-98 {
  background-color: var(--wk-achtergrond) !important;
}
/* light greys -> warm tints */
.-webdev-bc-39, .-webdev-bc-40, .-webdev-bc-56, .-webdev-bc-1200192242 { background-color: #F3EFE9 !important; }
.-webdev-bc-42, .-webdev-bc-70, .-webdev-bc-45, .-webdev-bc-46, .-webdev-bc-26 { background-color: #EFEAE2 !important; }
.-webdev-bc-21, .-webdev-bc-32, .-webdev-bc-33, .-webdev-bc-78, .-webdev-bc-1218203328 { background-color: var(--wk-vlak) !important; }
.-webdev-bc-8, .-webdev-bc-43, .-webdev-bc-72, .-webdev-bc-1215431810 { background-color: var(--wk-rand) !important; }
/* near-blacks -> warm text/brand */
.-webdev-c-1, .-webdev-c-13, .-webdev-c-30, .-webdev-c-31, .-webdev-c-50,
.-webdev-c-55, .-webdev-c-58, .-webdev-c-64, .-webdev-c-65, .-webdev-c-74,
.-webdev-c-81, .-webdev-c-83, .-webdev-c-10, .-webdev-c-22, .-webdev-c-60,
.-webdev-c-61, .-webdev-c-63, .-webdev-c-82, .-webdev-c-66,
.-webdev-c-1212728721, .-webdev-c-1200325539 {
  color: var(--wk-tekst) !important;
}
.-webdev-bc-1, .-webdev-bc-13, .-webdev-bc-30, .-webdev-bc-31, .-webdev-bc-50,
.-webdev-bc-55, .-webdev-bc-58, .-webdev-bc-64, .-webdev-bc-65, .-webdev-bc-74,
.-webdev-bc-81, .-webdev-bc-83, .-webdev-bc-10, .-webdev-bc-22, .-webdev-bc-60,
.-webdev-bc-61, .-webdev-bc-63, .-webdev-bc-82, .-webdev-bc-66,
.-webdev-bc-1212728721, .-webdev-bc-1200325539 {
  background-color: var(--wk-merk) !important;
}
.-webdev-c-23 { color: var(--wk-tekst-secundair) !important; }

/* ---- header --------------------------------------------------------------- */
/* search input */
#M96, .l-8 {
  background-color: #FFFFFF00 !important;
  background: var(--wk-achtergrond) !important;
  border: 1px solid var(--wk-rand) !important;
  border-radius: var(--wk-radius) 0 0 var(--wk-radius) !important;
  color: var(--wk-tekst) !important;
  font-size: 15px !important;
  padding-left: 14px !important;
}
#M96::placeholder { color: var(--wk-tekst-secundair); }
#M96:focus { border-color: var(--wk-rand-sterk) !important; outline: none !important; }

/* search submit: gold spot #1 (arrow SVG recolored to #412402 at the proxy) */
#M97 {
  background-color: var(--wk-actie) !important;
  border: none !important;
  border-radius: 0 var(--wk-radius) var(--wk-radius) 0 !important;
  transition: background-color .15s ease;
}
#M97:hover { background-color: var(--wk-actie-hover) !important; }

/* account button: quiet light outline (its icon is dark, needs light bg) */
#M22 {
  background-color: var(--wk-achtergrond) !important;
  border: 1px solid var(--wk-rand) !important;
  border-radius: var(--wk-radius) !important;
  transition: border-color .15s ease, background-color .15s ease;
}
#M22:hover { border-color: var(--wk-rand-sterk) !important; background-color: #F3EFE9 !important; }

/* cart basket (img #C1 empty / #C2 filled — SVG recolored to brand at proxy) */
#C1, #C2 { transition: transform .12s ease; }
a:hover > #C1, a:hover > #C2 { transform: scale(1.06); }

/* ---- nav menu bar ---------------------------------------------------------- */
#M3, #M3 td, nav#M5, nav#M5 ul {
  background-color: var(--wk-merk) !important;
}
#M3 { border-radius: var(--wk-radius); overflow: hidden; }
nav#M5 a.wbLienMenu,
nav#M5 a.wbLienMenu:visited {
  color: #F2EFEA !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  background: transparent !important;
  transition: background-color .15s ease, color .15s ease;
}
nav#M5 a.wbLienMenu:hover,
nav#M5 a.wbLienMenu.wbSurvol,
nav#M5 li:hover > a.wbLienMenu {
  color: #FFFDF9 !important;
  background-color: var(--wk-merk-hover) !important;
}
/* selected/current menu item (the app marks it with orange color classes,
   which we've neutralised; give it a subtle underline instead) */
nav#M5 a.wbLienMenu[class*="l-1 "] { box-shadow: inset 0 -2px 0 var(--wk-actie); }

/* dropdown / mega menu */
.WDSousMenu, .WDSousMenu ul, .WDSousMenu li {
  background-color: var(--wk-achtergrond) !important;
  border-color: var(--wk-rand) !important;
}
.WDSousMenu {
  border: 1px solid var(--wk-rand) !important;
  border-radius: var(--wk-radius) !important;
  box-shadow: 0 12px 32px rgba(43, 42, 40, .14) !important;
  overflow: hidden;
  padding: 6px 0 !important;
}
.WDSousMenu a, .WDSousMenu td, .WDSousMenu span {
  color: var(--wk-tekst) !important;
  font-size: 14px !important;
}
.WDSousMenu li:hover, .WDSousMenu a:hover, .WDSousMenu .wbSurvol {
  background-color: var(--wk-vlak) !important;
  color: var(--wk-tekst) !important;
}

/* ---- headings --------------------------------------------------------------- */
.l-46, .l-45, .l-44, td[id^="A9"].l-46 {
  font-family: 'Anton', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  color: var(--wk-tekst) !important;
  letter-spacing: .01em;
  line-height: 1.25 !important;
}

/* hero text blocks: Anton display type, clean single soft shadow for legibility */
#tzA5, #tzA6 { background: transparent; }
#A5 span, #A6 span {
  font-family: 'Anton', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  color: #FBF8F3 !important;
  text-shadow: 0 3px 20px rgba(35, 34, 32, .6) !important;
  letter-spacing: .02em;
  line-height: 1.28 !important;
}

/* ---- links / breadcrumbs / footer ------------------------------------------- */
.l-92, .l-92 a, a.l-92 { color: var(--wk-tekst) !important; }
.l-92.wbSurvol, .l-92:hover, a.l-92:hover { color: var(--wk-tekst-secundair) !important; }
/* breadcrumb trail */
[class*="A22_0"], a[class*="A22_0"] { color: var(--wk-tekst-secundair) !important; text-decoration: none !important; }
[class*="A22_1"] { color: var(--wk-tekst-secundair) !important; }
[class*="A22_2"] { color: var(--wk-tekst) !important; font-weight: 600 !important; }
a[class*="A22_0"]:hover { color: var(--wk-tekst) !important; text-decoration: underline !important; }

/* generic link tone (WEBDEV renders many links via .l-N classes; orange is
   already neutralised above — this catches leftover default blues) */
a { color: inherit; }

/* footer buttons (synchr/Msg/Banner service buttons) */
.l-95 { color: var(--wk-tekst-secundair) !important; background-color: var(--wk-vlak) !important; border-color: var(--wk-vlak) !important; border-radius: var(--wk-radius) !important; }

/* ---- generic buttons ---------------------------------------------------------- */
button.wblien {
  border-radius: var(--wk-radius) !important;
  transition: background-color .15s ease, border-color .15s ease;
}

/* ---- primary CTA (tagged by injected JS): the ONE gold spot on the page ------- */
/* "In Winkelmand" / "Afrekenen" etc. Overrides the app's teal (now brand). */
.wk-cta-gold, .wk-cta-gold * {
  background-color: var(--wk-actie) !important;
  color: var(--wk-actie-tekst) !important;
  border-color: var(--wk-actie) !important;
  fill: var(--wk-actie-tekst) !important;
}
.wk-cta-gold {
  border-radius: var(--wk-radius) !important;
  box-shadow: 0 2px 10px rgba(65, 36, 2, .18) !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.wk-cta-gold:hover { background-color: var(--wk-actie-hover) !important; box-shadow: 0 4px 16px rgba(65, 36, 2, .26) !important; }
/* recolor a white arrow glyph inside the CTA to the dark-brown text tone */
.wk-cta-gold img { filter: brightness(0) saturate(100%) invert(11%) sepia(58%) saturate(2600%) hue-rotate(18deg) brightness(92%) !important; }

/* success state text ("Op voorraad") in the darker brand success green */
[class*="voorraad"], .wk-succes { color: var(--wk-succes) !important; }

/* configurator step tiles (were teal -> brand via remap): round + hover lift */
[class*="-webdev-bc-"][class*="1200092752"] { border-radius: var(--wk-radius) !important; }

/* ---- product / category cards ---------------------------------------------------- */
/* Category subcategory tiles: the app builds them as bordered boxes with a grey
   caption bar. Warm the border + round both the box and its caption bar. */
img { border-radius: 3px; }

/* subcategory tile caption bars (were #E5E5E5 -> now vlak via CSS remap): round
   the bottom to match the tile and add a hover lift on the whole tile link. */
td:has(> div > img) { border-radius: var(--wk-radius); }

/* search-result & category cards share the .l-142 price cell + neighbouring
   panels. Emphasise the price in brand text, bold. */
.l-142, [id*="ATT_A52"], [id^="zrl_"][id*="A19"] {
  color: var(--wk-tekst) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* pagination: numbers as quiet links, current page a gold-underlined pill */
[class*="wbPager"], .pagination { color: var(--wk-tekst) !important; }
[class*="Pagination"] a, [class*="pagination"] a { color: var(--wk-tekst-secundair) !important; }

/* "Bekijk alle" / helper links (were orange -> remapped, keep them quiet) */
a[class*="l-"]:not(.wbLienMenu) { text-decoration: none; }

/* sort dropdown + result count row breathe a little */
select { padding: 6px 10px !important; }

/* inputs everywhere (filters, quantity, sort dropdown) */
input[type="text"], input:not([type]), input[type="search"], input[type="number"], select, textarea {
  background-color: var(--wk-achtergrond) !important;
  border: 1px solid var(--wk-rand) !important;
  border-radius: var(--wk-radius) !important;
  color: var(--wk-tekst) !important;
}
select:hover, input[type="text"]:hover { border-color: var(--wk-rand-sterk) !important; }

/* checkboxes in brand tone */
input[type="checkbox"], input[type="radio"] { accent-color: var(--wk-merk); }

/* ---- scrollbar (subtle, warm) --------------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--wk-achtergrond); }
::-webkit-scrollbar-thumb { background: var(--wk-rand); border-radius: 6px; border: 3px solid var(--wk-achtergrond); }
::-webkit-scrollbar-thumb:hover { background: var(--wk-rand-sterk); }

/* ---- keep the dealer label hidden (also in proxy inline CSS) --------------------- */
#tzM12 { visibility: hidden !important; }

/* ==========================================================================
   Fixes v5
   ========================================================================== */

/* Logo (img#M9): the dealer-uploaded image has a hard white rounded box baked
   into its pixels. multiply blends that white into the warm page background
   while keeping the dark antraciet mark intact. */
#M9, .wk-logo img { mix-blend-mode: multiply; }

/* Cart count (HTML overlay #C5 on the basket SVG): light text on the now
   antraciet badge circle (recolored at the proxy). */
#C5, a#C5.l-5 { color: #FAF9F7 !important; font-weight: 600 !important; text-decoration: none !important; }

/* ==========================================================================
   Rebuilt Woonklasse header (injected by /__wk/header.js).
   EXACT values from the Woonklasse store theme
   (loods5-clone/shopify-theme/assets/style.css): .header/.header-inner/
   .logo/.header-right .search/.hicon/.badge/.mainnav/.mega and the
   <=900px .topnav.open mobile pattern. wk- prefixed to avoid app collisions.
   ========================================================================== */

#wk-header, #wk-header * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; box-sizing: border-box; }

/* .header */
.wk-hd {
  position: sticky; top: 0; z-index: 50;
  background: var(--wk-achtergrond);
  border-bottom: 1px solid var(--wk-rand);
  transition: box-shadow .25s;
}
.wk-hd.wk-scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }

/* .header-inner */
.wk-hd-inner {
  max-width: 1360px; margin: 0 auto; padding: 14px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}
.wk-hd-left { display: flex; align-items: center; gap: 24px; min-width: 0; }

/* .menu-toggle */
.wk-toggle { display: none; background: none !important; border: 0 !important; color: var(--wk-tekst); cursor: pointer; padding: 0 !important; outline: none !important; }
.wk-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* .header .logo — 58px box, 66px mark overflowing into the padding */
.wk-logo { display: flex; align-items: center; justify-self: center; height: 58px; overflow: visible; }
.wk-logo img { height: 66px !important; width: auto !important; display: block; border-radius: 0 !important; }
.wk-logo-txt { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--wk-tekst); white-space: nowrap; }

/* .header-right */
.wk-hd-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

/* .header-right .search — underline only, no box */
.wk-search { flex: 0 1 220px; display: flex; align-items: center; gap: 6px; background: none !important; border: 0 !important; border-bottom: 1px solid var(--wk-rand) !important; border-radius: 0 !important; padding: 3px 0 !important; max-width: 220px; }
.wk-search input, #wk-header .wk-search input[type="search"] {
  flex: 1; border: 0 !important; background: none !important; padding: 3px 0 !important;
  font-size: 14px !important; outline: none !important; color: var(--wk-tekst) !important;
  border-radius: 0 !important; min-width: 0;
}
.wk-search input::placeholder { color: var(--wk-tekst-secundair); }
.wk-search-btn, #wk-header button.wk-search-btn {
  width: 26px; height: 26px; border: 0 !important; border-radius: 0 !important;
  background: none !important; color: var(--wk-tekst); cursor: pointer;
  display: grid; place-items: center; padding: 0 !important; outline: none !important;
}
.wk-search-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* .hicon */
.wk-hicon, #wk-header button.wk-hicon {
  position: relative; color: var(--wk-tekst); display: grid; place-items: center;
  background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer; outline: none !important;
}
.wk-hicon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wk-hicon:hover { color: var(--wk-tekst); }

/* .hicon .badge — antraciet, light text */
.wk-badge {
  position: absolute; top: -6px; right: -7px; background: var(--wk-merk);
  color: var(--wk-achtergrond); font-size: 10px; font-style: normal;
  min-width: 16px; height: 16px; border-radius: 8px; display: none;
  place-items: center; padding: 0 4px; line-height: 1;
}

/* .mainnav — theme second-row nav pattern (categories) */
.wk-mainnav { border-top: 1px solid var(--wk-rand); position: relative; }
.wk-mainnav ul { max-width: 1360px; margin: 0 auto; padding: 0 24px; list-style: none; display: flex; gap: 34px; }
.wk-mainnav li { list-style: none; }
.wk-mainnav a {
  display: inline-block; padding: 14px 0; font-size: 14.5px; font-weight: 600;
  color: var(--wk-tekst); border-bottom: 2px solid transparent; transition: .15s;
  text-decoration: none !important; white-space: nowrap;
}
.wk-mainnav li:hover > a, .wk-mainnav a.wk-active { border-color: var(--wk-actie); }

/* .mega */
.wk-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--wk-achtergrond); border-top: 1px solid var(--wk-rand);
  box-shadow: 0 6px 24px rgba(43, 42, 40, .10);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s; z-index: 40;
}
.wk-mega.wk-open { opacity: 1; visibility: visible; transform: none; }
.wk-mega-cols { max-width: 1360px; margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.wk-mega-h { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--wk-tekst-secundair); margin-bottom: 12px; font-weight: 700; text-decoration: none !important; }
.wk-mega-a { display: block; padding: 5px 0; font-size: 14px; color: var(--wk-tekst); text-decoration: none !important; }
.wk-mega-a:hover { color: var(--wk-tekst); }

/* mobile dropdown — theme .topnav.open pattern */
.wk-mobnav { display: none; }

@media (max-width: 900px) {
  .wk-mainnav { display: none; }
  .wk-mega { display: none; }
  .wk-toggle { display: grid; }
  .wk-hd-inner { grid-template-columns: auto 1fr auto; }
  .wk-hd-right .wk-search-desk { display: none !important; }
  .wk-logo { justify-self: center; }
  .wk-mobnav.wk-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--wk-achtergrond);
    border-bottom: 1px solid var(--wk-rand); box-shadow: 0 6px 24px rgba(43, 42, 40, .10);
    padding: 8px 24px 16px; z-index: 45; max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .wk-mob-item { border-bottom: 1px solid var(--wk-rand); }
  .wk-mob-head { display: flex; align-items: center; justify-content: space-between; }
  .wk-mob-a { display: block; flex: 1; padding: 11px 0; font-size: 15px; font-weight: 600; color: var(--wk-tekst); text-decoration: none !important; }
  .wk-mob-tog { background: none !important; border: 0 !important; padding: 8px !important; color: var(--wk-tekst-secundair); cursor: pointer; outline: none !important; }
  .wk-mob-tog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .15s; }
  .wk-mob-item.wk-open .wk-mob-tog svg { transform: rotate(180deg); }
  .wk-mob-sub { display: none; padding: 0 0 10px; }
  .wk-mob-item.wk-open .wk-mob-sub { display: block; }
  .wk-mob-suba { display: block; padding: 7px 0 7px 12px; font-size: 14px; color: var(--wk-tekst); text-decoration: none !important; }
  .wk-mob-subh { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--wk-tekst-secundair); font-weight: 700; }
  .wk-mob-sub3 { padding-left: 24px; }
  .wk-search-mob { display: flex; margin-top: 14px; max-width: none; flex: none; }
}