/* generated by scripts/css-min.php from ../parts.css — edit the source, never this file */
@media (prefers-reduced-motion: reduce) { :root { --vonnik-motion-fast: 0s; --vonnik-motion-base: 0s; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } .vonnik-button--icon:focus-visible, .vonnik-button--text:focus-visible, .vonnik-button--outline:focus-visible, .vonnik-chip:focus-visible, .vonnik-tick:focus-visible, .vonnik-tick input:focus-visible, .vonnik-field input:focus-visible, .vonnik-field select:focus-visible, .vonnik-field textarea:focus-visible, .vonnik-notice a:focus-visible, .vonnik-notice__close:focus-visible, .vonnik-sheet a:focus-visible, .vonnik-sheet button:focus-visible, .vonnik-sheet__close:focus-visible { outline: var(--vonnik-focus-width) solid var(--vonnik-focus-color); outline-offset: var(--vonnik-focus-offset); } .vonnik-button--inverse:focus-visible, .button.vonnik-button--inverse:focus-visible { outline: var(--vonnik-focus-width) solid var(--vonnik-focus-color-inverse); outline-offset: var(--vonnik-focus-offset); } h1, h2, h3, h4, h5, h6, .vonnik-heading { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; text-wrap: balance; } .vonnik-h-hero, .vonnik-h-display, .vonnik-h-title, .vonnik-h-xxxl, .vonnik-h-xxl, .vonnik-h-xl { font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); text-transform: uppercase; overflow-wrap: break-word; text-wrap: balance; } .vonnik-h-hero { font-size: var(--vonnik-text-hero); letter-spacing: var(--vonnik-tracking-display); } .vonnik-h-display { font-size: var(--vonnik-text-display); letter-spacing: var(--vonnik-tracking-display); } .vonnik-h-title { font-size: var(--vonnik-text-title); letter-spacing: var(--vonnik-tracking-display); } .vonnik-h-xxxl { font-size: var(--vonnik-text-xxxl); letter-spacing: var(--vonnik-tracking-text); } .vonnik-h-xxl { font-size: var(--vonnik-text-xxl); letter-spacing: var(--vonnik-tracking-text); } .vonnik-h-xl { font-size: var(--vonnik-text-xl); letter-spacing: var(--vonnik-tracking-text); } .vonnik-notice :is(h1, h2, h3), .vonnik-sheet :is(h1, h2, h3), .vonnik-field :is(h1, h2, h3) { font-size: var(--vonnik-text-xxl); font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-text); text-transform: uppercase; } .vonnik-notice :is(h4, h5, h6), .vonnik-sheet :is(h4, h5, h6), .vonnik-field :is(h4, h5, h6) { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-text); text-transform: uppercase; } .vonnik-visually-hidden { position: absolute; width: var(--vonnik-border-hairline); height: var(--vonnik-border-hairline); margin: calc(-1 * var(--vonnik-border-hairline)); padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; } .vonnik-stage { --vonnik-stage-min: var(--vonnik-sheet); position: relative; min-height: var(--vonnik-stage-min); overflow: hidden; transform: translateZ(0); } .vonnik-button--small, .button.vonnik-button--small, body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .vonnik-notice) .button { --theme-button-font-size: var(--vonnik-text-s); --theme-button-min-height: var(--vonnik-control-tap); --theme-button-padding: 0 var(--vonnik-space-4); } body .ct-cart-actions { --theme-button-padding: 0 var(--vonnik-control-pad-x); } .vonnik-button--outline, .button.vonnik-button--outline { --theme-button-background-initial-color: transparent; --theme-button-background-hover-color: var(--vonnik-blue); --theme-button-text-initial-color: var(--vonnik-blue); --theme-button-text-hover-color: var(--vonnik-on-action); --theme-button-border: var(--vonnik-border-hairline) solid var(--vonnik-blue); --theme-button-border-hover-color: var(--vonnik-blue); border: var(--vonnik-border-hairline) solid var(--vonnik-blue); } .vonnik-button--inverse, .button.vonnik-button--inverse { --theme-button-background-initial-color: var(--vonnik-on-action); --theme-button-background-hover-color: var(--vonnik-grey-card); --theme-button-text-initial-color: var(--vonnik-ink); --theme-button-text-hover-color: var(--vonnik-ink); background-color: var(--vonnik-on-action); color: var(--vonnik-ink); border: 0; } .vonnik-button--icon, .button.vonnik-button--icon { --theme-button-padding: 0; --theme-button-min-height: var(--vonnik-control-tap); min-width: var(--vonnik-control-tap); } .vonnik-button--icon::before, .button.vonnik-button--icon::before { content: ""; display: block; position: static; z-index: auto; flex: 0 0 auto; width: var(--vonnik-icon); height: var(--vonnik-icon); opacity: 1; filter: none; -webkit-mask: var(--vonnik-i) center / contain no-repeat; mask: var(--vonnik-i) center / contain no-repeat; background: currentColor; } .vonnik-button--text, .button.vonnik-button--text { --theme-button-background-initial-color: transparent; --theme-button-background-hover-color: transparent; --theme-button-text-initial-color: var(--vonnik-blue); --theme-button-text-hover-color: var(--vonnik-blue-dark); --theme-button-font-size: var(--vonnik-text-m); --theme-button-min-height: var(--vonnik-control-tap); --theme-button-padding: 0; background-color: transparent; border: 0; color: var(--vonnik-blue); text-decoration: none; } .vonnik-button--text:hover, .button.vonnik-button--text:hover { color: var(--vonnik-blue-dark); text-decoration: underline; } .vonnik-button--full, .button.vonnik-button--full { width: 100%; } @media (max-width: 689.98px) { .woocommerce-form-login__submit, .woocommerce-form-register__submit { width: 100%; } } .button:disabled, .button.disabled, .button[aria-disabled="true"], .vonnik-button--icon:disabled, .vonnik-button--text:disabled { opacity: var(--vonnik-disabled); cursor: not-allowed; } .button.loading, .button.is-loading { opacity: var(--vonnik-disabled); cursor: progress; pointer-events: none; } .button:active, .vonnik-button--outline:active, .vonnik-button--inverse:active { transform: translateY(var(--vonnik-border-hairline)); } :root { --theme-form-field-padding: 0 var(--vonnik-control-field-pad-x); } label { font-size: var(--vonnik-text-m); } .vonnik-field { display: grid; gap: var(--vonnik-space-2); } .vonnik-field__label, :is(.woocommerce-form-login, .woocommerce-form-register) .form-row > label:not(.vonnik-tick, .woocommerce-form__label-for-checkbox) { font-size: var(--vonnik-text-m); font-weight: var(--vonnik-weight-medium); color: var(--vonnik-ink); } .vonnik-field__required { color: var(--vonnik-danger); } .vonnik-field__help { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); } .vonnik-field__error { font-size: var(--vonnik-text-s); color: var(--vonnik-danger); } .vonnik-field--error input, .vonnik-field--error select, .vonnik-field--error textarea { border-color: var(--vonnik-danger); } .vonnik-field--unit { position: relative; } .vonnik-field--unit input { padding-right: calc(var(--vonnik-control-field-pad-x) * 2 + var(--vonnik-icon)); } .vonnik-field__unit { position: absolute; right: var(--vonnik-control-field-pad-x); bottom: 0; display: flex; align-items: center; min-height: var(--vonnik-control-tap); font-size: var(--vonnik-text-m); color: var(--vonnik-ink-soft); pointer-events: none; } .vonnik-tick { display: grid; grid-template-columns: var(--vonnik-control-tick) minmax(0, 1fr); align-items: center; align-content: center; gap: var(--vonnik-gap-control); min-height: var(--vonnik-control-tap); font-size: var(--vonnik-text-m); cursor: pointer; } form.variations_form table.variations label.vonnik-tick { display: grid; } .vonnik-tick input { -webkit-appearance: none; appearance: none; width: var(--vonnik-control-tick); min-width: var(--vonnik-control-tick); min-height: var(--vonnik-control-tick); margin: 0; padding: 0; background-color: var(--vonnik-surface); border: var(--vonnik-border-select) solid var(--vonnik-border-control); border-radius: var(--vonnik-radius); cursor: pointer; } .vonnik-tick input[type="radio"] { border-radius: var(--vonnik-radius-round); } .vonnik-tick input:checked { background-color: var(--vonnik-blue); background-image: var(--vonnik-check); background-position: center; background-size: 70%; background-repeat: no-repeat; border-color: var(--vonnik-blue); } .vonnik-tick input:disabled { opacity: var(--vonnik-disabled); cursor: not-allowed; } .vonnik-tick__label { min-width: 0; } .vonnik-tick__help { grid-column: 2; font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); } input[type="checkbox"].woocommerce-form__input-checkbox, input[type="checkbox"].ct-checkbox, #ship-to-different-address-checkbox, #rememberme, #terms, .woocommerce-checkout .payment_methods input[type="radio"], .woocommerce-shipping-methods input[type="radio"] { --top: 0; width: var(--vonnik-control-tick); min-width: var(--vonnik-control-tick); min-height: var(--vonnik-control-tick); border-width: var(--vonnik-border-select); border-radius: var(--vonnik-radius); } .form-row label.vonnik-tick { display: grid; } .woocommerce-checkout .payment_methods input[type="radio"], .woocommerce-shipping-methods input[type="radio"] { border-radius: var(--vonnik-radius-round); aspect-ratio: 1 / 1; flex: 0 0 auto; } .vonnik-chip { display: inline-block; padding: var(--vonnik-space-1) var(--vonnik-space-3); background-color: var(--vonnik-yellow); color: var(--vonnik-on-signal); border-radius: 0; font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); line-height: var(--vonnik-line-tight); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-text); } .vonnik-chip--small { padding: var(--vonnik-space-1) var(--vonnik-space-2); font-size: var(--vonnik-text-xs); } .ct-active-filters a:not(:first-child) { display: inline-flex; align-items: center; gap: var(--vonnik-space-2); padding: var(--vonnik-space-1) var(--vonnik-space-2); background-color: var(--vonnik-yellow); color: var(--vonnik-on-signal); border-radius: 0; font-size: var(--vonnik-text-xs); font-weight: var(--vonnik-weight-bold); line-height: var(--vonnik-line-tight); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-text); text-decoration: none; } .vonnik-chip--card { position: absolute; top: var(--vonnik-space-4); left: var(--vonnik-space-4); } .vonnik-notice, body .woocommerce-message, body .woocommerce-info, body .woocommerce-error { --theme-link-initial-color: var(--vonnik-blue); --theme-link-hover-color: var(--vonnik-blue-dark); --theme-text-color: var(--vonnik-ink); padding: var(--vonnik-space-5); background-color: var(--vonnik-surface); color: var(--vonnik-ink); border: var(--vonnik-border-hairline) solid var(--vonnik-border); border-left: var(--vonnik-border-edge) solid var(--vonnik-blue); border-radius: 0; font-size: var(--vonnik-text-m); } .vonnik-notice--confirm, body .woocommerce-message { border-left-color: var(--vonnik-blue); } .vonnik-notice--info, body .woocommerce-info { border-left-color: var(--vonnik-ink); } .vonnik-notice--warn { --vonnik-notice-tint: color-mix(in srgb, var(--vonnik-yellow) 25%, var(--vonnik-surface)); background-color: var(--vonnik-notice-tint); border-left-color: var(--vonnik-yellow); } .vonnik-notice--error, body .woocommerce-error { border-left-color: var(--vonnik-danger); } .vonnik-notice a:not(.button):not(.showlogin):not(.restore-item), body .woocommerce-message a:not(.button):not(.showlogin):not(.restore-item), body .woocommerce-info a:not(.button):not(.showlogin):not(.restore-item), body .woocommerce-error a:not(.button):not(.showlogin):not(.restore-item) { color: var(--vonnik-blue); } body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before { content: none; } .vonnik-notice__icon { display: inline-flex; flex: 0 0 auto; width: var(--vonnik-icon); height: var(--vonnik-icon); -webkit-mask: var(--vonnik-i) center / contain no-repeat; mask: var(--vonnik-i) center / contain no-repeat; background-color: currentColor; } .vonnik-notice__close { display: inline-flex; align-items: center; justify-content: center; min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .vonnik-notice__close::before { content: ""; width: var(--vonnik-icon); height: var(--vonnik-icon); -webkit-mask: var(--lucide-x) center / contain no-repeat; mask: var(--lucide-x) center / contain no-repeat; background-color: currentColor; } .vonnik-notice--toast { position: fixed; left: 50%; bottom: calc(var(--vonnik-dock-h) + var(--vonnik-space-5)); z-index: var(--vonnik-layer-toast); width: min(100% - var(--vonnik-space-5) * 2, var(--vonnik-layout-toast-max)); border-radius: var(--vonnik-radius); box-shadow: var(--vonnik-shadow-float); transform: translateX(-50%); transition: opacity var(--vonnik-motion-base), visibility var(--vonnik-motion-base); } .vonnik-notice--toast[hidden], .vonnik-notice--toast.is-hidden { opacity: 0; visibility: hidden; } body .cookie-notification .ct-button-group .ct-button { --theme-button-font-size: var(--vonnik-text-s); --theme-button-min-height: var(--vonnik-control-tap); --theme-button-padding: 0 var(--vonnik-space-4); } body .cookie-notification .ct-cookies-decline-button { --theme-button-border: var(--vonnik-border-hairline) solid var(--vonnik-blue); border: var(--vonnik-border-hairline) solid var(--vonnik-blue); } body .cookie-notification .ct-button-group { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 999.98px) { body .cookie-notification .ct-button-group { grid-template-columns: 1fr; width: 100%; } } .vonnik-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--vonnik-layer-sheet); display: flex; flex-direction: column; width: 100%; max-height: var(--vonnik-sheet); background-color: var(--vonnik-surface); border-radius: var(--vonnik-radius-sheet) var(--vonnik-radius-sheet) 0 0; box-shadow: var(--vonnik-shadow-float); transition: transform var(--vonnik-motion-base) var(--vonnik-motion-ease); } .vonnik-sheet[hidden] { display: none; } .vonnik-sheet.is-open { transform: translate3d(0, 0, 0); } .vonnik-sheet.is-closing, .vonnik-sheet:not(.is-open) { transform: translate3d(0, 100%, 0); } .vonnik-sheet__head { display: flex; align-items: center; gap: var(--vonnik-gap-control); padding: var(--vonnik-card-pad); border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-sheet__body { flex: 1 1 auto; padding: var(--vonnik-card-pad); overflow-y: auto; } .vonnik-sheet__foot { padding: var(--vonnik-card-pad); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-sheet__close { display: inline-flex; align-items: center; justify-content: center; min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); margin-inline-start: auto; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .vonnik-sheet__close::before { content: ""; width: var(--vonnik-icon); height: var(--vonnik-icon); -webkit-mask: var(--lucide-x) center / contain no-repeat; mask: var(--lucide-x) center / contain no-repeat; background-color: currentColor; } @media (min-width: 1000px) { .vonnik-sheet { inset-inline: auto 0; top: 0; width: min(100%, var(--vonnik-layout-sheet-max)); max-height: none; border-radius: 0; } .vonnik-sheet.is-closing, .vonnik-sheet:not(.is-open) { transform: translate3d(100%, 0, 0); } } #woo-cart-panel .ct-panel-inner, #offcanvas .ct-panel-inner, #search-modal .ct-panel-inner, #ct-added-to-cart-popup .ct-panel-inner, .sa-panel { background-color: var(--vonnik-surface); box-shadow: var(--vonnik-shadow-float); } #woo-cart-panel .ct-toggle-close, #offcanvas .ct-toggle-close, #search-modal .ct-toggle-close, #ct-added-to-cart-popup .ct-toggle-close { display: flex; align-items: center; justify-content: center; min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); } #woo-cart-panel .ct-toggle-close .ct-icon, #offcanvas .ct-toggle-close .ct-icon, #search-modal .ct-toggle-close .ct-icon, #ct-added-to-cart-popup .ct-toggle-close .ct-icon { width: var(--vonnik-icon); height: var(--vonnik-icon); } @media (max-width: 689.98px) { #woo-cart-panel .ct-panel-inner { inset-block: auto 0; height: auto; max-width: none; max-height: var(--vonnik-sheet); margin: 0; border-radius: var(--vonnik-radius-sheet) var(--vonnik-radius-sheet) 0 0; transform: translate3d(0, 20%, 0); } #woo-cart-panel.active .ct-panel-inner { transform: translate3d(0, 0, 0); } .sa-panel { inset-inline: 0; bottom: 0; width: 100%; max-width: none; height: var(--vonnik-sheet); max-height: var(--vonnik-sheet); border: 0; border-radius: var(--vonnik-radius-sheet) var(--vonnik-radius-sheet) 0 0; overflow: hidden; } } .vonnik-card { padding: var(--vonnik-card-pad); background-color: var(--vonnik-surface); border: var(--vonnik-border-hairline) solid var(--vonnik-border); border-radius: var(--vonnik-radius); } .vonnik-card--soft { background-color: var(--vonnik-grey-card); border: 0; box-shadow: var(--vonnik-card-shadow); } .vonnik-card--select { border-width: var(--vonnik-border-select); border-color: var(--vonnik-border-control); cursor: pointer; } .vonnik-card--select.is-active, .vonnik-card--select:has(> input:checked) { background-color: var(--vonnik-blue-soft); border-color: var(--vonnik-blue); } .vonnik-card--select[disabled], .vonnik-card--select.is-disabled { opacity: var(--vonnik-disabled); cursor: not-allowed; } @media (hover: hover) { .vonnik-card--select:not([disabled]):not(.is-disabled):hover { border-color: var(--vonnik-blue); } } .vonnik-card--flush { padding: 0; overflow: hidden; } a.vonnik-card:focus-visible, button.vonnik-card:focus-visible, label.vonnik-card:has(:focus-visible), .vonnik-card--select:has(:focus-visible) { outline: var(--vonnik-focus-width) solid var(--vonnik-focus-color); outline-offset: var(--vonnik-focus-offset); } .vonnik-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--vonnik-space-2) var(--vonnik-gap-control); } .vonnik-card__body { display: grid; gap: var(--vonnik-stack-s); } .vonnik-card__head + .vonnik-card__body, .vonnik-card__body + .vonnik-card__body { margin-top: var(--vonnik-stack-m); } .vonnik-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vonnik-gap-control); margin-top: var(--vonnik-stack-m); padding-top: var(--vonnik-stack-m); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-card__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--vonnik-space-1) var(--vonnik-gap-control); padding: var(--vonnik-space-4) var(--vonnik-card-pad); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-card__row:first-child { border-top: 0; } .vonnik-media-card { display: flex; flex-direction: column; background-color: var(--vonnik-ink); color: var(--vonnik-on-action); border-radius: 0; text-decoration: none; } .vonnik-media-card::before { content: ""; display: block; aspect-ratio: 369 / 272; background-image: var(--vonnik-media-img, none); background-position: center; background-size: cover; background-repeat: no-repeat; } .vonnik-media-card__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--vonnik-stack-s); padding: var(--vonnik-card-pad); } .vonnik-media-card :is(h2, h3, h4) { margin: 0; color: inherit; font-size: var(--vonnik-text-title); font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); text-transform: uppercase; } .vonnik-media-card p { margin: 0; color: inherit; font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-text); } .vonnik-media-card--grey { background-color: var(--vonnik-grey-card); color: var(--vonnik-ink); } .vonnik-media-card--drawing::before { background-color: var(--vonnik-surface); background-size: 92% auto; } .vonnik-media-card--overlay { position: relative; justify-content: flex-end; background-image: var(--vonnik-media-img, none); background-position: center; background-size: cover; background-repeat: no-repeat; } .vonnik-media-card--overlay::before { position: absolute; inset: 0; aspect-ratio: auto; background-color: var(--vonnik-overlay-strong); background-image: none; } .vonnik-media-card--overlay .vonnik-media-card__body { position: relative; width: 100%; } a.vonnik-media-card:focus-visible { outline: var(--vonnik-focus-width) solid var(--vonnik-focus-color-inverse); outline-offset: calc(-1 * var(--vonnik-focus-offset)); } .vonnik-lines--compact { --vonnik-lines-pic: var(--vonnik-control-thumb); } .vonnik-table, .vonnik-specs, .vonnik-checkout-totals, .woocommerce-cart .cart_totals table.shop_table, .woocommerce-MyAccount-content table.shop_table { --theme-table-padding: var(--vonnik-space-3) var(--vonnik-space-4); --theme-table-border-width: 0 0 var(--vonnik-border-hairline) 0; --theme-table-border-style: solid; --theme-table-border-color: var(--vonnik-border); --theme-table-font-size: var(--vonnik-text-m); border-collapse: collapse; color: var(--vonnik-ink); font-size: var(--vonnik-text-m); } .vonnik-table :is(th, td), .vonnik-specs :is(th, td), .vonnik-checkout-totals :is(th, td), .woocommerce-cart .cart_totals table.shop_table :is(th, td), .woocommerce-MyAccount-content table.shop_table :is(th, td) { padding: var(--vonnik-space-3) var(--vonnik-space-4); border: 0; border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); text-align: left; vertical-align: top; } .vonnik-table th, .vonnik-specs th, .vonnik-checkout-totals th, .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-MyAccount-content table.shop_table th { color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-medium); letter-spacing: var(--vonnik-tracking-text); text-transform: uppercase; } .vonnik-specs :is(th, td):first-child, .vonnik-table--compare :is(th, td):first-child { padding-inline-start: 0; } .vonnik-specs :is(th, td):last-child, .vonnik-table--compare :is(th, td):last-child { padding-inline-end: 0; } .vonnik-table--compare :is(th, td) > p { margin: 0; } .vonnik-table__num { font-variant-numeric: tabular-nums; text-align: right; } .vonnik-table--totals tr:last-child :is(th, td) { background-color: var(--vonnik-grey-card); font-weight: var(--vonnik-weight-black); } @media (max-width: 689.98px) { .vonnik-table, .vonnik-table thead, .vonnik-table tbody, .vonnik-table tfoot, .vonnik-specs, .vonnik-specs tbody, .vonnik-checkout-totals, .vonnik-checkout-totals tbody { display: block; } .vonnik-table tr, .vonnik-specs tr, .vonnik-checkout-totals tr { display: grid; gap: var(--vonnik-space-1); padding: var(--vonnik-space-4) 0; border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-table :is(th, td), .vonnik-specs :is(th, td), .vonnik-checkout-totals :is(th, td) { display: block; padding: 0; border: 0; } .vonnik-table__num { text-align: left; } .vonnik-table--compare thead { display: none; } .vonnik-table--compare tr:last-child { border-bottom: 0; } .vonnik-table--compare td:first-child { font-weight: var(--vonnik-weight-bold); } .vonnik-table--compare td[data-label]::before { content: attr(data-label); display: block; color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-medium); letter-spacing: var(--vonnik-tracking-text); text-transform: uppercase; } } .vonnik-breadcrumb, .ct-breadcrumbs { color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); white-space: normal; overflow: visible; text-overflow: clip; } .vonnik-breadcrumb a, .ct-breadcrumbs a { color: var(--vonnik-ink-soft); font-weight: var(--vonnik-weight-regular); } .vonnik-breadcrumb > :last-child, .ct-breadcrumbs > :last-child { color: var(--vonnik-ink); font-weight: var(--vonnik-weight-bold); } .vonnik-breadcrumb > :not(:last-child)::after, .ct-breadcrumbs > :not(:last-child):not(.ct-separator)::after { content: ""; display: inline-block; width: var(--vonnik-icon); height: var(--vonnik-icon); margin: 0 var(--vonnik-icon-gap); vertical-align: middle; background-color: currentColor; -webkit-mask: var(--lucide-chevron) center / contain no-repeat; mask: var(--lucide-chevron) center / contain no-repeat; transform: rotate(-90deg); } @media (max-width: 689.98px) { .vonnik-breadcrumb > :not(:nth-last-child(2)):not(:only-child), .hero-section[data-type="type-1"] .ct-breadcrumbs > :not(:nth-last-child(2)):not(:only-child), body.single-product .ct-breadcrumbs > :not(:nth-last-child(2)):not(:only-child) { display: none; } .vonnik-breadcrumb > :nth-last-child(2)::after, .hero-section[data-type="type-1"] .ct-breadcrumbs > :nth-last-child(2)::after, body.single-product .ct-breadcrumbs > :nth-last-child(2)::after { content: none; } .vonnik-breadcrumb > :nth-last-child(2)::before, .hero-section[data-type="type-1"] .ct-breadcrumbs > :nth-last-child(2)::before, body.single-product .ct-breadcrumbs > :nth-last-child(2)::before { content: ""; display: inline-block; width: var(--vonnik-icon); height: var(--vonnik-icon); margin-right: var(--vonnik-icon-gap); vertical-align: middle; background-color: currentColor; -webkit-mask: var(--lucide-chevron) center / contain no-repeat; mask: var(--lucide-chevron) center / contain no-repeat; transform: rotate(90deg); } } .vonnik-eyebrow { color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-medium); letter-spacing: var(--vonnik-tracking-text); text-transform: uppercase; } .vonnik-price { color: var(--vonnik-ink); font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); font-variant-numeric: tabular-nums; white-space: nowrap; } .vonnik-price__vat { color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-regular); } .vonnik-price--large { font-size: var(--vonnik-text-xxxl); } .vonnik-kv { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; row-gap: var(--vonnik-space-1); column-gap: var(--vonnik-space-5); } .vonnik-kv :is(dt, .vonnik-kv__label) { color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-medium); } .vonnik-kv :is(dd, .vonnik-kv__value) { margin: 0; color: var(--vonnik-ink); font-size: var(--vonnik-text-m); overflow-wrap: break-word; } @media (min-width: 690px) { .vonnik-kv { grid-template-columns: var(--vonnik-kv-label) minmax(0, 1fr); row-gap: var(--vonnik-space-2); } } .vonnik-divider { margin: var(--vonnik-stack-m) 0; border: 0; border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-avail { display: inline-flex; align-items: baseline; gap: var(--vonnik-icon-gap); max-width: 100%; color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); } .vonnik-avail i { flex: 0 0 auto; width: var(--vonnik-icon-dot); height: var(--vonnik-icon-dot); background-color: var(--vonnik-grey-dot); border-radius: var(--vonnik-radius-round); } .vonnik-avail--green i { background-color: var(--vonnik-green); } .vonnik-avail--amber i { background-color: var(--vonnik-amber); } .vonnik-avail--grey i { background-color: var(--vonnik-grey-dot); } .vonnik-avail--small { font-size: var(--vonnik-text-xs); } .vonnik-empty { display: flex; flex-direction: column; align-items: center; gap: var(--vonnik-stack-m); padding: var(--vonnik-space-9) var(--vonnik-card-pad); color: var(--vonnik-ink-soft); text-align: center; } .vonnik-empty__icon { flex: 0 0 auto; width: calc(var(--vonnik-icon) * 2); height: calc(var(--vonnik-icon) * 2); background-color: currentColor; -webkit-mask: var(--vonnik-i) center / contain no-repeat; mask: var(--vonnik-i) center / contain no-repeat; } .vonnik-empty__text { margin: 0; color: var(--vonnik-ink); font-size: var(--vonnik-text-l); } .vonnik-disc { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--vonnik-disc-size); height: var(--vonnik-disc-size); border-radius: var(--vonnik-radius-round); } .vonnik-band { padding-top: var(--vonnik-section); padding-bottom: var(--vonnik-section); } .vonnik-band, .vonnik-page-hero, .vonnik-faq-band, .vonnik-faq, .vonnik-404, .single-product .related.products { background: var(--vonnik-grey-band); } .vonnik-band--ink, .vonnik-values-band { background: var(--vonnik-navy); } .vonnik-band--action, .vonnik-cta-band { background: var(--vonnik-blue); } .vonnik-page-hero--plain { background: transparent; } .vonnik-bar { background-color: var(--vonnik-surface); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); padding: var(--vonnik-space-3) var(--vonnik-space-5); transition: opacity var(--vonnik-motion-base), visibility var(--vonnik-motion-base); } .vonnik-bar.is-hidden { opacity: 0; visibility: hidden; } .vonnik-xh { position: relative; min-height: 72svh; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--vonnik-radius); } .vonnik-xh__bg { position: absolute; inset: 0; } .vonnik-xh__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--vonnik-xh-pos, center); } .vonnik-xh__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to top, var(--vonnik-overlay-strong) 55%, transparent 100%); } .vonnik-xh__in { position: relative; width: 100%; padding: var(--vonnik-space-8) var(--vonnik-space-6); display: grid; gap: var(--vonnik-space-3); } .vonnik-cmp { border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-cmp summary { list-style: none; cursor: pointer; padding: var(--vonnik-space-4) 0; display: flex; justify-content: space-between; align-items: center; } .vonnik-cmp summary::-webkit-details-marker { display: none; } .vonnik-cmp summary::after { content: "+"; font-size: var(--vonnik-text-xxl); } .vonnik-cmp[open] summary::after { content: "\2013"; } .vonnik-cmp summary h2 { margin: 0; } .vonnik-answer { display: flex; align-items: center; gap: var(--vonnik-space-3); margin: 0; padding: var(--vonnik-space-2) var(--vonnik-space-2) var(--vonnik-space-2) var(--vonnik-space-4); background-color: var(--vonnik-surface); border: var(--vonnik-border-hairline) solid var(--vonnik-border); border-radius: var(--vonnik-radius); } .vonnik-answer svg { width: var(--vonnik-icon); height: var(--vonnik-icon); flex: 0 0 auto; } .vonnik-answer__ok { display: inline-flex; color: var(--vonnik-green); } .vonnik-answer__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .vonnik-answer__text small { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); line-height: var(--vonnik-line-tight); } .vonnik-answer__text strong { font-weight: var(--vonnik-weight-bold); line-height: var(--vonnik-line-tight); overflow-wrap: anywhere; } .vonnik-answer__edit { display: inline-flex; align-items: center; justify-content: center; min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); padding: 0; border: 0; background: transparent; color: var(--vonnik-navy); cursor: pointer; } .vonnik-answer__edit:focus-visible { outline: var(--vonnik-focus-width) solid var(--vonnik-focus-color); outline-offset: var(--vonnik-focus-offset); }