/* WhatsTK storefront layer — batch 02: tokens, one-row header, footer.
   Design language after Vercel Next.js Commerce (MIT): neutral surfaces, one accent, rounded controls. Own code.
   Every rule is scoped to body.wtk-sf so deactivating the plugin (which removes the class) restores the old look. */
body.wtk-sf{
  --sf-bg:#ffffff; --sf-surface:#f6f6f4; --sf-line:#e5e5e2; --sf-ink:#111318; --sf-ink-2:#4a4f5a; --sf-ink-3:#6b7079;
  --sf-accent:#0f1b33; --sf-cta:#8f6a1e; --sf-cta-hover:#765716; --sf-radius:14px; --sf-radius-lg:20px; --sf-pill:999px;
  --sf-step--1:13px; --sf-step-0:15px; --sf-step-1:17px; --sf-step-2:20px; --sf-step-3:26px;
}

/* ---------- Strip under the header: hidden (its three facts stay in the footer and on the product page) ----------
   Beats the !important display rules in whatstk-storefront-mobile.css and whatstk-ui-fixes.css by specificity. */
html body.wtk-sf.wtk-sf-header div.wtk-usp{display:none!important}

/* ---------- Header: one row (desktop) ---------- */
@media (min-width:1025px){
  html body.wtk-sf-header #masthead .site-main-header-wrap .site-header-row-container-inner{border-bottom:1px solid var(--sf-line);background:var(--sf-bg)}
  html body.wtk-sf-header #masthead .site-main-header-inner-wrap{min-height:72px;gap:24px}
  html body.wtk-sf-header #masthead .site-header-main-section-left{gap:28px;flex-wrap:nowrap}
  html body.wtk-sf-header #masthead .site-branding .custom-logo{max-height:44px;width:auto}
  /* Navigation now sits on white: dark text, pill hover, no bar colours. */
  html body.wtk-sf-header #main-header .site-main-header-wrap .main-navigation .primary-menu-container > ul{gap:2px}
  html body.wtk-sf-header #main-header .site-main-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a{
    padding:8px 12px!important;border-radius:var(--sf-pill);color:var(--sf-ink-2)!important;background:transparent!important;
    font-size:var(--sf-step--1);font-weight:500;line-height:1.2;min-height:40px;display:flex;align-items:center}
  html body.wtk-sf-header #main-header .site-main-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
  html body.wtk-sf-header #main-header .site-main-header-wrap .main-navigation .primary-menu-container > ul > li.current-menu-item > a{
    color:var(--sf-ink)!important;background:var(--sf-surface)!important}
  html body.wtk-sf-header #main-header .site-main-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item:first-child > a{padding-left:12px!important}
  /* If Kadence still prints an empty bottom row container, keep it out of the layout. */
  html body.wtk-sf-header #masthead .site-bottom-header-wrap:not(:has(.site-header-item)){display:none}
  /* Search keeps flexible width but never squeezes the navigation. */
  html body.wtk-sf-header #main-header .wtk-htools .wtk-search{min-width:220px}
}
@media (min-width:1025px) and (max-width:1280px){
  html body.wtk-sf-header #main-header .wtk-htools .wtk-hlink span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* ---------- Footer ---------- */
html body.wtk-sf-footer #colophon,
html body.wtk-sf-footer #colophon .site-footer-wrap,
html body.wtk-sf-footer #colophon .site-footer-row-container-inner{background:var(--sf-surface)!important;color:var(--sf-ink-2)}
html body.wtk-sf-footer #colophon{border-top:1px solid var(--sf-line)}
html body.wtk-sf-footer #colophon .site-bottom-footer-inner-wrap{padding-top:0;padding-bottom:0}
html body.wtk-sf-footer #colophon .footer-html{width:100%}
html body.wtk-sf-footer .wtk-sf-foot{display:grid;gap:28px 32px;padding:40px 0 0;font-size:var(--sf-step--1);line-height:1.5;text-align:left}
/* !important: storefront-mobile.css sets .woocommerce-account h2 to 20px!important, which also hit these footer headings */
html body.wtk-sf-footer .wtk-sf-foot h2{margin:0 0 10px;font-size:var(--sf-step--1)!important;font-weight:600;letter-spacing:0;text-transform:none;color:var(--sf-ink);line-height:1.4!important}
html body.wtk-sf-footer .wtk-sf-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
html body.wtk-sf-footer .wtk-sf-foot li{margin:0}
html body.wtk-sf-footer .wtk-sf-foot a{color:var(--sf-ink-2)!important;text-decoration:none}
html body.wtk-sf-footer .wtk-sf-foot ul a{display:inline-flex;align-items:center;min-height:30px;padding:0}
html body.wtk-sf-footer .wtk-sf-foot li{line-height:1.4;padding:0}
html body.wtk-sf-footer .wtk-sf-foot a:hover{color:var(--sf-ink)!important;text-decoration:underline;text-underline-offset:3px}
html body.wtk-sf-footer .wtk-sf-foot p{margin:8px 0 0;max-width:36ch;color:var(--sf-ink-3)}
html body.wtk-sf-footer .wtk-sf-foot p a{text-decoration:underline;text-underline-offset:3px}
html body.wtk-sf-footer .wtk-sf-foot__name{font-size:var(--sf-step-1);font-weight:700;color:var(--sf-ink)!important;letter-spacing:-.01em}
html body.wtk-sf-footer .wtk-sf-foot__bar{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:8px;padding:16px 0 24px;border-top:1px solid var(--sf-line);color:var(--sf-ink-3);font-size:12px}
@media (max-width:767px){
  html body.wtk-sf-footer .wtk-sf-foot{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:32px}
  html body.wtk-sf-footer .wtk-sf-foot__brand{grid-column:1/-1}
  html body.wtk-sf-footer .wtk-sf-foot ul a{min-height:44px}
}
@media (min-width:768px){
  html body.wtk-sf-footer .wtk-sf-foot{grid-template-columns:2fr 1fr 1fr 1fr}
}
/* Product pages keep room under the footer for the phone buy bar (rule from ui-fixes, restated for the new surface). */
@media (max-width:768px) and (min-height:520px){
  html body.wtk-sf-footer.single-product #colophon{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ---------- batch 08: small accessibility fixes ----------
   (1) Language list opened from the keyboard (Enter/Space) in the phone menu. TranslatePress marks the open switcher
   with .is-open, but whatstk-ui-fixes.css keeps the list at max-height:0 unless its own tap class .wtk-ls-open is
   present, so the list stayed 0 px tall. When the plugin says open, show it like the tap state does. */
html.wtk-uif body.wtk-sf #mobile-drawer .wtk-switchers .trp-shortcode-overlay.is-open:not(.wtk-ls-open):has(:focus-visible) .trp-switcher-dropdown-list{max-height:320px!important}
html.wtk-uif body.wtk-sf #mobile-drawer .wtk-switchers .trp-shortcode-overlay.is-open:not(.wtk-ls-open):has(:focus-visible){box-shadow:0 8px 24px rgba(0,0,0,.28)}
/* Only for keyboard use (:focus-visible inside the switcher): after a tap TranslatePress can leave .is-open behind
   while the tap state is closed, and that state must stay closed. Focus leaving the switcher closes it again. *//* (2) Touch targets of at least 44 x 44 px: cart quantity − / + (36 x 42 before) and "show password" (22 x 22). */
html body.wtk-sf.woocommerce-cart .woocommerce-cart-form table.cart .quantity.wtk-qty .wtk-qty__btn{width:44px!important;min-width:44px;min-height:44px!important}
html body.wtk-sf .woocommerce form .password-input .show-password-input,
html body.wtk-sf form .password-input .show-password-input{width:44px!important;height:auto!important;top:0!important;bottom:0!important;right:0!important;margin:0!important;transform:none!important;translate:none!important;
  display:flex;align-items:center;justify-content:center;background-position:center;background-repeat:no-repeat}
html body.wtk-sf form .password-input input[type="password"],
html body.wtk-sf form .password-input input[type="text"]{padding-right:48px}

/* ---------- batch 15: first-visit review fixes ---------- */
/* Cookie banner on phones: the text was clipped to two lines with an ellipsis ("…we will assum…"). The whole text is
   shown now in a slightly smaller size; buttons stay on one row (Accept, Decline, Privacy policy). Wording and
   behaviour are the plugin's own and unchanged. */
@media (max-width:600px){
  html body.wtk-sf #cookie-notice .cookie-notice-container{gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important}
  html body.wtk-sf #cookie-notice .cn-text-container{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;font-size:12px!important;line-height:1.4!important}
  html body.wtk-sf #cookie-notice .cn-buttons-container{flex-wrap:nowrap}
  html body.wtk-sf #cookie-notice .cn-button:not(.cn-button-custom){min-height:40px;font-size:14px!important;padding:0 12px!important}
}
/* Phone menu: the extra links added by this plugin sit under the store's own links. */
html body.wtk-sf #mobile-drawer .wtk-sf-menu-extra > a{color:inherit}

/* ---------- batch 17: phone menu (drawer) ----------
   Light panel, store links first, account links as a second, quieter group. Currency and language switchers stay
   where they are and keep working (only colours/borders). */
html body.wtk-sf #mobile-drawer .drawer-inner{background:#fff!important;color:var(--sf-ink)!important}
html body.wtk-sf #mobile-drawer .drawer-header .toggle-close-bar{background:var(--sf-ink)!important}
html body.wtk-sf #mobile-drawer .drawer-content{padding:4px 20px 28px!important}
html body.wtk-sf #mobile-drawer .wtk-switchers{gap:8px}
html body.wtk-sf #mobile-drawer .wtk-switchers select,
html body.wtk-sf #mobile-drawer .wtk-switchers .trp-shortcode-switcher{border:1px solid var(--sf-line)!important}
html body.wtk-sf #mobile-drawer #mobile-menu > li > a{display:flex!important;align-items:center;justify-content:space-between;min-height:52px;padding:0!important;
  color:var(--sf-ink)!important;background:transparent!important;font-size:17px!important;font-weight:600!important;border-bottom:1px solid var(--sf-line)!important}
html body.wtk-sf #mobile-drawer #mobile-menu > li > a::after{content:"\203A";font-weight:400;font-size:20px;color:var(--sf-ink-3)}
html body.wtk-sf #mobile-drawer #mobile-menu > li:not(.wtk-mobile-extra):not(.wtk-sf-menu-extra) + li.wtk-mobile-extra,
html body.wtk-sf #mobile-drawer #mobile-menu > li:not(.wtk-mobile-extra):not(.wtk-sf-menu-extra) + li.wtk-sf-menu-extra{margin-top:20px}
html body.wtk-sf #mobile-drawer #mobile-menu > li.wtk-mobile-extra > a,
html body.wtk-sf #mobile-drawer #mobile-menu > li.wtk-sf-menu-extra > a{min-height:44px;font-size:15px!important;font-weight:500!important;color:var(--sf-ink-2)!important;border-bottom:0!important}
html body.wtk-sf #mobile-drawer #mobile-menu > li.wtk-mobile-extra > a::after,
html body.wtk-sf #mobile-drawer #mobile-menu > li.wtk-sf-menu-extra > a::after{content:none}

/* ---------- batch 18: shorter phone footer ----------
   One column of groups; inside each group the links sit in two columns (still 44 px tall each). */
@media (max-width:767px){
  html body.wtk-sf-footer .wtk-sf-foot{grid-template-columns:1fr;gap:20px}
  html body.wtk-sf-footer .wtk-sf-foot ul{grid-template-columns:1fr 1fr;column-gap:16px}
  html body.wtk-sf-footer .wtk-sf-foot h2{margin-bottom:4px}
}

/* ---------- batch 23: interaction details ----------
   (1) One keyboard focus ring everywhere: 2 px ink outline with a 2 px gap. Before, the Add to cart and tier buttons
   showed a white outline on white (invisible) and the quantity field / currency select showed none. The cookie banner
   (dark) keeps its own. Only :focus-visible, so mouse clicks show no ring; notices that WooCommerce focuses for screen readers (tabindex=-1) get none. */
html body.wtk-sf :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):not(#cookie-notice *):focus-visible,
html body.wtk-sf #main form.cart :is(button, input, select):focus-visible,
html body.wtk-sf #main .summary .wtk-quantity-prices button:focus-visible{outline:2px solid #111318!important;outline-offset:2px!important}
/* (2) Error notices get a light red tint so they read differently from the beige information notes. */
html body.wtk-sf .woocommerce-error,
html body.wtk-sf ul.woocommerce-error{background-color:#fdf1f1!important;border-left-color:#b81c23!important;color:var(--sf-ink)!important}
/* (3) The 'show password' eye now spans the field height (top/bottom 0) instead of 50% + translate, which left it ~22 px off-centre; see the batch 08 rule above. */

/* ---------- batch 2-01 ----------
   Phone header: an empty cart showed a black "0" badge (desktop shows none). Kadence marks only the desktop badge
   as empty (header-cart-is-empty-true); the cart fragments refresh both badges together, so the phone badge follows
   the desktop one's state and comes back as soon as something is in the cart. */
html body.wtk-sf:has(#masthead .header-cart-total.header-cart-is-empty-true) #mobile-header .header-cart-total{display:none!important}

/* ---------- batch 2-02 ----------
   Phone menu: the currency box had a grey arrow and bolder text than the language box next to it (dark arrow).
   Same arrow colour, weight and size now; the select itself is unchanged. */
html body.wtk-sf #mobile-drawer .wtk-switchers select.woocommerce-currency-switcher{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M5 8L10 13L15 8' stroke='%23143852' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:18px 18px!important;
  color:#143852!important;font-weight:400!important;font-size:15.5px!important}

/* ---------- batch 2-06: header on small laptops (1025–1279 px) ----------
   The tool area (search, account, currency, language) needs ~490 px but gets ~370 px at 1025 px, so the currency and
   language boxes were squeezed (arrow on top of "USD") and the language box slid over the cart icon; on /nl/ the cart
   was pushed off the screen. In this range: search may shrink to 140 px, smaller gaps, the boxes keep their size and
   the language box shows its flag only (the language name stays for screen readers; the open list still shows names). */
@media (min-width:1025px) and (max-width:1279px){
  html body.wtk-sf-header #main-header .wtk-htools{gap:10px}
  html body.wtk-sf-header #main-header .wtk-htools .wtk-search{min-width:140px}
  html body.wtk-sf-header #main-header .wtk-switchers > *{flex-shrink:0}
}
@media (min-width:1025px) and (max-width:1099px){
  html body.wtk-sf-header #main-header .wtk-switchers .trp-current-language-item__wrapper .trp-language-item-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- batch 2-11: mini cart line ----------
   The "1 × price" line under each item started 58 px further right than the name and options above it (an old
   padding-left on span.quantity); it lines up with them now and is a step quieter than the name. */
html body.wtk-sf .woocommerce-mini-cart .woocommerce-mini-cart-item span.quantity{padding-left:0!important;margin-top:2px;color:var(--sf-ink-2)}

/* ---------- batch 2-07: desktop footer balance ----------
   The brand column took 2 of 5 parts (458 px at 1440) for a 252 px text, leaving a wide gap before "Shop" while the
   three link columns were 229 px each. Brand 1.4 parts now; the link columns move left and get a little more room. */
@media (min-width:768px){
  html body.wtk-sf-footer .wtk-sf-foot{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
}

/* ---------- batch 2-03: desktop header currency box ----------
   Same dark arrow as the language box next to it (it was a light grey arrow). Only the arrow image. */
html body.wtk-sf #main-header select.woocommerce-currency-switcher{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M5 8L10 13L15 8' stroke='%23143852' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:16px 16px!important}