/*! 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('fonts/InstrumentSans-VariableFont_wdth,wght.ttf') format('truetype');
}
@font-face {
  font-family: 'InstrumentSerif';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'InstrumentSerifItalic';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
}
@font-face {
  font-family: 'PlayfairDisplay';
  font-style: normal;
  font-weight: 400;
  src: url('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: transparent;
}
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: -0.25em;
}
sup {
  top: -0.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: transparent;
  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: rgba(0,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: rgba(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: 0px;
  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: 0px;
}
.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: 0px;
}
.slidein-cart-header {
  --tw-border-style: none;
  border-style: none;
  padding: 0px;
}
.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: 0px;
  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: #111111;
}
#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: 0px;
  background-color: #111111;
  --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: 0px;
}
.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: 0px;
}
.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: 0.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: 0px;
}
.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: 0px;
}
.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: 0px;
}
.inset-x-4 {
  inset-inline: calc(var(--spacing) * 4);
}
.inset-y-0 {
  inset-block: 0px;
}
.-top-2 {
  top: calc(var(--spacing) * -2);
}
.-top-12 {
  top: calc(var(--spacing) * -12);
}
.top-0 {
  top: 0px;
}
.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: 0px;
}
.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: 0px;
}
.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: 0px;
}
.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: 0.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: 0.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: 0.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: 0.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: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.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: 0.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: 0.875em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(h3 code) {
  color: inherit;
  font-size: 0.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: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(pre code) {
  background-color: transparent;
  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: 0.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: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.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: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.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: 0.5em;
  margin-bottom: 0.5em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ol > li) {
  padding-left: 0.375em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(ul > li) {
  padding-left: 0.375em;
}
:is(.prose :not(:where([class~='not-prose'],[class~='not-prose'] *))):where(.prose > ul > li p) {
  margin-top: 0.75em;
  margin-bottom: 0.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: 0.75em;
  margin-bottom: 0.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: 0.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: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.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: 0px;
}
.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: 0.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: 0px;
}
.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: #EEEEEE;
}
.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: transparent;
}
.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: 0px;
}
.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: 0px;
}
.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;
  }
  
  /* --- 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: 74px;
  
    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: 12px;

	/* Rodzic ma kolor #733828/60; liczba i kwota mają być czytelne. */
	color: #252525;
}

/* 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: 20px 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:0.9rem;
}
}


/* ==========================================================================
   37. KASA — STAN PRZYCISKU "CONTINUE"
   woocommerce/checkout/form-checkout.php -> .gsft-krok__dalej

   Dopisz na końcu style.css. Wymaga snippetu
   functions-snippet-kasa-walidacja.txt, który dokłada klasę .is-nieaktywny.

   DLACZEGO !important, SKORO SEKCJA 12 JUŻ USTAWIA TŁO
   Bo sekcja 12 przegrywa. W motywie jest reguła globalna:

       button:not(#mobile-menu-toggle, #mobile-menu-close, ...) {
           background-color: rgba( 255, 255, 255, 0.9 );
       }

   :not() z listą selektorów przyjmuje specyficzność najmocniejszego
   argumentu, a tam w środku są identyfikatory — więc ta reguła liczy się
   jak (1,0,1), a .gsft-krok__dalej jak (0,1,0). Dlatego przycisk "Continue"
   jest dziś biały z czarnym tekstem, mimo że sekcja 12 każe mu być
   zielonemu. Bez identyfikatora w selektorze albo !important nie da się
   tego przebić, a dokładanie sztucznego #id do znacznika byłoby gorsze.

   TRZY STANY
       domyślny ......... zielony #247e60, biały tekst — ten sam kolor
                          co przycisk "Add to cart" na stronie produktu
       :hover ........... #1d6a51, jak w sekcji 12
       .is-nieaktywny ... szary, kursor "nie wolno"

   Przycisk w stanie szarym NIE dostaje atrybutu disabled i celowo zostaje
   klikalny: kliknięcie podświetla niewypełnione wiersze i przenosi kursor
   do pierwszego z nich. Wyłączony przycisk wypadłby z tabulacji i nie
   powiedziałby nic osobie, która nie rozróżnia tych dwóch szarości.
   ========================================================================== */

   .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;
  }
  
  /* --------------------------------------------------------------------------
     Stan nieaktywny
  
     Selektory z hover i focus muszą być powtórzone, inaczej najechanie
     myszą pomalowałoby szary przycisk na zielono — reguła :hover wyżej
     ma tę samą specyficzność, a stoi wcześniej.
     -------------------------------------------------------------------------- */
  
  .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;
  
    /* Też z !important — kursor pointer przychodzi z tej samej reguły
       globalnej na button, co białe tło. */
    cursor: not-allowed !important;
  }
  
  @media (prefers-reduced-motion: reduce) {
  
    .gsft-krok__dalej {
      transition: none;
    }
  }

  /* ==========================================================================
   38. KOSZYK — PRZYCISK USUWANIA POZYCJI
   woocommerce/cart/mini-cart.php -> a.gsft-usun

   Dopisz na końcu style.css. Wymaga snippetu
   functions-snippet-koszyk-usun.txt, który podmienia literę X na ikonę.

   DLACZEGO UJEMNE MARGINESY
   Ikona siedzi w kwadracie 28x28, żeby dało się w nią trafić palcem, ale
   sam rysunek ma 16px. Wiersz pozycji jest wyrównany do góry
   (items-start), więc bez cofnięcia marginesami ten kwadrat rozepchnąłby
   go o kilkanaście pikseli w dół i tytuł przestałby się zgadzać ze
   zdjęciem. Ujemne marginesy zdejmują nadmiar z powrotem — pole dotyku
   zostaje, układ się nie rusza.

   DLACZEGO NIE CZERWONY NA NAJECHANIU
   Kolor sygnałowy jest tu kuszący, ale cała strona jest monochromatyczna
   i jedyna czerwień, jaka na niej występuje, to plakietka "Sold out"
   i obramowanie błędnego pola w kasie. Kosz wystarczająco mówi, co robi.
   Gdybyś jednak chciał, wystarczy podmienić --gsft-usun-hover na #d1372f,
   czyli tę samą czerwień, której używa walidacja kasy.
   ========================================================================== */

.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 );

	/* Prawy i górny margines cofamy w całości, lewy zostawiamy jako odstęp
	   od tytułu — 8px minus 6px, które kwadrat już sam dokłada. */
	margin: -6px -6px -6px 2px;
	padding: 0;

	color: var( --gsft-usun-kolor );
	opacity: var( --gsft-usun-przygaszenie );

	/* Szablon dawał tu klasę underline pod literę X; ikony nie podkreślamy. */
	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 );
}

/* Pole dotyku na telefonie. 28px to minimum, 36px to wygoda — a w panelu
   koszyka jest na to miejsce, bo wiersz i tak ma 96px wysokości zdjęcia. */
@media (max-width: 1023px) {

	.gsft-usun {
		--gsft-usun-pole: 36px;

		margin: -10px -10px -10px 0;
	}
}

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

	.gsft-usun {
		transition: none;
	}
}

/* ==========================================================================
   39. LISTY W TREŚCIACH REDAKCYJNYCH
   opis produktu, szczegóły, instrukcja prania, tabela rozmiarów,
   panele korzyści, FAQ, regulamin, polityka prywatności, reklamacje

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

   DLACZEGO LISTY NIE MAJĄ KROPEK
   To nie brak w treści — kropki kasuje reset Tailwinda, który jedzie po
   całym dokumencie:

       ol, ul, menu { list-style: none; margin: 0; padding: 0; }

   Sprawdzone na żywo: <ul><li><b>Material: </b>...</li></ul> w opisie
   produktu JEST w kodzie strony, ma nawet display: list-item, tylko
   list-style-type wynosi none. Na stronie regulaminu leżą 22 listy <ol>
   i wszystkie są w tym samym stanie.

   Resetu nie zdejmujemy globalnie i nie wolno tego robić: na tych samych
   znacznikach stoi całe menu, filtry sklepu, szuflada koszyka, stopka
   i przełącznik walut. Kropki wracają wyłącznie tam, gdzie treść pisze
   redaktor.

   DLACZEGO :is() Z IDENTYFIKATOREM
   Dla akordeonów produktu jest już w style.css reguła
   .gsft-product__summary .custom-accordion-panel ul { padding-left: 1.1em }
   o specyficzności (0,2,1). Zwykłe .custom-accordion-panel ul to (0,1,1)
   i przegrałoby. :is() przyjmuje specyficzność najmocniejszego argumentu,
   a że w liście są identyfikatory sekcji (#regulamin i spółka), całość
   liczy się jak (1,0,1) i wygrywa bez ani jednego !important.

   Skutek uboczny: gdybyś kiedyś chciał to nadpisać, potrzebujesz reguły
   z identyfikatorem albo !important. Dlatego wszystko, co dałoby się
   sensownie zmieniać, wystawiam jako zmienne niżej.

   TRZY SEKCJE STRON MAJĄ WSPÓLNE IDENTYFIKATORY
   regulamin.php i polityka_prywatnosci.php wypisują oba id="regulamin",
   a reklamacje_i_zwroty.php id="napisz_do_nas" — tak jest w motywie,
   nie zmieniam tego. Wystarczy, że oba identyfikatory są na liście.
   ========================================================================== */

   :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;   /* od krawędzi treści do TEKSTU pozycji */
    --gsft-lista-odstep: 4px;      /* pionowo między pozycjami listy */
    --gsft-lista-zagniezdzenie: 6px; /* nad listą włożoną w pozycję */
  }
  
  
  /* --------------------------------------------------------------------------
     Sama lista
  
     Wcięcie w em, nie w pikselach: ta sama reguła obsługuje panel produktu
     (13px) i regulamin (większy tekst), a przy numerowanej liście numer
     dwucyfrowy musi się zmieścić w obu.
     -------------------------------------------------------------------------- */
  
  :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;
  }
  
  /* Ostatnia pozycja nie odpycha tego, co pod listą — od tego jest odstęp
     między blokami, a nie margines pozycji. */
  :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;
  }
  
  
  /* --------------------------------------------------------------------------
     Listy zagnieżdżone
  
     Drugi poziom dostaje pusty krążek, a numerowany litery — inaczej dwa
     poziomy kropek albo dwie jedynki pod sobą nie dają się rozróżnić.
     -------------------------------------------------------------------------- */
  
  :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;
  }
  
  
  /* --------------------------------------------------------------------------
     39a. Akapity w odpowiedziach FAQ
  
     Nie o to prosiłeś, ale to ta sama usterka co wyżej i widać ją od razu:
     reset Tailwinda zeruje margines akapitu, a .faq-accordion-panel jest
     kontenerem flex BEZ przerwy (gap: normal). W sześciu z jedenastu
     odpowiedzi kolejne akapity sklejają się w jeden blok tekstu.
  
     Pozostałe panele mają gap-3 z szablonu i tam margines byłby dołożony
     do przerwy, więc reguła celuje wyłącznie w FAQ.
  
     Nie chcesz tego — skasuj ten podblok, reszta sekcji działa bez niego.
     -------------------------------------------------------------------------- */
  
  .faq-accordion-panel {
    --gsft-faq-akapit: 12px;
  }
  
  .faq-accordion-panel > * + * {
    margin-top: var( --gsft-faq-akapit );
  }
  
  /* ==========================================================================
   40. STRONA Z TREŚCIĄ I FORMULARZ ZWROTÓW
   page-tresc.php -> section.gsft-strona
   WC Returns Manager -> [wc_return_form] -> .wrm-form-wrapper

   Dopisz na końcu style.css. Wymaga pliku page-tresc.php w katalogu motywu.

   DWIE CZĘŚCI, OBIE MOŻNA MIEĆ OSOBNO
   40  — opakowanie strony. Kilka linijek, bo szerokość i marginesy robią
         klasy narzędziowe w szablonie; tutaj zostaje tylko to, czego
         Tailwind nie umie: wyrównanie i nagłówki.
   40a — dociągnięcie wyglądu formularza zwrotów do reszty sklepu.
         Nie prosiłeś o to, ale jedna rzecz w nim jest zepsuta na twardo
         (opis niżej), a reszta to zaokrąglone rogi i szare obwódki na
         stronie, która nigdzie indziej ich nie ma. Nie chcesz — skasuj
         podblok 40a, sekcja 40 działa bez niego.
   ========================================================================== */

.gsft-strona__tresc {
	text-align: left;
}

/* Nagłówki wpisane w edytorze. Motyw nie stylizuje h1-h4 w treści strony
   (reset Tailwinda zrównuje je z tekstem), a strona z shortcodem prawie
   zawsze zaczyna się od tytułu. */
.gsft-strona__tresc :is( h1, h2, h3, h4 ) {
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.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;
}


/* ==========================================================================
   40a. FORMULARZ ZWROTÓW

   TO JEST WŁAŚCIWA USTERKA
   Wtyczka maluje przycisk wysyłki regułą .wrm-btn-submit { background: #1a1a1a },
   czyli o specyficzności (0,1,0). W motywie stoi reguła globalna

       button:not(#mobile-menu-toggle, #mobile-menu-close, ...) {
           background-color: rgba( 255, 255, 255, 0.9 );
       }

   a :not() z listą selektorów przyjmuje specyficzność najmocniejszego
   argumentu — w środku są identyfikatory, więc to (1,0,1) i wygrywa.
   Bez tej sekcji przycisk "Submit return request" byłby biały z białym
   napisem. Ta sama pułapka co przy "Continue" w kasie (sekcja 37) i tak
   samo trzeba ją przebić !important.

   RESZTA TO JUŻ TYLKO SPÓJNOŚĆ
   Wtyczka ma domyślnie promień 4px, obwódki #ccc i czarny przycisk.
   Sklep nie ma nigdzie zaokrągleń, obwódki są rgba(37,37,37,0.2),
   a przycisk akcji jest zielony #247e60 — ten sam, co "Add to cart"
   i "Continue" w kasie.
   ========================================================================== */

.wrm-form-wrapper {
	--gsft-wrm-tekst: #252525;
	--gsft-wrm-akcent: #247e60;
	--gsft-wrm-akcent-hover: #1d6a51;

	color: var( --gsft-wrm-tekst );
}

/* Przycisk wysyłki — patrz komentarz wyżej, !important jest tu konieczne. */
.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;
}

/* Stan nieaktywny wtyczka robi samą przezroczystością, przez co zielony
   robi się bladozielony. Szary czyta się jednoznacznie — tak samo jak
   "Continue" w kasie. */
.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;
}

/* Pól NIE przemalowuję i to jest decyzja, nie przeoczenie.
   Motyw ma własną regułę na inputy:

       input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea
       { border-color: #000; border-width: 1px }

   o specyficzności (0,3,1), a zaokrąglenie zeruje osobno dla wszystkich
   kontrolek. Czarna, kwadratowa ramka to ten sam wygląd, co pola w kasie —
   formularz zwrotów wygląda dzięki temu jak reszta sklepu bez ani jednej
   reguły z mojej strony. Zostaje tylko rozmiar pisma. */
.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 {
	/* Wtyczka daje tu cień 2px dookoła; na tej stronie nic nie ma cieni. */
	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: -0.2px;
}

/* Formularz sam się centruje (max-width: 600px; margin: 0 auto z wtyczki).
   Na telefonie 600px i tak nie działa, więc nie ma tu nic do robienia — ale
   gdybyś chciał go zostawić przy lewej krawędzi razem z tekstem strony,
   wystarczy ta jedna reguła. */
/*
.wrm-form-wrapper {
	margin-left: 0;
}
*/

/* ==========================================================================
   40. BANER — MINIMALISTYCZNY PLAYER BUNNY
   Aktywny wyłącznie dla banera z wlacz_player = true.

   Player nie uruchamia filmu automatycznie. Po zatrzymaniu filmu na środku
   widoczny jest duży przycisk PLAY. Dolny pasek sterowania pojawia się po
   ruchu kursora / dotknięciu i chowa po chwili bezczynności.
   ========================================================================== */

   .baner-player-shell {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
  }
  
  /* Duży PLAY na środku */
  .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 rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
  
    background: rgba(0, 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;
  
    margin-left: 4px;
  
    fill: currentColor;
  }
  
  .baner .baner-player__center-play:hover,
  .baner .baner-player__center-play:focus-visible {
    background: #fff !important;
    color: #000 !important;
    outline: none;
  }
  
  /* Po uruchomieniu filmu duży PLAY znika */
  .baner-player-shell.is-playing .baner-player__center-play {
    opacity: 0;
  
    transform: translate(-50%, -50%) scale(0.92);
  
    pointer-events: none;
  }
  
  
  /* ==========================================================================
     DOLNY PASEK PLAYERA
     ========================================================================== */
  
  .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 rgba(255, 255, 255, 0.42);
  
    background: rgba(0, 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;
  }
  
  /* Pasek widoczny po ruchu kursora / dotknięciu */
  .baner-player-shell.is-controls-visible .baner-player,
  .baner-player:focus-within {
    opacity: 1;
    visibility: visible;
  
    transform: translate(-50%, 0);
  
    pointer-events: auto;
  }
  
  
  /* ==========================================================================
     PRZYCISKI
     ========================================================================== */
  
  /* Nadpisanie globalnego stylu button z motywu */
  .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 rgba(255, 255, 255, 0.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;
  }
  
  /* PLAY / PAUSE */
  .baner-player-shell.is-playing .baner-player__icon--play {
    display: none;
  }
  
  .baner-player-shell.is-playing .baner-player__icon--pause {
    display: block;
  }
  
  /* MUTE / SOUND */
  .baner-player-shell:not(.is-muted) .baner-player__icon--muted {
    display: none;
  }
  
  .baner-player-shell:not(.is-muted) .baner-player__icon--sound {
    display: block;
  }
  
  
  /* ==========================================================================
     CZAS
     ========================================================================== */
  
  .baner-player__time {
    display: flex;
  
    flex: 0 0 auto;
  
    gap: 4px;
  
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  
    color: rgba(255, 255, 255, 0.82);
  }
  
  .baner-player__time-separator {
    color: rgba(255, 255, 255, 0.45);
  }
  
  
  /* ==========================================================================
     PASEK POSTĘPU
     ========================================================================== */
  
  .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;
  }
  
  
  /* Chrome / Safari */
  .baner-player__progress::-webkit-slider-runnable-track {
    height: 1px;
  
    background: rgba(255, 255, 255, 0.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;
  }
  
  
  /* Firefox */
  .baner-player__progress::-moz-range-track {
    height: 1px;
  
    background: rgba(255, 255, 255, 0.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;
  }
  
  
  /* ==========================================================================
     MOBILE
  
     Są dwa warianty:
  
     1. BRAK dedykowanego filmu mobile
        Desktopowy film NIE ma wypełniać całego wysokiego banera.
        Zachowuje proporcje, jest mniejszy i wyśrodkowany.
  
     2. JEST dedykowany film mobile
        Dopiero wtedy film wypełnia cały pionowy baner przez object-fit: cover.
     ========================================================================== */
  
     @media (max-width: 767px) {

      /* ==============================================================
         BRAK DEDYKOWANEJ WERSJI MOBILE
         Baner jest niższy, żeby treść nie "uciekała" pod film.
         ============================================================== */
    
      .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%;
      }
    
    
      /* ==============================================================
         TREŚĆ BANERA
         Przycisk / tekst siedzą nad dolną częścią filmu, a nie przy samym dole.
         ============================================================== */
    
      .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;
      }
    
    
      /* ==============================================================
         JEST DEDYKOWANA WERSJA MOBILE
         Pełna wysokość zostaje bez zmian.
         ============================================================== */
    
      .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%;
      }
    }

    /* ==========================================================================
   PLAYER — NISKIE EKRANY / LAPTOPY
   Przesunięcie kadru w dół, aby zachować napisy w filmie.
   ========================================================================== */

@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;
	}
}
/* ==========================================================================
   42. KASA — METODY PŁATNOŚCI
   WooCommerce / Stripe -> #payment .wc_payment_methods

   Cel: proste, biało-czarne kafelki zgodne z resztą Geschäft.
   Bez cieni, bez zaokrągleń, z równymi logo i czytelnym stanem
   wybranej metody.
   ========================================================================== */

   .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;
  }
  
  /* Kafelek metody płatności */
  .gsft-krok #payment .wc_payment_methods > li.wc_payment_method {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(37, 37, 37, 0.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: rgba(37, 37, 37, 0.55);
    }
  }
  
  /* Wybrana metoda */
  .gsft-krok #payment .wc_payment_methods > li.wc_payment_method:has(> input.input-radio:checked) {
    border-color: #252525;
    background: #fff;
  }
  
  /* Radio */
  .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;
  }
  
  /* Nazwa + logo */
  .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;
  }
  
  /* Logotypy */
  .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;
  }
  
  /* Karty */
  .gsft-krok #payment .payment_method_stripe_cc > label img {
    max-width: 128px;
    max-height: 24px;
  }
  
  /* BLIK */
  .gsft-krok #payment .payment_method_stripe_blik > label img {
    max-width: 74px;
    max-height: 28px;
  }
  
  /* Klarna */
  .gsft-krok #payment .payment_method_stripe_klarna > label img {
    max-width: 58px;
    max-height: 24px;
  }
  
  /* Przelewy24 */
  .gsft-krok #payment .payment_method_stripe_p24 > label img {
    max-width: 88px;
    max-height: 28px;
  }
  
  /* Apple Pay + Google Pay */
  .gsft-krok #payment .payment_method_stripe_applepay > label img,
  .gsft-krok #payment .payment_method_stripe_googlepay > label img {
    max-width: 56px;
    max-height: 28px;
  }
  
  /* Rozwinięta zawartość metody */
  .gsft-krok #payment .payment_box {
    position: relative;
  
    margin: 0;
    padding: 16px 18px 18px;
  
    border-top: 1px solid rgba(37, 37, 37, 0.12);
    background: #fff;
  
    font-size: 12px;
    line-height: 1.5;
    color: rgba(37, 37, 37, 0.68);
  }
  
  /* Usunięcie trójkąta WooCommerce */
  .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;
  }
  
  /* Stripe */
  .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;
  }
  
  /* Save to account */
  .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;
  }
  
  /* Dolna część */
  .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: rgba(37, 37, 37, 0.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;
  }
  
  /* Przycisk zamówienia */
  .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;
    }
  }
  
  /* Mobile */
  @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;
    }
  }  



  /* =========================================================
   CF7 COUPON FORM #6944
   ========================================================= */

/* ---------- DESKTOP ---------- */

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;
}


/* ---------- ZGODA ---------- */

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;
}


/* =========================================================
 MOBILE
 ========================================================= */

@media (max-width: 767px) {

  /* Główny wiersz formularza */
  div[id^="wpcf7-f6944-"] .coupon-row.center {
      display: block !important;
      width: 100% !important;
  }

  /* CF7 dodaje tutaj <p> - na mobile musi być blokiem */
  div[id^="wpcf7-f6944-"] .coupon-row.center > p {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
  }


  /* ---------- EMAIL ---------- */

  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;
  }


  /* ---------- PRZYCISK ---------- */

  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;
  }


  /* ---------- CHECKBOX / ZGODA ---------- */

  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;
  }

  /* Komunikat błędu zgody */
  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;
  }
}


/* =========================================================
 CF7 #6944 - KOMUNIKAT PO WYSŁANIU
 ========================================================= */

/* Ukryj komunikat zbiorczy tylko przy błędzie */
div[id^="wpcf7-f6944-"] form.invalid .wpcf7-response-output,
div[id^="wpcf7-f6944-"] form.unaccepted .wpcf7-response-output {
  display: none !important;
}

/* Pokaż komunikat po poprawnym wysłaniu */
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;
}