/* WhatsTK UI fixes — 2026-10-08 review (mobile 1-99, desktop D01-D80). Display only.
   Loads after every other stylesheet. Does not edit Kadence, the Customizer CSS, whatstk-storefront-polish/mobile or whatstk-cat-ring;
   it only overrides them with more specific selectors. Nothing here touches #wtk-cat-ring.
   Rules that depend on whatstk-ui-fixes.js are gated on html.wtk-uif, so the page stays usable if the script does not run. */

/* ================================================================
   A. Colour and contrast
   ================================================================ */
/* A1 (9, D02) Solid gold buttons: white text needs 4.5:1. #8f6a1e gives 4.9:1, hover #765716 gives 6.6:1. */
html:root{--wtk-gold-ink:#8f6a1e;--wtk-gold-ink-2:#765716;--wtk-field:#d3d7de;--global-palette-btn-bg:#8f6a1e;--global-palette-btn-bg-hover:#765716}
html body .wtk-btn--gold{background:var(--wtk-gold-ink)}
html body .wtk-btn--gold:hover{background:var(--wtk-gold-ink-2)}
html body.woocommerce div.product form.cart .single_add_to_cart_button.wtk-buy-now,
html body .wtk-buybar button{border-color:var(--wtk-gold-ink);background:var(--wtk-gold-ink);color:#fff}
html body.woocommerce div.product form.cart .single_add_to_cart_button.wtk-buy-now:hover,
html body .wtk-buybar button:hover{border-color:var(--wtk-gold-ink-2);background:var(--wtk-gold-ink-2);color:#fff}

/* A2 (10, D44) Text links inside the page body: navy and underlined; gold stays decorative. */
html body #primary,html body .entry-hero{--global-palette-highlight:#0f1b33;--global-palette-highlight-alt:#8f6a1e}
html body .entry-content p a:not(.button):not(.wtk-btn):not(.wtk-contact__card),
html body .entry-content.single-content li:not(.product):not(.menu-item):not([class*="tab"]) > a:not(.button):not(.page-numbers):not(.remove),
html body .woocommerce-info a:not(.button),
html body .woocommerce-message a:not(.button),
html body .woocommerce-error a:not(.button),
html body .woocommerce-privacy-policy-text a,
html body .woocommerce-LostPassword a,
html body .wtk-new-customer-hint a{color:#0f1b33;text-decoration:underline;text-underline-offset:.15em}
html body .entry-content p a:not(.button):not(.wtk-btn):hover,
html body .woocommerce-info a:not(.button):hover,
html body .woocommerce-privacy-policy-text a:hover,
html body .woocommerce-LostPassword a:hover{color:var(--wtk-gold-ink)}
html body .wtk-section__head .wtk-link:not(#wtk-cat-ring *){color:#0f1b33!important}
html body .wtk-section__head .wtk-link:not(#wtk-cat-ring *):hover{color:var(--wtk-gold-ink)!important}
html body .wtk-contact__card span{color:var(--wtk-gold-ink)}
html body .woocommerce-info{border-left-color:#b8892b}

/* A3 (67, D67) Category / Brand line under the buy buttons */
html body.single-product div.product .product_meta > span{color:#4a5568;font-weight:500}
html body.single-product div.product .product_meta > span a{color:#0f1b33;text-decoration:underline;text-underline-offset:.15em}

/* A4 (35, D33, 83) Cookie banner in site colours; wording of the buttons is left to the shop owner */
html body #cookie-notice{background-color:#0f1b33!important;font-family:inherit;font-size:14px;line-height:1.45;box-shadow:0 -6px 20px rgba(15,27,51,.18)}
html body #cookie-notice .cookie-notice-container{padding:14px 56px 14px 24px}
html body #cookie-notice .cn-text-container{font-size:14px;margin:0 8px 0 0}
html body #cookie-notice .cn-button:not(.cn-button-custom){min-width:64px;min-height:40px;margin:0 0 0 8px;padding:0 18px;border:1px solid transparent;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;line-height:1;letter-spacing:0;box-shadow:none}
html body #cookie-notice #cn-accept-cookie{background-color:#fff!important;border-color:#fff;color:#0f1b33!important}
html body #cookie-notice #cn-accept-cookie:hover{background-color:#f1ede4!important}
html body #cookie-notice #cn-refuse-cookie{background-color:transparent!important;border-color:rgba(255,255,255,.65);color:#fff!important}
html body #cookie-notice #cn-refuse-cookie:hover{background-color:rgba(255,255,255,.1)!important;border-color:#fff}
html body #cookie-notice #cn-more-info:not(.cn-button-custom){min-width:0;padding:0 8px;background-color:transparent!important;color:#fff!important;font-weight:500;text-decoration:underline;text-underline-offset:.2em}
html body #cookie-notice #cn-close-notice{right:12px;width:32px;height:32px;margin-top:-16px;padding:0;opacity:.85}
html body #cookie-notice #cn-close-notice::before,html body #cookie-notice #cn-close-notice::after{left:15px;top:8px;background-color:#fff}

/* A5 (27, D23) Chosen brand: solid navy, with a small × as the "click again to clear" hint */
html body.wtk-catalog-layout #secondary .widget_brand_nav li.chosen a{background:#0f1b33!important;border-color:#0f1b33!important;color:#fff!important;font-weight:600}
html body.wtk-catalog-layout #secondary .widget_brand_nav li.chosen a::after{content:"\00d7";float:right;margin-left:8px;font-weight:400;opacity:.85}
html body.wtk-catalog-layout #secondary .widget_brand_nav li.chosen .count{color:#0f1b33;font-weight:600}
html body.wtk-catalog-layout #secondary .widget_brand_nav li .count{color:#4a5568}

/* A6 (D55) Grid / list toggle */
html body .kadence-product-toggle-container .kadence-toggle-shop-layout{width:40px;height:40px;justify-content:center;border-color:var(--wtk-field);border-radius:10px;background:#fff;color:#4a5568}
html body .kadence-product-toggle-container .kadence-toggle-shop-layout.toggle-active,
html body .kadence-product-toggle-container .kadence-toggle-shop-layout:hover{border-color:#0f1b33;background:#fff;color:#0f1b33}

/* ================================================================
   B. Buttons and inputs: one shape, two levels
   ================================================================ */
/* B1 (49, D45) Every .button is a pill. Default = secondary (outline); the list below = primary (solid). */
html body .woocommerce a.button,html body .woocommerce button.button,html body .woocommerce input.button,
html body.woocommerce a.button,html body.woocommerce button.button,
html body.woocommerce-page a.button,html body.woocommerce-page button.button,
html body .wtk-404-links a.button,html body .wtk-empty-help .button,html body a.button.wtk-more__btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1px solid var(--wtk-gold-ink);border-radius:999px;
  background:#fff;color:#0f1b33;font-size:15px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;box-shadow:none}
html body .woocommerce a.button:hover,html body .woocommerce button.button:hover,html body .woocommerce input.button:hover,
html body.woocommerce a.button:hover,html body.woocommerce button.button:hover,
html body.woocommerce-page a.button:hover,html body.woocommerce-page button.button:hover,
html body .wtk-404-links a.button:hover,html body .wtk-empty-help .button:hover,html body a.button.wtk-more__btn:hover{background:#f1ede4;color:#0f1b33;box-shadow:none}
html body .woocommerce a.button.alt,html body .woocommerce button.button.alt,html body .woocommerce #place_order,
html body .woocommerce a.checkout-button,html body .woocommerce .return-to-shop a.button,
html body.woocommerce-account .woocommerce form button.button[type=submit],
html body .wtk-404-links a.button:first-child,html body .wtk-empty-help .button{
  border-color:var(--wtk-gold-ink);background:var(--wtk-gold-ink);color:#fff}
html body .woocommerce a.button.alt:hover,html body .woocommerce button.button.alt:hover,html body .woocommerce #place_order:hover,
html body .woocommerce a.checkout-button:hover,html body .woocommerce .return-to-shop a.button:hover,
html body.woocommerce-account .woocommerce form button.button[type=submit]:hover,
html body .wtk-404-links a.button:first-child:hover,html body .wtk-empty-help .button:hover{
  border-color:var(--wtk-gold-ink-2);background:var(--wtk-gold-ink-2);color:#fff}
html body .woocommerce button.button:disabled,html body .woocommerce button.button[disabled]{opacity:.55}
/* Add to cart on the product page is the secondary action (outline); Buy now is the primary one (A1). */
html body.woocommerce div.product form.cart .single_add_to_cart_button:not(.wtk-buy-now){border:1px solid var(--wtk-gold-ink);background:#fff;color:#0f1b33}
html body.woocommerce div.product form.cart .single_add_to_cart_button:not(.wtk-buy-now):hover{background:#f1ede4;color:#0f1b33}

/* B2 (D46) Text inputs, selects and textareas share one radius (10px, same as the quantity box and option chips).
   The header search and the small toolbar dropdowns keep their pill shape. */
html body .woocommerce form .form-row input.input-text,html body .woocommerce form .form-row textarea,html body .woocommerce form .form-row select,
html body.woocommerce-cart .woocommerce-cart-form .coupon #coupon_code,html body .woocommerce form.checkout_coupon #coupon_code,
html body .error404 form.search-form input.search-field,html body #primary form.search-form input.search-field{
  min-height:46px;padding:0 14px;border:1px solid var(--wtk-field);border-radius:10px;background-color:#fff;color:#0f1b33;box-shadow:none}
html body .woocommerce form .form-row textarea{padding:10px 14px}
html body .woocommerce form .form-row input.input-text:focus,html body .woocommerce form .form-row textarea:focus,
html body.woocommerce-cart .woocommerce-cart-form .coupon #coupon_code:focus,html body #primary form.search-form input.search-field:focus{border-color:#0f1b33;box-shadow:0 0 0 3px rgba(15,27,51,.1);outline:0}
html body .select2-container--default .select2-selection--single{height:46px;border:1px solid var(--wtk-field);border-radius:10px}
html body .select2-container--default .select2-selection--single .select2-selection__rendered{padding-left:14px;line-height:44px;color:#0f1b33}
html body .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:8px}
html body .select2-dropdown{border-color:var(--wtk-field);border-radius:10px;overflow:hidden}
html body .woocommerce form.login,html body .woocommerce form.register,html body .woocommerce form.checkout_coupon{border-color:#e6e2d8;border-radius:14px}
html body .woocommerce form .form-row label{color:#1f2a44}

/* B3 (47, D76) Checkboxes: 22px, navy tick, whole row clickable */
html body .woocommerce form input[type=checkbox]{flex:0 0 auto;width:22px;height:22px;margin:1px 10px 0 0;accent-color:#0f1b33;vertical-align:middle;cursor:pointer}
html body .woocommerce form label.woocommerce-form__label-for-checkbox,
html body.woocommerce-checkout .woocommerce form label.checkbox{display:flex!important;align-items:flex-start;width:100%;min-height:44px;padding:10px 0;font-size:15px!important;font-weight:400!important;line-height:1.5!important;color:#1f2a44;cursor:pointer}
html body .woocommerce form label.woocommerce-form__label-for-checkbox > span,
html body.woocommerce-checkout .woocommerce form label.checkbox > span{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.5}
html body .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{display:flex!important;width:auto;float:none;clear:both;margin:0 0 6px}
html body .woocommerce .woocommerce-form-login .woocommerce-form-login__submit{float:none;margin:0}

/* ================================================================
   C. Product page: buy area (layout only; nothing is moved out of form.cart)
   ================================================================ */
/* C1 (D36) One family of corners: option chips and quantity box are rounded to the same pill family as the buttons */
html body.single-product form.cart .wtk-product-choice{min-height:40px!important;padding:7px 15px!important;border-color:var(--wtk-field);border-radius:20px!important;font-size:14px!important;line-height:1.3;color:#0f1b33}
html body.single-product form.cart .wtk-product-choice{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
html body.single-product form.cart .wtk-product-choice:hover{border-color:#0f1b33}
html body.single-product form.cart .wtk-product-choice.is-selected{background:#0f1b33;border-color:#0f1b33;color:#fff}
html body.single-product form.cart .wtk-product-choice.wtk-image-choice{border-radius:14px!important;padding:8px 10px!important}
html body.single-product form.cart .quantity.wtk-qty{border-color:var(--wtk-field);border-radius:999px}
html body.single-product form.cart .quantity.wtk-qty input.qty{min-height:44px;border-radius:0;font-weight:600;color:#0f1b33}
html body.single-product form.cart .quantity.wtk-qty .wtk-qty__btn{min-height:44px}

/* C2 (55, D35) A single colour is information, not a choice: one compact line instead of a 160×150 block */
html body.single-product form.cart .wtk-product-choices > .wtk-image-choice:only-child{flex-direction:row!important;align-items:center;gap:10px;max-width:100%!important;min-height:0!important;padding:5px 14px 5px 5px!important;border-radius:14px!important;background:#f6f4ee;border-color:#e6e2d8;color:#0f1b33;text-align:left;cursor:default}
html body.single-product form.cart .wtk-product-choices > .wtk-image-choice:only-child img{flex:0 0 auto;width:40px!important;height:40px!important;border-radius:10px;background:#fff;object-fit:contain}
html body.single-product form.cart .wtk-product-choices > .wtk-image-choice:only-child span{font-size:14px;line-height:1.3;text-align:left}

/* C3 (60, D37) Option labels: one style; the dispatch-warehouse label follows the others */
html body.single-product div.product form.cart table.variations th.label label,
html body.single-product div.product form.cart p.form-row > label,
html body.single-product .wtk-airpods-label{display:block;margin:0!important;font-size:14px!important;font-weight:600!important;letter-spacing:0!important;line-height:1.3!important;color:#1f2a44!important}
html body.single-product div.product form.cart table.variations{margin:0}
html body.single-product div.product form.cart table.variations th.label,
html body.single-product div.product form.cart table.variations td.value{line-height:1.3}
html body.single-product div.product form.cart .wtk-product-choices{margin:0 0 12px!important;gap:8px!important}

/* C4 (13, D05) The total line keeps its height while the quote is being recalculated, so the buttons below do not jump */
html body.single-product div.product form.cart #wtk-catalog-quote{display:flex!important;align-content:center;min-height:58px;margin:2px 0 4px;transition:opacity .15s ease}
html body.single-product div.product form.cart #wtk-catalog-quote:empty::before{content:"";flex:0 0 132px;height:26px;border-radius:8px;background:#f1ede4}
/* (96, D34) Both prices on the page read as prices: same size and weight */
html body.single-product div.product .summary p.price{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:40px;margin:6px 0 14px!important;font-size:26px!important;font-weight:700!important;line-height:1.2;color:#0f1b33}
html body.single-product div.product #wtk-catalog-quote .wtk-total__amount{font-size:26px!important;font-weight:700}
html body.single-product div.product #wtk-catalog-quote .wtk-total__label{font-size:15px;font-weight:600}

/* C5 (11, 12, D03) Buttons: same width, Add to cart (outline) then Buy now (solid); long labels wrap instead of overflowing */
html body.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
html body.woocommerce div.product form.cart:not(.variations_form){gap:12px 10px}
html body.woocommerce div.product form.cart div.quantity{order:1}
html body.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .tpt__tiered-pricing:has(> .tiered-pricing-fallback-data:only-child){display:none}
html body.woocommerce div.product form.cart .single_add_to_cart_button{order:2;flex:1 1 0;min-width:0;min-height:50px;padding:6px 14px;white-space:normal;line-height:1.2;overflow-wrap:anywhere}
html body.woocommerce div.product form.cart .single_add_to_cart_button.wtk-buy-now{order:3;flex:1 1 0;min-height:50px}
/* Dutch labels are long: the quantity gets its own line so each button has half of the row */
html[lang^="nl"] body.woocommerce div.product form.cart div.quantity{margin-right:calc(100% - 160px)}

/* C6 (63, D71) Quantity-price tiers wrap into rows instead of being cut off at the edge */
html body.single-product .summary .wtk-quantity-prices .wtk-quantity-prices__list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible!important;white-space:normal!important;padding:2px 0 0!important}
html body.single-product .summary .wtk-quantity-prices .wtk-quantity-price{width:auto!important;min-width:0!important;max-width:none!important;flex:initial!important;border-radius:14px}
html body.single-product .summary .wtk-quantity-prices .wtk-quantity-price > span{font-size:13px!important;white-space:normal}

/* C7 (D64) Thumbnails: the current one has a navy frame */
html body.woocommerce div.product div.images .flex-control-thumbs li img{opacity:.72;border:0!important;border-radius:10px;outline:2px solid transparent;outline-offset:-2px}
html body.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
html body.woocommerce div.product div.images .flex-control-thumbs li img:hover{opacity:1}
html body.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{outline-color:#0f1b33}

/* ================================================================
   D. Product page: gallery, tabs, breadcrumb
   ================================================================ */
/* D1 (18) Every gallery slide sits in the same square frame, so swiping from a square to a tall photo does not move the page */
html body.single-product div.product div.images .woocommerce-product-gallery__image{aspect-ratio:1/1;background:#f6f5f1;overflow:hidden}
html body.single-product div.product div.images .woocommerce-product-gallery__image > a{display:block;width:100%;height:100%}
html body.single-product div.product div.images .woocommerce-product-gallery__image > a > img{width:100%;height:100%!important;object-fit:contain}
html body.single-product div.product div.images .flex-viewport{aspect-ratio:1/1;height:auto!important;background:#f6f5f1;border-radius:14px}

/* ================================================================
   E. Product cards and listings
   ================================================================ */
/* E1 (24, D17, D18, D21, 76) One card on home, category, search and related: same corner, same title, whole photo on a soft grey tile */
html body.woocommerce ul.products li.product:not(.product-category),html body .woocommerce ul.products li.product:not(.product-category),
html body.wtk-catalog-layout ul.products.product-archive:not(.products-list-view) > li.product:not(.product-category){border-radius:12px!important}
html body.woocommerce ul.products li.product:not(.product-category) a.woocommerce-loop-image-link,
html body .woocommerce ul.products li.product:not(.product-category) a.woocommerce-loop-image-link{background:#f3f1ec}
html body.woocommerce ul.products li.product:not(.product-category) a.woocommerce-loop-image-link img,
html body .woocommerce ul.products li.product:not(.product-category) a.woocommerce-loop-image-link img,
html body.wtk-catalog-layout ul.products.product-archive:not(.products-list-view) > li.product:not(.product-category) img{aspect-ratio:1/1;object-fit:contain;background:#f3f1ec}
html body.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
html body .woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
html body.wtk-catalog-layout ul.products.product-archive:not(.products-list-view) li.product:not(.product-category) .woocommerce-loop-product__title{font-size:14px!important;font-weight:500;line-height:1.4!important;min-height:2.8em!important;color:#1f2a44!important}
html body.woocommerce ul.products li.product:not(.product-category) .product-details,
html body .woocommerce ul.products li.product:not(.product-category) .product-details,
html body.wtk-catalog-layout ul.products.product-archive:not(.products-list-view) li.product:not(.product-category) .product-details{margin:0;padding:12px 14px 14px!important;border-radius:0}
html body.woocommerce ul.products li.product:not(.product-category) .price,
html body .woocommerce ul.products li.product:not(.product-category) .price{margin-top:8px!important;font-size:17px!important}

/* E2 (D19, D20, 74) Hover: the card lifts a little, nothing slides over the photo; the whole card is already a link, so the
   uppercase "SELECT OPTIONS" text link is not shown */
html body.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
html body.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap,
html body .woocommerce ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
html body .woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap{transform:none}
html body.woocommerce ul.products li.product:not(.product-category) .product-action-wrap,
html body .woocommerce ul.products li.product:not(.product-category) .product-action-wrap{display:none!important}
@media (hover:none){
  html body.woocommerce ul.products li.product:hover,html body .woocommerce ul.products li.product:hover{transform:none;box-shadow:none}
  html body.woocommerce ul.products li.product:hover img,html body .woocommerce ul.products li.product:hover img{transform:none}
}

/* E3 (25, D57) "Sale!" only where a crossed-out price is shown; as a small pill */
html body.woocommerce ul.products li.product:not(:has(.price del)) .onsale,
html body .woocommerce ul.products li.product:not(:has(.price del)) .onsale,
html body.single-product div.product:not(:has(.summary .price del)) > .onsale{display:none!important}
html body.woocommerce span.onsale,html body .woocommerce span.onsale{min-width:0;min-height:0;padding:4px 10px;border-radius:999px;background:var(--wtk-gold-ink);color:#fff;font-size:12px;font-weight:600;line-height:1.2}

/* E4 (75, D24) Pagination: centred, 44px targets */
html body.woocommerce nav.woocommerce-pagination,html body .woocommerce nav.woocommerce-pagination{margin:32px 0 8px;text-align:center}
html body.woocommerce nav.woocommerce-pagination ul.page-numbers,html body .woocommerce nav.woocommerce-pagination ul.page-numbers{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0}
html body.woocommerce nav.woocommerce-pagination ul.page-numbers::before,html body.woocommerce nav.woocommerce-pagination ul.page-numbers::after{display:none}
html body.woocommerce nav.woocommerce-pagination ul li,html body .woocommerce nav.woocommerce-pagination ul li{margin:0;float:none}
html body.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
html body .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:0;padding:0 8px;border-width:1px;border-radius:999px;line-height:1;font-size:15px;font-weight:500}

/* E5 (D25) List view: 160px photo, several products per screen */
html body.woocommerce ul.products.products-list-view li.product:not(.product-category){display:grid!important;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:0}
html body.woocommerce ul.products.products-list-view li.product:not(.product-category) a.woocommerce-loop-image-link{width:160px;max-width:160px;margin:0;float:none}
html body.woocommerce ul.products.products-list-view li.product:not(.product-category) .product-details{width:auto;float:none;padding:14px 20px!important}
html body.woocommerce ul.products.products-list-view li.product:not(.product-category) .woocommerce-loop-product__title{min-height:0!important;font-size:16px!important}
html body.woocommerce ul.products.products-list-view{gap:12px!important}

/* ================================================================
   F. Page skeleton
   ================================================================ */
/* F1 (92, D53) One page-title style: left aligned, same size, gold bar under it (the archive style) */
html body .entry-hero.page-hero-section .entry-header{align-items:flex-start;text-align:left}
html body .entry-hero.page-hero-section .entry-header h1.entry-title,
html body .entry-hero.product-archive-hero-section .entry-header .page-title{margin:0;color:#0f1b33;font-size:clamp(24px,2.4vw,32px)!important;letter-spacing:-.015em;line-height:1.2}
html body .entry-hero.page-hero-section .entry-header h1.entry-title::after{content:"";display:block;width:44px;height:3px;margin-top:12px;border-radius:2px;background:#b8892b}
html body .entry-hero.product-archive-hero-section .entry-header .page-title::after{margin-top:12px}
/* F2 (50, D52) Policy and contact pages: sub-headings below the page title in size, text column 780px */
html body.page:not(.woocommerce-page) .entry-content.single-content h2{margin:1.6em 0 .5em;font-size:22px;line-height:1.3}
html body.page:not(.woocommerce-page) .entry-content.single-content h3{margin:1.4em 0 .4em;font-size:18px;line-height:1.35}
html body.page:not(.woocommerce-page):not(.home) .entry-content.single-content{max-width:780px}
/* F3 (87) Empty cart message at a normal size */
html body .woocommerce .cart-empty.woocommerce-info{margin-top:24px;font-size:18px;font-weight:500;line-height:1.5;color:#1f2a44}
html body .woocommerce .return-to-shop{margin-bottom:32px}
/* F4 (D60) 404: the three shortcuts sit inside the white card */
html body.error404 section.error{border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,27,51,.06),0 8px 24px rgba(15,27,51,.06);overflow:hidden}
html body.error404 section.error > .page-content{background:transparent;box-shadow:none}
html body.error404 section.error > .wtk-404-links{margin:0;padding:0 2rem 2rem}
/* F5 (D62, 82) Footer */
html body .site-footer .wtk-footer{padding-top:28px}

/* ================================================================
   G. Cart, checkout, account
   ================================================================ */
/* G1 (84, D49) The permanently grey "Update cart" is taken out of sight; quantity changes already save themselves.
   It stays in the form (the saving script presses it) and comes back when reached by keyboard. */
html body.woocommerce-cart .woocommerce-cart-form button[name=update_cart]:not(:focus-visible){position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap}
/* (39, D45) Apply coupon is a normal secondary button, not a grey block */
html body.woocommerce-cart .woocommerce-cart-form td.actions .coupon button.button,
html body.woocommerce-checkout form.checkout_coupon button.button{border:1px solid var(--wtk-gold-ink)!important;background:#fff!important;color:#0f1b33!important;opacity:1}
html body.woocommerce-cart .woocommerce-cart-form td.actions .coupon button.button:hover,
html body.woocommerce-checkout form.checkout_coupon button.button:hover{background:#f1ede4!important}
/* G2 (38, D75) Remove: grey, 44px target */
html body.woocommerce-cart .woocommerce-cart-form a.remove{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:transparent;color:#6b7280!important;font-size:24px;font-weight:400;line-height:1;text-decoration:none}
html body.woocommerce-cart .woocommerce-cart-form a.remove:hover{background:#f1ede4;color:#0f1b33!important}
/* G3 Line-item details as compact grey text (cart and checkout) */
html body .woocommerce td.product-name dl.variation{margin:6px 0 0;font-size:13px;line-height:1.5;color:#4a5568}
html body .woocommerce td.product-name dl.variation dt,html body .woocommerce td.product-name dl.variation dd{display:inline;float:none;margin:0;padding:0;font-weight:400}
html body .woocommerce td.product-name dl.variation dt{font-weight:600;color:#1f2a44}
html body .woocommerce td.product-name dl.variation dd p{display:inline;margin:0}
html body .woocommerce td.product-name dl.variation dd::after{content:"";display:block}
html body.woocommerce-cart .woocommerce-cart-form td.product-name > a{color:#0f1b33;font-size:16px;font-weight:600;line-height:1.35;text-decoration:none}
html body.woocommerce-cart .woocommerce-cart-form td.product-name > a:hover{text-decoration:underline}

/* ================================================================
   H. Header, drawer, banner, small helpers
   ================================================================ */
/* H1 (98, D31) Cart count: 12px, on the top-right corner of the icon, not shown for an empty cart */
html body a.header-cart-button{position:relative}
html body a.header-cart-button .header-cart-total{position:absolute;top:4px;right:0;width:auto;min-width:18px;height:18px;margin:0;padding:0 5px;border-radius:999px;background:#0f1b33;color:#fff;font-size:12px;font-weight:600;line-height:1}
html body a.header-cart-button .header-cart-total.header-cart-is-empty-true{display:none}

/* H2 (73) "View all products" under the New arrivals grid (button is created by whatstk-ui-fixes.js from the existing link) */
html body .wtk-more{margin:24px 0 0;text-align:center}
html body .wtk-prods:has(.wtk-more){padding-bottom:56px}

/* H3 (1) Language switcher opened by tap (class set by TranslatePress itself; whatstk-ui-fixes.js only forwards the tap) */
/* The list follows the class this script sets (wtk-ls-open) instead of the plugin's hover state, which a tap leaves half-open */
html.wtk-uif body #mobile-drawer .wtk-switchers .trp-shortcode-overlay:not(.wtk-ls-open) .trp-switcher-dropdown-list{max-height:0!important}
html.wtk-uif body .wtk-switchers .trp-shortcode-overlay.wtk-ls-open .trp-switcher-dropdown-list{max-height:320px!important}
html.wtk-uif body .wtk-switchers .trp-shortcode-overlay.wtk-ls-open{width:max-content;min-width:100%;box-shadow:0 8px 24px rgba(0,0,0,.28)}
html.wtk-uif body .wtk-switchers .trp-shortcode-overlay.wtk-ls-open .trp-shortcode-arrow{transform:rotate(180deg)}
@media (hover:none){html.wtk-uif body .wtk-switchers .trp-shortcode-overlay:not(.wtk-ls-open) .trp-switcher-dropdown-list{max-height:0!important}}
html body #mobile-drawer .wtk-switchers .trp-switcher-dropdown-list .trp-language-item{min-height:44px;height:auto}
html body .wtk-switchers .trp-current-language-item__wrapper{cursor:pointer}

/* ================================================================
   Desktop (1025px and up)
   ================================================================ */
@media (min-width:1025px){
  /* F6 (D12) Title band 200px → about 110px; the 80px gap under it → 36px */
  html body .entry-hero.page-hero-section .entry-header{min-height:108px}
  html body .entry-hero.product-archive-hero-section .entry-header,
  html body.tax-product_cat .entry-hero.product-archive-hero-section .entry-header{min-height:108px!important}
  html body .content-area{margin-top:2.25rem;margin-bottom:3.5rem}
  html body.home .content-area{margin-top:0}

  /* F7 (D14) Sticky header: the logo / search / account / cart row stays, the navy menu row scrolls away (class set by whatstk-ui-fixes.js) */
  html.wtk-uif body #masthead{position:sticky;top:0;z-index:120}
  html.wtk-uif.wtk-hdr-compact body #masthead{background:transparent;pointer-events:none}
  html.wtk-uif.wtk-hdr-compact body #masthead .site-main-header-wrap{pointer-events:auto;background:#fff;box-shadow:0 6px 18px rgba(15,27,51,.08)}
  html.wtk-uif.wtk-hdr-compact body #masthead .site-bottom-header-wrap{visibility:hidden}
  html.wtk-uif body.wtk-catalog-layout #secondary .sidebar-inner-wrap{top:104px;max-height:calc(100dvh - 128px)}

  /* F8 (D29, D30) Menu 15px; equal gaps between Account / currency / language / cart */
  html body #main-header .site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a{padding:0 13px;font-size:15px}
  html body #main-header .site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item:first-child > a{padding-left:0}
  html body #main-header .wtk-htools{gap:16px}
  html body #main-header .wtk-switchers{gap:16px}
  html body #main-header .wtk-switchers .trp-shortcode-overlay:not(.is-open):not(.is-transitioning){width:100%;min-width:0}
  html body #main-header .site-header-main-section-right > .site-header-item + .site-header-item{margin-left:8px}

  /* C8 (D01, D43, D66) Product page: two columns as a grid so the gallery can stay in view next to a long option list;
     title starts level with the photo; less empty space above; option labels in a fixed left column */
  html body.single-product .content-area{margin-top:1.25rem}
  html body.single-product #primary div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4%;align-items:start}
  html body.single-product #primary div.product::before,html body.single-product #primary div.product::after{display:none}
  html body.single-product #primary div.product > *{grid-column:1 / -1;min-width:0}
  html body.single-product #primary div.product > div.images{grid-column:1;float:none;width:100%;margin-bottom:0}
  html body.single-product #primary div.product > div.summary{grid-column:2;float:none;width:100%;margin-top:0}
  /* Chrome limits a sticky grid item by the whole grid, not by its row, so the gallery box is stretched to the row height and
     its parts (photo, thumbnails, zoom button) stick inside it: they stop where the buy column ends and never cover the tabs. */
  html body.single-product #primary div.product{--wtk-stick-top:16px}
  html.wtk-uif body.single-product #primary div.product{--wtk-stick-top:97px}
  html body.single-product #primary div.product > div.images{align-self:stretch;container-type:inline-size;max-width:max(420px,calc(100vh - 190px))}
  html body.single-product #primary div.product > div.images > .flex-viewport{position:sticky!important;top:var(--wtk-stick-top)}
  html body.single-product #primary div.product > div.images > .flex-control-thumbs{position:sticky!important;top:calc(var(--wtk-stick-top) + 100cqw + 12px);left:auto;transform:none;display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin-top:12px!important}
  html body.single-product #primary div.product > div.images > .woocommerce-product-gallery__trigger{position:sticky;top:calc(var(--wtk-stick-top) + 8px);display:block;width:36px;height:36px;margin:8px 8px -44px auto;right:auto}
  html body.single-product #primary div.product > div.summary h1.product_title{margin-top:0}
  html body.single-product div.product form.cart table.variations th.label{width:128px;padding:10px 12px 0 0;vertical-align:top}
  html body.single-product div.product form.cart table.variations td.value{padding:0}
  html body.single-product div.product form.cart p.form-row:has(> .wtk-product-choices){display:grid;grid-template-columns:128px minmax(0,1fr);align-items:start;margin:0!important}
  html body.single-product div.product form.cart p.form-row:has(> .wtk-product-choices)::before,
  html body.single-product div.product form.cart p.form-row:has(> .wtk-product-choices)::after{display:none}
  html body.single-product div.product form.cart p.form-row:has(> .wtk-product-choices) > label{padding:10px 12px 0 0;overflow-wrap:break-word;hyphens:auto}
  html body.single-product div.product form.cart p.form-row:has(> .wtk-product-choices) > .wtk-product-choices{grid-column:2;margin-bottom:6px!important}
  html body.single-product div.product .product_meta{margin-top:14px;padding-top:12px;border-top:1px solid #e6e2d8}

  /* D2 (D68) Tabs: underline style, flush with the text below */
  html body.woocommerce div.product .woocommerce-tabs{margin-top:40px}
  html body.woocommerce div.product .woocommerce-tabs ul.tabs{padding-left:0;margin-bottom:24px}
  html body.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:#e6e2d8}
  html body.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0 28px 0 0;border:0;border-radius:0;background:none}
  html body.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:10px 0 12px;border-bottom:2px solid transparent;font-size:15px;font-weight:600;color:#4a5568}
  html body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{border-bottom-color:#b8892b;color:#0f1b33}

  /* G4 (D47) Cart rows: 96px photo */
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail{width:120px}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail img{width:96px;max-width:none;border-radius:10px;background:#f3f1ec}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-remove{width:56px}

  /* G5 (D50) Checkout: one centred column instead of a short left column beside a tall right one */
  html body.woocommerce-checkout:not(.woocommerce-order-received) #primary .entry-content > .woocommerce{max-width:760px;margin-left:auto;margin-right:auto}
  html body.woocommerce-checkout form.checkout #customer_details,
  html body.woocommerce-checkout form.checkout #customer_details .col-1,
  html body.woocommerce-checkout form.checkout #customer_details .col-2,
  html body.woocommerce-checkout form.checkout #order_review_heading,
  html body.woocommerce-checkout form.checkout #order_review{float:none;width:100%;max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
  html body.woocommerce-checkout form.checkout #order_review_heading{margin-top:28px}

  /* G6 (D77) Login and Register boxes: same height, space above the Register button */
  html body.woocommerce-account #customer_login.col2-set{display:flex;gap:4%}
  html body.woocommerce-account #customer_login.col2-set::before,html body.woocommerce-account #customer_login.col2-set::after{display:none}
  html body.woocommerce-account #customer_login.col2-set > div{display:flex;flex-direction:column;flex:1 1 0;float:none;width:auto}
  html body.woocommerce-account #customer_login.col2-set > div > form{flex:1 1 auto;margin-bottom:0}
}
html body.woocommerce-account .woocommerce form.register .woocommerce-privacy-policy-text{margin-bottom:16px}
html body.woocommerce-account .woocommerce form.register .woocommerce-privacy-policy-text p{margin:0}

/* ================================================================
   Phones and tablets with the mobile header (up to 1024px)
   ================================================================ */
@media (max-width:1024px){
  /* H4 (46) 44px targets for search, menu and the two close buttons; the three icons no longer crowd each other */
  html body #mobile-header .search-toggle-open,html body #mobile-header .menu-toggle-open{min-width:44px;min-height:44px;justify-content:center;align-items:center;padding:0}
  html body #mobile-header .site-header-main-section-right > .site-header-item{margin-right:4px}
  html body #mobile-header .site-header-main-section-right > .site-header-item:last-child{margin-right:-8px}
  html body #mobile-drawer .drawer-header .drawer-toggle,html body #search-drawer .drawer-header .drawer-toggle{width:44px;height:44px;padding:0;align-items:center;justify-content:center;box-sizing:border-box}
  html body #mobile-drawer .drawer-header,html body #search-drawer .drawer-header{padding:6px 10px 0}
  /* H5 (79, 80) Drawer and search layer in the site navy; search field at the top, without the offset frame */
  html body #mobile-drawer .drawer-inner{background:#0f1b33}
  html body #search-drawer .drawer-inner{background:rgba(15,27,51,.98)}
  html body #mobile-drawer .wtk-switchers{gap:16px;margin-bottom:18px}
  html.wtk-uif body #mobile-drawer .wtk-switchers .trp-shortcode-overlay:not(.wtk-ls-open){width:100%;min-width:0}
  html body #mobile-drawer .wtk-switchers select.woocommerce-currency-switcher{height:44px;font-size:16px}
  html body #mobile-drawer .wtk-switchers .trp-current-language-item__wrapper{height:42px}
  html body #mobile-drawer .wtk-switchers .trp-language-item{font-size:15px}
  html body #mobile-drawer .wtk-switchers .trp-language-item-name{font-size:15px}
  html body #mobile-drawer .mobile-navigation ul li{font-size:16px}
  html body #search-drawer .drawer-inner .drawer-content{align-items:flex-start;padding:84px 16px 0}
  html body #search-drawer .drawer-inner .drawer-content form{width:100%;max-width:560px;margin:0 auto}
  html body #search-drawer .drawer-inner .drawer-content form input.search-field{height:52px;padding:0 56px 0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:16px;box-shadow:none;outline:0}
  html body #search-drawer .drawer-inner .drawer-content form input.search-field:focus{border-color:#fff;color:#fff;box-shadow:none}
  html body #search-drawer .drawer-inner .drawer-content form input.search-field::placeholder{color:rgba(255,255,255,.75);opacity:1}
  html body #search-drawer .drawer-inner .drawer-content form button[type=submit],html body #search-drawer .drawer-inner .drawer-content form .kadence-search-icon-wrap{top:0;right:6px;bottom:0;width:48px;height:52px;border-radius:999px;color:#fff}
}

/* ================================================================
   Phones (up to 768px): sticky buy bar space
   ================================================================ */
@media (max-width:768px) and (min-height:520px){
  /* (56) Room under the footer for the sticky buy bar */
  html body.single-product #colophon{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  /* (4) While the cookie banner is open the buy bar waits below it, so banner + bar together never cover the price */
  html.wtk-uif.wtk-cn-on body .wtk-buybar{transform:translateY(110%)!important}
  html.wtk-uif.wtk-cn-on body.wtk-buybar-on .wtk-top{bottom:calc(16px + var(--wtk-cn-h,0px))}
}

/* ================================================================
   Phones (up to 600px)
   ================================================================ */
@media (max-width:600px){
  /* (48) Form controls at 16px so iOS does not zoom the page on focus */
  html body input[type=text],html body input[type=email],html body input[type=password],html body input[type=search],html body input[type=tel],html body input[type=number],html body select,html body textarea,
  html body .woocommerce-cart .coupon #coupon_code,html body .woocommerce-cart-form .quantity.wtk-qty input.qty,
  html body .kadence-shop-top-row select.orderby,html body .wtk-switchers select.woocommerce-currency-switcher{font-size:16px!important}
  html body .kadence-shop-top-row select.orderby{max-width:196px;height:44px!important;padding:0 30px 0 14px!important}
  html body .select2-container--default .select2-selection--single .select2-selection__rendered{font-size:16px}
  html body .select2-search--dropdown .select2-search__field{font-size:16px}

  /* (4, 83) Cookie banner: two short lines of text and one row of buttons; the × is not needed next to them */
  html body #cookie-notice .cookie-notice-container{display:flex;flex-direction:column;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  html body #cookie-notice .cn-text-container{margin:0;font-size:12.5px;line-height:1.4;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  html body #cookie-notice .cn-buttons-container{display:flex;align-items:center;gap:8px}
  html body #cookie-notice .cn-button:not(.cn-button-custom){min-height:40px;margin:0;padding:0 16px;font-size:15px}
  html body #cookie-notice #cn-accept-cookie,html body #cookie-notice #cn-refuse-cookie{flex:1 1 0}
  html body #cookie-notice #cn-more-info:not(.cn-button-custom){flex:0 0 auto;min-width:0;padding:0 6px;font-size:14px}
  html body #cookie-notice #cn-close-notice{display:none}

  /* (69) Promise strip: the three promises side by side, no rotation */
  html body .wtk-usp{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));height:auto;min-height:40px;padding:0 6px;font-size:12px;line-height:1.2}
  html body .wtk-usp > a,html body .wtk-usp > span{position:static;inset:auto;opacity:1!important;visibility:visible!important;animation:none!important;gap:5px;padding:6px 3px;white-space:normal;text-align:left;justify-content:center}
  html body .wtk-usp > * + *{border-left:1px solid rgba(255,255,255,.14)}

  /* (57) Back to top: smaller, and only while scrolling back up on a long page, so it does not sit on product photos */
  html.wtk-uif body .wtk-top{width:40px;height:40px;right:12px;bottom:calc(16px + var(--wtk-cn-h,0px));font-size:16px}
  html.wtk-uif body.wtk-buybar-on .wtk-top{bottom:calc(84px + var(--wtk-cn-h,0px))}
  html.wtk-uif:not(.wtk-top-ok) body .wtk-top{opacity:0!important;visibility:hidden!important}

  /* (92) Page title band: same left-aligned 22px title on every page */
  html body .entry-hero.page-hero-section .entry-header{padding-top:16px!important;padding-bottom:16px!important}
  html body .entry-hero.page-hero-section .entry-header h1.entry-title,
  html body .entry-hero.product-archive-hero-section .entry-header .page-title{font-size:22px!important}
  html body .entry-hero.page-hero-section .entry-header h1.entry-title::after,
  html body .entry-hero.product-archive-hero-section .entry-header .page-title::after{margin-top:10px}
  html body .content-area{margin-top:1.25rem}
  html body.home .content-area{margin-top:0}
  /* (50) Policy sub-headings */
  html body.page:not(.woocommerce-page) .entry-content.single-content h2{font-size:20px}
  html body.page:not(.woocommerce-page) .entry-content.single-content h3{font-size:17px}

  html body.error404 section.error > .wtk-404-links{padding:0 1.5rem 1.5rem}
  /* (82) Footer links: 44px rows */
  html body .site-footer .wtk-footer{padding-top:20px;gap:24px 32px}
  html body .site-footer .wtk-footer a{display:flex;align-items:center;min-height:44px;margin:0;padding:0}
  html body .site-footer .wtk-footer h4{margin-bottom:6px}

  /* (73) View all products: full-width button under the grid; the small link in the heading stays */
  html body .wtk-more{margin-top:16px}
  html body .wtk-more a.button{display:flex;width:100%;min-height:48px}
  html body .wtk-prods:has(.wtk-more){padding-bottom:32px!important}

  /* (68) Breadcrumb: 44px-high links */
  html body.single-product .content-area{margin-top:0}
  html body.single-product .kadence-breadcrumbs{margin:0 0 4px!important;font-size:13px!important;line-height:44px}
  html body.single-product .kadence-breadcrumbs a{display:inline-block;padding:0 3px;color:#0f1b33}

  /* (11, 12) Buy area: quantity on its own line, then two equal buttons */
  html body.woocommerce div.product form.cart div.quantity{margin-right:calc(100% - 160px)}
  html body.woocommerce div.product form.cart .single_add_to_cart_button:not(.wtk-buy-now){order:2;flex:1 1 0}
  html body.woocommerce div.product form.cart .single_add_to_cart_button{font-size:16px;padding:6px 10px}
  /* Dutch: the two labels do not fit side by side on a phone, so the buttons stack at full (equal) width */
  html[lang^="nl"] body.woocommerce div.product form.cart .single_add_to_cart_button{flex:0 0 100%}
  html body.single-product div.product form.cart #wtk-catalog-quote{min-height:56px}
  html body.single-product div.product .summary p.price{margin:4px 0 12px!important}
  /* (60) Labels above the chips, all in the same style; chips keep a 44px target */
  html body.single-product div.product form.cart table.variations th.label{padding:0 0 6px!important}
  html body.single-product div.product form.cart p.form-row > label{padding:0 0 6px}
  html body.single-product form.cart .wtk-product-choice{min-height:44px!important;padding:8px 15px!important;border-radius:22px!important}
  html body.single-product form.cart .wtk-product-choices{margin:0 0 14px!important}
  html body.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > p.form-row{margin:0!important}

  /* (19) Tabs: narrower so more of the row is visible, with a fade on the right edge as the "scrolls sideways" hint */
  html body.single-product .woocommerce-tabs{position:relative}
  html body.single-product .woocommerce-tabs ul.tabs{gap:0;padding:0 28px 0 8px!important;scroll-padding:0 28px}
  html body.single-product .woocommerce-tabs ul.tabs li a{padding:13px 8px 12px!important;font-size:14px!important;color:#4a5568!important}
  html body.single-product .woocommerce-tabs ul.tabs li.active a{color:#0f1b33!important}
  html body.single-product .woocommerce-tabs:has(ul.tabs > li:nth-child(3))::after{content:"";position:absolute;top:0;right:0;width:36px;height:46px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);pointer-events:none}

  /* (89) Added-to-cart notice: message first, button under it */
  html body .woocommerce-notices-wrapper .woocommerce-message{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 16px 16px 18px;font-size:15px;line-height:1.45}
  html body .woocommerce-notices-wrapper .woocommerce-message::before,html body .woocommerce-notices-wrapper .woocommerce-message::after{display:none}
  html body .woocommerce-notices-wrapper .woocommerce-message a.button{order:2;float:none;width:100%;margin:0}

  /* (37, 38) Cart line as a card: photo on the left, text on the right, remove in the top-right corner */
  html body.woocommerce-cart .woocommerce-cart-form table.cart,html body.woocommerce-cart .woocommerce-cart-form table.cart tbody{display:block;border:0}
  html body.woocommerce-cart .woocommerce-cart-form table.cart tr.cart_item{position:relative;display:grid;grid-template-columns:84px minmax(0,auto) minmax(0,1fr);grid-template-areas:"thumb name name" "thumb price price" "thumb qty subtotal";column-gap:12px;row-gap:6px;align-items:center;margin:0 0 12px;padding:12px;border:1px solid #e6e2d8;border-radius:14px;background:#fff}
  html body.woocommerce-cart .woocommerce-cart-form table.cart tr.cart_item > td{display:block;width:auto;margin:0;padding:0!important;border:0!important;background:none!important;text-align:left!important}
  html body.woocommerce-cart .woocommerce-cart-form table.cart tr.cart_item > td::before{display:none!important}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-remove{position:absolute;top:2px;right:2px;z-index:1}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail{grid-area:thumb;align-self:start}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail a{display:block}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail img{width:84px;height:84px;margin:0;border-radius:10px;object-fit:contain;background:#f3f1ec}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-name{grid-area:name;padding-right:30px!important}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-name > a{display:block;font-size:15px}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-name dl.variation{font-size:12.5px}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-price{grid-area:price;font-size:13px;color:#4a5568}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-price::before{display:inline!important;float:none!important;margin-right:6px;font-weight:400!important}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-quantity{grid-area:qty}
  html body.woocommerce-cart .woocommerce-cart-form table.cart .quantity.wtk-qty .wtk-qty__btn{width:36px}
  html body.woocommerce-cart .woocommerce-cart-form table.cart .quantity.wtk-qty input.qty{width:40px}
  html body.woocommerce-cart .woocommerce-cart-form table.cart td.product-subtotal{grid-area:subtotal;justify-self:end;font-size:16px;font-weight:700;color:#0f1b33;text-align:right!important}
  html body.woocommerce-cart .woocommerce-cart-form table.cart tr:not(.cart_item),html body.woocommerce-cart .woocommerce-cart-form table.cart td.actions{display:block;padding:0!important;border:0!important}
  /* (39) Coupon: field and button stacked, so the Dutch label fits */
  html body.woocommerce-cart .woocommerce-cart-form .coupon{display:flex;flex-direction:column;gap:8px;float:none;width:100%;margin:4px 0 0;padding:0}
  html body.woocommerce-cart .woocommerce-cart-form .coupon #coupon_code{width:100%!important;max-width:none;margin:0;float:none}
  html body.woocommerce-cart .woocommerce-cart-form .coupon .button{width:100%!important;margin:0;float:none;white-space:normal}

  /* (91) Checkout "Your order": product text on its own full-width line, amount under it on the right */
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot{display:block;width:100%}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid #e6e2d8}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr > *{display:block;border:0;background:none}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td{flex:1 1 auto;text-align:right}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead{display:none}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item{display:flex;flex-direction:column;border-bottom:1px solid #e6e2d8}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item > td{display:block;width:auto;border:0}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-name{padding-bottom:4px;font-weight:600;color:#0f1b33}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item > td.product-total{padding-top:0;text-align:right;font-weight:700}
  html body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th{flex:0 0 auto}
}

/* (D26, 31) Wider screens: the three facts under the header, which only phones had, as a quiet strip. */
@media (min-width:601px){
  html body .wtk-usp{display:flex!important;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 44px;margin:0;padding:9px 24px;background:#f1ede4;border-bottom:1px solid #e6e2d8;color:#0f1b33;font-size:13.5px;line-height:1.3}
  html body .wtk-usp > a,html body .wtk-usp > span{display:inline-flex;align-items:center;gap:8px;color:#0f1b33;text-decoration:none}
  html body .wtk-usp > a:hover{text-decoration:underline;text-underline-offset:3px}
  html body .wtk-usp svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:#8f6a1e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}
/* (86) Cart: a way back to the shop. */
.wtk-continue{margin:14px 0 0;font-size:14px}
.wtk-continue a{color:#0f1b33;text-decoration:underline;text-underline-offset:3px}
/* (85, D48) First-order note: the sentence now ends in a link. */
a.wtk-newhere-link{margin-left:6px;color:#0f1b33;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* (D39, 59) Specification tables: upright text; on phones the name sits above its value. */
html body.single-product .woocommerce-Tabs-panel table.shop_attributes th,html body.single-product .woocommerce-Tabs-panel table.shop_attributes td{font-style:normal;font-size:15px;line-height:1.5;vertical-align:top}
html body.single-product .woocommerce-Tabs-panel table.shop_attributes td p{margin:0;padding:0;font-style:normal}
@media (max-width:600px){
  html body.single-product .woocommerce-Tabs-panel table.woocommerce-product-attributes tr{display:block;padding:10px 0}
  html body.single-product .woocommerce-Tabs-panel table.woocommerce-product-attributes th,html body.single-product .woocommerce-Tabs-panel table.woocommerce-product-attributes td{display:block;width:auto;padding:0;border:0;text-align:left}
  html body.single-product .woocommerce-Tabs-panel table.woocommerce-product-attributes th{margin-bottom:2px;color:#4a5568;font-size:13px;font-weight:600}
}
/* (7, D40) Sizing system after the Size label and a link to the size guide. */
.wtk-size-sys{font-weight:400;color:#4a5568}
a.wtk-size-guide{display:inline-block;margin:6px 0 0;color:#0f1b33;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* (61) Photo counter on the product gallery. */
.woocommerce-product-gallery{position:relative}
.wtk-gallery-count{position:absolute;right:12px;top:calc(var(--wtk-gallery-main-h,100%) - 40px);z-index:5;padding:4px 10px;border-radius:999px;background:rgba(15,27,51,.72);color:#fff;font-size:12.5px;line-height:1.3;pointer-events:none}
/* (D59, 87) Empty cart: category links under the message. */
.wtk-empty-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px auto 0;max-width:560px}
.wtk-empty-cats a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid #d9d4c7;border-radius:999px;background:#fff;color:#0f1b33;font-size:15px;font-weight:600;text-decoration:none}
.wtk-empty-cats a:hover{border-color:#0f1b33}

/* (93) Account page on phones: Login / Register tabs. The bar is built by the script; wider screens keep both forms. */
html body.woocommerce-account #customer_login.col2-set > div.wtk-acc-tabs{display:none}
@media (max-width:600px){
  html body.woocommerce-account #customer_login.wtk-acc{display:block}
  html body.woocommerce-account #customer_login.col2-set > div.wtk-acc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:auto;margin:0 0 16px;padding:5px;border-radius:999px;background:#f1ede4}
  .wtk-acc-tabs button{min-height:44px;margin:0;padding:0 10px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:#0f1b33;font-size:15px;font-weight:600;cursor:pointer}
  .wtk-acc-tabs button.is-on{background:#0f1b33;color:#fff}
  html body.woocommerce-account #customer_login.wtk-acc > div:not(.wtk-acc-tabs):not(.is-on){display:none}
  html body.woocommerce-account #customer_login.wtk-acc > div > h2{display:none}
}
/* (58) Phones: header out of the way while scrolling down. Never while the menu or search layer is open. */
@media (max-width:600px){
  html.wtk-uif body #masthead{transition:transform .25s ease}
  html.wtk-uif.wtk-hdr-away body:not([class*="showing-popup-drawer"]) #masthead{transform:translateY(-100%)}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){html.wtk-uif body #masthead{transition:none}}
/* (77) Phones and tablets: open the whole brand list. */
.wtk-brands-more{display:none}
@media (max-width:1024px){
  aside#secondary .widget_brand_nav button.wtk-brands-more{display:inline-flex;align-items:center;min-height:36px;margin:0 0 10px;padding:0 4px;border:0;background:none;box-shadow:none;color:#0f1b33;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  html body aside#secondary .widget_brand_nav ul.wtk-brands-open{flex-wrap:wrap;overflow:visible}
}
/* (D54) Catalog pages: breadcrumb above the filters on wider screens. */
.wtk-crumbs{margin:0 0 14px;font-size:13.5px;color:#4a5568}
.wtk-crumbs .woocommerce-breadcrumb{margin:0;padding:0;font-size:inherit;color:inherit}
.wtk-crumbs a{color:#0f1b33;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.wtk-crumbs{display:none}}

/* Tablets and phones held sideways (601-1024px) were falling between the phone and desktop rules. */
@media (min-width:601px) and (max-width:1024px){
  /* buy area: quantity on its own line, then two equal buttons */
  html body.woocommerce div.product form.cart div.quantity{margin-right:calc(100% - 160px)}
  html body.woocommerce div.product form.cart .single_add_to_cart_button{font-size:16px}
  /* tabs: underline style, like phone and desktop */
  html body.single-product .woocommerce-tabs ul.tabs{display:flex;gap:4px;margin:0;padding:0!important;border-bottom:1px solid #e6e2d8}
  html body.single-product .woocommerce-tabs ul.tabs::before,html body.single-product .woocommerce-tabs ul.tabs::after{display:none}
  html body.single-product .woocommerce-tabs ul.tabs li{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important}
  html body.single-product .woocommerce-tabs ul.tabs li::before,html body.single-product .woocommerce-tabs ul.tabs li::after{display:none!important}
  html body.single-product .woocommerce-tabs ul.tabs li a{display:block;padding:13px 14px 11px!important;border-bottom:2px solid transparent;color:#4a5568!important;font-size:15px!important;font-weight:600}
  html body.single-product .woocommerce-tabs ul.tabs li.active a{border-bottom-color:#b8892b;color:#0f1b33!important}
  /* title banner: same compact height as on desktop */
  html body .entry-hero.page-hero-section .entry-header,
  html body .entry-hero.product-archive-hero-section .entry-header,
  html body.tax-product_cat .entry-hero.product-archive-hero-section .entry-header{min-height:108px!important}
}
/* (31, D26) Home: brand entrances under the new arrivals. */
.wtk-brandwall{max-width:1240px;margin:0 auto;padding:8px 24px 64px;box-sizing:border-box}
.wtk-brandwall h2{margin:0 0 18px;color:#0f1b33;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em;line-height:1.2}
.wtk-brandwall__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wtk-brandwall__list a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 16px;border:1px solid #e6e2d8;border-radius:12px;background:#fff;color:#0f1b33;font-size:15px;font-weight:600;text-decoration:none}
.wtk-brandwall__list a:hover{border-color:#0f1b33}
.wtk-brandwall__list a{line-height:1.25}
.wtk-brandwall__list a span{flex:0 0 auto;color:#4a5568;font-size:13px;font-weight:400;white-space:nowrap}
@media (max-width:600px){.wtk-brandwall{padding:0 18px 44px}.wtk-brandwall__list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Options that have a photo: the photo is the button. The name shows above the row for the chosen one and as a
   tooltip on hover or keyboard focus; it stays in the markup for screen readers. */
html body.single-product form.cart .wtk-product-choices:has(> .wtk-image-choice){display:flex;flex-wrap:wrap;gap:8px}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice,
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:only-child{position:relative;display:block!important;flex:0 0 auto;width:64px!important;height:64px!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;border:1px solid #d9d4c7!important;border-radius:12px!important;background:#f6f5f1!important;color:#0f1b33!important;overflow:visible;cursor:pointer;transition:border-color .15s,box-shadow .15s}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice img,
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:only-child img{display:block;width:100%!important;height:100%!important;margin:0;border-radius:11px;background:#f6f5f1;object-fit:cover}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:hover{border-color:#0f1b33!important}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice.is-selected{border-color:#0f1b33!important;box-shadow:0 0 0 2px #0f1b33}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice.disabled,
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:disabled{opacity:.35}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice span,
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:only-child span{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:30;display:block;width:max-content;max-width:220px;margin:0;padding:6px 10px;border-radius:8px;background:#0f1b33;color:#fff;font-size:12.5px;font-weight:500;line-height:1.3;text-align:center;white-space:normal;opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .12s,transform .12s;pointer-events:none}
@media (hover:hover){
  html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:hover span{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:focus-visible span{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* name of the chosen photo option, above its row */
/* rows with photo options: label and the chosen name on one line, photos under it, on every screen width */
html body.single-product form.cart table.variations:has(tr.wtk-row-photos),
html body.single-product form.cart table.variations:has(tr.wtk-row-photos) > tbody{display:block;width:100%}
html body.single-product form.cart table.variations:has(tr.wtk-row-photos) > tbody > tr:not(.wtk-row-photos){display:table;width:100%}
html body.single-product form.cart table.variations tr.wtk-row-photos{display:block;width:100%}
html body.single-product form.cart table.variations tr.wtk-row-photos > th.label,
html body.single-product form.cart table.variations tr.wtk-row-photos > td.value{display:block;width:100%!important;max-width:none;box-sizing:border-box}
html body.single-product form.cart table.variations tr.wtk-row-photos > th.label{padding:0 0 8px!important;text-align:left}
html body.single-product form.cart table.variations tr.wtk-row-photos > th.label label{display:inline}
.wtk-picked{display:inline;margin-left:8px;color:#4a5568;font-size:14px;font-weight:400;line-height:1.35}
.wtk-picked:empty{display:none}
@media (max-width:1024px){
  html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice,
  html body.single-product form.cart .wtk-product-choices > button.wtk-product-choice.wtk-image-choice:only-child{width:60px!important;height:60px!important}
}

/* Product description: it repeats every photo at half the page width (one product page was 28,000px tall). The photos
   become a compact grid, the repeated "Description" heading goes, and a long description opens on request. */
html body.single-product .woocommerce-Tabs-panel--description > h2:first-child{display:none}
html body.single-product .woocommerce-Tabs-panel--description h3{margin:18px 0 6px;font-size:18px;line-height:1.3}
html body.single-product .woocommerce-Tabs-panel--description > h3:first-of-type{margin-top:0}
html body.single-product .woocommerce-Tabs-panel--description p{margin:8px 0}
html body.single-product .woocommerce-Tabs-panel--description p:has(> img){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;margin:10px 0 20px!important}
html body.single-product .woocommerce-Tabs-panel--description p:has(> img) > img{display:block;width:100%!important;height:auto!important;max-width:none;margin:0!important;aspect-ratio:1/1;border-radius:10px;background:#f3f1ec;object-fit:cover}
html body.single-product .woocommerce-Tabs-panel--description p:has(> img) > br{display:none}
@media (max-width:1024px){html body.single-product .woocommerce-Tabs-panel--description p:has(> img){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:600px){html body.single-product .woocommerce-Tabs-panel--description p:has(> img){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}}
.woocommerce-Tabs-panel--description.wtk-desc-clip{position:relative;max-height:620px;overflow:hidden}
.woocommerce-Tabs-panel--description.wtk-desc-clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(255,255,255,0),#fff 78%);pointer-events:none}
.wtk-desc-more{display:flex;justify-content:center;margin:14px 0 0}
.woocommerce-Tabs-panel--description.wtk-desc-clip > .wtk-desc-more{position:absolute;left:0;right:0;bottom:8px;z-index:2;margin:0}
.wtk-desc-more button{min-height:44px;margin:0;padding:0 22px;border:1px solid #0f1b33;border-radius:999px;background:#fff;box-shadow:none;color:#0f1b33;font-size:14.5px;font-weight:600;cursor:pointer}
.wtk-desc-more button:hover{background:#0f1b33;color:#fff}
/* Product cards: the name sat 34px under the photo on the home page; and the home grid used a wider gap than the shop. */
html body.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
html body .woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title{margin-top:0!important}
html body .wtk-prods .woocommerce ul.products{gap:20px!important}
@media (max-width:600px){html body .wtk-prods .woocommerce ul.products{gap:12px!important}}

/* Sizes stay as chips, all visible. whatstk-purchase-polish (another session, 10-08 18:14) folds any option group with
   more than eight buttons into two wide columns and hides all but six; that suits long model names, but for sizes it
   hid most of them behind "Show all 14 options". Only the Size group is switched back here; other groups keep it. */
html body.single-product form.cart table.variations select[name="attribute_size"] + .wtk-product-choices.wtk-options-compact{display:flex!important;flex-wrap:wrap;gap:8px!important}
html body.single-product form.cart table.variations select[name="attribute_size"] + .wtk-product-choices.wtk-options-compact .wtk-product-choice{width:auto!important;min-width:44px;margin:0;padding:8px 15px;font-size:14px;line-height:1.3;text-align:center}
html body.single-product form.cart table.variations select[name="attribute_size"] + .wtk-product-choices.wtk-options-compact:not(.is-expanded) .wtk-product-choice.is-overflow-choice{display:inline-flex!important}
html body.single-product form.cart table.variations select[name="attribute_size"] + .wtk-product-choices.wtk-options-compact + .wtk-options-toggle{display:none!important}
html body.single-product form.cart table.variations tr:has(select[name="attribute_size"]) th .wtk-option-current{display:none!important}