/* ==========================================================================
   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; }
}

/* ==========================================================================
   Mobile app-DOM header variant (.wk-hd-mob, built when the app serves its
   phone layout: no #M5 menubar; burger delegates to the app's #M21 and the
   app's own category popup is restyled below as .wk-mob-menu).
   ========================================================================== */
.wk-hd-mob .wk-hd-inner { grid-template-columns: auto 1fr auto; padding: 12px 16px 8px; }
.wk-hd-mob .wk-toggle { display: grid; }
.wk-hd-mob .wk-logo { height: 46px; }
.wk-hd-mob .wk-logo img { height: 54px !important; }
.wk-msearch { padding: 0 16px 10px; }
.wk-msearch .wk-search { max-width: none; flex: 1 1 auto; display: flex; }

/* The app's menu popup, restyled as the store's full-screen mobile menu.
   WEBDEV lays the popup out with fixed-size tables + photo tiles; we force
   everything fluid, hide the tiles, and present the looper buttons as a
   clean text list (store .topnav.open pattern). */
.wk-mob-menu {
  position: fixed !important; left: 0 !important; top: 0 !important;
  right: auto !important; bottom: auto !important;
  width: 100vw !important; height: 100vh !important;
  max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 16px 20px 40px !important;
  background: var(--wk-achtergrond) !important;
  overflow-y: auto !important; z-index: 9990 !important;
  box-sizing: border-box !important;
}
.wk-mob-menu table, .wk-mob-menu tbody, .wk-mob-menu tr, .wk-mob-menu td,
.wk-mob-menu div, .wk-mob-menu form {
  width: 100% !important; height: auto !important;
  min-height: 0 !important; max-height: none !important;
  position: static !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important;
}
.wk-mob-menu img { display: none !important; }
.wk-mob-menu label { display: none !important; }
/* "Menu" title + "Onze producten" section header */
.wk-mob-menu #tzC13 { display: block !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em; color: var(--wk-tekst-secundair) !important; padding: 6px 0 2px !important; }
.wk-mob-menu #tzC17 { display: block !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; color: var(--wk-tekst-secundair) !important; padding: 14px 0 4px !important; }
/* every looper/category button: store mobile nav row */
.wk-mob-menu button {
  display: block !important; width: 100% !important; height: auto !important;
  text-align: left !important; background: none !important; border: 0 !important;
  border-bottom: 1px solid var(--wk-rand) !important; border-radius: 0 !important;
  padding: 13px 2px !important; margin: 0 !important;
  font-family: 'Inter', sans-serif !important; font-size: 15px !important;
  font-weight: 600 !important; color: var(--wk-tekst) !important;
  box-shadow: none !important; cursor: pointer; outline: none !important;
  white-space: normal !important; line-height: 1.35 !important;
}
/* close X stays a compact top-right control */
.wk-mob-menu #C14 {
  position: absolute !important; top: 14px !important; right: 16px !important;
  width: 30px !important; height: 30px !important; z-index: 2 !important;
  border: 0 !important; padding: 0 !important;
}
.wk-mob-menu #C14::before { content: '\00d7'; font-size: 26px; line-height: 30px; color: var(--wk-tekst); display: block; text-align: center; }

/* ==========================================================================
   v8 — Shopify add-to-cart handoff interstitial + premium restyle of the
   product-detail Kenmerken/Productinformatie, the configurator, and the
   keuzehulp wizard. WEBDEV control ids are stable per page (Axx / zrl_n_Axx).
   ========================================================================== */

/* ---- "Beschikbaarheid checken" interstitial (built by /__wk/cart.js) ----- */
#wk-checking {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center;
  background: rgba(43, 42, 40, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: 'Inter', sans-serif !important;
}
#wk-checking.wk-checking-on { display: flex; }
.wk-checking-card {
  background: var(--wk-achtergrond); border: 1px solid var(--wk-rand);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(43, 42, 40, .28);
  padding: 40px 44px; max-width: 380px; width: calc(100% - 40px); text-align: center;
}
.wk-checking-spin {
  width: 46px; height: 46px; margin: 0 auto 22px;
  border: 3px solid var(--wk-vlak); border-top-color: var(--wk-actie);
  border-radius: 50%; animation: wk-spin .8s linear infinite;
}
@keyframes wk-spin { to { transform: rotate(360deg); } }
.wk-checking-h {
  font-family: 'Anton', 'Inter', sans-serif !important; font-weight: 400;
  font-size: 22px; letter-spacing: .01em; color: var(--wk-tekst); margin-bottom: 8px;
}
.wk-checking-p { font-size: 14.5px; line-height: 1.5; color: var(--wk-tekst-secundair); }
.wk-checking-err .wk-checking-h { color: var(--wk-fout); }
.wk-checking-retry {
  margin-top: 20px; background: var(--wk-actie) !important; color: var(--wk-actie-tekst) !important;
  border: 0 !important; border-radius: var(--wk-radius); padding: 11px 22px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.wk-checking-retry:hover { background: var(--wk-actie-hover) !important; }

/* ---- product detail: Kenmerken spec table + Productinformatie ------------ */
/* Rows are a looper of per-row mini-tables (no shared tbody), so we use warm
   hairline separators + aligned label/value columns instead of zebra. */
#tzA281, #tzA34 {
  font-family: 'Anton', 'Inter', sans-serif !important; font-weight: 400 !important;
  font-size: 21px !important; color: var(--wk-tekst) !important; letter-spacing: .01em;
}
[id^="tzzrl_"][id*="_A287"] {              /* kenmerk value cell */
  border-bottom: 1px solid var(--wk-rand) !important;
  padding: 9px 10px !important; vertical-align: top !important;
}
[id^="zrl_"][id*="_A284"] {                /* kenmerk label */
  color: var(--wk-tekst-secundair) !important; font-weight: 600 !important; font-size: 13.5px !important;
}
[id^="zrl_"][id*="_A285"] {               /* kenmerk value */
  color: var(--wk-tekst) !important; font-size: 14px !important;
}
#A275, #A288 {                            /* "Lees Meer" / "Meer Kenmerken" links */
  color: var(--wk-tekst) !important; font-weight: 600 !important; text-decoration: none !important;
  border-bottom: 1px solid var(--wk-actie) !important; display: inline-block !important;
  padding: 2px 0 !important; background: none !important;
}
#A275:hover, #A288:hover { color: var(--wk-tekst-secundair) !important; }

/* ---- configurator: "Stel uw eigen badmeubel samen" ----------------------- */
/* The "Kies X" tiles were heavy black blocks (dark bg + a baked arrow PNG).
   Turn them into elegant selectable cards: warm surface, hairline border,
   own chevron, hover lift. Height kept so the paired selected-card aligns. */
button[id*="_A348"] {
  background-color: var(--wk-achtergrond) !important;
  background-image: none !important;
  border: 1px solid var(--wk-rand) !important;
  border-radius: var(--wk-radius) !important;
  color: var(--wk-tekst) !important;
  font-weight: 600 !important; font-size: 14px !important;
  text-align: left !important; line-height: 1.35 !important;
  padding: 18px 16px 46px !important;
  box-shadow: 0 1px 2px rgba(43, 42, 40, .04) !important;
  position: relative !important; overflow: hidden !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
button[id*="_A348"]:hover {
  border-color: var(--wk-rand-sterk) !important;
  box-shadow: 0 6px 18px rgba(43, 42, 40, .10) !important;
  transform: translateY(-2px) !important;
}
button[id*="_A348"]::after {              /* our own chevron affordance */
  content: '\203A'; position: absolute; left: 16px; bottom: 14px;
  width: 30px; height: 30px; border: 1px solid var(--wk-rand); border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  color: var(--wk-merk); background: var(--wk-vlak);
  transition: background .15s, color .15s, border-color .15s;
}
button[id*="_A348"]:hover::after {
  background: var(--wk-actie); color: var(--wk-actie-tekst); border-color: var(--wk-actie);
}
/* the paired "selected value" cards: clean white surface, success accent */
button[id*="_A344"] {
  background: var(--wk-achtergrond) !important;
  border: 1px solid var(--wk-succes) !important;
  border-radius: var(--wk-radius) !important;
  color: var(--wk-tekst) !important; font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(59, 109, 17, .06) !important;
}

/* ---- keuzehulp wizard ---------------------------------------------------- */
/* choice cards (each looper cell A30_n): premium bordered cards + hover lift */
div[id^="A30_"] {
  border: 1px solid var(--wk-rand) !important; border-radius: 12px !important;
  background: var(--wk-achtergrond) !important; padding: 10px !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
div[id^="A30_"]:hover {
  border-color: var(--wk-rand-sterk) !important;
  box-shadow: 0 8px 22px rgba(43, 42, 40, .10) !important; transform: translateY(-2px) !important;
}
button[id*="_A33"] {
  background: none !important; border: 0 !important; color: var(--wk-tekst) !important;
  font-weight: 600 !important; font-size: 14px !important;
}
/* nav: Vorige = secondary outline, Volgende = brand primary */
#A7, #A8 {
  background-image: none !important; border-radius: var(--wk-radius) !important;
  font-weight: 700 !important; font-size: 14px !important; padding: 12px 22px !important;
  transition: background-color .15s, border-color .15s, color .15s !important;
}
#A7 { background: var(--wk-achtergrond) !important; border: 1px solid var(--wk-rand) !important; color: var(--wk-tekst) !important; }
#A7:hover { border-color: var(--wk-rand-sterk) !important; background: #F3EFE9 !important; }
#A8 { background: var(--wk-merk) !important; border: 1px solid var(--wk-merk) !important; color: var(--wk-achtergrond) !important; }
#A8:hover { background: var(--wk-merk-hover) !important; border-color: var(--wk-merk-hover) !important; }

/* ==========================================================================
   v9 — product-detail sticky reflow (pos19 grid, driven by /__wk/pdp.js) +
   store nav strip (Home/Badkamer/Raamdecoratie/... injected by header.js).
   ========================================================================== */

/* ---- PDP: sticky media left, info + configurator scrolling right --------- */
.wk-pdp {
  display: grid !important;
  grid-template-columns: minmax(280px, 37%) 1fr !important;
  gap: 46px !important;
  align-items: start !important;
}
.wk-pdp > .wk-pdp-media, .wk-pdp > .wk-pdp-main {
  float: none !important; width: auto !important; margin: 0 !important;
}
.wk-pdp-media {
  position: -webkit-sticky !important; position: sticky !important;
  top: var(--wk-sticky-top, 151px) !important; align-self: start !important;
}
.wk-pdp-main { min-width: 0 !important; }
/* The configurator is a fixed-column WEBDEV table (~1280px) that cannot reflow
   to fewer columns via CSS; contain it in the right column with horizontal
   scroll rather than letting it break the page width. */
.wk-pdp-cfg { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--wk-rand); overflow-x: auto; }
.wk-pdp-cfg::-webkit-scrollbar { height: 8px; }

@media (max-width: 900px) {
  .wk-pdp { display: block !important; }
  .wk-pdp-media { position: static !important; top: auto !important; }
  .wk-pdp-cfg { margin-top: 24px; }
}

/* ---- store nav strip (above the supplier category nav) ------------------- */
.wk-storenav {
  border-top: 1px solid var(--wk-rand);
  background: var(--wk-achtergrond);
}
.wk-storenav-inner {
  max-width: 1360px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 26px; align-items: center;
}
.wk-storenav a {
  display: inline-block; padding: 9px 0; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--wk-tekst-secundair); text-decoration: none !important;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.wk-storenav a:hover { color: var(--wk-tekst); }
.wk-storenav a.wk-storenav-active {
  color: var(--wk-tekst); border-bottom-color: var(--wk-actie); cursor: default;
}
/* mobile: horizontal scrollable strip */
.wk-storenav-mob { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wk-storenav-mob .wk-storenav-inner { padding: 0 16px; gap: 20px; }
.wk-storenav-mob::-webkit-scrollbar { height: 0; }

@media (max-width: 900px) {
  .wk-storenav-inner { padding: 0 16px; gap: 20px; }
}

/* ==========================================================================
   v9 — EXACT Woonklasse store chrome (header + footer + WhatsApp), ported
   from loods5-clone/shopify-theme. Scoped under #wk-store-chrome /
   .wk-store-footer / .wa-widget so it never bleeds into the supplier app.
   Theme design tokens (kleursysteem) aliased below.
   ========================================================================== */
:root {
  --ink:#2B2A28; --merk:#3A3A38; --merk-hover:#4C4C49; --muted:#A2968A;
  --line:#DDD5C9; --line-strong:#A2968A; --bg:#FAF9F7; --card:#E5DED4;
  --accent:#E8B44A; --accent-dark:#D4A038; --accent-text:#412402;
  --sale:#A32D2D; --success:#3B6D11; --max:1360px; --r:14px;
  --shadow:0 6px 24px rgba(43,42,40,.10);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
#wk-store-chrome, #wk-store-chrome *, .wk-store-footer, .wk-store-footer *,
.wa-widget, .wa-widget * { box-sizing: border-box; font-family: var(--font) !important; }
#wk-store-chrome a, .wk-store-footer a { text-decoration: none; }
#wk-store-chrome img, .wk-store-footer img { border-radius: 0 !important; display: block; max-width: 100%; }
#wk-store-chrome h4, .wk-store-footer h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }

/* topbar (utility bar) */
.wk-store-topbar { background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.wk-store-topbar .topbar-inner { max-width: var(--max); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; }
.wk-store-topbar .topbar-usps { display: flex; gap: 26px; color: var(--muted); }
.wk-store-topbar .topbar-usps span { display: inline-flex; align-items: center; gap: 7px; }
.wk-store-topbar .chk { width: 13px; height: 13px; }
.wk-store-topbar .topbar-links { display: flex; gap: 24px; }
.wk-store-topbar .topbar-links a { color: var(--ink); position: relative; }
.wk-store-topbar .topbar-links a:hover { color: var(--accent); }
.wk-store-topbar .topbar-links a:first-child::after { content: ""; position: absolute; right: -12px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.chk polyline { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }

/* main header: left nav | centered logo | right controls */
#wk-store-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
#wk-store-header.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
#wk-store-header .header-inner { max-width: var(--max); margin: 0 auto; padding: 14px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
#wk-store-header .header-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
#wk-store-header .menu-toggle { display: none; background: none !important; border: 0 !important; color: var(--ink); cursor: pointer; padding: 0 !important; outline: none !important; }
#wk-store-header .menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#wk-store-header .topnav { display: flex; gap: 26px; align-items: center; }
#wk-store-header .topnav > a { font-size: 15px; font-weight: 600; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; }
#wk-store-header .topnav > a:hover { color: var(--ink); }
#wk-store-header .topnav > a.wk-active { border-bottom-color: var(--accent); }
#wk-store-header .topnav .sale { color: var(--sale); }
#wk-store-header .logo { display: flex; align-items: center; justify-self: center; height: 58px; overflow: visible; }
#wk-store-header .logo img { height: 66px !important; width: auto !important; }
#wk-store-header .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
#wk-store-header .header-right .search { flex: 0 1 220px; display: flex; align-items: center; gap: 6px; background: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 3px 0 !important; max-width: 220px; }
#wk-store-header .header-right .search input { flex: 1; border: 0 !important; background: none !important; padding: 3px 0 !important; font-size: 14px !important; outline: none; color: var(--ink) !important; border-radius: 0 !important; }
#wk-store-header .header-right .search input::placeholder { color: var(--muted); }
#wk-store-header .search button { width: 26px; height: 26px; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0 !important; }
#wk-store-header .search button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#wk-store-header .search-nav { display: none; }
#wk-store-header .hicon { position: relative; color: var(--ink); display: grid; place-items: center; }
#wk-store-header .hicon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* mega */
#wk-store-header .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s; z-index: 40; }
#wk-store-header .mega.open { opacity: 1; visibility: visible; transform: none; }
#wk-store-header .mega-cols { max-width: var(--max); margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: repeat(3,1fr) 1.3fr; gap: 32px; }
#wk-store-header .mega-cols h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
#wk-store-header .mega-cols a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink); }
#wk-store-header .mega-feat { position: relative; border-radius: var(--r); overflow: hidden; }
#wk-store-header .mega-feat img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; border-radius: 0 !important; }
#wk-store-header .mega-feat span { position: relative; display: flex; align-items: flex-end; padding: 16px; color: var(--bg); font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.55)); height: 100%; min-height: 150px; }
#wk-store-header .mega-soon { max-width: var(--max); margin: 0 auto; padding: 40px 24px; color: var(--muted); font-size: 15px; }

/* promo banner */
#wk-store-chrome .promo-banner { background: var(--merk); color: var(--bg); display: flex; align-items: center; justify-content: center; position: relative; padding: 11px 46px; font-size: 14px; }
#wk-store-chrome .promo-banner .promo-text a { color: var(--accent); font-weight: 700; text-decoration: underline; margin-left: 6px; }
#wk-store-chrome .promo-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none !important; border: 0 !important; color: var(--bg); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 !important; }

/* supplier category strip (below the store header) */
.wk-catstrip { background: var(--bg); border-bottom: 1px solid var(--line); }
.wk-catstrip-inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; gap: 30px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.wk-catstrip-inner::-webkit-scrollbar { height: 0; }
.wk-catstrip-inner a { display: inline-block; padding: 13px 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; border-bottom: 2px solid transparent; }
.wk-catstrip-inner a:hover { border-bottom-color: var(--accent); }

/* footer */
.wk-store-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 48px 0 30px; margin-top: 20px; color: var(--ink); }
.wk-store-footer .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wk-store-footer .foot-usps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.wk-store-footer .foot-usps > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.wk-store-footer .foot-usps .chk { width: 22px; height: 22px; grid-row: 1/3; }
.wk-store-footer .foot-usps b { font-size: 14px; }
.wk-store-footer .foot-usps span { font-size: 13px; color: var(--muted); }
.wk-store-footer .foot-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 36px 0; }
.wk-store-footer .foot-cols h4 { font-size: 14px; margin-bottom: 14px; }
.wk-store-footer .foot-cols a { display: block; padding: 5px 0; font-size: 14px; color: var(--muted); }
.wk-store-footer .foot-cols a:hover { color: var(--ink); }
.wk-store-footer .foot-bottom { display: flex; align-items: center; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.wk-store-footer .foot-logo { height: 60px !important; width: auto !important; }
.wk-store-footer .foot-bottom p { font-size: 13px; color: var(--muted); margin: 0; }

/* WhatsApp widget */
.wa-widget { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.wa-btn { width: 60px; height: 60px; border-radius: 50%; background: #25d366 !important; border: 0 !important; cursor: pointer; color: var(--bg); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: .15s; }
.wa-btn svg { width: 34px; height: 34px; fill: currentColor; }
.wa-btn:hover { background: #1ebe5b !important; transform: translateY(-2px); }
.wa-pop { width: 300px; max-width: calc(100vw - 44px); background: var(--bg); border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.24); padding: 18px 18px 20px; position: relative; transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; transition: .22s ease; }
.wa-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.wa-pop-close { position: absolute; right: 10px; top: 8px; border: 0 !important; background: none !important; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.wa-pop-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.wa-avatar { width: 42px; height: 42px; border-radius: 50%; background: #25d366; color: var(--bg); display: grid; place-items: center; flex: none; }
.wa-avatar svg { width: 24px; height: 24px; fill: currentColor; }
.wa-pop-head b { font-size: 15px; display: block; color: var(--ink); }
.wa-status { font-size: 12px; color: #25a24a; }
.wa-pop-msg { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 0 0 14px; background: var(--card); padding: 11px 13px; border-radius: 2px 14px 14px 14px; }
.wa-pop-btn { display: block; text-align: center; background: #25d366 !important; color: var(--bg) !important; font-weight: 600; padding: 12px; border-radius: 10px; }
.wa-pop-btn:hover { background: #1ebe5b !important; }

/* responsive */
@media (max-width: 900px) {
  #wk-store-header .topnav { display: none; }
  #wk-store-header .topnav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 24px 16px; z-index: 45; align-items: stretch; }
  #wk-store-header .topnav.open > a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  #wk-store-header .topnav.open .search-nav { display: flex; margin-top: 14px; border-bottom: 1px solid var(--line) !important; }
  #wk-store-header .menu-toggle { display: grid; }
  #wk-store-header .header-inner { grid-template-columns: auto 1fr auto; }
  #wk-store-header .header-right .search-desk { display: none; }
  .wk-store-topbar .topbar-usps span:nth-child(2) { display: none; }
  .wk-store-footer .foot-usps, .wk-store-footer .foot-cols { grid-template-columns: repeat(2,1fr); }
  .wa-widget { right: 14px; bottom: 14px; }
}