/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
/*!
Theme Name: _tw
Theme URI: https://underscoretw.com/
Description: A custom theme based on _tw
Version: 0.1.0
Author: underscoretw.com
Author URI: https://underscoretw.com/
Text Domain: _tw
Requires at least: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_tw is based on _tw https://underscoretw.com/, (C) 2021-2026 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2026 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/
@layer properties;:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% 0.013 17.38);--color-red-200:oklch(88.5% 0.062 18.334);--color-red-500:oklch(63.7% 0.237 25.331);--color-red-600:oklch(57.7% 0.245 27.325);--color-gray-100:oklch(96.7% 0.003 264.542);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-400:oklch(70.7% 0.022 261.325);--color-gray-500:oklch(55.1% 0.027 264.364);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-800:oklch(27.8% 0.033 256.848);--color-gray-900:oklch(21% 0.034 264.665);--color-neutral-100:oklch(97% 0 none);--color-neutral-200:oklch(92.2% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-400:oklch(70.8% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-600:oklch(43.9% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-800:oklch(26.9% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:0.75rem;--text-xs--line-height:calc(1 / 0.75);--text-sm:13px;--text-sm--line-height:calc(1.25 / 0.875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:0.375rem;--radius-lg:0.5rem;--ease-out:cubic-bezier(0, 0, 0.2, 1);--ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--blur-2xl:40px;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--wp--preset--color--background);--color-foreground:var(--wp--preset--color--foreground);--color-primary:var(--wp--preset--color--primary);--container-content:var(--wp--style--global--content-size);--container-wide:var(--wp--style--global--wide-size);--tw-prose-font-normal:400;--tw-prose-font-medium:500;--tw-prose-font-semibold:600;--tw-prose-font-bold:700;--tw-prose-font-extrabold:800;--tw-prose-font-black:900}@font-face{font-family:'InstrumentSans';font-style:normal;font-weight:400;src:url(/wp-content/themes/_tw/theme/fonts/InstrumentSans-VariableFont_wdth,wght.ttf) format('truetype')}@font-face{font-family:'InstrumentSerif';font-style:normal;font-weight:400;src:url(/wp-content/themes/_tw/theme/fonts/InstrumentSerif-Regular.ttf) format('truetype')}@font-face{font-family:'InstrumentSerifItalic';font-style:normal;font-weight:400;src:url(/wp-content/themes/_tw/theme/fonts/InstrumentSerif-Italic.ttf) format('truetype')}@font-face{font-family:'Merriweather';font-style:normal;font-weight:400;src:url(/wp-content/themes/_tw/theme/fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf) format('truetype')}@font-face{font-family:'PlayfairDisplay';font-style:normal;font-weight:400;src:url(/wp-content/themes/_tw/theme/fonts/PlayfairDisplay-VariableFont_wght.ttf) format('truetype')}*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','Noto Sans',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji');font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:#fff0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:#fff0;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::placeholder{color:currentcolor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type='button'],[type='reset'],[type='submit']),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden='until-found'])){display:none!important}body{background-color:#fff;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:#000}html{scroll-behavior:smooth;font-family:'CabinetGrotesk'}section,[id]{scroll-margin-top:80px}.menu ul{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.menu li,a{cursor:pointer;--tw-duration:300ms;transition-duration:300ms}@media (hover:hover){:is(.menu li,a):hover{color:#b8b8b8}}.admin-bar #masthead{top:calc(var(--spacing) * -4)}.header-actions{position:relative}.header-actions .wc-slide-search,.header-actions .wc-slide-search-form,.header-actions>:not(a):has(.wc-slide-search-input),.header-actions form:has(.wc-slide-search-input){position:absolute;top:calc(1 / 2 * 100%);right:100%;z-index:20;margin-right:calc(var(--spacing) * 4);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.header-actions>.wc-slide-search-input{position:absolute;top:calc(1 / 2 * 100%);right:100%;z-index:20;margin-right:calc(var(--spacing) * 4);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.wc-slide-search-input{width:min(18rem, calc(100vw - 3rem));max-width:calc(100vw - 3rem);background-color:color-mix(in oklab,#F6F4F2 95%,transparent)}.btn-primary{background-color:#000;padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:#fff}.baner .btn-primary{background-color:rgb(0 0 0 / .33);color:#fff}.btn-secondary{background-color:#000;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-white)}@media (hover:hover){.btn-secondary:hover{color:var(--color-white)!important}}.quantity input[type="number"]{width:calc(var(--spacing) * 15)}button:not(#mobile-menu-toggle,#mobile-menu-close,#mobile-filters-toggle,#mobile-filters-close,#close-lightbox,.mini-cart-close,.cvb-button,.wco-close,.slidein-cart-close,.faq-accordion-toggle),input[type="submit"]{cursor:pointer;--tw-border-style:none;border-style:none;background-color:rgb(255 255 255 / .9);padding:calc(var(--spacing) * 3);color:#000;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:300ms;transition-duration:300ms}@media (hover:hover){:is(button:not(#mobile-menu-toggle,#mobile-menu-close,#mobile-filters-toggle,#mobile-filters-close,#close-lightbox,.mini-cart-close,.cvb-button,.wco-close,.slidein-cart-close,.faq-accordion-toggle),input[type="submit"]):hover{background-color:#000;color:#fff}}input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),textarea{border-style:var(--tw-border-style);border-width:1px;border-color:#000;background-color:#FFF;padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 3);outline-style:var(--tw-outline-style);outline-width:0;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:300ms;transition-duration:300ms}@media (hover:hover){:is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),textarea):hover{border-color:#000}}:is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),textarea):focus{border-color:#000}input[type="checkbox"],input[type="radio"]{position:relative;height:calc(var(--spacing) * 4);width:calc(var(--spacing) * 4);cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;border-color:#000;vertical-align:middle}input[type="checkbox"]:checked,input[type="radio"]:checked{background-color:#000}.newsletter{display:flex;flex-direction:column;gap:calc(var(--spacing) * 3)}.wpcf7-spinner{display:none}.newsletter-form{display:flex;flex-direction:row;gap:var(--spacing)}.wpcf7-text{width:100%}.wpcf7-list-item{margin:0}.wpcf7-list-item label{display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:calc(var(--spacing) * 3)}.wpcf7-not-valid-tip{margin-top:calc(var(--spacing) * 1.5)}.widget_shopping_cart_content{height:100%}.cart-badge-count{display:flex;height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 5);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:#247e60;color:var(--color-white);top:calc(var(--spacing) * -3.5);right:calc(var(--spacing) * -3.5)}.slidein-cart-body{padding:0}.slidein-cart-header{--tw-border-style:none;border-style:none;padding:0}.slidein-cart-header h3{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.slidein-cart-panel{padding:calc(var(--spacing) * 4)}.woocommerce-notices-wrapper{display:none}.woocommerce-product-attributes-item__value{display:flex;flex-direction:row;justify-content:flex-end;--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.wc-tabs li.active{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;color:var(--color-black)}.page-numbers li:has(.current){border-radius:calc(infinity * 1px);background-color:var(--color-black);padding-inline:calc(var(--spacing) * 4.5);padding-block:calc(var(--spacing) * 2.5);color:var(--color-white)}.page-numbers li a:hover{background-color:var(--color-black);color:var(--color-white)}.page-numbers li a{border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing) * 3.5);padding-block:calc(var(--spacing) * 1.5)}#price-slider.noUi-target{margin-top:calc(var(--spacing) * 5);margin-bottom:calc(var(--spacing) * 6.25);height:calc(var(--spacing) * 0.75);border-style:var(--tw-border-style);border-width:0;background-color:var(--color-gray-200);padding-inline:calc(var(--spacing) * 2.25);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}#price-slider .noUi-connect{background-color:#111}#price-slider .noUi-handle{top:calc(var(--spacing) * -2);right:calc(var(--spacing) * -2.25);width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0;background-color:#111;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:100ms;transition-duration:100ms;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}#price-slider .noUi-handle::before,#price-slider .noUi-handle::after{display:none}#price-slider .noUi-base{position:relative;z-index:1;height:100%;width:100%}.woocommerce-product-attributes-item__label{text-align:left;--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}#tab-description h6{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-black)}#tab-description h4{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-black)}.custom-accordion-panel tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style:dashed;border-style:dashed;border-color:color-mix(in oklab,#733828 20%,transparent)}.custom-accordion-panel tr:last-child{--tw-border-style:none;border-style:none}.custom-accordion-panel tr:last-child th,.custom-accordion-panel tr:last-child td{padding-bottom:0}.custom-accordion-panel tr td,.custom-accordion-panel tr th{padding-block:calc(var(--spacing) * 2)}.custom-accordion-panel td:last-child{text-align:right;--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.woocommerce-MyAccount-orders{width:100%}.woocommerce-MyAccount-orders td{padding-block:calc(var(--spacing) * 1.5);text-align:center}.woocommerce-Addresses{display:flex;flex-direction:column;gap:calc(var(--spacing) * 3.5)}.woocommerce-Address a{margin-top:var(--spacing);margin-bottom:calc(var(--spacing) * 3.5);display:block;width:fit-content}.woocommerce-Addresses h2{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.woocommerce-Addresses address{color:var(--color-gray-500)}.mitensy-thankyou .woocommerce-order-details{margin:0}.mitensy-thankyou .woocommerce-order-details__title,.mitensy-thankyou .woocommerce-column__title{margin-bottom:calc(var(--spacing) * 5);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-black)}.mitensy-thankyou .woocommerce-table--order-details{margin-bottom:calc(var(--spacing) * 8);width:100%;border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);overflow:hidden;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;--tw-border-style:solid;border-style:solid;border-color:var(--color-gray-200);text-align:left}.mitensy-thankyou .woocommerce-table--order-details thead{background-color:#f5f5f5}.mitensy-thankyou .woocommerce-table--order-details th,.mitensy-thankyou .woocommerce-table--order-details td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style:solid;border-style:solid;border-color:var(--color-gray-200);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 4);vertical-align:top;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.mitensy-thankyou .woocommerce-table--order-details tr:last-child th,.mitensy-thankyou .woocommerce-table--order-details tr:last-child td{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.mitensy-thankyou .woocommerce-table--order-details tfoot th{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-gray-600)}.mitensy-thankyou .woocommerce-table--order-details tfoot tr:last-child th,.mitensy-thankyou .woocommerce-table--order-details tfoot tr:last-child td{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-black)}.mitensy-thankyou .woocommerce-table__product-name a{color:var(--color-black)}@media (hover:hover){:is(.mitensy-thankyou .woocommerce-table__product-name a):hover{color:var(--color-gray-600)}}.mitensy-thankyou .woocommerce-table__product-name .wc-item-meta{margin-top:calc(var(--spacing) * 2);display:flex;flex-direction:column;gap:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-gray-500)}.mitensy-thankyou .woocommerce-customer-details{margin:0}.mitensy-thankyou .woocommerce-columns{display:flex;flex-direction:column;gap:calc(var(--spacing) * 5)}@media (width>=48rem){.mitensy-thankyou .woocommerce-columns{display:grid}}@media (width>=48rem){.mitensy-thankyou .woocommerce-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}.mitensy-thankyou .woocommerce-column{float:none;width:100%;border-radius:var(--radius-lg);background-color:#f5f5f5;padding:calc(var(--spacing) * 5)}.mitensy-thankyou address{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7);color:var(--color-gray-600);font-style:normal}.mitensy-thankyou .woocommerce-order-details+.woocommerce-customer-details{margin-top:calc(var(--spacing) * 8);border-top-style:var(--tw-border-style);border-top-width:1px;--tw-border-style:solid;border-style:solid;border-color:var(--color-gray-200);padding-top:calc(var(--spacing) * 8)}.mitensy-thankyou .order-again{margin-top:calc(var(--spacing) * 6)}.mitensy-thankyou .order-again .button{display:inline-flex;border-radius:var(--radius-lg);background-color:var(--color-black);padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 3);color:var(--color-white)}@media (hover:hover){:is(.mitensy-thankyou .order-again .button):hover{background-color:var(--color-gray-800)}}::selection{background-color:#247e60;color:var(--color-white)}input.has-error,.woocommerce-invalid input{border-color:var(--color-red-500)}span.coupon-error-notice,.woocommerce-invalid p{color:var(--color-red-500)}.woocommerce-invalid{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.woocommerce-error{display:none}.woocommerce form .select2-container .select2-selection--single{height:50px;border-style:var(--tw-border-style);border-width:1px;--tw-border-style:solid;border-style:solid;border-color:#6A3B2C33}.woocommerce form .select2-container--default .select2-selection--single .select2-selection__rendered{padding-right:calc(var(--spacing) * 10);padding-left:calc(var(--spacing) * 2);--tw-leading:50px;line-height:50px;color:#000;background-color:#FFF;border-color:#000}.woocommerce form .select2-container--default .select2-selection--single .select2-selection__arrow{right:calc(var(--spacing) * 2);height:50px}.woocommerce form .select2-container--default .select2-selection--single .select2-selection__placeholder{color:color-mix(in oklab,#000 60%,transparent)}.select2-container--default .select2-selection--single{background-color:#FFF}.select2-container{border-color:#000}.cvb-button{border-radius:0}.contact-form{display:flex;flex-direction:column;gap:calc(var(--spacing) * 6);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:#6A3B2C;padding-top:calc(var(--spacing) * 3)}.contact-fields{display:flex;flex-direction:column;gap:calc(var(--spacing) * 3)}.contact-header p{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:color-mix(in oklab,#000 60%,transparent)}.inputs-next-to-each-other p{display:flex;flex-direction:row;gap:var(--spacing)}.inputs-next-to-each-other span{width:calc(1 / 2 * 100%)}.contact-form textarea,.contact-section textarea{width:100%}.contact-send p{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.contact-send input[type="submit"]{padding-block:var(--spacing)}.contact-send a{text-decoration-line:underline}.contact-section{display:flex;flex-direction:column;gap:calc(var(--spacing) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:color-mix(in oklab,#6A3B2C 20%,transparent);padding-top:calc(var(--spacing) * 3)}.contact-section>p{display:flex;flex-direction:column;gap:calc(var(--spacing) * 3)}.contact-section>p br{display:none}.reklamacje-zwroty-typ-wniosku .wpcf7-radio{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.page-title,.entry-title{margin-inline:auto;margin-bottom:calc(var(--spacing) * 6);max-width:var(--container-content);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.entry-meta,.entry-footer,.post-navigation,#comments{margin-inline:auto;margin-bottom:calc(var(--spacing) * 6);max-width:var(--container-content)}.page-content>*,.entry-content>*{margin-inline:auto;max-width:var(--container-content)}.entry-content>.alignwide{max-width:var(--container-wide)}.entry-content>.alignfull{max-width:none}.entry-content>.alignleft{float:left;margin-right:calc(var(--spacing) * 8)}.entry-content>.alignright{float:right;margin-left:calc(var(--spacing) * 8)}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-4{inset-inline:calc(var(--spacing) * 4)}.inset-y-0{inset-block:0}.-top-2{top:calc(var(--spacing) * -2)}.-top-12{top:calc(var(--spacing) * -12)}.top-0{top:0}.top-1\/2{top:calc(1 / 2 * 100%)}.top-4{top:calc(var(--spacing) * 4)}.top-5{top:calc(var(--spacing) * 5)}.top-6{top:calc(var(--spacing) * 6)}.top-45{top:calc(var(--spacing) * 45)}.-right-2{right:calc(var(--spacing) * -2)}.-right-full{right:-100%}.right-0{right:0}.right-4{right:calc(var(--spacing) * 4)}.right-6{right:calc(var(--spacing) * 6)}.right-7{right:calc(var(--spacing) * 7)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-0{left:0}.left-1\/2{left:calc(1 / 2 * 100%)}.left-5{left:calc(var(--spacing) * 5)}.left-10{left:calc(var(--spacing) * 10)}.z-0{z-index:0}.z-5{z-index:5}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-9999{z-index:9999}.z-\[1\]{z-index:1}.z-\[9999\]{z-index:9999}.z-\[10000\]{z-index:10000}.order-1{order:1}.order-2{order:2}.col-1{grid-column:1}.col-2{grid-column:2}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.m-4{margin:calc(var(--spacing) * 4)}.-mx-1\.5{margin-inline:calc(var(--spacing) * -1.5)}.mx-auto{margin-inline:auto}.my-8{margin-block:calc(var(--spacing) * 8)}.prose{--tw-prose-body:var(--color-foreground);--tw-prose-headings:var(--color-foreground);--tw-prose-lead:var(--color-foreground);--tw-prose-links:var(--color-primary);--tw-prose-bold:var(--color-foreground);--tw-prose-counters:var(--color-foreground);--tw-prose-bullets:var(--color-foreground);--tw-prose-hr:var(--color-foreground);--tw-prose-quotes:var(--color-foreground);--tw-prose-quote-borders:var(--color-primary);--tw-prose-captions:var(--color-foreground);--tw-prose-kbd:var(--color-foreground);--tw-prose-kbd-shadows:var(--color-foreground);--tw-prose-code:var(--color-foreground);--tw-prose-pre-code:var(--color-background);--tw-prose-pre-bg:var(--color-foreground);--tw-prose-th-borders:var(--color-foreground);--tw-prose-td-borders:var(--color-foreground);--tw-prose-invert-body:var(--color-background);--tw-prose-invert-headings:var(--color-background);--tw-prose-invert-lead:var(--color-background);--tw-prose-invert-links:var(--color-primary);--tw-prose-invert-bold:var(--color-background);--tw-prose-invert-counters:var(--color-background);--tw-prose-invert-bullets:var(--color-background);--tw-prose-invert-hr:var(--color-background);--tw-prose-invert-quotes:var(--color-background);--tw-prose-invert-quote-borders:var(--color-primary);--tw-prose-invert-captions:var(--color-background);--tw-prose-invert-kbd:var(--color-background);--tw-prose-invert-kbd-shadows:var(--color-background);--tw-prose-invert-code:var(--color-background);--tw-prose-invert-pre-code:var(--color-foreground);--tw-prose-invert-pre-bg:var(--color-background);--tw-prose-invert-th-borders:var(--color-background);--tw-prose-invert-td-borders:var(--color-background);font-size:1rem;line-height:1.75;color:var(--tw-prose-body)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(p){margin-top:1.25em;margin-bottom:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where([class~='lead'],[class~='is-style-lead']){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(a){color:var(--tw-prose-links);text-decoration:underline;font-weight:var(--tw-prose-font-medium)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(strong){color:var(--tw-prose-bold);font-weight:var(--tw-prose-font-semibold)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(a strong){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote strong){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th strong){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='A']){list-style-type:upper-alpha}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='a']){list-style-type:lower-alpha}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='A' s]){list-style-type:upper-alpha}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='a' s]){list-style-type:lower-alpha}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='I']){list-style-type:upper-roman}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='i']){list-style-type:lower-roman}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='I' s]){list-style-type:upper-roman}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='i' s]){list-style-type:lower-roman}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol[type='1']){list-style-type:decimal}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol>li)::marker{font-weight:var(--tw-prose-font-normal);color:var(--tw-prose-counters)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul>li)::marker{color:var(--tw-prose-bullets)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(dt){color:var(--tw-prose-headings);font-weight:var(--tw-prose-font-semibold);margin-top:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(hr){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote){font-weight:var(--tw-prose-font-medium);font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:'\201C''\201D''\2018''\2019';margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote p:first-of-type)::before{content:open-quote}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote p:last-of-type)::after{content:close-quote}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote>cite){color:var(--tw-prose-body);font-style:normal;font-weight:var(--tw-prose-font-normal)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote>cite::before){content:'\2014'}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h1){color:var(--tw-prose-headings);font-weight:var(--tw-prose-font-extrabold);font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h1 strong){font-weight:var(--tw-prose-font-black);color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2){color:var(--tw-prose-headings);font-weight:var(--tw-prose-font-bold);font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2 strong){font-weight:var(--tw-prose-font-extrabold);color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3){color:var(--tw-prose-headings);font-weight:var(--tw-prose-font-semibold);font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3 strong){font-weight:var(--tw-prose-font-bold);color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4){color:var(--tw-prose-headings);font-weight:var(--tw-prose-font-semibold);margin-top:1.5em;margin-bottom:.5em;line-height:1.5}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4 strong){font-weight:var(--tw-prose-font-bold);color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(img){margin-top:2em;margin-bottom:2em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(picture){display:block;margin-top:2em;margin-bottom:2em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(kbd){font-weight:var(--tw-prose-font-medium);font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)}@supports (color:color-mix(in lab,red,red)){:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(kbd){box-shadow:0 0 0 1px color-mix(in oklab,var(--tw-prose-kbd-shadows) 10%,transparent),0 3px 0 color-mix(in oklab,var(--tw-prose-kbd-shadows) 10%,transparent)}}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(kbd){font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-right:.375em;padding-bottom:.1875em;padding-left:.375em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(code){color:var(--tw-prose-code);font-weight:var(--tw-prose-font-semibold);font-size:.875em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(code)::before,:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(code)::after{content:'`'}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(a code){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h1 code){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2 code){color:inherit;font-size:.875em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3 code){color:inherit;font-size:.9em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4 code){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(blockquote code){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th code){color:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:var(--tw-prose-font-normal);font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-right:1.1428571em;padding-bottom:.8571429em;padding-left:1.1428571em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code){background-color:#fff0;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code)::before{content:none}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code)::after{content:none}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(table){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(table.has-fixed-layout){table-layout:fixed;width:100%}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th){color:var(--tw-prose-headings);font-weight:var(--tw-prose-font-semibold);vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody tr){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody tr:last-child){border-bottom-width:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td){vertical-align:baseline}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tfoot){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tfoot td){vertical-align:top}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figure>*,figure img){margin-top:0;margin-bottom:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figure a){vertical-align:bottom}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figcaption){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(picture>img){margin-top:0;margin-bottom:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(video){margin-top:2em;margin-bottom:2em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(li){margin-top:.5em;margin-bottom:.5em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol>li){padding-left:.375em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul>li){padding-left:.375em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>ul>li p){margin-top:.75em;margin-bottom:.75em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>ul>li>*:first-child){margin-top:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>ul>li>*:last-child){margin-bottom:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>ol>li>*:first-child){margin-top:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>ol>li>*:last-child){margin-bottom:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul ul,ul ol,ol ul,ol ol){margin-top:.75em;margin-bottom:.75em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(dl){margin-top:1.25em;margin-bottom:1.25em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(dd){margin-top:.5em;padding-left:1.625em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(hr+*){margin-top:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h2+*){margin-top:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3+*){margin-top:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h4+*){margin-top:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th:first-child){padding-left:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(thead th:last-child){padding-right:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td,tfoot td){padding-top:.5714286em;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td:first-child,tfoot td:first-child){padding-left:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(tbody td:last-child,tfoot td:last-child){padding-right:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(figure){margin-top:2em;margin-bottom:2em}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>:first-child){margin-top:0}:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose>:last-child){margin-bottom:0}.prose .wp-block-table td,.prose .wp-block-table th{border:0}.prose .wp-block-table thead,.prose .wp-block-table tfoot{border-color:var(--tw-prose-th-borders)}.prose .wp-block-table thead{border-bottom-width:1px}.prose .wp-block-table tfoot{border-top-width:1px}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-9{margin-top:calc(var(--spacing) * 9)}.mt-auto{margin-top:auto}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-2\.5{margin-bottom:calc(var(--spacing) * 2.5)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-7{margin-bottom:calc(var(--spacing) * 7)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.ml-4{margin-left:calc(var(--spacing) * 4)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.aspect-square{aspect-ratio:1 / 1}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.h-0\.5{height:calc(var(--spacing) * 0.5)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-4{height:calc(var(--spacing) * 4)}.h-4\.5{height:calc(var(--spacing) * 4.5)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-15{height:calc(var(--spacing) * 15)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-25{height:calc(var(--spacing) * 25)}.h-65{height:calc(var(--spacing) * 65)}.h-75{height:calc(var(--spacing) * 75)}.h-108{height:calc(var(--spacing) * 108)}.h-150{height:calc(var(--spacing) * 150)}.h-200{height:calc(var(--spacing) * 200)}.h-\[18px\]{height:18px}.h-\[20px\]{height:20px}.h-\[56\.25vw\]{height:56.25vw}.h-\[70\%\]{height:70%}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-56{max-height:calc(var(--spacing) * 56)}.max-h-\[85vh\]{max-height:85vh}.max-h-\[calc\(85vh-2rem\)\]{max-height:calc(85vh - 2rem)}.min-h-150{min-height:calc(var(--spacing) * 150)}.min-h-full{min-height:100%}.w-0\.5{width:calc(var(--spacing) * 0.5)}.w-1\/2{width:calc(1 / 2 * 100%)}.w-1\/3{width:calc(1 / 3 * 100%)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-2\/5{width:calc(2 / 5 * 100%)}.w-3\/5{width:calc(3 / 5 * 100%)}.w-4{width:calc(var(--spacing) * 4)}.w-4\.5{width:calc(var(--spacing) * 4.5)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-15{width:calc(var(--spacing) * 15)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-30{width:calc(var(--spacing) * 30)}.w-70{width:calc(var(--spacing) * 70)}.w-80{width:calc(var(--spacing) * 80)}.w-\[18px\]{width:18px}.w-\[20px\]{width:20px}.w-\[177\.77vh\]{width:177.77vh}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[min\(78vw\,360px\)\]{width:min(78vw, 360px)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-360{max-width:calc(var(--spacing) * 360)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink-0{flex-shrink:0}.border-separate{border-collapse:separate}.border-spacing-y-1\.5{--tw-border-spacing-y:calc(var(--spacing) * 1.5);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.border-spacing-y-2{--tw-border-spacing-y:calc(var(--spacing) * 2);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[calc\(100\%\+1rem\)\]{--tw-translate-y:calc(100% + 1rem);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.cursor-zoom-in{cursor:zoom-in}.resize{resize:both}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing) * 0.5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-3\.75{gap:calc(var(--spacing) * 3.75)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-7\.5{gap:calc(var(--spacing) * 7.5)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-9{gap:calc(var(--spacing) * 9)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12\.5{gap:calc(var(--spacing) * 12.5)}.gap-13{gap:calc(var(--spacing) * 13)}.gap-14{gap:calc(var(--spacing) * 14)}.gap-y-8{row-gap:calc(var(--spacing) * 8)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[3px\]{border-radius:3px}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-l-lg{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r-0{border-right-style:var(--tw-border-style);border-right-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-1{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#6A3B2C33\]{border-color:#6A3B2C33}.border-\[\#6A3B2C\]{border-color:#6A3B2C}.border-\[\#6A3B2C\]\/20{border-color:color-mix(in oklab,#6A3B2C 20%,transparent)}.border-\[\#733828\]{border-color:#733828}.border-\[\#733828\]\/20{border-color:color-mix(in oklab,#733828 20%,transparent)}.border-\[\#EEEEEE\]{border-color:#EEE}.border-\[\#F6F4F2\]\/20{border-color:color-mix(in oklab,#F6F4F2 20%,transparent)}.border-\[\#d1cdca\]{border-color:#d1cdca}.border-black{border-color:var(--color-black)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-red-200{border-color:var(--color-red-200)}.border-t-gray-300{border-top-color:var(--color-gray-300)}.bg-\[\#00C2C7\]{background-color:#00C2C7}.color-\[\#fff\]{color:#fff}.bg-\[\#000\]{background-color:#000}.bg-\[\#E8E2DD\]{background-color:#E8E2DD}.bg-\[\#25252599\]{background-color:#25252599}.bg-\[\#F3F3F3\]{background-color:#F3F3F3}.bg-\[\#F6F4F2\]\/70{background-color:color-mix(in oklab,#F6F4F2 70%,transparent)}.bg-\[\#F7F7F7\]{background-color:#F7F7F7}.bg-\[\#FCFBFB\]\/20{background-color:color-mix(in oklab,#FCFBFB 20%,transparent)}.bg-\[\#da3f3f\]{background-color:#da3f3f}.bg-\[\#f3f3f3\]{background-color:#f3f3f3}.bg-\[\#f5f5f5\]{background-color:#f5f5f5}.bg-\[\#f7f7f7\]{background-color:#f7f7f7}.bg-black{background-color:var(--color-black)}.bg-black\/50{background-color:color-mix(in srgb,#000 50%,transparent)}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-black\/60{background-color:color-mix(in srgb,#000 60%,transparent)}@supports (color:color-mix(in lab,red,red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-black\/80{background-color:color-mix(in srgb,#000 80%,transparent)}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--color-black) 80%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-transparent{background-color:#fff0}.bg-white{background-color:var(--color-white)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-tr{--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-none{background-image:none}.from-black\/50{--tw-gradient-from:color-mix(in srgb, #000 50%, transparent)}@supports (color:color-mix(in lab,red,red)){.from-black\/50{--tw-gradient-from:color-mix(in oklab, var(--color-black) 50%, transparent)}}.from-black\/50{--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[\#F6F4F2\]{--tw-gradient-to:#F6F4F2;--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.bg-contain{background-size:contain}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-top{background-position:top}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentcolor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-0{padding-inline:0}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-12\.5{padding-inline:calc(var(--spacing) * 12.5)}.px-30{padding-inline:calc(var(--spacing) * 30)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-3\.75{padding-block:calc(var(--spacing) * 3.75)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-6\.5{padding-block:calc(var(--spacing) * 6.5)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12\.5{padding-block:calc(var(--spacing) * 12.5)}.py-15{padding-block:calc(var(--spacing) * 15)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-3\.5{padding-top:calc(var(--spacing) * 3.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-4\.5{padding-top:calc(var(--spacing) * 4.5)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-12\.5{padding-top:calc(var(--spacing) * 12.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-14{padding-right:calc(var(--spacing) * 14)}.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-4\.5{padding-bottom:calc(var(--spacing) * 4.5)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-12\.5{padding-bottom:calc(var(--spacing) * 12.5)}.pb-37\.5{padding-bottom:calc(var(--spacing) * 37.5)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center;justify-content:center}.text-left{text-align:left}.text-right{text-align:right}.font-\[\'InstrumentSerifItalic\'\] {
  font-family: 'InstrumentSerifItalic';
}
.font-\[\'PlayfairDisplay\'\] {
  font-family: 'PlayfairDisplay';
}
.font-\[PlayfairDisplay\] {
  font-family: PlayfairDisplay;
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[10px\] {
  font-size: 10px;
}
.leading-8 {
  --tw-leading: calc(var(--spacing) * 8);
  line-height: calc(var(--spacing) * 8);
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.whitespace-nowrap {
  white-space: nowrap;
}
.\!text-white {
  color: var(--color-white) !important;
}
.text-\[\#00C2C7\] {
  color: #000;
}
.text-\[\#4A261B\] {
  color: #000;
}
.text-\[\#6A3B2C\] {
  color: #000;
}
.text-\[\#6A3B2C\]\/60 {
  color: color-mix(in oklab, #6A3B2C 60%, transparent);
}
.text-\[\#6A3B2C\]\/70 {
  color: color-mix(in oklab, #6A3B2C 70%, transparent);
}
.text-\[\#6A3B2C\]\/80 {
  color: color-mix(in oklab, #6A3B2C 80%, transparent);
}
.text-\[\#9b9b9b\] {
  color: #9b9b9b;
}
.text-\[\#666666\] {
  color: #666666;
}
.text-\[\#733828\]\/60 {
  color: color-mix(in oklab, #733828 60%, transparent);
}
.text-black {
  color: var(--color-black);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-900 {
  color: var(--color-gray-900);
}
.text-red-600 {
  color: var(--color-red-600);
}
.text-white {
  color: var(--color-white);
}
.text-white\/80 {
  color: color-mix(in srgb, #fff 80%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
  .text-white\/80 {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
}
.uppercase {
  text-transform: uppercase;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.underline {
  text-decoration-line: underline;
}
.opacity-0 {
  opacity: 0%;
}
.opacity-13 {
  opacity: 13%;
}
.opacity-25 {
  opacity: 25%;
}
.opacity-60 {
  opacity: 60%;
}
.opacity-80 {
  opacity: 80%;
}
.opacity-100 {
  opacity: 100%;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[-8px_0_30px_rgba\(0\,0\,0\,0\.12\)\] {
  --tw-shadow: -8px 0 30px var(--tw-shadow-color, rgba(0,0,0,0.12));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.05\)\] {
  --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(0,0,0,0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.06\)\] {
  --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(0,0,0,0.06));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.08\)\] {
  --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(0,0,0,0.08));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_4px_20px_rgba\(0\,0\,0\,0\.08\)\] {
  --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0,0,0,0.08));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[inset_0_6px_14px_-12px_rgba\(0\,0\,0\,0\.16\)\] {
  --tw-shadow: inset 0 6px 14px -12px var(--tw-shadow-color, rgba(0,0,0,0.16));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-blur-2xl {
  --tw-backdrop-blur: blur(var(--blur-2xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.duration-700 {
  --tw-duration: 700ms;
  transition-duration: 700ms;
}
.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.ease-out {
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.content-none {
  --tw-content: none;
  content: none;
}
.prose-neutral {
  --tw-prose-body: var(--color-neutral-700);
  --tw-prose-headings: var(--color-neutral-900);
  --tw-prose-lead: var(--color-neutral-600);
  --tw-prose-links: var(--color-neutral-900);
  --tw-prose-bold: var(--color-neutral-900);
  --tw-prose-counters: var(--color-neutral-500);
  --tw-prose-bullets: var(--color-neutral-300);
  --tw-prose-hr: var(--color-neutral-200);
  --tw-prose-quotes: var(--color-neutral-900);
  --tw-prose-quote-borders: var(--color-neutral-200);
  --tw-prose-captions: var(--color-neutral-500);
  --tw-prose-kbd: var(--color-neutral-900);
  --tw-prose-kbd-shadows: var(--color-neutral-900);
  --tw-prose-code: var(--color-neutral-900);
  --tw-prose-pre-code: var(--color-neutral-200);
  --tw-prose-pre-bg: var(--color-neutral-800);
  --tw-prose-th-borders: var(--color-neutral-300);
  --tw-prose-td-borders: var(--color-neutral-200);
  --tw-prose-invert-body: var(--color-neutral-300);
  --tw-prose-invert-headings: var(--color-white);
  --tw-prose-invert-lead: var(--color-neutral-400);
  --tw-prose-invert-links: var(--color-white);
  --tw-prose-invert-bold: var(--color-white);
  --tw-prose-invert-counters: var(--color-neutral-400);
  --tw-prose-invert-bullets: var(--color-neutral-600);
  --tw-prose-invert-hr: var(--color-neutral-700);
  --tw-prose-invert-quotes: var(--color-neutral-100);
  --tw-prose-invert-quote-borders: var(--color-neutral-700);
  --tw-prose-invert-captions: var(--color-neutral-400);
  --tw-prose-invert-kbd: var(--color-white);
  --tw-prose-invert-kbd-shadows: var(--color-white);
  --tw-prose-invert-code: var(--color-white);
  --tw-prose-invert-pre-code: var(--color-neutral-300);
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: var(--color-neutral-600);
  --tw-prose-invert-td-borders: var(--color-neutral-700);
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
.group-focus-within\:translate-y-0:is(:where(.group):focus-within *) {
  --tw-translate-y: 0px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
@media (hover: hover) {
  .group-hover\:-translate-x-4:is(:where(.group):hover *) {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .group-hover\:translate-x-4:is(:where(.group):hover *) {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .group-hover\:translate-y-0:is(:where(.group):hover *) {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .group-hover\:scale-105:is(:where(.group):hover *) {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .group-hover\:scale-110:is(:where(.group):hover *) {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .group-hover\:opacity-0:is(:where(.group):hover *) {
    opacity: 0%;
  }
  .group-hover\:opacity-100:is(:where(.group):hover *) {
    opacity: 100%;
  }
}
.group-\[\.active\]\:rotate-180:is(:where(.group):is(.active) *) {
  rotate: 180deg;
}
.before\:h-px::before {
  content: var(--tw-content);
  height: 1px;
}
.before\:flex-1::before {
  content: var(--tw-content);
  flex: 1;
}
.before\:bg-\[\#00C2C7\]::before {
  content: var(--tw-content);
  background-color: #00C2C7;
}
.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.after\:z-10::after {
  content: var(--tw-content);
  z-index: 10;
}
.after\:h-px::after {
  content: var(--tw-content);
  height: 1px;
}
.after\:flex-1::after {
  content: var(--tw-content);
  flex: 1;
}
.after\:bg-\[\#00C2C7\]::after {
  content: var(--tw-content);
  background-color: #00C2C7;
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
.last\:border-b-0:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
}
@media (hover: hover) {
  .hover\:scale-105:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .hover\:border-\[\#6A3B2C\]:hover {
    border-color: #6A3B2C;
  }
  .hover\:border-black:hover {
    border-color: var(--color-black);
  }
  .hover\:bg-\[\#00cfd6\]:hover {
    background-color: #00cfd6;
  }
  .hover\:bg-black:hover {
    background-color: var(--color-black);
  }
  .hover\:bg-black\/80:hover {
    background-color: color-mix(in srgb, #000 80%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-black\/80:hover {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }
  .hover\:bg-gray-800:hover {
    background-color: var(--color-gray-800);
  }
  .hover\:bg-white:hover {
    background-color: var(--color-white);
  }
  .hover\:text-\[\#00C2C7\]:hover {
    color: #000;
  }
  .hover\:text-\[\#00cfd6\]:hover {
    color: #000;
  }
  .hover\:text-black:hover {
    color: var(--color-black);
  }
  .hover\:text-gray-300:hover {
    color: var(--color-gray-300);
  }
  .hover\:text-gray-600:hover {
    color: var(--color-gray-600);
  }
  .hover\:text-white:hover {
    color: var(--color-white);
  }
  .hover\:opacity-90:hover {
    opacity: 90%;
  }
}
.focus\:border-\[\#6A3B2C33\]:focus {
  border-color: #6A3B2C33;
}
.focus\:border-\[\#6A3B2C\]:focus {
  border-color: #6A3B2C;
}
.focus\:ring-black:focus {
  --tw-ring-color: var(--color-black);
}
.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
  opacity: 40%;
}
@media (width >= 40rem) {
  .sm\:w-auto {
    width: auto;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
}
@media (width >= 48rem) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .lg\:static {
    position: static;
  }
  .lg\:z-auto {
    z-index: auto;
  }
  .lg\:order-1 {
    order: 1;
  }
  .lg\:order-2 {
    order: 2;
  }
  .lg\:m-6 {
    margin: calc(var(--spacing) * 6);
  }
  .lg\:my-12\.5 {
    margin-block: calc(var(--spacing) * 12.5);
  }
  .lg\:my-16 {
    margin-block: calc(var(--spacing) * 16);
  }
  .lg\:mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .lg\:mt-12\.5 {
    margin-top: calc(var(--spacing) * 12.5);
  }
  .lg\:mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .lg\:mb-0 {
    margin-bottom: 0px;
  }
  .lg\:mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .lg\:mb-25 {
    margin-bottom: calc(var(--spacing) * 25);
  }
  .lg\:block {
    display: block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:table-cell {
    display: table-cell;
  }
  .lg\:table-row {
    display: table-row;
  }
  .lg\:table-row-group {
    display: table-row-group;
  }
  .lg\:h-27\.5 {
    height: calc(var(--spacing) * 27.5);
  }
  .lg\:h-\[20px\] {
    height: 20px;
  }
  .lg\:h-\[22px\] {
    height: 22px;
  }
  .lg\:h-auto {
    height: auto;
  }
  .lg\:min-h-0 {
    min-height: 0px;
  }
  .lg\:w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .lg\:w-1\/3 {
    width: calc(1 / 3 * 100%);
  }
  .lg\:w-1\/4 {
    width: calc(1 / 4 * 100%);
  }
  .lg\:w-1\/5 {
    width: calc(1 / 5 * 100%);
  }
  .lg\:w-2\/3 {
    width: calc(2 / 3 * 100%);
  }
  .lg\:w-2\/5 {
    width: calc(2 / 5 * 100%);
  }
  .lg\:w-4\/5 {
    width: calc(4 / 5 * 100%);
  }
  .lg\:w-5\/12 {
    width: calc(5 / 12 * 100%);
  }
  .lg\:w-7\/12 {
    width: calc(7 / 12 * 100%);
  }
  .lg\:w-24 {
    width: calc(var(--spacing) * 24);
  }
  .lg\:w-27\.5 {
    width: calc(var(--spacing) * 27.5);
  }
  .lg\:w-30 {
    width: calc(var(--spacing) * 30);
  }
  .lg\:w-55 {
    width: calc(var(--spacing) * 55);
  }
  .lg\:w-65 {
    width: calc(var(--spacing) * 65);
  }
  .lg\:w-105 {
    width: calc(var(--spacing) * 105);
  }
  .lg\:w-150 {
    width: calc(var(--spacing) * 150);
  }
  .lg\:w-\[20px\] {
    width: 20px;
  }
  .lg\:w-\[22px\] {
    width: 22px;
  }
  .lg\:w-\[45\%\] {
    width: 45%;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:w-full {
    width: 100%;
  }
  .lg\:border-spacing-y-0 {
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  }
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }
  .lg\:flex-col {
    flex-direction: column;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:justify-end {
    justify-content: flex-end;
  }
  .lg\:gap-0 {
    gap: 0px;
  }
  .lg\:gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .lg\:gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .lg\:overflow-visible {
    overflow: visible;
  }
  .lg\:border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .lg\:border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .lg\:border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .lg\:border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .lg\:p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .lg\:p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .lg\:p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .lg\:p-12\.5 {
    padding: calc(var(--spacing) * 12.5);
  }
  .lg\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .lg\:px-7\.5 {
    padding-inline: calc(var(--spacing) * 7.5);
  }
  .lg\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .lg\:px-12\.5 {
    padding-inline: calc(var(--spacing) * 12.5);
  }
  .lg\:px-17\.5 {
    padding-inline: calc(var(--spacing) * 17.5);
  }
  .lg\:px-30 {
    padding-inline: calc(var(--spacing) * 30);
  }
  .lg\:px-35 {
    padding-inline: calc(var(--spacing) * 35);
  }
  .lg\:px-80 {
    padding-inline: calc(var(--spacing) * 80);
  }
  .lg\:py-0 {
    padding-block: 0px;
  }
  .lg\:py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .lg\:py-3\.25 {
    padding-block: calc(var(--spacing) * 3.25);
  }
  .lg\:py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .lg\:py-7\.5 {
    padding-block: calc(var(--spacing) * 7.5);
  }
  .lg\:py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .lg\:py-12\.5 {
    padding-block: calc(var(--spacing) * 12.5);
  }
  .lg\:pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .lg\:pr-7\.5 {
    padding-right: calc(var(--spacing) * 7.5);
  }
  .lg\:pr-12\.5 {
    padding-right: calc(var(--spacing) * 12.5);
  }
  .lg\:pr-75 {
    padding-right: calc(var(--spacing) * 75);
  }
  .lg\:pb-12\.5 {
    padding-bottom: calc(var(--spacing) * 12.5);
  }
  .lg\:pl-12\.5 {
    padding-left: calc(var(--spacing) * 12.5);
  }
  .lg\:pl-75 {
    padding-left: calc(var(--spacing) * 75);
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-right {
    text-align: right;
  }
  .lg\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .lg\:text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .lg\:text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .lg\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .lg\:font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .lg\:font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .lg\:text-\[\#9b9b9b\] {
    color: #9b9b9b;
  }
  .lg\:shadow-\[inset_6px_0_14px_-12px_rgba\(0\,0\,0\,0\.16\)\] {
    --tw-shadow: inset 6px 0 14px -12px var(--tw-shadow-color, rgba(0,0,0,0.16));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .lg\:shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .lg\:transition-none {
    transition-property: none;
  }
}
.prose-a\:text-primary :is(a):not(:where([class~='not-prose'], [class~='not-prose'] * )) {
  color: var(--color-primary);
}
@media (width >= 64rem) {
  .lg\:\[\&_\.button\]\:block .button {
    display: block;
  }
  .lg\:\[\&_\.button\]\:w-full .button {
    width: 100%;
  }
  .lg\:\[\&_\.button\]\:bg-\[\#00C2C7\] .button {
    background-color: #000;
  }
  .lg\:\[\&_\.button\]\:px-4 .button {
    padding-inline: calc(var(--spacing) * 4);
  }
  .lg\:\[\&_\.button\]\:py-3\.5 .button {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .lg\:\[\&_\.button\]\:text-center .button {
    text-align: center;
  }
  .lg\:\[\&_\.button\]\:text-sm .button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .lg\:\[\&_\.button\]\:font-medium .button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .lg\:\[\&_\.button\]\:text-white .button {
    color: var(--color-white);
  }
  .lg\:\[\&_\.button\]\:shadow-sm .button {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .lg\:\[\&_\.button\]\:transition-colors .button {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .lg\:\[\&_\.button\]\:duration-200 .button {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .lg\:\[\&_\.button\:disabled\]\:cursor-not-allowed .button:disabled {
    cursor: not-allowed;
  }
  .lg\:\[\&_\.button\:not\(\:disabled\)\:hover\]\:bg-\[\#00cfd6\] .button:not(:disabled):hover {
    background-color: #000;
  }
  .lg\:\[\&_\.button\:not\(\:disabled\)\:hover\]\:text-white .button:not(:disabled):hover {
    color: var(--color-white);
  }
}
.\[\&_del\]\:text-xl del {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.\[\&_del\]\:font-normal del {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.\[\&_del\]\:text-gray-400 del {
  color: var(--color-gray-400);
}
.\[\&_del\]\:decoration-gray-400 del {
  text-decoration-color: var(--color-gray-400);
}
.\[\&_del_\.amount\]\:text-gray-400 del .amount {
  color: var(--color-gray-400);
}
.\[\&_ins\]\:bg-red-500 ins {
  background-color: var(--color-red-500);
}
.\[\&_ins\]\:px-1\.5 ins {
  padding-inline: calc(var(--spacing) * 1.5);
}
.\[\&_ins\]\:py-0\.5 ins {
  padding-block: calc(var(--spacing) * 0.5);
}
.\[\&_ins\]\:font-semibold ins {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.\[\&_ins\]\:text-black ins {
  color: var(--color-black);
}
.\[\&_ins\]\:text-white ins {
  color: var(--color-white);
}
.\[\&_ins\]\:no-underline ins {
  text-decoration-line: none;
}
.\[\&_ins_\.amount\]\:text-white ins .amount {
  color: var(--color-white);
}
.\[\&\.active\]\:pointer-events-auto.active {
  pointer-events: auto;
}
.\[\&\.active\]\:translate-x-0.active {
  --tw-translate-x: 0px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\[\&\.active\]\:opacity-100.active {
  opacity: 100%;
}
.\[\&\.is-active\]\:bg-gray-100.is-active {
  background-color: var(--color-gray-100);
}
.\[\&\.is-active\]\:text-black.is-active {
  color: var(--color-black);
}
body.mobile-menu-open {
  overflow: hidden;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ease: initial;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-leading: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-content: "";
    }
  }
}
/* ==========================================================================
   GESCHÄFT — CZĘŚĆ RĘCZNIE PISANA
   ==========================================================================

   TA CZĘŚĆ ZASTĘPUJE WSZYSTKO OD LINII

       .menu li a{ color:#fff; }

   DO KOŃCA PLIKU style.css. Nic powyżej nie ruszaj — tam jest skompilowany
   output Tailwinda (plus Twoje poprawki wklejone w środek), a to nie jest
   plik do edytowania ręcznie.

   ── SPIS TREŚCI ─────────────────────────────────────────────────────────
    0. Drobne nadpisania (menu, header-grid, breadcrumbs, mini koszyk)
    1. Fonty CabinetGrotesk
    2. Karta produktu w pętli + karuzela
    3. Kafelki kategorii
    4. Galeria produktu, lightbox i lupka
    5. Układ strony produktu i mini sekcji
    6. Treść kolumny informacji
    7. Akordeony, Omnibus, produkty polecane — strona produktu
   7b. To samo dla mini sekcji na stronie głównej
    8. Przyciski wariantów (wtyczka custom-variation-buttons)
    9. Stopka
   10. Sekcja marki
   11. Mini koszyk — przyklejona stopka panelu
   12. Kasa — kroki
  12b. Kasa — podsumowanie i kod rabatowy
  12c. Kasa — listy rozwijane (kraj, województwo)
   13. Menu główne — rozwijane podmenu
   14. Sklep — siatka i panel filtrów
   15. Baner — dokładnie na wysokość ekranu
   16. Przełącznik walut w belce
   17. Strona produktu — zdjęcie na całą wysokość ekranu
   18. Mobile — układ produktu i mini sekcji
   19. Ograniczone animacje (prefers-reduced-motion)

   ZMIANA NUMERACJI względem starego pliku (numery szły z kolejności
   dopisywania, nie z układu strony):
     stara 15 (lupka) ...... wchłonięta do sekcji 4, razem z galerią
     stara 16 (baner) ...... teraz 15
     stara 17 (waluty) ..... teraz 16
     stara 18 (produkt) .... teraz 17
   Sekcje 18 i 19 to bloki, które wcześniej wisiały bez numeru w środku
   pliku (mobile i prefers-reduced-motion) — musiały wylądować na końcu,
   bo cofają ustawienia sekcji 17.

   ── CO ZOSTAŁO USUNIĘTE ─────────────────────────────────────────────────
   * STRONA PRODUKTU była w pliku CZTERY RAZY — cztery kolejne wersje
     dopisane jedna pod drugą. Zostaje ostatnia (sekcja 17); trzy poprzednie
     nadpisywały się nawzajem i to dlatego zdjęcie raz wystawało za logo,
     raz nie. To największa pojedyncza oszczędność: ~150 linii.
   * SEKCJA 12c była DWA RAZY (skrócona, tylko na goły <select>, i pełna
     obsługująca też select2). Zostaje pełna.
   * BANER miał jeszcze starą regułę height: clamp(800px, 88vh, 56.25vw) —
     zastąpiona wersją na 100svh z podciągnięciem pierwszego banera pod belkę.
   * .attr-buttons / .attr-btn (dwa razy, po dwa warianty selektora) —
     martwe. Sprawdzone: te klasy nie występują ani w motywie, ani we wtyczce
     custom-variation-buttons; ona generuje .cvb-button. Około 60 linii.
   * .gsft-product__summary .woocommerce-tabs (i ul.tabs, .panel, table) —
     martwe. woocommerce/single-product/tabs.php jest nadpisany i wypisuje
     wyłącznie .woocommerce-tabs-custom / .custom-accordion-*, nigdy
     .woocommerce-tabs.
   * Zdublowana reguła table.variations .label label (była dwa razy,
     identyczna).
   * .gsft-krok__tresc .select2-container .select2-selection--single został
     wypisany z sekcji 12 (wspólna reguła pól). To ten padding: 12px 8px
     rozjeżdżał pole kraju po zmianie państwa, a sekcja 12c musiała go potem
     kasować przez padding: 0 !important. Teraz select2 ustawia tylko 12c.
   * Druga sekcja oznaczona numerem "7" dostała numer 7b — dwie różne sekcje
     miały ten sam numer i ten sam nagłówek.
   * Deklaracje wielokrotne w jednym bloku i bloki rozjechane wcięciami
     (część pliku miała 2 spacje, część taby) — całość na taby.

   ── CZEGO W TYM PLIKU NIE MA, A BYŁO KIEDYŚ ─────────────────────────────
   W Twojej aktualnej wersji style.css NIE MA już sekcji "9. OPINIE
   TRUSTPILOT" (.gsft-product__reviews .tp-card, .tp-nav-btn, .tp-slider-*).
   Została z niej tylko sama otoczka .gsft-product__reviews, którą
   zachowałem. Nie dopisuję tych reguł z powrotem, bo nie wiem, czy zniknęły
   celowo. Jeśli slider opinii wygląda teraz jak z wtyczki, a nie jak na
   starym geschaft — powiedz, mam ten blok zapisany i wkleję go jako
   sekcję 9b.

   ── CZEGO NIE USUNĄŁEM I DLACZEGO ───────────────────────────────────────
   Nie tknąłem klas, których nie mogę sprawdzić z plików: Contact Form 7
   (.contact-send, .newsletter-form, .inputs-next-to-each-other,
   .reklamacje-zwroty-typ-wniosku) generuje markup z panelu, nie z kodu;
   .slidein-cart-*, .cart-badge-count, .wc-slide-search-* i
   .wc-variation-is-unavailable pochodzą z wtyczek; .woocommerce-Addresses,
   .woocommerce-MyAccount-orders, #tab-description z rdzenia WooCommerce.
   .mitensy-thankyou zostaje — wbrew nazwie JEST używane, w
   woocommerce/checkout/thankyou.php.

   Skompilowanego Tailwinda nie przycinałem ręcznie. Tam faktycznie leży
   najwięcej nieużywanego kodu, ale to jest OUTPUT builda — poprawny sposób
   to przepuścić motyw jeszcze raz przez Tailwinda, a nie kasować reguły
   w wygenerowanym pliku. Wycięte na piechotę wrócą przy pierwszym buildzie,
   a przy okazji łatwo zabić klasę dokładaną z JS-a albo z ACF-a.
   ========================================================================== */


/* ==========================================================================
   0. DROBNE NADPISANIA
   ========================================================================== */

   .menu li a {
    color: #fff;
  }
  
  .gsft-footer__col .menu li a {
    color: #000;
  }
  
  .header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }
  
  .header-grid > .header-left {
    justify-self: start;
    min-width: 0;
  }
  
  .header-grid > .header-logo {
    justify-self: center;
    flex-shrink: 0;
  }
  
  .header-grid > .header-actions {
    justify-self: end;
    min-width: 0;
  }
  
  .header-actions .cursor-pointer {
    color: #fff;
  }
  
  #breadcrumbs {
    color: #000;
  }
  
  #mobile-menu-sidebar a {
    color: #000;
    font-size: 14px;
    font-weight: 400;
  }
  
  .gsft-jezyk__kafel #mobile-menu-sidebar a {
    color: #fff !important;
  } 
  #mobile-menu-toggle {
    color: #fff;
  }
  
  #place_order {
    background-color: #247e60 !important;
    color: #fff !important;
  }
  
  .woocommerce-mini-cart__buttons a {
    background-color: #000;
    color: #fff;
  }
  
  .woocommerce-mini-cart__buttons a:hover {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
  }
  
  .widget_shopping_cart_content .text-xs {
    color: #000;
  }
  
  .wc-variation-is-unavailable {
    color: #fff;
    background-color: #000;
  }
  
  
  /* ==========================================================================
     1. FONTY — Cabinet Grotesk
     Designed by ITF, (c) Indian Type Foundry
     https://www.fontshare.com/fonts/cabinet-grotesk
  
     WAŻNE: wszystkie odmiany są zadeklarowane pod JEDNĄ nazwą rodziny
     'CabinetGrotesk' i rozróżnione przez font-weight. Dzięki temu
     `font-family: CabinetGrotesk; font-weight: 700;` trafia w Bolda.
     ========================================================================== */
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Thin.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Thin.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Thin.ttf) format('truetype');
    font-weight: 100;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Extralight.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Extralight.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Extralight.ttf) format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Light.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Light.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Light.ttf) format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Regular.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Regular.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Regular.ttf) format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Medium.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Medium.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Medium.ttf) format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Bold.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Bold.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Bold.ttf) format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Extrabold.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Extrabold.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Extrabold.ttf) format('truetype');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'CabinetGrotesk';
    src: url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Black.woff2) format('woff2'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Black.woff) format('woff'),
         url(/wp-content/themes/_tw/theme/fonts/CabinetGrotesk-Black.ttf) format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
  }
  
  
  /* ==========================================================================
     2. KARTA PRODUKTU W PĘTLI — layout 1:1 z geschaft.gmbh
  
     Wartości odczytane z DOM starej strony:
       zdjęcie 347x521 (2:3), object-fit: cover
       meta padding 16px 8px, flex + align-items: baseline
       tytuł     13px / 1.6 / 500 / ls  0.2px / #404040
       kategorie 12px / 1.6 / 500 / ls -0.1px / #252525 @ 60%
       del       #000 + line-through
       ins       #D9000C, bez podkreślenia i tła
     ========================================================================== */
  
  .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  /* --- Zdjęcie --- */
  
  .product-card__image {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #f3f3f3;
  }
  
  .product-card__image > a {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .product-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  }
  
  /* drugie zdjęcie (pierwsze z galerii) leży pod spodem i wchodzi na hover */
  .product-card__image--has-hover img + img {
    opacity: 0;
  }
  
  .product-card:hover .product-card__image img {
    transform: scale(1.02);
  }
  
  .product-card:hover .product-card__image--has-hover img:first-of-type {
    opacity: 0;
  }
  
  .product-card:hover .product-card__image--has-hover img + img {
    opacity: 1;
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .product-card__image img {
      transition: none;
    }
  
    .product-card:hover .product-card__image img {
      transform: none;
    }
  }
  
  /* --- Meta (tytuł / kategorie / cena) --- */
  
  .product-card__content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 8px;
  }
  
  .product-card__text {
    min-width: 0;
    flex: 1 1 auto;
  }
  
  .product-card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.2px;
    color: #404040;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .product-card__title a {
    color: inherit;
    text-decoration: none;
  }
  
  /* klikalna cała karta */
  .product-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
  }
  
  .product-card__cats {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: rgba(37, 37, 37, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* --- Cena --- */
  
  .product-card__price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #404040;
  }
  
  .product-card__price del {
    display: block;
    opacity: 1;
    text-decoration: line-through;
    text-decoration-color: #000;
  }
  
  .product-card__price del .amount,
  .product-card__price del .woocommerce-Price-amount {
    color: #000;
  }
  
  .product-card__price ins {
    display: block;
    padding: 0;
    background: transparent;
    text-decoration: none;
  }
  
  .product-card__price ins .amount,
  .product-card__price ins .woocommerce-Price-amount {
    color: #d9000c;
  }
  
  /* WooCommerce wstawia tekst dla czytników między del a ins — bez tego
     rozpycha kolumnę ceny, gdy motyw nie ładuje woocommerce.css */
  .product-card__price .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  
  /* --- Karuzela --- */
  
  .products-carousel-wrap {
    position: relative;
  }
  
  .products-carousel-nav {
    position: absolute;
  
    /* -35px = połowa wysokości bloku z tytułem i ceną, żeby strzałka trafiła
       w środek zdjęcia, a nie w środek całego kafla */
    top: calc(50% - 35px);
    transform: translateY(-50%);
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
  }
  
  .products-carousel-prev { left: 8px; }
  .products-carousel-next { right: 8px; }
  
  .products-carousel-nav:hover { background: #fff; }
  
  .products-carousel-nav svg {
    display: block;
    width: 16px;
    height: 16px;
  }
  
  /* Swiper sam dokłada te klasy na końcach i gdy nie ma czego przewijać */
  .products-carousel-nav.swiper-button-disabled,
  .products-carousel-nav.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
  }
  
  @media (min-width: 1024px) {
  
    .products-carousel-nav {
      display: flex;
    }
  }
  
  
  /* ==========================================================================
     3. KAFELKI KATEGORII — layout 1:1 z geschaft.gmbh
     gap 4px | proporcja 4/5 mobile, 9/10 desktop
     plakietka rgba(255,255,255,.4), 32px od dołu i lewej
     ========================================================================== */
  
  .tile {
    aspect-ratio: 4 / 5;
  }
  
  @media (min-width: 1024px) {
  
    .tile {
      aspect-ratio: 9 / 10;
    }
  }
  
  .tile__bg {
    /* oryginał trzyma tło na background-size: 104% — tu ten sam efekt
       przez transform */
    transform: scale(1.04);
    transition: transform 0.2s ease-out;
    will-change: transform;
  }
  
  .tile:hover .tile__bg {
    transform: scale(1.1);
  }
  
  .tile__label {
    bottom: 2rem;
    left: 2rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .tile__bg,
    .tile:hover .tile__bg {
      transition: none;
      transform: scale(1.04);
    }
  }
  
  
  /* ==========================================================================
     4. GALERIA PRODUKTU I LIGHTBOX
     woocommerce/single-product/product-image.php -> .gsft-gallery
     Szerokość ustala rodzic — galeria nie ma własnej.
     ========================================================================== */
  
  .gsft-gallery {
    position: relative;
    width: 100%;
  }
  
  .gsft-gallery:focus-visible {
    outline: 2px solid #252525;
    outline-offset: 4px;
  }
  
  /* --- Główne zdjęcie ---
     Proporcja 2/3 dotyczy mini sekcji na stronie głównej; na stronie produktu
     nadpisuje ją sekcja 18. */
  
  .gsft-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #f7f7f7;
    cursor: zoom-in;
  }
  
  .gsft-gallery__main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
  }
  
  /* --- Strzałki --- */
  
  .gsft-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background 0.2s ease;
  }
  
  .gsft-gallery__nav:hover {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .gsft-gallery__nav svg {
    width: 20px;
    height: 20px;
  }
  
  .gsft-gallery__nav--prev {
    left: 0;
    transform: translate(-100%, -50%);
  }
  
  .gsft-gallery__nav--next {
    right: 0;
    transform: translate(100%, -50%);
  }
  
  /* na desktopie wjeżdżają od krawędzi, gdy kursor jest nad galerią */
  @media (hover: hover) {
  
    .gsft-gallery__main:hover .gsft-gallery__nav--prev,
    .gsft-gallery:focus-within .gsft-gallery__nav--prev {
      transform: translate(16px, -50%);
    }
  
    .gsft-gallery__main:hover .gsft-gallery__nav--next,
    .gsft-gallery:focus-within .gsft-gallery__nav--next {
      transform: translate(-16px, -50%);
    }
  }
  
  /* bez hovera (dotyk) strzałki są stale widoczne */
  @media (hover: none) {
  
    .gsft-gallery__nav--prev { transform: translate(12px, -50%); }
    .gsft-gallery__nav--next { transform: translate(-12px, -50%); }
  }
  
  /* --- Licznik zdjęć --- */
  
  .gsft-gallery__counter {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 5;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  /* --- Lightbox --- */
  
  .gsft-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .gsft-lightbox.is-open {
    display: flex;
  }
  
  .gsft-lightbox.is-visible {
    opacity: 1;
  }
  
  .gsft-lightbox__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: min(1100px, calc(100vw - 160px));
    max-height: 88vh;
    padding: 16px;
    background: #f7f7f7;
    transform: scale(0.95);
    transition: transform 0.3s ease;
  }
  
  .gsft-lightbox.is-visible .gsft-lightbox__inner {
    transform: scale(1);
  }
  
  .gsft-lightbox__inner img {
    max-width: 100%;
    max-height: calc(88vh - 2rem);
    object-fit: contain;
  }
  
  .gsft-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
  }
  
  .gsft-lightbox__close:hover {
    color: #ddd;
  }
  
  .gsft-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease;
  }
  
  .gsft-lightbox.has-nav .gsft-lightbox__nav {
    display: flex;
  }
  
  .gsft-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  
  .gsft-lightbox__nav svg {
    width: 24px;
    height: 24px;
  }
  
  .gsft-lightbox__nav--prev { left: 24px; }
  .gsft-lightbox__nav--next { right: 24px; }
  
  .gsft-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: rgba(255, 255, 255, 0.8);
  }
  
  /* blokada przewijania tła, gdy lightbox jest otwarty */
  body.gsft-lightbox-open {
    overflow: hidden;
  }
  
  @media (max-width: 1023px) {
  
    .gsft-lightbox__inner {
      max-width: calc(100vw - 32px);
    }
  
    .gsft-lightbox__nav {
      width: 40px;
      height: 40px;
    }
  
    .gsft-lightbox__nav--prev { left: 8px; }
    .gsft-lightbox__nav--next { right: 8px; }
  }
  
  /* --- Lupka (dawna sekcja 15) ---
     Na starej stronie to domyślny przycisk WooCommerce — ikona nie jest
     obrazkiem ani fontem, tylko dwoma pseudoelementami: kółko (::before)
     i rączka (::after). Odczytane z geschaft.gmbh:
  
       przycisk .. 36×36 content-box + ramka 1px #d3d3d3 -> 38px w sumie
       szkło ..... 10×10, ramka 2px #d3ced2, promień 100%, top 9 / left 9
       rączka .... 2×8, tło #d3ced2, promień 6px, top 19 / left 22, obrót -45deg
  
     !important przy padding/border jest konieczne — motyw stylizuje globalnie
     każdy <button> (padding 12px, własna ramka) i bez tego kółko urosłoby
     z 38px do 60px.                                                          */
  
  .gsft-gallery__zoom {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 5;
  
    /* content-box, bo 36px to wymiar WNĘTRZA — ramka dokłada brakujące 2px. */
    box-sizing: content-box;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0 !important;
  
    border: 1px solid #d3d3d3 !important;
    border-radius: 100%;
    background: #fff !important;
    box-shadow: none;
  
    /* Gdyby w szablonie została jeszcze emotka 🔍 — ma zniknąć bez śladu. */
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
  }
  
  .gsft-gallery__zoom:hover {
    background: #fff !important;
  }
  
  /* Szkło */
  .gsft-gallery__zoom::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    box-sizing: content-box;
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #d3ced2;
    border-radius: 100%;
  }
  
  /* Rączka */
  .gsft-gallery__zoom::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 22px;
    box-sizing: content-box;
    display: block;
    width: 2px;
    height: 8px;
    border-radius: 6px;
    background: #d3ced2;
    transform: rotate( -45deg );
  }
  
  
  /* ==========================================================================
     5. UKŁAD — strona produktu i mini sekcja
     wrap max-width 1440 | galeria 50% | info 40%
     Na stronie produktu (>=1024px) nadpisuje to sekcja 18.
     ========================================================================== */
  
  .gsft-product__layout,
  .mini-product__wrap {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 0 0;
  }
  
  /* W oryginale grafika dekoracyjna kończy się tam, gdzie startuje kolejna
     sekcja — bez dodatkowego odstępu. */
  .mini-product__wrap {
    padding-bottom: 0;
  }
  
  .gsft-product__media,
  .mini-product__gallery {
    position: relative;
    z-index: 1;
    width: 50%;
  }
  
  /* --- Mini sekcja: zdjęcie 492px przy prawej krawędzi kolumny ---
     W oryginale kolumna ma 720px, a zdjęcie tylko 492px — po lewej zostaje
     228px, w których widać zieloną grafikę. Dotyczy WYŁĄCZNIE mini sekcji. */
  
  .mini-product__gallery {
    display: flex;
    flex-direction: column;
  }
  
  .mini-product__gallery .gsft-gallery {
    width: 100%;
    max-width: 492px;
    margin-left: auto;
  }
  
  .gsft-product__summary,
  .mini-product__info {
    z-index: 1;
    width: 40%;
    align-self: flex-start;
  }
  
  /* Sticky tylko na stronie produktu — sekcja na stronie głównej przewija się
     normalnie razem ze zdjęciem i grafiką dekoracyjną. */
  .gsft-product__summary {
    position: sticky;
    top: 100px;
  }
  
  .mini-product {
    position: relative;
  }
  
  /* Grafika dekoracyjna (Vector.webp) leży w przepływie pod zdjęciem, w białej
     przestrzeni. Sekcja rośnie tak, żeby zmieściła się w całości. */
  .mini-product__deco {
    position: relative;
    z-index: 0;
    align-self: flex-start;
    width: 525px;
    max-width: 100%;
    height: auto;
    margin: 72px 0 0 38px;
    pointer-events: none;
  }
  
  .gsft-product__reviews {
    margin-top: 7rem;
    padding: 0 8px;
  }
  
  
  /* ==========================================================================
     6. TREŚĆ KOLUMNY INFORMACJI
     Wspólne dla strony produktu i mini sekcji.
     ========================================================================== */
  
  /* --- Tytuł, meta, ocena --- */
  
  .gsft-product__summary .product_title,
  .mini-product .product_title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.1px;
    color: #000;
  }
  
  .gsft-product__summary .product_meta,
  .mini-product .product_meta {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #404040;
  }
  
  .gsft-product__summary .product_meta a,
  .mini-product .product_meta a {
    font-size: 12px;
    color: rgba(37, 37, 37, 0.4);
    text-decoration: underline;
  }
  
  .gsft-product__summary .woocommerce-product-rating,
  .mini-product .woocommerce-product-rating {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(37, 37, 37, 0.6);
  }
  
  /* --- Cena --- */
  
  .gsft-product__summary .price,
  .mini-product .price {
    margin: 24px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  .gsft-product__summary .price del,
  .mini-product .price del {
    text-decoration: line-through;
  }
  
  .gsft-product__summary .price del .amount,
  .mini-product .price del .amount {
    color: #000;
  }
  
  .gsft-product__summary .price ins,
  .mini-product .price ins {
    background: transparent;
    text-decoration: none;
  }
  
  .gsft-product__summary .price ins .amount,
  .mini-product .price ins .amount {
    color: #d9000c;
  }
  
  /* --- Warianty ---
     Same przyciski rozmiarów stylizuje sekcja 8 (klasy .cvb-* z wtyczki). */
  
  .gsft-product__summary form.cart,
  .mini-product form.cart {
    margin: 40px 0 0;
  }
  
  .gsft-product__summary table.variations,
  .mini-product table.variations {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
  }
  
  .gsft-product__summary table.variations th,
  .gsft-product__summary table.variations td,
  .mini-product table.variations th,
  .mini-product table.variations td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  
  .gsft-product__summary .reset_variations,
  .mini-product .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(37, 37, 37, 0.4);
    text-decoration: underline;
  }
  
  /* --- Ilość i koszyk --- */
  
  .gsft-product__summary .quantity,
  .mini-product .quantity {
    display: block;
    margin: 24px 0 16px;
  }
  
  .gsft-product__summary .quantity input.qty,
  .mini-product .quantity input.qty {
    width: 56px;
    height: 40px;
    padding: 12px 8px;
    border: 1px solid rgba(37, 37, 37, 0.2);
    border-radius: 0;
    background: #fff;
    text-align: center;
    font-size: 13px;
    color: #252525;
  }
  
  .gsft-product__summary .single_add_to_cart_button,
  .mini-product .single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: 13px 24px;
    border: 0;
    border-radius: 0;
    background: #247e60 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .gsft-product__summary .single_add_to_cart_button:hover,
  .mini-product .single_add_to_cart_button:hover {
    opacity: 0.85;
  }
  
  .gsft-product__summary .single_add_to_cart_button:disabled,
  .mini-product .single_add_to_cart_button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  /* miejsce na Apple Pay / Google Pay ze Stripe */
  
  .gsft-product__summary .wc-stripe-product-checkout-container ul,
  .mini-product .wc-stripe-product-checkout-container ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-product__summary .wc-stripe-product-checkout-container li,
  .mini-product .wc-stripe-product-checkout-container li {
    margin: 8px 0 0;
  }
  
  /* --- Krótki opis --- */
  
  .gsft-product__summary .woocommerce-product-details__short-description {
    margin-top: 32px;
    font-size: 13px;
    line-height: 20px;
    color: #252525;
  }
  
  
  /* ==========================================================================
     7. AKORDEONY, OMNIBUS, PRODUKTY POLECANE — strona produktu
     Nadpisuje klasy Tailwinda z tabs.php i variable.php, których nie da się
     zmienić bez przebudowy motywu.
     ========================================================================== */
  
  /* --- Linia Omnibus ("najniższa cena z 30 dni") --- */
  
  .gsft-product__summary .ct-shortcode,
  .gsft-product__summary .wc-price-history,
  .gsft-product__summary .omnibus-price {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: rgba(37, 37, 37, 0.6);
  }
  
  /* --- Akordeony (tabs.php) --- */
  
  .gsft-product__summary .woocommerce-tabs-custom {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
  }
  
  .gsft-product__summary .custom-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-product__summary .custom-accordion-item {
    padding: 24px 0 11px;
    margin: 0;
    border-bottom: 1px solid rgba(37, 37, 37, 0.2);
    border-bottom-style: solid;
  }
  
  .gsft-product__summary .custom-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #252525;
    text-decoration: none;
    cursor: pointer;
  }
  
  .gsft-product__summary .custom-accordion-toggle:hover {
    color: #252525;
    opacity: 0.7;
  }
  
  .gsft-product__summary .plus-minus-icon {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
  }
  
  .gsft-product__summary .plus-minus-icon > span {
    background: #252525;
  }
  
  .gsft-product__summary .custom-accordion-panel {
    font-size: 13px;
    line-height: 20px;
    color: #252525;
    border-bottom-width: 0 !important;
  }
  
  .gsft-product__summary .custom-accordion-item.active .custom-accordion-panel {
    border-bottom-width: 0 !important;
  }
  
  .gsft-product__summary .custom-accordion-panel ul {
    margin: 0;
    padding-left: 1.1em;
  }
  
  .gsft-product__summary .custom-accordion-panel li {
    margin: 0 0 4px;
  }
  
  .gsft-product__summary .custom-accordion-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  
  .gsft-product__summary .custom-accordion-panel th,
  .gsft-product__summary .custom-accordion-panel td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(37, 37, 37, 0.1);
    text-align: left;
  }
  
  /* --- Długi opis pod tytułem ---
     Motyw wypisuje go w kolumnie, a w oryginale opis jest akordeonem.
     Snippet w functions.php próbuje zdjąć hook; to jest zabezpieczenie na
     wypadek, gdyby callback okazał się zamknięciem i nie dał się usunąć. */
  
  .gsft-product__summary .product-description-under-title {
    display: none;
  }
  
  /* --- Produkty polecane pod stroną --- */
  
  .related.products,
  .upsells.products {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8px;
  }
  
  .related.products > h2,
  .upsells.products > h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: #404040;
  }
  
  .related.products ul.products,
  .upsells.products ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .related.products ul.products > li,
  .upsells.products ul.products > li {
    flex: 0 0 calc((100% - 24px) / 4);
    width: calc((100% - 24px) / 4);
  }
  
  @media (max-width: 1023px) {
  
    .related.products ul.products > li,
    .upsells.products ul.products > li {
      flex: 0 0 calc((100% - 8px) / 2);
      width: calc((100% - 8px) / 2);
    }
  }
  
  
  /* ==========================================================================
     7b. TE SAME REGUŁY DLA MINI SEKCJI NA STRONIE GŁÓWNEJ
     Osobne selektory, bo .mini-product nie jest w .gsft-product__summary.
     ========================================================================== */
  
  .mini-product .ct-shortcode,
  .mini-product .wc-price-history,
  .mini-product .omnibus-price {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: rgba(37, 37, 37, 0.6);
  }
  
  .mini-product .woocommerce-tabs-custom {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
  }
  
  .mini-product .custom-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .mini-product .custom-accordion-item {
    padding: 24px 0 11px;
    margin: 0;
    border-bottom: 1px solid rgba(37, 37, 37, 0.2);
    border-bottom-style: solid;
  }
  
  .mini-product .custom-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #252525;
    text-decoration: none;
    cursor: pointer;
  }
  
  .mini-product .custom-accordion-toggle:hover {
    color: #252525;
    opacity: 0.7;
  }
  
  .mini-product .plus-minus-icon {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
  }
  
  .mini-product .plus-minus-icon > span {
    background: #252525;
  }
  
  .mini-product .custom-accordion-panel {
    font-size: 13px;
    line-height: 20px;
    color: #252525;
    border-bottom-width: 0 !important;
  }
  
  .mini-product .custom-accordion-item.active .custom-accordion-panel {
    border-bottom-width: 0 !important;
  }
  
  .mini-product .custom-accordion-panel ul {
    margin: 0;
    padding-left: 1.1em;
  }
  
  .mini-product .custom-accordion-panel li {
    margin: 0 0 4px;
  }
  
  .mini-product .custom-accordion-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  
  .mini-product .custom-accordion-panel th,
  .mini-product .custom-accordion-panel td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(37, 37, 37, 0.1);
    text-align: left;
  }
  
  .mini-product .product-description-under-title {
    display: none;
  }
  
  
  /* ==========================================================================
     8. PRZYCISKI WARIANTÓW (wtyczka custom-variation-buttons)
     Nadpisuje assets/variation-buttons.css na wartości z geschaft.gmbh:
     51x41, padding 12/16, bez zaokrągleń, border rgba(37,37,37,.2)
     ========================================================================== */
  
  .gsft-product__summary .cvb-buttons,
  .mini-product .cvb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  @media screen and (max-width: 768px){
  .mini-product .cvb-buttons button {
    min-width: 49px;
  }
}
  
  .gsft-product__summary .cvb-button,
  .mini-product .cvb-button {
    min-width: 71px;
    height: 41px;
    padding: 12px 16px;
    border: 1px solid rgba(37, 37, 37, 0.2);
    border-radius: 0;
    background: #fff;
    color: #252525;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  
  .gsft-product__summary .cvb-button:hover:not(.disabled),
  .mini-product .cvb-button:hover:not(.disabled) {
    border-color: #252525;
    background: #fff;
  }
  
  .gsft-product__summary .cvb-button.active,
  .mini-product .cvb-button.active {
    border-color: #252525;
    background: #252525;
    color: #fff;
  }
  
  .gsft-product__summary .cvb-button.disabled,
  .mini-product .cvb-button.disabled {
    border: 1px solid #dcdcdc;
    background: #f3f3f3;
    color: #b9b9b9;
    opacity: 1;
    cursor: not-allowed;
  }
  
  /* etykieta atrybutu ("Sizes:") */
  .gsft-product__summary table.variations .label label,
  .mini-product table.variations .label label {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 26px;
    text-transform: capitalize;
    color: #666;
  }
  
  .cvb-button {
    border-radius: 0;
  }
  
  
  /* ==========================================================================
     9. STOPKA — layout 1:1 z geschaft.gmbh
     wrap max-width 1440 | górny rząd gap 242px | kolumny 4 x ~229px
     duże logo pełna szerokość, 170px
     ========================================================================== */
  
  .gsft-footer {
    position: relative;
    background: #fff;
    overflow: hidden;
  }
  
  .gsft-footer__wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 8px 32px;
  }
  
  .gsft-footer__main {
    display: flex;
    flex-direction: column;
    gap: 72px;
  }
  
  /* --- Górny rząd --- */
  
  .gsft-footer__top {
    display: flex;
    flex-direction: row;
    gap: 242px;
  }
  
  .gsft-footer__brand {
    position: relative;
    flex: 0 0 236px;
    width: 236px;
  }
  
  .gsft-footer__copy {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #252525;
    text-decoration: none;
  }
  
  .gsft-footer__newsletter {
    margin-top: 40px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  /* Zielona strzałka obok tekstu newslettera, w przerwie między kolumnami.
     Renderuje się tylko wtedy, gdy w motywie leży assets/images/Vector-1.svg
     (footer-content.php sprawdza to przez file_exists). */
  .gsft-footer__arrow {
    position: absolute;
    top: 44px;
    left: calc(100% + 10px);
    width: 93px;
    height: auto;
    pointer-events: none;
  }
  
  /* --- Formularz newslettera (Contact Form 7) --- */
  
  .gsft-footer__newsletter p {
    margin: 0;
  }
  
  .gsft-footer__newsletter form {
    margin-top: 16px;
  }
  
  .gsft-footer__newsletter .wpcf7-form-control-wrap {
    display: inline-block;
  }
  
  .gsft-footer__newsletter input[type="email"],
  .gsft-footer__newsletter input[type="text"] {
    width: 165px;
    height: 40px;
    padding: 12px 8px;
    border: 1px solid rgba(37, 37, 37, 0.2);
    border-radius: 0;
    background: #fff;
    font-size: 13px;
    color: #000;
  }
  
  .gsft-footer__newsletter input[type="email"]::placeholder,
  .gsft-footer__newsletter input[type="text"]::placeholder {
    color: rgba(37, 37, 37, 0.4);
  }
  
  .gsft-footer__newsletter input[type="submit"] {
    width: 65px;
    height: 40px;
    padding: 12px 8px;
    margin-left: -1px;
    border: 1px solid rgba(37, 37, 37, 0.2);
    border-radius: 0;
    background: #252525;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .gsft-footer__newsletter input[type="submit"]:hover {
    opacity: 0.85;
  }
  
  .gsft-footer__newsletter .wpcf7-list-item {
    margin: 0;
  }
  
  .gsft-footer__newsletter .wpcf7-acceptance {
    display: block;
    margin-top: 16px;
    font-size: 13px;
  }
  
  .gsft-footer__newsletter input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 1px solid rgba(37, 37, 37, 0.4);
    border-radius: 0;
    accent-color: #252525;
    vertical-align: -2px;
  }
  
  .gsft-footer__newsletter a {
    color: #252525;
    text-decoration: underline;
  }
  
  /* --- Kolumny linków --- */
  
  .gsft-footer__columns {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .gsft-footer__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 0;
    min-width: 0;
  }
  
  .gsft-footer__heading {
    font-size: 13px;
    font-weight: 500;
    line-height: 20.8px;
    letter-spacing: -0.1px;
    color: #404040;
  }
  
  .gsft-footer__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-footer__list li {
    margin: 0;
  }
  
  .gsft-footer__list a,
  .gsft-footer__address {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.1px;
    color: #252525;
    text-decoration: none;
  }
  
  .gsft-footer__list a:hover {
    text-decoration: underline;
  }
  
  .gsft-footer__address p {
    margin: 0 0 5px;
  }
  
  /* --- Dolny rząd --- */
  
  .gsft-footer__bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .gsft-footer__pay {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 50%;
  }
  
  .gsft-footer__pay-icon {
    width: 38px;
    height: 24px;
    object-fit: contain;
  }
  
  .gsft-footer__credit {
    width: 50%;
    margin: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  .gsft-footer__credit a {
    color: inherit;
    text-decoration: underline;
  }
  
  /* --- Duże logo --- */
  
  .gsft-footer__logo {
    display: block;
    width: 100%;
    height: 170px;
    max-width: 100%;
    object-fit: fill;
  }
  
  /* --- Mobile --- */
  
  @media (max-width: 1023px) {
  
    .gsft-footer__wrap {
      gap: 32px;
      padding: 64px 16px 24px;
    }
  
    .gsft-footer__main {
      gap: 48px;
    }
  
    .gsft-footer__top {
      flex-direction: column;
      gap: 48px;
    }
  
    .gsft-footer__brand {
      flex: 0 0 auto;
      width: 100%;
    }
  
    .gsft-footer__arrow {
      display: none;
    }
  
    .gsft-footer__columns {
      flex-wrap: wrap;
      gap: 32px 16px;
    }
  
    .gsft-footer__col {
      flex: 0 0 calc(50% - 8px);
    }
  
    .gsft-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  
    .gsft-footer__pay,
    .gsft-footer__credit {
      width: 100%;
    }
  
    .gsft-footer__pay {
      flex-wrap: wrap;
      gap: 12px;
    }
  
    .gsft-footer__credit {
      text-align: left;
    }
  
    .gsft-footer__logo {
      height: auto;
    }
  }
  
  
  /* ==========================================================================
     10. SEKCJA MARKI — "TIMELESS SIMPLICITY. UNCOMPROMISING QUALITY."
     template-parts/sections/pages/sekcja_marki.php
  
     Wartości odczytane z geschaft.gmbh (#section-201-90):
       wrap ....... max-width 1440px, padding 80px 8px 0
       kolumna L .. 42% (tekst)   |   kolumna P .. 50% (zdjęcie)
       nagłówek ... 18px / 20.25 / 700 / ls -0.1 / #404040
       treść ...... 13px / 20.8 / 500 / ls -0.1 / #404040, margin-top 15px
     ========================================================================== */
  
  .gsft-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 8px 0;
  }
  
  .gsft-brand__text {
    width: 42%;
  }
  
  .gsft-brand__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.125;
    letter-spacing: -0.1px;
    text-transform: uppercase;
    color: #404040;
  }
  
  .gsft-brand__copy {
    margin-top: 15px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20.8px;
    letter-spacing: -0.1px;
    color: #404040;
  }
  
  .gsft-brand__copy p {
    margin: 0;
  }
  
  .gsft-brand__copy p + p {
    margin-top: 10px;
  }
  
  .gsft-brand__media {
    width: 50%;
  }
  
  .gsft-brand__img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  @media (max-width: 767px) {
  
    .gsft-brand {
      flex-direction: column;
      align-items: flex-start;
      padding: 40px 16px 0;
    }
  
    .gsft-brand__text {
      width: 100%;
      margin-bottom: 3em;
    }
  
    .gsft-brand__media {
      width: 100%;
    }
  }
  
  
  /* ==========================================================================
     11. MINI KOSZYK — przyklejona stopka panelu
     template-parts/woocommerce/mini-cart.php -> .slidein-cart-panel
  
     Panel wtyczki slidein-cart dostaje trzy warstwy flexa, żeby lista pozycji
     przewijała się sama, a suma z przyciskami stała na dole.
     ========================================================================== */
  
  .slidein-cart-panel .slidein-cart-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  
    /* Przewijanie obsługuje warstwa niżej — tu byłby drugi pasek. */
    overflow: hidden;
  }
  
  .slidein-cart-panel .slidein-cart-body > .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  
    /* Motyw ustawia tej klasie height: 100% — przy elastycznym rodzicu
       wysokość ma wynikać z flexa, nie z procentu. */
    height: auto;
  }
  
  .slidein-cart-panel .widget_shopping_cart_content > div {
    min-height: 0;
  }
  
  .gsft-minicart__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  
    /* Miejsce na pasek przewijania, żeby nie zasłaniał ceny. */
    padding-right: 12px;
  
    /* Dojechanie do końca listy nie przewija strony pod panelem. */
    overscroll-behavior: contain;
  }
  
  .gsft-minicart__foot {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    background: #fff;
  
    /* Miękki cień sygnalizuje, że lista chowa się pod stopką. */
    box-shadow: 0 -10px 14px -10px rgba( 0, 0, 0, 0.18 );
  }
  
  
  /* ==========================================================================
     12. KASA — kroki Kontakt / Dostawa / Płatność
     woocommerce/checkout/form-checkout.php -> .gsft-kroki
  
     Tokeny wzięte z tego, co strona już ma, nie z prototypu:
       krój ...... CabinetGrotesk, 13px
       input ..... 45px wysokości, 1px solid #000, bez zaokrągleń, padding 12/8
       przycisk .. #247E60, biały tekst, 13px/400, bez zaokrągleń
  
     Kroki są sterowane klasami z JS-a w szablonie:
       .is-otwarty  krok rozwinięty
       .is-gotowy   krok wypełniony i zwinięty (numer zmienia się w ptaszka)
       .gsft-blad   wiersz z niewypełnionym polem wymaganym
     ========================================================================== */
  
  .gsft-kroki {
    --gsft-kasa-akcent: #247e60;
    --gsft-kasa-linia: rgba( 0, 0, 0, 0.15 );
    --gsft-kasa-przygaszony: rgba( 0, 0, 0, 0.55 );
  
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  
  /* --- Krok --------------------------------------------------------------- */
  
  .gsft-krok {
    border-top: 1px solid var( --gsft-kasa-linia );
    padding: 18px 0;
  }
  
  .gsft-krok:first-child {
    border-top: 0;
    padding-top: 0;
  }
  
  .gsft-krok__naglowek {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #252525;
  }
  
  .gsft-krok.is-gotowy .gsft-krok__naglowek {
    cursor: pointer;
  }
  
  /* Numer kroku — kółko z cyfrą, po wypełnieniu zamienia się w ptaszka. */
  .gsft-krok__numer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
  }
  
  .gsft-krok:not( .is-otwarty ):not( .is-gotowy ) .gsft-krok__naglowek {
    color: var( --gsft-kasa-przygaszony );
  }
  
  .gsft-krok.is-gotowy .gsft-krok__numer {
    border-color: var( --gsft-kasa-akcent );
    background: var( --gsft-kasa-akcent );
    color: #fff;
    font-size: 0;
  }
  
  .gsft-krok.is-gotowy .gsft-krok__numer::after {
    content: "\2713";
    font-size: 12px;
    line-height: 1;
  }
  
  .gsft-krok__tytul {
    flex: 0 0 auto;
  }
  
  /* Skrót wpisanych danych — widoczny tylko w zwiniętym, ukończonym kroku. */
  .gsft-krok__podsumowanie {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var( --gsft-kasa-przygaszony );
  }
  
  .gsft-krok.is-otwarty .gsft-krok__podsumowanie {
    display: none;
  }
  
  .gsft-krok__zmien {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    color: #000;
    cursor: pointer;
  }
  
  .gsft-krok:not( .is-gotowy ) .gsft-krok__zmien,
  .gsft-krok.is-otwarty .gsft-krok__zmien {
    display: none;
  }
  
  /* --- Treść kroku -------------------------------------------------------- */
  
  .gsft-krok__tresc {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding-top: 18px;
  }
  
  .gsft-krok.is-otwarty .gsft-krok__tresc {
    display: flex;
  }
  
  /* --- Pola --------------------------------------------------------------- */
  
  .gsft-krok__tresc .form-row {
    margin: 0;
    padding: 0;
  }
  
  /* UWAGA: select2 NIE jest tu wymieniony — sekcja 12c ustawia mu wysokość
     i padding osobno, bo padding 12px dokładał się do wysokości wnętrza
     i wypychał tekst pod dolną krawędź pola. */
  .gsft-krok__tresc input[type="text"],
  .gsft-krok__tresc input[type="email"],
  .gsft-krok__tresc input[type="tel"],
  .gsft-krok__tresc input[type="password"],
  .gsft-krok__tresc textarea {
    width: 100%;
    height: 45px;
    padding: 12px 8px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #000;
  }
  
  .gsft-krok__tresc textarea {
    height: auto;
  }
  
  .gsft-krok__tresc input::placeholder,
  .gsft-krok__tresc textarea::placeholder {
    color: var( --gsft-kasa-przygaszony );
  }
  
  .gsft-krok__tresc .form-row.gsft-blad input,
  .gsft-krok__tresc .form-row.gsft-blad select,
  .gsft-krok__tresc .form-row.gsft-blad .select2-container .select2-selection--single {
    border-color: #d1372f;
  }
  
  /* --- Przycisk "Dalej" --------------------------------------------------- */
  
  .gsft-krok__dalej {
    align-self: stretch;
    margin-top: 4px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: var( --gsft-kasa-akcent );
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  
  .gsft-krok__dalej:hover {
    background: #1d6a51;
  }
  
  /* --- Metody dostawy przeniesione do kroku 2 ----------------------------- */
  
  .gsft-dostawa[data-pusty] {
    display: none;
  }
  
  .gsft-dostawa ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-dostawa li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var( --gsft-kasa-linia );
  }
  
  .gsft-dostawa li:has( input:checked ) {
    border-color: #000;
  }
  
  .gsft-dostawa label {
    margin: 0;
    font-size: 13px;
    cursor: pointer;
  }
  
  /* Wiersz dostawy w tabeli po prawej chowa skrypt — ta reguła jest na wypadek
     wyłączonego JS-u, żeby wybór dostawy nie zniknął z kasy zupełnie. */
  .gsft-dostawa:not( [data-pusty] ) ~ * .woocommerce-shipping-totals {
    display: none;
  }

  /* --- Uwagi do zamówienia (form-shipping.php -> .gsft-uwagi) ------------- */

  .gsft-uwagi__przelacznik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    cursor: pointer;
    list-style: none;
  }

  .gsft-uwagi__przelacznik::-webkit-details-marker {
    display: none;
  }

  /* Plus w ramce zamiast systemowego trójkąta — po rozwinięciu minus. */
  .gsft-uwagi__przelacznik::before {
    content: "+";
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    font-size: 13px;
    line-height: 1;
  }

  .gsft-uwagi[open] .gsft-uwagi__przelacznik::before {
    content: "\2212";
  }

  .gsft-uwagi__opcjonalne {
    color: var( --gsft-kasa-przygaszony );
  }

  .gsft-uwagi .woocommerce-additional-fields__field-wrapper {
    margin-top: 12px;
  }

  .gsft-krok__tresc .gsft-uwagi textarea {
    line-height: 1.45;
    resize: vertical;
  }
  
  /* --- Płatność ----------------------------------------------------------- */
  
  .gsft-krok .wc_payment_methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-krok .wc_payment_methods > li {
    padding: 12px;
    border: 1px solid var( --gsft-kasa-linia );
  }
  
  .gsft-krok .wc_payment_methods > li.wc_payment_method input:checked + label {
    font-weight: 500;
  }
  
  .gsft-krok .payment_box {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var( --gsft-kasa-przygaszony );
  }
  
  .gsft-krok #place_order {
    width: 100%;
    padding: 14px 12px;
    border: 0;
    border-radius: 0;
    background: var( --gsft-kasa-akcent );
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
  }
  
  .gsft-krok #place_order:hover {
    background: #1d6a51;
  }
  
  /* --- Prawa kolumna ------------------------------------------------------ */
  
  .gsft-kasa__tytul-podsumowania {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #252525;
  }
  
  @media (max-width: 1023px) {
  
    .gsft-krok__naglowek,
    .gsft-kasa__tytul-podsumowania {
      font-size: 17px;
    }
  }
  
  
  /* ==========================================================================
     12b. KASA — podsumowanie zamówienia i kod rabatowy
     woocommerce/checkout/review-order.php -> .gsft-podsumowanie
  
     Tabela została (haki WooCommerce i wc_cart_totals_shipping_html() wypisują
     <tr>), ale komórki są zresetowane, więc zachowuje się jak zwykły układ.
     ========================================================================== */
  
  .gsft-podsumowanie {
    --gsft-kasa-linia: rgba( 0, 0, 0, 0.15 );
    --gsft-kasa-przygaszony: rgba( 0, 0, 0, 0.55 );
  
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    color: #252525;
  }
  
  .gsft-podsumowanie th,
  .gsft-podsumowanie td {
    padding: 0;
    border: 0;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
  }
  
  /* --- Lista produktów ---------------------------------------------------- */
  
  .gsft-podsumowanie__produkt {
    padding: 10px 0 !important;
  }
  
  .gsft-podsumowanie__cena {
    padding: 10px 0 !important;
    text-align: right !important;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  .gsft-produkt {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .gsft-produkt__foto {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
  }
  
  .gsft-produkt__foto img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    background: #fff;
  }
  
  /* Liczba sztuk jako plakietka na rogu miniatury. */
  .gsft-produkt__ilosc {
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #252525;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
  }
  
  .gsft-produkt__opis {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  
  .gsft-produkt__nazwa {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #252525;
  }
  
  .gsft-produkt__meta,
  .gsft-produkt__meta p,
  .gsft-produkt__meta dl {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var( --gsft-kasa-przygaszony );
  }
  
  /* WooCommerce wypisuje atrybuty jako <dl><dt>Size:</dt><dd>M</dd></dl> —
     spłaszczamy to do jednej linijki "Size: M". */
  .gsft-produkt__meta dl,
  .gsft-produkt__meta dt,
  .gsft-produkt__meta dd {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 400;
  }
  
  .gsft-produkt__meta dd + dt::before {
    content: " · ";
  }
  
  /* --- Kod rabatowy ------------------------------------------------------- */
  
  .gsft-kupon-wiersz td {
    padding: 18px 0 !important;
    border-top: 1px solid var( --gsft-kasa-linia );
  }
  
  .gsft-kupon {
    display: flex;
    gap: 6px;
  }
  
  /* Motyw stylizuje globalnie każdy input i każdy button — tu podajemy własne
     wartości, żeby pole i przycisk miały równą wysokość i nie zmieniały się
     na hover w czarny prostokąt. */
  .gsft-kupon__pole {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 12px 10px;
    border: 1px solid var( --gsft-kasa-linia );
    border-radius: 0;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #252525;
  }
  
  .gsft-kupon__pole:hover,
  .gsft-kupon__pole:focus {
    border-color: #252525;
  }
  
  .gsft-kupon__przycisk {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 18px !important;
    border: 1px solid #252525 !important;
    border-radius: 0;
    background: #fff !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #252525 !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  
  .gsft-kupon__przycisk:hover:not( :disabled ) {
    background: #252525 !important;
    color: #fff !important;
  }
  
  .gsft-kupon__przycisk:disabled {
    opacity: 0.5;
    cursor: default;
  }
  
  .gsft-kupon__komunikat {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var( --gsft-kasa-przygaszony );
  }
  
  /* --- Kwoty -------------------------------------------------------------- */
  
  .gsft-kwota th,
  .gsft-kwota td {
    padding: 7px 0 !important;
  }
  
  .gsft-kwota th {
    color: var( --gsft-kasa-przygaszony );
  }
  
  .gsft-kwota td {
    text-align: right !important;
    white-space: nowrap;
  }
  
  /* Pierwsza kwota oddziela się kreską od kuponu (albo od listy produktów,
     gdy kupony są wyłączone). */
  .cart-subtotal.gsft-kwota th,
  .cart-subtotal.gsft-kwota td {
    padding-top: 18px !important;
    border-top: 1px solid var( --gsft-kasa-linia );
  }
  
  .gsft-kupon-wiersz + .cart-subtotal.gsft-kwota th,
  .gsft-kupon-wiersz + .cart-subtotal.gsft-kwota td {
    border-top: 0;
    padding-top: 0 !important;
  }
  
  .gsft-kwota--rabat td {
    color: #247e60;
  }
  
  .gsft-kwota--rabat .woocommerce-remove-coupon {
    margin-left: 8px;
    font-size: 12px;
    color: var( --gsft-kasa-przygaszony );
    text-decoration: underline;
  }
  
  .gsft-kwota--suma th,
  .gsft-kwota--suma td {
    padding-top: 16px !important;
    border-top: 1px solid var( --gsft-kasa-linia );
    font-size: 15px;
    font-weight: 500;
    color: #252525;
  }
  
  /* Wiersz dostawy trafia do kroku 2, ale gdyby JS nie wystartował, ma
     wyglądać jak reszta kwot. */
  .woocommerce-shipping-totals th,
  .woocommerce-shipping-totals td {
    padding: 7px 0 !important;
    text-align: left;
    color: var( --gsft-kasa-przygaszony );
  }
  
  .woocommerce-shipping-totals ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  
  /* ==========================================================================
     12c. KASA — listy rozwijane (kraj, województwo)
     woocommerce/checkout/form-checkout.php -> .gsft-krok__tresc
  
     CO SIĘ DZIEJE
     Pole kraju przechodzi w kasie przez DWA stany, i to dlatego wyglądało
     dobrze dopiero po odświeżeniu:
  
       1. PIERWSZY RENDER — zwykły <select>. selectWoo (select2) jest wczytany,
          ale podmienia pole dopiero przy pierwszym country_to_state_changed,
          więc na start w DOM jest goły select.
       2. PO ZMIANIE KRAJU — selectWoo chowa prawdziwy <select>
          (klasa select2-hidden-accessible, 1x1 px) i rysuje obok
          <span class="select2-container">.
  
     Ta sekcja obsługuje OBA stany. W pliku była dwa razy — skrócona wersja
     (tylko goły select) i pełna; skrócona została usunięta.
     ========================================================================== */
  
  /* --------------------------------------------------------------------------
     Stan 1 — goły <select> (pierwszy render, także gdyby selectWoo nie wstał)
     -------------------------------------------------------------------------- */
  
  .gsft-krok__tresc select {
    -webkit-appearance: none;
    appearance: none;
  
    width: 100%;
    height: 45px;
  
    /* 32 px z prawej to miejsce na strzałkę, żeby nie nachodziła na tekst. */
    padding: 12px 32px 12px 8px;
  
    border: 1px solid #000;
    border-radius: 0;
  
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
  
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: #000;
    cursor: pointer;
  }
  
  /* Starsze Edge dokłada własną strzałkę obok naszej. */
  .gsft-krok__tresc select::-ms-expand {
    display: none;
  }
  
  /* Ukrytego przez selectWoo originału nie stylizujemy — ma zostać 1x1 px,
     bo to on nosi wartość wysyłaną z formularzem. */
  .gsft-krok__tresc select.select2-hidden-accessible {
    -webkit-appearance: none;
    appearance: none;
    height: 1px;
    padding: 0;
    border: 0;
    background: none;
  }
  
  /* --------------------------------------------------------------------------
     Stan 2 — select2 / selectWoo
     -------------------------------------------------------------------------- */
  
  /* display: block, bo domyślny inline-block zostawiał wiersz o 4 px niższy
     od samego pola i odstęp do następnego pola robił się nierówny. */
  .gsft-krok__tresc .select2-container {
    display: block;
    width: 100% !important;
  }
  
  .gsft-krok__tresc .select2-container .select2-selection--single {
    display: block;
    box-sizing: border-box;
    height: 45px !important;
  
    /* NAJWAŻNIEJSZA LINIJKA. Padding dokładał się do wysokości
       .select2-selection__rendered i wypychał tekst pod pudełko. */
    padding: 0 !important;
  
    border: 1px solid #000 !important;
    border-radius: 0;
    background: #fff;
  }
  
  .gsft-krok__tresc .select2-container .select2-selection--single .select2-selection__rendered {
    /* 43 = 45 minus dwie ramki; line-height równe wysokości centruje tekst. */
    height: 43px !important;
    line-height: 43px !important;
    padding: 0 32px 0 8px !important;
  
    font-family: inherit;
    font-size: 13px;
    color: #000;
  }
  
  .gsft-krok__tresc .select2-container .select2-selection--single .select2-selection__placeholder {
    color: rgba( 0, 0, 0, 0.55 );
  }
  
  /* Strzałka: ten sam chevron co przy gołym selekcie, w miejsce trójkącika
     select2 (jego <b> chowamy). */
  .gsft-krok__tresc .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 10px !important;
    width: 12px !important;
    height: 43px !important;
  
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
  }
  
  .gsft-krok__tresc .select2-container .select2-selection--single .select2-selection__arrow b {
    display: none !important;
  }
  
  .gsft-krok__tresc .select2-container--open .select2-selection--single {
    border-color: #000 !important;
  }
  
  /* Wiersz formularza jest elementem flex w .woocommerce-billing-fields__field-wrapper
     i przy select2 wychodził o 4 px niższy niż pole w środku. */
  .gsft-krok__tresc .form-row {
    min-height: 45px;
  }
  
  /* --------------------------------------------------------------------------
     Rozwinięta lista
     select2 wstawia ją na końcu <body>, poza .gsft-krok__tresc — dlatego te
     selektory nie mają prefiksu kroku.
     -------------------------------------------------------------------------- */
  
  .select2-container--default .select2-dropdown {
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: 0 12px 24px -12px rgba( 0, 0, 0, 0.25 );
  }
  
  .select2-container--default .select2-search--dropdown {
    padding: 8px;
  }
  
  .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 36px;
    padding: 8px;
    border: 1px solid rgba( 0, 0, 0, 0.15 );
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    color: #252525;
  }
  
  .select2-container--default .select2-results__option {
    padding: 9px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: #252525;
  }
  
  /* select2 4.0 używa aria-selected, selectWoo w nowszych wersjach data-selected
     — łapiemy oba, żeby podświetlenie nie zależało od wersji. */
  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #252525;
    color: #fff;
  }
  
  .select2-container--default .select2-results__option[aria-selected="true"],
  .select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba( 0, 0, 0, 0.06 );
    color: #252525;
  }
  
  
  /* ==========================================================================
     13. MENU GŁÓWNE — rozwijane podmenu
     template-parts/layout/header-content.php -> #site-navigation
  
     PROBLEM
     W skompilowanym CSS jedyną regułą dotyczącą podmenu jest
     .menu ul { display:flex; flex-direction:column; gap:8px }, więc ul.sub-menu
     ma position: static i siedzi w przepływie wewnątrz <li>. Dopóki menu nie
     miało pozycji z dziećmi, nie było tego widać; po ich dodaniu lista rozpycha
     belkę na całą wysokość.
  
     Wartości odczytane z geschaft.gmbh (.sub-menu w oxy-nav-menu):
       panel .... position absolute, top 100%, flex column, tło rgba(37,37,37,.6)
                  ukryty przez visibility + opacity, przejście 0.3s ease-in-out
       pozycja .. wysokość 40px, link padding 12px 16px
       link ..... 13px / 14.4 / 500 / ls -0.1 / biały
     ========================================================================== */
  
  #site-navigation {
    /* Panel wysuwa się spod DOLNEJ krawędzi belki, nie spod samego tekstu.
       Żeby to było niezależne od wysokości logo, nawigacja rozciąga się na
       pełną wysokość komórki gridu, a 12px niżej to padding-block belki
       (py-3 z header-grid). */
    align-self: stretch;
  
    --gsft-submenu-tlo: rgba( 37, 37, 37, 0.6 );
    --gsft-submenu-tekst: #fff;
    --gsft-submenu-tekst-hover: rgba( 255, 255, 255, 0.7 );
    --gsft-submenu-odstep: 12px;
  }
  
  #site-navigation .menu {
    height: 100%;
  }
  
  #site-navigation .menu > li {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  #site-navigation .menu > li > a {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  /* --- Panel -------------------------------------------------------------- */
  
  #site-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
  
    /* Nadpisuje gap: 8px z .menu ul — odstępy robi padding linków,
       inaczej pozycje nie mają równych 40px. */
    gap: 0;
  
    min-width: 100%;
    width: max-content;
    margin: var( --gsft-submenu-odstep ) 0 0;
    padding: 0;
    list-style: none;
  
    background: var( --gsft-submenu-tlo );
    -webkit-backdrop-filter: blur( 40px );
    backdrop-filter: blur( 40px );
  
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  
  /* focus-within otwiera panel także przy nawigacji klawiaturą. */
  #site-navigation .menu > li:hover > .sub-menu,
  #site-navigation .menu > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
  }
  
  /* Niewidzialny mostek nad panelem — bez niego kursor gubi hover w przerwie
     między belką a panelem i menu zamyka się w połowie drogi. */
  #site-navigation .menu > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var( --gsft-submenu-odstep );
  }
  
  /* --- Pozycje ------------------------------------------------------------ */
  
  #site-navigation .sub-menu li {
    display: block;
    margin: 0;
    padding: 0;
  }
  
  #site-navigation .sub-menu a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 14.4px;
    letter-spacing: -0.1px;
    color: var( --gsft-submenu-tekst );
    white-space: nowrap;
  }
  
  /* Reguła :is(.menu li, a):hover ustawia czarny tekst — na ciemnym panelu
     pozycja robiła się wtedy nieczytelna. */
  #site-navigation .sub-menu a:hover {
    color: var( --gsft-submenu-tekst-hover );
  }
  
  /* --- Menu mobilne --------------------------------------------------------
     Tam podmenu ma zostać w przepływie, ale bez wcięcia pozycje kategorii
     udawałyby pozycje najwyższego poziomu.                                   */
  
  #mobile-menu-sidebar .sub-menu {
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 14px;
    border-left: 1px solid rgba( 0, 0, 0, 0.12 );
  }
  
  #mobile-menu-sidebar .sub-menu a {
    font-size: 13px;
    font-weight: 400;
  }
  
  
  /* ==========================================================================
     14. SKLEP — siatka i wysuwany panel filtrów
     woocommerce/archive-product.php -> .gsft-sklep / .gsft-filtry
  
     Wartości odczytane z geschaft.gmbh/shop:
       wrap ....... max-width 1440px, padding boczny 8px
       siatka ..... 4 kolumny, kafel 352px, odstęp ~4px
       "Filter" ... 13px / 500 / #404040, sam tekst z ikoną, bez ramki
  
     Panel wysuwa się z lewej na KAŻDEJ szerokości — na starej stronie filtry
     też nie zajmowały stałej kolumny.
     ========================================================================== */
  
  .gsft-sklep {
    --gsft-sklep-linia: rgba( 0, 0, 0, 0.15 );
    --gsft-sklep-przygaszony: rgba( 37, 37, 37, 0.6 );
  
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8px 60px;
  }
  
  /* --- Pasek nad siatką --------------------------------------------------- */
  
  .gsft-sklep__pasek {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
  }
  
  /* Motyw stylizuje globalnie każdy <button> (białe tło, padding 12px, czarny
     na hover) — tutaj cofamy to do zwykłego tekstu z ikoną. */
  .gsft-sklep__filtr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: #404040 !important;
    cursor: pointer;
  }
  
  .gsft-sklep__filtr:hover {
    opacity: 0.7;
  }
  
  .gsft-sklep__filtr-ikona {
    width: 14px;
    height: 14px;
  }
  
  .gsft-sklep__filtr-znak {
    font-size: 14px;
    line-height: 1;
  }
  
  /* --- Siatka produktów --------------------------------------------------- */
  
  .gsft-sklep__siatka ul.products {
    display: grid;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-sklep__siatka ul.products > li {
    margin: 0;
    width: auto;
  }
  
  .gsft-sklep__siatka .woocommerce-pagination {
    margin-top: 40px;
  }
  
  .gsft-sklep__siatka .woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  @media (max-width: 1023px) {
  
    .gsft-sklep {
      padding: 0 8px 40px;
    }
  
    .gsft-sklep__siatka ul.products {
      grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    }
  }
  
  /* --- Panel filtrów ------------------------------------------------------ */
  
  .gsft-filtry-tlo {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba( 0, 0, 0, 0.5 );
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .gsft-filtry-tlo.is-widoczne {
    opacity: 1;
  }
  
  .gsft-filtry {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: min( 420px, 100vw );
    height: 100%;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba( 0, 0, 0, 0.25 );
  
    /* Ukryte przesunięciem, nie display:none — noUiSlider liczy szerokość przy
       starcie i na elemencie bez wymiarów wyrenderowałby suwak jako kreskę. */
    transform: translateX( -100% );
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
  }
  
  .gsft-filtry.is-otwarty {
    transform: translateX( 0 );
    visibility: visible;
    transition: transform 0.3s ease-in-out, visibility 0s;
  }
  
  .gsft-filtry__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .gsft-filtry__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var( --gsft-sklep-linia, rgba( 0, 0, 0, 0.15 ) );
  }
  
  .gsft-filtry__tytul {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.1px;
    text-transform: uppercase;
    color: #252525;
  }
  
  .gsft-filtry__zamknij {
    display: flex;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: rgba( 37, 37, 37, 0.5 ) !important;
    cursor: pointer;
  }
  
  .gsft-filtry__zamknij:hover {
    color: #252525 !important;
  }
  
  .gsft-filtry__zamknij svg {
    width: 22px;
    height: 22px;
  }
  
  .gsft-filtry__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 24px;
  }
  
  .gsft-filtry__foot {
    flex: 0 0 auto;
    padding: 16px 24px 20px;
    border-top: 1px solid var( --gsft-sklep-linia, rgba( 0, 0, 0, 0.15 ) );
  }
  
  .gsft-filtry__pokaz {
    width: 100%;
    padding: 14px 12px !important;
    border: 0 !important;
    border-radius: 0;
    background: #247e60 !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #fff !important;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  
  .gsft-filtry__pokaz:hover {
    background: #1d6a51 !important;
  }
  
  /* Nagłówki grup w panelu — motyw daje im text-lg, tu trzymamy skalę strony. */
  .gsft-filtry .filter-toggle {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  .gsft-filtry .filter-content {
    font-size: 13px;
    color: var( --gsft-sklep-przygaszony, rgba( 37, 37, 37, 0.6 ) );
  }
  
  /* Blokada przewijania strony pod otwartym panelem. */
  body.gsft-filtry-open {
    overflow: hidden;
  }
  
  
  /* ==========================================================================
     15. BANER — dokładnie na wysokość ekranu, od górnej do dolnej krawędzi
     template-parts/sections/pages/baner.php -> section.baner > div.h-200
  
     DROGA DO TEGO
     Wersja 1 wiązała wysokość z oknem (88vh) — napisy w filmie były ucinane.
     Wersja 2 dała pełne 16:9 — napisy całe, ale baner wystawał ~200 px poniżej
     zgięcia i przycisk "Shop Collection" trzeba było doscrollować.
     Ta wersja odwraca priorytet: liczy się to, żeby CAŁY baner z przyciskiem
     był widoczny bez ruszania kółkiem.
  
     DWIE ZMIANY
  
     1. Wysokość = 100svh, czyli dokładnie tyle, ile widać.
        svh (small viewport height), a nie vh, bo na telefonie vh liczy się
        z paskiem adresu i baner wystawałby pod ekran.
        Zalogowany admin ma pasek WordPressa 32 px, stąd drugi wariant.
  
     2. Pierwszy baner wchodzi POD belkę (margin-top: -67px = wysokość belki:
        24 px czarnego paska + 43 px belki głównej). Belka ma z-index 9999
        i półprzezroczyste tło z rozmyciem, więc kładzie się na filmie zamiast
        go przycinać — dokładnie tak jak na representclo.com.
  
        Selektor :first-of-type łapie tylko baner, który JEST pierwszą sekcją
        strony. Drugi baner na stronie głównej dostaje samą wysokość.
  
     Telefon zostaje bez zmian — h-200 z Tailwinda, czyli 800 px.
     ========================================================================== */
  
  @media ( min-width: 1024px ) {
  
    .baner > div.h-200 {
      height: 100svh;
    }
  
    body.admin-bar .baner > div.h-200 {
      height: calc( 100svh - 32px );
    }
  
    main > section.baner:first-of-type {
      margin-top: -67px;
    }
  }
  
  
  /* ==========================================================================
     16. PRZEŁĄCZNIK WALUT W BELCE
     header-content.php -> .header-actions > .gsftwal-slot
  
     PROBLEM
     Wtyczka wc-slide-search wyjmuje lupę z układu flex i ustawia ją
     position: absolute; right: 100%; margin-right: 16px — czyli parkuje po lewej
     stronie CAŁEGO .header-actions. Przełącznik wstawiony tam jako zwykły
     element flex zawsze wypada więc między lupą a koszykiem.
  
     ROZWIĄZANIE
     Slot idzie absolutnie, tak jak lupa, tylko o jej szerokość dalej w lewo.
     .header-actions ma już position: relative, więc jest do czego się odnieść.
     --gsftwal-lewo to jedyna liczba do poprawienia, gdyby lupa zmieniła rozmiar.
  
     Kolor: przycisk przełącznika ma we wtyczce color: inherit, więc wystarczy
     podać biel na slocie. Bez tego dziedziczyłby czerń z body, bo nie jest
     linkiem jak "Search" i "Cart".
     ========================================================================== */
  
  .header-actions .gsftwal-slot {
    --gsftwal-lewo: 52px;
  
    position: absolute;
    top: 50%;
    right: calc( 100% + var( --gsftwal-lewo ) );
    transform: translateY( -50% );
  
    color: #fff;
    white-space: nowrap;
  }
  
  /* Panel z listą walut rozwija się pod przełącznikiem, wyrównany do jego
     prawej krawędzi — bez tego przy prawej krawędzi ekranu wyjeżdżałby za nią. */
  .header-actions .gsftwal-slot .gsftwal__lista {
    right: 0;
    left: auto;
  }
  
  
  /* ==========================================================================
     17. STRONA PRODUKTU — zdjęcie na całą wysokość ekranu, bez białych marginesów
     woocommerce/content-single-product.php -> .gsft-product__layout
  
     W starym pliku ta sekcja występowała CZTERY RAZY — cztery kolejne wersje
     dopisane jedna pod drugą. Każda ustawiała inne justify-content / gap /
     width, więc nadpisywały się nawzajem i zdjęcie raz wystawało za logo,
     raz nie. Zostaje wyłącznie ostatnia, z jawnie podanymi wszystkimi
     wartościami.
  
     ZMIERZONE PO ZMIANIE
       biel nad zdjęciem ....... 0 px (start równo pod belką)
       biel pod zdjęciem ....... 0 px (koniec równo z dolną krawędzią ekranu)
       lewa krawędź ............ 0 px
       prawa krawędź ........... środek logo GESCHÄFT, co do piksela
       tytuł w prawej kolumnie . bez zmian, dalej 60 px od góry układu
  
     JAK
     Górny padding 60 px siedział na .gsft-product__layout, czyli działał na OBIE
     kolumny. Zdejmuję go z układu i oddaję wyłącznie prawej kolumnie jako jej
     własny padding-top — dzięki temu tytuł zostaje tam, gdzie był, a zdjęcie
     startuje od razu pod belką.
  
     Wysokość zdjęcia = 100svh minus wysokość belki (67 px; zalogowany admin ma
     jeszcze pasek WordPressa, stąd 99 px).
  
     O CZYM TRZEBA WIEDZIEĆ
     Skoro nad i pod zdjęciem nie ma już bieli, to o proporcji decyduje wysokość
     okna, a nie stała wartość. Na 2560 x 1440 wyjdzie około 720 x 1250, czyli
     kadr WĘŻSZY niż 4/5, na niskim laptopie odwrotnie. Nie da się mieć
     jednocześnie stałej proporcji i zera bieli pod zdjęciem; alternatywa jest
     w zakomentowanym bloku na końcu pliku.
  
     Mini sekcja produktu na stronie głównej (.mini-product) zostaje bez zmian —
     dzieli klasę galerii, dlatego wszystkie selektory są zawężone do
     .gsft-product__media.
     ========================================================================== */
  
  /* Telefon: jedna kolumna, zdjęcie na pełną szerokość w proporcji 4/5. */
  .gsft-product__media .gsft-gallery__main {
    aspect-ratio: 4 / 5;
  }
  
  @media ( min-width: 1024px ) {
  
    .gsft-product__layout {
      --gsft-nad-zgieciem: calc( 100svh - 67px );
  
      /* Górny padding przechodzi na prawą kolumnę — patrz niżej. */
      padding-top: 0;
  
      /* Pozycje kolumn ustawiają ich własne marginesy, nie rozkład wolnego
         miejsca; inaczej zmiana szerokości zdjęcia przesuwałaby wszystko. */
      justify-content: flex-start;
      gap: 0;
    }
  
    /* Pasek administratora dokłada 32 px do wysokości belki. */
    body.admin-bar .gsft-product__layout {
      --gsft-nad-zgieciem: calc( 100svh - 99px );
    }
  
    .gsft-product__media {
      flex: 0 0 auto;
  
      /* Do lewej krawędzi wrapa; prawa krawędź trafia w środek logo,
         bo logo jest wyśrodkowane w tym samym wrapie. */
      width: 50%;
      margin-left: 0;
    }
  
    .gsft-product__media .gsft-gallery__main {
      /* Wysokość rządzi, proporcja wynika z okna. */
      aspect-ratio: auto;
      height: var( --gsft-nad-zgieciem );
    }
  
    .gsft-product__summary {
      flex: 0 0 470px;
      width: auto;
  
      /* auto dopycha kolumnę do prawej, 78 px to margines od krawędzi —
         jedyna liczba, którą warto ruszać, gdybyś chciał przesunąć opis. */
      margin-left: auto;
      margin-right: 78px;
  
      /* To, co zdjęło się z układu. Tytuł zostaje na swojej wysokości. */
      padding-top: 60px;
    }
  }
  
  
  /* ==========================================================================
     18. MOBILE — układ produktu i mini sekcji
     Musi stać PO sekcji 17, bo cofa jej ustawienia szerokości i sticky.
     ========================================================================== */
  
  @media (max-width: 1023px) {
  
    .gsft-product__layout,
    .mini-product__wrap {
      flex-direction: column;
      gap: 24px;
      padding: 24px 16px 0;
    }
  
    .gsft-product__media,
    .gsft-product__summary,
    .mini-product__gallery,
    .mini-product__info {
      width: 100%;
    }
  
    .mini-product__gallery .gsft-gallery {
      max-width: 100%;
      margin-left: 0;
    }
  
    .gsft-product__summary,
    .mini-product__info {
      position: static;
    }
  
    .mini-product__deco {
      display: none;
    }
  }
  
  
  /* ==========================================================================
     19. OGRANICZONE ANIMACJE
     Ustawienie systemowe "reduce motion" wyłącza przejścia w galerii,
     lightboksie i akordeonach.
     ========================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
  
    .gsft-gallery__main img,
    .gsft-gallery__nav,
    .gsft-lightbox,
    .gsft-lightbox__inner,
    .custom-accordion-panel {
      transition: none;
    }
  }
  
  
  /* --------------------------------------------------------------------------
     OPCJONALNIE — stały kształt 4/5 zdjęcia produktu zamiast pełnej wysokości
  
     Zdjęcie wróci do proporcji 4/5 i nigdy nie będzie wyższe niż ekran, ale na
     wysokim monitorze zostanie pod nim biały pas. Odwrotny kompromis niż
     w sekcji 17. Odkomentuj cały blok, jeśli wolisz stały kadr.
  
     @media ( min-width: 1024px ) {
         .gsft-product__media .gsft-gallery__main {
             aspect-ratio: 4 / 5;
             height: auto;
             max-height: var( --gsft-nad-zgieciem );
         }
     }
     -------------------------------------------------------------------------- */
  /* ==========================================================================
   20. KORZYŚCI POD PRZYCISKIEM "ADD TO CART"
   template-parts/woocommerce/korzysci.php -> .gsft-korzysci

   Dopisz na końcu style.css, pod sekcją 19.

   UKŁAD
   Wiersz to grid dwukolumnowy, nie flex z gapem — dzięki temu wszystkie
   teksty startują w tej samej pionowej linii niezależnie od tego, czy dany
   wiersz ma ikonę, czy nie. Tak samo jest na representclo.com: ikony stoją
   przy lewej krawędzi, a etykiety mają wspólną kolumnę.

   DO TUNINGU SĄ TRZY LICZBY (zmienne na .gsft-korzysci):
     --gsft-korzysci-kolumna .. szerokość kolumny ikon; im więcej, tym dalej
                                od lewej startuje tekst (Represent ma ~140px
                                przy szerszej kolumnie, u nas 470px, więc 88)
     --gsft-korzysci-ikona .... rozmiar ikony
     --gsft-korzysci-odstep ... odstęp pionowy między wierszami

   Wiersz bez ikony zachowuje wcięcie — pusty <span> trzyma kolumnę.
   Sekcja działa i na stronie produktu, i w mini sekcji na stronie głównej,
   bo oba widoki wołają ten sam hook.
   ========================================================================== */

.gsft-korzysci {
	--gsft-korzysci-kolumna: 88px;
	--gsft-korzysci-ikona: 20px;
	--gsft-korzysci-odstep: 11px;

	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.gsft-korzysci__wiersz {
	display: grid;
	grid-template-columns: var( --gsft-korzysci-kolumna ) 1fr;
	align-items: center;
	margin: 0;
	padding: var( --gsft-korzysci-odstep ) 0;
}

.gsft-korzysci__ikona {
	display: flex;
	align-items: center;

	/* Ikona przy lewej krawędzi kolumny, tak jak w oryginale. */
	justify-content: flex-start;

	/* Wysokość ustalona z góry, żeby wiersz bez ikony nie był niższy
	   od wiersza z ikoną. */
	height: var( --gsft-korzysci-ikona );
}

.gsft-korzysci__ikona img {
	display: block;
	width: auto;
	height: 100%;
	max-width: calc( var( --gsft-korzysci-ikona ) * 2.5 );

	/* Logo typu "Klarna." jest szersze niż wysokie — contain zachowa
	   proporcje i nie utnie go ani nie rozciągnie. */
	object-fit: contain;
	object-position: left center;
}

.gsft-korzysci__tekst {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.1px;
	color: #252525;
}

.gsft-korzysci__tekst strong,
.gsft-korzysci__tekst b {
	font-weight: 700;
}

/* Na telefonie kolumna informacji ma pełną szerokość ekranu, ale 88px
   wcięcia zabiera wtedy zbyt dużo miejsca krótkim etykietom. */
@media (max-width: 1023px) {

	.gsft-korzysci {
		--gsft-korzysci-kolumna: 44px;
		--gsft-korzysci-odstep: 9px;
	}
}

/* ==========================================================================
   20. KORZYŚCI POD PRZYCISKIEM "ADD TO CART"
   template-parts/sections/pages/korzysci.php -> .gsft-korzysci

   ┌────────────────────────────────────────────────────────────────────────┐
   │ WYMIEŃ CAŁĄ SEKCJĘ 20 na tę — poprzednia wersja nie znała rozwijanych  │
   │ wierszy i zostawione reguły gryzłyby się o padding przycisku.          │
   └────────────────────────────────────────────────────────────────────────┘

   UKŁAD
   Wiersz to grid trzykolumnowy: ikona | tekst | plus. Grid, a nie flex
   z gapem, bo dzięki temu wszystkie teksty startują w tej samej pionowej
   linii niezależnie od tego, czy dany wiersz ma ikonę. Tak samo jest na
   representclo.com. Wiersz bez plusa nie traci wyrównania — trzecia kolumna
   ma szerokość auto i po prostu znika.

   ROZWIJANIE
   Wiersz z wypełnionym opisem jest <button>, reszta zwykłym <div>. Panel
   animuje max-height, a wysokość w pikselach dokłada JS z szablonu (max-height
   nie animuje się z wartości auto). Zachowanie i grafika plus/minus są takie
   same jak w akordeonach Description / Size Guide wyżej w kolumnie, ale klasy
   są własne — inaczej weszłyby na nie reguły z sekcji 7 (padding 24px, kreska
   pod spodem) i kompaktowe wiersze zrobiłyby się wysokie jak zakładki.

   DO TUNINGU SĄ TRZY LICZBY (zmienne na .gsft-korzysci):
     --gsft-korzysci-kolumna .. szerokość kolumny ikon; im więcej, tym dalej
                                od lewej startuje tekst
     --gsft-korzysci-ikona .... rozmiar ikony
     --gsft-korzysci-odstep ... odstęp pionowy między wierszami
   ========================================================================== */

   .gsft-korzysci {
    /* Kolumna ikon = dokładnie szerokość ikony. Etykieta stoi wtedy 12 px
       za nią (tyle wynosi gap), a nie w połowie kolumny. Represent trzyma
       tu ~140 px, ale u nich każdy wiersz ma ikonę i kolumna jest szersza —
       przy czterech wierszach w 470 px robiła się z tego dziura.
       Gdybyś kiedyś wstawił logo szersze niż wysokie, podnieś tę wartość
       do jego szerokości, inaczej wyjdzie poza swoją kolumnę. */
    --gsft-korzysci-kolumna: 20px;
    --gsft-korzysci-ikona: 20px;
    --gsft-korzysci-odstep: 11px;
  
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }
  
  .gsft-korzysci__wiersz {
    /* display i grid-template-columns są tu podane JAWNIE, choć wyglądają na
       zbędne. W poprzedniej wersji sekcji 20 to wiersz był gridem, a nie jego
       wnętrze — jeśli tamten blok gdzieś zostanie, wcisnąłby cały przycisk
       do kolumny 88px i wiersz zrobiłby się wąskim słupkiem z połamanym
       tekstem. Te dwie linijki to unieważniają, o ile ta sekcja stoi niżej. */
    display: block;
    grid-template-columns: none;
  
    margin: 0;
    padding: 0;
  }
  
  /* --------------------------------------------------------------------------
     Wiersz — wspólny grid dla <div> i <button>
  
     Motyw stylizuje globalnie KAŻDY <button> (białe tło, padding 12px, czarne
     tło na hover), a .gsft-korzysci__glowa nie jest na jego liście wyjątków —
     stąd te !important. Bez nich wiersz urósłby o 24px i migał na czarno.
     -------------------------------------------------------------------------- */
  
  .gsft-korzysci__glowa {
    display: grid;
    grid-template-columns: var( --gsft-korzysci-kolumna ) 1fr auto;
    align-items: center;
    gap: 12px;
  
    width: 100%;
    margin: 0;
    padding: var( --gsft-korzysci-odstep ) 0 !important;
  
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    font: inherit;
    color: inherit !important;
    text-align: left;
  }
  
  button.gsft-korzysci__glowa {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  button.gsft-korzysci__glowa:hover {
    background: none !important;
    color: inherit !important;
    opacity: 0.65;
  }
  
  button.gsft-korzysci__glowa:focus-visible {
    outline: 2px solid #252525;
    outline-offset: 2px;
  }
  
  /* --------------------------------------------------------------------------
     Ikona
     -------------------------------------------------------------------------- */
  
  .gsft-korzysci__ikona {
    display: flex;
    align-items: center;
  
    /* Ikona przy lewej krawędzi kolumny, tak jak w oryginale. */
    justify-content: flex-start;
  
    /* Wysokość ustalona z góry, żeby wiersz bez ikony nie był niższy
       od wiersza z ikoną. */
    height: var( --gsft-korzysci-ikona );
  }
  
  .gsft-korzysci__ikona img {
    display: block;
    width: auto;
    height: 100%;
    max-width: calc( var( --gsft-korzysci-ikona ) * 2.5 );
  
    /* Logo typu "Klarna." jest szersze niż wysokie — contain zachowa
       proporcje i nie utnie go ani nie rozciągnie. */
    object-fit: contain;
    object-position: left center;
  }
  
  /* --------------------------------------------------------------------------
     Etykieta
     -------------------------------------------------------------------------- */
  
  .gsft-korzysci__tekst {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  .gsft-korzysci__tekst strong,
  .gsft-korzysci__tekst b {
    font-weight: 700;
  }
  
  /* --------------------------------------------------------------------------
     Plus / minus
     Dwie kreski 10x2; pionowa obraca się i gaśnie przy otwarciu — identycznie
     jak .plus-minus-icon w tabs.php, tylko bez klas Tailwinda, bo tych i tak
     nie ma w skompilowanym pliku dla naszego markupu.
     -------------------------------------------------------------------------- */
  
  .gsft-korzysci__znak {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
  }
  
  .gsft-korzysci__znak i {
    position: absolute;
    display: block;
    background: #252525;
  }
  
  .gsft-korzysci__znak-poziom {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY( -50% );
  }
  
  .gsft-korzysci__znak-pion {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX( -50% );
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  
  .gsft-korzysci__wiersz.is-otwarty .gsft-korzysci__znak-pion {
    transform: translateX( -50% ) rotate( 90deg );
    opacity: 0;
  }
  
  /* --------------------------------------------------------------------------
     Panel z opisem
  
     max-height 0 zamiast display: none, bo tylko wtedy da się to animować.
     Wartość otwartą (w pikselach) dokłada JS z szablonu; 1000px zostaje jako
     zabezpieczenie, gdyby skrypt nie wystartował — treść i tak będzie widoczna.
     -------------------------------------------------------------------------- */
  
  .gsft-korzysci__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
  }
  
  .gsft-korzysci__wiersz.is-otwarty .gsft-korzysci__panel {
    max-height: 1000px;
  }
  
  .gsft-korzysci__panel-tresc {
    /* Wcięcie równe kolumnie ikon plus gap — opis zaczyna się dokładnie
       pod etykietą, nie pod ikoną. */
    padding: 0 0 14px calc( var( --gsft-korzysci-kolumna ) + 12px );
  
    font-size: 12px;
    line-height: 1.55;
    color: rgba( 37, 37, 37, 0.7 );
  }
  
  .gsft-korzysci__panel-tresc p {
    margin: 0;
  }
  
  .gsft-korzysci__panel-tresc p + p {
    margin-top: 8px;
  }
  
  .gsft-korzysci__panel-tresc ul,
  .gsft-korzysci__panel-tresc ol {
    margin: 8px 0 0;
    padding-left: 1.1em;
    list-style: disc;
  }
  
  .gsft-korzysci__panel-tresc ol {
    list-style: decimal;
  }
  
  .gsft-korzysci__panel-tresc li {
    margin: 0 0 4px;
  }
  
  .gsft-korzysci__panel-tresc a {
    color: #252525;
    text-decoration: underline;
  }
  
  /* --------------------------------------------------------------------------
     Telefon
     Kolumna zostaje ta sama — jest już wąska. Wiersze schodzą tylko odrobinę
     bliżej siebie, bo miejsca w pionie jest mniej.
     -------------------------------------------------------------------------- */
  
  @media (max-width: 1023px) {
  
    .gsft-korzysci {
      --gsft-korzysci-odstep: 9px;
    }
  }
  
  /* Systemowe "ogranicz animacje" — panel otwiera się bez przejścia. */
  @media (prefers-reduced-motion: reduce) {
  
    .gsft-korzysci__panel,
    .gsft-korzysci__znak-pion {
      transition: none;
    }
  }
  
  

  /* ==========================================================================
   21. ILOŚĆ W KOSZYKU — plus / minus przy pozycji
   woocommerce/cart/mini-cart.php -> .gsft-ilosc

   Dopisz na końcu style.css, pod sekcją 20.

   Wiersz "1 x 120,00 €" zamienił się w sterownik: minus, liczba, plus,
   a za nimi kwota za całą pozycję (nie za sztukę — przy dwóch sztukach
   widać 240,00 €, tak jak w koszyku na kasie).

   Motyw stylizuje globalnie każdy <button> (białe tło, padding 12px, czarne
   tło na hover), a te przyciski mają 26 px — stąd !important przy paddingu,
   ramce i tle. Bez tego sterownik urósłby trzykrotnie i migał na czarno.
   ========================================================================== */

.gsft-ilosc {
	display: flex;
	align-items: center;
	gap: 6px;

	/* Rodzic ma kolor #733828/60; liczba i kwota mają być czytelne. */
	color: #252525;
}
/* @media screen and (min-width: 768px) {
  .gsft-ilosc {
    gap: 6px;
  }
} */

/* Kliknięcie już poszło, odpowiedź jeszcze nie wróciła. */
.gsft-ilosc.is-zajete {
	opacity: 0.55;
}

.gsft-ilosc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 26px;
	height: 26px;
	padding: 0 !important;

	border: 1px solid rgba( 37, 37, 37, 0.2 ) !important;
	border-radius: 0;
	background: #fff !important;

	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	color: #252525 !important;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.gsft-ilosc__btn:hover:not( :disabled ) {
	border-color: #252525 !important;
	background: #252525 !important;
	color: #fff !important;
}

.gsft-ilosc__btn:disabled {
	border-color: rgba( 37, 37, 37, 0.12 ) !important;
	background: #f3f3f3 !important;
	color: #b9b9b9 !important;
	cursor: not-allowed;
}

.gsft-ilosc__wartosc {
	min-width: 18px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;

	/* Cyfry o równej szerokości — 9 i 10 nie przesuwają plusa. */
	font-variant-numeric: tabular-nums;
}

.gsft-ilosc__cena {
	margin-left: 4px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: #252525;
}

.gsft-ilosc__cena del {
	margin-right: 6px;
	color: rgba( 37, 37, 37, 0.45 );
	text-decoration: line-through;
}

.gsft-ilosc__cena ins {
	background: transparent;
	text-decoration: none;
}

/* Wąski panel na telefonie — sterownik i kwota schodzą pod siebie, gdyby
   nazwa produktu wypchnęła je poza krawędź. */
@media (max-width: 400px) {

	.gsft-ilosc {
		gap: 8px;
	}

	.gsft-ilosc__cena {
		margin-left: 0;
	}
}

.gsft-product__summary .cvb-button:hover:not(.disabled), .mini-product .cvb-button:hover:not(.disabled){
  background: #252525;
  color:#fff;
}

/* ==========================================================================
   22. MODAL NEWSLETTEROWY NA STRONIE GŁÓWNEJ
   template-parts/sections/pages/modal_newsletter.php -> .gsft-modal

   ┌────────────────────────────────────────────────────────────────────────┐
   │ WYMIEŃ CAŁĄ SEKCJĘ 22 na tę. Pierwsza wersja miała panel 1080 px,      │
   │ czyli o 300 px za szeroki.                                             │
   └────────────────────────────────────────────────────────────────────────┘

   WYMIARY ZMIERZONE NA geschaft.gmbh
   Stara strona używa wtyczki Popup Builder (theme 3). Odczytane z DOM-u:

     nakładka ....... #000 przy 80% krycia
     panel .......... 780 x 476 px, białe tło, padding 28 px,
                      bez zaokrągleń, bez cienia
     wnętrze ........ 724 x 420 px, flex row, gap 28 px
     kolumna L ...... flex 0 0 50%  -> 362 px, zdjęcie cover, środek
     kolumna R ...... flex 0 0 45%  -> 325.8 px, padding-bottom 20 px
     "Close" ........ 28 px od góry i od prawej krawędzi panelu
     nagłówek ....... 12 px / 500 / lh 15.6 / #222
     treść .......... 13 px / 400 / lh 17.55 / ls -0.1 / #222
     pole ........... wys. 40 px, padding 12/8, ramka 1 px rgba(37,37,37,.2)
     przycisk ....... wys. 40 px, tło #111, biały, 13 px / 500
     zgoda .......... 12 px / 400 / #666, checkbox 12 x 12, odstęp 8 px
     pusto pod formularzem: 96 px (margin-bottom formularza)

   DWIE ŚWIADOME RÓŻNICE WOBEC ORYGINAŁU

   1. Nagłówek i "Close" stoją u mnie w jednym rzędzie, 28 px od góry.
      W oryginale nagłówek jest podciągnięty w górę marginesem -22.4 px
      (relikt budowania w Oxygenie) i jego środek wypada 7 px wyżej niż
      środek obrazka "Close". Na ekranie tego nie widać, bo obrazek ma
      wewnętrzny margines, ale odtwarzanie tego minusa nie miałoby sensu.

   2. Rząd "pole + przycisk" w oryginale WYSTAJE za swoją kolumnę
      (202.5 + 3.3 + 130.8 = 336.6 px przy 325.8 px szerokości). U mnie
      pole jest elastyczne, a przycisk ma stałe 131 px — rząd kończy się
      równo z tekstem powyżej. To jedyne miejsce, gdzie 1:1 oznaczałoby
      przepisanie błędu.
   ========================================================================== */

   .gsft-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
  
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .gsft-modal.is-widoczny {
    opacity: 1;
  }
  
  /* Nakładka jako osobna warstwa — klik w nią zamyka okno, a treść panelu
     nie musi zatrzymywać propagacji zdarzenia. */
  .gsft-modal__tlo {
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, 0.8 );
  }
  
  .gsft-modal__panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  
    display: flex;
    flex-direction: row;
    gap: 28px;
  
    width: 780px;
    max-width: 100%;
  
    /* min-height, nie height: przy dłuższym tekście panel urośnie, zamiast
       przycinać treść. Przy zawartości takiej jak na starej stronie wychodzi
       dokładnie 476 px. */
    min-height: 476px;
    max-height: calc( 100svh - 32px );
    overflow-y: auto;
    overscroll-behavior: contain;
  
    padding: 28px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
  
    transform: translateY( 8px );
    transition: transform 0.3s ease;
  
    /* Do końca przejścia panel nie łapie kliknięć — przypadkowy klik
       w momencie pojawienia się nie trafi od razu w "Close". */
    pointer-events: none;
  }
  
  .gsft-modal.is-widoczny .gsft-modal__panel {
    transform: translateY( 0 );
    pointer-events: auto;
  }
  
  /* --------------------------------------------------------------------------
     Zdjęcie — dokładnie połowa wnętrza, wysokość z panelu
     -------------------------------------------------------------------------- */
  
  .gsft-modal__media {
    position: relative;
    flex: 0 0 50%;
    overflow: hidden;
    background: #f7f7f7;
  }
  
  .gsft-modal__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* --------------------------------------------------------------------------
     Kolumna z treścią
     -------------------------------------------------------------------------- */
  
  .gsft-modal__tresc {
    display: flex;
    flex-direction: column;
    flex: 0 0 45%;
    min-width: 0;
  
    /* 8 px, które w oryginale zostają niewykorzystane po prawej (50% + 45%
       + 28 px gapu nie wypełnia 724 px), to nie pomyłka — dzięki temu
       przycisk nie dokleja się do krawędzi panelu. */
    padding-bottom: 20px;
  }
  
  /* Bez zdjęcia panel schodzi do jednej kolumny. */
  .gsft-modal__tresc--samotna {
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0 auto;
  }
  
  .gsft-modal__gora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }
  
  .gsft-modal__naglowek {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 15.6px;
    letter-spacing: -0.1px;
    color: #222222;
  }
  
  /* Przycisk udający link — motyw dałby mu białe tło i padding 12 px. */
  .gsft-modal__zamknij {
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 15.6px;
    color: #222222 !important;
    text-decoration: underline;
    cursor: pointer;
  }
  
  .gsft-modal__zamknij:hover {
    background: none !important;
    color: #222222 !important;
    opacity: 0.6;
  }
  
  /* Blok "treść + formularz" siedzi nisko, a pod nim zostaje 96 px pustego —
     auto u góry i stałe 96 px u dołu dają dokładnie ten sam rozkład, jaki ma
     stara strona (tam wychodzi to z justify-content: space-between plus
     margin-bottom formularza). */
  .gsft-modal__srodek {
    margin-top: auto;
    margin-bottom: 96px;
  }
  
  .gsft-modal__opis {
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 17.55px;
    letter-spacing: -0.1px;
    color: #222222;
  }
  
  .gsft-modal__opis p {
    margin: 0;
  }
  
  .gsft-modal__opis p + p {
    margin-top: 8px;
  }
  
  /* --------------------------------------------------------------------------
     Formularz (Contact Form 7)
  
     Markup CF7: <form> > <p> > <span class="wpcf7-form-control-wrap"> > input.
     Stąd selektory po <p> — nie da się tego zmienić bez grzebania
     w formularzu w panelu, a tam każda zmiana rusza też newsletter w stopce.
     -------------------------------------------------------------------------- */
  
  .gsft-modal__formularz .wpcf7-form > p {
    margin: 0;
  }
  
  /* Rząd: pole na mail + czarny przycisk. Klasę "modal-rzad" nadaje się
     w formularzu CF7 (patrz instrukcja) — bez niej pola staną pod sobą. */
  .gsft-modal__formularz .modal-rzad {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
  }
  
  .gsft-modal__formularz .wpcf7-form-control-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .gsft-modal__formularz input[type="email"],
  .gsft-modal__formularz input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 12px 8px !important;
  
    border: 1px solid rgba( 37, 37, 37, 0.2 ) !important;
    border-radius: 0;
    background: #fff !important;
  
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 15.6px;
    color: #000;
  }
  
  .gsft-modal__formularz input[type="email"]::placeholder,
  .gsft-modal__formularz input[type="text"]::placeholder {
    color: rgba( 0, 0, 0, 0.45 );
  }
  
  .gsft-modal__formularz input[type="email"]:focus,
  .gsft-modal__formularz input[type="text"]:focus {
    border-color: #252525 !important;
    outline: 0;
  }
  
  .gsft-modal__formularz input[type="submit"] {
    box-sizing: border-box;
    flex: 0 0 131px;
    height: 40px;
    padding: 12px 8px !important;
  
    border: 1px solid rgba( 37, 37, 37, 0.2 ) !important;
    border-radius: 0;
    background: #111111 !important;
  
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 15.6px;
    color: #fff !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .gsft-modal__formularz input[type="submit"]:hover {
    background: #111111 !important;
    color: #fff !important;
    opacity: 0.85;
  }
  
  /* --- Zgoda na politykę prywatności --- */
  
  .gsft-modal__formularz .wpcf7-acceptance {
    display: block;
  }
  
  .gsft-modal__formularz .wpcf7-list-item {
    margin: 0;
  }
  
  .gsft-modal__formularz .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
  
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: #666666;
    cursor: pointer;
  }
  
  .gsft-modal__formularz input[type="checkbox"] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
  
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #252525 !important;
    border-radius: 0;
    background: #fff !important;
  }
  
  .gsft-modal__formularz input[type="checkbox"]:checked {
    background: #252525 !important;
  }
  
  .gsft-modal__formularz a {
    color: #666666;
    text-decoration: underline;
  }
  
  /* --- Komunikaty CF7 --- */
  
  .gsft-modal__formularz .wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 8px 10px !important;
    border-width: 1px !important;
    font-size: 12px;
    line-height: 1.4;
  }
  
  .gsft-modal__formularz .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 12px;
    color: #d1372f;
  }
  
  .gsft-modal__formularz .wpcf7-spinner {
    display: none;
  }
  
  /* --------------------------------------------------------------------------
     Blokada przewijania strony pod otwartym oknem
     -------------------------------------------------------------------------- */
  
  body.gsft-modal-open {
    overflow: hidden;
  }
  
  /* --------------------------------------------------------------------------
     Telefon
     Panel 780 px nie wchodzi na ekran, więc jedna kolumna. Zdjęcie zostaje,
     ale jako pas 16:9 — pionowy kadr zjadłby cały ekran i formularz wylądował
     by pod zgięciem. Pustych 96 px pod formularzem też nie ma po co trzymać.
     -------------------------------------------------------------------------- */
  
  @media (max-width: 767px) {
  
    .gsft-modal {
      padding: 12px;
    }
  
    .gsft-modal__panel {
      flex-direction: column;
      gap: 20px;
      min-height: 0;
      max-height: calc( 100svh - 24px );
      padding: 20px;
    }
  
    .gsft-modal__media {
      flex: 0 0 auto;
      aspect-ratio: 16 / 9;
    }
  
    .gsft-modal__tresc,
    .gsft-modal__tresc--samotna {
      flex: 1 1 auto;
      max-width: none;
      margin: 0;
      padding-bottom: 0;
    }
  
    .gsft-modal__srodek {
      margin-top: 0;
      margin-bottom: 0;
    }
  
    .gsft-modal__formularz .modal-rzad {
      flex-wrap: wrap;
    }
  
    .gsft-modal__formularz input[type="submit"] {
      flex: 1 1 100%;
    }
  }
  
  /* Niskie okno na desktopie — pustka pod formularzem ustępuje pierwsza,
     żeby panel nie zaczął się przewijać. */
  @media (min-width: 768px) and (max-height: 620px) {
  
    .gsft-modal__panel {
      min-height: 0;
    }
  
    .gsft-modal__srodek {
      margin-bottom: 24px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .gsft-modal,
    .gsft-modal__panel {
      transition: none;
    }
  }
.sku_wrapper{
  display: none;
}  

/* ==========================================================================
   23. BELKA: PRZYKLEJENIE, CZARNY PASEK NA TELEFONIE, CHOWANIE PRZY SCROLLU
   template-parts/layout/header-content.php -> #masthead

   ┌────────────────────────────────────────────────────────────────────────┐
   │ WYMIEŃ CAŁĄ SEKCJĘ 23 na tę, jeśli wklejałeś już poprzednią wersję.    │
   │ Offset jest teraz rozbity na dwie zmienne — inaczej nie dałoby się go  │
   │ animować bez walki o specyficzność.                                    │
   └────────────────────────────────────────────────────────────────────────┘

   Wymaga zmian w header-content.php: klasy na czarnym pasku oraz skryptu
   na końcu pliku (przestawia jedną klasę, resztę robi ten CSS).

   ── PROBLEM 1: CZARNY PASEK NIE POKAZYWAŁ SIĘ NA TELEFONIE ──────────────
   W szablonie stało "hidden lg:flex", czyli display: none poniżej 1024 px.
   Nie efekt uboczny — pasek był tam wyłączony wprost. Teraz jest "flex",
   a tutaj decydujemy, co na telefonie widać: tekst ze środka zostaje,
   boczne kolumny się chowają (na 375 px trzy pola z ACF albo się zlepiają,
   albo rozpychają pasek na dwie linie).

   ── PROBLEM 2: STICKY NIE DZIAŁAŁO NA TELEFONIE ─────────────────────────
   Nagłówek ma klasę "-top-12", czyli top: -48 px — przykleja się 48 px NAD
   krawędzią okna. Założenie było takie, że tyle wyjedzie czarny pasek.
   Tylko że:
     desktop: nagłówek 67 px (24 pasek + 43 belka) - 48 = zostaje 19 px;
     telefon: pasek ukryty, nagłówek 43 px - 48 = nie zostaje NIC.
   Cały nagłówek wyjeżdżał poza ekran. Sticky działało bez zarzutu, tylko
   dostało bezsensowny offset. Na desktopie ratowała Cię reguła
   .admin-bar #masthead { top: -16px } i to, że jesteś zalogowany —
   wylogowany gość widział ten sam błąd, tylko mniej wyraźnie.

   ── JAK TO DZIAŁA TERAZ ─────────────────────────────────────────────────
   Offset składa się z dwóch zmiennych:

     --gsft-pasek-wp ...... ile miejsca zabiera pasek administratora
                            (0 dla gościa i na telefonie, 32 px na desktopie)
     --gsft-belka-gorna ... wysokość czarnego paska (0, gdy paska nie ma)

   Stan spoczynku: top = --gsft-pasek-wp, czyli przyklejony jest CAŁY
   nagłówek razem z czarnym paskiem.
   Po dodaniu klasy .gsft-pasek-schowany: top = pasek WP minus wysokość
   czarnego paska, czyli pasek wyjeżdża nad krawędź, a belka główna zostaje.
   Między tymi dwoma stanami przechodzi transition na top.

   Domyślna wysokość paska to ZERO, a 24 px dokłada się tylko wtedy, gdy ten
   pasek faktycznie jest w DOM-ie (:has). Dzięki temu żadna zmiana
   w szablonie nie może już wypchnąć belki za ekran — pasek i offset znikają
   razem.

   ── DLACZEGO ANIMUJEMY top, A NIE transform ANI height ──────────────────
   transform na nagłówku zrobiłby z niego blok zawierający dla wszystkiego,
   co ma position: fixed w środku — a w środku siedzi wysuwany koszyk
   i nakładka. Chowanie wysokością wymagałoby z kolei overflow: hidden na
   nagłówku, co przycięłoby rozwijane podmenu (sekcja 13). top jest dla
   sticky zwykłą wartością odniesienia: jego zmiana przesuwa przyklejony
   nagłówek i nic poza nim.
   ========================================================================== */

   #masthead {
    /* Ile zabiera pasek administratora WordPressa. Zero dla gościa. */
    --gsft-pasek-wp: 0px;
  
    /* Wysokość czarnego paska. Zero, dopóki nie okaże się, że pasek istnieje. */
    --gsft-belka-gorna: 0px;
  
    /* Podane jawnie, bo w szablonie stoją obok siebie klasy "sticky"
       i "relative". Która wygrywa, zależy od kolejności w skompilowanym
       Tailwindzie — a to nie jest rzecz, na której chcemy się opierać. */
    position: sticky;
  
    /* Nadpisuje -top-12 (id bije klasę, bez !important). */
    top: var( --gsft-pasek-wp );
  
    transition: top 0.3s ease;
  }
  
  /* Pasek jest w DOM-ie -> znamy jego wysokość. Jedyna liczba do ruszania:
     24 px = text-xs (12 px * 1.333 = 16) plus py-1 (4 + 4). */
  #masthead:has( .gsft-belka-gorna ) {
    --gsft-belka-gorna: 24px;
  }
  
  /* Przewijanie w dół — pasek wyjeżdża, belka główna zostaje przyklejona.
     Klasę przestawia skrypt z header-content.php.
     1 id + 1 klasa bije samo #masthead, a zmiennych nie rusza. */
  #masthead.gsft-pasek-schowany {
    top: calc( var( --gsft-pasek-wp ) - var( --gsft-belka-gorna ) );
  }
  
  /* --------------------------------------------------------------------------
     Pasek administratora WordPressa
  
     Skompilowany CSS ma .admin-bar #masthead { top: -16px } — wartość wzięta
     z niczego, do tego łapie też telefon. Poniżej 783 px #wpadminbar jest
     position: absolute i odjeżdża razem ze stroną, więc dla nagłówka nie
     istnieje. Powyżej jest fixed i ma 32 px, więc belka musi się zatrzymać
     pod nim.
  
     Ustawiamy tylko ZMIENNĄ, nie top — inaczej ten selektor (1 id + 2 klasy)
     wygrałby z regułą chowania paska i animacja przestałaby działać
     u zalogowanego.
     -------------------------------------------------------------------------- */
  
  @media screen and (min-width: 783px) {
  
    body.admin-bar #masthead {
      --gsft-pasek-wp: 32px;
    }
  }
  
  /* --------------------------------------------------------------------------
     Czarny pasek na telefonie
     -------------------------------------------------------------------------- */
  
  @media (max-width: 1023px) {
  
    .gsft-belka-gorna {
      /* space-between przy jednym widocznym polu zepchnęłoby tekst do lewej. */
      justify-content: center;
    }
  
    .gsft-belka-gorna__lewo,
    .gsft-belka-gorna__prawo {
      display: none;
    }
  
    .gsft-belka-gorna__srodek {
      margin: 0;
      text-align: center;
    }
  }
  
  /* --------------------------------------------------------------------------
     Pusty pasek na telefonie
  
     Gdy pole "tekst na środku" jest puste, na telefonie zostałaby sama czarna
     kreska 24 px — na desktopie widać jeszcze pola boczne, na telefonie już nie.
     Zwijamy ją ORAZ zerujemy zmienną, bo pasek i offset muszą znikać razem.
  
     :empty łapie tylko element CAŁKOWICIE pusty, więc spacja w polu ACF
     wyłączy tę regułę — i słusznie, bo wtedy ktoś chciał odstęp.
     -------------------------------------------------------------------------- */
  
  @media (max-width: 1023px) {
  
    #masthead:has( .gsft-belka-gorna__srodek:empty ) {
      --gsft-belka-gorna: 0px;
    }
  
    .gsft-belka-gorna:has( .gsft-belka-gorna__srodek:empty ) {
      display: none;
    }
  }
  
  /* Systemowe "ogranicz animacje" — pasek przeskakuje, zamiast wjeżdżać. */
  @media (prefers-reduced-motion: reduce) {
  
    #masthead {
      transition: none;
    }
  }
#gsft-korzysc-wiersz-1-5 .gsft-korzysci__tekst{
  margin-left: 2rem;
}  

/* ==========================================================================
   24. SZYBKI WYBÓR ROZMIARU NA KARCIE PRODUKTU
   woocommerce/content-product.php -> .gsft-szybki__plus / .gsft-szybki__panel

   Dopisz na końcu style.css, pod sekcją 23.
   Wymaga zmian w content-product.php i snippetu w functions.php.

   NAJWAŻNIEJSZA RZECZ W CAŁEJ TEJ SEKCJI: Z-INDEX
   Karta produktu jest w całości klikalna — robi to reguła z sekcji 2:

       .product-card__title a::after { position: absolute; inset: 0; z-index: 10 }

   Ta niewidzialna warstwa leży NAD zdjęciem. Plusik postawiony bez z-index
   wylądowałby pod nią i każde kliknięcie prowadziłoby na stronę produktu,
   zamiast otwierać pasek — przycisk wyglądałby na zepsuty, choć byłby cały
   i zdrowy. Stąd 20 na plusiku i na panelu.

   Działa to dlatego, że .product-card__image ma position: relative, ale nie
   ma własnego z-index, więc nie zakłada nowego kontekstu układania i jego
   dzieci konkurują z tym ::after w tym samym kontekście. Gdybyś kiedyś dodał
   zdjęciu z-index albo transform, plusik trzeba by przenieść wyżej w drzewie.

   PASEK WYSUWA SIĘ ZZA DOLNEJ KRAWĘDZI ZDJĘCIA
   .product-card__image ma overflow: hidden (sekcja 2), więc panel przesunięty
   o 100% w dół jest niewidoczny bez żadnego display: none — i może wjechać
   płynnie. To ten sam mechanizm co przy strzałkach galerii.

   PASEK IDZIE NA CAŁĄ SZEROKOŚĆ ZDJĘCIA
   Wcześniej panel miał z prawej 54 px pustego marginesu zarezerwowanego pod
   plusik — i to jedyny powód, dla którego rozmiary nie sięgały krawędzi.
   Teraz padding jest symetryczny, a przyciski rozmiarów rozpychają się na
   całą szerokość (flex: 1).

   Plusik zostaje tam, gdzie był: prawy dolny róg, bez ruchu i bez obrotu.
   Pasek po prostu na niego wjeżdża, więc na czas otwarcia plusik gaśnie
   (opacity 0) — inaczej prześwitywałby zza półprzezroczystego tła panelu.
   Pasek zamyka Esc, kliknięcie obok karty albo wybór rozmiaru.

   PLUS JEST RYSOWANY, NIE PISANY
   Znak "+" z fontu siedzi w CabinetGrotesk odrobinę nad linią bazową i nigdy
   nie stoi dokładnie w środku kółka — stąd wcześniejszy ręczny margin-top:-1px,
   który poprawiał to na oko i rozjeżdżał się przy innym rozmiarze przycisku.
   Teraz plus to dwie kreski z pseudoelementów: znacznik 12 px, kreska 2 px,
   kółko 34 px (mobile 30 px) — same liczby parzyste, więc kreski lądują na
   pełnym pikselu przy każdym DPR i środek jest geometryczny, nie szacowany.
   ========================================================================== */

   .product-card {
    --gsft-szybki-plus: 34px;      /* średnica kółka */
    --gsft-szybki-znak: 12px;      /* długość kresek plusa */
    --gsft-szybki-kreska: 2px;     /* grubość kresek plusa */
    --gsft-szybki-pasek: 44px;     /* wysokość paska z rozmiarami */
    --gsft-szybki-margines: 10px;  /* odsunięcie plusika od krawędzi zdjęcia */
    --gsft-szybki-litera: 2px;     /* zejście litery rozmiaru w dół, patrz niżej */
  }
  
  /* --------------------------------------------------------------------------
     Plusik
     -------------------------------------------------------------------------- */
  
  .gsft-szybki__plus {
    position: absolute;
    right: var( --gsft-szybki-margines );
    bottom: var( --gsft-szybki-margines );
    z-index: 20;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: var( --gsft-szybki-plus );
    height: var( --gsft-szybki-plus );
  
    /* Motyw stylizuje globalnie każdy <button> (padding 12px, czarne tło
       na hover) — bez !important przycisk urósłby do ~58 px. */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    background: rgba( 255, 255, 255, 0.92 ) !important;
  
    /* Zero, bo znak rysują pseudoelementy. Gdyby w szablonie został jeszcze
       stary, wpisany z palca "+", to go tu gasi zamiast dublować kreski. */
    font-size: 0;
    line-height: 1;
    color: #252525 !important;
    cursor: pointer;
  
    box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.18 );
    transition: background 0.2s ease, transform 0.25s ease, opacity 0.2s ease;
  }
  
  .gsft-szybki__plus:hover {
    background: #fff !important;
    color: #252525 !important;
  }
  
  /* Dwie kreski zamiast glifu — patrz nagłówek sekcji. */
  .gsft-szybki__plus span {
    position: relative;
    display: block;
    width: var( --gsft-szybki-znak );
    height: var( --gsft-szybki-znak );
  }
  
  .gsft-szybki__plus span::before,
  .gsft-szybki__plus span::after {
    content: "";
    position: absolute;
    background: currentColor;
  }
  
  /* Pozioma: (12 - 2) / 2 = 5 px od góry znacznika. */
  .gsft-szybki__plus span::before {
    top: calc( ( var( --gsft-szybki-znak ) - var( --gsft-szybki-kreska ) ) / 2 );
    left: 0;
    width: var( --gsft-szybki-znak );
    height: var( --gsft-szybki-kreska );
  }
  
  .gsft-szybki__plus span::after {
    top: 0;
    left: calc( ( var( --gsft-szybki-znak ) - var( --gsft-szybki-kreska ) ) / 2 );
    width: var( --gsft-szybki-kreska );
    height: var( --gsft-szybki-znak );
  }
  
  /* Otwarty pasek wjeżdża plusikowi na miejsce — plusik znika pod nim. */
  .product-card.is-otwarty .gsft-szybki__plus {
    opacity: 0;
    pointer-events: none;
  }
  
  .gsft-szybki__plus.is-zajete {
    opacity: 0.5;
  }
  
  /* --------------------------------------------------------------------------
     Pasek z rozmiarami
     -------------------------------------------------------------------------- */
  
  .gsft-szybki__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    min-height: var( --gsft-szybki-pasek );
    padding: 8px;
  
    background: rgba( 255, 255, 255, 0.94 );
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur( 8px );
  
    transform: translateY( 100% );
    transition: transform 0.25s ease;
  }
  
  .product-card.is-otwarty .gsft-szybki__panel {
    transform: translateY( 0 );
  }
  
  /* Trzy kropki na czas dociągania rozmiarów. */
  .gsft-szybki__panel.is-laduje::after {
    content: "···";
    font-size: 16px;
    letter-spacing: 2px;
    color: rgba( 37, 37, 37, 0.5 );
  }
  
  /* Jeden rząd, bez zawijania. Zawijanie zmieniałoby wysokość paska, a od niej
     zależy, o ile podnosi się plusik — pasek w dwóch rzędach wjechałby mu pod
     spód. Przyciski wolą się ścisnąć niż przenieść do drugiej linii. */
  .gsft-szybki__rozmiary {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
  
    min-width: 0;
  }
  
  /* Litery rozmiarów wersalikami: w CabinetGrotesk wersalik nie sięga ani
     ascendera, ani linii descendera, więc przeglądarka centruje CAŁĄ kratkę
     fontu razem z zapasem na "j" i "ą" — a oko widzi tylko literę i czyta ją
     jako podniesioną. Stąd asymetryczny padding: górny o --gsft-szybki-litera
     większy od dolnego, czyli litera schodzi w dół o połowę tej wartości
     (1 px paddingu = 0,5 px zejścia). Wysokość przycisku się nie zmienia,
     bo box-sizing: border-box. Chcesz mocniej — podbij zmienną na 2px.
  
     Wyrównanie jest tu na flexie, nie na domyślnym centrowaniu <button>:
     to ostatnie różni się o pół piksela między Safari a resztą, a przy
     kratce 26 px pół piksela widać. */
  .gsft-szybki__rozmiar {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    padding: var( --gsft-szybki-litera ) 2px 0 !important;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    border: 1px solid rgba( 37, 37, 37, 0.2 ) !important;
    border-radius: 0;
    background: #fff !important;
  
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: #252525 !important;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  
  .gsft-szybki__rozmiar:hover:not( [disabled] ) {
    border-color: #252525 !important;
    background: #252525 !important;
    color: #fff !important;
  }
  
  /* Rozmiar niedostępny — widoczny, ale wyraźnie martwy. Ukrywanie go zostawia
     klienta z pytaniem, czy tego rozmiaru nie ma, czy nigdy nie było. */
  .gsft-szybki__rozmiar.is-brak,
  .gsft-szybki__rozmiar[disabled] {
    border-color: rgba( 37, 37, 37, 0.12 ) !important;
    background: #f3f3f3 !important;
    color: #b9b9b9 !important;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  
  .gsft-szybki__rozmiar.is-zajete {
    opacity: 0.5;
  }
  
  /* --------------------------------------------------------------------------
     Telefon
     Kółko mniejsze, pasek niższy, litery odrobinę mniejsze — przy dwóch
     kartach w rzędzie na 375 px sześć rozmiarów ma po ~26 px na przycisk.
     -------------------------------------------------------------------------- */
  
  @media (max-width: 767px) {
  
    .product-card {
      --gsft-szybki-plus: 30px;
      --gsft-szybki-pasek: 38px;
      --gsft-szybki-margines: 8px;
    }
  
    .gsft-szybki__panel {
      padding: 6px;
    }
  
    .gsft-szybki__rozmiary {
      gap: 3px;
    }
  
    .gsft-szybki__rozmiar {
      height: 26px;
      padding: var( --gsft-szybki-litera ) 1px 0 !important;
      font-size: 11px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .gsft-szybki__plus,
    .gsft-szybki__panel {
      transition: none;
    }
  }
  
  /* ==========================================================================
   25. GALERIA — SLIDE PRZY ZMIANIE ZDJĘCIA
       + TELEFON: ZDJĘCIE PRODUKTU BEZ BIAŁYCH MARGINESÓW I ROZMIARY W JEDNYM RZĘDZIE

   Dopisz na końcu style.css, pod sekcją 24.
   Musi stać PO sekcji 18, bo cofa jej szerokość kolumny ze zdjęciem.

   Wymaga nowej wersji woocommerce/single-product/product-image.php —
   klasę .gsft-gallery__warstwa i drugą warstwę dokłada skrypt galerii.
   Sam CSS bez tamtego pliku nic nie psuje, ale też nic nie robi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25a. SLIDE — WSZYSTKIE ROZDZIELCZOŚCI

   Zdjęcia jeżdżą na dwóch warstwach ustawionych jedna na drugiej: stara
   wyjeżdża w bok, nowa wjeżdża z przeciwnej strony. Kierunek podaje skrypt,
   bo tylko on wie, czy klient poszedł w przód, czy w tył — bez tego pętla
   z ostatniego zdjęcia na pierwsze jechałaby w złą stronę.

   Kadr ma overflow: hidden (sekcja 4), więc warstwa czekająca poza nim jest
   po prostu niewidoczna — nie trzeba jej gasić ani chować display: none,
   co i tak zabiłoby animację.

   Krzywa cubic-bezier(.22,.61,.36,1) to ease-out: ruch startuje szybko
   i wyhamowuje. Liniowe przejście przy zdjęciu tej wielkości wygląda jak
   przewijanie taśmy, nie jak przerzucenie kartki.
   -------------------------------------------------------------------------- */

.gsft-gallery__main .gsft-gallery__warstwa {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Tylko transform i tylko na warstwach — nie ruszamy opacity z sekcji 4,
	   bo z niej korzysta jeszcze lightbox. */
	transition: transform 0.4s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {

	.gsft-gallery__main .gsft-gallery__warstwa {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   25b. TELEFON — ZDJĘCIE OD KRAWĘDZI DO KRAWĘDZI

   Sekcja 18 daje całemu układowi padding 24px 16px 0. Zdjęcie ma z niego
   wyjść, reszta kolumny zostaje na swoim miejscu — dlatego nie ruszamy
   paddingu rodzica, tylko oddajemy go z powrotem ujemnym marginesem na
   samej kolumnie ze zdjęciem.

   width: auto + align-self: stretch, a nie width: 100%: przy 100% szerokość
   liczyłaby się od wnętrza rodzica i ujemne marginesy wypchnęłyby zdjęcie
   poza prawą krawędź ekranu, robiąc poziomy pasek przewijania.

   Sprawdzone na żywym drzewie: nad .gsft-product__layout nie ma ani jednego
   rodzica z własnym paddingiem, więc te 16px to naprawdę cała droga do
   krawędzi ekranu. Gdyby kiedyś doszedł tam padding, trzeba go dodać tutaj.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	.gsft-product__media {
		align-self: stretch;
		width: auto;
		margin: -24px -16px 0;
	}

	/* Mini sekcja na stronie głównej zostaje z marginesami — dlatego selektor
	   jest zawężony do .gsft-product__media i nie łapie .mini-product. */


	/* ----------------------------------------------------------------------
	   25c. TELEFON — ROZMIARY W JEDNYM RZĘDZIE

	   Przy 375px szerokości ekranu kolumna ma 343px do dyspozycji.
	   Sześć przycisków po 71px z odstępami 8px to 466px, pięć to 387px —
	   w obu przypadkach za dużo, więc ostatni rozmiar spadał do drugiego
	   rzędu i wyglądał jak coś osobnego.

	   Zamiast dobierać nową stałą szerokość (która rozjedzie się przy innej
	   liczbie rozmiarów), przyciski dostają flex: 1 i dzielą rząd po równo:
	   pięć rozmiarów po ~64px, sześć po ~52px. Wysokość 41px zostaje, więc
	   względem desktopu zmienia się tylko szerokość.

	   flex-wrap: nowrap jest tu świadome — przy dziesięciu rozmiarach zrobiłby
	   się rząd nieczytelnych pasków. Tyle że produkt z dziesięcioma rozmiarami
	   to sytuacja, której w tym sklepie nie ma, a wybór między "wszystko widać
	   od razu" a "jeden rozmiar wisi samotnie niżej" wygrywa to pierwsze.
	   ---------------------------------------------------------------------- */

	.gsft-product__summary .cvb-buttons {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.gsft-product__summary .cvb-button {
		flex: 1 1 0;
		min-width: 0;
		padding: 12px 4px;
		font-size: 12px;
	}
}

/* ==========================================================================
   26. GALERIA — STOPKA KADRU I IKONA POWIĘKSZENIA
       .gsft-gallery__stopka (licznik + informacja o modelu) i .gsft-gallery__zoom

   Dopisz na końcu style.css, pod sekcją 25. Nic z sekcji 4 ani 25 nie trzeba
   ruszać — te reguły tylko je nadpisują.

   Wymaga nowej wersji product-image.php: licznik przenosi się do wspólnego
   rzędu, a lupka dostaje w środku <svg> zamiast emotki.
   ========================================================================== */

/* --------------------------------------------------------------------------
   26a. Rząd plakietek przy dolnej krawędzi

   Licznik był pozycjonowany absolutnie sam z siebie (sekcja 4). Teraz
   pozycjonowany jest RZĄD, a plakietki w środku są zwykłymi elementami flex.
   Inaczej odsunięcie drugiej plakietki trzeba by przeliczać ręcznie przy
   każdej zmianie długości tekstu o modelu.
   -------------------------------------------------------------------------- */

   .gsft-gallery__stopka {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 5;
  
    display: flex;
    align-items: center;
    gap: 8px;
  
    /* Przy długim opisie modelu rząd ma się zawinąć, a nie wyjechać pod
       przycisk powiększenia w prawym rogu. */
    flex-wrap: wrap;
    max-width: calc( 100% - 32px );
  }
  
  .gsft-gallery__stopka .gsft-gallery__counter {
    position: static;
    bottom: auto;
    left: auto;
  }
  
  /* Plakietka z informacją o modelu — ten sam kształt co licznik. */
  .gsft-gallery__model {
    padding: 4px 8px;
    background: rgba( 255, 255, 255, 0.9 );
  
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.1px;
    color: #252525;
  }
  
  @media (max-width: 1023px) {
  
    .gsft-gallery__stopka {
      bottom: 12px;
      left: 12px;
      gap: 6px;
      max-width: calc( 100% - 24px );
    }
  
    .gsft-gallery__model {
      font-size: 11px;
    }
  }
  
  
  /* --------------------------------------------------------------------------
     26b. Ikona powiększenia — strzałki w rogi zamiast lupki
  
     Sekcja 4 rysuje lupkę dwoma pseudoelementami (kółko + rączka) i chowa
     zawartość przyciskiem font-size: 0 oraz text-indent: -9999px. Nowa ikona
     to <svg> w środku, więc:
  
       - oba pseudoelementy trzeba wygasić, bo inaczej kółko lupki zostanie
         narysowane POD strzałkami,
       - text-indent musi wrócić do zera; przy display: flex nie dotyczyłby
         już svg jako elementu flex, ale zostawianie -9999px w kodzie to
         pułapka na przyszłość, gdyby ktoś zmienił display,
       - box-sizing zostaje content-box, więc 36 px to dalej wymiar WNĘTRZA,
         a ramka dokłada 2 px do 38 px — tak jak było.
     -------------------------------------------------------------------------- */
  
  .gsft-gallery__zoom::before,
  .gsft-gallery__zoom::after {
    content: none;
  }
  
  .gsft-gallery__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    cursor: zoom-in;
  }
  
  /**
   * Kolor podany przy każdym stanie z osobna.
   *
   * Motyw stylizuje globalnie każdy <button> i na hoverze ustawia biały tekst.
   * Reguła button:hover ma wyższą specyficzność (element + pseudoklasa) niż
   * sama klasa, więc wygrywała: strzałki rysowane przez currentColor robiły się
   * białe na białym tle i ikona po prostu znikała pod kursorem.
   *
   * Stąd !important i wypisane wszystkie trzy stany — tło też, bo w przeciwnym
   * razie na :active motyw podmieniłby je na czarne.
   */
  .gsft-gallery__zoom,
  .gsft-gallery__zoom:hover,
  .gsft-gallery__zoom:focus,
  .gsft-gallery__zoom:active {
    background: #fff !important;
    color: #252525 !important;
  }
  
  .gsft-gallery__zoom svg {
    width: 15px;
    height: 15px;
    stroke: #252525;
  }
  
  /* Kadr sam z siebie nie otwiera już podglądu — robi to wyłącznie przycisk,
     więc łapka „powiększ" nad całym zdjęciem obiecywałaby coś, czego nie ma. */
  .gsft-gallery__main {
    cursor: default;
  }
  
  
  /* --------------------------------------------------------------------------
     OPCJONALNIE — przycisk powiększenia w prawym DOLNYM rogu, jak na Represent
  
     U Ciebie siedzi w prawym górnym, tak jak na geschaft.gmbh. Jeśli ma stanąć
     w jednej linii z plakietkami, odkomentuj:
  
     .gsft-gallery__zoom {
         top: auto;
         bottom: 13px;
     }
     -------------------------------------------------------------------------- */
  
.gsft-gallery__nav{
  background-color: transparent !important;
}
.gsft-gallery__nav:hover{
  color:#000 !important;
}


/* ==========================================================================
   27. MENU MOBILNE — LOGO I POGRUBIONE POZYCJE GŁÓWNE
   header-content.php -> #mobile-menu-sidebar

   Dopisz na końcu style.css, pod sekcją 26.
   Wymaga zmiany w header-content.php i pliku assets/images/logo-ciemne.svg.
   ========================================================================== */

/* Logo w nagłówku szuflady — ten sam rozmiar co w belce (135 x 16). */
#mobile-menu-sidebar .gsft-menu__logo {
	display: block;
	width: auto;
	height: 16px;
}

/* --------------------------------------------------------------------------
   Pozycje główne na bold, podpozycje bez zmian.

   Waga schodziła do 400 z reguły #mobile-menu-sidebar a (jedno id + element).
   Selektor poniżej ma id i dwa elementy, więc wygrywa bez !important.

   Zapis "> li > a" łapie wyłącznie pierwszy poziom: Shop, FAQ, Get in Touch,
   About us, Why Geschäft. Linki z rozwiniętej listy kategorii siedzą w <ul>
   głębiej, więc zostają takie, jakie są — i o to chodzi, bo pogrubienie
   wszystkiego zabrałoby całą różnicę między poziomami.
   -------------------------------------------------------------------------- */

#mobile-primary-menu > li > a {
	font-weight: 700;
}


/* ==========================================================================
   27. MENU MOBILNE — LOGO I POGRUBIONE POZYCJE GŁÓWNE
   header-content.php -> #mobile-menu-sidebar

   Dopisz na końcu style.css, pod sekcją 26.
   Wymaga zmiany w header-content.php i pliku assets/images/logo-ciemne.svg.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Szuflada zaczyna się POD paskiem administratora

   Szuflada jest przyklejona do top: 0, a pasek WordPressa też — i jest nad nią.
   Efekt widzi wyłącznie osoba zalogowana: pierwsze 46 px szuflady, czyli cały
   wiersz z logo i krzyżykiem, chowa się pod paskiem. Zmierzone: logo ma górną
   krawędź na 28 px, pasek kończy się na 46 px, więc znika w całości.

   Wylogowany klient widział je przez cały czas — dlatego to nie jest usterka
   samego logo, tylko szuflady, i dotyczy tak samo panelu z filtrami.

   Pasek ma 46 px na telefonie i 32 px od 783 px w górę. Te same liczby
   siedzą już w sekcji 23 przy nagłówku.
   -------------------------------------------------------------------------- */

   body.admin-bar #mobile-menu-sidebar,
   body.admin-bar #mobile-filters-sidebar {
     top: 46px;
     height: calc( 100% - 46px );
   }
   
   @media screen and (min-width: 783px) {
   
     body.admin-bar #mobile-menu-sidebar,
     body.admin-bar #mobile-filters-sidebar {
       top: 32px;
       height: calc( 100% - 32px );
     }
   }
   
   /* Logo w nagłówku szuflady — ten sam rozmiar co w belce (135 x 16). */
   #mobile-menu-sidebar .gsft-menu__logo {
     display: block;
     width: auto;
     height: 16px;
   }
   
   /* --------------------------------------------------------------------------
      Pozycje główne na bold, podpozycje bez zmian.
   
      Waga schodziła do 400 z reguły #mobile-menu-sidebar a (jedno id + element).
      Selektor poniżej ma id i dwa elementy, więc wygrywa bez !important.
   
      Zapis "> li > a" łapie wyłącznie pierwszy poziom: Shop, FAQ, Get in Touch,
      About us, Why Geschäft. Linki z rozwiniętej listy kategorii siedzą w <ul>
      głębiej, więc zostają takie, jakie są — i o to chodzi, bo pogrubienie
      wszystkiego zabrałoby całą różnicę między poziomami.
      -------------------------------------------------------------------------- */
   
   #mobile-primary-menu > li > a {
     font-weight: 700;
   }
   

   /* ==========================================================================
   28. STRONA PRODUKTU — GÓRNA GRANICA WYSOKOŚCI ZDJĘCIA
   Nadpisuje wysokość ustawioną w sekcji 17. Dopisz na końcu style.css.

   PROBLEM
   Sekcja 17 daje zdjęciu wysokość równą ekranowi minus belka, a szerokość
   bierze się z kolumny — czyli 720 px, bo wrap ma najwyżej 1440 px i to się
   nie zmienia niezależnie od monitora. Proporcja jest więc pochodną wysokości
   okna, a nie decyzją:

     laptop 1512 x 945 ....... 720 x 878, czyli 0,82 — prawie dokładnie 4/5
     monitor 1920 x 1080 ..... 720 x 1013, czyli 0,71 — wyraźnie za wąskie
     monitor 2560 x 1440 ..... 720 x 1373, czyli 0,52 — pasek, nie zdjęcie

   Im wyższy ekran, tym węższy wydaje się kadr, mimo że nikt niczego nie
   zmieniał.

   ROZWIĄZANIE
   Odwracam zależność: proporcja jest stała (4/5, tak jak na geschaft.gmbh),
   a wysokość ekranu robi się GÓRNYM OGRANICZENIEM zamiast wartością.

   Dzięki temu nie ma tu żadnego progu w rodzaju "od 24 cali", który i tak
   nie umiałby odróżnić monitora od okna otwartego na pół ekranu. Reguła
   pilnuje jednej rzeczy: kadr nigdy nie jest węższy niż 4/5 ani wyższy niż
   ekran, a to, który z tych dwóch warunków akurat rządzi, wychodzi samo:

     laptop 945 px wysokości .. 4/5 dałoby 900 px, ekran pozwala na 878
                                -> rządzi ekran, wychodzi 878, czyli DOKŁADNIE
                                   to samo co dziś, zero zmiany
     monitor 1080 px .......... ekran pozwala na 1013, 4/5 daje 900
                                -> rządzi proporcja, zdjęcie staje na 900
     monitor 1440 px .......... tym bardziej rządzi proporcja, dalej 900

   CENA
   Na wysokim monitorze pod zdjęciem zostaje biel — tyle, ile zostało po
   zatrzymaniu. Inaczej się nie da: nie ma jak mieć jednocześnie stałej
   proporcji i zera bieli pod kadrem, bo o jednym decyduje szerokość kolumny,
   a o drugim wysokość okna. Kolumna z opisem jest i tak dłuższa, więc ta
   biel jest po prostu dalszym ciągiem strony, nie dziurą.

   Zdjęcia źródłowe są 2:3, więc przy 4/5 kadr przycina górę i dół mocniej
   niż dotąd — i o to chodzi, bo to właśnie przycięcie robi je szerszymi.
   ========================================================================== */

@media ( min-width: 1024px ) {

	.gsft-product__media .gsft-gallery__main {
		/* Zmieniasz kształt kadru tutaj i nigdzie indziej.
		   Mniejszy iloraz = węższe zdjęcie: 3/4 to 0,75, 2/3 to 0,67. */
		aspect-ratio: 4 / 5;

		/* height z sekcji 17 musi zejść, inaczej wygra nad proporcją. */
		height: auto;

		/* --gsft-nad-zgieciem ustawia sekcja 17 na .gsft-product__layout
		   i uwzględnia już pasek administratora. Zmienne dziedziczą się
		   w dół, więc tutaj wystarczy ją przywołać. */
		max-height: var( --gsft-nad-zgieciem );
	}
}

/* ==========================================================================
   29. BARDZO DUŻY EKRAN — ZDJĘCIE SIĘGA KOŃCA KOLUMNY Z OPISEM
   Nadpisuje sekcję 28 wyłącznie na 4K i większych. Dopisz na końcu style.css,
   MUSI stać po sekcji 28.

   SKĄD SIĘ BIERZE BIAŁA DZIURA
   Szerokość kolumny ze zdjęciem nie rośnie z ekranem — wrap ma najwyżej
   1440 px, więc kolumna to zawsze 720 px, na laptopie i na 4K tak samo.
   Sekcja 28 wiąże wysokość z tą szerokością (4/5, czyli 900 px), a kolumna
   z opisem ma na typowym produkcie około 1240 px. Na niskim ekranie tego nie
   widać, bo tam zdjęcie i tak przycina wysokość okna. Na 4K nie przycina nic
   i zostaje jakieś 340 px bieli obok ogona opisu.

   CO ROBI TA SEKCJA
   Na bardzo dużym ekranie wysokość zdjęcia przestaje wynikać z proporcji,
   a zaczyna z sąsiada: kolumna ze zdjęciem rozciąga się na całą wysokość
   wiersza, czyli dokładnie tyle, ile ma kolumna z opisem. Dolne krawędzie
   obu kolumn schodzą się co do piksela i zdjęcie kończy się tam, gdzie
   zaczyna się slider z opiniami.

   O PROGU
   min-width: 2000px ORAZ min-height: 1500px — oba warunki naraz, bo osobno
   żaden nie wystarcza:

     laptop 1512 x 945 ......... za wąski i za niski  -> sekcja 28, bez zmian
     monitor 1920 x 1080 ....... za wąski             -> sekcja 28, bez zmian
     monitor 2560 x 1440 ....... szeroki, ale okno ma
                                 ~1300 px wysokości   -> sekcja 28, bez zmian
     4K 3840 x 2160 ............ oba spełnione        -> ta sekcja

   Sama szerokość odpaliłaby to na 27-calowym 1440p, gdzie zdjęcie ma być
   po staremu. Sama wysokość odpaliłaby na monitorze obróconym do pionu.

   Jeśli próg okaże się nietrafiony, zmieniasz dwie liczby w jednej linijce
   niżej i nic poza tym.

   CENA
   Przy 720 x 1240 kadr ma proporcję 0,58, czyli jest węższy niż 4/5. Na 4K
   te 1240 px to nadal mniej niż wysokość okna, więc zdjęcie mieści się na
   ekranie i nie czyta się jako pasek — inaczej niż przy starym rozciąganiu
   na 100% wysokości, które na 1440p dawało 1373 px i wychodziło POD kolumnę
   z opisem. Zdjęcia są 2:3, więc przy 0,58 kadr przycina lekko boki zamiast
   góry i dołu.
   ========================================================================== */

   @media ( min-width: 2000px ) and ( min-height: 1500px ) {

    /* Wiersz ma align-items: flex-start (sekcja 5), więc kolumny są wysokie
       na tyle, ile mają treści. Tu i tylko tu zdjęcie ma dorównać sąsiadowi. */
    .gsft-product__media {
      align-self: stretch;
    }
  
    .gsft-product__media .gsft-gallery {
      height: 100%;
    }
  
    .gsft-product__media .gsft-gallery__main {
      /* Wszystkie trzy naraz: proporcja i limit z sekcji 28 muszą zejść,
         inaczej wygrałyby z wysokością. */
      aspect-ratio: auto;
      height: 100%;
      max-height: none;
    }
  }
  .noUi-connect{
    background-color: #247e60;
  }

  /* ==========================================================================
   30. PRZEŁĄCZNIK JĘZYKÓW
   header-content.php -> do_action( 'gsft_jezyki' ) -> .gsft-jezyk

   Dopisz na końcu style.css. Wymaga snippetu functions-snippet-jezyki.txt.

   UKŁAD W BELCE ZAŁATWIA SEKCJA 16, NIE TA
   Przełącznik siedzi w tym samym .gsftwal-slot co waluty, a ten jest
   pozycjonowany absolutnie PRAWĄ krawędzią. Dokładanie zawartości rozpycha
   go w lewo i waluty zostają na swoim miejscu — dlatego tutaj nie ma ani
   jednej reguły od pozycji. Odstęp między językiem a walutą robi gap-6
   z klasy na slocie.

   WYGLĄD JEST PRZEPISANY Z PODMENU NAWIGACJI
   Zdjęty ze strony na żywo, żeby oba rozwijane panele wyglądały identycznie:

       tło ........... rgba( 37, 37, 37, 0.6 ) + backdrop-filter: blur( 40px )
       tekst ......... #fff
       pozycja ....... padding 12px 16px, 13px / 500 / lh 14.4px / ls -0.1px
       odstęp ........ 12px pod przyciskiem
       przejście ..... visibility, opacity 0.3s

   Kolory biorę przez var() z Twoich zmiennych --gsft-submenu-*, z wartościami
   zapasowymi na wypadek, gdyby ich nie było. Zmienne masz zdefiniowane na
   #site-navigation, a przełącznik języków siedzi w .header-actions, czyli
   w innej gałęzi drzewa — dziedziczenie tam nie dojdzie i zadziałają wartości
   zapasowe. Jeśli chcesz, żeby oba panele zmieniały się jedną edycją,
   przenieś blok z definicjami zmiennych z #site-navigation do :root.
   ========================================================================== */

.gsft-jezyk {
	position: relative;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Przycisk w belce
   -------------------------------------------------------------------------- */

.gsft-jezyk__przycisk {
	display: flex;
	align-items: center;
	gap: 6px;

	/* Motyw stylizuje globalnie każdy <button> — bez tego urósłby o padding
	   12px i dostał czarne tło na hover. */
	padding: 0 !important;
	border: 0 !important;
	background: none !important;

	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: 1;
	color: inherit !important;
	white-space: nowrap;
	cursor: pointer;
}

.gsft-jezyk__strzalka {
	display: block;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

/* Strzałka obraca się także przy najechaniu, nie tylko po kliknięciu —
   inaczej przy otwartym panelu wskazywałaby w dół. */
.gsft-jezyk:hover .gsft-jezyk__strzalka,
.gsft-jezyk:focus-within .gsft-jezyk__strzalka,
.gsft-jezyk__przycisk[aria-expanded="true"] .gsft-jezyk__strzalka {
	margin-top: 1px;
	transform: rotate( -135deg );
}

/* --------------------------------------------------------------------------
   Rozwijana lista

   Otwiera ją CSS, nie JavaScript: :hover dla myszy, :focus-within dla
   klawiatury, aria-expanded dla dotyku i kliknięcia. Skrypt przestawia
   wyłącznie ten ostatni atrybut.

   Ukrywamy przez visibility + opacity, a NIE display: none. Trzy powody:
   z display nie da się zrobić przejścia, element bez display nie odpowiada
   na :hover w trakcie wygaszania, a czytnik ekranu i tak pomija to, co ma
   visibility: hidden — więc nic nie tracimy.
   -------------------------------------------------------------------------- */

.gsft-jezyk__lista {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 50;

	display: flex;
	flex-direction: column;
	gap: 0;

	min-width: 100%;
	width: max-content;
	margin: var( --gsft-submenu-odstep, 12px ) 0 0;
	padding: 0;
	list-style: none;

	background: var( --gsft-submenu-tlo, rgba( 37, 37, 37, 0.6 ) );
	-webkit-backdrop-filter: blur( 40px );
	backdrop-filter: blur( 40px );

	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s, opacity 0.3s;
}

/**
 * Mostek nad listą.
 *
 * Panel jest odsunięty od przycisku o 12px i przez tę szczelinę trzeba
 * przejechać myszą. Bez mostka kursor na moment opuszcza przełącznik,
 * :hover gaśnie i panel zaczyna znikać w połowie drogi. Niewidoczny pasek
 * o wysokości odstępu domyka tę drogę.
 *
 * Dziedziczy visibility po liście, więc przy zamkniętym panelu nie łapie
 * kliknięć w to, co pod nim leży.
 */
.gsft-jezyk__lista::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: calc( -1 * var( --gsft-submenu-odstep, 12px ) );
	height: var( --gsft-submenu-odstep, 12px );
}

.gsft-jezyk:hover .gsft-jezyk__lista,
.gsft-jezyk:focus-within .gsft-jezyk__lista,
.gsft-jezyk__przycisk[aria-expanded="true"] + .gsft-jezyk__lista {
	visibility: visible;
	opacity: 1;
}

.gsft-jezyk__lista li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsft-jezyk__pozycja {
	display: flex;
	align-items: center;
	padding: 12px 16px;

	font-size: 13px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: -0.1px;
	text-decoration: none;
	white-space: nowrap;
	color: var( --gsft-submenu-tekst, #fff );
	transition: color 0.2s ease;
}

.gsft-jezyk__pozycja:hover,
.gsft-jezyk__pozycja:focus-visible {
	color: var( --gsft-submenu-tekst-hover, #b8b8b8 );
}

/* Bieżący język — wyróżniony, ale nie wygaszony. Klikalny zostaje celowo:
   to najprostszy sposób, żeby wrócić na tę samą stronę bez prefiksu. */
.gsft-jezyk__pozycja.is-wybrany {
	color: var( --gsft-submenu-tekst-hover, #b8b8b8 );
}

/* --------------------------------------------------------------------------
   Telefon — płaski rząd w szufladzie
   Bez rozwijania: w szufladzie jest miejsce, a jedno dotknięcie zamiast
   dwóch to przy dwóch, trzech językach cała różnica.
   -------------------------------------------------------------------------- */

.gsft-jezyk--plaski {
	margin: 12px 0 20px;
}

.gsft-jezyk__naglowek {
	display: block;
	margin-bottom: 10px;

	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.gsft-jezyk__rzad {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gsft-jezyk__kafel {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 52px;
	height: 32px;
	padding: 0 12px;

	border: 1px solid rgba( 37, 37, 37, 0.2 );
	background: #fff;

	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	color: #252525;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.gsft-jezyk__kafel:hover {
	border-color: #252525;
	color: #252525;
}

.gsft-jezyk__kafel.is-wybrany {
	border-color: #252525;
	background: #252525;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {

	.gsft-jezyk__lista,
	.gsft-jezyk__strzalka {
		transition: none;
	}
}


/* ==========================================================================
   31. DOŁADOWYWANIE KOLEJNYCH PRODUKTÓW ZAMIAST STRONICOWANIA
   woocommerce/archive-product.php -> .gsft-sklep__wiecej

   Dopisz na końcu style.css. Wymaga nowej wersji archive-product.php.

   Stronicowanie WooCommerce zostaje w kodzie strony — chowa je JavaScript
   (atrybutem hidden), nie ten arkusz. Gdyby ktoś wyłączył JavaScript,
   numery stron mają być widoczne i klikalne, więc żadnej reguły
   .woocommerce-pagination { display: none } tu nie ma i nie powinno być.
   ========================================================================== */

   .gsft-sklep__wiecej {
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* Ten sam oddech co miało stronicowanie. */
    padding: 40px 0 64px;
  }
  
  .gsft-sklep__wiecej-btn {
    min-width: 200px;
    height: 48px;
    padding: 0 32px !important;
  
    border: 1px solid #252525 !important;
    border-radius: 0;
    background: #fff !important;
  
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #252525 !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  
  .gsft-sklep__wiecej-btn:hover {
    background: #252525 !important;
    color: #fff !important;
  }
  
  /* --------------------------------------------------------------------------
     Stan ładowania
  
     Napis zostaje na miejscu, dochodzą trzy pulsujące kropki po prawej.
     Podmiana tekstu na "Ładowanie..." przesuwałaby przycisk, a przy
     doładowaniu na przewijaniu ruch pod palcem czyta się jak zacięcie.
     -------------------------------------------------------------------------- */
  
  .gsft-sklep__wiecej.is-laduje .gsft-sklep__wiecej-btn {
    pointer-events: none;
    opacity: 0.6;
  }
  
  .gsft-sklep__wiecej.is-laduje .gsft-sklep__wiecej-btn::after {
    content: "···";
    margin-left: 8px;
    letter-spacing: 2px;
    animation: gsft-wiecej-puls 1s ease-in-out infinite;
  }
  
  @keyframes gsft-wiecej-puls {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .gsft-sklep__wiecej.is-laduje .gsft-sklep__wiecej-btn::after {
      animation: none;
    }
  }
  
  @media (max-width: 767px) {
  
    .gsft-sklep__wiecej {
      padding: 28px 0 44px;
    }
  
    .gsft-sklep__wiecej-btn {
      min-width: 0;
      width: 100%;
    }
  }
/* ==========================================================================
   32. RYSUNEK W AKORDEONIE "SIZE GUIDE" NA ŚRODKU
   woocommerce/single-product/tabs/tabs.php -> li.size_guide_tab

   Dopisz na końcu style.css. Nic poza tym nie trzeba zmieniać — panel już
   ma potrzebne zaczepy, wystarczy się do nich odwołać.

   DLACZEGO SELEKTOR PO KLASIE <li>, A NIE PO id="tab-size_guide"
   Szablon nadaje panelowi id złożone z klucza zakładki. Na stronie głównej
   sekcja mini-produktu renderuje ten sam zestaw zakładek, więc to samo id
   potrafi wystąpić dwa razy — a wtedy przeglądarka stosuje regułę tylko do
   pierwszego wystąpienia. Klasa size_guide_tab na <li> jest w obu miejscach
   i działa w obu.

   DLACZEGO DWA SPOSOBY CENTROWANIA NARAZ
   Panel jest kontenerem flex w kolumnie (klasy flex flex-col z szablonu),
   a rysunek przychodzi z pola WYSIWYG — raz jako <img> wprost w panelu,
   raz owinięty w <p> albo <figure>, zależnie od tego, jak został wklejony
   w edytorze. To dwie różne sytuacje układu:

     <img> wprost w panelu  -> jest elementem flex, centruje align-self
     <img> w <p>            -> jest zwykłym blokiem, centrują marginesy auto

   Obie reguły podane naraz nie kłócą się ze sobą (w układzie flex marginesy
   auto i tak pochłaniają wolne miejsce po równo), a dzięki temu nie trzeba
   sprawdzać, jak dokładnie wygląda treść pola przy każdym produkcie.
   ========================================================================== */

   .size_guide_tab .custom-accordion-panel img {
    display: block;
    max-width: 100%;
    height: auto;
  
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }
  
  /* Akapit albo <figure>, w który edytor potrafi owinąć obrazek. Bez tego
     sam obrazek stoi na środku, ale podpis pod nim zostaje przy lewej. */
  .size_guide_tab .custom-accordion-panel p,
  .size_guide_tab .custom-accordion-panel figure,
  .size_guide_tab .custom-accordion-panel figcaption {
    text-align: center;
  }
  
  /* Tabela z wymiarami zostaje wyrównana do lewej — centrowanie liczb
     w kolumnach utrudnia porównywanie ich wzrokiem w pionie. */
  .size_guide_tab .custom-accordion-panel table,
  .size_guide_tab .custom-accordion-panel th,
  .size_guide_tab .custom-accordion-panel td {
    text-align: left;
  }
    
 /* ==========================================================================
   33. KAFELKI KATEGORII NA TELEFONIE — MARGINESY PO BOKACH
   template-parts/sections/pages/kafelki.php -> section#kafelki

   Dopisz na końcu style.css. Szablonów nie ruszasz.

   Dotyczy WYŁĄCZNIE sekcji z kafelkami kategorii (te dwie po cztery zdjęcia
   z plakietkami "Shop Hoodies", "Shop Tees"). Banery z filmem zostają na całą
   szerokość — nie ma tu ani jednej reguły dotykającej .baner.

   JEDNA LICZBA DO ZMIANY
   --gsft-kafelki-margines. Ustawione na 16px, bo tyle ma margines boczny
   strony produktu (sekcja 18) i kolumny opisu — to jest już ustalony rytm
   tej strony na telefonie, a nie kolejna wartość z powietrza.

   ODSTĘP MIĘDZY KAFELKAMI ZOSTAJE
   4px z klasy gap-1 w szablonie. Ten odstęp jest zmierzony 1:1 ze starej
   strony i nie ma powodu, żeby zmieniał się razem z marginesem bocznym —
   to dwie różne rzeczy, mimo że obie są przerwami.

   PADDING NA SEKCJI, NIE MARGINES NA KAFLACH
   Kafle siedzą w siatce; margines na nich rozjechałby odstępy między nimi,
   bo dokładałby się do gap-a tylko na skrajnych. Padding na sekcji wsuwa
   całą siatkę jako jedno i zostawia gap w spokoju.
   ========================================================================== */

@media (max-width: 1023px) {

	#kafelki {
		--gsft-kafelki-margines: 16px;

		padding-left: var( --gsft-kafelki-margines );
		padding-right: var( --gsft-kafelki-margines );
	}
}


/* ==========================================================================
   34. MINI PRODUKT NA STRONIE GŁÓWNEJ — ZDJĘCIE JAK NA STRONIE PRODUKTU
   template-parts/sections/pages/single_product_mini.php -> .mini-product

   Dopisz na końcu style.css. MUSI stać po sekcjach 5, 17, 18, 28 i 29 —
   cofa ich ustawienia dla mini sekcji i podstawia te ze strony produktu.
   Wymaga nowej wersji single_product_mini.php.

   CO SIĘ ZMIENIA
   Sekcja 5 zwężała zdjęcie w mini sekcji do 492px i dosuwała je do PRAWEJ
   krawędzi kolumny, żeby po lewej zostało miejsce na grafikę dekoracyjną.
   Grafiki już nie ma, więc zdjęcie zajmuje całą kolumnę i przylega do lewej
   krawędzi wrapa — dokładnie jak na stronie produktu.

   Reguły niżej są odbiciem sekcji 17, 28 i 29, tylko z selektorem mini
   sekcji. Nie łączę ich w jedną listę selektorów, bo tamte sekcje są już
   u Ciebie wklejone — dopisanie osobnego bloku jest bezpieczniejsze niż
   grzebanie w trzech miejscach naraz. Jeśli kiedyś będziesz zmieniał
   proporcję kadru na stronie produktu, pamiętaj o tej sekcji.
   ========================================================================== */

/* Zostaje jako zabezpieczenie: gdyby stary szablon jeszcze gdzieś wisiał,
   grafika ma się nie pokazać. W nowym pliku tego <img> po prostu nie ma. */
   .mini-product__deco {
    display: none;
  }
  
  /* Koniec zwężania — zdjęcie na całą kolumnę, od lewej krawędzi. */
  .mini-product__gallery .gsft-gallery {
    max-width: none;
    margin-left: 0;
  }
  
  /* Telefon: ta sama proporcja co na stronie produktu (sekcja 4 daje mini
     sekcji 2/3, strona produktu ma 4/5). */
  .mini-product__gallery .gsft-gallery__main {
    aspect-ratio: 4 / 5;
  }
  
  /* --------------------------------------------------------------------------
     Odstęp pod sekcją
  
     Sekcja 5 ustawiała tu zero, bo grafika dekoracyjna kończyła się dokładnie
     tam, gdzie zaczynała się kolejna sekcja. Bez grafiki to zero znaczy już
     tylko tyle, że zdjęcie skleja się z tym, co pod nim.
  
     50px to ten sam odstęp, co pod sekcjami z kafelkami (pb-8 lg:pb-12.5),
     więc strona główna zachowuje jeden rytm. Zmieniasz jedną zmienną.
  
     Reguła stoi POZA media query i dlatego działa też na telefonie: sekcja 18
     ustawia tam padding skrótem (24px 16px 0), a skrót zeruje dolną wartość.
     Ta reguła jest w pliku później, więc wygrywa mimo braku media query —
     zapytania medialne nie podnoszą specyficzności.
     -------------------------------------------------------------------------- */
  
  .mini-product__wrap {
    --gsft-mini-dol: 32px;
  
    padding-bottom: var( --gsft-mini-dol );
  }
  
  
  /* --------------------------------------------------------------------------
     34a. Desktop — odpowiednik sekcji 17 i 28
  
     Wysokość kadru jest ograniczona z góry wysokością ekranu, a proporcja
     stała: kadr nigdy nie jest węższy niż 4/5 ani wyższy niż ekran. Który
     z tych dwóch warunków rządzi, wychodzi samo — na niskim ekranie ekran,
     na wysokim proporcja.
  
     Górna krawędź zdjęcia równa się z tytułem produktu: odstęp 60px bierze
     CAŁY wrap, a nie sama kolumna opisu, więc obie zaczynają się w tej samej
     linii. Na stronie produktu jest odwrotnie (padding siedzi na kolumnie
     opisu, a zdjęcie startuje od samej góry) — tam nad zdjęciem jest tylko
     belka, a tutaj poprzednia sekcja i sklejenie ich wyglądałoby na usterkę.
     -------------------------------------------------------------------------- */
  
  @media ( min-width: 1024px ) {
  
    .mini-product__wrap {
      --gsft-nad-zgieciem: calc( 100svh - 67px );
      --gsft-mini-dol: 50px;
  
      padding-top: 60px;
      justify-content: flex-start;
      gap: 0;
    }
  
    body.admin-bar .mini-product__wrap {
      --gsft-nad-zgieciem: calc( 100svh - 99px );
    }
  
    .mini-product__gallery {
      flex: 0 0 auto;
      width: 50%;
      margin-left: 0;
    }
  
    .mini-product__gallery .gsft-gallery__main {
      aspect-ratio: 4 / 5;
      height: auto;
      max-height: var( --gsft-nad-zgieciem );
    }
  
    .mini-product__info {
      flex: 0 0 470px;
      width: auto;
  
      /* auto dopycha kolumnę do prawej, 78px to margines od krawędzi —
         te same liczby co w sekcji 17. */
      margin-left: auto;
      margin-right: 78px;
  
      /* Zero, bo odstęp od góry daje już wrap — inaczej tytuł zjechałby
         o 60px niżej niż zdjęcie i o to wyrównanie właśnie chodzi. */
      padding-top: 0;
    }
  }
  
  
  /* --------------------------------------------------------------------------
     34b. Bardzo duży ekran — odpowiednik sekcji 29
  
     Na 4K wysokość zdjęcia przestaje wynikać z proporcji, a zaczyna z sąsiada:
     kolumna rozciąga się na całą wysokość wiersza, czyli tyle, ile ma kolumna
     z opisem. Dolne krawędzie schodzą się co do piksela.
     -------------------------------------------------------------------------- */
  
  @media ( min-width: 2000px ) and ( min-height: 1500px ) {
  
    .mini-product__gallery {
      align-self: stretch;
    }
  
    .mini-product__gallery .gsft-gallery {
      height: 100%;
    }
  
    .mini-product__gallery .gsft-gallery__main {
      aspect-ratio: auto;
      height: 100%;
      max-height: none;
    }
  }
  
  /* ==========================================================================
   35. STOPKA — układ 1:1 z projektu (kolumna wyśrodkowana)
   template-parts/layout/footer-content.php -> footer#colophon.gsft-stopka

   Dopisz na końcu style.css. Wymaga nowego footer-content.php.

   DLACZEGO NOWY PREFIKS, A NIE POPRAWKI W SEKCJI 9
   Nowy szablon używa klas .gsft-stopka__*, więc żadna reguła ze starej
   sekcji 9 (.gsft-footer__*) nie ma już czego złapać. To znaczy, że nie
   musisz nic w środku style.css kasować ani przepisywać — dopisujesz ten
   blok na końcu i stary wygląd znika sam. Sekcję 9 możesz usunąć przy
   najbliższym porządkowaniu; leżąc tam nic nie robi.

   SKĄD TE LICZBY
   Zdjęte z Twojego projektu pomiarem pikselowym. Makieta desktopowa ma
   1046px szerokości i jest skalą 1:1,3767 układu 1440px, mobilna 282px to
   ten sam współczynnik dla 390px — obie zgadzają się co do jednego piksela,
   więc skala jest pewna, nie zgadywana.

       tekst .............. 13px / 20.8 / 500 / ls -0.1   (już tak jest)
       + 8px
       formularz .......... 472px, input elastyczny + Submit 65px, wys. 40px
       + 28px
       ikony płatności .... kafelki 32x20, przerwa 7px
       + 60px
       belka .............. przerwa 32px, ikony portali 16px, kreski 1x16px
       + 36px
       duże logo .......... width 100% / height auto -> na 1440px daje 170px

   Wysokość dużego logo NIE jest już wpisana na sztywno (stare 170px).
   Plik SVG ma proporcję ok. 8,37:1, więc height: auto daje na 1440px
   dokładnie te 170px, a na telefonie skaluje się razem z szerokością —
   w projekcie logo na mobile ma 45px wysokości i tyle właśnie wychodzi.

   JEDNA LICZBA DO ZMIANY
   Cała pionowa rytmika siedzi w zmiennych na .gsft-stopka. Chcesz stopkę
   niższą — zmieniasz --gsft-stopka-gora i tyle.
   ========================================================================== */

.gsft-stopka {
	--gsft-stopka-gora: 106px;        /* pusta przestrzeń nad tekstem newslettera */
	--gsft-stopka-po-tekscie: 8px;    /* tekst -> formularz */
	--gsft-stopka-po-formie: 28px;    /* formularz -> ikony płatności */
	--gsft-stopka-po-platnosciach: 60px; /* ikony -> belka */
	--gsft-stopka-po-belce: 36px;     /* belka -> duże logo */
	--gsft-stopka-boki: 8px;          /* margines dużego logo od krawędzi */

	--gsft-stopka-form: 472px;        /* input + przerwa + Submit */
	--gsft-stopka-form-przerwa: 4px;
	--gsft-stopka-submit: 65px;
	--gsft-stopka-pole-wys: 40px;

	--gsft-stopka-platnosc-szer: 48px;
	--gsft-stopka-platnosc-wys: 30px;
	--gsft-stopka-platnosc-przerwa: 7px;

	--gsft-stopka-belka-przerwa: 32px;
	--gsft-stopka-portal: 16px;
	--gsft-stopka-kreska: #e0e0e0;

	--gsft-stopka-tekst: #252525;

	position: relative;
	background: #fff;
	overflow: hidden;
}

.gsft-stopka__wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var( --gsft-stopka-boki ) var( --gsft-stopka-boki );
}

.gsft-stopka__srodek {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding-top: var( --gsft-stopka-gora );

	font-size: 13px;
	font-weight: 500;
	line-height: 20.8px;
	letter-spacing: -0.1px;
	color: var( --gsft-stopka-tekst );
	text-align: center;
}


/* --------------------------------------------------------------------------
   Newsletter (Contact Form 7)

   Tekst zachęty i pole e-mail są w jednym formularzu, więc odstęp 8px
   między nimi robi margines na .newsletter-form, a nie przerwa kolumny.

   W treści pola tekstowego w CF7 stoi <br> łamiące zdanie na dwie linijki —
   w projekcie zdanie jest jednolinijkowe, więc <br> tu wygaszam. Gdybyś
   chciał wrócić do łamania, skasuj tę jedną regułę.
   -------------------------------------------------------------------------- */

.gsft-stopka__newsletter {
	width: 100%;
	max-width: var( --gsft-stopka-form );
}

.gsft-stopka__newsletter form {
	margin: 0;
}

.gsft-stopka__newsletter .newsletter {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gsft-stopka__newsletter .newsletter > p {
	margin: 0;
}

.gsft-stopka__newsletter .newsletter > p br {
	display: none;
}

.gsft-stopka__newsletter .newsletter-form {
	display: flex;
	align-items: center;
	gap: var( --gsft-stopka-form-przerwa );

	width: 100%;
	margin-top: var( --gsft-stopka-po-tekscie );
}

.gsft-stopka__newsletter .newsletter-form > p {
	margin: 0;
}

/* Pole rośnie, przycisk ma stałe 65px — na telefonie formularz jest
   na całą szerokość i pilnuje tego to samo flex: 1 1 auto. */
.gsft-stopka__newsletter .newsletter-form > p:first-child {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.gsft-stopka__newsletter .newsletter-form > p:last-child {
	position: relative;
	flex: 0 0 auto;
}

.gsft-stopka__newsletter .wpcf7-form-control-wrap {
	display: block;
}

.gsft-stopka__newsletter input[type="email"],
.gsft-stopka__newsletter input[type="text"] {
	width: 100%;
	height: var( --gsft-stopka-pole-wys );
	padding: 12px 8px;
	border: 1px solid rgba( 37, 37, 37, 0.2 );
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	color: #000;
}

.gsft-stopka__newsletter input[type="email"]::placeholder,
.gsft-stopka__newsletter input[type="text"]::placeholder {
	color: rgba( 37, 37, 37, 0.4 );
}

.gsft-stopka__newsletter input[type="submit"] {
	width: var( --gsft-stopka-submit );
	height: var( --gsft-stopka-pole-wys );
	padding: 10px 8px;
	border: 1px solid #252525;
	border-radius: 0;
	background: #252525;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.gsft-stopka__newsletter input[type="submit"]:hover {
	opacity: 0.85;
}

/* Kręciołek CF7 pokazuje się dopiero przy wysyłce, ale ma marginesy 0 24px.
   W układzie wyśrodkowanym przesunąłby cały formularz o 36px w lewo w chwili
   kliknięcia, więc wyjmuję go z przepływu i wieszam obok przycisku. */
.gsft-stopka__newsletter .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 100%;
	margin: 0 0 0 12px;
	transform: translateY( -50% );
}

/* Komunikat o błędnym adresie też nie może rozpychać wiersza — inaczej pole
   i przycisk przestają być równo. */
.gsft-stopka__newsletter .wpcf7-not-valid-tip {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	font-size: 12px;
	text-align: left;
}

.gsft-stopka__newsletter .wpcf7-response-output {
	margin: 12px 0 0;
	font-size: 12px;
	text-align: center;
}

/* Zgoda na politykę prywatności. W projekcie tego pola nie ma — zostaje,
   bo jest w formularzu wymagane i bez niego wysyłka nie przechodzi.
   Jeśli ma zniknąć, usuń pole [acceptance] w Contact Form 7 -> Newsletter;
   samo schowanie go CSS-em zablokowałoby zapisy do newslettera. */
.gsft-stopka__newsletter .wpcf7-acceptance {
	display: block;
	margin-top: 16px;
	font-size: 13px;
}

.gsft-stopka__newsletter .wpcf7-list-item {
	margin: 0;
}

.gsft-stopka__newsletter input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin-right: 6px;
	border: 1px solid rgba( 37, 37, 37, 0.4 );
	border-radius: 0;
	accent-color: #252525;
	vertical-align: -2px;
}

.gsft-stopka__newsletter a {
	color: var( --gsft-stopka-tekst );
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Ikony płatności

   Stałe kafelki zamiast obrazków na wysokość: w projekcie środki ikon są
   rozstawione dokładnie co 39px, mimo że same znaki mają różne szerokości
   (Visa 25px, Discover 30px). To znaczy, że siedzą w równych polach,
   a nie w rzędzie z jedną przerwą. object-fit: contain pilnuje, żeby żaden
   nie został rozciągnięty niezależnie od tego, co wgrasz w ACF.
   -------------------------------------------------------------------------- */

.gsft-stopka__platnosci {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	/* Pionowa przerwa o pikselek większa niż pozioma — tak jest w projekcie
	   i tylko dzięki temu drugi rząd ikon na telefonie ląduje tam, gdzie ma. */
	gap: 8px var( --gsft-stopka-platnosc-przerwa );

	margin-top: var( --gsft-stopka-po-formie );
}

.gsft-stopka__platnosc {
	flex: 0 0 auto;
	width: var( --gsft-stopka-platnosc-szer );
	height: var( --gsft-stopka-platnosc-wys );
	object-fit: contain;
	object-position: center;
}


/* --------------------------------------------------------------------------
   Belka: portale | linki | copyright
   -------------------------------------------------------------------------- */

.gsft-stopka__belka {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var( --gsft-stopka-belka-przerwa );

	margin-top: var( --gsft-stopka-po-platnosciach );
}

/* min-height równa wysokości wiersza tekstu. Na desktopie nic nie zmienia
   (belka i tak ma tyle), ale na telefonie, gdzie portale stoją we własnym
   wierszu, bez tego rząd miałby 16px zamiast 20.8px i wszystko poniżej
   podjechałoby o 5px w górę względem projektu. */
.gsft-stopka__portale {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var( --gsft-stopka-portal );
	min-height: 20.8px;
}

.gsft-stopka__portal {
	display: flex;
	align-items: center;
	color: var( --gsft-stopka-tekst );
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.gsft-stopka__portal:hover {
	opacity: 0.6;
}

.gsft-stopka__ikona {
	display: block;
	width: var( --gsft-stopka-portal );
	height: var( --gsft-stopka-portal );
}

/* Portal bez rozpoznanej ikony wypisuje się tekstem — wtedy ma zachowywać
   się jak zwykły link z belki, nie jak kwadracik. */
.gsft-stopka__portal--tekst:hover {
	opacity: 1;
	text-decoration: underline;
}

.gsft-stopka__kreska {
	flex: 0 0 1px;
	width: 1px;
	height: 16px;
	background: var( --gsft-stopka-kreska );
}

.gsft-stopka__linki {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --gsft-stopka-belka-przerwa );

	margin: 0;
	padding: 0;
	list-style: none;
}

.gsft-stopka__linki li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsft-stopka__linki a,
.gsft-stopka__prawa {
	font-size: 13px;
	font-weight: 500;
	line-height: 20.8px;
	letter-spacing: -0.1px;
	color: var( --gsft-stopka-tekst );
	white-space: nowrap;
	text-decoration: none;
}

.gsft-stopka__linki a:hover {
	text-decoration: underline;
}

.gsft-stopka__prawa {
	margin: 0;
}

.gsft-stopka__prawa a {
	color: inherit;
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Duże logo
   -------------------------------------------------------------------------- */

.gsft-stopka__logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-top: var( --gsft-stopka-po-belce );
}


/* --------------------------------------------------------------------------
   35a. Telefon i tablet

   Belka rozsypuje się na trzy wiersze po 28px: portale, linki, copyright.
   Kreski znikają, bo rozdzielają rzeczy, które i tak stoją osobno.

   Ikony płatności dostają max-width 280px. To nie jest ozdoba: przy
   kafelku 32px i przerwie 7px w 280px mieści się dokładnie siedem znaków,
   czyli tyle, ile w projekcie stoi w pierwszym rzędzie, a reszta schodzi
   niżej. Bez tego ograniczenia na 390px zmieściłoby się osiem i podział
   wyszedłby 8 + 2. Dokładasz w ACF ikony — sprawdź, czy podział nadal
   wygląda, jak chcesz, i ewentualnie ruszaj tę jedną liczbę.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	.gsft-stopka {
		--gsft-stopka-gora: 64px;
		--gsft-stopka-belka-przerwa: 28px;
	}

	/* 8px z wrapa + 8px stąd = 16px marginesu treści, przy logo nadal 8px. */
	.gsft-stopka__srodek {
		padding-left: 8px;
		padding-right: 8px;
	}

	.gsft-stopka__platnosci {
		max-width: 280px;
	}

	.gsft-stopka__belka {
		flex-direction: column;
	}

	.gsft-stopka__kreska {
		display: none;
	}

	.gsft-stopka__linki {
		flex-wrap: wrap;
		justify-content: center;
		gap: 7px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gsft-stopka__newsletter input[type="submit"],
	.gsft-stopka__portal {
		transition: none;
	}
}
.woocommerce-variation-availability .in-stock{
  display: none;
}
.tp-card-title, .tp-card-body p {
  font-family: 'CabinetGrotesk';font-size:13px}@media (max-width:768px){#kafelki .grid{gap:.9rem}}.gsft-krok__dalej{--gsft-kasa-guzik-tlo:var( --gsft-kasa-akcent, #247e60 );--gsft-kasa-guzik-tlo-hover:#1d6a51;--gsft-kasa-guzik-tekst:#fff;--gsft-kasa-guzik-szary:#e9e9e9;--gsft-kasa-guzik-szary-tekst:#6f6f6f;background:var(--gsft-kasa-guzik-tlo)!important;color:var(--gsft-kasa-guzik-tekst)!important;transition:background 0.15s ease,color 0.15s ease}.gsft-krok__dalej:hover,.gsft-krok__dalej:focus-visible{background:var(--gsft-kasa-guzik-tlo-hover)!important;color:var(--gsft-kasa-guzik-tekst)!important}.gsft-krok__dalej.is-nieaktywny,.gsft-krok__dalej.is-nieaktywny:hover,.gsft-krok__dalej.is-nieaktywny:focus-visible{background:var(--gsft-kasa-guzik-szary)!important;color:var(--gsft-kasa-guzik-szary-tekst)!important;cursor:not-allowed!important}@media (prefers-reduced-motion:reduce){.gsft-krok__dalej{transition:none}}.gsft-usun{--gsft-usun-pole:28px;--gsft-usun-ikona:16px;--gsft-usun-kolor:#252525;--gsft-usun-hover:#252525;--gsft-usun-przygaszenie:0.55;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--gsft-usun-pole);height:var(--gsft-usun-pole);margin:-6px -6px -6px 2px;padding:0;color:var(--gsft-usun-kolor);opacity:var(--gsft-usun-przygaszenie);text-decoration:none;transition:opacity 0.2s ease,color 0.2s ease}.gsft-usun:hover,.gsft-usun:focus-visible{color:var(--gsft-usun-hover);opacity:1;text-decoration:none}.gsft-usun__ikona{display:block;width:var(--gsft-usun-ikona);height:var(--gsft-usun-ikona)}@media (max-width:1023px){.gsft-usun{--gsft-usun-pole:36px;margin:-10px -10px -10px 0}}@media (prefers-reduced-motion:reduce){.gsft-usun{transition:none}}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div){--gsft-lista-wciecie:1.6em;--gsft-lista-odstep:4px;--gsft-lista-zagniezdzenie:6px}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) :is(ul,ol){margin:0;padding-left:var(--gsft-lista-wciecie);list-style-position:outside}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) ul{list-style-type:disc}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) ol{list-style-type:decimal}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) li{display:list-item;margin:0 0 var(--gsft-lista-odstep);padding:0}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) li:last-child{margin-bottom:0}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) li>:is(ul,ol){margin-top:var(--gsft-lista-zagniezdzenie)}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) ul ul{list-style-type:circle}:is(.custom-accordion-panel,.gsft-korzysci__panel-tresc,.faq-accordion-panel,.woocommerce-product-details__short-description,#regulamin>div,#napisz_do_nas>div,#czeste_pytania>div) ol ol{list-style-type:lower-alpha}.faq-accordion-panel{--gsft-faq-akapit:12px}.faq-accordion-panel>*+*{margin-top:var(--gsft-faq-akapit)}.gsft-strona__tresc{text-align:left}.gsft-strona__tresc :is(h1,h2,h3,h4){font-weight:500;line-height:1.2;letter-spacing:-.2px;color:#252525}.gsft-strona__tresc h1{font-size:28px}.gsft-strona__tresc h2{font-size:20px}.gsft-strona__tresc :is(h3,h4){font-size:16px}.gsft-strona__tresc a{color:inherit;text-decoration:underline}.wrm-form-wrapper{--gsft-wrm-tekst:#252525;--gsft-wrm-akcent:#247e60;--gsft-wrm-akcent-hover:#1d6a51;color:var(--gsft-wrm-tekst)}.wrm-form-wrapper .wrm-btn-submit{padding:12px 28px;border:1px solid var(--gsft-wrm-akcent)!important;border-radius:0!important;background:var(--gsft-wrm-akcent)!important;color:#fff!important;font-size:13px;font-weight:500}.wrm-form-wrapper .wrm-btn-submit:hover:not(:disabled){border-color:var(--gsft-wrm-akcent-hover)!important;background:var(--gsft-wrm-akcent-hover)!important}.wrm-form-wrapper .wrm-btn-submit:disabled,.wrm-form-wrapper .wrm-btn-submit.wrm-btn-disabled{border-color:#e9e9e9!important;background:#e9e9e9!important;color:#6f6f6f!important;opacity:1;cursor:not-allowed!important}.wrm-form-wrapper :is(input[type="text"],input[type="email"],input[type="number"],textarea,select){font-size:13px}.wrm-form-wrapper :is(input,textarea,select):focus{box-shadow:none}.wrm-form-wrapper .wrm-messages,.wrm-form-wrapper :is(.wrm-product-row,.wrm-products-section){border-radius:0}.wrm-form-wrapper .wrm-form-row label{font-weight:500;font-size:13px}.wrm-form-wrapper .wrm-form-title{font-size:20px;font-weight:500;letter-spacing:-.2px}.baner-player-shell{position:absolute;inset:0;z-index:20;pointer-events:none}.baner .baner-player__center-play{position:absolute;top:50%;left:50%;display:inline-flex;width:76px;height:76px;align-items:center;justify-content:center;padding:0;transform:translate(-50%,-50%);border:1px solid rgb(255 255 255 / .9)!important;border-radius:50%;background:rgb(0 0 0 / .42)!important;color:#fff!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto;transition:opacity 220ms ease,transform 220ms ease,background-color 180ms ease,color 180ms ease}.baner .baner-player__center-play svg{width:27px;height:27px;fill:currentColor}.baner .baner-player__center-play:hover,.baner .baner-player__center-play:focus-visible{background:#fff!important;color:#000!important;outline:none}.baner-player-shell.is-playing .baner-player__center-play{opacity:0;transform:translate(-50%,-50%) scale(.92);pointer-events:none}.baner-player{position:absolute;left:50%;bottom:24px;display:flex;width:min(680px, calc(100% - 48px));align-items:center;gap:12px;padding:10px 12px;transform:translate(-50%,8px);border:1px solid rgb(255 255 255 / .42);background:rgb(0 0 0 / .58);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease,visibility 220ms ease}.baner-player-shell.is-controls-visible .baner-player,.baner-player:focus-within{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}.baner .baner-player .baner-player__button{display:inline-flex;flex:0 0 34px;width:34px;height:34px;align-items:center;justify-content:center;padding:0;border:1px solid rgb(255 255 255 / .35);border-radius:0;background:transparent!important;color:#fff!important;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}.baner .baner-player .baner-player__button:hover,.baner .baner-player .baner-player__button:focus-visible{border-color:#fff;background:#fff!important;color:#000!important;outline:none}.baner-player__icon{width:16px;height:16px;fill:currentColor}.baner-player__icon--pause,.baner-player__icon--sound{display:none}.baner-player-shell.is-playing .baner-player__icon--play{display:none}.baner-player-shell.is-playing .baner-player__icon--pause{display:block}.baner-player-shell:not(.is-muted) .baner-player__icon--muted{display:none}.baner-player-shell:not(.is-muted) .baner-player__icon--sound{display:block}.baner-player__time{display:flex;flex:0 0 auto;gap:4px;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:rgb(255 255 255 / .82)}.baner-player__time-separator{color:rgb(255 255 255 / .45)}.baner-player__progress{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:70px;height:18px;padding:0!important;border:0!important;background:transparent!important;cursor:pointer}.baner-player__progress::-webkit-slider-runnable-track{height:1px;background:rgb(255 255 255 / .55)}.baner-player__progress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;margin-top:-4px;border:1px solid #fff;border-radius:50%;background:#000}.baner-player__progress::-moz-range-track{height:1px;background:rgb(255 255 255 / .55)}.baner-player__progress::-moz-range-progress{height:1px;background:#fff}.baner-player__progress::-moz-range-thumb{width:9px;height:9px;border:1px solid #fff;border-radius:50%;background:#000}.baner-player__progress:focus-visible{outline:1px solid #fff;outline-offset:3px}@media (max-width:767px){.baner--player-bez-mobile{height:420px!important;min-height:420px!important}.baner--player-bez-mobile>div{height:420px!important;min-height:420px!important}.baner--player-bez-mobile .baner-video,.baner--player-bez-mobile .baner-video--desktop-mobile-contain{top:0!important;left:50%!important;right:auto!important;bottom:auto!important;width:auto!important;height:72%!important;min-width:100%;max-width:none;max-height:none;transform:translateX(-50%);object-fit:cover!important;object-position:50% 50%}.baner--player-bez-mobile picture>img{top:0!important;left:50%!important;right:auto!important;bottom:auto!important;width:auto!important;height:72%!important;min-width:100%;max-width:none;max-height:none;transform:translateX(-50%);object-fit:cover!important;object-position:50% 50%}.baner--player-bez-mobile .z-10.m-4,.baner--player-bez-mobile .z-10.lg\:m-6{position:absolute;inset:0;height:72%!important;margin:0!important;padding:16px!important;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}.baner--player-bez-mobile .z-10 .baner{pointer-events:auto}.baner--player-z-mobile,.baner--player-z-mobile>div{height:800px;min-height:800px}.baner--player-z-mobile .baner-video,.baner--player-z-mobile picture>img{top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none;transform:none;object-fit:cover!important;object-position:50% 50%}}@media (min-width:768px) and (max-height:900px){.baner-video--player{object-position:50% 64%!important}.baner--ma-player picture>img{object-position:50% 64%!important}}.gsft-krok #payment.woocommerce-checkout-payment{width:100%}.gsft-krok #payment .wc_payment_methods{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method{position:relative;margin:0;padding:0;border:1px solid rgb(37 37 37 / .18);border-radius:0;background:#fff;transition:border-color 0.18s ease,background-color 0.18s ease}@media (hover:hover){.gsft-krok #payment .wc_payment_methods>li.wc_payment_method:hover{border-color:rgb(37 37 37 / .55)}}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method:has(>input.input-radio:checked){border-color:#252525;background:#fff}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>input.input-radio{position:absolute;top:21px;left:18px;z-index:2;width:14px;height:14px;margin:0;border:1px solid #252525;border-radius:50%;background:#fff;appearance:none;-webkit-appearance:none;cursor:pointer}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>input.input-radio:checked{border-color:#252525;background:#252525;box-shadow:inset 0 0 0 3px #fff}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>label{display:flex;min-height:56px;width:100%;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:12px 16px 12px 46px;font-family:inherit;font-size:13px;font-weight:400;line-height:1.25;color:#252525;cursor:pointer}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>input.input-radio:checked+label{font-weight:500}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>label img{flex:0 0 auto;width:auto;height:auto;max-width:118px;max-height:26px;margin:0;object-fit:contain;object-position:right center}.gsft-krok #payment .payment_method_stripe_cc>label img{max-width:128px;max-height:24px}.gsft-krok #payment .payment_method_stripe_blik>label img{max-width:74px;max-height:28px}.gsft-krok #payment .payment_method_stripe_klarna>label img{max-width:58px;max-height:24px}.gsft-krok #payment .payment_method_stripe_p24>label img{max-width:88px;max-height:28px}.gsft-krok #payment .payment_method_stripe_applepay>label img,.gsft-krok #payment .payment_method_stripe_googlepay>label img{max-width:56px;max-height:28px}.gsft-krok #payment .payment_box{position:relative;margin:0;padding:16px 18px 18px;border-top:1px solid rgb(37 37 37 / .12);background:#fff;font-size:12px;line-height:1.5;color:rgb(37 37 37 / .68)}.gsft-krok #payment .payment_box::before,.gsft-krok #payment .payment_box::after{display:none!important;content:none!important}.gsft-krok #payment .payment_box p{margin:0}.gsft-krok #payment .wc-payment-form,.gsft-krok #payment .StripeElement{margin:0;border-radius:0!important;box-shadow:none!important}.gsft-krok #payment .wc-payment-form{padding:0}.gsft-krok #payment .woocommerce-SavedPaymentMethods-saveNew{display:flex;align-items:center;gap:8px;margin-top:12px!important}.gsft-krok #payment .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]{flex:0 0 14px;width:14px!important;height:14px;margin:0}.gsft-krok #payment .woocommerce-SavedPaymentMethods-saveNew label{margin:0!important;font-size:12px;color:#252525}.gsft-krok #payment .place-order{margin-top:10px;padding:0}.gsft-krok #payment .woocommerce-privacy-policy-text{font-size:11px;line-height:1.55;color:rgb(37 37 37 / .58)}.gsft-krok #payment .woocommerce-privacy-policy-text p{margin:0}.gsft-krok #payment .woocommerce-privacy-policy-text a{color:inherit;text-decoration:underline;text-underline-offset:2px}.gsft-krok #payment #place_order{width:100%;min-height:46px;padding:13px 18px!important;border:1px solid #247e60!important;border-radius:0!important;background:#247e60!important;font-family:inherit;font-size:13px;font-weight:500;line-height:1.2;color:#fff!important;cursor:pointer;transition:background-color 0.18s ease,border-color 0.18s ease}@media (hover:hover){.gsft-krok #payment #place_order:hover{border-color:#1d6a51!important;background:#1d6a51!important;color:#fff!important}}@media (max-width:767px){.gsft-krok #payment .wc_payment_methods{gap:6px}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>input.input-radio{top:19px;left:14px}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>label{min-height:52px;gap:12px;padding:10px 12px 10px 40px}.gsft-krok #payment .wc_payment_methods>li.wc_payment_method>label img{max-width:104px;max-height:24px}.gsft-krok #payment .payment_box{padding:14px 14px 16px}}div[id^="wpcf7-f6944-"] .coupon-row.center>p{display:flex;align-items:stretch;width:100%;margin:0}div[id^="wpcf7-f6944-"] .coupon-email{flex:1 1 auto;min-width:0}div[id^="wpcf7-f6944-"] .coupon-email .wpcf7-form-control-wrap{display:block;width:100%}div[id^="wpcf7-f6944-"] .coupon-email input[type="email"]{display:block;width:100%;box-sizing:border-box}div[id^="wpcf7-f6944-"] .coupon-btn{flex:0 0 auto}div[id^="wpcf7-f6944-"] .coupon-consent{display:block;width:100%;margin-top:10px;text-align:left;font-size:13px}div[id^="wpcf7-f6944-"] .coupon-consent .wpcf7-list-item{margin:0}div[id^="wpcf7-f6944-"] .coupon-consent .wpcf7-not-valid-tip{text-align:left!important;margin-top:6px}div[id^="wpcf7-f6944-"] .required{color:#d00}@media (max-width:767px){div[id^="wpcf7-f6944-"] .coupon-row.center{display:block!important;width:100%!important}div[id^="wpcf7-f6944-"] .coupon-row.center>p{display:block!important;width:100%!important;margin:0!important;padding:0!important;line-height:1!important}div[id^="wpcf7-f6944-"] .coupon-email{display:block!important;width:100%!important;min-width:100%!important;max-width:100%!important;margin:0 0 4px 0!important;padding:0!important;flex:none!important;float:none!important;position:static!important;box-sizing:border-box!important}div[id^="wpcf7-f6944-"] .coupon-email .wpcf7-form-control-wrap{display:block!important;width:100%!important;min-width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important}div[id^="wpcf7-f6944-"] .coupon-email input[type="email"]{display:block!important;width:100%!important;min-width:100%!important;max-width:100%!important;margin:0!important;float:none!important;box-sizing:border-box!important}div[id^="wpcf7-f6944-"] .coupon-btn{display:block!important;width:100%!important;min-width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;flex:none!important;float:none!important;position:static!important;transform:none!important;box-sizing:border-box!important}div[id^="wpcf7-f6944-"] .coupon-btn input.wpcf7-submit{display:block!important;width:100%!important;min-width:100%!important;max-width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;padding-left:10px!important;padding-right:10px!important;position:static!important;float:none!important;transform:none!important;visibility:visible!important;opacity:1!important;background:#111!important;color:#fff!important;box-sizing:border-box!important}div[id^="wpcf7-f6944-"] .coupon-consent{display:block!important;width:100%!important;max-width:100%!important;margin-top:10px!important;text-align:left!important;box-sizing:border-box!important}div[id^="wpcf7-f6944-"] .coupon-consent .wpcf7-not-valid-tip{display:block;margin-top:5px!important;text-align:left!important;line-height:1.35!important}}div[id^="wpcf7-f6944-"] form.invalid .wpcf7-response-output,div[id^="wpcf7-f6944-"] form.unaccepted .wpcf7-response-output{display:none!important}div[id^="wpcf7-f6944-"] form.sent .wpcf7-response-output{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;height:auto!important;margin:12px 0 0 0!important;padding:8px 0!important;text-align:left!important;color:#111!important;box-sizing:border-box!important}.details_tab{display:none}@media (min-width:1024px){.gsft-product__media{--gsft-foto-proporcja:2 / 3;--gsft-foto-szer:min( 100%, calc( var( --gsft-nad-zgieciem ) * 2 / 3 ) )}.gsft-product__media .gsft-gallery__main{height:auto;width:var(--gsft-foto-szer);aspect-ratio:var(--gsft-foto-proporcja)}.gsft-product__media .gsft-gallery__main img{object-fit:contain}.gsft-product__media .filmprod{--filmprod-szerokosc:var( --gsft-foto-szer )}.gsft-product__media .gsft-gallery__main,.gsft-product__media .filmprod{margin-left:auto;margin-right:auto}}@media (min-width:1024px){.mini-product__gallery .gsft-gallery__main{width:auto;max-width:100%;aspect-ratio:2 / 3;margin-left:auto;margin-right:auto}.mini-product__gallery .gsft-gallery__main img{object-fit:contain}}.furgonetka_return{display:none!important}.order-actions--heading{display:none!important}@media (max-width:1023px){.gsft-insta__tor{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gsft-insta__tor::-webkit-scrollbar{display:none}.gsft-insta__kadr{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}.gsft-insta__kadr img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;display:block}.gsft-insta__kropki.is-zywe{display:flex;gap:0;justify-content:center;margin-top:-20px;margin-bottom:-12px}}.gsft-insta__kropki{display:none}.gsft-insta__kropka{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:#fff0;cursor:pointer;-webkit-appearance:none;appearance:none}.gsft-insta__kropka::before{content:"";width:6px;height:6px;border-radius:9999px;background:#d4d4d4;transition:background-color 0.2s ease,transform 0.2s ease}.gsft-insta__kropka.is-teraz::before{background:#252525;transform:scale(1.3)}.gsft-insta__kropka .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gsft-insta__okno{position:relative}.gsft-insta__strzalka{top:50%}@media (max-width:1023px){.gsft-insta__strzalka{display:flex}}@media (min-width:1024px){.gsft-insta__strzalka{display:none}}.gsft-insta__strzalka.is-nieczynna{opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){.gsft-insta__kropka::before{transition:none}}.gsftwal--mobile{margin-top:0px!important;padding-top:10px!important}#mobile-menu-sidebar .overflow-y-auto{padding-top:5px}.baner--ma-player .baner-content{justify-content:flex-start}@media (max-width:767px){.baner--ma-player .baner-content{justify-content:flex-start!important}}@media (max-width:767px){.baner--ma-player,.baner--ma-player>div{height:auto!important;min-height:0!important}.baner--ma-player>div{aspect-ratio:16 / 9}.baner--ma-player .baner-video,.baner--ma-player .baner-video--desktop-mobile-contain,.baner--ma-player picture>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;transform:none!important;object-fit:cover!important;object-position:50% 50%!important}}.custom-search-trigger,.cart-toggle{position:relative;display:inline-flex!important;align-items:center;justify-content:center;line-height:0}.gsft-ikona{display:block;flex:0 0 auto;width:16px;height:16px}.cart-toggle .cart-badge-count{top:-6px!important;right:-8px!important;display:flex;width:17px;min-width:17px;height:17px;align-items:center;justify-content:center;padding:0!important;font-size:9px;line-height:1}.gsft-tylko-czytnik{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (min-width:1024px){.header-actions{gap:24px!important}.header-actions>.gsftwal-slot,.header-actions>.wc-slide-search-container{position:relative!important;inset:auto!important;margin:0!important;transform:none!important;translate:none!important}.header-actions>.wc-slide-search-container{width:16px!important;height:16px!important;align-items:center!important;justify-content:center!important}.header-actions>.wc-slide-search-container>.wc-slide-search-input-wrapper{position:absolute!important;top:50%!important;right:0!important;translate:0 -50%!important}}.gsft-klarna{position:relative;display:flex;align-items:center;gap:12px;margin:2px 0 0;padding:14px 16px;border:1px dashed #93a7f0;border-radius:12px;background:#fbfcff}.gsft-klarna__nowe{position:absolute;top:-9px;right:14px;padding:2px 8px;border-radius:999px;background:#dce7fd;color:#2a4fc4;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.01em;white-space:nowrap}.gsft-klarna__marka{flex:0 0 auto;width:auto;height:22px;display:block}.gsft-klarna__marka--zastepcza{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:6px;background:#FFA8CD;color:#3a3a3a;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}.gsft-klarna__tekst{margin:0;color:#2f2f2f;font-size:13px;line-height:1.4}@media (max-width:420px){.gsft-klarna{flex-direction:column;align-items:flex-start;gap:8px}.gsft-klarna__nowe{right:12px}}#select-point-container{background-color:rgb(209 55 47 / .06)}#ywrac-privacy{display:inline-table!important}