/* ========================================================================== Kuflik — Variant 1: pełnoszeroki nagłówek i jeden współdzielony mega-panel. Warstwa działa wyłącznie po udanym uruchomieniu JS (.kuflik-meganav-on na ). Bez JS Porto zachowuje własną nawigację. Chevrony, strzałki i ikona konta (porto-icon-user-2): Porto Font dołączony do licencjonowanego motywu Porto 7.7.0 (project-owned commercial asset; ikony down-open, arrow-forward-right, bars, cancel i shopping-bag). Ikona linku zewnętrznego: Font Awesome Free, external-link-alt, pakiet dołączony do Porto, licencja CC BY 4.0. Geometria bibliotek pozostaje niezmieniona; ten plik nie rysuje własnych ikon. ========================================================================== */ html.kuflik-meganav-on { --kuflik-header-surface: oklch(0.976 0.011 89.721); --kuflik-header-panel: oklch(0.991 0.004 91.445); --kuflik-header-intro: oklch(0.962 0.013 86.83); --kuflik-header-featured: oklch(0.964 0.018 120.682); --kuflik-header-control: oklch(0.946 0.021 115.43); --kuflik-header-control-hover: oklch(0.909 0.029 117.854); --kuflik-header-text: oklch(0.267 0.015 124.15); --kuflik-header-text-muted: oklch(0.487 0.022 127.465); --kuflik-header-interactive: oklch(0.423 0.101 125.981); --kuflik-header-state: oklch(0.529 0.116 111); --kuflik-header-separator: oklch(0.905 0.019 127.159); --kuflik-header-notification: oklch(0.674 0.176 25.353); --kuflik-header-on-notification: oklch(1 0 0); /* Search/cart action buttons and filled mini-cart — user-selected Karmel colorway (3UI preview header-cart-colors, Variant 1). Derived from the site's Porto skin #c9aa7d, #b1874a and #d1b690 with stable OKLCH hue ~76.6, and the site's #212529 ink. */ --kuflik-action-bg: oklch(0.945 0.032 78); --kuflik-action-bg-hover: oklch(0.912 0.046 78); --kuflik-action-icon: oklch(0.46 0.072 77); --kuflik-action-badge: oklch(0.790 0.060 76.1); --kuflik-action-on-badge: oklch(0 0 0); --kuflik-action-focus: oklch(0.50 0.080 77); --kuflik-cart-surface: oklch(0.984 0.009 85); --kuflik-cart-surface-subtle: oklch(0.958 0.018 82); --kuflik-cart-control: oklch(0.945 0.032 78); --kuflik-cart-control-border: oklch(0.84 0.028 78); --kuflik-cart-separator: oklch(0.895 0.022 78); --kuflik-cart-text: oklch(0.262 0.009 248.2); --kuflik-cart-text-muted: oklch(0.50 0.014 75); --kuflik-cart-accent: oklch(0.52 0.075 77); --kuflik-cart-accent-hover: oklch(0.45 0.075 77); --kuflik-cart-cta: oklch(0.755 0.070 76.6); --kuflik-cart-cta-hover: oklch(0.651 0.094 75.1); --kuflik-cart-on-cta: oklch(0 0 0); --kuflik-cart-notification: oklch(0.790 0.060 76.1); --kuflik-cart-on-notification: oklch(0 0 0); } html.kuflik-meganav-on body #header { background: var(--kuflik-header-surface); color: var(--kuflik-header-text); } @media (min-width: 992px) { html.kuflik-meganav-on body #header .header-main { position: relative; min-height: 110px; border-bottom: 0 !important; background: var(--kuflik-header-surface) !important; color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-weight: 400; line-height: normal; } html.kuflik-meganav-on body #header .header-main .header-container { display: grid; width: 100%; max-width: none; min-height: 110px; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 40px); padding-inline: clamp(20px, 3vw, 52px); box-sizing: border-box; } html.kuflik-meganav-on body #header .header-main .header-container > .header-left { display: flex; width: auto !important; min-width: 0; min-height: 110px; align-items: center; padding: 0 !important; } html.kuflik-meganav-on body #header .header-main .header-left .logo, html.kuflik-meganav-on body #header .header-main .header-left .logo a { display: inline-flex; width: 100%; min-width: 56px; min-height: 80px; align-items: center; justify-content: center; margin: 0; } html.kuflik-meganav-on body #header .header-main .header-left .logo img { display: block; width: auto !important; max-width: 80px !important; height: auto !important; max-height: 80px !important; object-fit: contain; } html.kuflik-meganav-on body #header .header-main .header-container > .header-right { display: grid !important; width: auto !important; min-width: 0; min-height: 110px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 110px; align-items: center; gap: clamp(16px, 2vw, 40px); padding: 0 !important; } html.kuflik-meganav-on body #header .header-main .header-right-bottom { display: flex; min-width: 0; height: 110px; grid-column: 1; grid-row: 1; align-items: stretch; justify-content: center; margin: 0 !important; } html.kuflik-meganav-on body #header .header-main .header-right-top { display: flex !important; min-width: 0; grid-column: 2; grid-row: 1; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 !important; } html.kuflik-meganav-on body #header .header-main #main-menu { display: flex; min-width: 0; height: 110px; margin: 0 !important; align-items: stretch; justify-content: center; vertical-align: middle; } html.kuflik-meganav-on body #header .header-main #main-menu > ul.main-menu { display: flex; min-width: 0; height: 110px; margin: 0; padding: 0; align-items: stretch; justify-content: center; flex-wrap: nowrap; gap: 0; } html.kuflik-meganav-on body #header .header-main #main-menu li.menu-item { display: flex; min-width: 0; margin: 0; align-items: stretch; } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a { position: relative; display: inline-flex; min-width: 0; min-height: 110px; padding-block: 0; padding-inline: clamp(7px, .75vw, 14px); align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: var(--kuflik-header-text) !important; font-family: 'Poppins', Arial, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em !important; line-height: 1.25 !important; text-align: center; text-decoration: none; text-transform: none; white-space: nowrap; transition-property: color, transform !important; transition-duration: 150ms, 140ms !important; transition-timing-function: cubic-bezier(.2, 0, 0, 1), ease-out !important; } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a:active { transform: scale(.96); } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a::before { display: none !important; content: none !important; } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a::after { position: absolute; inset-block-end: 0; inset-inline-start: 50%; display: block; width: 32px; height: 3px; border-radius: 999px 999px 0 0; background: var(--kuflik-header-state); content: '' !important; opacity: 0; transform: translateX(-50%) scaleX(.4); animation: none !important; transition-property: opacity, transform !important; transition-duration: 150ms !important; transition-timing-function: cubic-bezier(.2, 0, 0, 1) !important; } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a:hover, html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a:focus-visible, html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item:hover > a, html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a[aria-expanded='true'] { background: transparent !important; color: var(--kuflik-header-interactive) !important; } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a:hover::after, html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a:focus-visible::after, html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a[aria-expanded='true']::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } .kuflik-meganav__chev { display: inline-flex; width: 12px; height: 12px; margin: 0 !important; flex: none; align-items: center; justify-content: center; font-family: 'porto'; font-size: 10px; font-weight: normal; line-height: 1; transition-property: transform !important; transition-duration: 260ms !important; transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important; } /* Porto's captured menu contains one empty legacy ; it has no semantic or visual role in Variant 1 and otherwise contributes a stray margin. */ html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a > i:not(.kuflik-meganav__chev) { display: none !important; margin: 0 !important; } /* Exact project-owned Porto Font codepoint: porto-icon-down-open. */ .kuflik-meganav__chev::before { content: '\e815'; } .kuflik-meganav__trigger[aria-expanded='true'] .kuflik-meganav__chev { transform: rotate(180deg); } html.kuflik-meganav-on body #header .header-main #main-menu .popup { display: none !important; } /* Existing search, account and cart behavior is retained; only their shell changes. */ html.kuflik-meganav-on body #header .header-main .searchform-popup, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart { display: flex; width: 44px; min-width: 44px; height: 44px; min-height: 44px; align-items: center; justify-content: center; margin: 0 !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head { position: relative; display: grid; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 !important; place-items: center; border: 0; border-radius: 12px; background: var(--kuflik-action-bg) !important; color: var(--kuflik-action-icon) !important; box-shadow: none !important; text-decoration: none; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:hover, html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:hover, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link[aria-current='page'], html.kuflik-meganav-on body #header .header-main #mini-cart:hover .cart-head { background: var(--kuflik-action-bg-hover) !important; color: var(--kuflik-action-icon) !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-text, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-items-text { display: none !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle > i, html.kuflik-meganav-on body #header .header-main .kuflik-account-link > i, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head .minicart-icon { display: inline-flex; width: auto; height: auto; margin: 0; align-items: center; justify-content: center; border: 0 !important; border-radius: 0 !important; color: currentColor; background: transparent !important; font-family: 'porto'; font-size: 18px !important; font-style: normal; line-height: 1; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head .minicart-icon::before { position: static; width: auto; height: auto; margin: 0; border: 0; color: currentColor; } /* Exact project-owned Porto Font codepoint: porto-icon-shopping-bag. */ html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head .porto-icon-shopping-bag::before { content: '\e878'; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-icon { position: relative; display: grid; width: 20px; height: 20px; place-items: center; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-items { position: absolute; inset-block-start: -11px; inset-inline-end: -11px; display: grid; min-width: 20px; height: 20px; padding: 0 4px; place-items: center; border: 2px solid var(--kuflik-header-surface); border-radius: 999px; background: var(--kuflik-action-badge); color: var(--kuflik-action-on-badge) !important; font-family: 'Poppins', Arial, sans-serif; font-size: 11px !important; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; } } /* -------------------------------------------------------------------------- Shared mini-cart dropdown — user-selected Variant 1 The existing Porto/WooCommerce fragment remains the source of truth for count, cart URL, empty copy, and non-empty cart content. The enhanced layer is enabled only after kuflik-meganav.js has initialized; Porto's no-JS hover fallback therefore remains intact. -------------------------------------------------------------------------- */ html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart .cart-popup { right: auto; left: auto; inset-inline-end: 0; display: block !important; margin-top: 8px; animation: none !important; opacity: 0; pointer-events: none; transform: translateY(-6px); visibility: hidden; } html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-open='true'] .cart-popup { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; } html.kuflik-meganav-on body.woocommerce-cart #header .header-main #mini-cart .cart-popup, html.kuflik-meganav-on body.woocommerce-checkout #header .header-main #mini-cart .cart-popup { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-open='true'] .cart-head, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head:focus-visible { background: var(--kuflik-action-bg-hover) !important; color: var(--kuflik-action-icon) !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart .total-count a:focus-visible { border-radius: 4px; outline: 3px solid var(--kuflik-action-focus) !important; outline-offset: 3px !important; } html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart-popup { width: min(340px, calc(100vw - 64px)); max-width: calc(100vw - 64px); overflow: hidden; border: 0; border-radius: 12px; background: var(--kuflik-header-panel); box-shadow: 0 0 0 1px rgba(36, 39, 31, .07), 0 10px 24px rgba(43, 50, 31, .12), 0 24px 54px rgba(43, 50, 31, .10); color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; text-align: start; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart-icon::after { display: none !important; content: none !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .widget_shopping_cart_content { overflow: hidden; padding: 0; border-radius: inherit; background: var(--kuflik-header-panel); color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count { display: grid; height: 56px; min-height: 56px; margin: 0; padding: 0 20px; box-sizing: border-box; align-items: center; border-bottom: 1px solid var(--kuflik-header-separator); grid-template-columns: minmax(0, 1fr) auto; gap: 16px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count::before, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count::after { display: none; content: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count > span, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count > a { float: none !important; margin: 0; font-family: 'Poppins', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count > span { min-width: 0; color: var(--kuflik-header-text); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count > a { display: inline-flex; min-height: 40px; align-items: center; justify-self: end; color: var(--kuflik-header-interactive) !important; text-decoration: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count > a:hover, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .total-count > a:focus-visible { color: var(--kuflik-header-interactive) !important; text-decoration: underline; text-underline-offset: 3px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart_list { display: block; min-height: 0; max-height: none; overflow: visible !important; margin: 0; padding: 0; list-style: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart_list > li.empty { display: block; min-height: 0; margin: 0; padding: 17px 20px 19px !important; color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: center; white-space: normal; } @media (prefers-reduced-motion: no-preference) { html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart .cart-popup { transition-property: opacity, transform, visibility; transition-duration: 100ms, 100ms, 0s; transition-delay: 0s, 0s, 100ms; transition-timing-function: ease-out; } html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-open='true'] .cart-popup { transition-delay: 0s; } } @media (prefers-reduced-motion: reduce) { html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart .cart-popup { transition: none !important; } } @media (forced-colors: active) { html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart-popup { border: 1px solid ButtonText; } } /* -------------------------------------------------------------------------- Full-width mega-panel attached flush to .header-main -------------------------------------------------------------------------- */ html.kuflik-meganav-on body > .kuflik-meganav__backdrop { display: none; } @media (min-width: 992px) { html.kuflik-meganav-on body > .kuflik-meganav__backdrop { position: fixed; z-index: 20; top: var(--kuflik-meganav-backdrop-top, 110px); right: 0; bottom: 0; left: 0; display: block; background: rgba(20, 24, 16, .30); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition-property: opacity; transition-duration: 190ms; transition-timing-function: ease-out; } html.kuflik-meganav-on body > .kuflik-meganav__backdrop[data-state='opening'], html.kuflik-meganav-on body > .kuflik-meganav__backdrop[data-state='open'] { opacity: 1; pointer-events: auto; } } .kuflik-meganav__panel { position: absolute; z-index: 30; top: 100%; left: 50%; width: 100%; overflow: hidden; border: 0; border-radius: 0; background: var(--kuflik-header-panel); box-shadow: 0 1px 0 rgba(36, 39, 31, .07), 0 16px 34px rgba(43, 50, 31, .10), 0 36px 68px rgba(43, 50, 31, .08); color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-weight: 400; line-height: normal; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); transform-origin: top center; transition-property: opacity, transform; transition-duration: 190ms, 210ms; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } .kuflik-meganav__panel[data-state='open'] { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .kuflik-meganav__panel[data-state='opening'], .kuflik-meganav__panel[data-state='closing'] { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); } .kuflik-meganav__swap { display: grid; width: 100%; height: 304px; min-height: 304px; grid-template-columns: clamp(300px, 22vw, 420px) minmax(0, 1fr) clamp(360px, 23vw, 420px); } @media (prefers-reduced-motion: no-preference) { .kuflik-meganav__panel[data-state='open'] .kuflik-meganav__swap[data-motion='from-end'] .kuflik-anim { animation: kuflik-meganav-swap-from-end 420ms cubic-bezier(.16, 1, .3, 1) both; } .kuflik-meganav__panel[data-state='open'] .kuflik-meganav__swap[data-motion='from-start'] .kuflik-anim { animation: kuflik-meganav-swap-from-start 420ms cubic-bezier(.16, 1, .3, 1) both; } } @keyframes kuflik-meganav-swap-from-end { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes kuflik-meganav-swap-from-start { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .kuflik-meganav__swap--without-featured { grid-template-columns: minmax(272px, .28fr) minmax(0, 1fr); } .kuflik-meganav__intro { min-width: 0; padding: 36px clamp(20px, 3vw, 52px); background: var(--kuflik-header-intro); } .kuflik-meganav__title { margin: 0; padding: 0; border: 0; background: transparent; color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-size: clamp(28px, 2.3vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-transform: none; text-wrap: balance; } .kuflik-meganav__desc { max-width: 34ch; margin: 14px 0 0; color: var(--kuflik-header-text-muted); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; text-wrap: pretty; } .kuflik-meganav__all { display: inline-flex; min-height: 44px; margin-block-start: 24px; padding: 0; align-items: center; gap: 8px; color: var(--kuflik-header-interactive); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: normal; text-decoration: none; } .kuflik-meganav__all .kuflik-meganav__cta-label { text-decoration: underline; text-decoration-color: rgba(86, 115, 15, .38); text-underline-offset: 5px; } .kuflik-meganav__all:hover, .kuflik-meganav__all:focus-visible { color: var(--kuflik-header-interactive); text-decoration: none; } .kuflik-meganav__arrow { display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; color: var(--kuflik-header-state); font-family: 'porto'; font-size: 16px; font-weight: normal; line-height: 1; opacity: 0; transform: translateX(-4px); transition-property: color, opacity, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } /* Exact project-owned Porto Font codepoint: porto-icon-arrow-forward-right. */ .kuflik-meganav__arrow::before { content: '\e8cc'; } .kuflik-meganav__all .kuflik-meganav__arrow { color: var(--kuflik-header-interactive); opacity: 1; transform: translateX(0); } .kuflik-meganav__all:hover .kuflik-meganav__arrow, .kuflik-meganav__all:focus-visible .kuflik-meganav__arrow { transform: translateX(3px); } .kuflik-meganav__cols { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 0 clamp(18px, 2vw, 32px); padding: 32px clamp(18px, 2vw, 36px); } .kuflik-meganav__featured { display: grid; min-width: 0; grid-template-rows: 44px minmax(0, 1fr); gap: 10px; padding: 18px; border-inline-start: 1px solid var(--kuflik-header-separator); background: var(--kuflik-header-featured); contain: layout paint; } .kuflik-meganav__featured[hidden] { display: none; } .kuflik-meganav__featured-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; } .kuflik-meganav__featured-heading { display: flex; min-width: 0; align-items: baseline; gap: 8px; } .kuflik-meganav__featured-title { margin: 0; color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; } .kuflik-meganav__featured-counter { color: #6a705f; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1; } .kuflik-meganav__featured-controls { display: flex; flex: none; align-items: center; gap: 6px; } .kuflik-meganav__featured-controls[hidden] { display: none; } .kuflik-meganav__featured-control { position: relative; display: inline-flex; width: 44px; height: 44px; flex: none; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--kuflik-header-interactive); cursor: pointer; transition-property: color, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .kuflik-meganav__featured-control::before { position: absolute; inset: 5px; border: 1px solid #cad4b8; border-radius: inherit; background: transparent; content: ''; transition-property: background-color, border-color; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .kuflik-meganav__featured-control:hover { color: #34470a; } .kuflik-meganav__featured-control:hover::before { border-color: #aebd91; background: #e7edd9; } .kuflik-meganav__featured-control:active { transform: scale(.96); } .kuflik-meganav__featured-control-icon { position: relative; z-index: 1; display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-family: 'porto'; font-size: 11px; font-style: normal; font-weight: normal; line-height: 1; } .kuflik-meganav__featured-viewport { min-width: 0; min-height: 0; overflow: hidden; } .kuflik-meganav__featured-track { display: flex; width: 100%; height: 100%; transform: translate3d(0, 0, 0); transition-property: transform; transition-duration: 420ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); will-change: transform; } .kuflik-meganav__featured-track.is-resetting { transition-duration: .01ms; } .kuflik-meganav__featured-slide { display: flex; min-width: 0; height: 100%; flex: 0 0 100%; overflow: hidden; } .kuflik-meganav__featured-link { display: grid; width: 100%; min-width: 0; height: 100%; grid-template-columns: minmax(148px, 40%) minmax(0, 1fr); align-items: center; gap: 14px; color: var(--kuflik-header-text); text-decoration: none; transition-property: color, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .kuflik-meganav__featured-link:hover, .kuflik-meganav__featured-link:focus-visible { color: var(--kuflik-header-interactive); text-decoration: none; } .kuflik-meganav__featured-link:active { transform: scale(.96); } .kuflik-meganav__featured-media { display: block; min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: #ffffff; outline: 1px solid oklch(0 0 0 / .1); } .kuflik-meganav__featured-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition-property: transform; transition-duration: 220ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); } .kuflik-meganav__featured-link:hover .kuflik-meganav__featured-media img, .kuflik-meganav__featured-link:focus-visible .kuflik-meganav__featured-media img { transform: scale(1.02); } .kuflik-meganav__featured-body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; } .kuflik-meganav__featured-category { width: 100%; overflow: hidden; color: #67705a; font-size: 10px; font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .kuflik-meganav__featured-name { display: -webkit-box; margin-block-start: 7px; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .kuflik-meganav__featured-price { margin-block-start: 7px; color: #4d5147; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.35; } .kuflik-meganav__featured-cta { display: inline-flex; min-height: 36px; margin-block-start: 8px; align-items: center; gap: 6px; color: var(--kuflik-header-interactive); font-size: 11px; font-weight: 600; line-height: 1.3; text-decoration: none; } .kuflik-meganav__featured-cta .kuflik-meganav__cta-label { text-decoration: underline; text-decoration-color: rgba(86, 115, 15, .38); text-underline-offset: 4px; } .kuflik-meganav__featured-cta .kuflik-meganav__arrow { opacity: 1; transform: translateX(0); } .kuflik-meganav__featured-link:hover .kuflik-meganav__featured-cta .kuflik-meganav__arrow, .kuflik-meganav__featured-link:focus-visible .kuflik-meganav__featured-cta .kuflik-meganav__arrow { transform: translateX(3px); } .kuflik-meganav__featured-skeleton { width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(#dfe6d2, #dfe6d2) 0 50% / 40% 88% no-repeat, linear-gradient(#e4ead9, #e4ead9) 76% 34% / 42% 10px no-repeat, linear-gradient(#e4ead9, #e4ead9) 76% 48% / 52% 10px no-repeat, linear-gradient(#e4ead9, #e4ead9) 70% 63% / 40% 10px no-repeat; } .kuflik-meganav__cat { min-width: 0; } .kuflik-meganav__catlink { display: flex; min-height: 44px; padding: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--kuflik-header-separator); color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; transition-property: color; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .kuflik-meganav__catlink:hover, .kuflik-meganav__catlink:focus-visible { color: var(--kuflik-header-interactive); } .kuflik-meganav__catlink:hover .kuflik-meganav__arrow, .kuflik-meganav__catlink:focus-visible .kuflik-meganav__arrow { opacity: 1; transform: translateX(0); } .kuflik-meganav__subs { display: grid; gap: 2px; padding-block: 4px 10px; padding-inline-start: 14px; } .kuflik-meganav__subs a { display: inline-flex; min-height: 36px; align-items: center; color: var(--kuflik-header-text-muted); font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; text-decoration: none; transition-property: color; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .kuflik-meganav__subs a:hover, .kuflik-meganav__subs a:focus-visible { color: var(--kuflik-header-interactive); } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a:focus-visible, html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:focus-visible, .kuflik-meganav__panel a:focus-visible, .kuflik-meganav__panel button:focus-visible { border-radius: 4px; outline: 3px solid var(--kuflik-header-state) !important; outline-offset: 3px !important; } @media (min-width: 992px) and (max-width: 1399px) { .kuflik-meganav__swap { grid-template-columns: 290px minmax(0, 1fr) 330px; } .kuflik-meganav__swap--without-featured { grid-template-columns: minmax(272px, .28fr) minmax(0, 1fr); } .kuflik-meganav__intro { padding-inline: 28px; } .kuflik-meganav__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap-inline: 20px; padding-inline: 24px; } .kuflik-meganav__featured { padding: 14px; } .kuflik-meganav__featured-link { grid-template-columns: 136px minmax(0, 1fr); gap: 11px; } .kuflik-meganav__featured-name { font-size: 13px; } } @media (min-width: 992px) and (max-width: 1199px) { html.kuflik-meganav-on body #header .header-main .header-container { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; } html.kuflik-meganav-on body #header .header-main .header-container > .header-right { gap: 12px; } html.kuflik-meganav-on body #header .header-main .header-left .logo img { max-height: 72px !important; } html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a { padding-inline: 4px; gap: 3px; font-size: 10px !important; letter-spacing: 0 !important; } .kuflik-meganav__chev { width: 9px; height: 9px; font-size: 8px; } html.kuflik-meganav-on body #header .header-main .header-right-top { gap: 8px; } .kuflik-meganav__cols { gap-inline: 20px; } .kuflik-meganav__swap { grid-template-columns: 272px minmax(0, 1fr) 300px; } .kuflik-meganav__swap--without-featured { grid-template-columns: minmax(272px, .28fr) minmax(0, 1fr); } .kuflik-meganav__intro { padding: 28px 20px; } .kuflik-meganav__cols { padding: 24px 20px; } .kuflik-meganav__featured { gap: 8px; padding: 12px; } .kuflik-meganav__featured-heading { gap: 5px; } .kuflik-meganav__featured-title { font-size: 10px; } .kuflik-meganav__featured-counter { font-size: 10px; } .kuflik-meganav__featured-link { grid-template-columns: 116px minmax(0, 1fr); gap: 9px; } .kuflik-meganav__featured-name { -webkit-line-clamp: 2; } .kuflik-meganav__featured-cta { margin-block-start: 4px; font-size: 10px; } } @media (max-width: 991px) { html.kuflik-meganav-on { /* Preview-selected notification red: APCA Lc 76.8 / WCAG 4.67:1 against white. Kept mobile-scoped so the accepted desktop header remains visually unchanged. */ --kuflik-header-notification: oklch(0.58 0.176 25.353); } html.kuflik-meganav-on, html.kuflik-meganav-on body { overflow-x: hidden; } html.kuflik-meganav-on body > .panel-overlay, html.kuflik-meganav-on body > .side-nav-panel-close, html.kuflik-meganav-on body > #side-nav-panel { display: none !important; } html.kuflik-meganav-on body #header { position: relative; z-index: 20; width: 100%; background: var(--kuflik-header-surface); } html.kuflik-meganav-on body #header .header-main { position: relative; min-height: 76px; border-bottom: 0 !important; background: var(--kuflik-header-surface) !important; color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-weight: 400; line-height: normal; } html.kuflik-meganav-on body #header .header-main .header-container { display: flex !important; width: 100%; max-width: none !important; min-height: 76px; height: 76px; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding-block: 0; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); box-sizing: border-box; } html.kuflik-meganav-on body #header .header-main .header-container > .header-left { display: flex !important; width: 52px !important; min-width: 52px; height: 60px; align-items: center; padding: 0 !important; } html.kuflik-meganav-on body #header .header-main .header-left .logo, html.kuflik-meganav-on body #header .header-main .header-left .logo a { display: inline-flex; width: 52px; min-width: 52px; min-height: 60px; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: 0; } html.kuflik-meganav-on body #header .header-main .header-left .logo img { display: block; width: auto !important; max-width: 38px !important; height: auto !important; max-height: 54px !important; object-fit: contain; } html.kuflik-meganav-on body #header .header-main .header-container > .header-right { display: flex !important; width: 190px !important; min-width: 190px; height: 52px; flex: 0 0 190px; align-items: center; justify-content: flex-end; gap: 2px; padding: 4px !important; box-sizing: border-box; border-radius: 16px; background: var(--kuflik-action-bg) !important; box-shadow: 0 0 0 1px oklch(0 0 0 / .045), 0 3px 10px -6px oklch(0 0 0 / .18); } html.kuflik-meganav-on body #header .header-main .header-right-top { display: flex !important; width: 136px; min-width: 136px; height: 44px; align-items: center; justify-content: flex-end; gap: 2px; margin: 0 !important; padding: 0 !important; } html.kuflik-meganav-on body #header .header-main .header-right-bottom { display: flex !important; width: 44px; min-width: 44px; height: 44px; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; } html.kuflik-meganav-on body #header .header-main #main-menu { display: none !important; } .kuflik-meganav__panel { display: none !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart { position: relative; display: flex !important; width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; background: transparent !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head, html.kuflik-meganav-on body #header .header-main .mobile-toggle { position: relative; display: grid !important; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0 !important; place-items: center; box-sizing: border-box; border: 0 !important; border-radius: 12px; background: transparent !important; color: var(--kuflik-action-icon) !important; box-shadow: none !important; text-decoration: none; scale: 1; transition-property: background-color, color, box-shadow, scale !important; transition-duration: 120ms, 120ms, 120ms, 150ms !important; transition-timing-function: ease-out !important; } /* All four 44px targets sit inside one shared action dock. */ html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head { padding: 0 !important; background-clip: border-box !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:hover, html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:hover, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link[aria-current='page'], html.kuflik-meganav-on body #header .header-main #mini-cart:hover .cart-head, html.kuflik-meganav-on body #header .header-main #mini-cart:focus-visible .cart-head, html.kuflik-meganav-on body #header .header-main .mobile-toggle:hover, html.kuflik-meganav-on body #header .header-main .mobile-toggle:focus-visible { background-color: var(--kuflik-header-control-hover) !important; color: var(--kuflik-header-interactive) !important; } /* Karmel colorway shared with desktop: the dock and all four mobile controls use the same action surface, icon and interaction tokens. */ html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head, html.kuflik-meganav-on body #header .header-main .mobile-toggle { color: var(--kuflik-action-icon) !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:hover, html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:hover, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link[aria-current='page'], html.kuflik-meganav-on body #header .header-main #mini-cart:hover .cart-head, html.kuflik-meganav-on body #header .header-main #mini-cart:focus-visible .cart-head, html.kuflik-meganav-on body #header .header-main .mobile-toggle:hover, html.kuflik-meganav-on body #header .header-main .mobile-toggle:focus-visible { background-color: var(--kuflik-action-bg-hover) !important; color: var(--kuflik-action-icon) !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:active, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:active, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head:active, html.kuflik-meganav-on body #header .header-main .mobile-toggle:active { scale: .96; } html.kuflik-meganav-on body #header .header-main .mobile-toggle[aria-expanded='true'] { background-color: var(--kuflik-action-bg-hover) !important; color: var(--kuflik-action-icon) !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-text, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-items-text { display: none !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle > i, html.kuflik-meganav-on body #header .header-main .kuflik-account-link > i, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head .minicart-icon, html.kuflik-meganav-on body #header .header-main .mobile-toggle .kuflik-mobile-toggle__icon { position: relative; z-index: 1; display: inline-flex; width: auto; height: auto; margin: 0 !important; align-items: center; justify-content: center; border: 0 !important; background: transparent !important; color: currentColor; font-family: 'porto'; font-size: 18px !important; font-style: normal; font-weight: normal; line-height: 1; } html.kuflik-meganav-on body #header .header-main .mobile-toggle .kuflik-mobile-toggle__icons { position: relative; display: block; width: 21px; height: 21px; } html.kuflik-meganav-on body #header .header-main .mobile-toggle > .kuflik-mobile-toggle__icon { font-size: 20px !important; } html.kuflik-meganav-on body #header .header-main .mobile-toggle .kuflik-mobile-toggle__icons .kuflik-mobile-toggle__icon { position: absolute; inset: 0; display: grid; width: 21px; height: 21px; place-items: center; font-size: 20px !important; transform-origin: 50% 50%; backface-visibility: hidden; transition-property: opacity, transform !important; transition-duration: 300ms !important; transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important; } html.kuflik-meganav-on body #header .header-main .mobile-toggle .kuflik-mobile-toggle__icons .kuflik-mobile-toggle__icon--open { opacity: 1; transform: rotate(0deg) scale(1); } html.kuflik-meganav-on body #header .header-main .mobile-toggle .kuflik-mobile-toggle__icons .kuflik-mobile-toggle__icon--close { opacity: 0; transform: rotate(-90deg) scale(.72); } html.kuflik-meganav-on body #header .header-main .mobile-toggle.is-menu-open .kuflik-mobile-toggle__icons .kuflik-mobile-toggle__icon--open { opacity: 0; transform: rotate(90deg) scale(.72); } html.kuflik-meganav-on body #header .header-main .mobile-toggle.is-menu-open .kuflik-mobile-toggle__icons .kuflik-mobile-toggle__icon--close { opacity: 1; transform: rotate(0deg) scale(1); } /* Exact project-owned Porto Font codepoints. The production theme ships these class names; explicit scoped mappings also make the captured localhost harness render the same installed glyphs. */ html.kuflik-meganav-on body #header .header-main .mobile-toggle .porto-icon-bars::before { content: '\e923'; } html.kuflik-meganav-on body #header .header-main .mobile-toggle .porto-icon-cancel::before { content: '\e82c'; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head .minicart-icon-default::before { position: static; display: inline; width: auto; height: auto; margin: 0; border: 0; background: transparent; color: currentColor; content: '\e878' !important; font-family: 'porto'; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head .minicart-icon-default::after { display: none !important; content: none !important; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-icon { position: relative; display: grid; width: 20px; height: 20px; place-items: center; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-items { position: absolute; inset-block-start: -10px; inset-inline-end: -10px; display: grid; min-width: 20px; height: 20px; padding: 0 4px; place-items: center; border: 2px solid var(--kuflik-header-surface); border-radius: 999px; background: var(--kuflik-action-badge); color: var(--kuflik-action-on-badge) !important; font-family: 'Poppins', Arial, sans-serif; font-size: 11px !important; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; } /* The selected preview keeps the cart panel aligned to the viewport gutters, while its trigger stays inside the shared dock. The offset is stable because the menu action occupies 44px plus the 2px dock gap and 4px outer inset to the right of the cart. */ html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart .cart-popup { inset-block-start: 60px; inset-inline-end: -52px; width: min(366px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer[hidden], html.kuflik-meganav-on body #header .kuflik-mobile-submenu[hidden] { display: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer { position: absolute; z-index: 35; top: 100%; right: 0; left: 0; display: block; width: 100%; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; border-top: 1px solid var(--kuflik-header-separator); background: var(--kuflik-header-panel); box-shadow: 0 1px 0 rgba(36, 39, 31, .07), 0 16px 34px rgba(43, 50, 31, .10), 0 36px 68px rgba(43, 50, 31, .08); color: var(--kuflik-header-text); font-family: 'Poppins', Arial, sans-serif; font-weight: 400; line-height: normal; -webkit-overflow-scrolling: touch; } html.kuflik-meganav-on body #header .kuflik-mobile-nav, html.kuflik-meganav-on body #header .kuflik-mobile-drawer .menu-wrap, html.kuflik-meganav-on body #header .kuflik-mobile-menu { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-menu, html.kuflik-meganav-on body #header .kuflik-mobile-menu ul { list-style: none; } html.kuflik-meganav-on body #header .kuflik-mobile-menu .kuflik-mobile-item { position: relative; display: block !important; float: none !important; width: 100%; height: auto; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html.kuflik-meganav-on body #header .kuflik-mobile-menu .kuflik-mobile-item + .kuflik-mobile-item { border-top: 1px solid var(--kuflik-header-separator) !important; } html.kuflik-meganav-on body #header .kuflik-mobile-row { display: grid; width: 100%; min-height: 52px; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 12px; } html.kuflik-meganav-on body #header .kuflik-mobile-link, html.kuflik-meganav-on body #header .kuflik-mobile-trigger { display: flex !important; min-height: 52px; align-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--kuflik-header-text) !important; font-family: 'Poppins', Arial, sans-serif !important; font-size: 15px !important; font-style: normal; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.35 !important; text-align: start; text-decoration: none !important; text-transform: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-item > .kuflik-mobile-link { width: 100%; } html.kuflik-meganav-on body #header .kuflik-mobile-link > i { display: none !important; margin: 0 !important; } html.kuflik-meganav-on body #header .kuflik-mobile-trigger { width: 48px; min-width: 48px; justify-content: center; cursor: pointer; } html.kuflik-meganav-on body #header .kuflik-mobile-trigger__icon { display: inline-flex; width: 16px; height: 16px; margin: 0 !important; align-items: center; justify-content: center; color: currentColor; font-family: 'porto'; font-size: 12px; font-style: normal; font-weight: normal; line-height: 1; transform: rotate(0deg); transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } html.kuflik-meganav-on body #header .kuflik-mobile-trigger__icon::before { content: '\e815'; } html.kuflik-meganav-on body #header .kuflik-mobile-trigger[aria-expanded='true'] .kuflik-mobile-trigger__icon { transform: rotate(180deg); } html.kuflik-meganav-on body #header .kuflik-mobile-submenu { display: block; width: 100%; margin: 0; padding: 0 0 14px 14px; box-sizing: border-box; } html.kuflik-meganav-on body #header .kuflik-mobile-children, html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren { position: static !important; display: block !important; width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-children > li, html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren > li { display: block !important; float: none !important; width: 100%; height: auto; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html.kuflik-meganav-on body #header .kuflik-mobile-all, html.kuflik-meganav-on body #header .kuflik-mobile-child, html.kuflik-meganav-on body #header .kuflik-mobile-grandchild { display: flex !important; width: 100%; min-height: 44px; align-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--kuflik-header-text-muted) !important; font-family: 'Poppins', Arial, sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.45 !important; text-align: start; text-decoration: none !important; text-transform: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-all { color: var(--kuflik-header-interactive) !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: currentColor !important; text-underline-offset: 4px; } html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren { padding-inline-start: 16px !important; } html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle:focus-visible, html.kuflik-meganav-on body #header .header-main .kuflik-account-link:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head:focus-visible, html.kuflik-meganav-on body #header .header-main .mobile-toggle:focus-visible { border-radius: 12px; outline: 3px solid var(--kuflik-action-focus) !important; outline-offset: 2px !important; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer a:focus-visible, html.kuflik-meganav-on body #header .kuflik-mobile-drawer button:focus-visible { border-radius: 4px; outline: 3px solid var(--kuflik-header-state) !important; outline-offset: 3px !important; } /* ---------------------------------------------------------------------- Mobile menu — user-selected 3UI Variant 1 "Indeks". The DOM is still sourced from the WordPress menu. This layer changes only its mobile presentation: numbered editorial rows, descriptions, one-open disclosure groups and an informational footer. ---------------------------------------------------------------------- */ html.kuflik-meganav-on { --kuflik-mobile-paper: oklch(0.971 0.013 86.829); --kuflik-mobile-ink: oklch(0.281 0.011 91.699); --kuflik-mobile-body: oklch(0.464 0.018 76.917); --kuflik-mobile-muted: oklch(0.539 0.019 75.977); --kuflik-mobile-line: oklch(0.847 0.024 75.831); --kuflik-mobile-line-soft: oklch(0.927 0.015 80.706); --kuflik-mobile-number: oklch(0.345 0.037 52.873); --kuflik-mobile-tan: oklch(0.755 0.07 76.628); --kuflik-mobile-leaf: oklch(0.514 0.124 125.67); --kuflik-mobile-brown: oklch(0.345 0.037 52.873); --kuflik-mobile-hover: oklch(0.956 0.012 121.701); } html.kuflik-mobile-menu-open, html.kuflik-mobile-menu-open body { overflow: hidden; overscroll-behavior: none; } /* Keep touch, wheel and keyboard scrolling, but never expose a visual scrollbar beside the open mobile menu on Blink/WebKit, Firefox or legacy Edge. The page itself is already scroll-locked above. */ html.kuflik-mobile-menu-open, html.kuflik-mobile-menu-open body, html.kuflik-meganav-on body #header .kuflik-mobile-drawer { -ms-overflow-style: none; scrollbar-width: none; } html.kuflik-mobile-menu-open::-webkit-scrollbar, html.kuflik-mobile-menu-open body::-webkit-scrollbar, html.kuflik-meganav-on body #header .kuflik-mobile-drawer::-webkit-scrollbar { display: none; width: 0; height: 0; } html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel[hidden] { display: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer { width: 100%; height: calc(100vh - 76px); height: calc(100dvh - 76px); max-height: none; overflow-y: auto; scrollbar-gutter: auto; touch-action: pan-y; padding: 0 0 env(safe-area-inset-bottom); border-top-color: var(--kuflik-mobile-line-soft); background: var(--kuflik-mobile-paper); box-shadow: none; color: var(--kuflik-mobile-ink); font-family: 'Lato', Arial, sans-serif; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, -8px, 0); transform-origin: 50% 0; backface-visibility: hidden; contain: layout paint style; isolation: isolate; will-change: opacity, transform; transition-property: opacity, transform, visibility; transition-duration: 140ms, 180ms, 0s; transition-delay: 0s, 0s, 180ms; transition-timing-function: cubic-bezier(.7, 0, .84, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer[data-scroll-compensating] { overflow-anchor: none; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer[data-motion-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-duration: 200ms, 240ms, 0s; transition-delay: 0s; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } html.kuflik-meganav-on body #header .kuflik-mobile-nav { display: flex !important; min-height: 100%; flex-direction: column; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer .menu-wrap, html.kuflik-meganav-on body #header .kuflik-mobile-menu { display: block !important; flex: 0 0 auto; } html.kuflik-meganav-on body #header .kuflik-mobile-menu { padding-block-start: 4px !important; } html.kuflik-meganav-on body #header .kuflik-mobile-menu .kuflik-mobile-item { border-top: 1px solid var(--kuflik-mobile-line-soft) !important; } html.kuflik-meganav-on body #header .kuflik-mobile-menu .kuflik-mobile-item:first-child { border-top: 0 !important; } html.kuflik-meganav-on body #header .kuflik-mobile-menu .kuflik-mobile-item + .kuflik-mobile-item { border-top-color: var(--kuflik-mobile-line-soft) !important; } html.kuflik-meganav-on body #header .kuflik-mobile-row { display: flex; min-height: 60px; align-items: stretch; gap: 0; } html.kuflik-meganav-on body #header .kuflik-mobile-link { display: flex !important; min-width: 0; min-height: 60px; flex: 1 1 auto; align-items: baseline; gap: 14px; padding: 14px 4px 14px 20px !important; color: var(--kuflik-mobile-ink) !important; font-family: 'Lato', Arial, sans-serif !important; font-size: inherit !important; font-weight: 400 !important; line-height: normal !important; overflow-wrap: break-word; transition-property: background-color, transform; transition-duration: 150ms; transition-timing-function: ease-out; touch-action: manipulation; } html.kuflik-meganav-on body #header .kuflik-mobile-number { width: 24px; flex: 0 0 auto; color: var(--kuflik-mobile-number); font-family: 'Poppins', Arial, sans-serif; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.5; transition-property: color; transition-duration: 150ms; transition-timing-function: ease-out; } html.kuflik-meganav-on body #header .kuflik-mobile-text { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; } html.kuflik-meganav-on body #header .kuflik-mobile-label { color: var(--kuflik-mobile-ink); font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; } html.kuflik-meganav-on body #header .kuflik-mobile-description { color: var(--kuflik-mobile-body); font-size: 13px; font-weight: 400; line-height: 1.45; text-wrap: pretty; } html.kuflik-meganav-on body #header .kuflik-mobile-external-icon { margin-inline-start: 7px; color: var(--kuflik-mobile-body); font-size: 11px; vertical-align: 2px; } html.kuflik-meganav-on body #header .kuflik-mobile-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; margin: -1px !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; } html.kuflik-meganav-on body #header .kuflik-mobile-trigger, html.kuflik-meganav-on body #header .kuflik-mobile-subtrigger { display: inline-flex !important; width: 48px; min-width: 48px; min-height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; margin: 6px 8px 6px 4px !important; padding: 0 !important; border: 0 !important; border-radius: 8px; background: transparent !important; color: var(--kuflik-mobile-body) !important; cursor: pointer; transition-property: background-color, color; transition-duration: 150ms; transition-timing-function: ease-out; touch-action: manipulation; } html.kuflik-meganav-on body #header .kuflik-mobile-trigger__icon { width: 16px; height: 16px; font-size: 12px; transform: rotate(0deg); transition-property: transform; transition-duration: 180ms; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } html.kuflik-meganav-on body #header .kuflik-mobile-trigger[aria-expanded='true'] .kuflik-mobile-trigger__icon, html.kuflik-meganav-on body #header .kuflik-mobile-subtrigger[aria-expanded='true'] .kuflik-mobile-trigger__icon { transform: rotate(180deg); } html.kuflik-meganav-on body #header .kuflik-mobile-item-open > .kuflik-mobile-row .kuflik-mobile-number { color: var(--kuflik-mobile-leaf); } html.kuflik-meganav-on body #header .kuflik-mobile-submenu, html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel { display: grid; width: 100%; grid-template-rows: 0fr; margin: 0; padding: 0; transition-property: grid-template-rows; transition-duration: 240ms; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } html.kuflik-meganav-on body #header .kuflik-mobile-submenu[data-open], html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel[data-open] { grid-template-rows: 1fr; } html.kuflik-meganav-on body #header .kuflik-mobile-submenu-inner, html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel > .kuflik-mobile-grandchildren { min-height: 0; overflow: hidden; contain: paint; } html.kuflik-meganav-on body #header .kuflik-mobile-submenu-inner { margin: 0; padding: 0; border: 0; } html.kuflik-meganav-on body #header .kuflik-mobile-submenu-content { margin: 0 0 10px 57px; padding: 2px 0 2px 18px; border-inline-start: 2px solid var(--kuflik-mobile-tan); } /* A 0fr disclosure can only reach a real zero-height end state when its direct grid child has no block-axis margin or padding. The nested content wrapper preserves the accepted open geometry and border stop. */ html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren::after { display: block; width: 100%; content: ''; } html.kuflik-meganav-on body #header .kuflik-mobile-children, html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren { position: static !important; display: block !important; width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } html.kuflik-meganav-on body #header .kuflik-mobile-submenu-inner, html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel > .kuflik-mobile-grandchildren { opacity: 0 !important; transform: translate3d(0, -6px, 0) !important; transition-property: opacity, transform; transition-duration: 100ms, 140ms; transition-delay: 0s; transition-timing-function: cubic-bezier(.7, 0, .84, 0); } html.kuflik-meganav-on body #header .kuflik-mobile-submenu[data-open] > .kuflik-mobile-submenu-inner, html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel[data-open] > .kuflik-mobile-grandchildren { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; transition-duration: 160ms, 220ms; transition-delay: 20ms; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } html.kuflik-meganav-on body #header .kuflik-mobile-children > li, html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren > li { display: block !important; float: none !important; width: 100%; height: auto; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html.kuflik-meganav-on body #header .kuflik-mobile-all, html.kuflik-meganav-on body #header .kuflik-mobile-child, html.kuflik-meganav-on body #header .kuflik-mobile-grandchild { display: flex !important; width: 100%; min-height: 44px; align-items: center; margin: 0 !important; padding: 8px 12px 8px 0 !important; border: 0 !important; border-radius: 6px; background: transparent !important; color: var(--kuflik-mobile-body) !important; font-family: 'Lato', Arial, sans-serif !important; font-size: 15px !important; font-style: normal; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.4 !important; overflow-wrap: break-word; text-align: start; text-decoration: none !important; text-transform: none !important; transition-property: background-color, color, transform; transition-duration: 150ms; transition-timing-function: ease-out; touch-action: manipulation; } html.kuflik-meganav-on body #header .kuflik-mobile-all { gap: 10px; color: var(--kuflik-mobile-brown) !important; font-size: 14px !important; font-weight: 800 !important; text-decoration: underline !important; text-decoration-color: currentColor !important; text-decoration-skip-ink: auto; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px; } html.kuflik-meganav-on body #header .kuflik-mobile-all__icon { color: currentColor; font-family: 'porto'; font-size: 13px; font-style: normal; font-weight: normal; line-height: 1; text-decoration: none; } html.kuflik-meganav-on body #header .kuflik-mobile-child-row { display: flex; align-items: center; } html.kuflik-meganav-on body #header .kuflik-mobile-child-row .kuflik-mobile-child { min-width: 0; flex: 1 1 auto; color: var(--kuflik-mobile-ink) !important; font-weight: 800 !important; } html.kuflik-meganav-on body #header .kuflik-mobile-subtrigger { width: 44px; min-width: 44px; min-height: 44px; flex-basis: 44px; margin: 0 8px 0 0 !important; } html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren { padding-block-end: 0 !important; } html.kuflik-meganav-on body #header .kuflik-mobile-grandchildren::after { height: 4px; } html.kuflik-meganav-on body #header .kuflik-mobile-grandchild { min-height: 40px; padding: 6px 12px 6px 16px !important; color: var(--kuflik-mobile-muted) !important; font-size: 14px !important; } html.kuflik-meganav-on body #header .kuflik-mobile-grandchild::before { width: 12px; height: 1.5px; flex: 0 0 auto; margin-inline-end: 10px; background: var(--kuflik-mobile-line); content: ''; } html.kuflik-meganav-on body #header .kuflik-mobile-link:active, html.kuflik-meganav-on body #header .kuflik-mobile-child:active, html.kuflik-meganav-on body #header .kuflik-mobile-all:active, html.kuflik-meganav-on body #header .kuflik-mobile-grandchild:active { transform: translateY(1px); } html.kuflik-meganav-on body #header .kuflik-mobile-footer { margin-top: auto; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kuflik-mobile-line); } html.kuflik-meganav-on body #header .kuflik-mobile-footer-note { margin: 0; color: var(--kuflik-mobile-body); font-size: 13px; line-height: 1.5; } html.kuflik-meganav-on body #header .kuflik-mobile-footer-phone { display: inline-flex; min-height: 44px; align-items: center; margin-block-start: 2px; color: var(--kuflik-mobile-brown); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 800; text-decoration: none; } html.kuflik-meganav-on body #header .kuflik-mobile-drawer a:focus-visible, html.kuflik-meganav-on body #header .kuflik-mobile-drawer button:focus-visible { border-radius: 6px; outline: 3px solid var(--kuflik-mobile-leaf) !important; outline-offset: -3px !important; } html.kuflik-meganav-on body #header .kuflik-mobile-footer-phone:focus-visible { outline-offset: 2px !important; } } @media (max-width: 991px) and (hover: hover) { html.kuflik-meganav-on body #header .kuflik-mobile-link:hover, html.kuflik-meganav-on body #header .kuflik-mobile-trigger:hover, html.kuflik-meganav-on body #header .kuflik-mobile-subtrigger:hover, html.kuflik-meganav-on body #header .kuflik-mobile-child:hover, html.kuflik-meganav-on body #header .kuflik-mobile-all:hover, html.kuflik-meganav-on body #header .kuflik-mobile-grandchild:hover { background: var(--kuflik-mobile-hover) !important; color: var(--kuflik-mobile-ink) !important; } } @media (max-width: 991px) and (prefers-reduced-motion: reduce) { html.kuflik-meganav-on body #header .kuflik-mobile-drawer, html.kuflik-meganav-on body #header .kuflik-mobile-trigger__icon, html.kuflik-meganav-on body #header .kuflik-mobile-submenu, html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel, html.kuflik-meganav-on body #header .kuflik-mobile-submenu-inner, html.kuflik-meganav-on body #header .kuflik-mobile-grandpanel > .kuflik-mobile-grandchildren, html.kuflik-meganav-on body #header .kuflik-mobile-link, html.kuflik-meganav-on body #header .kuflik-mobile-trigger, html.kuflik-meganav-on body #header .kuflik-mobile-subtrigger, html.kuflik-meganav-on body #header .kuflik-mobile-child, html.kuflik-meganav-on body #header .kuflik-mobile-all, html.kuflik-meganav-on body #header .kuflik-mobile-grandchild, html.kuflik-meganav-on body #header .header-main .mobile-toggle .kuflik-mobile-toggle__icons .kuflik-mobile-toggle__icon, html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head, html.kuflik-meganav-on body #header .header-main .mobile-toggle { transition-duration: .01ms !important; transition-delay: 0s !important; } } @media (prefers-reduced-motion: reduce) { html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a, html.kuflik-meganav-on body #header .header-main #main-menu .main-menu > li.menu-item > a::after, .kuflik-meganav__chev, .kuflik-meganav__backdrop, .kuflik-meganav__panel, .kuflik-meganav__arrow, .kuflik-meganav__catlink, .kuflik-meganav__subs a, .kuflik-meganav__featured-track, .kuflik-meganav__featured-link, .kuflik-meganav__featured-media img, .kuflik-meganav__featured-control, .kuflik-meganav__featured-control::before { transition-duration: .01ms !important; } .kuflik-meganav__panel .kuflik-anim { animation: none !important; } } @media (forced-colors: active) { html.kuflik-meganav-on body #header .header-main .searchform-popup .search-toggle, html.kuflik-meganav-on body #header .header-main .kuflik-account-link, html.kuflik-meganav-on body #header .header-main #mini-cart .cart-head { border: 1px solid ButtonText; } .kuflik-meganav__featured { border: 1px solid CanvasText; } } /* Shared cart count badge — optically clear the shopping-bag handle while keeping the count inside the 44px action target on desktop and mobile. */ html.kuflik-meganav-on body #header .header-main #mini-cart .cart-icon > .cart-items { inset-block-start: -11px; inset-inline-end: -11px; box-sizing: border-box; width: max-content; min-width: 18px; height: 18px; padding-inline: 4px; font-size: 10px !important; } /* -------------------------------------------------------------------------- Filled mini-cart — user-selected Karmel colorway (3UI preview header-cart-colors, Variant 1): Porto skin camel family with site ink. Porto/WooCommerce remains the sole markup, quantity, pricing and fragment source. The accepted empty state is excluded explicitly. -------------------------------------------------------------------------- */ html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart-popup { width: min(400px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; overflow: hidden; border: 0; border-radius: 16px; background: var(--kuflik-cart-surface); box-shadow: 0 0 0 1px oklch(0.262 0.009 248.2 / .07), 0 12px 28px oklch(0.46 0.072 77 / .14), 0 28px 58px oklch(0.46 0.072 77 / .10); color: var(--kuflik-cart-text); font-family: 'Poppins', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: start; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart-icon::after { display: none !important; content: none !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart-items { background: var(--kuflik-cart-notification); color: var(--kuflik-cart-on-notification) !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .widget_shopping_cart_content { overflow: hidden; padding: 0; border-radius: inherit; background: var(--kuflik-cart-surface); color: var(--kuflik-cart-text); font-family: 'Poppins', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count { display: grid; height: 56px; min-height: 56px; margin: 0; padding: 0 20px; box-sizing: border-box; align-items: center; border-bottom: 1px solid var(--kuflik-cart-separator); background: var(--kuflik-cart-surface-subtle); grid-template-columns: minmax(0, 1fr) auto; gap: 16px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count::before, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count::after { display: none; content: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > span, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > a { float: none !important; margin: 0; font-family: 'Poppins', Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > span { min-width: 0; color: var(--kuflik-cart-text); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > a { display: inline-flex; min-height: 40px; align-items: center; justify-self: end; color: var(--kuflik-cart-accent) !important; text-decoration: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > a:hover { color: var(--kuflik-cart-accent-hover) !important; text-decoration: underline; text-underline-offset: 3px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list { display: block; min-height: 0; max-height: 336px; overflow: visible; margin: 0; padding: 0; background: var(--kuflik-cart-surface); list-style: none; scrollbar-gutter: auto; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list:has(> li:nth-child(3)) { overflow-x: hidden !important; overflow-y: auto !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list > li.mini_cart_item { position: relative; display: grid !important; min-height: 128px; margin: 0; padding: 20px !important; box-sizing: border-box; align-items: center; border: 0; border-bottom: 1px solid var(--kuflik-cart-separator); background: var(--kuflik-cart-surface); grid-template-columns: minmax(0, 1fr) 88px; gap: 20px; list-style: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details { position: static; display: grid; width: auto; max-width: none; min-width: 0; grid-column: 1; grid-row: 1; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a { display: block; min-width: 0; grid-column: 1 / -1; margin: 0; overflow: visible; color: var(--kuflik-cart-text) !important; font-family: 'Poppins', Arial, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; text-decoration: none; white-space: normal; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a:hover { color: var(--kuflik-cart-accent) !important; text-decoration: underline; text-underline-offset: 3px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > dl { grid-column: 1 / -1; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > .quantity.buttons_added { position: relative; display: grid; width: 124px; height: 40px; grid-template-columns: 40px 44px 40px; grid-column: 1; align-items: stretch; overflow: hidden; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--kuflik-cart-surface); box-shadow: inset 0 0 0 1px var(--kuflik-cart-control-border); color: var(--kuflik-cart-text); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty { position: relative !important; left: auto !important; display: grid; width: 100% !important; min-width: 0; height: 40px !important; min-height: 40px; margin: 0; padding: 0 !important; place-items: center; box-sizing: border-box; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--kuflik-cart-text) !important; box-shadow: none !important; font-family: 'Poppins', Arial, sans-serif; font-size: .875rem; font-weight: 600; line-height: 1; text-align: center; text-indent: 0 !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty { border-inline: 1px solid var(--kuflik-cart-control-border) !important; background: var(--kuflik-cart-control) !important; appearance: textfield; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty::-webkit-inner-spin-button, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty::-webkit-outer-spin-button { margin: 0; appearance: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus::before, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus::before, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus::after { display: none !important; content: none !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus:hover, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus:hover { background: var(--kuflik-cart-surface-subtle) !important; color: var(--kuflik-cart-accent) !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity { display: inline-flex; min-width: 0; grid-column: 2; align-items: center; margin: 0; color: var(--kuflik-cart-text-muted); font-family: 'Poppins', Arial, sans-serif; font-size: .8125rem; font-weight: 400; line-height: 1.4; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity .amount { color: inherit; font-size: inherit; font-weight: inherit; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image { position: relative; width: 88px; max-width: 88px; height: 88px; flex: none; grid-column: 2; grid-row: 1; margin: 0 !important; border: 0; background: transparent; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .inner { width: 88px; height: 88px; overflow: hidden; border-radius: 10px; background: var(--kuflik-cart-control); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image img { display: block; width: 88px; height: 88px; border: 0; border-radius: inherit; object-fit: cover; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .remove-product { inset-block-start: 4px; inset-inline-end: 4px; right: auto; display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border-radius: 999px; background: var(--kuflik-cart-surface); color: var(--kuflik-cart-accent); box-shadow: 0 2px 8px oklch(0.46 0.072 77 / .20); line-height: 1; opacity: 0; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image:hover .remove-product, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .remove-product:focus-visible { opacity: 1; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 0 20px !important; box-sizing: border-box; background: var(--kuflik-cart-surface-subtle); color: var(--kuflik-cart-text); font-family: 'Poppins', Arial, sans-serif; font-size: .875rem; line-height: 1.4; text-align: start; text-transform: uppercase; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total strong { color: var(--kuflik-cart-text) !important; font-weight: 700; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total .amount { float: none; margin-inline-start: auto; color: var(--kuflik-cart-text); font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons { margin: 0; padding: 0 20px 20px !important; background: var(--kuflik-cart-surface-subtle); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons::after { display: none; content: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; float: none; margin: 0; padding: 0 20px; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--kuflik-cart-cta); color: var(--kuflik-cart-on-cta) !important; font-family: 'Poppins', Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; text-align: center; text-decoration: none; text-transform: uppercase; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--kuflik-cart-cta-hover); color: var(--kuflik-cart-on-cta) !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > a:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added button:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added input:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .remove-product:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout:focus-visible { border-radius: 6px; outline: 3px solid var(--kuflik-cart-accent) !important; outline-offset: -3px !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout:focus-visible { outline-color: var(--kuflik-cart-on-cta) !important; } @media (prefers-reduced-motion: no-preference) { html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .remove-product, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout { transition-property: background-color, color, opacity, transform; transition-duration: 120ms; transition-timing-function: ease-out; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout:active { transform: scale(.98); } } @media (max-width: 991px) { html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart-popup { width: min(366px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count { padding-inline: 16px; gap: 12px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .total-count > a { min-height: 44px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list > li.mini_cart_item { min-height: 132px; padding: 16px !important; grid-template-columns: minmax(0, 1fr) 80px; gap: 16px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details { grid-template-columns: minmax(0, 1fr); gap: 10px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > .quantity.buttons_added, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > dl { grid-column: 1; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > .quantity.buttons_added { width: 136px; height: 44px; grid-template-columns: 44px 48px 44px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty { height: 44px !important; min-height: 44px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity { display: block; margin: 0; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .inner, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image img { width: 80px; max-width: 80px; height: 80px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total { min-height: 60px; padding-inline: 16px !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons { padding: 0 16px 16px !important; } } @media (prefers-contrast: more) { html.kuflik-meganav-on { --kuflik-cart-control-border: oklch(0.55 0.040 78); --kuflik-cart-separator: oklch(0.68 0.032 78); --kuflik-cart-text-muted: oklch(0.36 0.020 77); } } @media (prefers-reduced-motion: reduce) { html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .remove-product, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout { transition: none !important; } } @media (forced-colors: active) { html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart-popup, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout { border: 1px solid ButtonText; } } /* ========================================================================== Unified mini-cart — approved 3UI Variant 1 "Piasek" (2026-08-13). This final shared layer deliberately supersedes the earlier split empty and filled presentations. Porto/WooCommerce remains the sole source for markup, item count, links, prices, totals and quantity behavior. The empty-state bag uses the exact project-owned Porto Font shopping-bag glyph (\e878). ========================================================================== */ html.kuflik-meganav-on { --kuflik-cart-cream: #fbf8f2; --kuflik-cart-sand: #f0e7d8; --kuflik-cart-sand-deep: #e8dcc6; --kuflik-cart-line: #e3d5bd; --kuflik-cart-line-strong: #d1b690; --kuflik-cart-caramel: #c9aa7d; --kuflik-cart-caramel-deep: #b1874a; --kuflik-cart-brown: #755225; --kuflik-cart-brown-deep: #5f401b; --kuflik-cart-espresso: #2c2318; --kuflik-cart-ink: #212529; --kuflik-cart-muted: #5f5a55; } /* Anchor the count to the 44px cart action, not to the 20px bag wrapper. */ html.kuflik-meganav-on body #header .header-main #mini-cart .cart-icon { position: static; } html.kuflik-meganav-on body #header .header-main #mini-cart .cart-icon > .cart-items { z-index: 2; inset-block-start: -7px; inset-inline-end: -7px; width: max-content; min-width: 20px; height: 20px; padding-inline: 5px; border: 2px solid var(--kuflik-header-surface); background: var(--kuflik-cart-caramel); color: var(--kuflik-cart-espresso) !important; font-size: 11px !important; pointer-events: none; } html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-empty] .cart-popup { width: min(360px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; overflow: hidden; border: 0; border-radius: 14px; background: var(--kuflik-cart-cream); box-shadow: 0 0 0 1px oklch(0.18 0.03 60 / .07), 0 12px 28px oklch(0.46 0.072 77 / .14), 0 28px 58px oklch(0.46 0.072 77 / .10); color: var(--kuflik-cart-ink); font-family: 'Poppins', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: start; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .cart-icon::after { display: none !important; content: none !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .widget_shopping_cart_content { overflow: hidden; padding: 0; border-radius: inherit; background: var(--kuflik-cart-cream); color: var(--kuflik-cart-ink); font-family: 'Poppins', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count { display: grid; height: 56px; min-height: 56px; margin: 0; padding: 0 20px; box-sizing: border-box; align-items: center; border-bottom: 1px solid var(--kuflik-cart-line); background: var(--kuflik-cart-sand); color: var(--kuflik-cart-ink); grid-template-columns: minmax(0, 1fr) auto; gap: 16px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count::before, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count::after { display: none; content: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count > span, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count > a { float: none !important; margin: 0; color: var(--kuflik-cart-ink); font-family: 'Poppins', Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count > a { display: inline-flex; min-height: 40px; align-items: center; justify-self: end; color: var(--kuflik-cart-brown) !important; text-decoration: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count > a:hover, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count > a:focus-visible { color: var(--kuflik-cart-brown-deep) !important; text-decoration: underline; text-underline-offset: 3px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart_list { display: block; min-height: 0; max-height: none; overflow: visible; margin: 0; padding: 0; background: var(--kuflik-cart-cream); list-style: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart_list > li.empty { display: grid; min-height: 0; margin: 0; padding: 26px 20px 30px !important; justify-items: center; gap: 14px; background: var(--kuflik-cart-cream); color: var(--kuflik-cart-ink); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: center; white-space: normal; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='true'] .cart_list > li.empty::before { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 999px; background: var(--kuflik-cart-sand); color: var(--kuflik-cart-brown); content: '\e878'; font-family: 'porto'; font-size: 22px; font-style: normal; font-weight: 400; line-height: 1; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list { display: block; min-height: 0; max-height: 336px; overflow: visible !important; margin: 0; padding: 0; background: var(--kuflik-cart-cream); list-style: none; scrollbar-gutter: auto; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list > li.mini_cart_item { position: relative; display: grid !important; min-height: 124px; margin: 0; padding: 18px 20px !important; box-sizing: border-box; align-items: center; border: 0; border-bottom: 1px solid var(--kuflik-cart-line); background: var(--kuflik-cart-cream); grid-template-columns: minmax(0, 1fr) 88px; gap: 18px; list-style: none; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details { position: static; display: grid; width: auto; max-width: none; min-width: 0; grid-column: 1; grid-row: 1; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a { display: block; min-width: 0; grid-column: 1 / -1; margin: 0; overflow: visible; color: var(--kuflik-cart-ink) !important; font-family: 'Poppins', Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; text-decoration: none; white-space: normal; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a:hover { color: var(--kuflik-cart-brown) !important; text-decoration: underline; text-underline-offset: 3px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > dl { grid-column: 1 / -1; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > .quantity.buttons_added { position: relative; display: grid; width: 116px; height: 38px; grid-template-columns: 36px 44px 36px; grid-column: 1; align-items: stretch; overflow: hidden; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--kuflik-cart-cream); box-shadow: inset 0 0 0 1px var(--kuflik-cart-line-strong); color: var(--kuflik-cart-ink); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty { position: relative !important; left: auto !important; display: grid; width: 100% !important; min-width: 0; height: 38px !important; min-height: 38px; margin: 0; padding: 0 !important; place-items: center; box-sizing: border-box; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--kuflik-cart-ink) !important; box-shadow: none !important; font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; text-align: center; text-indent: 0 !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .qty { border-inline: 1px solid var(--kuflik-cart-line-strong) !important; background: var(--kuflik-cart-sand) !important; appearance: textfield; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .minus:hover, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added .plus:hover { background: var(--kuflik-cart-sand-deep) !important; color: var(--kuflik-cart-brown) !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity { display: inline-flex; min-width: 0; grid-column: 2; align-items: center; margin: 0; color: var(--kuflik-cart-muted); font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity .amount { color: inherit; font-size: inherit; font-weight: inherit; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .inner, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image img { width: 88px; max-width: 88px; height: 88px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image { position: relative; flex: none; grid-column: 2; grid-row: 1; margin: 0 !important; border: 0; background: transparent; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .inner { overflow: hidden; border-radius: 10px; background: var(--kuflik-cart-sand); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image img { display: block; border: 0; border-radius: inherit; object-fit: cover; outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 0 20px !important; box-sizing: border-box; background: var(--kuflik-cart-sand); color: var(--kuflik-cart-ink); font-family: 'Poppins', Arial, sans-serif; font-size: 13px; line-height: 1.4; text-align: start; text-transform: uppercase; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total strong { color: var(--kuflik-cart-ink) !important; font-weight: 700; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total .amount { float: none; margin-inline-start: auto; color: var(--kuflik-cart-ink); font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons { margin: 0; padding: 0 20px 20px !important; background: var(--kuflik-cart-sand); } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; float: none; margin: 0; padding: 0 20px; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--kuflik-cart-caramel); color: var(--kuflik-cart-espresso) !important; font-family: 'Poppins', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1.4; text-align: center; text-decoration: none; text-transform: uppercase; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--kuflik-cart-caramel-deep); color: var(--kuflik-cart-espresso) !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count > a:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added button:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added input:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .remove-product:focus-visible, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout:focus-visible { border-radius: 6px; outline: 3px solid var(--kuflik-cart-brown) !important; outline-offset: -3px !important; } @media (max-width: 359px) { html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty] .total-count { padding-inline: 16px; gap: 12px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .cart_list > li.mini_cart_item { padding: 16px !important; grid-template-columns: minmax(0, 1fr) 80px; gap: 14px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details { grid-template-columns: minmax(0, 1fr); gap: 10px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > a, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > .quantity.buttons_added, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > span.quantity, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-details > dl { grid-column: 1; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image .inner, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .product-image img { width: 80px; max-width: 80px; height: 80px; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__total { padding-inline: 16px !important; } html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons { padding: 0 16px 16px !important; } } @media (forced-colors: active) { html.kuflik-meganav-on body:not(.woocommerce-cart):not(.woocommerce-checkout) #header .header-main #mini-cart[data-kuflik-cart-empty] .cart-popup, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .quantity.buttons_added, html.kuflik-meganav-on body #header .header-main #mini-cart[data-kuflik-cart-empty='false'] .woocommerce-mini-cart__buttons .button.checkout { border: 1px solid ButtonText; } } /* ========================================================================== Shared desktop mega-menu dropdown — approved 3UI Variant 1 (2026-08-13). The production DOM, Store API carousel and Porto Font icons remain shared; this block migrates only the canonical desktop panel presentation. ========================================================================== */ @font-face { font-family: 'Kuflik Literata'; src: url('../fonts/Kuflik-Literata-Bold-Polish.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; } html.kuflik-meganav-on { --kuflik-meganav-ink: #252321; --kuflik-meganav-muted: #5f5a55; --kuflik-meganav-line: #e3d5bd; --kuflik-meganav-line-strong: #d1b690; --kuflik-meganav-cream: #fbf8f2; --kuflik-meganav-sand: #f0e7d8; --kuflik-meganav-caramel: #c9aa7d; --kuflik-meganav-caramel-deep: #b1874a; --kuflik-meganav-brown: #755225; --kuflik-meganav-brown-deep: #5f401b; --kuflik-meganav-espresso: #2c2318; --kuflik-meganav-on-espresso: #f7f2e9; --kuflik-meganav-on-espresso-muted: #d9c9b2; --kuflik-meganav-gold-on-dark: #e8d4b0; } @media (min-width: 992px) { html.kuflik-meganav-on body > .kuflik-meganav__backdrop { background: rgb(31 24 15 / .32); } .kuflik-meganav__panel { background: var(--kuflik-meganav-cream); box-shadow: 0 1px 0 rgb(44 35 24 / .08), 0 16px 34px rgb(44 35 24 / .10), 0 36px 68px rgb(44 35 24 / .08); color: var(--kuflik-meganav-ink); } .kuflik-meganav__swap { height: auto !important; min-height: 320px !important; grid-template-columns: clamp(300px, 24vw, 400px) minmax(0, 1fr) clamp(380px, 27vw, 450px); } .kuflik-meganav__swap--without-featured { grid-template-columns: clamp(300px, 24vw, 400px) minmax(0, 1fr); } .kuflik-meganav__intro { padding: 36px clamp(24px, 3vw, 52px); background: var(--kuflik-meganav-espresso); color: var(--kuflik-meganav-on-espresso); } .kuflik-meganav__title { color: var(--kuflik-meganav-on-espresso); font-family: 'Kuflik Literata', Georgia, serif; font-size: clamp(30px, 2.4vw, 42px); font-weight: 700; letter-spacing: -.02em; } .kuflik-meganav__desc { color: var(--kuflik-meganav-on-espresso-muted); } .kuflik-meganav__all, .kuflik-meganav__all:hover, .kuflik-meganav__all:focus-visible, .kuflik-meganav__all .kuflik-meganav__arrow { color: var(--kuflik-meganav-gold-on-dark); } .kuflik-meganav__all .kuflik-meganav__cta-label { text-decoration-color: rgb(232 212 176 / .5); } .kuflik-meganav__all:hover .kuflik-meganav__cta-label, .kuflik-meganav__all:focus-visible .kuflik-meganav__cta-label { text-decoration: none; } .kuflik-meganav__cols { gap: 0 clamp(24px, 2.5vw, 44px); padding: 32px clamp(24px, 2.5vw, 44px); background: var(--kuflik-meganav-cream); } .kuflik-meganav__cols:not(:has(.kuflik-meganav__subs)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 44px); grid-auto-flow: column; } .kuflik-meganav__catlink { border-bottom-color: var(--kuflik-meganav-line); color: var(--kuflik-meganav-ink); transition-property: color, border-color; } .kuflik-meganav__catlink:hover, .kuflik-meganav__catlink:focus-visible { border-bottom-color: var(--kuflik-meganav-line-strong); color: var(--kuflik-meganav-brown); } .kuflik-meganav__catlink .kuflik-meganav__arrow { color: var(--kuflik-meganav-brown); } .kuflik-meganav__subs a { color: var(--kuflik-meganav-muted); } .kuflik-meganav__subs a:hover, .kuflik-meganav__subs a:focus-visible { color: var(--kuflik-meganav-brown); } .kuflik-meganav__featured { padding: 18px 22px; border-inline-start-color: var(--kuflik-meganav-line); background: var(--kuflik-meganav-sand); } .kuflik-meganav__featured-viewport { clip-path: inset(0 1px 0 0); } .kuflik-meganav__featured-title { color: var(--kuflik-meganav-ink); } .kuflik-meganav__featured-counter { color: var(--kuflik-meganav-muted); font-size: 12px; } .kuflik-meganav__featured-control { color: var(--kuflik-meganav-brown); } .kuflik-meganav__featured-control::before { border-color: var(--kuflik-meganav-caramel); } .kuflik-meganav__featured-control:hover { color: var(--kuflik-meganav-brown-deep); } .kuflik-meganav__featured-control:hover::before { border-color: var(--kuflik-meganav-caramel-deep); background: #eee0c8; } .kuflik-meganav__featured-link { grid-template-columns: minmax(150px, 40%) minmax(0, 1fr); gap: 16px; color: var(--kuflik-meganav-ink); } .kuflik-meganav__featured-link:hover, .kuflik-meganav__featured-link:focus-visible { color: var(--kuflik-meganav-brown); } .kuflik-meganav__featured-media { border-radius: 3px; outline-offset: -1px; } .kuflik-meganav__featured-category, .kuflik-meganav__featured-cta { color: var(--kuflik-meganav-brown); font-size: 12px; } .kuflik-meganav__featured-price { color: var(--kuflik-meganav-muted); } .kuflik-meganav__featured-cta .kuflik-meganav__cta-label { text-decoration-color: rgb(117 82 37 / .38); } .kuflik-meganav__featured-cta .kuflik-meganav__arrow { color: inherit; } .kuflik-meganav__featured-skeleton { background: linear-gradient(#e3d5bd, #e3d5bd) 0 50% / 40% 88% no-repeat, linear-gradient(#eadfce, #eadfce) 76% 34% / 42% 10px no-repeat, linear-gradient(#eadfce, #eadfce) 76% 48% / 52% 10px no-repeat, linear-gradient(#eadfce, #eadfce) 70% 63% / 40% 10px no-repeat; } .kuflik-meganav__panel a:focus-visible, .kuflik-meganav__panel button:focus-visible { outline-color: var(--kuflik-meganav-brown) !important; } .kuflik-meganav__intro a:focus-visible { outline-color: var(--kuflik-meganav-gold-on-dark) !important; } } @media (prefers-reduced-motion: reduce) and (min-width: 992px) { .kuflik-meganav__featured-control::before { transition: none !important; } } @media (prefers-contrast: more) and (min-width: 992px) { html.kuflik-meganav-on { --kuflik-meganav-line: #b99b70; --kuflik-meganav-muted: #4b443c; } } /* ========================================================================== Blog dropdown — dynamic previews from the three newest WordPress posts. It extends the approved shared panel without changing product dropdowns. ========================================================================== */ @media (min-width: 992px) { .kuflik-meganav__swap--blog { height: clamp(388px, 22.76vw, 437px) !important; min-height: clamp(388px, 22.76vw, 437px) !important; grid-template-columns: clamp(300px, 24vw, 400px) minmax(0, 1fr) !important; } .kuflik-meganav__blog { display: grid; min-width: 0; grid-template-rows: 44px minmax(0, 1fr); gap: 10px; padding: 18px 22px; background: var(--kuflik-meganav-sand); color: var(--kuflik-meganav-ink); } .kuflik-meganav__blog-head { display: flex; min-width: 0; align-items: center; } .kuflik-meganav__blog-title { margin: 0; color: var(--kuflik-meganav-ink); font-family: 'Poppins', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; } .kuflik-meganav__blog-grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(12px, 1.4vw, 22px); } .kuflik-meganav__blog-card { min-width: 0; margin: 0; } .kuflik-meganav__blog-link { display: grid; min-width: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); color: var(--kuflik-meganav-ink); text-decoration: none; transition-property: color, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .kuflik-meganav__blog-link:hover, .kuflik-meganav__blog-link:focus-visible { color: var(--kuflik-meganav-brown); text-decoration: none; } .kuflik-meganav__blog-link:active { transform: scale(.96); } .kuflik-meganav__blog-media { display: grid; width: 100%; height: clamp(140px, 14vw, 260px); min-width: 0; place-items: center; overflow: hidden; border-radius: 3px; background: var(--kuflik-meganav-cream); color: var(--kuflik-meganav-muted); outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; font-family: 'Kuflik Literata', Georgia, serif; font-size: 18px; font-weight: 700; } .kuflik-meganav__blog-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition-property: transform; transition-duration: 220ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); } .kuflik-meganav__blog-link:hover .kuflik-meganav__blog-media img, .kuflik-meganav__blog-link:focus-visible .kuflik-meganav__blog-media img { transform: scale(1.02); } .kuflik-meganav__blog-body { display: flex; min-width: 0; padding-block-start: 12px; flex-direction: column; align-items: flex-start; } .kuflik-meganav__blog-meta { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 5px; color: var(--kuflik-meganav-muted); font-family: 'Poppins', Arial, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; } .kuflik-meganav__blog-date::before { margin-inline-end: 5px; content: '\00b7'; } .kuflik-meganav__blog-category { color: var(--kuflik-meganav-brown); } .kuflik-meganav__blog-name { display: -webkit-box; margin-block-start: 7px; overflow: hidden; color: inherit; font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .kuflik-meganav__blog-cta { display: inline-flex; min-height: 36px; margin-block-start: auto; padding-block-start: 8px; align-items: center; gap: 6px; color: var(--kuflik-meganav-brown); font-family: 'Poppins', Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.3; } .kuflik-meganav__blog-cta .kuflik-meganav__cta-label { text-decoration: underline; text-decoration-color: rgb(117 82 37 / .38); text-underline-offset: 4px; } .kuflik-meganav__blog-cta .kuflik-meganav__arrow { color: inherit; opacity: 1; transform: translateX(0); } .kuflik-meganav__blog-link:hover .kuflik-meganav__blog-cta .kuflik-meganav__arrow, .kuflik-meganav__blog-link:focus-visible .kuflik-meganav__blog-cta .kuflik-meganav__arrow { transform: translateX(3px); } .kuflik-meganav__blog--empty { grid-template-rows: 44px 1fr; } .kuflik-meganav__blog-empty { align-self: center; margin: 0; color: var(--kuflik-meganav-muted); font-size: 14px; line-height: 1.55; } } @media (min-width: 992px) and (max-width: 1199px) { .kuflik-meganav__swap--blog { height: 340px !important; min-height: 340px !important; grid-template-columns: 280px minmax(0, 1fr) !important; } .kuflik-meganav__blog { padding-inline: 14px; } .kuflik-meganav__blog-grid { gap: 10px; } .kuflik-meganav__blog-name { font-size: 13px; -webkit-line-clamp: 3; } } @media (prefers-reduced-motion: reduce) and (min-width: 992px) { .kuflik-meganav__blog-link, .kuflik-meganav__blog-media img { transition-duration: .01ms !important; } } @media (forced-colors: active) and (min-width: 992px) { .kuflik-meganav__blog-media { outline: 1px solid CanvasText; } } /* ========================================================================== Desktop dropdown text-rasterization stability, 2026-08-20. The shared panel previously faded and translated as a whole while every `.kuflik-anim` text group ran a second opacity + translate3d animation. Those two alpha ramps multiplied and kept text on changing compositor layers for roughly half a second, which looked like a delayed font-weight swap even though the loaded face and computed weight never changed. A desktop menu is a frequent interaction, so its text now enters at its final rasterization state. The backdrop and trigger chevron retain the existing spatial feedback without animating glyph pixels. ========================================================================== */ @media (min-width: 992px) { .kuflik-meganav__panel { left: 0; visibility: hidden; opacity: 0; transform: none; transition: none !important; } .kuflik-meganav__panel[data-state='open'] { visibility: visible; opacity: 1; transform: none; } .kuflik-meganav__panel[data-state='opening'] { visibility: visible; opacity: 0; transform: none; } .kuflik-meganav__panel[data-state='closing'] { visibility: hidden; opacity: 0; transform: none; } .kuflik-meganav__panel .kuflik-anim { opacity: 1 !important; transform: none !important; animation: none !important; } }